105 lines
3.5 KiB
JavaScript
105 lines
3.5 KiB
JavaScript
import { Konva } from './Global.js';
|
|
import { Util } from './Util.js';
|
|
export const DD = {
|
|
get isDragging() {
|
|
var flag = false;
|
|
DD._dragElements.forEach((elem) => {
|
|
if (elem.dragStatus === 'dragging') {
|
|
flag = true;
|
|
}
|
|
});
|
|
return flag;
|
|
},
|
|
justDragged: false,
|
|
get node() {
|
|
var node;
|
|
DD._dragElements.forEach((elem) => {
|
|
node = elem.node;
|
|
});
|
|
return node;
|
|
},
|
|
_dragElements: new Map(),
|
|
_drag(evt) {
|
|
const nodesToFireEvents = [];
|
|
DD._dragElements.forEach((elem, key) => {
|
|
const { node } = elem;
|
|
const stage = node.getStage();
|
|
stage.setPointersPositions(evt);
|
|
if (elem.pointerId === undefined) {
|
|
elem.pointerId = Util._getFirstPointerId(evt);
|
|
}
|
|
const pos = stage._changedPointerPositions.find((pos) => pos.id === elem.pointerId);
|
|
if (!pos) {
|
|
return;
|
|
}
|
|
if (elem.dragStatus !== 'dragging') {
|
|
var dragDistance = node.dragDistance();
|
|
var distance = Math.max(Math.abs(pos.x - elem.startPointerPos.x), Math.abs(pos.y - elem.startPointerPos.y));
|
|
if (distance < dragDistance) {
|
|
return;
|
|
}
|
|
node.startDrag({ evt });
|
|
if (!node.isDragging()) {
|
|
return;
|
|
}
|
|
}
|
|
node._setDragPosition(evt, elem);
|
|
nodesToFireEvents.push(node);
|
|
});
|
|
nodesToFireEvents.forEach((node) => {
|
|
node.fire('dragmove', {
|
|
type: 'dragmove',
|
|
target: node,
|
|
evt: evt,
|
|
}, true);
|
|
});
|
|
},
|
|
_endDragBefore(evt) {
|
|
DD._dragElements.forEach((elem) => {
|
|
const { node } = elem;
|
|
const stage = node.getStage();
|
|
if (evt) {
|
|
stage.setPointersPositions(evt);
|
|
}
|
|
const pos = stage._changedPointerPositions.find((pos) => pos.id === elem.pointerId);
|
|
if (!pos) {
|
|
return;
|
|
}
|
|
if (elem.dragStatus === 'dragging' || elem.dragStatus === 'stopped') {
|
|
DD.justDragged = true;
|
|
Konva._mouseListenClick = false;
|
|
Konva._touchListenClick = false;
|
|
Konva._pointerListenClick = false;
|
|
elem.dragStatus = 'stopped';
|
|
}
|
|
const drawNode = elem.node.getLayer() ||
|
|
(elem.node instanceof Konva['Stage'] && elem.node);
|
|
if (drawNode) {
|
|
drawNode.batchDraw();
|
|
}
|
|
});
|
|
},
|
|
_endDragAfter(evt) {
|
|
DD._dragElements.forEach((elem, key) => {
|
|
if (elem.dragStatus === 'stopped') {
|
|
elem.node.fire('dragend', {
|
|
type: 'dragend',
|
|
target: elem.node,
|
|
evt: evt,
|
|
}, true);
|
|
}
|
|
if (elem.dragStatus !== 'dragging') {
|
|
DD._dragElements.delete(key);
|
|
}
|
|
});
|
|
},
|
|
};
|
|
if (Konva.isBrowser) {
|
|
window.addEventListener('mouseup', DD._endDragBefore, true);
|
|
window.addEventListener('touchend', DD._endDragBefore, true);
|
|
window.addEventListener('mousemove', DD._drag);
|
|
window.addEventListener('touchmove', DD._drag);
|
|
window.addEventListener('mouseup', DD._endDragAfter, false);
|
|
window.addEventListener('touchend', DD._endDragAfter, false);
|
|
}
|