Skip to content

Commit

Permalink
turns out there was no performance problems with the path (made a dum…
Browse files Browse the repository at this point in the history 
…b mistake with implementation). However, during the analysis, I ended up adding event detection throttling which is pretty handy. It cuts down unecessary mousemove event handling dramatically and greatly improves performance when you have thousands of shapes
  • Loading branch information
@ericdrowell
ericdrowell committed May 28, 2012
1 parent cc35abd commit a2defa4
Show file tree
Hide file tree
Showing 7 changed files with 95 additions and 66 deletions.
50 changes: 32 additions & 18 deletions dist/kinetic-core.js
View file
Expand Up @@ -1468,10 +1468,12 @@ Kinetic.Container.prototype = {
Kinetic.Stage = function(config) {
this.setDefaultAttrs({
width: 400,
height: 200
height: 200,
throttle: 80
});

this.nodeType = 'Stage';
this.lastEventTime = 0;

/*
* if container is a string, assume it's an id for
Expand Down Expand Up @@ -2003,11 +2005,26 @@ Kinetic.Stage.prototype = {

return false;
},
_handleStageEvent: function(evt) {
var throttle = this.attrs.throttle;
var date = new Date();
var time = date.getTime();
var timeDiff = time - this.lastEventTime;
var tt = 1000 / throttle;

if(timeDiff >= tt) {
this._handleStageEventContinue(evt);
}
},
/**
* handle incoming event
* @param {Event} evt
*/
_handleStageEvent: function(evt) {
_handleStageEventContinue: function(evt) {
var date = new Date();
var time = date.getTime();
this.lastEventTime = time;

var go = Kinetic.GlobalObject;
if(!evt) {
evt = window.event;
Expand Down Expand Up @@ -2077,10 +2094,11 @@ Kinetic.Stage.prototype = {
that._handleStageEvent(evt);
that.clickStart = false;
}, false);

this.content.addEventListener('mouseover', function(evt) {
that._handleStageEvent(evt);
}, false);
/*
this.content.addEventListener('mouseover', function(evt) {
that._handleStageEvent(evt);
}, false);
*/

this.content.addEventListener('mouseout', function(evt) {
// if there's a current target shape, run mouseout handlers
Expand All @@ -2095,14 +2113,14 @@ Kinetic.Stage.prototype = {
this.content.addEventListener('touchstart', function(evt) {
evt.preventDefault();
that.touchStart = true;

/*
* init stage drag and drop
*/
if(that.attrs.draggable) {
that._initDrag();
}

that._handleStageEvent(evt);
}, false);

Expand Down Expand Up @@ -4072,24 +4090,20 @@ Kinetic.Path = function(config) {
var c = ca[n].command;
var p = ca[n].points;
switch(c) {
case 'M':
context.moveTo(p[0], p[1]);
break;
case 'L':
context.lineTo(p[0], p[1]);
break;
case 'M':
context.moveTo(p[0], p[1]);
break;
case 'z':
context.closePath();
break;
}
}
context.closePath();
//this.fill();

context.fillStyle = '#999';
context.fill();
context.strokeStyle = '#555';
context.stroke();
//this.stroke();
this.fill();
this.stroke();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
Expand Down
4 changes: 2 additions & 2 deletions dist/kinetic-core.min.js
View file

Large diffs are not rendered by default.

34 changes: 26 additions & 8 deletions src/Stage.js
View file
Expand Up @@ -14,10 +14,12 @@
Kinetic.Stage = function(config) {
this.setDefaultAttrs({
width: 400,
height: 200
height: 200,
throttle: 80
});

this.nodeType = 'Stage';
this.lastEventTime = 0;

/*
* if container is a string, assume it's an id for
Expand Down Expand Up @@ -549,11 +551,26 @@ Kinetic.Stage.prototype = {

return false;
},
_handleStageEvent: function(evt) {
var throttle = this.attrs.throttle;
var date = new Date();
var time = date.getTime();
var timeDiff = time - this.lastEventTime;
var tt = 1000 / throttle;

if(timeDiff >= tt) {
this._handleStageEventContinue(evt);
}
},
/**
* handle incoming event
* @param {Event} evt
*/
_handleStageEvent: function(evt) {
_handleStageEventContinue: function(evt) {
var date = new Date();
var time = date.getTime();
this.lastEventTime = time;

var go = Kinetic.GlobalObject;
if(!evt) {
evt = window.event;
Expand Down Expand Up @@ -623,10 +640,11 @@ Kinetic.Stage.prototype = {
that._handleStageEvent(evt);
that.clickStart = false;
}, false);

this.content.addEventListener('mouseover', function(evt) {
that._handleStageEvent(evt);
}, false);
/*
this.content.addEventListener('mouseover', function(evt) {
that._handleStageEvent(evt);
}, false);
*/

this.content.addEventListener('mouseout', function(evt) {
// if there's a current target shape, run mouseout handlers
Expand All @@ -641,14 +659,14 @@ Kinetic.Stage.prototype = {
this.content.addEventListener('touchstart', function(evt) {
evt.preventDefault();
that.touchStart = true;

/*
* init stage drag and drop
*/
if(that.attrs.draggable) {
that._initDrag();
}

that._handleStageEvent(evt);
}, false);

Expand Down
16 changes: 6 additions & 10 deletions src/shapes/Path.js
View file
Expand Up @@ -23,24 +23,20 @@ Kinetic.Path = function(config) {
var c = ca[n].command;
var p = ca[n].points;
switch(c) {
case 'M':
context.moveTo(p[0], p[1]);
break;
case 'L':
context.lineTo(p[0], p[1]);
break;
case 'M':
context.moveTo(p[0], p[1]);
break;
case 'z':
context.closePath();
break;
}
}
context.closePath();
//this.fill();

context.fillStyle = '#999';
context.fill();
context.strokeStyle = '#555';
context.stroke();
//this.stroke();
this.fill();
this.stroke();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
Expand Down
4 changes: 2 additions & 2 deletions tests/assets/worldMap.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion tests/js/Test.js
View file
Expand Up @@ -16,7 +16,7 @@ function log(message) {
* Test constructor
*/
function Test() {
this.testOnly = 'SHAPE - add path';
this.testOnly = '';
this.counter = 0;

testCounter = document.createElement('div');
Expand Down
51 changes: 26 additions & 25 deletions tests/js/unitTests.js
View file
Expand Up @@ -1173,38 +1173,39 @@ Test.prototype.tests = {
var stage = new Kinetic.Stage({
container: containerId,
width: 1024,
height: 480
height: 480,
throttle: 80,
scale: 0.5,
x: 50,
y: 10
});
var layer = new Kinetic.Layer();

for(var key in worldMap) {
var c = worldMap[key];
// induce scope
( function() {
var path = new Kinetic.Path({
commands: c,
fill: '#ccc',
stroke: '#999',
strokeWidth: 1
});
var mapLayer = new Kinetic.Layer();

path.on('mouseover', function() {
//console.log(1)
//path.setFill('red');
//layer.draw();
});
for(var key in worldMap.shapes) {
var c = worldMap.shapes[key];

path.on('mouseout', function() {
//path.setFill('#ccc');
//layer.draw();
});
var path = new Kinetic.Path({
commands: c,
fill: '#ccc',
stroke: '#999',
strokeWidth: 1
});

layer.add(path);
path.on('mouseover', function() {
//console.log(1)
this.setFill('red');
mapLayer.draw();
});

}());
path.on('mouseout', function() {
this.setFill('#ccc');
mapLayer.draw();
});

stage.add(layer);
mapLayer.add(path);
}

stage.add(mapLayer);

},
'SHAPE - add shape with custom attr pointing to self': function(containerId) {
Expand Down

0 comments on commit a2defa4

Please sign in to comment.