Input system further simplified

js/input/UMouseClickDrag.js

@@ -1,18 +1,14 @@
-import Utility from "../Utility"
+import UPointing from "./UPointing"
 
 /**
  * This class manages the ui gesture of mouse click and drag. Tha actual operations are implemented by the subclasses.
  */
-export default class UMouseClickDrag {
+export default class UMouseClickDrag extends UPointing {
     constructor(target, blueprint, options) {
-        this.target = target
-        /** @type {import("../UEBlueprint").default}" */
-        this.blueprint = blueprint
+        super(target, blueprint, options)
         this.clickButton = options?.clickButton ?? 0
         this.exitAnyButton = options?.exitAnyButton ?? true
         this.looseTarget = options?.looseTarget ?? false
-        this.moveEverywhere = options?.moveEverywhere ?? false
-        this.movementSpace = this.blueprint?.getGridDOMElement() ?? document.documentElement
         this.started = false
         this.clickedPosition = [0, 0]
         const movementListenedElement = this.moveEverywhere ? document.documentElement : this.movementSpace
@@ -28,7 +24,7 @@ export default class UMouseClickDrag {
                         // Attach the listeners
                         movementListenedElement.addEventListener('mousemove', self.mouseStartedMovingHandler)
                         document.addEventListener('mouseup', self.mouseUpHandler)
-                        self.clickedPosition = self.adjustScale(self.adjustLocation([e.clientX, e.clientY]))
+                        self.clickedPosition = self.getLocation(e)
                         self.clicked(self.clickedPosition)
                     }
                     break
@@ -56,9 +52,9 @@ export default class UMouseClickDrag {
         this.mouseMoveHandler = function (e) {
             e.preventDefault()
             e.stopPropagation()
-            const offset = self.adjustScale(self.adjustLocation([e.clientX, e.clientY]))
+            const location = self.getLocation(e)
             const movement = [e.movementX, e.movementY]
-            self.dragTo(offset, movement)
+            self.dragTo(location, movement)
         }
 
         this.mouseUpHandler = function (e) {
@@ -81,24 +77,6 @@ export default class UMouseClickDrag {
         e.preventDefault()
     }
 
-    adjustLocation(location) {
-        const targetOffset = this.movementSpace.getBoundingClientRect()
-        location = [
-            (location[0] - targetOffset.x),
-            (location[1] - targetOffset.y)
-        ]
-        return location
-    }
-
-    adjustScale(location) {
-        let scaleCorrection = 1 / Utility.getScale(this.target)
-        location = [
-            location[0] * scaleCorrection,
-            location[1] * scaleCorrection
-        ]
-        return location
-    }
-
     unlistenDOMElement() {
         this.target.removeEventListener('mousedown', this.mouseDownHandler)
         if (this.clickButton == 2) {

js/input/UMouseWheel.js

@@ -1,6 +1,6 @@
-import Utility from "../Utility"
+import UPointing from "./UPointing"
 
-export default class UMouseWheel {
+export default class UMouseWheel extends UPointing {
 
     /**
      * 
@@ -9,32 +9,14 @@ export default class UMouseWheel {
      * @param {Object} options 
      */
     constructor(target, blueprint, options) {
-        this.target = target
-        this.blueprint = blueprint
+        super(target, blueprint, options)
         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 / Utility.getScale(self.target)
-            let offset = [0, 0]
-            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 descendant target that caused the event.
-                 */
-                const targetOffset = e.target.getBoundingClientRect()
-                const currentTargetOffset = e.currentTarget.getBoundingClientRect()
-                offset = [
-                    e.offsetX + targetOffset.x * scaleCorrection - currentTargetOffset.x * scaleCorrection,
-                    e.offsetY + targetOffset.y * scaleCorrection - currentTargetOffset.y * scaleCorrection
-                ]
-            } // TODO else branch
-            self.wheel(Math.sign(e.deltaY), offset)
+            const location = self.getLocation(e)
+            self.wheel(Math.sign(e.deltaY), location)
         }
 
         this.movementSpace.addEventListener('wheel', this.mouseWheelHandler, false)
@@ -43,7 +25,7 @@ export default class UMouseWheel {
     }
 
     /* Subclasses will override the following method */
-    wheel(location, variation) {
+    wheel(variation, location) {
 
     }
 }

js/input/UPointing.js

@@ -0,0 +1,23 @@
+import Utility from "../Utility"
+
+export default class UPointing {
+
+    constructor(target, blueprint, options) {
+        /** @type {HTMLElement} */
+        this.target = target
+        /** @type {import("../UEBlueprint").default}" */
+        this.blueprint = blueprint
+        this.moveEverywhere = options?.moveEverywhere ?? false
+        this.movementSpace = this.blueprint?.getGridDOMElement() ?? document.documentElement
+    }
+
+    getLocation(mouseEvent) {
+        const scaleCorrection = 1 / Utility.getScale(this.target)
+        const targetOffset = this.movementSpace.getBoundingClientRect()
+        let location = [
+            (mouseEvent.clientX - targetOffset.x) * scaleCorrection,
+            (mouseEvent.clientY - targetOffset.y) * scaleCorrection
+        ]
+        return location
+    }
+}