Refactoring and fixes

js/input/common/Copy.js

@@ -3,23 +3,22 @@ import ObjectSerializer from "../../serialization/ObjectSerializer"
 
 export default class Copy extends Context {
 
+    #copyHandler
+
     constructor(target, blueprint, options = {}) {
         options.wantsFocusCallback = true
         super(target, blueprint, options)
         this.serializer = new ObjectSerializer()
         let self = this
-        this.copyHandler = _ => {
-            self.copied()
-            return true
-        }
+        this.#copyHandler = _ => self.copied()
     }
 
     listenEvents() {
-        document.body.addEventListener("copy", this.copyHandler)
+        document.body.addEventListener("copy", this.#copyHandler)
     }
 
     unlistenEvents() {
-        document.body.removeEventListener("copy", this.copyHandler)
+        document.body.removeEventListener("copy", this.#copyHandler)
     }
 
     copied() {

js/input/common/Paste.js

@@ -4,20 +4,22 @@ import Context from "../Context"
 
 export default class Paste extends Context {
 
+    #pasteHandle
+
     constructor(target, blueprint, options = {}) {
         options.wantsFocusCallback = true
         super(target, blueprint, options)
         this.serializer = new ObjectSerializer()
         let self = this
-        this.pasteHandle = e => self.pasted(e.clipboardData.getData("Text"))
+        this.#pasteHandle = e => self.pasted(e.clipboardData.getData("Text"))
     }
 
     listenEvents() {
-        document.body.addEventListener("paste", this.pasteHandle)
+        document.body.addEventListener("paste", this.#pasteHandle)
     }
 
     unlistenEvents() {
-        document.body.removeEventListener("paste", this.pasteHandle)
+        document.body.removeEventListener("paste", this.#pasteHandle)
     }
 
     pasted(value) {

js/input/mouse/MouseClickDrag.js

@@ -6,105 +6,120 @@ import Pointing from "./Pointing"
  */
 export default class MouseClickDrag extends Pointing {
 
+    #mouseDownHandler = _ => { }
+    #mouseStartedMovingHandler
+    #mouseMoveHandler
+    #mouseUpHandler
+    #trackingMouse = false
+
     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.consumeClickEvent = options?.consumeClickEvent ?? true
         this.started = false
         this.clickedPosition = [0, 0]
 
         const movementListenedElement = this.moveEverywhere ? document.documentElement : this.movementSpace
         let self = this
 
-        this.mouseDownHandler = e => {
+        /**
+         * 
+         * @param {MouseEvent} e 
+         */
+        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()
+                        if (this.consumeClickEvent) {
+                            e.stopImmediatePropagation() // Captured, don't call anyone else
+                        }
                         self.started = false
                         // Attach the listeners
-                        movementListenedElement.addEventListener("mousemove", self.mouseStartedMovingHandler)
-                        document.addEventListener("mouseup", self.mouseUpHandler)
+                        movementListenedElement.addEventListener("mousemove", self.#mouseStartedMovingHandler)
+                        document.addEventListener("mouseup", self.#mouseUpHandler)
                         self.clickedPosition = self.locationFromEvent(e)
                         self.clicked(self.clickedPosition)
-                        return true
                     }
                     break
                 default:
                     if (!self.exitAnyButton) {
-                        self.mouseUpHandler(e)
+                        self.#mouseUpHandler(e)
                     }
                     break
             }
-            return false
         }
 
-        this.mouseStartedMovingHandler = e => {
+        /**
+         * 
+         * @param {MouseEvent} e 
+         */
+        this.#mouseStartedMovingHandler = e => {
             e.preventDefault()
-            e.stopPropagation()
-
-            // Delegate from now on to self.mouseMoveHandler
-            movementListenedElement.removeEventListener("mousemove", self.mouseStartedMovingHandler)
-            movementListenedElement.addEventListener("mousemove", self.mouseMoveHandler)
+            // 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
-            const dragEvent = new CustomEvent(Configuration.trackingMouseEventName.begin, {
-                bubbles: true,
-                cancelable: true
-            })
-            this.target.dispatchEvent(dragEvent)
-            return true
+            const dragEvent = self.getEvent(Configuration.trackingMouseEventName.begin)
+            // Handler calls e.preventDefault() when it receives the event, this means dispatchEvent returns false
+            self.#trackingMouse = this.target.dispatchEvent(dragEvent) == false
         }
 
-        this.mouseMoveHandler = e => {
+        this.#mouseMoveHandler = e => {
             e.preventDefault()
-            e.stopPropagation()
             const location = self.locationFromEvent(e)
             const movement = [e.movementX, e.movementY]
             self.dragTo(location, movement)
-            self.blueprint.entity.mousePosition = self.locationFromEvent(e)
-            return true
-        }
-
-        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()
-                const dragEvent = new CustomEvent(Configuration.trackingMouseEventName.end, {
-                    bubbles: true,
-                    cancelable: true
-                })
-                this.target.dispatchEvent(dragEvent)
-                return true
+            if (self.#trackingMouse) {
+                self.blueprint.entity.mousePosition = self.locationFromEvent(e)
             }
-            return false
         }
 
-        this.target.addEventListener("mousedown", this.mouseDownHandler)
+        this.#mouseUpHandler = e => {
+            if (!self.exitAnyButton || e.button == self.clickButton) {
+                e.preventDefault()
+                // Remove the handlers of "mousemove" and "mouseup"
+                movementListenedElement.removeEventListener("mousemove", self.#mouseStartedMovingHandler)
+                movementListenedElement.removeEventListener("mousemove", self.#mouseMoveHandler)
+                document.removeEventListener("mouseup", self.#mouseUpHandler)
+                self.endDrag()
+                if (self.#trackingMouse) {
+                    const dragEvent = self.getEvent(Configuration.trackingMouseEventName.end)
+                    this.target.dispatchEvent(dragEvent)
+                    self.#trackingMouse = false
+                }
+            }
+        }
+
+        this.target.addEventListener("mousedown", this.#mouseDownHandler)
         if (this.clickButton == 2) {
-            this.target.addEventListener("contextmenu", this.preventDefault)
+            this.target.addEventListener("contextmenu", e => e.preventDefault())
         }
     }
 
-    preventDefault(e) {
-        e.preventDefault()
+    getEvent(eventName) {
+        return new CustomEvent(eventName, {
+            detail: {
+                tracker: this
+            },
+            bubbles: true,
+            cancelable: true
+        })
     }
 
     unlistenDOMElement() {
         super.unlistenDOMElement()
-        this.target.removeEventListener("mousedown", this.mouseDownHandler)
+        this.target.removeEventListener("mousedown", this.#mouseDownHandler)
         if (this.clickButton == 2) {
-            this.target.removeEventListener("contextmenu", this.preventDefault)
+            this.target.removeEventListener("contextmenu", e => e.preventDefault())
         }
     }
 

js/input/mouse/MouseTracking.js

@@ -3,47 +3,67 @@ import Pointing from "./Pointing"
 
 export default class MouseTracking extends Pointing {
 
+    #mouseTracker = null
+    #mousemoveHandler
+    #trackingMouseStolenHandler
+    #trackingMouseGaveBackHandler
+
     constructor(target, blueprint, options = {}) {
         options.wantsFocusCallback = true
         super(target, blueprint, options)
 
-        this.trackingStolen = null
         let self = this
-        this.mousemoveHandler = e => {
+
+        /**
+         * 
+         * @param {MouseEvent} e 
+         */
+        this.#mousemoveHandler = e => {
             self.blueprint.entity.mousePosition = self.locationFromEvent(e)
-            return true
         }
-        this.trackingMouseStolenHandler = e => {
-            this.trackingStolen = e.target
-            self.unlistenMouseMove()
-            return true
-        }
-        this.trackingMouseGaveBackHandler = e => {
-            if (!this.trackingStolen == e.target) {
-                return false
+
+        /**
+         * 
+         * @param {CustomEvent} e 
+         */
+        this.#trackingMouseStolenHandler = e => {
+            if (!self.#mouseTracker) {
+                e.preventDefault()
+                this.#mouseTracker = e.detail.tracker
+                self.unlistenMouseMove()
+            }
+        }
+
+        /**
+         * 
+         * @param {CustomEvent} e 
+         */
+        this.#trackingMouseGaveBackHandler = e => {
+            if (self.#mouseTracker == e.detail.tracker) {
+                e.preventDefault()
+                self.#mouseTracker = null
+                self.listenMouseMove()
             }
-            self.listenMouseMove()
-            return true
         }
     }
 
     listenMouseMove() {
-        this.target.addEventListener("mousemove", this.mousemoveHandler)
+        this.target.addEventListener("mousemove", this.#mousemoveHandler)
     }
 
     unlistenMouseMove() {
-        this.target.removeEventListener("mousemove", this.mousemoveHandler)
+        this.target.removeEventListener("mousemove", this.#mousemoveHandler)
     }
 
     listenEvents() {
         this.listenMouseMove()
-        this.blueprint.addEventListener(Configuration.trackingMouseEventName.begin, this.trackingMouseStolenHandler)
-        this.blueprint.addEventListener(Configuration.trackingMouseEventName.end, this.trackingMouseGaveBackHandler)
+        this.blueprint.addEventListener(Configuration.trackingMouseEventName.begin, this.#trackingMouseStolenHandler)
+        this.blueprint.addEventListener(Configuration.trackingMouseEventName.end, this.#trackingMouseGaveBackHandler)
     }
 
     unlistenEvents() {
         this.unlistenMouseMove()
-        this.blueprint.removeEventListener(Configuration.trackingMouseEventName.begin, this.trackingMouseStolenHandler)
-        this.blueprint.removeEventListener(Configuration.trackingMouseEventName.end, this.trackingMouseGaveBackHandler)
+        this.blueprint.removeEventListener(Configuration.trackingMouseEventName.begin, this.#trackingMouseStolenHandler)
+        this.blueprint.removeEventListener(Configuration.trackingMouseEventName.end, this.#trackingMouseGaveBackHandler)
     }
 }

js/input/mouse/MouseWheel.js

@@ -2,6 +2,9 @@ import Pointing from "./Pointing"
 
 export default class MouseWheel extends Pointing {
 
+    #mouseWheelHandler
+    #mouseParentWheelHandler
+
     /**
      * 
      * @param {HTMLElement} target 
@@ -14,27 +17,26 @@ export default class MouseWheel extends Pointing {
         this.looseTarget = options?.looseTarget ?? true
         let self = this
 
-        this.mouseWheelHandler = e => {
+        this.#mouseWheelHandler = e => {
             e.preventDefault()
             const location = self.locationFromEvent(e)
             self.wheel(Math.sign(e.deltaY), location)
-            return true
         }
-        this.mouseParentWheelHandler = e => e.preventDefault()
+        this.#mouseParentWheelHandler = e => e.preventDefault()
 
         if (this.blueprint.focused) {
-            this.movementSpace.addEventListener("wheel", this.mouseWheelHandler, false)
+            this.movementSpace.addEventListener("wheel", this.#mouseWheelHandler, false)
         }
     }
 
     listenEvents() {
-        this.movementSpace.addEventListener("wheel", this.mouseWheelHandler, false)
-        this.movementSpace.parentElement?.addEventListener("wheel", this.mouseParentWheelHandler)
+        this.movementSpace.addEventListener("wheel", this.#mouseWheelHandler, false)
+        this.movementSpace.parentElement?.addEventListener("wheel", this.#mouseParentWheelHandler)
     }
 
     unlistenEvents() {
-        this.movementSpace.removeEventListener("wheel", this.mouseWheelHandler, false)
-        this.movementSpace.parentElement?.removeEventListener("wheel", this.mouseParentWheelHandler)
+        this.movementSpace.removeEventListener("wheel", this.#mouseWheelHandler, false)
+        this.movementSpace.parentElement?.removeEventListener("wheel", this.#mouseParentWheelHandler)
     }
 
     /* Subclasses will override the following method */

js/input/mouse/Unfocus.js

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