mirror of
https://github.com/konvajs/konva.git
synced 2026-01-02 20:42:42 +08:00
continued refactoring and decoupling drag and drop logic. The code base now looks fully decoupled as far as I can tell - next step is to test configurator combinations
This commit is contained in:
Eric Rowell
159
dist/kinetic-current.js
vendored
159
dist/kinetic-current.js
vendored
@@ -42,14 +42,6 @@ Kinetic.Global = {
|
||||
tempNodes: {},
|
||||
//shapes hash. rgb keys and shape values
|
||||
shapes: {},
|
||||
drag: {
|
||||
moving: false,
|
||||
offset: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
lastDrawTime: 0
|
||||
},
|
||||
warn: function(str) {
|
||||
if(console && console.warn) {
|
||||
console.warn('Kinetic warning: ' + str);
|
||||
@@ -2247,11 +2239,47 @@ Kinetic.Node.prototype.isListening = Kinetic.Node.prototype.getListening;
|
||||
* @name getVisible
|
||||
* @methodOf Kinetic.Node.prototype
|
||||
*/
|
||||
Kinetic.Global.dragAnim = new Kinetic.Animation();
|
||||
Kinetic.DD = {
|
||||
anim: new Kinetic.Animation(),
|
||||
moving: false,
|
||||
offset: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
};
|
||||
|
||||
Kinetic.Global._endDrag = function(evt) {
|
||||
var go = Kinetic.Global;
|
||||
var node = go.drag.node;
|
||||
Kinetic.DD._startDrag = function(evt) {
|
||||
var dd = Kinetic.DD;
|
||||
var node = dd.node;
|
||||
|
||||
if(node) {
|
||||
var pos = node.getStage().getUserPosition();
|
||||
var dbf = node.attrs.dragBoundFunc;
|
||||
|
||||
var newNodePos = {
|
||||
x: pos.x - dd.offset.x,
|
||||
y: pos.y - dd.offset.y
|
||||
};
|
||||
|
||||
if(dbf !== undefined) {
|
||||
newNodePos = dbf.call(node, newNodePos, evt);
|
||||
}
|
||||
|
||||
node.setAbsolutePosition(newNodePos);
|
||||
|
||||
if(!dd.moving) {
|
||||
dd.moving = true;
|
||||
// execute dragstart events if defined
|
||||
dd.node._handleEvent('dragstart', evt);
|
||||
}
|
||||
|
||||
// execute user defined ondragmove if defined
|
||||
dd.node._handleEvent('dragmove', evt);
|
||||
}
|
||||
};
|
||||
Kinetic.DD._endDrag = function(evt) {
|
||||
var dd = Kinetic.DD;
|
||||
var node = dd.node;
|
||||
if(node) {
|
||||
if(node.nodeType === 'Stage') {
|
||||
node.draw();
|
||||
@@ -2261,43 +2289,13 @@ Kinetic.Global._endDrag = function(evt) {
|
||||
}
|
||||
|
||||
// handle dragend
|
||||
if(go.drag.moving) {
|
||||
go.drag.moving = false;
|
||||
if(dd.moving) {
|
||||
dd.moving = false;
|
||||
node._handleEvent('dragend', evt);
|
||||
}
|
||||
}
|
||||
go.drag.node = null;
|
||||
go.dragAnim.stop();
|
||||
};
|
||||
|
||||
Kinetic.Global._startDrag = function(evt) {
|
||||
var go = Kinetic.Global;
|
||||
var node = go.drag.node;
|
||||
|
||||
if(node) {
|
||||
var pos = node.getStage().getUserPosition();
|
||||
var dbf = node.attrs.dragBoundFunc;
|
||||
|
||||
var newNodePos = {
|
||||
x: pos.x - go.drag.offset.x,
|
||||
y: pos.y - go.drag.offset.y
|
||||
};
|
||||
|
||||
if(dbf !== undefined) {
|
||||
newNodePos = dbf.call(node, newNodePos, evt);
|
||||
}
|
||||
|
||||
node.setAbsolutePosition(newNodePos);
|
||||
|
||||
if(!go.drag.moving) {
|
||||
go.drag.moving = true;
|
||||
// execute dragstart events if defined
|
||||
go.drag.node._handleEvent('dragstart', evt);
|
||||
}
|
||||
|
||||
// execute user defined ondragmove if defined
|
||||
go.drag.node._handleEvent('dragmove', evt);
|
||||
}
|
||||
dd.node = null;
|
||||
dd.anim.stop();
|
||||
};
|
||||
/**
|
||||
* set draggable
|
||||
@@ -2323,20 +2321,19 @@ Kinetic.Node.prototype.getDraggable = function() {
|
||||
* @methodOf Kinetic.Node.prototype
|
||||
*/
|
||||
Kinetic.Node.prototype.isDragging = function() {
|
||||
var go = Kinetic.Global;
|
||||
return go.drag.node && go.drag.node._id === this._id && go.drag.moving;
|
||||
var dd = Kinetic.DD;
|
||||
return dd.node && dd.node._id === this._id && dd.moving;
|
||||
};
|
||||
|
||||
Kinetic.Node.prototype._listenDrag = function() {
|
||||
this._dragCleanup();
|
||||
var go = Kinetic.Global;
|
||||
var that = this;
|
||||
this.on('mousedown.kinetic touchstart.kinetic', function(evt) {
|
||||
that._initDrag();
|
||||
});
|
||||
};
|
||||
Kinetic.Node.prototype._initDrag = function() {
|
||||
var go = Kinetic.Global;
|
||||
var dd = Kinetic.DD;
|
||||
var stage = this.getStage();
|
||||
var pos = stage.getUserPosition();
|
||||
|
||||
@@ -2344,21 +2341,21 @@ Kinetic.Node.prototype._initDrag = function() {
|
||||
var m = this.getTransform().getTranslation();
|
||||
var am = this.getAbsoluteTransform().getTranslation();
|
||||
var ap = this.getAbsolutePosition();
|
||||
go.drag.node = this;
|
||||
go.drag.offset.x = pos.x - ap.x;
|
||||
go.drag.offset.y = pos.y - ap.y;
|
||||
dd.node = this;
|
||||
dd.offset.x = pos.x - ap.x;
|
||||
dd.offset.y = pos.y - ap.y;
|
||||
|
||||
/*
|
||||
* if dragging and dropping the stage,
|
||||
* draw all of the layers
|
||||
*/
|
||||
if(this.nodeType === 'Stage') {
|
||||
go.dragAnim.node = this;
|
||||
dd.anim.node = this;
|
||||
}
|
||||
else {
|
||||
go.dragAnim.node = this.getLayer();
|
||||
dd.anim.node = this.getLayer();
|
||||
}
|
||||
go.dragAnim.start();
|
||||
dd.anim.start();
|
||||
}
|
||||
};
|
||||
Kinetic.Node.prototype._dragChange = function() {
|
||||
@@ -2375,9 +2372,9 @@ Kinetic.Node.prototype._dragChange = function() {
|
||||
* drag and drop mode
|
||||
*/
|
||||
var stage = this.getStage();
|
||||
var go = Kinetic.Global;
|
||||
if(stage && go.drag.node && go.drag.node._id === this._id) {
|
||||
stage._endDrag();
|
||||
var dd = Kinetic.DD;
|
||||
if(stage && dd.node && dd.node._id === this._id) {
|
||||
dd._endDrag();
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -3138,10 +3135,10 @@ Kinetic.Stage.prototype = {
|
||||
},
|
||||
_mouseout: function(evt) {
|
||||
this._setUserPosition(evt);
|
||||
var go = Kinetic.Global;
|
||||
var dd = Kinetic.DD;
|
||||
// if there's a current target shape, run mouseout handlers
|
||||
var targetShape = this.targetShape;
|
||||
if(targetShape && !go.drag.moving) {
|
||||
if(targetShape && (!dd || !dd.moving)) {
|
||||
targetShape._handleEvent('mouseout', evt);
|
||||
targetShape._handleEvent('mouseleave', evt);
|
||||
this.targetShape = null;
|
||||
@@ -3149,17 +3146,19 @@ Kinetic.Stage.prototype = {
|
||||
this.mousePos = undefined;
|
||||
|
||||
// end drag and drop
|
||||
go._endDrag(evt);
|
||||
if(dd) {
|
||||
dd._endDrag(evt);
|
||||
}
|
||||
},
|
||||
_mousemove: function(evt) {
|
||||
this._setUserPosition(evt);
|
||||
var go = Kinetic.Global;
|
||||
var dd = Kinetic.DD;
|
||||
var obj = this.getIntersection(this.getUserPosition());
|
||||
|
||||
if(obj) {
|
||||
var shape = obj.shape;
|
||||
if(shape) {
|
||||
if(!go.drag.moving && obj.pixel[3] === 255 && (!this.targetShape || this.targetShape._id !== shape._id)) {
|
||||
if((!dd || !dd.moving) && obj.pixel[3] === 255 && (!this.targetShape || this.targetShape._id !== shape._id)) {
|
||||
if(this.targetShape) {
|
||||
this.targetShape._handleEvent('mouseout', evt, shape);
|
||||
this.targetShape._handleEvent('mouseleave', evt, shape);
|
||||
@@ -3177,14 +3176,16 @@ Kinetic.Stage.prototype = {
|
||||
* if no shape was detected, clear target shape and try
|
||||
* to run mouseout from previous target shape
|
||||
*/
|
||||
else if(this.targetShape && !go.drag.moving) {
|
||||
else if(this.targetShape && (!dd || !dd.moving)) {
|
||||
this.targetShape._handleEvent('mouseout', evt);
|
||||
this.targetShape._handleEvent('mouseleave', evt);
|
||||
this.targetShape = null;
|
||||
}
|
||||
|
||||
// start drag and drop
|
||||
go._startDrag(evt);
|
||||
if(dd) {
|
||||
dd._startDrag(evt);
|
||||
}
|
||||
},
|
||||
_mousedown: function(evt) {
|
||||
this._setUserPosition(evt);
|
||||
@@ -3196,13 +3197,13 @@ Kinetic.Stage.prototype = {
|
||||
}
|
||||
|
||||
//init stage drag and drop
|
||||
if(this.attrs.draggable) {
|
||||
if(Kinetic.DD && this.attrs.draggable) {
|
||||
this._initDrag();
|
||||
}
|
||||
},
|
||||
_mouseup: function(evt) {
|
||||
this._setUserPosition(evt);
|
||||
var go = Kinetic.Global;
|
||||
var dd = Kinetic.DD;
|
||||
var obj = this.getIntersection(this.getUserPosition());
|
||||
var that = this;
|
||||
if(obj && obj.shape) {
|
||||
@@ -3215,7 +3216,7 @@ Kinetic.Stage.prototype = {
|
||||
* if dragging and dropping, don't fire click or dbl click
|
||||
* event
|
||||
*/
|
||||
if((!go.drag.moving) || !go.drag.node) {
|
||||
if(!dd || !dd.moving || !dd.node) {
|
||||
shape._handleEvent('click', evt);
|
||||
|
||||
if(this.inDoubleClickWindow) {
|
||||
@@ -3231,7 +3232,9 @@ Kinetic.Stage.prototype = {
|
||||
this.clickStart = false;
|
||||
|
||||
// end drag and drop
|
||||
go._endDrag(evt);
|
||||
if(dd) {
|
||||
dd._endDrag(evt);
|
||||
}
|
||||
},
|
||||
_touchstart: function(evt) {
|
||||
this._setUserPosition(evt);
|
||||
@@ -3247,13 +3250,13 @@ Kinetic.Stage.prototype = {
|
||||
/*
|
||||
* init stage drag and drop
|
||||
*/
|
||||
if(this.attrs.draggable) {
|
||||
if(Kinetic.DD && this.attrs.draggable) {
|
||||
this._initDrag();
|
||||
}
|
||||
},
|
||||
_touchend: function(evt) {
|
||||
this._setUserPosition(evt);
|
||||
var go = Kinetic.Global;
|
||||
var dd = Kinetic.DD;
|
||||
var obj = this.getIntersection(this.getUserPosition());
|
||||
var that = this;
|
||||
if(obj && obj.shape) {
|
||||
@@ -3266,7 +3269,7 @@ Kinetic.Stage.prototype = {
|
||||
* if dragging and dropping, don't fire tap or dbltap
|
||||
* event
|
||||
*/
|
||||
if((!go.drag.moving) || !go.drag.node) {
|
||||
if(!dd || !dd.moving || !dd.node) {
|
||||
shape._handleEvent('tap', evt);
|
||||
|
||||
if(this.inDoubleClickWindow) {
|
||||
@@ -3283,11 +3286,13 @@ Kinetic.Stage.prototype = {
|
||||
this.tapStart = false;
|
||||
|
||||
// end drag and drop
|
||||
go._endDrag(evt);
|
||||
if(dd) {
|
||||
dd._endDrag(evt);
|
||||
}
|
||||
},
|
||||
_touchmove: function(evt) {
|
||||
this._setUserPosition(evt);
|
||||
var go = Kinetic.Global;
|
||||
var dd = Kinetic.DD;
|
||||
evt.preventDefault();
|
||||
var obj = this.getIntersection(this.getUserPosition());
|
||||
if(obj && obj.shape) {
|
||||
@@ -3296,7 +3301,9 @@ Kinetic.Stage.prototype = {
|
||||
}
|
||||
|
||||
// start drag and drop
|
||||
go._startDrag(evt);
|
||||
if(dd) {
|
||||
dd._startDrag(evt);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* set mouse positon for desktop apps
|
||||
|
||||
Reference in New Issue
Block a user