lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-11-18 17:21:36 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

first step to exposing event driven architecture. Devs can subscribe to attr change events with the on method. e.g. shape.on('widthChange', function(){...})

Browse Source
This commit is contained in:
Eric Rowell
2012-06-08 21:56:33 -07:00
parent 440c3ac279
commit 2cd24309ac
6 changed files with 151 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
dist/kinetic-core.js vendored
View File

@@ -343,14 +343,6 @@ Kinetic.GlobalObject = {
return arr; return arr;
} }
},
/*
* set attr
*/
_setAttr: function(obj, attr, val) {
if(val !== undefined) {
obj[attr] = val;
}
} }
}; };
@@ -548,15 +540,15 @@ Kinetic.Node.prototype = {
that.listen(c[key]); that.listen(c[key]);
break; break;
case 'rotationDeg': case 'rotationDeg':
obj.rotation = c[key] * Math.PI / 180; that._setAttr(obj, 'rotation', c[key] * Math.PI / 180);
break; break;
/* /*
* config objects * config objects
*/ */
case 'centerOffset': case 'centerOffset':
var pos = go._getXY(val); var pos = go._getXY(val);
go._setAttr(obj[key], 'x', pos.x); that._setAttr(obj[key], 'x', pos.x);
go._setAttr(obj[key], 'y', pos.y); that._setAttr(obj[key], 'y', pos.y);
break; break;
/* /*
* includes: * includes:
@@ -565,28 +557,28 @@ Kinetic.Node.prototype = {
*/ */
case 'offset': case 'offset':
var pos = go._getXY(val); var pos = go._getXY(val);
go._setAttr(obj[key], 'x', pos.x); that._setAttr(obj[key], 'x', pos.x);
go._setAttr(obj[key], 'y', pos.y); that._setAttr(obj[key], 'y', pos.y);
break; break;
case 'scale': case 'scale':
var pos = go._getXY(val); var pos = go._getXY(val);
go._setAttr(obj[key], 'x', pos.x); that._setAttr(obj[key], 'x', pos.x);
go._setAttr(obj[key], 'y', pos.y); that._setAttr(obj[key], 'y', pos.y);
break; break;
case 'points': case 'points':
obj[key] = go._getPoints(val); that._setAttr(obj, key, go._getPoints(val));
break; break;
case 'crop': case 'crop':
var pos = go._getXY(val); var pos = go._getXY(val);
var size = go._getSize(val); var size = go._getSize(val);
go._setAttr(obj[key], 'x', pos.x); that._setAttr(obj[key], 'x', pos.x);
go._setAttr(obj[key], 'y', pos.y); that._setAttr(obj[key], 'y', pos.y);
go._setAttr(obj[key], 'width', size.width); that._setAttr(obj[key], 'width', size.width);
go._setAttr(obj[key], 'height', size.height); that._setAttr(obj[key], 'height', size.height);
break; break;
default: default:
obj[key] = c[key]; that._setAttr(obj, key, c[key]);
break; break;
} }
} }
@@ -1175,6 +1167,14 @@ Kinetic.Node.prototype = {
return m; return m;
}, },
_setAttr: function(obj, attr, val) {
if(val !== undefined) {
obj[attr] = val;
if(this.getStage() !== undefined) {
this._handleEvent(attr + 'Change', {});
}
}
},
_listenDrag: function() { _listenDrag: function() {
this._dragCleanup(); this._dragCleanup();
var go = Kinetic.GlobalObject; var go = Kinetic.GlobalObject;
@@ -1576,27 +1576,7 @@ Kinetic.Stage.prototype = {
this.attrs.width = Math.round(this.attrs.width); this.attrs.width = Math.round(this.attrs.width);
this.attrs.height = Math.round(this.attrs.height); this.attrs.height = Math.round(this.attrs.height);
var width = this.attrs.width; this._resizeDOM();
var height = this.attrs.height;
// set content dimensions
this.content.style.width = width + 'px';
this.content.style.height = height + 'px';
// set buffer layer and path layer sizes
this.bufferLayer.getCanvas().width = width;
this.bufferLayer.getCanvas().height = height;
this.pathLayer.getCanvas().width = width;
this.pathLayer.getCanvas().height = height;
// set user defined layer dimensions
var layers = this.children;
for(var n = 0; n < layers.length; n++) {
var layer = layers[n];
layer.getCanvas().width = width;
layer.getCanvas().height = height;
layer.draw();
}
}, },
/** /**
* return stage size * return stage size
@@ -1829,6 +1809,29 @@ Kinetic.Stage.prototype = {
getDOM: function() { getDOM: function() {
return this.content; return this.content;
}, },
_resizeDOM: function() {
var width = this.attrs.width;
var height = this.attrs.height;
// set content dimensions
this.content.style.width = width + 'px';
this.content.style.height = height + 'px';
// set buffer layer and path layer sizes
this.bufferLayer.getCanvas().width = width;
this.bufferLayer.getCanvas().height = height;
this.pathLayer.getCanvas().width = width;
this.pathLayer.getCanvas().height = height;
// set user defined layer dimensions
var layers = this.children;
for(var n = 0; n < layers.length; n++) {
var layer = layers[n];
layer.getCanvas().width = width;
layer.getCanvas().height = height;
layer.draw();
}
},
/** /**
* remove layer from stage * remove layer from stage
* @param {Layer} layer * @param {Layer} layer
@@ -2168,7 +2171,7 @@ else if(!isDragging && this.touchMove) {
var time = date.getTime(); var time = date.getTime();
var timeDiff = time - that.lastEventTime; var timeDiff = time - that.lastEventTime;
var tt = 1000 / throttle; var tt = 1000 / throttle;
if(timeDiff >= tt) { if(timeDiff >= tt) {
evt.preventDefault(); evt.preventDefault();
that.touchMove = true; that.touchMove = true;
@@ -2275,7 +2278,7 @@ else if(!isDragging && this.touchMove) {
this._onContent('mousemove touchmove', function(evt) { this._onContent('mousemove touchmove', function(evt) {
var go = Kinetic.GlobalObject; var go = Kinetic.GlobalObject;
var node = go.drag.node; var node = go.drag.node;
if(node) { if(node) {
var pos = that.getUserPosition(); var pos = that.getUserPosition();
var dc = node.attrs.dragConstraint; var dc = node.attrs.dragConstraint;

4
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
src/GlobalObject.js
View File

@@ -315,14 +315,6 @@ Kinetic.GlobalObject = {
return arr; return arr;
} }
},
/*
* set attr
*/
_setAttr: function(obj, attr, val) {
if(val !== undefined) {
obj[attr] = val;
}
} }
}; };

34
src/Node.js
View File

@@ -185,15 +185,15 @@ Kinetic.Node.prototype = {
that.listen(c[key]); that.listen(c[key]);
break; break;
case 'rotationDeg': case 'rotationDeg':
obj.rotation = c[key] * Math.PI / 180; that._setAttr(obj, 'rotation', c[key] * Math.PI / 180);
break; break;
/* /*
* config objects * config objects
*/ */
case 'centerOffset': case 'centerOffset':
var pos = go._getXY(val); var pos = go._getXY(val);
go._setAttr(obj[key], 'x', pos.x); that._setAttr(obj[key], 'x', pos.x);
go._setAttr(obj[key], 'y', pos.y); that._setAttr(obj[key], 'y', pos.y);
break; break;
/* /*
* includes: * includes:
@@ -202,28 +202,28 @@ Kinetic.Node.prototype = {
*/ */
case 'offset': case 'offset':
var pos = go._getXY(val); var pos = go._getXY(val);
go._setAttr(obj[key], 'x', pos.x); that._setAttr(obj[key], 'x', pos.x);
go._setAttr(obj[key], 'y', pos.y); that._setAttr(obj[key], 'y', pos.y);
break; break;
case 'scale': case 'scale':
var pos = go._getXY(val); var pos = go._getXY(val);
go._setAttr(obj[key], 'x', pos.x); that._setAttr(obj[key], 'x', pos.x);
go._setAttr(obj[key], 'y', pos.y); that._setAttr(obj[key], 'y', pos.y);
break; break;
case 'points': case 'points':
obj[key] = go._getPoints(val); that._setAttr(obj, key, go._getPoints(val));
break; break;
case 'crop': case 'crop':
var pos = go._getXY(val); var pos = go._getXY(val);
var size = go._getSize(val); var size = go._getSize(val);
go._setAttr(obj[key], 'x', pos.x); that._setAttr(obj[key], 'x', pos.x);
go._setAttr(obj[key], 'y', pos.y); that._setAttr(obj[key], 'y', pos.y);
go._setAttr(obj[key], 'width', size.width); that._setAttr(obj[key], 'width', size.width);
go._setAttr(obj[key], 'height', size.height); that._setAttr(obj[key], 'height', size.height);
break; break;
default: default:
obj[key] = c[key]; that._setAttr(obj, key, c[key]);
break; break;
} }
} }
@@ -812,6 +812,14 @@ Kinetic.Node.prototype = {
return m; return m;
}, },
_setAttr: function(obj, attr, val) {
if(val !== undefined) {
obj[attr] = val;
if(this.getStage() !== undefined) {
this._handleEvent(attr + 'Change', {});
}
}
},
_listenDrag: function() { _listenDrag: function() {
this._dragCleanup(); this._dragCleanup();
var go = Kinetic.GlobalObject; var go = Kinetic.GlobalObject;

49
src/Stage.js
View File

@@ -101,27 +101,7 @@ Kinetic.Stage.prototype = {
this.attrs.width = Math.round(this.attrs.width); this.attrs.width = Math.round(this.attrs.width);
this.attrs.height = Math.round(this.attrs.height); this.attrs.height = Math.round(this.attrs.height);
var width = this.attrs.width; this._resizeDOM();
var height = this.attrs.height;
// set content dimensions
this.content.style.width = width + 'px';
this.content.style.height = height + 'px';
// set buffer layer and path layer sizes
this.bufferLayer.getCanvas().width = width;
this.bufferLayer.getCanvas().height = height;
this.pathLayer.getCanvas().width = width;
this.pathLayer.getCanvas().height = height;
// set user defined layer dimensions
var layers = this.children;
for(var n = 0; n < layers.length; n++) {
var layer = layers[n];
layer.getCanvas().width = width;
layer.getCanvas().height = height;
layer.draw();
}
}, },
/** /**
* return stage size * return stage size
@@ -354,6 +334,29 @@ Kinetic.Stage.prototype = {
getDOM: function() { getDOM: function() {
return this.content; return this.content;
}, },
_resizeDOM: function() {
var width = this.attrs.width;
var height = this.attrs.height;
// set content dimensions
this.content.style.width = width + 'px';
this.content.style.height = height + 'px';
// set buffer layer and path layer sizes
this.bufferLayer.getCanvas().width = width;
this.bufferLayer.getCanvas().height = height;
this.pathLayer.getCanvas().width = width;
this.pathLayer.getCanvas().height = height;
// set user defined layer dimensions
var layers = this.children;
for(var n = 0; n < layers.length; n++) {
var layer = layers[n];
layer.getCanvas().width = width;
layer.getCanvas().height = height;
layer.draw();
}
},
/** /**
* remove layer from stage * remove layer from stage
* @param {Layer} layer * @param {Layer} layer
@@ -693,7 +696,7 @@ else if(!isDragging && this.touchMove) {
var time = date.getTime(); var time = date.getTime();
var timeDiff = time - that.lastEventTime; var timeDiff = time - that.lastEventTime;
var tt = 1000 / throttle; var tt = 1000 / throttle;
if(timeDiff >= tt) { if(timeDiff >= tt) {
evt.preventDefault(); evt.preventDefault();
that.touchMove = true; that.touchMove = true;
@@ -800,7 +803,7 @@ else if(!isDragging && this.touchMove) {
this._onContent('mousemove touchmove', function(evt) { this._onContent('mousemove touchmove', function(evt) {
var go = Kinetic.GlobalObject; var go = Kinetic.GlobalObject;
var node = go.drag.node; var node = go.drag.node;
if(node) { if(node) {
var pos = that.getUserPosition(); var pos = that.getUserPosition();
var dc = node.attrs.dragConstraint; var dc = node.attrs.dragConstraint;

82
tests/js/unitTests.js
View File

@@ -35,7 +35,7 @@ Test.prototype.tests = {
strokeWidth: 4, strokeWidth: 4,
name: 'myCircle' name: 'myCircle'
}); });
test(stage.getSize().width === 578 && stage.getSize().height === 200, 'stage size should be 1 x 2'); test(stage.getSize().width === 578 && stage.getSize().height === 200, 'stage size should be 1 x 2');
stage.setSize(1, 2); stage.setSize(1, 2);
test(stage.getSize().width === 1 && stage.getSize().height === 2, 'stage size should be 1 x 2'); test(stage.getSize().width === 1 && stage.getSize().height === 2, 'stage size should be 1 x 2');
@@ -58,7 +58,7 @@ Test.prototype.tests = {
test(stage.getSize().width === 8 && stage.getSize().height === 9, 'stage size should be 8 x 9'); test(stage.getSize().width === 8 && stage.getSize().height === 9, 'stage size should be 8 x 9');
stage.setSize([1, 1, 10, 11]); stage.setSize([1, 1, 10, 11]);
test(stage.getSize().width === 10 && stage.getSize().height === 11, 'stage size should be 10 x 11'); test(stage.getSize().width === 10 && stage.getSize().height === 11, 'stage size should be 10 x 11');
// test integer conversion // test integer conversion
stage.setSize(300.2, 200.2); stage.setSize(300.2, 200.2);
test(stage.getSize().width === 300 && stage.getSize().height === 200, 'stage size should be 300 x 200'); test(stage.getSize().width === 300 && stage.getSize().height === 200, 'stage size should be 300 x 200');
@@ -402,21 +402,22 @@ Test.prototype.tests = {
strokeWidth: 4 strokeWidth: 4
}); });
test(stage.getSize().width === 578, 'stage height should be 578'); test(stage.getSize().width === 578, 'stage width should be 578');
test(stage.getSize().height === 200, 'stage width should be 200'); test(stage.getSize().height === 200, 'stage height should be 200');
test(stage.getDOM().style.width === '578px', 'content height should be 578px'); test(stage.getDOM().style.width === '578px', 'content width should be 578px');
test(stage.getDOM().style.height === '200px', 'content width should be 200px'); test(stage.getDOM().style.height === '200px', 'content height should be 200px');
stage.setSize(300, 150);
test(stage.getSize().width === 300, 'stage height should be 300');
test(stage.getSize().height === 150, 'stage width should be 150');
test(stage.getDOM().style.width === '300px', 'content height should be 300px');
test(stage.getDOM().style.height === '150px', 'content width should be 150px');
layer.add(circle); layer.add(circle);
stage.add(layer); stage.add(layer);
stage.setSize(333, 155);
test(stage.getSize().width === 333, 'stage width should be 333');
test(stage.getSize().height === 155, 'stage height should be 155');
test(stage.getDOM().style.width === '333px', 'content width should be 333');
test(stage.getDOM().style.height === '155px', 'content height should be 155px');
test(layer.getCanvas().width === 333, 'layer canvas width should be 333');
test(layer.getCanvas().height === 155, 'layer canvas width should be 155');
}, },
'STAGE - test getShapesInPoint': function(containerId) { 'STAGE - test getShapesInPoint': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@@ -1674,30 +1675,29 @@ Test.prototype.tests = {
layer.add(path); layer.add(path);
stage.add(layer); stage.add(layer);
}, },
'SHAPE - Tiger (RAWR!)': function(containerId) { 'SHAPE - Tiger (RAWR!)': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 1024, width: 1024,
height: 480, height: 480,
scale: 0.25, scale: 0.25,
x: 50, x: 50,
y: 50 y: 50
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var group = new Kinetic.Group(); var group = new Kinetic.Group();
for (var i=0; i < tiger.length; i++) for(var i = 0; i < tiger.length; i++) {
{
var path = new Kinetic.Path(tiger[i]); var path = new Kinetic.Path(tiger[i]);
group.add(path); group.add(path);
} }
group.draggable(true); group.draggable(true);
layer.add(group); layer.add(group);
stage.add(layer); stage.add(layer);
}, },
'SHAPE - add shape with custom attr pointing to self': function(containerId) { 'SHAPE - add shape with custom attr pointing to self': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
@@ -2905,6 +2905,34 @@ Test.prototype.tests = {
layer.draw(); layer.draw();
}, },
'NODE - test on attr change': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 50,
y: 50,
width: 200,
height: 50,
fill: 'blue'
});
layer.add(rect);
stage.add(layer);
var widthChangeTriggered = false;
rect.on('widthChange', function() {
widthChangeTriggered = true;
});
rect.setSize(200);
test(widthChangeTriggered, 'changing rect size should have triggered on attr change');
},
'NODE - test setting shadow offset': function(containerId) { 'NODE - test setting shadow offset': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
@@ -3576,11 +3604,11 @@ Test.prototype.tests = {
circle.on('click', function() { circle.on('click', function() {
foo = 'bar'; foo = 'bar';
/* /*
var evt = window.event; var evt = window.event;
var rightClick = evt.which ? evt.which == 3 : evt.button == 2; var rightClick = evt.which ? evt.which == 3 : evt.button == 2;
console.log(rightClick); console.log(rightClick);
*/ */
}); });
circle.simulate('click'); circle.simulate('click');
@@ -3613,9 +3641,9 @@ Test.prototype.tests = {
circle.on('click', function() { circle.on('click', function() {
clicks.push('circle'); clicks.push('circle');
}); });
layer.on('click', function() { layer.on('click', function() {
clicks.push('layer'); clicks.push('layer');
}); });
circle.simulate('click'); circle.simulate('click');