mirror of
https://github.com/konvajs/konva.git
synced 2025-06-28 15:23:44 +08:00
now leveraging the setAttrs method for all setters in Node class. utilizing draggableChange attr event to trigger drag and drop inits
This commit is contained in:
Eric Rowell
parent
9697af530c
commit
bba1d0ad21
141
dist/kinetic-core.js
vendored
141
dist/kinetic-core.js
vendored
@ -366,7 +366,7 @@ window.requestAnimFrame = (function(callback) {
|
||||
Kinetic.Node = function(config) {
|
||||
this.defaultNodeAttrs = {
|
||||
visible: true,
|
||||
listening: true,
|
||||
listen: true,
|
||||
name: undefined,
|
||||
alpha: 1,
|
||||
x: 0,
|
||||
@ -387,6 +387,17 @@ Kinetic.Node = function(config) {
|
||||
|
||||
this.setDefaultAttrs(this.defaultNodeAttrs);
|
||||
this.eventListeners = {};
|
||||
|
||||
// bind events
|
||||
this.on('draggableChange.kinetic_reserved', function() {
|
||||
if(this.attrs.draggable) {
|
||||
this._listenDrag();
|
||||
}
|
||||
else {
|
||||
this._dragCleanup();
|
||||
}
|
||||
});
|
||||
|
||||
this.setAttrs(config);
|
||||
};
|
||||
/*
|
||||
@ -531,23 +542,11 @@ Kinetic.Node.prototype = {
|
||||
else {
|
||||
// handle special keys
|
||||
switch (key) {
|
||||
/*
|
||||
* config properties that require a method
|
||||
*/
|
||||
case 'draggable':
|
||||
that.draggable(c[key]);
|
||||
break;
|
||||
case 'listening':
|
||||
that.listen(c[key]);
|
||||
break;
|
||||
case 'rotationDeg':
|
||||
that._setAttr(obj, 'rotation', c[key] * Math.PI / 180);
|
||||
// override key for change event
|
||||
key = 'rotation';
|
||||
break;
|
||||
/*
|
||||
* config objects
|
||||
*/
|
||||
case 'centerOffset':
|
||||
var pos = go._getXY(val);
|
||||
that._setAttr(obj[key], 'x', pos.x);
|
||||
@ -606,13 +605,17 @@ Kinetic.Node.prototype = {
|
||||
* show node
|
||||
*/
|
||||
show: function() {
|
||||
this.attrs.visible = true;
|
||||
this.setAttrs({
|
||||
visible: true
|
||||
});
|
||||
},
|
||||
/**
|
||||
* hide node
|
||||
*/
|
||||
hide: function() {
|
||||
this.attrs.visible = false;
|
||||
this.setAttrs({
|
||||
visible: false
|
||||
});
|
||||
},
|
||||
/**
|
||||
* get zIndex
|
||||
@ -694,14 +697,18 @@ Kinetic.Node.prototype = {
|
||||
* @param {Number} x
|
||||
*/
|
||||
setX: function(x) {
|
||||
this.attrs.x = x;
|
||||
this.setAttrs({
|
||||
x: x
|
||||
});
|
||||
},
|
||||
/**
|
||||
* set node y position
|
||||
* @param {Number} y
|
||||
*/
|
||||
setY: function(y) {
|
||||
this.attrs.y = y;
|
||||
this.setAttrs({
|
||||
y: y
|
||||
});
|
||||
},
|
||||
/**
|
||||
* get node x position
|
||||
@ -720,7 +727,9 @@ Kinetic.Node.prototype = {
|
||||
* @param {String} type can be "path" or "pixel"
|
||||
*/
|
||||
setDetectionType: function(type) {
|
||||
this.attrs.detectionType = type;
|
||||
this.setAttrs({
|
||||
detectionType: type
|
||||
});
|
||||
},
|
||||
/**
|
||||
* get detection type
|
||||
@ -790,26 +799,41 @@ Kinetic.Node.prototype = {
|
||||
},
|
||||
/**
|
||||
* move node by an amount
|
||||
* @param {Number} x
|
||||
* @param {Number} y
|
||||
*/
|
||||
move: function(x, y) {
|
||||
this.attrs.x += x;
|
||||
this.attrs.y += y;
|
||||
move: function() {
|
||||
var pos = Kinetic.GlobalObject._getXY(arguments);
|
||||
|
||||
var x = this.getX();
|
||||
var y = this.getY();
|
||||
|
||||
if(pos.x !== undefined) {
|
||||
x += pos.x;
|
||||
}
|
||||
|
||||
if(pos.y !== undefined) {
|
||||
y += pos.y;
|
||||
}
|
||||
|
||||
this.setAttrs({
|
||||
x: x,
|
||||
y: y
|
||||
});
|
||||
},
|
||||
/**
|
||||
* set node rotation in radians
|
||||
* @param {Number} theta
|
||||
*/
|
||||
setRotation: function(theta) {
|
||||
this.attrs.rotation = theta;
|
||||
this.setAttrs({
|
||||
rotation: theta
|
||||
});
|
||||
},
|
||||
/**
|
||||
* set node rotation in degrees
|
||||
* @param {Number} deg
|
||||
*/
|
||||
setRotationDeg: function(deg) {
|
||||
this.attrs.rotation = (deg * Math.PI / 180);
|
||||
this.setRotation(deg * Math.PI / 180);
|
||||
},
|
||||
/**
|
||||
* get rotation in radians
|
||||
@ -828,21 +852,33 @@ Kinetic.Node.prototype = {
|
||||
* @param {Number} theta
|
||||
*/
|
||||
rotate: function(theta) {
|
||||
this.attrs.rotation += theta;
|
||||
this.setAttrs({
|
||||
rotation: this.getRotation() + theta
|
||||
});
|
||||
},
|
||||
/**
|
||||
* rotate node by an amount in degrees
|
||||
* @param {Number} deg
|
||||
*/
|
||||
rotateDeg: function(deg) {
|
||||
this.attrs.rotation += (deg * Math.PI / 180);
|
||||
this.setAttrs({
|
||||
rotation: this.getRotation() + (deg * Math.PI / 180)
|
||||
});
|
||||
},
|
||||
/**
|
||||
* listen or don't listen to events
|
||||
* @param {Boolean} listening
|
||||
* @param {Boolean} listen
|
||||
*/
|
||||
listen: function(listening) {
|
||||
this.attrs.listening = listening;
|
||||
listen: function(listen) {
|
||||
this.setAttrs({
|
||||
listen: listen
|
||||
});
|
||||
},
|
||||
/**
|
||||
* is listening or not
|
||||
*/
|
||||
isListening: function() {
|
||||
return this.attrs.listen;
|
||||
},
|
||||
/**
|
||||
* move node to top
|
||||
@ -899,7 +935,9 @@ Kinetic.Node.prototype = {
|
||||
* @param {Object} alpha
|
||||
*/
|
||||
setAlpha: function(alpha) {
|
||||
this.attrs.alpha = alpha;
|
||||
this.setAttrs({
|
||||
alpha: alpha
|
||||
});
|
||||
},
|
||||
/**
|
||||
* get alpha. Alpha values range from 0 to 1.
|
||||
@ -924,18 +962,12 @@ Kinetic.Node.prototype = {
|
||||
},
|
||||
/**
|
||||
* enable or disable drag and drop
|
||||
* @param {Boolean} isDraggable
|
||||
* @param {Boolean} draggable
|
||||
*/
|
||||
draggable: function(isDraggable) {
|
||||
if(this.attrs.draggable !== isDraggable) {
|
||||
if(isDraggable) {
|
||||
this._listenDrag();
|
||||
}
|
||||
else {
|
||||
this._dragCleanup();
|
||||
}
|
||||
this.attrs.draggable = isDraggable;
|
||||
}
|
||||
draggable: function(draggable) {
|
||||
this.setAttrs({
|
||||
draggable: draggable
|
||||
});
|
||||
},
|
||||
/**
|
||||
* determine if node is currently in drag and drop mode
|
||||
@ -1101,7 +1133,9 @@ Kinetic.Node.prototype = {
|
||||
* @param {String} constraint
|
||||
*/
|
||||
setDragConstraint: function(constraint) {
|
||||
this.attrs.dragConstraint = constraint;
|
||||
this.setAttrs({
|
||||
dragConstraint: constraint
|
||||
});
|
||||
},
|
||||
/**
|
||||
* get drag constraint
|
||||
@ -1118,7 +1152,9 @@ Kinetic.Node.prototype = {
|
||||
* @config {Number} [bottom] bottom bounds position
|
||||
*/
|
||||
setDragBounds: function(bounds) {
|
||||
this.attrs.dragBounds = bounds;
|
||||
this.setAttrs({
|
||||
dragBounds: bounds
|
||||
});
|
||||
},
|
||||
/**
|
||||
* get drag bounds
|
||||
@ -1172,9 +1208,7 @@ Kinetic.Node.prototype = {
|
||||
return m;
|
||||
},
|
||||
_fireChangeEvent: function(attr) {
|
||||
if(this.getStage() !== undefined) {
|
||||
this._handleEvent(attr + 'Change', {});
|
||||
}
|
||||
this._handleEvent(attr + 'Change', {});
|
||||
},
|
||||
_setAttr: function(obj, attr, val) {
|
||||
if(val !== undefined) {
|
||||
@ -1218,8 +1252,8 @@ Kinetic.Node.prototype = {
|
||||
}
|
||||
|
||||
var stage = this.getStage();
|
||||
var mouseoverNode = stage.mouseoverShape;
|
||||
var mouseoutNode = stage.mouseoutShape;
|
||||
var mouseoverNode = stage ? stage.mouseoverShape : null;
|
||||
var mouseoutNode = stage ? stage.mouseoutShape : null;
|
||||
var el = this.eventListeners;
|
||||
var okayToRun = true;
|
||||
|
||||
@ -1514,7 +1548,7 @@ Kinetic.Stage = function(config) {
|
||||
this._setStageDefaultProperties();
|
||||
this._id = Kinetic.GlobalObject.idCounter++;
|
||||
this._buildDOM();
|
||||
this._listen();
|
||||
this._bindEvents();
|
||||
this._prepareDrag();
|
||||
|
||||
var go = Kinetic.GlobalObject;
|
||||
@ -2018,7 +2052,7 @@ else if(!isDragging && this.touchMove) {
|
||||
// propapgate backwards through children
|
||||
for(var i = children.length - 1; i >= 0; i--) {
|
||||
var child = children[i];
|
||||
if(child.attrs.listening) {
|
||||
if(child.attrs.listen) {
|
||||
if(child.nodeType === 'Shape') {
|
||||
var exit = this._detectEvent(child, evt);
|
||||
if(exit) {
|
||||
@ -2062,7 +2096,7 @@ else if(!isDragging && this.touchMove) {
|
||||
var shapeDetected = false;
|
||||
for(var n = this.children.length - 1; n >= 0; n--) {
|
||||
var layer = this.children[n];
|
||||
if(layer.isVisible() && n >= 0 && layer.attrs.listening) {
|
||||
if(layer.isVisible() && n >= 0 && layer.attrs.listen) {
|
||||
if(this._traverseChildren(layer, evt)) {
|
||||
shapeDetected = true;
|
||||
break;
|
||||
@ -2083,7 +2117,7 @@ else if(!isDragging && this.touchMove) {
|
||||
* begin listening for events by adding event handlers
|
||||
* to the container
|
||||
*/
|
||||
_listen: function() {
|
||||
_bindEvents: function() {
|
||||
var go = Kinetic.GlobalObject;
|
||||
var that = this;
|
||||
|
||||
@ -2384,7 +2418,6 @@ 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) {
|
||||
|
||||
4
dist/kinetic-core.min.js
vendored
4
dist/kinetic-core.min.js
vendored
File diff suppressed because one or more lines are too long
132
src/Node.js
132
src/Node.js
@ -11,7 +11,7 @@
|
||||
Kinetic.Node = function(config) {
|
||||
this.defaultNodeAttrs = {
|
||||
visible: true,
|
||||
listening: true,
|
||||
listen: true,
|
||||
name: undefined,
|
||||
alpha: 1,
|
||||
x: 0,
|
||||
@ -32,6 +32,17 @@ Kinetic.Node = function(config) {
|
||||
|
||||
this.setDefaultAttrs(this.defaultNodeAttrs);
|
||||
this.eventListeners = {};
|
||||
|
||||
// bind events
|
||||
this.on('draggableChange.kinetic_reserved', function() {
|
||||
if(this.attrs.draggable) {
|
||||
this._listenDrag();
|
||||
}
|
||||
else {
|
||||
this._dragCleanup();
|
||||
}
|
||||
});
|
||||
|
||||
this.setAttrs(config);
|
||||
};
|
||||
/*
|
||||
@ -176,23 +187,11 @@ Kinetic.Node.prototype = {
|
||||
else {
|
||||
// handle special keys
|
||||
switch (key) {
|
||||
/*
|
||||
* config properties that require a method
|
||||
*/
|
||||
case 'draggable':
|
||||
that.draggable(c[key]);
|
||||
break;
|
||||
case 'listening':
|
||||
that.listen(c[key]);
|
||||
break;
|
||||
case 'rotationDeg':
|
||||
that._setAttr(obj, 'rotation', c[key] * Math.PI / 180);
|
||||
// override key for change event
|
||||
key = 'rotation';
|
||||
break;
|
||||
/*
|
||||
* config objects
|
||||
*/
|
||||
case 'centerOffset':
|
||||
var pos = go._getXY(val);
|
||||
that._setAttr(obj[key], 'x', pos.x);
|
||||
@ -251,13 +250,17 @@ Kinetic.Node.prototype = {
|
||||
* show node
|
||||
*/
|
||||
show: function() {
|
||||
this.attrs.visible = true;
|
||||
this.setAttrs({
|
||||
visible: true
|
||||
});
|
||||
},
|
||||
/**
|
||||
* hide node
|
||||
*/
|
||||
hide: function() {
|
||||
this.attrs.visible = false;
|
||||
this.setAttrs({
|
||||
visible: false
|
||||
});
|
||||
},
|
||||
/**
|
||||
* get zIndex
|
||||
@ -339,14 +342,18 @@ Kinetic.Node.prototype = {
|
||||
* @param {Number} x
|
||||
*/
|
||||
setX: function(x) {
|
||||
this.attrs.x = x;
|
||||
this.setAttrs({
|
||||
x: x
|
||||
});
|
||||
},
|
||||
/**
|
||||
* set node y position
|
||||
* @param {Number} y
|
||||
*/
|
||||
setY: function(y) {
|
||||
this.attrs.y = y;
|
||||
this.setAttrs({
|
||||
y: y
|
||||
});
|
||||
},
|
||||
/**
|
||||
* get node x position
|
||||
@ -365,7 +372,9 @@ Kinetic.Node.prototype = {
|
||||
* @param {String} type can be "path" or "pixel"
|
||||
*/
|
||||
setDetectionType: function(type) {
|
||||
this.attrs.detectionType = type;
|
||||
this.setAttrs({
|
||||
detectionType: type
|
||||
});
|
||||
},
|
||||
/**
|
||||
* get detection type
|
||||
@ -435,26 +444,41 @@ Kinetic.Node.prototype = {
|
||||
},
|
||||
/**
|
||||
* move node by an amount
|
||||
* @param {Number} x
|
||||
* @param {Number} y
|
||||
*/
|
||||
move: function(x, y) {
|
||||
this.attrs.x += x;
|
||||
this.attrs.y += y;
|
||||
move: function() {
|
||||
var pos = Kinetic.GlobalObject._getXY(arguments);
|
||||
|
||||
var x = this.getX();
|
||||
var y = this.getY();
|
||||
|
||||
if(pos.x !== undefined) {
|
||||
x += pos.x;
|
||||
}
|
||||
|
||||
if(pos.y !== undefined) {
|
||||
y += pos.y;
|
||||
}
|
||||
|
||||
this.setAttrs({
|
||||
x: x,
|
||||
y: y
|
||||
});
|
||||
},
|
||||
/**
|
||||
* set node rotation in radians
|
||||
* @param {Number} theta
|
||||
*/
|
||||
setRotation: function(theta) {
|
||||
this.attrs.rotation = theta;
|
||||
this.setAttrs({
|
||||
rotation: theta
|
||||
});
|
||||
},
|
||||
/**
|
||||
* set node rotation in degrees
|
||||
* @param {Number} deg
|
||||
*/
|
||||
setRotationDeg: function(deg) {
|
||||
this.attrs.rotation = (deg * Math.PI / 180);
|
||||
this.setRotation(deg * Math.PI / 180);
|
||||
},
|
||||
/**
|
||||
* get rotation in radians
|
||||
@ -473,21 +497,33 @@ Kinetic.Node.prototype = {
|
||||
* @param {Number} theta
|
||||
*/
|
||||
rotate: function(theta) {
|
||||
this.attrs.rotation += theta;
|
||||
this.setAttrs({
|
||||
rotation: this.getRotation() + theta
|
||||
});
|
||||
},
|
||||
/**
|
||||
* rotate node by an amount in degrees
|
||||
* @param {Number} deg
|
||||
*/
|
||||
rotateDeg: function(deg) {
|
||||
this.attrs.rotation += (deg * Math.PI / 180);
|
||||
this.setAttrs({
|
||||
rotation: this.getRotation() + (deg * Math.PI / 180)
|
||||
});
|
||||
},
|
||||
/**
|
||||
* listen or don't listen to events
|
||||
* @param {Boolean} listening
|
||||
* @param {Boolean} listen
|
||||
*/
|
||||
listen: function(listening) {
|
||||
this.attrs.listening = listening;
|
||||
listen: function(listen) {
|
||||
this.setAttrs({
|
||||
listen: listen
|
||||
});
|
||||
},
|
||||
/**
|
||||
* is listening or not
|
||||
*/
|
||||
isListening: function() {
|
||||
return this.attrs.listen;
|
||||
},
|
||||
/**
|
||||
* move node to top
|
||||
@ -544,7 +580,9 @@ Kinetic.Node.prototype = {
|
||||
* @param {Object} alpha
|
||||
*/
|
||||
setAlpha: function(alpha) {
|
||||
this.attrs.alpha = alpha;
|
||||
this.setAttrs({
|
||||
alpha: alpha
|
||||
});
|
||||
},
|
||||
/**
|
||||
* get alpha. Alpha values range from 0 to 1.
|
||||
@ -569,18 +607,12 @@ Kinetic.Node.prototype = {
|
||||
},
|
||||
/**
|
||||
* enable or disable drag and drop
|
||||
* @param {Boolean} isDraggable
|
||||
* @param {Boolean} draggable
|
||||
*/
|
||||
draggable: function(isDraggable) {
|
||||
if(this.attrs.draggable !== isDraggable) {
|
||||
if(isDraggable) {
|
||||
this._listenDrag();
|
||||
}
|
||||
else {
|
||||
this._dragCleanup();
|
||||
}
|
||||
this.attrs.draggable = isDraggable;
|
||||
}
|
||||
draggable: function(draggable) {
|
||||
this.setAttrs({
|
||||
draggable: draggable
|
||||
});
|
||||
},
|
||||
/**
|
||||
* determine if node is currently in drag and drop mode
|
||||
@ -746,7 +778,9 @@ Kinetic.Node.prototype = {
|
||||
* @param {String} constraint
|
||||
*/
|
||||
setDragConstraint: function(constraint) {
|
||||
this.attrs.dragConstraint = constraint;
|
||||
this.setAttrs({
|
||||
dragConstraint: constraint
|
||||
});
|
||||
},
|
||||
/**
|
||||
* get drag constraint
|
||||
@ -763,7 +797,9 @@ Kinetic.Node.prototype = {
|
||||
* @config {Number} [bottom] bottom bounds position
|
||||
*/
|
||||
setDragBounds: function(bounds) {
|
||||
this.attrs.dragBounds = bounds;
|
||||
this.setAttrs({
|
||||
dragBounds: bounds
|
||||
});
|
||||
},
|
||||
/**
|
||||
* get drag bounds
|
||||
@ -817,9 +853,7 @@ Kinetic.Node.prototype = {
|
||||
return m;
|
||||
},
|
||||
_fireChangeEvent: function(attr) {
|
||||
if(this.getStage() !== undefined) {
|
||||
this._handleEvent(attr + 'Change', {});
|
||||
}
|
||||
this._handleEvent(attr + 'Change', {});
|
||||
},
|
||||
_setAttr: function(obj, attr, val) {
|
||||
if(val !== undefined) {
|
||||
@ -863,8 +897,8 @@ Kinetic.Node.prototype = {
|
||||
}
|
||||
|
||||
var stage = this.getStage();
|
||||
var mouseoverNode = stage.mouseoverShape;
|
||||
var mouseoutNode = stage.mouseoutShape;
|
||||
var mouseoverNode = stage ? stage.mouseoverShape : null;
|
||||
var mouseoutNode = stage ? stage.mouseoutShape : null;
|
||||
var el = this.eventListeners;
|
||||
var okayToRun = true;
|
||||
|
||||
|
||||
@ -33,7 +33,7 @@ Kinetic.Stage = function(config) {
|
||||
this._setStageDefaultProperties();
|
||||
this._id = Kinetic.GlobalObject.idCounter++;
|
||||
this._buildDOM();
|
||||
this._listen();
|
||||
this._bindEvents();
|
||||
this._prepareDrag();
|
||||
|
||||
var go = Kinetic.GlobalObject;
|
||||
@ -537,7 +537,7 @@ else if(!isDragging && this.touchMove) {
|
||||
// propapgate backwards through children
|
||||
for(var i = children.length - 1; i >= 0; i--) {
|
||||
var child = children[i];
|
||||
if(child.attrs.listening) {
|
||||
if(child.attrs.listen) {
|
||||
if(child.nodeType === 'Shape') {
|
||||
var exit = this._detectEvent(child, evt);
|
||||
if(exit) {
|
||||
@ -581,7 +581,7 @@ else if(!isDragging && this.touchMove) {
|
||||
var shapeDetected = false;
|
||||
for(var n = this.children.length - 1; n >= 0; n--) {
|
||||
var layer = this.children[n];
|
||||
if(layer.isVisible() && n >= 0 && layer.attrs.listening) {
|
||||
if(layer.isVisible() && n >= 0 && layer.attrs.listen) {
|
||||
if(this._traverseChildren(layer, evt)) {
|
||||
shapeDetected = true;
|
||||
break;
|
||||
@ -602,7 +602,7 @@ else if(!isDragging && this.touchMove) {
|
||||
* begin listening for events by adding event handlers
|
||||
* to the container
|
||||
*/
|
||||
_listen: function() {
|
||||
_bindEvents: function() {
|
||||
var go = Kinetic.GlobalObject;
|
||||
var that = this;
|
||||
|
||||
@ -903,7 +903,6 @@ 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) {
|
||||
|
||||
@ -18,7 +18,7 @@ Test.prototype.tests = {
|
||||
height: 200
|
||||
});
|
||||
},
|
||||
'STAGE - test setSize': function(containerId) {
|
||||
'STAGE - set stage size': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
@ -61,6 +61,15 @@ Test.prototype.tests = {
|
||||
|
||||
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 - add shape then stage then layer': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
@ -228,7 +237,7 @@ Test.prototype.tests = {
|
||||
group.add(circle);
|
||||
layer.draw();
|
||||
|
||||
var expectedJson = '{"attrs":{"width":578,"height":200,"throttle":80,"visible":true,"listening":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,"listening":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,"listening":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,"listening":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,"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"}]}]}]}';
|
||||
test(stage.toJSON() === expectedJson, 'problem with serialization');
|
||||
},
|
||||
'STAGE - reset stage': function(containerId) {
|
||||
@ -313,7 +322,7 @@ Test.prototype.tests = {
|
||||
height: 200
|
||||
});
|
||||
|
||||
var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":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,"listening":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,"listening":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,"listening":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,"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"}]}]}]}';
|
||||
stage.load(json);
|
||||
|
||||
test(stage.toJSON() === json, "problem loading stage with json");
|
||||
@ -352,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,"listening":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,"listening":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,"listening":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,"listening":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,"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"}]}]}]}';
|
||||
test(stage.toJSON() === expectedJson, "problem serializing stage with custom shape");
|
||||
},
|
||||
'STAGE - load stage with custom shape using json': function(containerId) {
|
||||
@ -372,7 +381,7 @@ Test.prototype.tests = {
|
||||
this.fill();
|
||||
this.stroke();
|
||||
};
|
||||
var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":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,"listening":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,"listening":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,"listening":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,"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"}]}]}]}';
|
||||
stage.load(json);
|
||||
|
||||
var customShape = stage.get('#myTriangle')[0];
|
||||
@ -382,39 +391,6 @@ Test.prototype.tests = {
|
||||
stage.draw();
|
||||
test(stage.toJSON() === json, "problem loading stage with custom shape json");
|
||||
},
|
||||
'STAGE - set stage size': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var circle = new Kinetic.Circle({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
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({
|
||||
container: containerId,
|
||||
@ -833,7 +809,7 @@ Test.prototype.tests = {
|
||||
|
||||
var json = stage.toJSON();
|
||||
|
||||
test(json === '{"attrs":{"width":578,"height":200,"throttle":80,"visible":true,"listening":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,"listening":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,"listening":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,"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"}]}]}');
|
||||
};
|
||||
imageObj.src = '../darth-vader.jpg';
|
||||
},
|
||||
@ -846,7 +822,7 @@ Test.prototype.tests = {
|
||||
height: 200
|
||||
});
|
||||
|
||||
var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":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,"listening":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,"listening":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,"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"}]}]}';
|
||||
stage.load(json);
|
||||
var image = stage.get('#darth')[0];
|
||||
image.setImage(imageObj);
|
||||
@ -2900,6 +2876,41 @@ Test.prototype.tests = {
|
||||
|
||||
layer.draw();
|
||||
},
|
||||
'NODE - listen and don\'t listen': 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'
|
||||
});
|
||||
|
||||
var rect2 = new Kinetic.Rect({
|
||||
x: 200,
|
||||
y: 100,
|
||||
width: 200,
|
||||
height: 50,
|
||||
fill: 'red',
|
||||
listen: false
|
||||
});
|
||||
|
||||
layer.add(rect).add(rect2);
|
||||
stage.add(layer);
|
||||
|
||||
test(rect.isListening() === true, 'rect should be listening');
|
||||
rect.listen(false);
|
||||
test(rect.isListening() === false, 'rect should not be listening');
|
||||
|
||||
test(rect2.isListening() === false, 'rect2 should not be listening');
|
||||
rect2.listen(true);
|
||||
test(rect2.isListening() === true, 'rect2 should be listening');
|
||||
},
|
||||
'NODE - test on attr change': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
@ -3032,7 +3043,7 @@ Test.prototype.tests = {
|
||||
test(rect.getCenterOffset().y === 8, 'center offset y should be 8');
|
||||
|
||||
},
|
||||
'NODE - test setPosition': function(containerId) {
|
||||
'NODE - test setPosition and move': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
@ -3076,6 +3087,11 @@ Test.prototype.tests = {
|
||||
});
|
||||
test(rect.getPosition().x === 7, 'rect x should be 7');
|
||||
test(rect.getPosition().y === 8, 'rect y should be 8');
|
||||
|
||||
rect.move(10);
|
||||
test(rect.getPosition().x === 17, 'rect x should be 17');
|
||||
test(rect.getPosition().y === 18, 'rect y should be 18');
|
||||
|
||||
},
|
||||
'NODE - test setScale': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
@ -3627,40 +3643,39 @@ Test.prototype.tests = {
|
||||
name: 'myCircle'
|
||||
});
|
||||
|
||||
/*
|
||||
* test regular on and off
|
||||
*/
|
||||
/*
|
||||
* test regular on and off
|
||||
*/
|
||||
test(circle.eventListeners['click'] === undefined, 'circle should have no click listeners');
|
||||
|
||||
circle.on('click', function() {
|
||||
|
||||
circle.on('click', function() {
|
||||
});
|
||||
test(circle.eventListeners['click'].length === 1, 'circle should have 1 click listener');
|
||||
|
||||
circle.on('click', function() {
|
||||
|
||||
circle.on('click', function() {
|
||||
});
|
||||
test(circle.eventListeners['click'].length === 2, 'circle should have 2 click listeners');
|
||||
|
||||
|
||||
circle.off('click');
|
||||
test(circle.eventListeners['click'] === undefined, 'circle should have no click listeners');
|
||||
|
||||
|
||||
/*
|
||||
* test name spacing
|
||||
*/
|
||||
circle.on('click.foo', function() {
|
||||
circle.on('click.foo', function() {
|
||||
});
|
||||
test(circle.eventListeners['click'].length === 1, 'circle should have 1 click listener');
|
||||
|
||||
circle.on('click.foo', function() {
|
||||
|
||||
circle.on('click.foo', function() {
|
||||
});
|
||||
test(circle.eventListeners['click'].length === 2, 'circle should have 2 click listeners');
|
||||
circle.on('click.bar', function() {
|
||||
circle.on('click.bar', function() {
|
||||
});
|
||||
test(circle.eventListeners['click'].length === 3, 'circle should have 3 click listeners');
|
||||
|
||||
|
||||
|
||||
circle.off('click.foo');
|
||||
test(circle.eventListeners['click'].length === 1, 'circle should have 1 click listener');
|
||||
|
||||
|
||||
circle.off('click.bar');
|
||||
test(circle.eventListeners['click'] === undefined, 'circle should have no click listeners');
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user