mirror of
https://github.com/konvajs/konva.git
synced 2025-06-27 21:30:35 +08:00
fixed drawing bug related to new throttle feature
This commit is contained in:
Eric Rowell
parent
6bed850042
commit
9cc380608e
88
dist/kinetic-core.js
vendored
88
dist/kinetic-core.js
vendored
@ -1041,7 +1041,7 @@ Kinetic.Container.prototype = {
|
||||
/**
|
||||
* remove child from container
|
||||
* @param {Node} child
|
||||
*/
|
||||
*/
|
||||
_remove: function(child) {
|
||||
if(child.index !== undefined && this.children[child.index]._id == child._id) {
|
||||
var stage = this.getStage();
|
||||
@ -1233,8 +1233,6 @@ Kinetic.Stage = function(config) {
|
||||
});
|
||||
|
||||
this.nodeType = 'Stage';
|
||||
this.ids = {};
|
||||
this.names = {};
|
||||
|
||||
/*
|
||||
* if container is a string, assume it's an id for
|
||||
@ -1251,21 +1249,8 @@ Kinetic.Stage = function(config) {
|
||||
this.container = config.container;
|
||||
this.content = document.createElement('div');
|
||||
this.dblClickWindow = 400;
|
||||
this.clickStart = false;
|
||||
this.targetShape = undefined;
|
||||
this.targetFound = false;
|
||||
this.mouseoverShape = undefined;
|
||||
this.mouseoutShape = undefined;
|
||||
|
||||
// desktop flags
|
||||
this.mousePos = undefined;
|
||||
this.mouseDown = false;
|
||||
this.mouseUp = false;
|
||||
|
||||
// mobile flags
|
||||
this.touchPos = undefined;
|
||||
this.touchStart = false;
|
||||
this.touchEnd = false;
|
||||
this._setDefaults();
|
||||
|
||||
// set stage id
|
||||
this._id = Kinetic.GlobalObject.idCounter++;
|
||||
@ -1274,8 +1259,6 @@ Kinetic.Stage = function(config) {
|
||||
this._listen();
|
||||
this._prepareDrag();
|
||||
|
||||
this.anim = undefined;
|
||||
|
||||
var go = Kinetic.GlobalObject;
|
||||
go.stages.push(this);
|
||||
this._addId(this);
|
||||
@ -1431,6 +1414,38 @@ Kinetic.Stage.prototype = {
|
||||
}
|
||||
return JSON.stringify(addNode(this));
|
||||
},
|
||||
/**
|
||||
* reset stage to default state
|
||||
*/
|
||||
reset: function() {
|
||||
// remove children
|
||||
this.removeChildren();
|
||||
|
||||
// reset stage defaults
|
||||
this._setDefaults();
|
||||
|
||||
// reset node attrs
|
||||
this.setDefaultAttrs({
|
||||
visible: true,
|
||||
listening: true,
|
||||
name: undefined,
|
||||
alpha: 1,
|
||||
x: 0,
|
||||
y: 0,
|
||||
scale: {
|
||||
x: 1,
|
||||
y: 1
|
||||
},
|
||||
rotation: 0,
|
||||
centerOffset: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
dragConstraint: 'none',
|
||||
dragBounds: {},
|
||||
draggable: false
|
||||
});
|
||||
},
|
||||
/**
|
||||
* load stage with JSON string. De-serializtion does not generate custom
|
||||
* shape drawing functions, images, or event handlers (this would make the
|
||||
@ -2084,6 +2099,30 @@ Kinetic.Stage.prototype = {
|
||||
var baseEvent = types[n];
|
||||
this.content.addEventListener(baseEvent, handler, false);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* set defaults
|
||||
*/
|
||||
_setDefaults: function() {
|
||||
this.clickStart = false;
|
||||
this.targetShape = undefined;
|
||||
this.targetFound = false;
|
||||
this.mouseoverShape = undefined;
|
||||
this.mouseoutShape = undefined;
|
||||
|
||||
// desktop flags
|
||||
this.mousePos = undefined;
|
||||
this.mouseDown = false;
|
||||
this.mouseUp = false;
|
||||
|
||||
// mobile flags
|
||||
this.touchPos = undefined;
|
||||
this.touchStart = false;
|
||||
this.touchEnd = false;
|
||||
|
||||
this.ids = {};
|
||||
this.names = {};
|
||||
this.anim = undefined;
|
||||
}
|
||||
};
|
||||
// Extend Container and Node
|
||||
@ -2135,6 +2174,17 @@ Kinetic.Layer.prototype = {
|
||||
this._draw();
|
||||
this.lastDrawTime = time;
|
||||
}
|
||||
/*
|
||||
* if we cannot draw the layer due to throttling,
|
||||
* try to redraw the layer in the near future
|
||||
*/
|
||||
else if(this.drawTimeout === undefined) {
|
||||
var that = this;
|
||||
this.drawTimeout = setTimeout(function() {
|
||||
that.draw();
|
||||
clearTimeout(that.drawTimeout);
|
||||
}, 5);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* set throttle
|
||||
|
||||
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
11
src/Layer.js
11
src/Layer.js
@ -43,6 +43,17 @@ Kinetic.Layer.prototype = {
|
||||
this._draw();
|
||||
this.lastDrawTime = time;
|
||||
}
|
||||
/*
|
||||
* if we cannot draw the layer due to throttling,
|
||||
* try to redraw the layer in the near future
|
||||
*/
|
||||
else if(this.drawTimeout === undefined) {
|
||||
var that = this;
|
||||
this.drawTimeout = setTimeout(function() {
|
||||
that.draw();
|
||||
clearTimeout(that.drawTimeout);
|
||||
}, 5);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* set throttle
|
||||
|
||||
75
src/Stage.js
75
src/Stage.js
@ -18,8 +18,6 @@ Kinetic.Stage = function(config) {
|
||||
});
|
||||
|
||||
this.nodeType = 'Stage';
|
||||
this.ids = {};
|
||||
this.names = {};
|
||||
|
||||
/*
|
||||
* if container is a string, assume it's an id for
|
||||
@ -36,21 +34,8 @@ Kinetic.Stage = function(config) {
|
||||
this.container = config.container;
|
||||
this.content = document.createElement('div');
|
||||
this.dblClickWindow = 400;
|
||||
this.clickStart = false;
|
||||
this.targetShape = undefined;
|
||||
this.targetFound = false;
|
||||
this.mouseoverShape = undefined;
|
||||
this.mouseoutShape = undefined;
|
||||
|
||||
// desktop flags
|
||||
this.mousePos = undefined;
|
||||
this.mouseDown = false;
|
||||
this.mouseUp = false;
|
||||
|
||||
// mobile flags
|
||||
this.touchPos = undefined;
|
||||
this.touchStart = false;
|
||||
this.touchEnd = false;
|
||||
this._setDefaults();
|
||||
|
||||
// set stage id
|
||||
this._id = Kinetic.GlobalObject.idCounter++;
|
||||
@ -59,8 +44,6 @@ Kinetic.Stage = function(config) {
|
||||
this._listen();
|
||||
this._prepareDrag();
|
||||
|
||||
this.anim = undefined;
|
||||
|
||||
var go = Kinetic.GlobalObject;
|
||||
go.stages.push(this);
|
||||
this._addId(this);
|
||||
@ -216,6 +199,38 @@ Kinetic.Stage.prototype = {
|
||||
}
|
||||
return JSON.stringify(addNode(this));
|
||||
},
|
||||
/**
|
||||
* reset stage to default state
|
||||
*/
|
||||
reset: function() {
|
||||
// remove children
|
||||
this.removeChildren();
|
||||
|
||||
// reset stage defaults
|
||||
this._setDefaults();
|
||||
|
||||
// reset node attrs
|
||||
this.setDefaultAttrs({
|
||||
visible: true,
|
||||
listening: true,
|
||||
name: undefined,
|
||||
alpha: 1,
|
||||
x: 0,
|
||||
y: 0,
|
||||
scale: {
|
||||
x: 1,
|
||||
y: 1
|
||||
},
|
||||
rotation: 0,
|
||||
centerOffset: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
dragConstraint: 'none',
|
||||
dragBounds: {},
|
||||
draggable: false
|
||||
});
|
||||
},
|
||||
/**
|
||||
* load stage with JSON string. De-serializtion does not generate custom
|
||||
* shape drawing functions, images, or event handlers (this would make the
|
||||
@ -869,6 +884,30 @@ Kinetic.Stage.prototype = {
|
||||
var baseEvent = types[n];
|
||||
this.content.addEventListener(baseEvent, handler, false);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* set defaults
|
||||
*/
|
||||
_setDefaults: function() {
|
||||
this.clickStart = false;
|
||||
this.targetShape = undefined;
|
||||
this.targetFound = false;
|
||||
this.mouseoverShape = undefined;
|
||||
this.mouseoutShape = undefined;
|
||||
|
||||
// desktop flags
|
||||
this.mousePos = undefined;
|
||||
this.mouseDown = false;
|
||||
this.mouseUp = false;
|
||||
|
||||
// mobile flags
|
||||
this.touchPos = undefined;
|
||||
this.touchStart = false;
|
||||
this.touchEnd = false;
|
||||
|
||||
this.ids = {};
|
||||
this.names = {};
|
||||
this.anim = undefined;
|
||||
}
|
||||
};
|
||||
// Extend Container and Node
|
||||
|
||||
@ -91,6 +91,33 @@ 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":{"throttle":12,"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');
|
||||
},
|
||||
'STAGE - reset stage': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var group = new Kinetic.Group();
|
||||
var circle = new Kinetic.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();
|
||||
|
||||
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":{"throttle":12,"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');
|
||||
},
|
||||
'STAGE - test getAttrs()': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user