lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

removed load() method from stage. Added Kinetic.Node.create() which creates a node from a json string. This essentially allows us to deserialize any node, including a stage, layers, groups, and shapes.

Browse Source
This commit is contained in:
ericdrowell 2012-10-03 20:38:29 -07:00
parent a97d3ad01f
commit f5d4228f3b
5 changed files with 103 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
dist/kinetic-core.js vendored
View File

@ -1798,7 +1798,7 @@ Kinetic.Node.prototype = {
obj.nodeType = this.nodeType;
obj.shapeType = this.shapeType;
return obj;
},
toJSON: function() {
@ -2278,6 +2278,52 @@ Kinetic.Node._addGetter = function(constructor, attr) {
return this.attrs[attr];
};
};
/**
* create node with JSON string. De-serializtion does not generate custom
* shape drawing functions, images, or event handlers (this would make the
* serialized object huge). If your app uses custom shapes, images, and
* event handlers (it probably does), then you need to select the appropriate
* shapes after loading the stage and set these properties via on(), setDrawFunc(),
* and setImage()
* @name create
* @methodOf Kinetic.Node
* @param {String} JSON string
*/
Kinetic.Node.create = function(json, container) {
return this._createNode(JSON.parse(json), container);
};
Kinetic.Node._createNode = function(obj, container) {
var type;
// determine type
if(obj.nodeType === 'Shape') {
// add custom shape
if(obj.shapeType === undefined) {
type = 'Shape';
}
// add standard shape
else {
type = obj.shapeType;
}
}
else {
type = obj.nodeType;
}
// if container was passed in, add it to attrs
if (container) {
obj.attrs.container = container;
}
var no = new Kinetic[type](obj.attrs);
if(obj.children) {
for(var n = 0; n < obj.children.length; n++) {
no.add(this._createNode(obj.children[n]));
}
}
return no;
};
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'rotation', 'opacity', 'name', 'id', 'draggable', 'listening', 'visible', 'dragBoundFunc']);
Kinetic.Node.addGetters(Kinetic.Node, ['scale', 'offset']);
@ -2815,57 +2861,6 @@ Kinetic.Stage.prototype = {
this._setStageDefaultProperties();
this.setAttrs(this.defaultNodeAttrs);
},
/**
* load stage with JSON string. De-serializtion does not generate custom
* shape drawing functions, images, or event handlers (this would make the
* serialized object huge). If your app uses custom shapes, images, and
* event handlers (it probably does), then you need to select the appropriate
* shapes after loading the stage and set these properties via on(), setDrawFunc(),
* and setImage()
* @name load
* @methodOf Kinetic.Stage.prototype
* @param {String} JSON string
*/
load: function(json) {
this.reset();
function loadNode(node, obj) {
var children = obj.children;
if(children !== undefined) {
for(var n = 0; n < children.length; n++) {
var child = children[n];
var type;
// determine type
if(child.nodeType === 'Shape') {
// add custom shape
if(child.shapeType === undefined) {
type = 'Shape';
}
// add standard shape
else {
type = child.shapeType;
}
}
else {
type = child.nodeType;
}
var no = new Kinetic[type](child.attrs);
node.add(no);
loadNode(no, child);
}
}
}
var obj = JSON.parse(json);
// copy over stage properties
this.attrs = obj.attrs;
loadNode(this, obj);
this.draw();
},
/**
* get mouse position for desktop apps
* @name getMousePosition

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

File diff suppressed because one or more lines are too long

48
src/Node.js
View File

@ -575,7 +575,7 @@ Kinetic.Node.prototype = {
obj.nodeType = this.nodeType;
obj.shapeType = this.shapeType;
return obj;
},
toJSON: function() {
@ -1055,6 +1055,52 @@ Kinetic.Node._addGetter = function(constructor, attr) {
return this.attrs[attr];
};
};
/**
* create node with JSON string. De-serializtion does not generate custom
* shape drawing functions, images, or event handlers (this would make the
* serialized object huge). If your app uses custom shapes, images, and
* event handlers (it probably does), then you need to select the appropriate
* shapes after loading the stage and set these properties via on(), setDrawFunc(),
* and setImage()
* @name create
* @methodOf Kinetic.Node
* @param {String} JSON string
*/
Kinetic.Node.create = function(json, container) {
return this._createNode(JSON.parse(json), container);
};
Kinetic.Node._createNode = function(obj, container) {
var type;
// determine type
if(obj.nodeType === 'Shape') {
// add custom shape
if(obj.shapeType === undefined) {
type = 'Shape';
}
// add standard shape
else {
type = obj.shapeType;
}
}
else {
type = obj.nodeType;
}
// if container was passed in, add it to attrs
if (container) {
obj.attrs.container = container;
}
var no = new Kinetic[type](obj.attrs);
if(obj.children) {
for(var n = 0; n < obj.children.length; n++) {
no.add(this._createNode(obj.children[n]));
}
}
return no;
};
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'rotation', 'opacity', 'name', 'id', 'draggable', 'listening', 'visible', 'dragBoundFunc']);
Kinetic.Node.addGetters(Kinetic.Node, ['scale', 'offset']);

51
src/Stage.js
View File

@ -138,57 +138,6 @@ Kinetic.Stage.prototype = {
this._setStageDefaultProperties();
this.setAttrs(this.defaultNodeAttrs);
},
/**
* load stage with JSON string. De-serializtion does not generate custom
* shape drawing functions, images, or event handlers (this would make the
* serialized object huge). If your app uses custom shapes, images, and
* event handlers (it probably does), then you need to select the appropriate
* shapes after loading the stage and set these properties via on(), setDrawFunc(),
* and setImage()
* @name load
* @methodOf Kinetic.Stage.prototype
* @param {String} JSON string
*/
load: function(json) {
this.reset();
function loadNode(node, obj) {
var children = obj.children;
if(children !== undefined) {
for(var n = 0; n < children.length; n++) {
var child = children[n];
var type;
// determine type
if(child.nodeType === 'Shape') {
// add custom shape
if(child.shapeType === undefined) {
type = 'Shape';
}
// add standard shape
else {
type = child.shapeType;
}
}
else {
type = child.nodeType;
}
var no = new Kinetic[type](child.attrs);
node.add(no);
loadNode(no, child);
}
}
}
var obj = JSON.parse(json);
// copy over stage properties
this.attrs = obj.attrs;
loadNode(this, obj);
this.draw();
},
/**
* get mouse position for desktop apps
* @name getMousePosition

27
tests/js/unitTests.js
View File

@ -5884,14 +5884,8 @@ Test.prototype.tests = {
test(circle.toJSON() === expectedJson, 'problem with serialization');
},
'SERIALIZATION - load stage using json': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Group","children":[{"attrs":{"radius":70,"visible":true,"listening":true,"name":"myCircle","opacity":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":true,"fill":"green","stroke":"black","strokeWidth":4},"nodeType":"Shape","shapeType":"Circle"}]}]}]}';
stage.load(json);
var stage = Kinetic.Node.create(json, containerId);
test(stage.toJSON() === json, "problem loading stage with json");
},
@ -5949,12 +5943,6 @@ Test.prototype.tests = {
},
'SERIALIZATION - load stage with custom shape using json': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var drawTriangle = function(context) {
context.beginPath();
context.moveTo(200, 50);
@ -5965,7 +5953,8 @@ Test.prototype.tests = {
this.stroke(context);
};
var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Group","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false,"fill":"#00D2FF","stroke":"black","strokeWidth":4,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
stage.load(json);
var stage = Kinetic.Node.create(json, containerId);
stage.get('#myTriangle').apply('setDrawFunc', drawTriangle);
@ -6004,14 +5993,10 @@ Test.prototype.tests = {
'SERIALIZATION - load stage with an image': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":200,"y":60,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":50,"y":150},"draggable":false,"id":"darth","width":438,"height":300},"nodeType":"Shape","shapeType":"Image"}]}]}';
stage.load(json);
var stage = Kinetic.Node.create(json, containerId);
test(stage.toJSON(), json, 'problem loading stage json with image');
stage.get('#darth').apply('setImage', imageObj);
stage.draw();
};