Group objects drag implemented

js/UEBlueprintDraggableObject.js

@@ -1,35 +0,0 @@
-import UDrag from "./input/UDrag"
-
-export default class UEBlueprintDraggableObject extends HTMLElement {
-
-    constructor() {
-        super()
-        this.dragObject = null
-        this.location = [0, 0]
-    }
-
-    connectedCallback() {
-        this.dragObject = new UDrag(this, null, {
-            looseTarget: true
-        })
-    }
-
-    disconnectedCallback() {
-        this.dragObject.unlistenDOMElement()
-    }
-
-    setLocation(value = [0, 0]) {
-        this.location = value
-        this.style.setProperty('--ueb-position-x', this.location[0])
-        this.style.setProperty('--ueb-position-y', this.location[1])
-    }
-
-    addLocation(value) {
-        this.setLocation([this.location[0] + value[0], this.location[1] + value[1]])
-    }
-
-    getLocation() {
-        return this.location
-    }
-
-}

js/UEBlueprintObject.js

@@ -1,6 +1,6 @@
-import UEBlueprintDraggableObject from "./UEBlueprintDraggableObject"
+import USelectableDraggableObject from "./USelectableDraggableObject"
 
-export default class UEBlueprintObject extends UEBlueprintDraggableObject {
+export default class UEBlueprintObject extends USelectableDraggableObject {
     static classInputs = [/*
         {
             name: "Input Example",
@@ -64,7 +64,6 @@ export default class UEBlueprintObject extends UEBlueprintDraggableObject {
 
     constructor() {
         super()
-        this.selected = false
         this.inputs = this.constructor.classInputs.map(value => {
             return {
                 connected: null
@@ -90,22 +89,6 @@ export default class UEBlueprintObject extends UEBlueprintDraggableObject {
         aDiv.innerHTML = this.render()
         this.appendChild(aDiv.firstElementChild)
     }
-
-    isSelected() {
-        return this.selected
-    }
-
-    setSelected(value = true) {
-        if (this.selected == value) {
-            return
-        }
-        this.selected = value
-        if (value) {
-            this.classList.add('ueb-selected')
-        } else {
-            this.classList.remove('ueb-selected')
-        }
-    }
 }
 
 customElements.define('u-object', UEBlueprintObject)

js/USelectableDraggableObject.js

@@ -0,0 +1,71 @@
+import UDrag from "./input/UDrag"
+
+export default class USelectableDraggableObject extends HTMLElement {
+
+    constructor() {
+        super()
+        /** @type {import("./UEBlueprint").default}" */
+        this.blueprint = null
+        this.dragObject = null
+        this.location = [0, 0]
+        this.selected = false
+
+        let self = this
+        this.dragHandler = (e) => {
+            self.addLocation(e.detail.value)
+        }
+    }
+
+    connectedCallback() {
+        this.blueprint = this.closest('u-blueprint')
+        this.dragObject = new UDrag(this, null, { // UDrag doesn't need blueprint
+            looseTarget: true
+        })
+    }
+
+    disconnectedCallback() {
+        this.dragObject.unlistenDOMElement()
+    }
+
+    setLocation(value = [0, 0]) {
+        this.location = value
+        this.style.setProperty('--ueb-position-x', this.location[0])
+        this.style.setProperty('--ueb-position-y', this.location[1])
+    }
+
+    addLocation(value) {
+        this.setLocation([this.location[0] + value[0], this.location[1] + value[1]])
+    }
+
+    dragDispatch(value) {
+        if (!this.selected) {
+            this.blueprint.unselectAll()
+            this.setSelected(true)
+        }
+        let dragEvent = new CustomEvent('uDragSelected', {
+            detail: {
+                instigator: this,
+                value: value
+            },
+            bubbles: false,
+            cancelable: true,
+            composed: false,
+        })
+        this.blueprint.dispatchEvent(dragEvent)
+    }
+
+    setSelected(value = true) {
+        if (this.selected == value) {
+            return
+        }
+        this.selected = value
+        if (this.selected) {
+            this.classList.add('ueb-selected')
+            this.blueprint.addEventListener('uDragSelected', this.dragHandler)
+        } else {
+            this.classList.remove('ueb-selected')
+            this.blueprint.removeEventListener('uDragSelected', this.dragHandler)
+        }
+    }
+
+}

js/input/UDrag.js

@@ -33,7 +33,7 @@ export default class UDrag extends UMouseClickDrag {
             return
         }
 
-        this.target.addLocation(d)
+        this.target.dragDispatch(d)
 
         // Reassign the position of mouse
         this.mousePosition = mousePosition

js/input/UMouseClickDrag.js

@@ -8,6 +8,7 @@ export default class UMouseClickDrag extends UPointing {
         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]

js/input/UPointing.js

@@ -7,7 +7,6 @@ export default class UPointing {
         this.target = target
         /** @type {import("../UEBlueprint").default}" */
         this.blueprint = blueprint
-        this.moveEverywhere = options?.moveEverywhere ?? false
         this.movementSpace = this.blueprint?.getGridDOMElement() ?? document.documentElement
     }
 

js/input/USelect.js

@@ -4,8 +4,6 @@ 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]
     }