removed dynamic drag and drop layer all together. In the end, the performance benefits (small) did not out weigh the complexity consequences

This commit is contained in:
Eric Rowell
2013-03-23 21:47:15 -07:00
parent c31abf6be3
commit b5c1bc633a
4 changed files with 9 additions and 59 deletions

View File

@@ -1,7 +1,9 @@
(function() {
Kinetic.DD = {
anim: new Kinetic.Animation(),
started: false,
// this flag is set to true the moment the user starts moving the mouse
// after they have mousedowned or touchstarted the node
moving: false,
offset: {
x: 0,
y: 0
@@ -11,10 +13,6 @@
Kinetic.getNodeDragging = function() {
return Kinetic.DD.node;
};
Kinetic.DD._initDragLayer = function(stage) {
stage.dragLayer = new Kinetic.Layer();
stage.dragLayer.getCanvas().getElement().className = 'kinetic-drag-and-drop-layer';
};
Kinetic.DD._drag = function(evt) {
var dd = Kinetic.DD, node = dd.node;
@@ -51,11 +49,6 @@
if(node) {
nodeType = node.nodeType,
layer = node.getLayer();
if((nodeType === 'Group' || nodeType === 'Shape') && node.getDragOnTop()) {
node.getStage().dragLayer.remove();
}
dd.anim.stop();
// only fire dragend event if the drag and drop
@@ -97,32 +90,15 @@
pos = stage.getPointerPosition();
if(pos) {
var m = this.getTransform().getTranslation(), ap = this.getAbsolutePosition(), nodeType = this.nodeType, container;
var m = this.getTransform().getTranslation(),
ap = this.getAbsolutePosition(),
layer = this.getLayer();
dd.node = this;
dd.offset.x = pos.x - ap.x;
dd.offset.y = pos.y - ap.y;
dd.anim.node = this;
// Stage and Layer node types
if(nodeType === 'Stage' || nodeType === 'Layer') {
dd.anim.start();
}
// Group or Shape node types
else {
if(this.getDragOnTop()) {
// clear shape from layer canvas
that.setVisible(false);
layer.draw();
that.setVisible(true);
stage.add(stage.dragLayer);
dd.anim.start();
}
else {
dd.anim.start();
}
}
dd.anim.node = layer;
dd.anim.start();
}
};
/**

View File

@@ -90,8 +90,7 @@
* @methodOf Kinetic.Layer.prototype
*/
getCanvas: function() {
var stage = this.getStage();
return (stage && stage._isTempDDLayerActive()) ? stage.dragLayer.canvas : this.canvas;
return this.canvas;
},
/**
* get layer hit canvas

View File

@@ -30,10 +30,6 @@
this._buildDOM();
this._bindContentEvents();
Kinetic.Global.stages.push(this);
if(dd) {
dd._initDragLayer(this);
}
},
/**
* set container dom element which contains the stage wrapper div element
@@ -309,22 +305,12 @@
// chainable
return this;
},
/**
* get drag and drop layer
*/
getDragLayer: function() {
return this.dragLayer;
},
getParent: function() {
return null;
},
getLayer: function() {
return null;
},
_isTempDDLayerActive: function() {
var dragLayer = this.dragLayer;
return dragLayer && dragLayer.getStage();
},
_setPointerPosition: function(evt) {
if(!evt) {
evt = window.event;

View File

@@ -228,16 +228,5 @@ Test.Modules.STAGE = {
test(stage.getStage() !== undefined, 'stage is undefined');
//console.log(stage.getStage());
},
'test stage.getDragLayer': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
test(stage.getDragLayer().getCanvas().getElement().className === 'kinetic-drag-and-drop-layer', 'problem with stage.getDragLayer');
}
};