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

Fix #157 (#158)

Browse Source 
* Stringify custom attributes-objects

* Stringify custom attributes-objects
This commit is contained in:
ada99
2016-07-09 16:54:28 +03:00
committed by Anton Lavrenov
parent 886d0c970e
commit 95edb44782
6 changed files with 123 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
konva.js
View File

@@ -1264,6 +1264,35 @@
newStart.push(pr.y);
});
return newStart;
},
_prepareToStringify: function(obj) {
var desc;
obj.visitedByCircularReferenceRemoval = true;
for(var key in obj) {
if (!(obj.hasOwnProperty(key) && obj[key] && typeof obj[key] == 'object')) {
continue;
}
desc = Object.getOwnPropertyDescriptor(obj, key);
if (obj[key].visitedByCircularReferenceRemoval || Konva.Util._isElement(obj[key])) {
if (desc.configurable) {
delete obj[key];
} else {
return null;
}
} else if (Konva.Util._prepareToStringify(obj[key]) === null) {
if (desc.configurable) {
delete obj[key];
} else {
return null;
}
}
}
delete obj.visitedByCircularReferenceRemoval;
return obj;
}
};
})();
@@ -3427,11 +3456,6 @@
for(key in attrs) {
val = attrs[key];
// serialize only attributes that are not function, image, DOM, or objects with methods
if (Konva.Util._isFunction(val) || Konva.Util._isElement(val) ||
(Konva.Util._isObject(val) || Konva.Util._hasMethods(val))) {
continue;
}
getter = this[key];
// remove attr value so that we can extract the default value from the getter
delete attrs[key];
@@ -3444,7 +3468,7 @@
}
obj.className = this.getClassName();
return obj;
return Konva.Util._prepareToStringify(obj);
},
/**
* convert Node into a JSON string. Returns a JSON string.

10
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

7
src/Node.js
View File

@@ -1169,11 +1169,6 @@
for(key in attrs) {
val = attrs[key];
// serialize only attributes that are not function, image, DOM, or objects with methods
if (Konva.Util._isFunction(val) || Konva.Util._isElement(val) ||
(Konva.Util._isObject(val) || Konva.Util._hasMethods(val))) {
continue;
}
getter = this[key];
// remove attr value so that we can extract the default value from the getter
delete attrs[key];
@@ -1186,7 +1181,7 @@
}
obj.className = this.getClassName();
return obj;
return Konva.Util._prepareToStringify(obj);
},
/**
* convert Node into a JSON string. Returns a JSON string.

29
src/Util.js
View File

@@ -990,6 +990,35 @@
newStart.push(pr.y);
});
return newStart;
},
_prepareToStringify: function(obj) {
var desc;
obj.visitedByCircularReferenceRemoval = true;
for(var key in obj) {
if (!(obj.hasOwnProperty(key) && obj[key] && typeof obj[key] == 'object')) {
continue;
}
desc = Object.getOwnPropertyDescriptor(obj, key);
if (obj[key].visitedByCircularReferenceRemoval || Konva.Util._isElement(obj[key])) {
if (desc.configurable) {
delete obj[key];
} else {
return null;
}
} else if (Konva.Util._prepareToStringify(obj[key]) === null) {
if (desc.configurable) {
delete obj[key];
} else {
return null;
}
}
}
delete obj.visitedByCircularReferenceRemoval;
return obj;
}
};
})();

38
test/unit/Node-test.js
View File

@@ -2336,6 +2336,42 @@ suite('Node', function() {
assert.equal(circle.toJSON(), expectedJson);
});
// ======================================================
test('serialize shape with custom attributes', function() {
var stage = addStage();
var layer = new Konva.Layer();
var group = new Konva.Group();
var circle = new Konva.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
stage.add(layer);
layer.add(group);
group.add(circle);
layer.draw();
circle.setAttr('customAttr', 3);
circle.setAttr('customAttrObj', {
x:1,
y:5,
size: {
width: 10,
height: 20
}
});
var expectedJson = '{"attrs":{"x":289,"y":100,"radius":70,"fill":"green","stroke":"black","strokeWidth":4,"name":"myCircle","draggable":true,"customAttr":3,"customAttrObj":{"x":1,"y":5,"size":{"width":10,"height":20}}},"className":"Circle"}';
assert.equal(circle.toJSON(), expectedJson);
});
// ======================================================
test('load stage using json', function() {
var container = addContainer();
@@ -2405,7 +2441,7 @@ suite('Node', function() {
context.closePath();
context.fillStrokeShape(this);
};
var json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{},"className":"Group","children":[{"attrs":{"fill":"#00D2FF","stroke":"black","strokeWidth":4,"id":"myTriangle"},"className":"Shape"}]}]}]}';
var json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{},"className":"Group","children":[{"attrs":{"fill":"#00D2FF","stroke":"black","strokeWidth":4,"id":"myTriangle","customAttrObj":{"x":1,"y":5,"size":{"width":10,"height":20}}},"className":"Shape"}]}]}]}';
var stage = Konva.Node.create(json, container);

21
test/unit/Util-test.js
View File

@@ -39,4 +39,25 @@ suite('Util', function(){
a : 1
});
});
test('test _prepareToStringify', function() {
var o = {
a: 1,
b: 'string1'
};
o.c = {
d: 'string2',
e: o,
f: document.createElement('p')
};
o.g = o;
assert.deepEqual(Konva.Util._prepareToStringify(o), {
a: 1,
b: 'string1',
c: {
d: 'string2'
}
})
});
});