in src/canvastools/ts/CanvasTools/Region/Component/DragComponent.ts [54:143]
protected subscribeToDragEvents() {
const listeners: EventListeners = [
{
event: "pointerenter",
base: this.dragNode.node,
listener: (e: PointerEvent) => {
if (this.isDragged) {
e.stopPropagation();
}
},
bypass: false,
},
{
event: "pointermove",
base: this.dragNode.node,
listener: (e: PointerEvent) => {
if (this.isDragged) {
const rect = (e.target as HTMLElement).getBoundingClientRect();
const rdx = e.clientX - rect.left;
const rdy = e.clientY - rect.top;
let dx = e.clientX - this.dragOrigin.x;
let dy = e.clientY - this.dragOrigin.y;
if ((rdx < 0 && dx > 0) || (rdx > this.width && dx < 0)) {
dx = 0;
}
if ((rdy < 0 && dy > 0) || (rdy > this.height && dy < 0)) {
dy = 0;
}
let p = new Point2D(this.x + dx, this.y + dy);
if (this.paperRect !== null) {
p = p.boundToRect(this.paperRect);
}
this.dragOrigin = new Point2D(e.clientX, e.clientY);
const rd = this.regionData.copy();
rd.move(p);
this.callbacks.onChange(this, rd, ChangeEventType.MOVING);
}
},
bypass: false,
},
{
event: "pointerleave",
base: this.dragNode.node,
listener: (e: PointerEvent) => {
// do nothing
},
bypass: false,
},
{
event: "pointerdown",
base: this.dragNode.node,
listener: (e: PointerEvent) => {
this.dragNode.node.setPointerCapture(e.pointerId);
const multiselection = e.ctrlKey;
this.isDragged = true;
this.dragOrigin = new Point2D(e.clientX, e.clientY);
this.callbacks.onManipulationLockRequest(this);
this.callbacks.onChange(this, this.regionData.copy(), ChangeEventType.MOVEBEGIN, multiselection);
},
bypass: false,
},
{
event: "pointerup",
base: this.dragNode.node,
listener: (e: PointerEvent) => {
this.dragNode.node.releasePointerCapture(e.pointerId);
const multiselection = e.ctrlKey;
if (this.isDragged) {
this.callbacks.onChange(this, this.regionData.copy(), ChangeEventType.MOVEEND, multiselection);
this.isDragged = false;
this.dragOrigin = null;
}
this.callbacks.onManipulationLockRelease(this);
this.callbacks.onChange(this, this.regionData.copy(),
ChangeEventType.SELECTIONTOGGLE, multiselection);
},
bypass: false,
},
];
this.subscribeToEvents(listeners);
}