protected subscribeToDragEvents()

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);
    }