Organizing input actions in device folders

js/input/mouse/MouseClickDrag.js

@@ -0,0 +1,105 @@
+import Pointing from "./Pointing"
+
+/**
+ * This class manages the ui gesture of mouse click and drag. Tha actual operations are implemented by the subclasses.
+ */
+export default class MouseClickDrag extends Pointing {
+
+    constructor(target, blueprint, options) {
+        super(target, blueprint, options)
+        this.clickButton = options?.clickButton ?? 0
+        this.exitAnyButton = options?.exitAnyButton ?? true
+        this.moveEverywhere = options?.moveEverywhere ?? false
+        this.looseTarget = options?.looseTarget ?? false
+        this.started = false
+        this.clickedPosition = [0, 0]
+
+        const movementListenedElement = this.moveEverywhere ? document.documentElement : this.movementSpace
+        let self = this
+
+        this.mouseDownHandler = e => {
+            this.blueprint.setFocused(true)
+            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) {
+                        e.preventDefault()
+                        e.stopPropagation()
+                        self.started = false
+                        // Attach the listeners
+                        movementListenedElement.addEventListener("mousemove", self.mouseStartedMovingHandler)
+                        document.addEventListener("mouseup", self.mouseUpHandler)
+                        self.clickedPosition = self.getLocation(e)
+                        self.clicked(self.clickedPosition)
+                    }
+                    break
+                default:
+                    if (!self.exitAnyButton) {
+                        self.mouseUpHandler(e)
+                    }
+                    break
+            }
+        }
+
+        this.mouseStartedMovingHandler = e => {
+            e.preventDefault()
+            e.stopPropagation()
+
+            // Delegate from now on to self.mouseMoveHandler
+            movementListenedElement.removeEventListener("mousemove", self.mouseStartedMovingHandler)
+            movementListenedElement.addEventListener("mousemove", self.mouseMoveHandler)
+
+            // Do actual actions
+            self.startDrag()
+            self.started = true
+        }
+
+        this.mouseMoveHandler = e => {
+            e.preventDefault()
+            e.stopPropagation()
+            const location = self.getLocation(e)
+            const movement = [e.movementX, e.movementY]
+            self.dragTo(location, movement)
+        }
+
+        this.mouseUpHandler = e => {
+            if (!self.exitAnyButton || e.button == self.clickButton) {
+                // Remove the handlers of "mousemove" and "mouseup"
+                movementListenedElement.removeEventListener("mousemove", self.mouseStartedMovingHandler)
+                movementListenedElement.removeEventListener("mousemove", self.mouseMoveHandler)
+                document.removeEventListener("mouseup", self.mouseUpHandler)
+                self.endDrag()
+            }
+        }
+
+        this.target.addEventListener("mousedown", this.mouseDownHandler)
+        if (this.clickButton == 2) {
+            this.target.addEventListener("contextmenu", this.preventDefault)
+        }
+    }
+
+    preventDefault(e) {
+        e.preventDefault()
+    }
+
+    unlistenDOMElement() {
+        super.unlistenDOMElement()
+        this.target.removeEventListener("mousedown", this.mouseDownHandler)
+        if (this.clickButton == 2) {
+            this.target.removeEventListener("contextmenu", this.preventDefault)
+        }
+    }
+
+    /* Subclasses will override the following methods */
+    clicked(location) {
+    }
+
+    startDrag() {
+    }
+
+    dragTo(location, movement) {
+    }
+
+    endDrag() {
+    }
+}

js/input/mouse/MouseCreateLink.js

@@ -0,0 +1,29 @@
+import MouseClickDrag from "./MouseClickDrag"
+
+export default class MouseCreateLink extends MouseClickDrag {
+
+    constructor(target, blueprint, options) {
+        super(target, blueprint, options)
+        /** @type {import("../../graph/GraphPin").default} */
+        this.target
+        /** @type {import("../../graph/GraphLink").default} */
+        this.link
+    }
+
+    startDrag() {
+        let link = this.target.dragLink()
+
+    }
+
+    dragTo(location, movement) {
+        //this.selectorElement.doSelecting(location)
+    }
+
+    endDrag() {
+        if (this.started) {
+            //this.selectorElement.finishSelecting()
+        } else {
+            // this.blueprint.unselectAll()
+        }
+    }
+}

js/input/mouse/MouseMoveNodes.js

@@ -0,0 +1,39 @@
+import MouseClickDrag from "./MouseClickDrag"
+
+export default class MouseMoveNodes extends MouseClickDrag {
+
+    constructor(target, blueprint, options) {
+        super(target, blueprint, options)
+        this.stepSize = parseInt(options?.stepSize)
+        this.mousePosition = [0, 0]
+    }
+
+    snapToGrid(location) {
+        return [
+            this.stepSize * Math.round(location[0] / this.stepSize),
+            this.stepSize * Math.round(location[1] / this.stepSize)
+        ]
+    }
+
+    startDrag() {
+        if (isNaN(this.stepSize) || this.stepSize <= 0) {
+            this.stepSize = this.blueprint.gridSnap
+        }
+        // Get the current mouse position
+        this.mousePosition = this.stepSize != 1 ? this.snapToGrid(this.clickedPosition) : this.clickedPosition
+    }
+
+    dragTo(location, movement) {
+        const mousePosition = this.stepSize != 1 ? this.snapToGrid(location) : location
+        const d = [mousePosition[0] - this.mousePosition[0], mousePosition[1] - this.mousePosition[1]]
+
+        if (d[0] == 0 && d[1] == 0) {
+            return
+        }
+
+        this.target.dispatchDragEvent(d)
+
+        // Reassign the position of mouse
+        this.mousePosition = mousePosition
+    }
+}

js/input/mouse/MouseScrollGraph.js

@@ -0,0 +1,16 @@
+import MouseClickDrag from "./MouseClickDrag"
+
+export default class MouseScrollGraph extends MouseClickDrag {
+
+    startDrag() {
+        this.blueprint.template.applyStartDragScrolling(this.blueprint)
+    }
+
+    dragTo(location, movement) {
+        this.blueprint.scrollDelta([-movement[0], -movement[1]])
+    }
+
+    endDrag() {
+        this.blueprint.template.applyEndDragScrolling(this.blueprint)
+    }
+}

js/input/mouse/MouseTracking.js

@@ -0,0 +1,22 @@
+import Pointing from "./Pointing"
+
+export default class MouseTracking extends Pointing {
+
+    constructor(target, blueprint, options = {}) {
+        options.wantsFocusCallback = true
+        super(target, blueprint, options)
+
+        let self = this
+        this.mousemoveHandler = e => {
+            self.blueprint.entity.mousePosition = self.getLocation(e)
+        }
+    }
+
+    blueprintFocused() {
+        this.target.addEventListener("mousemove", this.mousemoveHandler)
+    }
+
+    blueprintUnfocused() {
+        this.target.removeEventListener("mousemove", this.mousemoveHandler)
+    }
+}

js/input/mouse/MouseWheel.js

@@ -0,0 +1,42 @@
+import Pointing from "./Pointing"
+
+export default class MouseWheel extends Pointing {
+
+    /**
+     * 
+     * @param {HTMLElement} target 
+     * @param {import("../../Blueprint").default} blueprint 
+     * @param {Object} options 
+     */
+    constructor(target, blueprint, options) {
+        options.wantsFocusCallback = true
+        super(target, blueprint, options)
+        this.looseTarget = options?.looseTarget ?? true
+        let self = this
+
+        this.mouseWheelHandler = e => {
+            e.preventDefault()
+            const location = self.getLocation(e)
+            self.wheel(Math.sign(e.deltaY), location)
+        }
+        this.mouseParentWheelHandler = e => e.preventDefault()
+
+        if (this.blueprint.focused) {
+            this.movementSpace.addEventListener("wheel", this.mouseWheelHandler, false)
+        }
+    }
+
+    blueprintFocused() {
+        this.movementSpace.addEventListener("wheel", this.mouseWheelHandler, false)
+        this.movementSpace.parentElement?.addEventListener("wheel", this.mouseParentWheelHandler)
+    }
+
+    blueprintUnfocused() {
+        this.movementSpace.removeEventListener("wheel", this.mouseWheelHandler, false)
+        this.movementSpace.parentElement?.removeEventListener("wheel", this.mouseParentWheelHandler)
+    }
+
+    /* Subclasses will override the following method */
+    wheel(variation, location) {
+    }
+}

js/input/mouse/Pointing.js

@@ -0,0 +1,25 @@
+import Context from "../Context"
+import Utility from "../../Utility"
+
+export default class Pointing extends Context {
+
+    constructor(target, blueprint, options) {
+        super(target, blueprint, options)
+        this.movementSpace = this.blueprint?.getGridDOMElement() ?? document.documentElement
+    }
+
+    /**
+     * 
+     * @param {MouseEvent} mouseEvent 
+     * @returns 
+     */
+    getLocation(mouseEvent) {
+        const scaleCorrection = 1 / Utility.getScale(this.target)
+        const targetOffset = this.movementSpace.getBoundingClientRect()
+        let location = [
+            Math.round((mouseEvent.clientX - targetOffset.x) * scaleCorrection),
+            Math.round((mouseEvent.clientY - targetOffset.y) * scaleCorrection)
+        ]
+        return location
+    }
+}

js/input/mouse/Select.js

@@ -0,0 +1,25 @@
+import MouseClickDrag from "./MouseClickDrag"
+
+export default class Select extends MouseClickDrag {
+
+    constructor(target, blueprint, options) {
+        super(target, blueprint, options)
+        this.selectorElement = this.blueprint.selectorElement
+    }
+
+    startDrag() {
+        this.selectorElement.startSelecting(this.clickedPosition)
+    }
+
+    dragTo(location, movement) {
+        this.selectorElement.doSelecting(location)
+    }
+
+    endDrag() {
+        if (this.started) {
+            this.selectorElement.finishSelecting()
+        } else {
+            this.blueprint.unselectAll()
+        }
+    }
+}

js/input/mouse/Unfocus.js

@@ -0,0 +1,35 @@
+import Context from "../Context"
+
+export default class Unfocus extends Context {
+
+    constructor(target, blueprint, options = {}) {
+        options.wantsFocusCallback = true
+        super(target, blueprint, options)
+
+        let self = this
+        this.clickHandler = e => self.clickedSomewhere(e)
+        if (this.blueprint.focuse) {
+            document.addEventListener("click", this.clickHandler)
+        }
+    }
+
+    /**
+     * 
+     * @param {MouseEvent} e 
+     */
+    clickedSomewhere(e) {
+        // If target is inside the blueprint grid
+        if (e.target.closest("ueb-blueprint")) {
+            return
+        }
+        this.blueprint.setFocused(false)
+    }
+
+    blueprintFocused() {
+        document.addEventListener("click", this.clickHandler)
+    }
+
+    blueprintUnfocused() {
+        document.removeEventListener("click", this.clickHandler)
+    }
+}

js/input/mouse/Zoom.js

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