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

improved drag and drop performance by skipping buffer redraws on drag move

Browse Source
This commit is contained in:
Eric Rowell 2012-11-17 22:29:07 -08:00
parent feb1c83aac
commit e04b979063
4 changed files with 41 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/DragAndDrop.js
View File

@ -28,18 +28,21 @@ Kinetic.DD._startDrag = function(evt) {
if(!dd.moving) {
dd.moving = true;
node.setListening(false);
// execute dragstart events if defined
dd.node._handleEvent('dragstart', evt);
node._handleEvent('dragstart', evt);
}
// execute user defined ondragmove if defined
dd.node._handleEvent('dragmove', evt);
node._handleEvent('dragmove', evt);
}
};
Kinetic.DD._endDrag = function(evt) {
var dd = Kinetic.DD;
var node = dd.node;
if(node) {
node.setListening(true);
if(node.nodeType === 'Stage') {
node.draw();
}

5
tests/js/Test.js
View File

@ -38,6 +38,11 @@ function test(condition, message, warn) {
function log(message) {
console.log('LOG: ' + message);
}
function showBuffer(layer) {
document.body.appendChild(layer.bufferCanvas.element);
}
function Test() {
this.counter = 0;
testCounter = document.createElement('div');

46
tests/js/manualTests.js
View File

@ -712,7 +712,7 @@ Test.Modules.MANUAL = {
layer.add(redCircle);
stage.add(layer);
},
'DRAG AND DROP - drag and drop elastic star with shadow': function(containerId) {
'*DRAG AND DROP - drag and drop elastic star with shadow': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@ -783,6 +783,8 @@ Test.Modules.MANUAL = {
}
})
});
showBuffer(layer);
},
'DRAG AND DROP - two draggable shapes': function(containerId) {
var stage = new Kinetic.Stage({
@ -828,54 +830,22 @@ Test.Modules.MANUAL = {
container: containerId,
width: 578,
height: 200,
draggable: true,
//dragConstraint: 'horizontal',
/*
dragBounds: {
left: 100
}
*/
});
var layer = new Kinetic.Layer({
/*
draggable: true,
dragBounds: {
left: 100
}
*/
draggable: true
});
var layer = new Kinetic.Layer();
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
//draggable: true,
/*
dragBounds: {
left: 100
}
*/
strokeWidth: 4
});
//stage.setDraggable(false);
//layer.setDraggable(false);
/*
stage.on('dragstart', function() {
console.log('dragstart');
});
stage.on('dragmove', function() {
//console.log('dragmove');
});
stage.on('dragend', function() {
console.log('dragend');
});
*/
layer.add(Circle);
stage.add(layer);
showBuffer(layer)
},
'DRAG AND DROP - draggable true false': function(containerId) {
var stage = new Kinetic.Stage({

23
tests/js/unit/nodeTests.js
View File

@ -60,6 +60,29 @@ Test.Modules.NODE = {
rect2.setListening(true);
test(rect2.getListening() === true, 'rect2 should be listening');
},
'listen and don\'t listen with one shape': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 50,
y: 50,
width: 200,
height: 50,
fill: 'blue'
});
layer.add(rect);
stage.add(layer);
rect.setListening(false);
layer.drawBuffer();
showBuffer(layer);
},
'group to image': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,