Resizeable comments

js/input/mouse/IMouseClickDrag.js

@@ -62,7 +62,7 @@ export default class IMouseClickDrag extends IPointing {
             this.#trackingMouse = this.target.dispatchEvent(dragEvent) == false
             const location = this.locationFromEvent(e)
             // Do actual actions
-            this.mouseLocation = Utility.snapToGrid(this.clickedPosition, this.stepSize)
+            this.lastLocation = Utility.snapToGrid(this.clickedPosition, this.stepSize)
             this.startDrag(location)
             this.started = true
         }
@@ -111,15 +111,14 @@ export default class IMouseClickDrag extends IPointing {
 
     clickedOffset = [0, 0]
     clickedPosition = [0, 0]
-    mouseLocation = [0, 0]
+    lastLocation = [0, 0]
     started = false
     stepSize = 1
 
     /**
-     * 
-     * @param {T} target 
-     * @param {Blueprint} blueprint 
-     * @param {Object} options 
+     * @param {T} target
+     * @param {Blueprint} blueprint
+     * @param {Object} options
      */
     constructor(target, blueprint, options = {}) {
         options.clickButton ??= 0
@@ -133,12 +132,13 @@ export default class IMouseClickDrag extends IPointing {
         super(target, blueprint, options)
         this.stepSize = parseInt(options?.stepSize ?? Configuration.gridSize)
         this.#movementListenedElement = this.options.moveEverywhere ? document.documentElement : this.movementSpace
-        this.#draggableElement = this.options.draggableElement
+        this.#draggableElement = /** @type {HTMLElement} */(this.options.draggableElement)
 
         this.listenEvents()
     }
 
     listenEvents() {
+        super.listenEvents()
         this.#draggableElement.addEventListener("mousedown", this.#mouseDownHandler)
         if (this.options.clickButton == 2) {
             this.#draggableElement.addEventListener("contextmenu", e => e.preventDefault())
@@ -146,6 +146,7 @@ export default class IMouseClickDrag extends IPointing {
     }
 
     unlistenEvents() {
+        super.unlistenEvents()
         this.#draggableElement.removeEventListener("mousedown", this.#mouseDownHandler)
     }
 

js/input/mouse/MouseClickDrag.js

@@ -0,0 +1,51 @@
+import MouseMoveDraggable from "./MouseMoveDraggable"
+
+/** @typedef {import("../../Blueprint").default} Blueprint */
+
+export default class MouseClickDrag extends MouseMoveDraggable {
+
+    #onClicked
+    #onStartDrag
+    #onDrag
+    #onEndDrag
+
+    /**
+     * @param {HTMLElement} target
+     * @param {Blueprint} blueprint
+     * @param {Object} options
+     */
+    constructor(target, blueprint, options = {}) {
+        super(target, blueprint, options)
+        if (options.onClicked) {
+            this.#onClicked = options.onClicked
+        }
+        if (options.onStartDrag) {
+            this.#onStartDrag = options.onStartDrag
+        }
+        if (options.onDrag) {
+            this.#onDrag = options.onDrag
+        }
+        if (options.onEndDrag) {
+            this.#onEndDrag = options.onEndDrag
+        }
+    }
+
+    clicked() {
+        super.clicked()
+        this.#onClicked?.()
+    }
+
+    startDrag() {
+        super.startDrag()
+        this.#onStartDrag?.()
+    }
+
+    dragAction(location, movement) {
+        this.#onDrag?.(location, movement)
+    }
+
+    endDrag() {
+        super.endDrag()
+        this.#onEndDrag?.()
+    }
+}

js/input/mouse/MouseMoveDraggable.js

@@ -23,29 +23,32 @@ export default class MouseMoveDraggable extends IMouseClickDrag {
     }
 
     dragTo(location, offset) {
-        const targetLocation = [this.target.locationX, this.target.locationY]
+        const targetLocation = [
+            this.target.locationX ?? this.lastLocation[0],
+            this.target.locationY ?? this.lastLocation[1],
+        ]
         const [adjustedLocation, adjustedTargetLocation] = this.stepSize > 1
             ? [Utility.snapToGrid(location, this.stepSize), Utility.snapToGrid(targetLocation, this.stepSize)]
             : [location, targetLocation]
         offset = [
-            adjustedLocation[0] - this.mouseLocation[0],
-            adjustedLocation[1] - this.mouseLocation[1]
+            adjustedLocation[0] - this.lastLocation[0],
+            adjustedLocation[1] - this.lastLocation[1],
         ]
         if (offset[0] == 0 && offset[1] == 0) {
             return
         }
         // Make sure it snaps on the grid
-        offset[0] += adjustedTargetLocation[0] - this.target.locationX
-        offset[1] += adjustedTargetLocation[1] - this.target.locationY
+        offset[0] += adjustedTargetLocation[0] - targetLocation[0]
+        offset[1] += adjustedTargetLocation[1] - targetLocation[1]
         this.dragAction(adjustedLocation, offset)
         // Reassign the position of mouse
-        this.mouseLocation = adjustedLocation
+        this.lastLocation = adjustedLocation
     }
 
     dragAction(location, offset) {
         this.target.setLocation([
             location[0] - this.clickedOffset[0],
-            location[1] - this.clickedOffset[1]
+            location[1] - this.clickedOffset[1],
         ])
     }
 }