lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-18 18:27:58 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

attr change events are now only fired on root level attr changes. changed centerOffset property to offset property for consistency. did additonal refactoring

Browse Source
This commit is contained in:
Eric Rowell
2012-06-09 16:13:25 -07:00
parent bba1d0ad21
commit 13105969b1
7 changed files with 188 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
dist/kinetic-core.js vendored
View File

@@ -376,7 +376,7 @@ Kinetic.Node = function(config) {
y: 1
},
rotation: 0,
centerOffset: {
offset: {
x: 0,
y: 0
},
@@ -388,6 +388,8 @@ Kinetic.Node = function(config) {
this.setDefaultAttrs(this.defaultNodeAttrs);
this.eventListeners = {};
this.setAttrs(config);
// bind events
this.on('draggableChange.kinetic_reserved', function() {
if(this.attrs.draggable) {
@@ -397,8 +399,12 @@ Kinetic.Node = function(config) {
this._dragCleanup();
}
});
this.setAttrs(config);
/*
* simulate draggable change event
* to init drag and drop logic from the
* above event binder
*/
this.simulate('draggableChange');
};
/*
* Node methods
@@ -517,7 +523,8 @@ Kinetic.Node.prototype = {
// set properties from config
if(config !== undefined) {
function setAttrs(obj, c) {
function setAttrs(obj, c, level) {
for(var key in c) {
var val = c[key];
@@ -534,7 +541,7 @@ Kinetic.Node.prototype = {
if(obj[key] === undefined) {
obj[key] = {};
}
setAttrs(obj[key], val);
setAttrs(obj[key], val, level + 1);
}
/*
* add all other object types to attrs object
@@ -547,13 +554,9 @@ Kinetic.Node.prototype = {
// override key for change event
key = 'rotation';
break;
case 'centerOffset':
var pos = go._getXY(val);
that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y);
break;
/*
* includes:
* - node offset
* - fill pattern offset
* - shadow offset
*/
@@ -583,11 +586,17 @@ Kinetic.Node.prototype = {
break;
}
/*
* only fire change event for root
* level attrs
*/
if(level === 0) {
that._fireChangeEvent(key);
}
}
}
setAttrs(this.attrs, config);
}
setAttrs(this.attrs, config, 0);
}
},
/**
@@ -768,9 +777,9 @@ Kinetic.Node.prototype = {
x: this.attrs.scale.x,
y: this.attrs.scale.y
};
var centerOffset = {
x: this.attrs.centerOffset.x,
y: this.attrs.centerOffset.y
var offset = {
x: this.attrs.offset.x,
y: this.attrs.offset.y
};
this.attrs.rotation = 0;
@@ -1045,25 +1054,25 @@ Kinetic.Node.prototype = {
this._handleEvent(eventType, {});
},
/**
* set center offset
* set offset
* @param {Number} x
* @param {Number} y
*/
setCenterOffset: function() {
setOffset: function() {
this.setAttrs({
centerOffset: arguments
offset: arguments
});
},
/**
* get center offset
*/
getCenterOffset: function() {
return this.attrs.centerOffset;
getOffset: function() {
return this.attrs.offset;
},
/**
* transition node to another state. Any property that can accept a real
* number can be transitioned, including x, y, rotation, alpha, strokeWidth,
* radius, scale.x, scale.y, centerOffset.x, centerOffset.y, etc.
* radius, scale.x, scale.y, offset.x, offset.y, etc.
* @param {Object} config
* @config {Number} [duration] duration that the transition runs in seconds
* @config {String} [easing] easing function. can be linear, ease-in, ease-out, ease-in-out,
@@ -1548,13 +1557,24 @@ Kinetic.Stage = function(config) {
this._setStageDefaultProperties();
this._id = Kinetic.GlobalObject.idCounter++;
this._buildDOM();
this._bindEvents();
this._bindContentEvents();
this._prepareDrag();
//change events
this.on('widthChange.kinetic_reserved', function() {
this._resizeDOM();
});
this.on('heightChange.kinetic_reserved', function() {
this._resizeDOM();
});
var go = Kinetic.GlobalObject;
go.stages.push(this);
this._addId(this);
this._addName(this);
};
/*
* Stage methods
@@ -2117,7 +2137,7 @@ else if(!isDragging && this.touchMove) {
* begin listening for events by adding event handlers
* to the container
*/
_bindEvents: function() {
_bindContentEvents: function() {
var go = Kinetic.GlobalObject;
var that = this;
@@ -2210,16 +2230,6 @@ else if(!isDragging && this.touchMove) {
that._handleStageEvent(evt);
that.tapStart = false;
}, false);
/*
* change events
*/
this.on('widthChange.kinetic_reserved', function() {
this._resizeDOM();
});
this.on('heightChange.kinetic_reserved', function() {
this._resizeDOM();
});
},
/**
* set mouse positon for desktop apps
@@ -2418,6 +2428,7 @@ else if(!isDragging && this.touchMove) {
this.content.appendChild(this.pathLayer.canvas);
this.setSize(this.attrs.width, this.attrs.height);
this._resizeDOM();
},
_addId: function(node) {
if(node.attrs.id !== undefined) {
@@ -3115,8 +3126,8 @@ Kinetic.Shape.prototype = {
var t = node.getTransform();
// center offset
if(node.attrs.centerOffset.x !== 0 || node.attrs.centerOffset.y !== 0) {
t.translate(-1 * node.attrs.centerOffset.x, -1 * node.attrs.centerOffset.y);
if(node.attrs.offset.x !== 0 || node.attrs.offset.y !== 0) {
t.translate(-1 * node.attrs.offset.x, -1 * node.attrs.offset.y);
}
var m = t.getMatrix();

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

File diff suppressed because one or more lines are too long

49
src/Node.js
View File

@@ -21,7 +21,7 @@ Kinetic.Node = function(config) {
y: 1
},
rotation: 0,
centerOffset: {
offset: {
x: 0,
y: 0
},
@@ -33,6 +33,8 @@ Kinetic.Node = function(config) {
this.setDefaultAttrs(this.defaultNodeAttrs);
this.eventListeners = {};
this.setAttrs(config);
// bind events
this.on('draggableChange.kinetic_reserved', function() {
if(this.attrs.draggable) {
@@ -42,8 +44,12 @@ Kinetic.Node = function(config) {
this._dragCleanup();
}
});
this.setAttrs(config);
/*
* simulate draggable change event
* to init drag and drop logic from the
* above event binder
*/
this.simulate('draggableChange');
};
/*
* Node methods
@@ -162,7 +168,8 @@ Kinetic.Node.prototype = {
// set properties from config
if(config !== undefined) {
function setAttrs(obj, c) {
function setAttrs(obj, c, level) {
for(var key in c) {
var val = c[key];
@@ -179,7 +186,7 @@ Kinetic.Node.prototype = {
if(obj[key] === undefined) {
obj[key] = {};
}
setAttrs(obj[key], val);
setAttrs(obj[key], val, level + 1);
}
/*
* add all other object types to attrs object
@@ -192,13 +199,9 @@ Kinetic.Node.prototype = {
// override key for change event
key = 'rotation';
break;
case 'centerOffset':
var pos = go._getXY(val);
that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y);
break;
/*
* includes:
* - node offset
* - fill pattern offset
* - shadow offset
*/
@@ -228,11 +231,17 @@ Kinetic.Node.prototype = {
break;
}
/*
* only fire change event for root
* level attrs
*/
if(level === 0) {
that._fireChangeEvent(key);
}
}
}
setAttrs(this.attrs, config);
}
setAttrs(this.attrs, config, 0);
}
},
/**
@@ -413,9 +422,9 @@ Kinetic.Node.prototype = {
x: this.attrs.scale.x,
y: this.attrs.scale.y
};
var centerOffset = {
x: this.attrs.centerOffset.x,
y: this.attrs.centerOffset.y
var offset = {
x: this.attrs.offset.x,
y: this.attrs.offset.y
};
this.attrs.rotation = 0;
@@ -690,25 +699,25 @@ Kinetic.Node.prototype = {
this._handleEvent(eventType, {});
},
/**
* set center offset
* set offset
* @param {Number} x
* @param {Number} y
*/
setCenterOffset: function() {
setOffset: function() {
this.setAttrs({
centerOffset: arguments
offset: arguments
});
},
/**
* get center offset
*/
getCenterOffset: function() {
return this.attrs.centerOffset;
getOffset: function() {
return this.attrs.offset;
},
/**
* transition node to another state. Any property that can accept a real
* number can be transitioned, including x, y, rotation, alpha, strokeWidth,
* radius, scale.x, scale.y, centerOffset.x, centerOffset.y, etc.
* radius, scale.x, scale.y, offset.x, offset.y, etc.
* @param {Object} config
* @config {Number} [duration] duration that the transition runs in seconds
* @config {String} [easing] easing function. can be linear, ease-in, ease-out, ease-in-out,

4
src/Shape.js
View File

@@ -430,8 +430,8 @@ Kinetic.Shape.prototype = {
var t = node.getTransform();
// center offset
if(node.attrs.centerOffset.x !== 0 || node.attrs.centerOffset.y !== 0) {
t.translate(-1 * node.attrs.centerOffset.x, -1 * node.attrs.centerOffset.y);
if(node.attrs.offset.x !== 0 || node.attrs.offset.y !== 0) {
t.translate(-1 * node.attrs.offset.x, -1 * node.attrs.offset.y);
}
var m = t.getMatrix();

26
src/Stage.js
View File

@@ -33,13 +33,24 @@ Kinetic.Stage = function(config) {
this._setStageDefaultProperties();
this._id = Kinetic.GlobalObject.idCounter++;
this._buildDOM();
this._bindEvents();
this._bindContentEvents();
this._prepareDrag();
//change events
this.on('widthChange.kinetic_reserved', function() {
this._resizeDOM();
});
this.on('heightChange.kinetic_reserved', function() {
this._resizeDOM();
});
var go = Kinetic.GlobalObject;
go.stages.push(this);
this._addId(this);
this._addName(this);
};
/*
* Stage methods
@@ -602,7 +613,7 @@ else if(!isDragging && this.touchMove) {
* begin listening for events by adding event handlers
* to the container
*/
_bindEvents: function() {
_bindContentEvents: function() {
var go = Kinetic.GlobalObject;
var that = this;
@@ -695,16 +706,6 @@ else if(!isDragging && this.touchMove) {
that._handleStageEvent(evt);
that.tapStart = false;
}, false);
/*
* change events
*/
this.on('widthChange.kinetic_reserved', function() {
this._resizeDOM();
});
this.on('heightChange.kinetic_reserved', function() {
this._resizeDOM();
});
},
/**
* set mouse positon for desktop apps
@@ -903,6 +904,7 @@ else if(!isDragging && this.touchMove) {
this.content.appendChild(this.pathLayer.canvas);
this.setSize(this.attrs.width, this.attrs.height);
this._resizeDOM();
},
_addId: function(node) {
if(node.attrs.id !== undefined) {

20
tests/js/functionalTests.js
View File

@@ -236,7 +236,7 @@ Test.prototype.tests = {
fill: 'green',
stroke: 'black',
strokeWidth: 4,
centerOffset: {
offset: {
x: 50,
y: 25
}
@@ -281,7 +281,7 @@ Test.prototype.tests = {
fill: 'green',
stroke: 'black',
strokeWidth: 4,
centerOffset: {
offset: {
x: 50,
y: 25
}
@@ -328,7 +328,7 @@ Test.prototype.tests = {
fill: 'green',
stroke: 'black',
strokeWidth: 4,
centerOffset: {
offset: {
x: 50,
y: 25
}
@@ -375,7 +375,7 @@ Test.prototype.tests = {
fill: 'green',
stroke: 'black',
strokeWidth: 4,
centerOffset: {
offset: {
x: 50,
y: 25
}
@@ -444,7 +444,7 @@ Test.prototype.tests = {
fill: 'green',
stroke: 'black',
strokeWidth: 4,
centerOffset: {
offset: {
x: 50,
y: 25
}
@@ -458,7 +458,7 @@ Test.prototype.tests = {
fill: 'blue',
stroke: 'black',
strokeWidth: 4,
centerOffset: {
offset: {
x: 50,
y: 25
}
@@ -472,7 +472,7 @@ Test.prototype.tests = {
fill: 'red',
stroke: 'black',
strokeWidth: 4,
centerOffset: {
offset: {
x: 50,
y: 25
}
@@ -1254,7 +1254,7 @@ Test.prototype.tests = {
y: 15
}
},
centerOffset: {
offset: {
x: 10,
y: 10
}
@@ -1271,7 +1271,7 @@ Test.prototype.tests = {
y: 5
}
},
centerOffset: {
offset: {
x: 0,
y: 0
}
@@ -1898,7 +1898,7 @@ Test.prototype.tests = {
x: 2,
y: 1
},
centerOffset: {
offset: {
x: 50,
y: 25
}

122
tests/js/unitTests.js
View File

@@ -237,7 +237,7 @@ Test.prototype.tests = {
group.add(circle);
layer.draw();
var expectedJson = '{"attrs":{"width":578,"height":200,"throttle":80,"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"throttle":80,"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"radius":70,"fill":"green","stroke":"black","strokeWidth":4,"detectionType":"path","shadow":{"blur":10,"alpha":1,"offset":{"x":0,"y":0}},"visible":true,"listen":true,"name":"myCircle","alpha":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true},"nodeType":"Shape","shapeType":"Circle"}]}]}]}';
var expectedJson = '{"attrs":{"width":578,"height":200,"throttle":80,"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"throttle":80,"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"radius":70,"fill":"green","stroke":"black","strokeWidth":4,"detectionType":"path","shadow":{"blur":10,"alpha":1,"offset":{"x":0,"y":0}},"visible":true,"listen":true,"name":"myCircle","alpha":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true},"nodeType":"Shape","shapeType":"Circle"}]}]}]}';
test(stage.toJSON() === expectedJson, 'problem with serialization');
},
'STAGE - reset stage': function(containerId) {
@@ -322,7 +322,7 @@ Test.prototype.tests = {
height: 200
});
var json = '{"attrs":{"width":578,"height":200,"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"throttle":80,"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"radius":70,"fill":"green","stroke":"black","strokeWidth":4,"detectionType":"path","shadow":{"blur":10,"alpha":1,"offset":{"x":0,"y":0}},"visible":true,"listen":true,"name":"myCircle","alpha":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true},"nodeType":"Shape","shapeType":"Circle"}]}]}]}';
var json = '{"attrs":{"width":578,"height":200,"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"throttle":80,"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"radius":70,"fill":"green","stroke":"black","strokeWidth":4,"detectionType":"path","shadow":{"blur":10,"alpha":1,"offset":{"x":0,"y":0}},"visible":true,"listen":true,"name":"myCircle","alpha":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true},"nodeType":"Shape","shapeType":"Circle"}]}]}]}';
stage.load(json);
test(stage.toJSON() === json, "problem loading stage with json");
@@ -361,7 +361,7 @@ Test.prototype.tests = {
test(triangle.getId() === 'myTriangle', 'triangle id should be myTriangle');
var expectedJson = '{"attrs":{"width":578,"height":200,"throttle":80,"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"throttle":80,"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"fill":"#00D2FF","stroke":"black","strokeWidth":4,"detectionType":"path","shadow":{"blur":10,"alpha":1,"offset":{"x":0,"y":0}},"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
var expectedJson = '{"attrs":{"width":578,"height":200,"throttle":80,"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"throttle":80,"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"fill":"#00D2FF","stroke":"black","strokeWidth":4,"detectionType":"path","shadow":{"blur":10,"alpha":1,"offset":{"x":0,"y":0}},"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
test(stage.toJSON() === expectedJson, "problem serializing stage with custom shape");
},
'STAGE - load stage with custom shape using json': function(containerId) {
@@ -381,7 +381,7 @@ Test.prototype.tests = {
this.fill();
this.stroke();
};
var json = '{"attrs":{"width":578,"height":200,"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"throttle":80,"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"fill":"#00D2FF","stroke":"black","strokeWidth":4,"detectionType":"path","shadow":{"blur":10,"alpha":1,"offset":{"x":0,"y":0}},"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
var json = '{"attrs":{"width":578,"height":200,"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"throttle":80,"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"fill":"#00D2FF","stroke":"black","strokeWidth":4,"detectionType":"path","shadow":{"blur":10,"alpha":1,"offset":{"x":0,"y":0}},"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
stage.load(json);
var customShape = stage.get('#myTriangle')[0];
@@ -797,7 +797,7 @@ Test.prototype.tests = {
x: 200,
y: 60,
image: imageObj,
centerOffset: {
offset: {
x: 50,
y: imageObj.height / 2
},
@@ -809,7 +809,7 @@ Test.prototype.tests = {
var json = stage.toJSON();
test(json === '{"attrs":{"width":578,"height":200,"throttle":80,"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"throttle":80,"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"crop":{"x":0,"y":0},"detectionType":"path","shadow":{"blur":10,"alpha":1,"offset":{"x":0,"y":0}},"visible":true,"listen":true,"alpha":1,"x":200,"y":60,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":50,"y":150},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"darth"},"nodeType":"Shape","shapeType":"Image"}]}]}');
test(json === '{"attrs":{"width":578,"height":200,"throttle":80,"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"throttle":80,"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"crop":{"x":0,"y":0},"detectionType":"path","shadow":{"blur":10,"alpha":1,"offset":{"x":0,"y":0}},"visible":true,"listen":true,"alpha":1,"x":200,"y":60,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":50,"y":150},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"darth"},"nodeType":"Shape","shapeType":"Image"}]}]}');
};
imageObj.src = '../darth-vader.jpg';
},
@@ -822,7 +822,7 @@ Test.prototype.tests = {
height: 200
});
var json = '{"attrs":{"width":578,"height":200,"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"crop":{"x":0,"y":0},"detectionType":"path","visible":true,"listen":true,"alpha":1,"x":200,"y":60,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":50,"y":150},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"darth"},"nodeType":"Shape","shapeType":"Image"}]}]}';
var json = '{"attrs":{"width":578,"height":200,"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"crop":{"x":0,"y":0},"detectionType":"path","visible":true,"listen":true,"alpha":1,"x":200,"y":60,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":50,"y":150},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"darth"},"nodeType":"Shape","shapeType":"Image"}]}]}';
stage.load(json);
var image = stage.get('#darth')[0];
image.setImage(imageObj);
@@ -1254,7 +1254,7 @@ Test.prototype.tests = {
fill: 'green',
stroke: 'black',
strokeWidth: 4,
centerOffset: {
offset: {
x: 50
},
scale: [2, 2],
@@ -1285,7 +1285,7 @@ Test.prototype.tests = {
fill: 'green',
stroke: 'black',
strokeWidth: 4,
centerOffset: {
offset: {
x: 0,
y: 0
},
@@ -1684,7 +1684,7 @@ Test.prototype.tests = {
fill: 'green',
stroke: 'black',
strokeWidth: 4,
centerOffset: {
offset: {
x: 0,
y: 0
},
@@ -1747,7 +1747,7 @@ Test.prototype.tests = {
image: imageObj,
width: 100,
height: 100,
centerOffset: [50, 30],
offset: [50, 30],
crop: [20, 20, 200, 250]
});
@@ -1758,8 +1758,8 @@ Test.prototype.tests = {
test(darth.getY() === 60, 'y should be 60');
test(darth.getWidth() === 100, 'width should be 100');
test(darth.getHeight() === 100, 'height should be 100');
test(darth.getCenterOffset().x === 50, 'center offset x should be 50');
test(darth.getCenterOffset().y === 30, 'center offset y should be 30');
test(darth.getOffset().x === 50, 'center offset x should be 50');
test(darth.getOffset().y === 30, 'center offset y should be 30');
test(Kinetic.GlobalObject._isElement(darth.getImage()), 'darth image should be an element');
var crop = null;
@@ -2126,7 +2126,7 @@ Test.prototype.tests = {
stroke: 'blue',
strokeWidth: 5,
name: 'foobar',
centerOffset: {
offset: {
x: 0,
y: -50
}
@@ -2220,7 +2220,7 @@ Test.prototype.tests = {
stroke: 'blue',
strokeWidth: 5,
name: 'foobar',
centerOffset: {
offset: {
x: 0,
y: -70
},
@@ -2396,7 +2396,7 @@ Test.prototype.tests = {
width: 100,
height: 50,
stroke: 'blue',
centerOffset: {
offset: {
x: 20,
y: 20
}
@@ -2405,13 +2405,13 @@ Test.prototype.tests = {
layer.add(rect);
stage.add(layer);
test(rect.getCenterOffset().x === 20, 'center offset x should be 20');
test(rect.getCenterOffset().y === 20, 'center offset y should be 20');
test(rect.getOffset().x === 20, 'center offset x should be 20');
test(rect.getOffset().y === 20, 'center offset y should be 20');
rect.setCenterOffset(40, 40);
rect.setOffset(40, 40);
test(rect.getCenterOffset().x === 40, 'center offset x should be 40');
test(rect.getCenterOffset().y === 40, 'center offset y should be 40');
test(rect.getOffset().x === 40, 'center offset x should be 40');
test(rect.getOffset().y === 40, 'center offset y should be 40');
},
'SHAPE - apply shadow to transparent image': function(containerId) {
@@ -2911,6 +2911,52 @@ Test.prototype.tests = {
rect2.listen(true);
test(rect2.isListening() === true, 'rect2 should be listening');
},
'NODE - test offset attr change': function(containerId) {
/*
* the premise of this test to make sure that only
* root level attributes trigger an attr change event.
* for this test, we have two offset properties. one
* is in the root level, and the other is inside the shadow
* object
*/
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',
offset: [10, 10],
shadow: {
color: 'black',
offset: [20, 20]
}
});
layer.add(rect);
stage.add(layer);
var offsetChange = false;
var shadowOffsetChange = false;
rect.on('offsetChange', function() {
offsetChange = true;
});
rect.setOffset(1, 2);
rect.setShadow({
offset: [3, 4]
});
test(offsetChange, 'offsetChange should have been triggered with setOffset()');
test(!shadowOffsetChange, 'offsetChange should not have been triggered with setShadow()');
},
'NODE - test on attr change': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
@@ -2997,7 +3043,7 @@ Test.prototype.tests = {
test(rect.getShadow().offset.x === 5, 'shadow offset x should be 5');
test(rect.getShadow().offset.y === 6, 'shadow offset y should be 6');
},
'NODE - test setCenterOffset': function(containerId) {
'NODE - test setOffset': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@@ -3015,32 +3061,32 @@ Test.prototype.tests = {
layer.add(rect);
stage.add(layer);
rect.setCenterOffset(1, 2);
test(rect.getCenterOffset().x === 1, 'center offset x should be 1');
test(rect.getCenterOffset().y === 2, 'center offset y should be 2');
rect.setOffset(1, 2);
test(rect.getOffset().x === 1, 'center offset x should be 1');
test(rect.getOffset().y === 2, 'center offset y should be 2');
rect.setCenterOffset([3, 4]);
test(rect.getCenterOffset().x === 3, 'center offset x should be 3');
test(rect.getCenterOffset().y === 4, 'center offset y should be 4');
rect.setOffset([3, 4]);
test(rect.getOffset().x === 3, 'center offset x should be 3');
test(rect.getOffset().y === 4, 'center offset y should be 4');
rect.setCenterOffset({
rect.setOffset({
x: 5,
y: 6
});
test(rect.getCenterOffset().x === 5, 'center offset x should be 5');
test(rect.getCenterOffset().y === 6, 'center offset y should be 6');
test(rect.getOffset().x === 5, 'center offset x should be 5');
test(rect.getOffset().y === 6, 'center offset y should be 6');
rect.setCenterOffset({
rect.setOffset({
x: 7
});
test(rect.getCenterOffset().x === 7, 'center offset x should be 7');
test(rect.getCenterOffset().y === 6, 'center offset y should be 6');
test(rect.getOffset().x === 7, 'center offset x should be 7');
test(rect.getOffset().y === 6, 'center offset y should be 6');
rect.setCenterOffset({
rect.setOffset({
y: 8
});
test(rect.getCenterOffset().x === 7, 'center offset x should be 7');
test(rect.getCenterOffset().y === 8, 'center offset y should be 8');
test(rect.getOffset().x === 7, 'center offset x should be 7');
test(rect.getOffset().y === 8, 'center offset y should be 8');
},
'NODE - test setPosition and move': function(containerId) {
@@ -3573,7 +3619,7 @@ Test.prototype.tests = {
x: 2,
y: 1
},
centerOffset: {
offset: {
x: 50,
y: 25
}