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

finished custom shape serialization with new attrs structure

Browse Source
This commit is contained in:
Eric Rowell 2012-04-07 15:03:19 -07:00
parent 58eb778e9a
commit 1a40e50622
5 changed files with 67 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
dist/kinetic-core.js vendored
View File

@ -1121,6 +1121,7 @@ Kinetic.Stage.prototype = {
function addNode(node) { function addNode(node) {
var obj = {}; var obj = {};
obj.attrs = node.attrs; obj.attrs = node.attrs;
obj.nodeType = node.nodeType; obj.nodeType = node.nodeType;
obj.shapeType = node.shapeType; obj.shapeType = node.shapeType;
@ -1145,7 +1146,7 @@ Kinetic.Stage.prototype = {
function loadNode(node, obj) { function loadNode(node, obj) {
// if custom shape then set draw function // if custom shape then set draw function
if(obj.nodeType === 'Shape' && obj.shapeType === undefined) { if(obj.nodeType === 'Shape' && obj.shapeType === undefined) {
node.drawFunc = drawFuncs[obj.drawFuncName]; node.drawFunc = drawFuncs[obj.attrs.drawFuncName];
} }
var children = obj.children; var children = obj.children;
@ -1928,11 +1929,10 @@ Kinetic.Shape = function(config) {
this.attrs.strokeWidth = undefined; this.attrs.strokeWidth = undefined;
this.attrs.lineJoin = undefined; this.attrs.lineJoin = undefined;
this.attrs.detectionType = 'path'; this.attrs.detectionType = 'path';
this.attrs.drawFuncName = undefined;
// special // special
this.drawFunc = config.drawFunc; this.drawFunc = config.drawFunc;
this.data = []; this.data = [];
this.nodeType = 'Shape'; this.nodeType = 'Shape';

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

File diff suppressed because one or more lines are too long

3
src/Shape.js
View File

@ -25,11 +25,10 @@ Kinetic.Shape = function(config) {
this.attrs.strokeWidth = undefined; this.attrs.strokeWidth = undefined;
this.attrs.lineJoin = undefined; this.attrs.lineJoin = undefined;
this.attrs.detectionType = 'path'; this.attrs.detectionType = 'path';
this.attrs.drawFuncName = undefined;
// special // special
this.drawFunc = config.drawFunc; this.drawFunc = config.drawFunc;
this.data = []; this.data = [];
this.nodeType = 'Shape'; this.nodeType = 'Shape';

3
src/Stage.js
View File

@ -191,6 +191,7 @@ Kinetic.Stage.prototype = {
function addNode(node) { function addNode(node) {
var obj = {}; var obj = {};
obj.attrs = node.attrs; obj.attrs = node.attrs;
obj.nodeType = node.nodeType; obj.nodeType = node.nodeType;
obj.shapeType = node.shapeType; obj.shapeType = node.shapeType;
@ -215,7 +216,7 @@ Kinetic.Stage.prototype = {
function loadNode(node, obj) { function loadNode(node, obj) {
// if custom shape then set draw function // if custom shape then set draw function
if(obj.nodeType === 'Shape' && obj.shapeType === undefined) { if(obj.nodeType === 'Shape' && obj.shapeType === undefined) {
node.drawFunc = drawFuncs[obj.drawFuncName]; node.drawFunc = drawFuncs[obj.attrs.drawFuncName];
} }
var children = obj.children; var children = obj.children;

117
tests/js/unitTests.js
View File

@ -94,7 +94,7 @@ Test.prototype.tests = {
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":{"radius":70,"fill":"green","stroke":"black","strokeWidth":4,"detectionType":"path","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,"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":{"radius":70,"fill":"green","stroke":"black","strokeWidth":4,"detectionType":"path","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"}]}]}]}';
test(stage.toJSON() === expectedJson, 'problem with serialization'); test(stage.toJSON() === expectedJson, 'problem with serialization');
}, },
'STAGE - load stage with json': function(containerId) { 'STAGE - load stage using json': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,
@ -106,67 +106,68 @@ Test.prototype.tests = {
test(stage.toJSON() === json, "serialized stage is incorrect"); test(stage.toJSON() === json, "serialized stage is incorrect");
}, },
/* 'STAGE - serialize stage with custom shape': function(containerId) {
'STAGE - serialize stage with custom shape': function(containerId) { var stage = new Kinetic.Stage({
var stage = new Kinetic.Stage({ container: containerId,
container: containerId, width: 578,
width: 578, height: 200
height: 200 });
}); var layer = new Kinetic.Layer();
var layer = new Kinetic.Layer(); var group = new Kinetic.Group();
var group = new Kinetic.Group();
var drawTriangle = function() { var drawTriangle = function() {
var context = this.getContext(); var context = this.getContext();
context.beginPath(); context.beginPath();
context.moveTo(200, 50); context.moveTo(200, 50);
context.lineTo(420, 80); context.lineTo(420, 80);
context.quadraticCurveTo(300, 100, 260, 170); context.quadraticCurveTo(300, 100, 260, 170);
context.closePath(); context.closePath();
this.fillStroke(); this.fillStroke();
}; };
var triangle = new Kinetic.Shape({ var triangle = new Kinetic.Shape({
drawFunc: drawTriangle, drawFunc: drawTriangle,
drawFuncName: 'drawTriangle', drawFuncName: 'drawTriangle',
fill: "#00D2FF", fill: "#00D2FF",
stroke: "black", stroke: "black",
strokeWidth: 4 strokeWidth: 4
}); });
stage.add(layer); stage.add(layer);
layer.add(group); layer.add(group);
group.add(triangle); group.add(triangle);
layer.draw(); layer.draw();
var expectedJson = '{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Layer","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,"_children":[{"nodeType":"Group","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,"_children":[{"nodeType":"Shape","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,"drawFuncName":"drawTriangle","fill":"#00D2FF","stroke":"black","strokeWidth":4}]}]}]}'; //console.log(stage.toJSON());
test(stage.toJSON() === expectedJson, "problem with serialization");
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,"drawFuncName":"drawTriangle"},"nodeType":"Shape"}]}]}]}';
}, test(stage.toJSON() === expectedJson, "problem with serialization");
'STAGE - load stage with custom shape': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var drawTriangle = function() { },
var context = this.getContext(); 'STAGE - load stage with custom shape using json': function(containerId) {
context.beginPath(); var stage = new Kinetic.Stage({
context.moveTo(200, 50); container: containerId,
context.lineTo(420, 80); width: 578,
context.quadraticCurveTo(300, 100, 260, 170); height: 200
context.closePath(); });
this.fillStroke();
};
var json = '{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Layer","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,"_children":[{"nodeType":"Group","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,"_children":[{"nodeType":"Shape","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,"drawFuncName":"drawTriangle","fill":"#00D2FF","stroke":"black","strokeWidth":4}]}]}]}';
stage.load(json, {
drawTriangle: drawTriangle
});
test(stage.toJSON() === json, "serialized stage is incorrect"); var drawTriangle = function() {
}, var context = this.getContext();
*/ context.beginPath();
context.moveTo(200, 50);
context.lineTo(420, 80);
context.quadraticCurveTo(300, 100, 260, 170);
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,"drawFuncName":"drawTriangle"},"nodeType":"Shape"}]}]}]}';
stage.load(json, {
drawTriangle: drawTriangle
});
//console.log(stage.toJSON());
test(stage.toJSON() === json, "serialized stage is incorrect");
},
'STAGE - set stage size': function(containerId) { 'STAGE - set stage size': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
@ -649,8 +650,6 @@ Test.prototype.tests = {
} }
}); });
console.log(darth);
layer.add(darth); layer.add(darth);
stage.add(layer); stage.add(layer);
}; };
@ -822,7 +821,7 @@ Test.prototype.tests = {
layer.add(star); layer.add(star);
stage.add(layer); stage.add(layer);
}, },
'SHAPES - add five point star with line join': function(containerId) { 'SHAPES - add five point star with line join (ends up as bevel line join)': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,