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

87
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

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;

45
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

54
tests/js/unitTests.js
View File

@@ -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({
@@ -1687,8 +1688,7 @@ Test.prototype.tests = {
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);
} }
@@ -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,