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;
}
},
/*
* set attr
*/
_setAttr: function(obj, attr, val) {
if(val !== undefined) {
obj[attr] = val;
}
}
};
@@ -548,15 +540,15 @@ Kinetic.Node.prototype = {
that.listen(c[key]);
break;
case 'rotationDeg':
obj.rotation = c[key] * Math.PI / 180;
that._setAttr(obj, 'rotation', c[key] * Math.PI / 180);
break;
/*
* config objects
*/
case 'centerOffset':
var pos = go._getXY(val);
go._setAttr(obj[key], 'x', pos.x);
go._setAttr(obj[key], 'y', pos.y);
that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y);
break;
/*
* includes:
@@ -565,28 +557,28 @@ Kinetic.Node.prototype = {
*/
case 'offset':
var pos = go._getXY(val);
go._setAttr(obj[key], 'x', pos.x);
go._setAttr(obj[key], 'y', pos.y);
that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y);
break;
case 'scale':
var pos = go._getXY(val);
go._setAttr(obj[key], 'x', pos.x);
go._setAttr(obj[key], 'y', pos.y);
that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y);
break;
case 'points':
obj[key] = go._getPoints(val);
that._setAttr(obj, key, go._getPoints(val));
break;
case 'crop':
var pos = go._getXY(val);
var size = go._getSize(val);
go._setAttr(obj[key], 'x', pos.x);
go._setAttr(obj[key], 'y', pos.y);
go._setAttr(obj[key], 'width', size.width);
go._setAttr(obj[key], 'height', size.height);
that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y);
that._setAttr(obj[key], 'width', size.width);
that._setAttr(obj[key], 'height', size.height);
break;
default:
obj[key] = c[key];
that._setAttr(obj, key, c[key]);
break;
}
}
@@ -1175,6 +1167,14 @@ Kinetic.Node.prototype = {
return m;
},
_setAttr: function(obj, attr, val) {
if(val !== undefined) {
obj[attr] = val;
if(this.getStage() !== undefined) {
this._handleEvent(attr + 'Change', {});
}
}
},
_listenDrag: function() {
this._dragCleanup();
var go = Kinetic.GlobalObject;
@@ -1576,27 +1576,7 @@ Kinetic.Stage.prototype = {
this.attrs.width = Math.round(this.attrs.width);
this.attrs.height = Math.round(this.attrs.height);
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();
}
this._resizeDOM();
},
/**
* return stage size
@@ -1829,6 +1809,29 @@ Kinetic.Stage.prototype = {
getDOM: function() {
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
* @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;
}
},
/*
* 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]);
break;
case 'rotationDeg':
obj.rotation = c[key] * Math.PI / 180;
that._setAttr(obj, 'rotation', c[key] * Math.PI / 180);
break;
/*
* config objects
*/
case 'centerOffset':
var pos = go._getXY(val);
go._setAttr(obj[key], 'x', pos.x);
go._setAttr(obj[key], 'y', pos.y);
that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y);
break;
/*
* includes:
@@ -202,28 +202,28 @@ Kinetic.Node.prototype = {
*/
case 'offset':
var pos = go._getXY(val);
go._setAttr(obj[key], 'x', pos.x);
go._setAttr(obj[key], 'y', pos.y);
that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y);
break;
case 'scale':
var pos = go._getXY(val);
go._setAttr(obj[key], 'x', pos.x);
go._setAttr(obj[key], 'y', pos.y);
that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y);
break;
case 'points':
obj[key] = go._getPoints(val);
that._setAttr(obj, key, go._getPoints(val));
break;
case 'crop':
var pos = go._getXY(val);
var size = go._getSize(val);
go._setAttr(obj[key], 'x', pos.x);
go._setAttr(obj[key], 'y', pos.y);
go._setAttr(obj[key], 'width', size.width);
go._setAttr(obj[key], 'height', size.height);
that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y);
that._setAttr(obj[key], 'width', size.width);
that._setAttr(obj[key], 'height', size.height);
break;
default:
obj[key] = c[key];
that._setAttr(obj, key, c[key]);
break;
}
}
@@ -812,6 +812,14 @@ Kinetic.Node.prototype = {
return m;
},
_setAttr: function(obj, attr, val) {
if(val !== undefined) {
obj[attr] = val;
if(this.getStage() !== undefined) {
this._handleEvent(attr + 'Change', {});
}
}
},
_listenDrag: function() {
this._dragCleanup();
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.height = Math.round(this.attrs.height);
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();
}
this._resizeDOM();
},
/**
* return stage size
@@ -354,6 +334,29 @@ Kinetic.Stage.prototype = {
getDOM: function() {
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
* @param {Layer} layer

54
tests/js/unitTests.js
View File

@@ -402,21 +402,22 @@ Test.prototype.tests = {
strokeWidth: 4
});
test(stage.getSize().width === 578, 'stage height should be 578');
test(stage.getSize().height === 200, 'stage width should be 200');
test(stage.getDOM().style.width === '578px', 'content height should be 578px');
test(stage.getDOM().style.height === '200px', 'content width 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');
test(stage.getSize().width === 578, 'stage width should be 578');
test(stage.getSize().height === 200, 'stage height should be 200');
test(stage.getDOM().style.width === '578px', 'content width should be 578px');
test(stage.getDOM().style.height === '200px', 'content height should be 200px');
layer.add(circle);
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) {
var stage = new Kinetic.Stage({
@@ -1687,8 +1688,7 @@ Test.prototype.tests = {
var layer = new Kinetic.Layer();
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]);
group.add(path);
}
@@ -2905,6 +2905,34 @@ Test.prototype.tests = {
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) {
var stage = new Kinetic.Stage({
container: containerId,