Large mouse events refactoring and cleanup

js/input/UDrag.js

@@ -0,0 +1,38 @@
+import UMouseClickDrag from "./UMouseClickDrag"
+
+export default class UDrag extends UMouseClickDrag {
+    constructor(target, blueprint, options) {
+        super(target, blueprint, options)
+        this.stepSize = options?.stepSize
+        this.mousePosition = [0, 0]
+    }
+
+    snapToGrid(posX, posY) {
+        return [
+            this.stepSize * Math.round(posX / this.stepSize),
+            this.stepSize * Math.round(posY / this.stepSize)
+        ]
+    }
+
+    startDrag(e) {
+        if (!this.stepSize) {
+            this.stepSize = parseInt(getComputedStyle(this.target).getPropertyValue('--ueb-grid-snap'))
+        }
+        // Get the current mouse position
+        this.mousePosition = this.snapToGrid(e.clientX, e.clientY)
+    }
+
+    dragTo(e) {
+        let mousePosition = this.snapToGrid(e.clientX, e.clientY)
+        const d = [mousePosition[0] - this.mousePosition[0], mousePosition[1] - this.mousePosition[1]]
+
+        if (d[0] == 0 && d[1] == 0) {
+            return
+        }
+
+        this.target.addLocation(d)
+
+        // Reassign the position of mouse
+        this.mousePosition = mousePosition
+    }
+}

js/input/UDragScroll.js

@@ -0,0 +1,18 @@
+import UDrag from "./UDrag"
+
+export default class UDragScroll extends UDrag {
+
+    dragTo(e) {
+        const mousePosition = this.snapToGrid(e.clientX, e.clientY)
+
+        // How far the mouse has been moved
+        const dx = mousePosition[0] - this.mousePosition[0]
+        const dy = mousePosition[1] - this.mousePosition[1]
+
+        this.blueprint.scrollDelta([-dx, -dy])
+
+        // Reassign the position of mouse
+        this.mousePosition = mousePosition
+    }
+
+}

js/input/UMouseClickDrag.js

@@ -0,0 +1,94 @@
+/**
+ * This class manages the ui gesture of mouse click and drag. Tha actual operations are implemented by the subclasses.
+ */
+export default class UMouseClickDrag {
+    constructor(target, blueprint, options) {
+        this.target = target
+        /** @type {import("../UEBlueprint").default}" */
+        this.blueprint = blueprint
+        this.clickButton = options?.clickButton ?? 0
+        this.exitAnyButton = options?.exitAnyButton ?? true
+        this.looseTarget = options?.looseTarget ?? false
+        this.started = false
+        this.clickedPosition = [0, 0]
+        let movementSpace = this.blueprint?.getGridDOMElement() ?? document
+        let self = this
+
+        this.mouseDownHandler = function (e) {
+            switch (e.button) {
+                case self.clickButton:
+                    // Either doesn't matter or consider the click only when clicking on the parent, not descandants
+                    if (self.looseTarget || e.target == e.currentTarget) {
+                        self.started = false
+                        // Attach the listeners
+                        movementSpace.addEventListener('mousemove', self.mouseStartedMovingHandler)
+                        document.addEventListener('mouseup', self.mouseUpHandler)
+                        self.clickedPosition = [e.offsetX, e.offsetY]
+                        self.clicked(e)
+                    }
+                    break
+                default:
+                    if (!self.exitAnyButton) {
+                        self.mouseUpHandler(e)
+                    }
+                    break
+            }
+        }
+
+        this.mouseStartedMovingHandler = function (e) {
+            e.preventDefault()
+
+            // Delegate from now on to self.mouseMoveHandler
+            movementSpace.removeEventListener('mousemove', self.mouseStartedMovingHandler)
+            movementSpace.addEventListener('mousemove', self.mouseMoveHandler)
+
+            // Do actual actions
+            self.startDrag(e)
+            self.started = true
+        }
+
+        this.mouseMoveHandler = function (e) {
+            e.preventDefault()
+            self.dragTo(e)
+        }
+
+        this.mouseUpHandler = function (e) {
+            if (!self.exitAnyButton || e.button == self.clickButton) {
+                // Remove the handlers of `mousemove` and `mouseup`
+                movementSpace.removeEventListener('mousemove', self.mouseStartedMovingHandler)
+                movementSpace.removeEventListener('mousemove', self.mouseMoveHandler)
+                document.removeEventListener('mouseup', self.mouseUpHandler)
+                self.endDrag(e)
+            }
+        }
+
+        this.target.addEventListener('mousedown', this.mouseDownHandler)
+        if (this.clickButton == 2) {
+            this.target.addEventListener('contextmenu', this.preventDefault)
+        }
+    }
+
+    preventDefault(e) {
+        e.preventDefault()
+    }
+
+    unlistenDOMElement() {
+        this.target.removeEventListener('mousedown', this.mouseDownHandler)
+        if (this.clickButton == 2) {
+            this.target.removeEventListener('contextmenu', this.preventDefault)
+        }
+    }
+
+    /* Subclasses will override the following methods */
+    clicked(e) {
+    }
+
+    startDrag(e) {
+    }
+
+    dragTo(e) {
+    }
+
+    endDrag(e) {
+    }
+}

js/input/UMouseWheel.js

@@ -0,0 +1,47 @@
+export default class UMouseWheel {
+
+    /**
+     * 
+     * @param {HTMLElement} target 
+     * @param {import("../UEBlueprint").default} blueprint 
+     * @param {Object} options 
+     */
+    constructor(target, blueprint, options) {
+        this.target = target
+        this.blueprint = blueprint
+        this.looseTarget = options?.looseTarget ?? true
+        this.movementSpace = this.blueprint?.getGridDOMElement() ?? document
+        let self = this
+
+        this.mouseWheelHandler = function (e) {
+            e.preventDefault()
+            if (!self.looseTarget && e.target != e.currentTarget) {
+                return
+            }
+            let scaleCorrection = 1 / self.blueprint.getScale()
+            let offset = [e.offsetX, e.offsetY]
+            if (self.looseTarget) {
+                /*
+                 * Compensating for having used the mouse wheel over a descendant of the target (the element listened for the 'wheel' event).
+                 * We are interested to get the location relative to the listened target, not the exact target that caused the event.
+                 */
+                const targetOffset = e.target.getBoundingClientRect()
+                const currentTargetOffset = e.currentTarget.getBoundingClientRect()
+                offset = [
+                    offset[0] + targetOffset.x * scaleCorrection - currentTargetOffset.x * scaleCorrection,
+                    offset[1] + targetOffset.y * scaleCorrection - currentTargetOffset.y * scaleCorrection
+                ]
+            }
+            self.wheel(Math.sign(e.deltaY), offset)
+        }
+
+        this.movementSpace.addEventListener('wheel', this.mouseWheelHandler, false)
+        // Prevent movement space from being scrolled
+        this.movementSpace.parentElement?.addEventListener('wheel', e => e.preventDefault())
+    }
+
+    /* Subclasses will override the following method */
+    wheel(location, variation) {
+
+    }
+}

js/input/USelect.js

@@ -0,0 +1,38 @@
+import UMouseClickDrag from "./UMouseClickDrag"
+
+export default class USelect extends UMouseClickDrag {
+
+    constructor(target, blueprint, options) {
+        super(target, blueprint, options)
+
+        this.blueprint = blueprint // blueprint is needed
+        this.stepSize = options?.stepSize
+        this.mousePosition = [0, 0]
+    }
+
+    clicked(e) {
+    }
+
+    startDrag(e) {
+        this.blueprint.startSelecting(this.clickedPosition)
+    }
+
+    dragTo(e) {
+        let scaleCorrection = 1 / this.blueprint.getScale()
+        const targetOffset = e.target.getBoundingClientRect()
+        const currentTargetOffset = e.currentTarget.getBoundingClientRect()
+        let offset = [
+            e.offsetX + targetOffset.x * scaleCorrection - currentTargetOffset.x * scaleCorrection,
+            e.offsetY + targetOffset.y * scaleCorrection - currentTargetOffset.y * scaleCorrection
+        ]
+        this.blueprint.doSelecting(offset)
+    }
+
+    endDrag(e) {
+        if (this.started) {
+            this.blueprint.finishSelecting()
+        } else {
+            this.blueprint.unselectAll()
+        }
+    }
+}

js/input/UZoom.js

@@ -0,0 +1,9 @@
+import UMouseWheel from "./UMouseWheel";
+
+export default class UZoom extends UMouseWheel {
+    wheel(variation, location) {
+        let zoomLevel = this.blueprint.getZoom()
+        zoomLevel -= variation
+        this.blueprint.setZoom(zoomLevel, location)
+    }
+}