mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
drag&drop refactor, update docs
This commit is contained in:
Anton Lavrenov
parent
11d805795a
commit
a0b2f027ba
@ -6,21 +6,25 @@ This project adheres to [Semantic Versioning](http://semver.org/).
|
||||
## [new version][unreleased]
|
||||
|
||||
### Added
|
||||
* Show a warning when a stage has too many layers.
|
||||
* Show a warning when a stage has too many layers
|
||||
* Show a warning on duplicate ids
|
||||
* Show a warning on weird class in `Node.create` parsing from JSON
|
||||
|
||||
### Changed
|
||||
* Fixes inconsistent `layer.setSize()` method. Now it has same arguments as any container.
|
||||
* Full rewrite to Typescript with tons of refactoring and small optimizations. The public API should be 100% the same
|
||||
* Fixed `patternImage` and `radialGradient` for `Konva.Text`
|
||||
* `Konva.Util._isObject` is renamed to `Konva.Util._isPlainObject`.
|
||||
* changed behavior of `removeId`.
|
||||
* A bit changed behavior of `removeId` (private method), not it doesn't clear node ref, of id is changed.
|
||||
* simplified `batchDraw` method (it doesn't use `Konva.Animation`) now.
|
||||
* `id` and `name` properties defaults are empty strings, not `undefined`
|
||||
|
||||
### Removed
|
||||
* `Konva.Util.addMethods`
|
||||
* `Konva.Util._removeLastLetter`
|
||||
* `Konva.Util._getImage`
|
||||
* `Konv.Util._getRGBAString`
|
||||
* Removed polyfill for `requestAnimationFrame`.
|
||||
|
||||
### Fixed
|
||||
|
||||
|
||||
6
konva.min.js
vendored
6
konva.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,6 +1,4 @@
|
||||
import { glob } from './Global';
|
||||
import { BaseLayer } from './BaseLayer';
|
||||
import { Stage } from './Stage';
|
||||
import { Layer } from './Layer';
|
||||
|
||||
var now = (function() {
|
||||
@ -15,25 +13,6 @@ var now = (function() {
|
||||
};
|
||||
})();
|
||||
|
||||
function FRAF(callback) {
|
||||
setTimeout(callback, 1000 / 60);
|
||||
}
|
||||
|
||||
var RAF = (function() {
|
||||
return (
|
||||
glob.requestAnimationFrame ||
|
||||
glob.webkitRequestAnimationFrame ||
|
||||
glob.mozRequestAnimationFrame ||
|
||||
glob.oRequestAnimationFrame ||
|
||||
glob.msRequestAnimationFrame ||
|
||||
FRAF
|
||||
);
|
||||
})();
|
||||
|
||||
function requestAnimFrame(func) {
|
||||
return RAF.call(glob, func);
|
||||
}
|
||||
|
||||
/**
|
||||
* Animation constructor. A stage is used to contain multiple layers and handle
|
||||
* @constructor
|
||||
@ -263,7 +242,7 @@ export class Animation {
|
||||
var Anim = Animation;
|
||||
if (Anim.animations.length) {
|
||||
Anim._runFrames();
|
||||
requestAnimFrame(Anim._animationLoop);
|
||||
requestAnimationFrame(Anim._animationLoop);
|
||||
} else {
|
||||
Anim.animRunning = false;
|
||||
}
|
||||
@ -271,45 +250,7 @@ export class Animation {
|
||||
static _handleAnimation() {
|
||||
if (!this.animRunning) {
|
||||
this.animRunning = true;
|
||||
requestAnimFrame(this._animationLoop);
|
||||
requestAnimationFrame(this._animationLoop);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* batch draw. this function will not do immediate draw
|
||||
* but it will schedule drawing to next tick (requestAnimFrame)
|
||||
* @method
|
||||
* @name Konva.BaseLayer#batchDraw
|
||||
* @return {Konva.Layer} this
|
||||
*/
|
||||
// TODO: don't use animation and make sure they all run at the same time
|
||||
BaseLayer.prototype.batchDraw = function() {
|
||||
var that = this,
|
||||
Anim = Animation;
|
||||
|
||||
if (!this.batchAnim) {
|
||||
this.batchAnim = new Anim(function() {
|
||||
// stop animation after first tick
|
||||
that.batchAnim.stop();
|
||||
}, this);
|
||||
}
|
||||
|
||||
if (!this.batchAnim.isRunning()) {
|
||||
this.batchAnim.start();
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* batch draw
|
||||
* @method
|
||||
* @name Konva.BaseLayer#batchDraw
|
||||
* @return {Konva.Stage} this
|
||||
*/
|
||||
Stage.prototype.batchDraw = function() {
|
||||
this.getChildren().each(function(layer) {
|
||||
layer.batchDraw();
|
||||
});
|
||||
return this;
|
||||
};
|
||||
|
||||
@ -19,14 +19,13 @@ import { GetSet } from './types';
|
||||
* @@containerParams
|
||||
*/
|
||||
export abstract class BaseLayer extends Container {
|
||||
canvas: SceneCanvas;
|
||||
canvas = new SceneCanvas();
|
||||
hitCanvas: HitCanvas;
|
||||
|
||||
_waitingForDraw = false;
|
||||
|
||||
constructor(config) {
|
||||
super(config);
|
||||
this.nodeType = 'Layer';
|
||||
this.canvas = new SceneCanvas();
|
||||
|
||||
this.on('visibleChange', this._checkVisibility);
|
||||
this._checkVisibility();
|
||||
}
|
||||
@ -240,6 +239,25 @@ export abstract class BaseLayer extends Container {
|
||||
getIntersection(pos, selector?) {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* batch draw. this function will not do immediate draw
|
||||
* but it will schedule drawing to next tick (requestAnimFrame)
|
||||
* @method
|
||||
* @name Konva.BaseLayer#batchDraw
|
||||
* @return {Konva.Layer} this
|
||||
*/
|
||||
batchDraw() {
|
||||
if (this._waitingForDraw) {
|
||||
return;
|
||||
}
|
||||
Util.requestAnimFrame(() => {
|
||||
this._waitingForDraw = false;
|
||||
this.draw();
|
||||
});
|
||||
return this;
|
||||
}
|
||||
|
||||
// the apply transform method is handled by the Layer and FastLayer class
|
||||
// because it is up to the layer to decide if an absolute or relative transform
|
||||
// should be used
|
||||
@ -249,9 +267,10 @@ export abstract class BaseLayer extends Container {
|
||||
}
|
||||
|
||||
clearBeforeDraw: GetSet<boolean, this>;
|
||||
batchDraw: () => void;
|
||||
}
|
||||
|
||||
BaseLayer.prototype.nodeType = 'Layer';
|
||||
|
||||
/**
|
||||
* get/set clearBeforeDraw flag which determines if the layer is cleared or not
|
||||
* before drawing
|
||||
|
||||
@ -476,9 +476,11 @@ export class SceneContext extends Context {
|
||||
_fillPattern(shape) {
|
||||
var fillPatternX = shape.getFillPatternX(),
|
||||
fillPatternY = shape.getFillPatternY(),
|
||||
fillPatternScale = shape.getFillPatternScale(),
|
||||
fillPatternScaleX = shape.getFillPatternScaleX(),
|
||||
fillPatternScaleY = shape.getFillPatternScaleY(),
|
||||
fillPatternRotation = getAngle(shape.getFillPatternRotation()),
|
||||
fillPatternOffset = shape.getFillPatternOffset();
|
||||
fillPatternOffsetX = shape.getFillPatternOffsetX(),
|
||||
fillPatternOffsetY = shape.getFillPatternOffsetY();
|
||||
|
||||
if (fillPatternX || fillPatternY) {
|
||||
this.translate(fillPatternX || 0, fillPatternY || 0);
|
||||
@ -488,16 +490,14 @@ export class SceneContext extends Context {
|
||||
this.rotate(fillPatternRotation);
|
||||
}
|
||||
|
||||
// TODO: optimize to fillPatternScaleX and fillPatternScaleY
|
||||
// otherwise it is object (always true)
|
||||
// do the same for offset
|
||||
if (fillPatternScale) {
|
||||
this.scale(fillPatternScale.x, fillPatternScale.y);
|
||||
if (fillPatternScaleX || fillPatternScaleY) {
|
||||
this.scale(fillPatternScaleX, fillPatternScaleY);
|
||||
}
|
||||
if (fillPatternOffset) {
|
||||
this.translate(-1 * fillPatternOffset.x, -1 * fillPatternOffset.y);
|
||||
if (fillPatternOffsetX || fillPatternOffsetY) {
|
||||
this.translate(-1 * fillPatternOffsetX, -1 * fillPatternOffsetY);
|
||||
}
|
||||
|
||||
// TODO: cache pattern
|
||||
this.setAttr(
|
||||
'fillStyle',
|
||||
this.createPattern(
|
||||
|
||||
@ -1,10 +1,6 @@
|
||||
import { Animation } from './Animation';
|
||||
import { Node } from './Node';
|
||||
import { Factory, Validators } from './Factory';
|
||||
import { isBrowser, getGlobalKonva } from './Global';
|
||||
|
||||
// TODO: move it to core, move all node methods to Node class
|
||||
|
||||
export const DD = {
|
||||
startPointerPos: {
|
||||
x: 0,
|
||||
@ -26,10 +22,9 @@ export const DD = {
|
||||
|
||||
// methods
|
||||
_drag(evt) {
|
||||
var dd = DD,
|
||||
node = dd.node;
|
||||
var node = DD.node;
|
||||
if (node) {
|
||||
if (!dd.isDragging) {
|
||||
if (!DD.isDragging) {
|
||||
var pos = node.getStage().getPointerPosition();
|
||||
// it is possible that pos is undefined
|
||||
// reattach it
|
||||
@ -39,8 +34,8 @@ export const DD = {
|
||||
}
|
||||
var dragDistance = node.dragDistance();
|
||||
var distance = Math.max(
|
||||
Math.abs(pos.x - dd.startPointerPos.x),
|
||||
Math.abs(pos.y - dd.startPointerPos.y)
|
||||
Math.abs(pos.x - DD.startPointerPos.x),
|
||||
Math.abs(pos.y - DD.startPointerPos.y)
|
||||
);
|
||||
if (distance < dragDistance) {
|
||||
return;
|
||||
@ -48,8 +43,8 @@ export const DD = {
|
||||
}
|
||||
|
||||
node.getStage()._setPointerPosition(evt);
|
||||
if (!dd.isDragging) {
|
||||
dd.isDragging = true;
|
||||
if (!DD.isDragging) {
|
||||
DD.isDragging = true;
|
||||
node.fire(
|
||||
'dragstart',
|
||||
{
|
||||
@ -79,19 +74,18 @@ export const DD = {
|
||||
}
|
||||
},
|
||||
_endDragBefore(evt) {
|
||||
var dd = DD,
|
||||
node = dd.node,
|
||||
var node = DD.node,
|
||||
layer;
|
||||
|
||||
if (node) {
|
||||
layer = node.getLayer();
|
||||
dd.anim.stop();
|
||||
DD.anim.stop();
|
||||
|
||||
// only fire dragend event if the drag and drop
|
||||
// operation actually started.
|
||||
if (dd.isDragging) {
|
||||
dd.isDragging = false;
|
||||
dd.justDragged = true;
|
||||
if (DD.isDragging) {
|
||||
DD.isDragging = false;
|
||||
DD.justDragged = true;
|
||||
getGlobalKonva().listenClickTap = false;
|
||||
|
||||
if (evt) {
|
||||
@ -99,7 +93,7 @@ export const DD = {
|
||||
}
|
||||
}
|
||||
|
||||
delete dd.node;
|
||||
delete DD.node;
|
||||
|
||||
if (layer || node instanceof getGlobalKonva().Stage) {
|
||||
(layer || node).draw();
|
||||
@ -124,207 +118,6 @@ export const DD = {
|
||||
}
|
||||
};
|
||||
|
||||
// Node extenders
|
||||
|
||||
/**
|
||||
* initiate drag and drop
|
||||
* @method
|
||||
* @name Konva.Node#startDrag
|
||||
*/
|
||||
Node.prototype.startDrag = function() {
|
||||
var dd = DD,
|
||||
stage = this.getStage(),
|
||||
layer = this.getLayer(),
|
||||
pos = stage.getPointerPosition(),
|
||||
ap = this.getAbsolutePosition();
|
||||
|
||||
if (pos) {
|
||||
if (dd.node) {
|
||||
dd.node.stopDrag();
|
||||
}
|
||||
|
||||
dd.node = this;
|
||||
dd.startPointerPos = pos;
|
||||
dd.offset.x = pos.x - ap.x;
|
||||
dd.offset.y = pos.y - ap.y;
|
||||
dd.anim.setLayers(layer || this.getLayers());
|
||||
dd.anim.start();
|
||||
|
||||
this._setDragPosition();
|
||||
}
|
||||
};
|
||||
|
||||
Node.prototype._setDragPosition = function(evt) {
|
||||
var dd = DD,
|
||||
pos = this.getStage().getPointerPosition(),
|
||||
dbf = this.getDragBoundFunc();
|
||||
if (!pos) {
|
||||
return;
|
||||
}
|
||||
var newNodePos = {
|
||||
x: pos.x - dd.offset.x,
|
||||
y: pos.y - dd.offset.y
|
||||
};
|
||||
|
||||
if (dbf !== undefined) {
|
||||
newNodePos = dbf.call(this, newNodePos, evt);
|
||||
}
|
||||
this.setAbsolutePosition(newNodePos);
|
||||
|
||||
if (
|
||||
!this._lastPos ||
|
||||
this._lastPos.x !== newNodePos.x ||
|
||||
this._lastPos.y !== newNodePos.y
|
||||
) {
|
||||
dd.anim['dirty'] = true;
|
||||
}
|
||||
|
||||
this._lastPos = newNodePos;
|
||||
};
|
||||
|
||||
/**
|
||||
* stop drag and drop
|
||||
* @method
|
||||
* @name Konva.Node#stopDrag
|
||||
*/
|
||||
Node.prototype.stopDrag = function() {
|
||||
var dd = DD,
|
||||
evt = {};
|
||||
dd._endDragBefore(evt);
|
||||
dd._endDragAfter(evt);
|
||||
};
|
||||
|
||||
Node.prototype.setDraggable = function(draggable) {
|
||||
this._setAttr('draggable', draggable);
|
||||
this._dragChange();
|
||||
};
|
||||
|
||||
var origRemove = Node.prototype.remove;
|
||||
|
||||
Node.prototype['__originalRemove'] = origRemove;
|
||||
Node.prototype.remove = function() {
|
||||
var dd = DD;
|
||||
|
||||
// stop DD
|
||||
if (dd.node && dd.node._id === this._id) {
|
||||
this.stopDrag();
|
||||
}
|
||||
|
||||
return origRemove.call(this);
|
||||
};
|
||||
|
||||
/**
|
||||
* determine if node is currently in drag and drop mode
|
||||
* @method
|
||||
* @name Konva.Node#isDragging
|
||||
*/
|
||||
Node.prototype.isDragging = function() {
|
||||
var dd = DD;
|
||||
return !!(dd.node && dd.node._id === this._id && dd.isDragging);
|
||||
};
|
||||
|
||||
Node.prototype._listenDrag = function() {
|
||||
var that = this;
|
||||
|
||||
this._dragCleanup();
|
||||
|
||||
if (this.getClassName() === 'Stage') {
|
||||
this.on('contentMousedown.konva contentTouchstart.konva', function(evt) {
|
||||
if (!DD.node) {
|
||||
that.startDrag(evt);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.on('mousedown.konva touchstart.konva', function(evt) {
|
||||
// ignore right and middle buttons
|
||||
if (evt.evt.button === 1 || evt.evt.button === 2) {
|
||||
return;
|
||||
}
|
||||
if (!DD.node) {
|
||||
that.startDrag(evt);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Node.prototype._dragChange = function() {
|
||||
if (this.attrs.draggable) {
|
||||
this._listenDrag();
|
||||
} else {
|
||||
// remove event listeners
|
||||
this._dragCleanup();
|
||||
|
||||
/*
|
||||
* force drag and drop to end
|
||||
* if this node is currently in
|
||||
* drag and drop mode
|
||||
*/
|
||||
var stage = this.getStage();
|
||||
var dd = DD;
|
||||
if (stage && dd.node && dd.node._id === this._id) {
|
||||
dd.node.stopDrag();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Node.prototype._dragCleanup = function() {
|
||||
if (this.getClassName() === 'Stage') {
|
||||
this.off('contentMousedown.konva');
|
||||
this.off('contentTouchstart.konva');
|
||||
} else {
|
||||
this.off('mousedown.konva');
|
||||
this.off('touchstart.konva');
|
||||
}
|
||||
};
|
||||
|
||||
Factory.addGetterSetter(Node, 'dragBoundFunc');
|
||||
|
||||
/**
|
||||
* get/set drag bound function. This is used to override the default
|
||||
* drag and drop position.
|
||||
* @name Konva.Node#dragBoundFunc
|
||||
* @method
|
||||
* @param {Function} dragBoundFunc
|
||||
* @returns {Function}
|
||||
* @example
|
||||
* // get drag bound function
|
||||
* var dragBoundFunc = node.dragBoundFunc();
|
||||
*
|
||||
* // create vertical drag and drop
|
||||
* node.dragBoundFunc(function(pos){
|
||||
* // important pos - is absolute position of the node
|
||||
* // you should return absolute position too
|
||||
* return {
|
||||
* x: this.getAbsolutePosition().x,
|
||||
* y: pos.y
|
||||
* };
|
||||
* });
|
||||
*/
|
||||
|
||||
Factory.addGetterSetter(
|
||||
Node,
|
||||
'draggable',
|
||||
false,
|
||||
Validators.getBooleanValidator()
|
||||
);
|
||||
|
||||
/**
|
||||
* get/set draggable flag
|
||||
* @name Konva.Node#draggable
|
||||
* @method
|
||||
* @param {Boolean} draggable
|
||||
* @returns {Boolean}
|
||||
* @example
|
||||
* // get draggable flag
|
||||
* var draggable = node.draggable();
|
||||
*
|
||||
* // enable drag and drop
|
||||
* node.draggable(true);
|
||||
*
|
||||
* // disable drag and drop
|
||||
* node.draggable(false);
|
||||
*/
|
||||
|
||||
if (isBrowser) {
|
||||
window.addEventListener('mouseup', DD._endDragBefore, true);
|
||||
window.addEventListener('touchend', DD._endDragBefore, true);
|
||||
|
||||
@ -13,11 +13,6 @@ import { Container } from './Container';
|
||||
* var group = new Konva.Group();
|
||||
*/
|
||||
export class Group extends Container {
|
||||
constructor(config) {
|
||||
super(config);
|
||||
this.nodeType = 'Group';
|
||||
}
|
||||
|
||||
_validateAdd(child) {
|
||||
var type = child.getType();
|
||||
if (type !== 'Group' && type !== 'Shape') {
|
||||
@ -26,4 +21,6 @@ export class Group extends Container {
|
||||
}
|
||||
}
|
||||
|
||||
Group.prototype.nodeType = 'Group';
|
||||
|
||||
Collection.mapMethods(Group);
|
||||
|
||||
11
src/Layer.ts
11
src/Layer.ts
@ -44,13 +44,10 @@ var HASH = '#',
|
||||
* // now you can add shapes, groups into the layer
|
||||
*/
|
||||
export class Layer extends BaseLayer {
|
||||
constructor(config) {
|
||||
super(config);
|
||||
this.nodeType = 'Layer';
|
||||
this.hitCanvas = new HitCanvas({
|
||||
pixelRatio: 1
|
||||
});
|
||||
}
|
||||
hitCanvas = new HitCanvas({
|
||||
pixelRatio: 1
|
||||
});
|
||||
|
||||
_setCanvasSize(width, height) {
|
||||
this.canvas.setSize(width, height);
|
||||
this.hitCanvas.setSize(width, height);
|
||||
|
||||
230
src/Node.ts
230
src/Node.ts
@ -4,6 +4,7 @@ import { SceneCanvas, HitCanvas } from './Canvas';
|
||||
import { _removeName, _addName, getGlobalKonva } from './Global';
|
||||
import { Container } from './Container';
|
||||
import { GetSet, Vector2d } from './types';
|
||||
import { DD } from './DragAndDrop';
|
||||
|
||||
export const ids = {};
|
||||
|
||||
@ -116,6 +117,7 @@ export abstract class Node {
|
||||
index = 0;
|
||||
parent: Container = null;
|
||||
_cache: any = {};
|
||||
_lastPos = null;
|
||||
|
||||
_filterUpToDate = false;
|
||||
_isUnderCache = false;
|
||||
@ -705,6 +707,13 @@ export abstract class Node {
|
||||
* node.remove();
|
||||
*/
|
||||
remove() {
|
||||
if (DD.node && DD.node === this) {
|
||||
this.stopDrag();
|
||||
}
|
||||
this._remove();
|
||||
return this;
|
||||
}
|
||||
_remove() {
|
||||
var parent = this.getParent();
|
||||
|
||||
if (parent && parent.children) {
|
||||
@ -720,8 +729,6 @@ export abstract class Node {
|
||||
this._clearSelfAndDescendantCache(VISIBLE);
|
||||
this._clearSelfAndDescendantCache(LISTENING);
|
||||
this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
|
||||
|
||||
return this;
|
||||
}
|
||||
/**
|
||||
* remove and destroy a node. Kill it and delete forever! You should not reuse node after destroy().
|
||||
@ -1013,7 +1020,7 @@ export abstract class Node {
|
||||
y: this.y()
|
||||
};
|
||||
}
|
||||
getAbsolutePosition(top) {
|
||||
getAbsolutePosition(top?) {
|
||||
var absoluteMatrix = this.getAbsoluteTransform(top).getMatrix(),
|
||||
absoluteTransform = new Transform(),
|
||||
offset = this.offset();
|
||||
@ -1276,9 +1283,7 @@ export abstract class Node {
|
||||
moveTo(newContainer) {
|
||||
// do nothing if new container is already parent
|
||||
if (this.getParent() !== newContainer) {
|
||||
// this.remove my be overrided by drag and drop
|
||||
// buy we need original
|
||||
(this['__originalRemove'] || this.remove).call(this);
|
||||
this._remove();
|
||||
newContainer.add(this);
|
||||
}
|
||||
return this;
|
||||
@ -2058,6 +2063,140 @@ export abstract class Node {
|
||||
return this;
|
||||
}
|
||||
|
||||
// drag & drop
|
||||
/**
|
||||
* initiate drag and drop
|
||||
* @method
|
||||
* @name Konva.Node#startDrag
|
||||
*/
|
||||
startDrag() {
|
||||
var stage = this.getStage(),
|
||||
layer = this.getLayer(),
|
||||
pos = stage.getPointerPosition(),
|
||||
ap = this.getAbsolutePosition();
|
||||
|
||||
if (pos) {
|
||||
if (DD.node) {
|
||||
DD.node.stopDrag();
|
||||
}
|
||||
|
||||
DD.node = this;
|
||||
DD.startPointerPos = pos;
|
||||
DD.offset.x = pos.x - ap.x;
|
||||
DD.offset.y = pos.y - ap.y;
|
||||
DD.anim.setLayers(layer || this['getLayers']());
|
||||
DD.anim.start();
|
||||
|
||||
this._setDragPosition();
|
||||
}
|
||||
}
|
||||
|
||||
_setDragPosition(evt?) {
|
||||
var pos = this.getStage().getPointerPosition(),
|
||||
dbf = this.dragBoundFunc();
|
||||
if (!pos) {
|
||||
return;
|
||||
}
|
||||
var newNodePos = {
|
||||
x: pos.x - DD.offset.x,
|
||||
y: pos.y - DD.offset.y
|
||||
};
|
||||
|
||||
if (dbf !== undefined) {
|
||||
newNodePos = dbf.call(this, newNodePos, evt);
|
||||
}
|
||||
this.setAbsolutePosition(newNodePos);
|
||||
|
||||
if (
|
||||
!this._lastPos ||
|
||||
this._lastPos.x !== newNodePos.x ||
|
||||
this._lastPos.y !== newNodePos.y
|
||||
) {
|
||||
DD.anim['dirty'] = true;
|
||||
}
|
||||
|
||||
this._lastPos = newNodePos;
|
||||
}
|
||||
|
||||
/**
|
||||
* stop drag and drop
|
||||
* @method
|
||||
* @name Konva.Node#stopDrag
|
||||
*/
|
||||
stopDrag() {
|
||||
var evt = {};
|
||||
DD._endDragBefore(evt);
|
||||
DD._endDragAfter(evt);
|
||||
}
|
||||
|
||||
setDraggable(draggable) {
|
||||
this._setAttr('draggable', draggable);
|
||||
this._dragChange();
|
||||
}
|
||||
|
||||
/**
|
||||
* determine if node is currently in drag and drop mode
|
||||
* @method
|
||||
* @name Konva.Node#isDragging
|
||||
*/
|
||||
isDragging() {
|
||||
return !!(DD.node && DD.node === this && DD.isDragging);
|
||||
}
|
||||
|
||||
_listenDrag() {
|
||||
var that = this;
|
||||
|
||||
this._dragCleanup();
|
||||
|
||||
if (this.getClassName() === 'Stage') {
|
||||
this.on('contentMousedown.konva contentTouchstart.konva', function(evt) {
|
||||
if (!DD.node) {
|
||||
that.startDrag();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.on('mousedown.konva touchstart.konva', function(evt) {
|
||||
// ignore right and middle buttons
|
||||
if (evt.evt.button === 1 || evt.evt.button === 2) {
|
||||
return;
|
||||
}
|
||||
if (!DD.node) {
|
||||
that.startDrag();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
_dragChange() {
|
||||
if (this.attrs.draggable) {
|
||||
this._listenDrag();
|
||||
} else {
|
||||
// remove event listeners
|
||||
this._dragCleanup();
|
||||
|
||||
/*
|
||||
* force drag and drop to end
|
||||
* if this node is currently in
|
||||
* drag and drop mode
|
||||
*/
|
||||
var stage = this.getStage();
|
||||
var dd = DD;
|
||||
if (stage && dd.node && dd.node._id === this._id) {
|
||||
dd.node.stopDrag();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_dragCleanup() {
|
||||
if (this.getClassName() === 'Stage') {
|
||||
this.off('contentMousedown.konva');
|
||||
this.off('contentTouchstart.konva');
|
||||
} else {
|
||||
this.off('mousedown.konva');
|
||||
this.off('touchstart.konva');
|
||||
}
|
||||
}
|
||||
|
||||
preventDefault: GetSet<boolean, this>;
|
||||
|
||||
// from filters
|
||||
@ -2084,8 +2223,7 @@ export abstract class Node {
|
||||
embossStrength: GetSet<number, this>;
|
||||
embossWhiteLevel: GetSet<number, this>;
|
||||
enhance: GetSet<number, this>;
|
||||
// TODO: write correct type
|
||||
filters: GetSet<any[], this>;
|
||||
filters: GetSet<Filter[], this>;
|
||||
position: GetSet<Vector2d, this>;
|
||||
size: GetSet<Vector2d, this>;
|
||||
|
||||
@ -2108,17 +2246,7 @@ export abstract class Node {
|
||||
skewX: GetSet<number, this>;
|
||||
skewY: GetSet<number, this>;
|
||||
|
||||
// TODO: move this method to that file
|
||||
startDrag: () => void;
|
||||
stopDrag: () => void;
|
||||
|
||||
to: (params: any) => void;
|
||||
_setDragPosition: (pos: Vector2d) => void;
|
||||
setDraggable: (val: boolean) => void;
|
||||
isDragging: () => boolean;
|
||||
_listenDrag: () => void;
|
||||
_dragChange: () => void;
|
||||
_dragCleanup: () => void;
|
||||
|
||||
transformsEnabled: GetSet<string, this>;
|
||||
|
||||
@ -2162,8 +2290,17 @@ export abstract class Node {
|
||||
obj.attrs.container = container;
|
||||
}
|
||||
|
||||
// TODO: check is such className doesn't exist
|
||||
if (!getGlobalKonva()[className]) {
|
||||
Util.warn(
|
||||
'Can not find a node with class name "' +
|
||||
className +
|
||||
'". Fallback to "Shape".'
|
||||
);
|
||||
className = 'Shape';
|
||||
}
|
||||
|
||||
const Class = getGlobalKonva()[className];
|
||||
|
||||
no = new Class(obj.attrs);
|
||||
if (children) {
|
||||
len = children.length;
|
||||
@ -2305,12 +2442,7 @@ Factory.addGetterSetter(Node, 'opacity', 1, Validators.getNumberValidator());
|
||||
*/
|
||||
|
||||
// TODO: should default name be empty string?
|
||||
Factory.addGetterSetter(
|
||||
Node,
|
||||
'name',
|
||||
undefined,
|
||||
Validators.getStringValidator()
|
||||
);
|
||||
Factory.addGetterSetter(Node, 'name', '', Validators.getStringValidator());
|
||||
|
||||
/**
|
||||
* get/set name
|
||||
@ -2329,7 +2461,7 @@ Factory.addGetterSetter(
|
||||
* node.name('foo bar');
|
||||
*/
|
||||
|
||||
Factory.addGetterSetter(Node, 'id');
|
||||
Factory.addGetterSetter(Node, 'id', '', Validators.getStringValidator());
|
||||
|
||||
/**
|
||||
* get/set id. Id is global for whole page.
|
||||
@ -2733,6 +2865,52 @@ Factory.addGetterSetter(
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'size');
|
||||
|
||||
/**
|
||||
* get/set drag bound function. This is used to override the default
|
||||
* drag and drop position.
|
||||
* @name Konva.Node#dragBoundFunc
|
||||
* @method
|
||||
* @param {Function} dragBoundFunc
|
||||
* @returns {Function}
|
||||
* @example
|
||||
* // get drag bound function
|
||||
* var dragBoundFunc = node.dragBoundFunc();
|
||||
*
|
||||
* // create vertical drag and drop
|
||||
* node.dragBoundFunc(function(pos){
|
||||
* // important pos - is absolute position of the node
|
||||
* // you should return absolute position too
|
||||
* return {
|
||||
* x: this.getAbsolutePosition().x,
|
||||
* y: pos.y
|
||||
* };
|
||||
* });
|
||||
*/
|
||||
Factory.addGetterSetter(Node, 'dragBoundFunc');
|
||||
|
||||
/**
|
||||
* get/set draggable flag
|
||||
* @name Konva.Node#draggable
|
||||
* @method
|
||||
* @param {Boolean} draggable
|
||||
* @returns {Boolean}
|
||||
* @example
|
||||
* // get draggable flag
|
||||
* var draggable = node.draggable();
|
||||
*
|
||||
* // enable drag and drop
|
||||
* node.draggable(true);
|
||||
*
|
||||
* // disable drag and drop
|
||||
* node.draggable(false);
|
||||
*/
|
||||
Factory.addGetterSetter(
|
||||
Node,
|
||||
'draggable',
|
||||
false,
|
||||
Validators.getBooleanValidator()
|
||||
);
|
||||
|
||||
Factory.backCompat(Node, {
|
||||
rotateDeg: 'rotate',
|
||||
setRotationDeg: 'setRotation',
|
||||
|
||||
13
src/Stage.ts
13
src/Stage.ts
@ -755,9 +755,20 @@ export class Stage extends Container {
|
||||
clearCache() {
|
||||
return this;
|
||||
}
|
||||
/**
|
||||
* batch draw
|
||||
* @method
|
||||
* @name Konva.BaseLayer#batchDraw
|
||||
* @return {Konva.Stage} this
|
||||
*/
|
||||
batchDraw() {
|
||||
this.children.each(function(layer) {
|
||||
layer.batchDraw();
|
||||
});
|
||||
return this;
|
||||
}
|
||||
|
||||
container: GetSet<HTMLDivElement, this>;
|
||||
batchDraw: () => void;
|
||||
}
|
||||
|
||||
// TODO: test for replacing container
|
||||
|
||||
19
src/Util.ts
19
src/Util.ts
@ -319,8 +319,7 @@ export class Transform {
|
||||
}
|
||||
|
||||
// CONSTANTS
|
||||
var CONTEXT_2D = '2d',
|
||||
OBJECT_ARRAY = '[object Array]',
|
||||
var OBJECT_ARRAY = '[object Array]',
|
||||
OBJECT_NUMBER = '[object Number]',
|
||||
OBJECT_STRING = '[object String]',
|
||||
OBJECT_BOOLEAN = '[object Boolean]',
|
||||
@ -543,6 +542,21 @@ export const Util = {
|
||||
return -1;
|
||||
}
|
||||
},
|
||||
_waiting: false,
|
||||
animQueue: [],
|
||||
requestAnimFrame(callback) {
|
||||
Util.animQueue.push(callback);
|
||||
if (Util._waiting) {
|
||||
return;
|
||||
}
|
||||
requestAnimationFrame(() => {
|
||||
Util.animQueue.forEach(cb => {
|
||||
cb();
|
||||
});
|
||||
Util.animQueue = [];
|
||||
Util._waiting = false;
|
||||
});
|
||||
},
|
||||
createCanvasElement() {
|
||||
var canvas = isBrowser
|
||||
? document.createElement('canvas')
|
||||
@ -587,7 +601,6 @@ export const Util = {
|
||||
/*
|
||||
* arg can be an image object or image data
|
||||
*/
|
||||
// TODO: use it only for data url
|
||||
_urlToImage(url, callback) {
|
||||
var imageObj;
|
||||
|
||||
|
||||
@ -118,7 +118,7 @@ suite('Node', function() {
|
||||
assert.equal(layer.getAbsoluteOpacity(), 0.5);
|
||||
});
|
||||
|
||||
test.only('warn on duplicate id', function() {
|
||||
test('warn on duplicate id', function() {
|
||||
var oldWarn = Konva.Util.warn;
|
||||
var called = false;
|
||||
Konva.Util.warn = function() {
|
||||
@ -580,7 +580,7 @@ suite('Node', function() {
|
||||
assert.equal(rect.getShadowColor(), 'black');
|
||||
assert.equal(clone.getShadowColor(), 'black');
|
||||
|
||||
assert.equal(clone.id() == undefined, true, 'do not clone id');
|
||||
assert.equal(clone.id() == '', true, 'do not clone id');
|
||||
|
||||
clone.setShadowColor('green');
|
||||
|
||||
@ -1263,7 +1263,7 @@ suite('Node', function() {
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
assert.equal(circle.getName(), undefined);
|
||||
assert.equal(circle.getName(), '');
|
||||
|
||||
circle.addName('foo');
|
||||
assert.equal(circle.getName(), 'foo');
|
||||
@ -2593,7 +2593,7 @@ suite('Node', function() {
|
||||
test('load stage using json', function() {
|
||||
var container = addContainer();
|
||||
var json =
|
||||
'{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{},"className":"Group","children":[{"attrs":{"x":289,"y":100,"radius":70,"fill":"green","stroke":"black","strokeWidth":4,"name":"myCircle","draggable":true},"className":"Shape"}]}]}]}';
|
||||
'{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{},"className":"Group","children":[{"attrs":{"x":289,"y":100,"radius":70,"fill":"green","stroke":"black","strokeWidth":4,"name":"myCircle","draggable":true},"className":"Circle"}]}]}]}';
|
||||
var stage = Konva.Node.create(json, container);
|
||||
|
||||
assert.equal(stage.toJSON(), json);
|
||||
@ -2610,6 +2610,14 @@ suite('Node', function() {
|
||||
assert.deepEqual(node.toObject(), clone.toObject());
|
||||
});
|
||||
|
||||
test('make sure we can create non existing node type', function() {
|
||||
var json =
|
||||
'{"attrs":{},"className":"Layer","children":[{"attrs":{},"className":"Group","children":[{"attrs":{"x":289,"y":100,"radius":70,"fill":"green","stroke":"black","strokeWidth":4,"name":"myCircle","draggable":true},"className":"WeirdShape"}]}]}';
|
||||
var layer = Konva.Node.create(json);
|
||||
|
||||
assert.deepEqual(layer.find('Shape').length, 1);
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('serialize stage with custom shape', function() {
|
||||
var stage = addStage();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user