fix array serialization. fix #576

This commit is contained in:
Anton Lavrenov
2019-02-11 08:46:34 -05:00
parent 12fbe870bd
commit 128b5b403e
6 changed files with 94 additions and 9 deletions

View File

@@ -8,7 +8,7 @@
* Konva JavaScript Framework v3.0.0-0
* http://konvajs.github.io/
* Licensed under the MIT
* Date: Wed Feb 06 2019
* Date: Mon Feb 11 2019
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -3506,8 +3506,9 @@
for (key in attrs) {
val = attrs[key];
// if value is object and object is not plain
// like class instance, we should skip it and to not inclide
nonPlainObject = Util.isObject(val) && !Util._isPlainObject(val);
// like class instance, we should skip it and to not include
nonPlainObject =
Util.isObject(val) && !Util._isPlainObject(val) && !Util._isArray(val);
if (nonPlainObject) {
continue;
}

4
konva.min.js vendored

File diff suppressed because one or more lines are too long

View File

@@ -1308,8 +1308,9 @@ export abstract class Node {
for (key in attrs) {
val = attrs[key];
// if value is object and object is not plain
// like class instance, we should skip it and to not inclide
nonPlainObject = Util.isObject(val) && !Util._isPlainObject(val);
// like class instance, we should skip it and to not include
nonPlainObject =
Util.isObject(val) && !Util._isPlainObject(val) && !Util._isArray(val);
if (nonPlainObject) {
continue;
}

78
test/sandbox2.html Normal file
View File

@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html>
<head>
<script src="../../konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Canvas Scrolling Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
height: 100%;
overflow: auto;
}
#large-container {
width: 3000px;
height: 3000px;
overflow: hidden;
}
#scroll-container {
width: calc(100% - 22px);
height: calc(100vh - 22px);
overflow: auto;
margin: 10px;
border: 1px solid grey;
}
</style>
</head>
<body>
<div id="scroll-container">
<div id="large-container"><div id="container"></div></div>
</div>
<script>
var WIDTH = 3000;
var HEIGHT = 3000;
var NUMBER = 200;
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});
var layer = new Konva.Layer();
stage.add(layer);
function generateNode() {
return new Konva.Circle({
x: WIDTH * Math.random(),
y: HEIGHT * Math.random(),
radius: 50,
fill: 'red',
stroke: 'black'
});
}
for (var i = 0; i < NUMBER; i++) {
layer.add(generateNode());
}
layer.draw();
var scrollContainer = document.getElementById('scroll-container');
scrollContainer.addEventListener('scroll', function() {
var dx = scrollContainer.scrollLeft;
var dy = scrollContainer.scrollTop;
stage.container().style.transform =
'translate(' + dx + 'px, ' + dy + 'px)';
stage.x(-dx);
stage.y(-dy);
stage.batchDraw();
});
</script>
</body>
</html>

View File

@@ -2538,7 +2538,8 @@ suite('Node', function() {
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
draggable: true,
dash: [5, 5]
});
stage.add(layer);
@@ -2547,7 +2548,7 @@ suite('Node', function() {
layer.draw();
var expectedJson =
'{"attrs":{"x":289,"y":100,"radius":70,"fill":"green","stroke":"black","strokeWidth":4,"name":"myCircle","draggable":true},"className":"Circle"}';
'{"attrs":{"x":289,"y":100,"radius":70,"fill":"green","stroke":"black","strokeWidth":4,"name":"myCircle","draggable":true,"dash":[5,5]},"className":"Circle"}';
assert.equal(circle.toJSON(), expectedJson);
});

View File

@@ -45,5 +45,9 @@ suite('Filter', function() {
layer.draw();
var json = circle.toJSON();
var newCircle = Konva.Node.create(json);
assert.deepEqual(newCircle.filters(), [Konva.Filters.Blur]);
});
});