mirror of
https://github.com/konvajs/konva.git
synced 2025-06-28 06:24:42 +08:00
added simple selector support by id (#) or by name (.). Selecting by name is similar to selecting by class in other DOM libraries
This commit is contained in:
Eric Rowell
parent
3243e5f8ff
commit
8c70333472
103
dist/kinetic-core.js
vendored
103
dist/kinetic-core.js
vendored
@ -41,6 +41,8 @@ var Kinetic = {};
|
||||
Kinetic.GlobalObject = {
|
||||
stages: [],
|
||||
idCounter: 0,
|
||||
ids: {},
|
||||
names: {},
|
||||
animations: [],
|
||||
animIdCounter: 0,
|
||||
frame: {
|
||||
@ -123,6 +125,28 @@ Kinetic.GlobalObject = {
|
||||
else {
|
||||
this.frame.lastTime = 0;
|
||||
}
|
||||
},
|
||||
addId: function(node) {
|
||||
var go = Kinetic.GlobalObject;
|
||||
if(node.attrs.id !== undefined) {
|
||||
go.ids[node.attrs.id] = node;
|
||||
}
|
||||
},
|
||||
removeId: function(node) {
|
||||
|
||||
},
|
||||
addName: function(node) {
|
||||
var go = Kinetic.GlobalObject;
|
||||
var name = node.attrs.name;
|
||||
if(name !== undefined) {
|
||||
if(go.names[name] === undefined) {
|
||||
go.names[name] = [];
|
||||
}
|
||||
go.names[name].push(node);
|
||||
}
|
||||
},
|
||||
removeName: function(node) {
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
@ -327,7 +351,7 @@ Kinetic.Node.prototype = {
|
||||
nodes = nodes.concat(child.getChildren());
|
||||
}
|
||||
|
||||
if(child.id === that.id) {
|
||||
if(child._id === that._id) {
|
||||
n = children.length;
|
||||
}
|
||||
}
|
||||
@ -554,7 +578,7 @@ Kinetic.Node.prototype = {
|
||||
*/
|
||||
isDragging: function() {
|
||||
var go = Kinetic.GlobalObject;
|
||||
return go.drag.node !== undefined && go.drag.node.id === this.id && go.drag.moving;
|
||||
return go.drag.node !== undefined && go.drag.node._id === this._id && go.drag.moving;
|
||||
},
|
||||
/**
|
||||
* move node to another container
|
||||
@ -571,12 +595,6 @@ Kinetic.Node.prototype = {
|
||||
this.index = newContainer.children.length - 1;
|
||||
this.parent = newContainer;
|
||||
newContainer._setChildrenIndices();
|
||||
|
||||
// update children hashes
|
||||
if(this.attrs.name) {
|
||||
parent.childrenNames[this.attrs.name] = undefined;
|
||||
newContainer.childrenNames[this.attrs.name] = this;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* get parent container
|
||||
@ -800,10 +818,10 @@ Kinetic.Node.prototype = {
|
||||
* determine if event handler should be skipped by comparing
|
||||
* parent nodes
|
||||
*/
|
||||
if(eventType === 'onmouseover' && mouseoutNode && mouseoutNode.id === node.id) {
|
||||
if(eventType === 'onmouseover' && mouseoutNode && mouseoutNode._id === node._id) {
|
||||
okayToRun = false;
|
||||
}
|
||||
else if(eventType === 'onmouseout' && mouseoverNode && mouseoverNode.id === node.id) {
|
||||
else if(eventType === 'onmouseout' && mouseoverNode && mouseoverNode._id === node._id) {
|
||||
okayToRun = false;
|
||||
}
|
||||
|
||||
@ -834,7 +852,6 @@ Kinetic.Node.prototype = {
|
||||
*/
|
||||
Kinetic.Container = function() {
|
||||
this.children = [];
|
||||
this.childrenNames = {};
|
||||
};
|
||||
/*
|
||||
* Container methods
|
||||
@ -846,13 +863,6 @@ Kinetic.Container.prototype = {
|
||||
getChildren: function() {
|
||||
return this.children;
|
||||
},
|
||||
/**
|
||||
* get child node by name
|
||||
* @param {String} name
|
||||
*/
|
||||
getChild: function(name) {
|
||||
return this.childrenNames[name];
|
||||
},
|
||||
/**
|
||||
* remove all children
|
||||
*/
|
||||
@ -866,10 +876,7 @@ Kinetic.Container.prototype = {
|
||||
* @param {Node} child
|
||||
*/
|
||||
_remove: function(child) {
|
||||
if(this.children[child.index].id == child.id) {
|
||||
if(child.attrs.name !== undefined) {
|
||||
this.childrenNames[child.attrs.name] = undefined;
|
||||
}
|
||||
if(this.children[child.index]._id == child._id) {
|
||||
|
||||
this.children.splice(child.index, 1);
|
||||
this._setChildrenIndices();
|
||||
@ -896,14 +903,15 @@ Kinetic.Container.prototype = {
|
||||
* @param {Node} child
|
||||
*/
|
||||
_add: function(child) {
|
||||
if(child.attrs.name) {
|
||||
this.childrenNames[child.attrs.name] = child;
|
||||
}
|
||||
child.id = Kinetic.GlobalObject.idCounter++;
|
||||
child._id = Kinetic.GlobalObject.idCounter++;
|
||||
child.index = this.children.length;
|
||||
child.parent = this;
|
||||
|
||||
this.children.push(child);
|
||||
|
||||
var go = Kinetic.GlobalObject;
|
||||
go.addId(child);
|
||||
go.addName(child);
|
||||
},
|
||||
/**
|
||||
* set children indices
|
||||
@ -934,7 +942,7 @@ Kinetic.Container.prototype = {
|
||||
}
|
||||
};
|
||||
|
||||
///////////////////////////////////////////////////////////////////////
|
||||
;///////////////////////////////////////////////////////////////////////
|
||||
// Stage
|
||||
///////////////////////////////////////////////////////////////////////
|
||||
/**
|
||||
@ -988,7 +996,7 @@ Kinetic.Stage = function(config) {
|
||||
this.touchEnd = false;
|
||||
|
||||
// set stage id
|
||||
this.id = Kinetic.GlobalObject.idCounter++;
|
||||
this._id = Kinetic.GlobalObject.idCounter++;
|
||||
|
||||
this._buildDOM();
|
||||
this._listen();
|
||||
@ -996,8 +1004,10 @@ Kinetic.Stage = function(config) {
|
||||
|
||||
this.anim = undefined;
|
||||
|
||||
// add stage to global object
|
||||
Kinetic.GlobalObject.stages.push(this);
|
||||
var go = Kinetic.GlobalObject;
|
||||
go.stages.push(this);
|
||||
go.addId(this);
|
||||
go.addName(this);
|
||||
};
|
||||
/*
|
||||
* Stage methods
|
||||
@ -1035,6 +1045,30 @@ Kinetic.Stage.prototype = {
|
||||
draw: function() {
|
||||
this._drawChildren();
|
||||
},
|
||||
/**
|
||||
* get selector. can select nodes by id with # and by name
|
||||
* with .
|
||||
* ex:
|
||||
* var node = stage.get('#foo'); // selects node with id foo
|
||||
* var nodes = stage.get('.bar'); // selects nodes with name bar
|
||||
* @param {String} selector
|
||||
*/
|
||||
get: function(selector) {
|
||||
var go = Kinetic.GlobalObject;
|
||||
var hash;
|
||||
if(selector.charAt(0) === '#') {
|
||||
hash = go.ids;
|
||||
}
|
||||
else if(selector.charAt(0) === '.') {
|
||||
hash = go.names;
|
||||
}
|
||||
else {
|
||||
return false;
|
||||
}
|
||||
|
||||
var key = selector.slice(1);
|
||||
return hash[key];
|
||||
},
|
||||
/**
|
||||
* set stage size
|
||||
* @param {int} width
|
||||
@ -1224,9 +1258,6 @@ Kinetic.Stage.prototype = {
|
||||
* @param {Layer} layer
|
||||
*/
|
||||
add: function(layer) {
|
||||
if(layer.attrs.name) {
|
||||
this.childrenNames[layer.attrs.name] = layer;
|
||||
}
|
||||
layer.canvas.width = this.attrs.width;
|
||||
layer.canvas.height = this.attrs.height;
|
||||
this._add(layer);
|
||||
@ -1296,7 +1327,7 @@ Kinetic.Stage.prototype = {
|
||||
var pos = this.getUserPosition();
|
||||
var el = shape.eventListeners;
|
||||
|
||||
if(this.targetShape && shape.id === this.targetShape.id) {
|
||||
if(this.targetShape && shape._id === this.targetShape._id) {
|
||||
this.targetFound = true;
|
||||
}
|
||||
|
||||
@ -1392,7 +1423,7 @@ Kinetic.Stage.prototype = {
|
||||
}
|
||||
}
|
||||
// handle mouseout condition
|
||||
else if(!isDragging && this.targetShape && this.targetShape.id === shape.id) {
|
||||
else if(!isDragging && this.targetShape && this.targetShape._id === shape._id) {
|
||||
this._setTarget(undefined);
|
||||
this.mouseoutShape = shape;
|
||||
return true;
|
||||
@ -1411,7 +1442,7 @@ Kinetic.Stage.prototype = {
|
||||
* check if shape should be a new target
|
||||
*/
|
||||
_isNewTarget: function(shape, evt) {
|
||||
if(!this.targetShape || (!this.targetFound && shape.id !== this.targetShape.id)) {
|
||||
if(!this.targetShape || (!this.targetFound && shape._id !== this.targetShape._id)) {
|
||||
/*
|
||||
* check if old target has an onmouseout event listener
|
||||
*/
|
||||
|
||||
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
@ -8,7 +8,6 @@
|
||||
*/
|
||||
Kinetic.Container = function() {
|
||||
this.children = [];
|
||||
this.childrenNames = {};
|
||||
};
|
||||
/*
|
||||
* Container methods
|
||||
@ -20,13 +19,6 @@ Kinetic.Container.prototype = {
|
||||
getChildren: function() {
|
||||
return this.children;
|
||||
},
|
||||
/**
|
||||
* get child node by name
|
||||
* @param {String} name
|
||||
*/
|
||||
getChild: function(name) {
|
||||
return this.childrenNames[name];
|
||||
},
|
||||
/**
|
||||
* remove all children
|
||||
*/
|
||||
@ -40,10 +32,7 @@ Kinetic.Container.prototype = {
|
||||
* @param {Node} child
|
||||
*/
|
||||
_remove: function(child) {
|
||||
if(this.children[child.index].id == child.id) {
|
||||
if(child.attrs.name !== undefined) {
|
||||
this.childrenNames[child.attrs.name] = undefined;
|
||||
}
|
||||
if(this.children[child.index]._id == child._id) {
|
||||
|
||||
this.children.splice(child.index, 1);
|
||||
this._setChildrenIndices();
|
||||
@ -70,14 +59,15 @@ Kinetic.Container.prototype = {
|
||||
* @param {Node} child
|
||||
*/
|
||||
_add: function(child) {
|
||||
if(child.attrs.name) {
|
||||
this.childrenNames[child.attrs.name] = child;
|
||||
}
|
||||
child.id = Kinetic.GlobalObject.idCounter++;
|
||||
child._id = Kinetic.GlobalObject.idCounter++;
|
||||
child.index = this.children.length;
|
||||
child.parent = this;
|
||||
|
||||
this.children.push(child);
|
||||
|
||||
var go = Kinetic.GlobalObject;
|
||||
go.addId(child);
|
||||
go.addName(child);
|
||||
},
|
||||
/**
|
||||
* set children indices
|
||||
|
||||
@ -13,6 +13,8 @@ var Kinetic = {};
|
||||
Kinetic.GlobalObject = {
|
||||
stages: [],
|
||||
idCounter: 0,
|
||||
ids: {},
|
||||
names: {},
|
||||
animations: [],
|
||||
animIdCounter: 0,
|
||||
frame: {
|
||||
@ -95,6 +97,28 @@ Kinetic.GlobalObject = {
|
||||
else {
|
||||
this.frame.lastTime = 0;
|
||||
}
|
||||
},
|
||||
addId: function(node) {
|
||||
var go = Kinetic.GlobalObject;
|
||||
if(node.attrs.id !== undefined) {
|
||||
go.ids[node.attrs.id] = node;
|
||||
}
|
||||
},
|
||||
removeId: function(node) {
|
||||
|
||||
},
|
||||
addName: function(node) {
|
||||
var go = Kinetic.GlobalObject;
|
||||
var name = node.attrs.name;
|
||||
if(name !== undefined) {
|
||||
if(go.names[name] === undefined) {
|
||||
go.names[name] = [];
|
||||
}
|
||||
go.names[name].push(node);
|
||||
}
|
||||
},
|
||||
removeName: function(node) {
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
14
src/Node.js
14
src/Node.js
@ -192,7 +192,7 @@ Kinetic.Node.prototype = {
|
||||
nodes = nodes.concat(child.getChildren());
|
||||
}
|
||||
|
||||
if(child.id === that.id) {
|
||||
if(child._id === that._id) {
|
||||
n = children.length;
|
||||
}
|
||||
}
|
||||
@ -419,7 +419,7 @@ Kinetic.Node.prototype = {
|
||||
*/
|
||||
isDragging: function() {
|
||||
var go = Kinetic.GlobalObject;
|
||||
return go.drag.node !== undefined && go.drag.node.id === this.id && go.drag.moving;
|
||||
return go.drag.node !== undefined && go.drag.node._id === this._id && go.drag.moving;
|
||||
},
|
||||
/**
|
||||
* move node to another container
|
||||
@ -436,12 +436,6 @@ Kinetic.Node.prototype = {
|
||||
this.index = newContainer.children.length - 1;
|
||||
this.parent = newContainer;
|
||||
newContainer._setChildrenIndices();
|
||||
|
||||
// update children hashes
|
||||
if(this.attrs.name) {
|
||||
parent.childrenNames[this.attrs.name] = undefined;
|
||||
newContainer.childrenNames[this.attrs.name] = this;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* get parent container
|
||||
@ -665,10 +659,10 @@ Kinetic.Node.prototype = {
|
||||
* determine if event handler should be skipped by comparing
|
||||
* parent nodes
|
||||
*/
|
||||
if(eventType === 'onmouseover' && mouseoutNode && mouseoutNode.id === node.id) {
|
||||
if(eventType === 'onmouseover' && mouseoutNode && mouseoutNode._id === node._id) {
|
||||
okayToRun = false;
|
||||
}
|
||||
else if(eventType === 'onmouseout' && mouseoverNode && mouseoverNode.id === node.id) {
|
||||
else if(eventType === 'onmouseout' && mouseoverNode && mouseoverNode._id === node._id) {
|
||||
okayToRun = false;
|
||||
}
|
||||
|
||||
|
||||
43
src/Stage.js
43
src/Stage.js
@ -1,4 +1,4 @@
|
||||
///////////////////////////////////////////////////////////////////////
|
||||
;///////////////////////////////////////////////////////////////////////
|
||||
// Stage
|
||||
///////////////////////////////////////////////////////////////////////
|
||||
/**
|
||||
@ -52,7 +52,7 @@ Kinetic.Stage = function(config) {
|
||||
this.touchEnd = false;
|
||||
|
||||
// set stage id
|
||||
this.id = Kinetic.GlobalObject.idCounter++;
|
||||
this._id = Kinetic.GlobalObject.idCounter++;
|
||||
|
||||
this._buildDOM();
|
||||
this._listen();
|
||||
@ -60,8 +60,10 @@ Kinetic.Stage = function(config) {
|
||||
|
||||
this.anim = undefined;
|
||||
|
||||
// add stage to global object
|
||||
Kinetic.GlobalObject.stages.push(this);
|
||||
var go = Kinetic.GlobalObject;
|
||||
go.stages.push(this);
|
||||
go.addId(this);
|
||||
go.addName(this);
|
||||
};
|
||||
/*
|
||||
* Stage methods
|
||||
@ -99,6 +101,30 @@ Kinetic.Stage.prototype = {
|
||||
draw: function() {
|
||||
this._drawChildren();
|
||||
},
|
||||
/**
|
||||
* get selector. can select nodes by id with # and by name
|
||||
* with .
|
||||
* ex:
|
||||
* var node = stage.get('#foo'); // selects node with id foo
|
||||
* var nodes = stage.get('.bar'); // selects nodes with name bar
|
||||
* @param {String} selector
|
||||
*/
|
||||
get: function(selector) {
|
||||
var go = Kinetic.GlobalObject;
|
||||
var hash;
|
||||
if(selector.charAt(0) === '#') {
|
||||
hash = go.ids;
|
||||
}
|
||||
else if(selector.charAt(0) === '.') {
|
||||
hash = go.names;
|
||||
}
|
||||
else {
|
||||
return false;
|
||||
}
|
||||
|
||||
var key = selector.slice(1);
|
||||
return hash[key];
|
||||
},
|
||||
/**
|
||||
* set stage size
|
||||
* @param {int} width
|
||||
@ -288,9 +314,6 @@ Kinetic.Stage.prototype = {
|
||||
* @param {Layer} layer
|
||||
*/
|
||||
add: function(layer) {
|
||||
if(layer.attrs.name) {
|
||||
this.childrenNames[layer.attrs.name] = layer;
|
||||
}
|
||||
layer.canvas.width = this.attrs.width;
|
||||
layer.canvas.height = this.attrs.height;
|
||||
this._add(layer);
|
||||
@ -360,7 +383,7 @@ Kinetic.Stage.prototype = {
|
||||
var pos = this.getUserPosition();
|
||||
var el = shape.eventListeners;
|
||||
|
||||
if(this.targetShape && shape.id === this.targetShape.id) {
|
||||
if(this.targetShape && shape._id === this.targetShape._id) {
|
||||
this.targetFound = true;
|
||||
}
|
||||
|
||||
@ -456,7 +479,7 @@ Kinetic.Stage.prototype = {
|
||||
}
|
||||
}
|
||||
// handle mouseout condition
|
||||
else if(!isDragging && this.targetShape && this.targetShape.id === shape.id) {
|
||||
else if(!isDragging && this.targetShape && this.targetShape._id === shape._id) {
|
||||
this._setTarget(undefined);
|
||||
this.mouseoutShape = shape;
|
||||
return true;
|
||||
@ -475,7 +498,7 @@ Kinetic.Stage.prototype = {
|
||||
* check if shape should be a new target
|
||||
*/
|
||||
_isNewTarget: function(shape, evt) {
|
||||
if(!this.targetShape || (!this.targetFound && shape.id !== this.targetShape.id)) {
|
||||
if(!this.targetShape || (!this.targetFound && shape._id !== this.targetShape._id)) {
|
||||
/*
|
||||
* check if old target has an onmouseout event listener
|
||||
*/
|
||||
|
||||
@ -40,7 +40,6 @@ Test.prototype.tests = {
|
||||
stage.add(layer);
|
||||
layer.add(group);
|
||||
layer.draw();
|
||||
|
||||
},
|
||||
'STAGE - add layer then group then shape': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
@ -163,7 +162,8 @@ Test.prototype.tests = {
|
||||
drawFunc: drawTriangle,
|
||||
fill: "#00D2FF",
|
||||
stroke: "black",
|
||||
strokeWidth: 4
|
||||
strokeWidth: 4,
|
||||
id: 'myTriangle'
|
||||
});
|
||||
|
||||
stage.add(layer);
|
||||
@ -171,9 +171,9 @@ Test.prototype.tests = {
|
||||
group.add(triangle);
|
||||
layer.draw();
|
||||
|
||||
//console.log(stage.toJSON());
|
||||
console.log(stage.toJSON());
|
||||
|
||||
var expectedJson = '{"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":{"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","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":"Shape"}]}]}]}';
|
||||
var expectedJson = '{"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":{"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","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"}]}]}]}';
|
||||
test(stage.toJSON() === expectedJson, "problem with serialization");
|
||||
|
||||
},
|
||||
@ -193,10 +193,10 @@ Test.prototype.tests = {
|
||||
context.closePath();
|
||||
this.fillStroke();
|
||||
};
|
||||
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":{"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","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":"Shape"}]}]}]}';
|
||||
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":{"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","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"}]}]}]}';
|
||||
stage.load(json);
|
||||
|
||||
var customShape = stage.getChildren()[0].getChildren()[0].getChildren()[0];
|
||||
var customShape = stage.get('#myTriangle');
|
||||
|
||||
customShape.setDrawFunc(drawTriangle);
|
||||
|
||||
@ -290,6 +290,45 @@ Test.prototype.tests = {
|
||||
|
||||
stage.draw();
|
||||
},
|
||||
'STAGE - select shape by id and name': 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,
|
||||
id: 'myCircle'
|
||||
});
|
||||
|
||||
var rect = new Kinetic.Rect({
|
||||
x: 300,
|
||||
y: 100,
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: 'purple',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
name: 'myRect'
|
||||
});
|
||||
|
||||
layer.add(circle);
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
|
||||
var node = stage.get('#myCircle');
|
||||
var nodes = stage.get('.myRect');
|
||||
|
||||
test(node.shapeType === 'Circle', 'shape type should be circle');
|
||||
test(nodes[0].shapeType === 'Rect', 'shape type should be rect');
|
||||
|
||||
},
|
||||
'STAGE - remove layer with shape': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
@ -709,7 +748,8 @@ Test.prototype.tests = {
|
||||
centerOffset: {
|
||||
x: 50,
|
||||
y: imageObj.height / 2
|
||||
}
|
||||
},
|
||||
id: 'darth'
|
||||
});
|
||||
|
||||
layer.add(darth);
|
||||
@ -717,9 +757,7 @@ Test.prototype.tests = {
|
||||
|
||||
var json = stage.toJSON();
|
||||
|
||||
//console.log(json);
|
||||
|
||||
test(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":{"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},"nodeType":"Shape","shapeType":"Image"}]}]}', 'problem serializing stage');
|
||||
test(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":{"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"}]}]}', 'problem serializing stage');
|
||||
};
|
||||
imageObj.src = '../darth-vader.jpg';
|
||||
},
|
||||
@ -732,14 +770,14 @@ 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":{"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},"nodeType":"Shape","shapeType":"Image"}]}]}';
|
||||
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":{"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"}]}]}';
|
||||
|
||||
stage.load(json);
|
||||
|
||||
var image = stage.getChildren()[0].getChildren()[0];
|
||||
|
||||
|
||||
var image = stage.get('#darth');
|
||||
|
||||
image.setImage(imageObj);
|
||||
|
||||
|
||||
stage.draw();
|
||||
|
||||
};
|
||||
@ -1295,7 +1333,7 @@ Test.prototype.tests = {
|
||||
layer.remove(circle);
|
||||
|
||||
test(layer.children.length === 0, 'layer should have 0 children');
|
||||
test(layer.getChild('myCircle') === undefined, 'shape should be null');
|
||||
//test(layer.getChild('myCircle') === undefined, 'shape should be null');
|
||||
|
||||
layer.draw();
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user