From c504e7980bb62a99da7e0dda311c62ad8990a777 Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Wed, 9 Jan 2013 22:34:14 -0800 Subject: [PATCH] re-fixed drag and drop flicker issue on mobile. It was due to the browser taking a few ms to add to canvas dom when drag and drop started --- src/DragAndDrop.js | 83 +++++++++++++++++-------------- tests/js/unit/shapes/starTests.js | 2 +- 2 files changed, 46 insertions(+), 39 deletions(-) diff --git a/src/DragAndDrop.js b/src/DragAndDrop.js index ca91752a..568f8560 100644 --- a/src/DragAndDrop.js +++ b/src/DragAndDrop.js @@ -10,9 +10,7 @@ topLayer: null }; Kinetic.Node.prototype._startDrag = function() { - var dd = Kinetic.DD; - var stage = this.getStage(); - var pos = stage.getUserPosition(); + var dd = Kinetic.DD, stage = this.getStage(), pos = stage.getUserPosition(); if(pos) { var m = this.getTransform().getTranslation(), ap = this.getAbsolutePosition(), nodeType = this.nodeType; @@ -34,41 +32,7 @@ * and move the node to the top layer */ if(nodeType === 'Group' || nodeType === 'Shape') { - var lastContainer = null; - dd.prevParent = this.getParent(); - - // re-construct node tree - this._eachAncestorReverse(function(node) { - if(node.nodeType === 'Layer') { - dd.topLayer = new Kinetic.Layer({ - x: node.getX(), - y: node.getY(), - scale: node.getScale(), - rotation: node.getRotation() - }); - lastContainer = dd.topLayer; - stage.add(dd.topLayer); - } - else if(node.nodeType === 'Group') { - var group = new Kinetic.Group({ - x: node.getX(), - y: node.getY(), - scale: node.getScale(), - rotation: node.getRotation() - }); - - lastContainer.add(group); - lastContainer = group; - } - }); - - this.moveTo(dd.topLayer); - dd.topLayer.draw(); - - if(dd.prevParent) { - dd.prevParent.getLayer().draw(); - } - + this._moveToTop(); } dd.anim.node = this.getLayer(); @@ -76,6 +40,49 @@ dd.anim.start(); } }; + Kinetic.Node.prototype._moveToTop = function() { + var dd = Kinetic.DD, stage = this.getStage(), nodeType = this.nodeType, lastContainer, group; + dd.prevParent = this.getParent(); + + // re-construct node tree + this._eachAncestorReverse(function(node) { + if(node.nodeType === 'Layer') { + dd.topLayer = new Kinetic.Layer({ + x: node.getX(), + y: node.getY(), + scale: node.getScale(), + rotation: node.getRotation(), + visible: false + }); + lastContainer = dd.topLayer; + stage.add(dd.topLayer); + } + else if(node.nodeType === 'Group') { + group = new Kinetic.Group({ + x: node.getX(), + y: node.getY(), + scale: node.getScale(), + rotation: node.getRotation() + }); + + lastContainer.add(group); + lastContainer = group; + } + }); + + this.moveTo(dd.topLayer); + dd.topLayer.draw(); + + setTimeout(function() { + if(dd.prevParent) { + dd.prevParent.getLayer().draw(); + } + if(dd.topLayer) { + dd.topLayer.show(); + dd.topLayer.draw(); + } + }, 0); + }; Kinetic.DD._drag = function(evt) { var dd = Kinetic.DD, node = dd.node; diff --git a/tests/js/unit/shapes/starTests.js b/tests/js/unit/shapes/starTests.js index bf629382..2617d71b 100644 --- a/tests/js/unit/shapes/starTests.js +++ b/tests/js/unit/shapes/starTests.js @@ -30,7 +30,7 @@ Test.Modules.STAR = { layer.add(star); stage.add(layer); }, - '*add five point star with line join and shadow': function(containerId) { + 'add five point star with line join and shadow': function(containerId) { var stage = new Kinetic.Stage({ container: containerId, width: 578,