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

dragmove will trigger on Transformer and when all nodes are moved. fix #928

Browse Source
This commit is contained in:
Anton Lavrenov 2020-06-18 16:41:54 -05:00
parent 8ecf16c015
commit f664606b8f
7 changed files with 59 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
CHANGELOG.md
View File

@ -5,13 +5,15 @@ This project adheres to [Semantic Versioning](http://semver.org/).
## Not released:
* `inherit` option is removed from `visible` and `listening`. They now just have boolean values `true` or `false`. If you do `group.listening(false);` then whole group and all its children will be removed from the hitgraph (and they will not listen to events);
* **BREAKING** `inherit` option is removed from `visible` and `listening`. They now just have boolean values `true` or `false`. If you do `group.listening(false);` then whole group and all its children will be removed from the hitGraph (and they will not listen to events). Probably 99% `Konva` applications will be not affected by this *breaking change*.
* `layer.hitGraphEnabled()` is deprecated. Just use `layer.listening(false)` instead
* Some performance fixes and code size optimizations
* Many performance fixes and code size optimizations
* Better support for font families with spaces inside (like `Font Awesome 5`).
* Fix possible `dblclick` and `dbltap` triggers
* Fix wrong `dblclick` and `dbltap` triggers
* Deprecate `Konva.FastLayer`. Use `new Konva.Layer({ listening: false });` instead.
* Up to 20% performance boost for many moving nodes.
* `dragmove` event will be fired on `Konva.Transformer` too when you drag a node.
* `dragmove` triggers only after ALL positions of dragging nodes are changed
## 6.0.0 - 2020-05-08

27
konva.js
View File

@ -8,7 +8,7 @@
* Konva JavaScript Framework v6.0.0
* http://konvajs.org/
* Licensed under the MIT
* Date: Tue Jun 16 2020
* Date: Thu Jun 18 2020
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@ -2459,6 +2459,7 @@
_dragElements: new Map(),
// methods
_drag: function (evt) {
var nodesToFireEvents = [];
DD._dragElements.forEach(function (elem, key) {
var node = elem.node;
// we need to find pointer relative to that node
@ -2487,11 +2488,14 @@
}
}
node._setDragPosition(evt, elem);
// execute ondragmove if defined
nodesToFireEvents.push(node);
});
// call dragmove only after ALL positions are changed
nodesToFireEvents.forEach(function (node) {
node.fire('dragmove', {
type: 'dragmove',
target: node,
evt: evt
evt: evt,
}, true);
});
},
@ -2529,14 +2533,14 @@
elem.node.fire('dragend', {
type: 'dragend',
target: elem.node,
evt: evt
evt: evt,
}, true);
}
if (elem.dragStatus !== 'dragging') {
DD._dragElements.delete(key);
}
});
}
},
};
if (Konva.isBrowser) {
window.addEventListener('mouseup', DD._endDragBefore, true);
@ -5047,8 +5051,8 @@
* in that case you can set the property to false
* @name Konva.Node#preventDefault
* @method
* @param {Number} preventDefault
* @returns {Number}
* @param {Boolean} preventDefault
* @returns {Boolean}
* @example
* // get preventDefault
* var shouldPrevent = shape.preventDefault();
@ -14847,7 +14851,11 @@
var lastPos;
node.on("dragstart." + EVENTS_NAME, function (e) {
lastPos = node.getAbsolutePosition();
// this.fire('dragstart', e);
// actual dragging of Transformer doesn't make sense
// but we need to proxy drag events
if (!_this.isDragging() && node !== _this.findOne('.back')) {
_this.startDrag();
}
});
node.on("dragmove." + EVENTS_NAME, function (e) {
if (!lastPos) {
@ -14870,9 +14878,6 @@
});
otherNode.startDrag();
});
// node.on(`dragend.${EVENTS_NAME}`, (e) => {
// this.fire('dragend', e);
// });
lastPos = null;
});
};

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

21
src/DragAndDrop.ts
View File

@ -6,7 +6,7 @@ import { Util } from './Util';
export const DD = {
get isDragging() {
var flag = false;
DD._dragElements.forEach(elem => {
DD._dragElements.forEach((elem) => {
if (elem.dragStatus === 'dragging') {
flag = true;
}
@ -17,7 +17,7 @@ export const DD = {
get node() {
// return first dragging node
var node: Node | undefined;
DD._dragElements.forEach(elem => {
DD._dragElements.forEach((elem) => {
node = elem.node;
});
return node;
@ -40,6 +40,7 @@ export const DD = {
// methods
_drag(evt) {
const nodesToFireEvents: Array<Node> = [];
DD._dragElements.forEach((elem, key) => {
const { node } = elem;
// we need to find pointer relative to that node
@ -52,7 +53,7 @@ export const DD = {
elem.pointerId = Util._getFirstPointerId(evt);
}
const pos = stage._changedPointerPositions.find(
pos => pos.id === elem.pointerId
(pos) => pos.id === elem.pointerId
);
// not related pointer
@ -75,14 +76,16 @@ export const DD = {
}
}
node._setDragPosition(evt, elem);
// execute ondragmove if defined
nodesToFireEvents.push(node);
});
// call dragmove only after ALL positions are changed
nodesToFireEvents.forEach((node) => {
node.fire(
'dragmove',
{
type: 'dragmove',
target: node,
evt: evt
evt: evt,
},
true
);
@ -101,7 +104,7 @@ export const DD = {
}
const pos = stage._changedPointerPositions.find(
pos => pos.id === elem.pointerId
(pos) => pos.id === elem.pointerId
);
// that pointer is not related
@ -132,7 +135,7 @@ export const DD = {
{
type: 'dragend',
target: elem.node,
evt: evt
evt: evt,
},
true
);
@ -141,7 +144,7 @@ export const DD = {
DD._dragElements.delete(key);
}
});
}
},
};
if (Konva.isBrowser) {

4
src/Node.ts
View File

@ -3002,8 +3002,8 @@ addGetterSetter(Node, 'listening', true, getBooleanValidator());
* in that case you can set the property to false
* @name Konva.Node#preventDefault
* @method
* @param {Number} preventDefault
* @returns {Number}
* @param {Boolean} preventDefault
* @returns {Boolean}
* @example
* // get preventDefault
* var shouldPrevent = shape.preventDefault();

9
src/shapes/Transformer.ts
View File

@ -316,7 +316,11 @@ export class Transformer extends Group {
let lastPos;
node.on(`dragstart.${EVENTS_NAME}`, (e) => {
lastPos = node.getAbsolutePosition();
// this.fire('dragstart', e);
// actual dragging of Transformer doesn't make sense
// but we need to proxy drag events
if (!this.isDragging() && node !== this.findOne('.back')) {
this.startDrag();
}
});
node.on(`dragmove.${EVENTS_NAME}`, (e) => {
if (!lastPos) {
@ -339,9 +343,6 @@ export class Transformer extends Group {
});
otherNode.startDrag();
});
// node.on(`dragend.${EVENTS_NAME}`, (e) => {
// this.fire('dragend', e);
// });
lastPos = null;
});
}

22
test/unit/shapes/Transformer-test.js
View File

@ -3853,17 +3853,22 @@ suite('Transformer', function () {
y: 80,
});
stage.simulateMouseMove({
x: 85,
y: 85,
});
stage.simulateMouseUp({
x: 80,
y: 80,
});
// proxy drag to other nodes
assert.equal(rect2.x(), 105);
assert.equal(rect2.y(), 105);
assert.equal(dragstart, 1);
assert.equal(dragmove, 1);
assert.equal(dragend, 1);
assert.equal(rect2.x(), 110);
assert.equal(rect2.y(), 110);
assert.equal(dragstart, 2);
assert.equal(dragmove, 3);
assert.equal(dragend, 2);
});
test('reattach from several and drag one', function () {
@ -4025,6 +4030,13 @@ suite('Transformer', function () {
x: 110,
y: 90,
});
// move mouse twice
// because first move will jus trigger start dragging
stage.simulateMouseMove({
x: 120,
y: 90,
});
stage.simulateMouseMove({
x: 120,
y: 90,