lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-11-18 09:07:30 +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;
}
},
/*
* 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
@@ -2168,7 +2171,7 @@ else if(!isDragging && this.touchMove) {
var time = date.getTime();
var timeDiff = time - that.lastEventTime;
var tt = 1000 / throttle;
if(timeDiff >= tt) {
evt.preventDefault();
that.touchMove = true;
@@ -2275,7 +2278,7 @@ else if(!isDragging && this.touchMove) {
this._onContent('mousemove touchmove', function(evt) {
var go = Kinetic.GlobalObject;
var node = go.drag.node;
if(node) {
var pos = that.getUserPosition();
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;
}
},
/*
* 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;

49
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
@@ -693,7 +696,7 @@ else if(!isDragging && this.touchMove) {
var time = date.getTime();
var timeDiff = time - that.lastEventTime;
var tt = 1000 / throttle;
if(timeDiff >= tt) {
evt.preventDefault();
that.touchMove = true;
@@ -800,7 +803,7 @@ else if(!isDragging && this.touchMove) {
this._onContent('mousemove touchmove', function(evt) {
var go = Kinetic.GlobalObject;
var node = go.drag.node;
if(node) {
var pos = that.getUserPosition();
var dc = node.attrs.dragConstraint;

82
tests/js/unitTests.js
View File

@@ -35,7 +35,7 @@ Test.prototype.tests = {
strokeWidth: 4,
name: 'myCircle'
});
test(stage.getSize().width === 578 && stage.getSize().height === 200, 'stage size should be 1 x 2');
stage.setSize(1, 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');
stage.setSize([1, 1, 10, 11]);
test(stage.getSize().width === 10 && stage.getSize().height === 11, 'stage size should be 10 x 11');
// test integer conversion
stage.setSize(300.2, 200.2);
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
});
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({
@@ -1674,30 +1675,29 @@ Test.prototype.tests = {
layer.add(path);
stage.add(layer);
},
},
'SHAPE - Tiger (RAWR!)': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 1024,
height: 480,
height: 480,
scale: 0.25,
x: 50,
y: 50
});
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);
}
group.draggable(true);
layer.add(group);
stage.add(layer);
},
},
'SHAPE - add shape with custom attr pointing to self': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
@@ -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,
@@ -3576,11 +3604,11 @@ Test.prototype.tests = {
circle.on('click', function() {
foo = 'bar';
/*
var evt = window.event;
var rightClick = evt.which ? evt.which == 3 : evt.button == 2;
console.log(rightClick);
*/
/*
var evt = window.event;
var rightClick = evt.which ? evt.which == 3 : evt.button == 2;
console.log(rightClick);
*/
});
circle.simulate('click');
@@ -3613,9 +3641,9 @@ Test.prototype.tests = {
circle.on('click', function() {
clicks.push('circle');
});
layer.on('click', function() {
clicks.push('layer');
clicks.push('layer');
});
circle.simulate('click');