Group objects drag implemented

css/ueblueprint-style.css

@@ -204,6 +204,10 @@ u-blueprint {
     border-radius: calc(var(--ueb-node-radius) * 1.4);
 }
 
+.ueb-selected {
+    z-index: 1;
+}
+
 .ueb-selected>.ueb-node-border {
     background-image:
         linear-gradient(to right, #f1b000 0%, #f1b000 100%),

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]
     }

ueblueprint.js

@@ -15,7 +15,6 @@ class UPointing {
         this.target = target;
         /** @type {import("../UEBlueprint").default}" */
         this.blueprint = blueprint;
-        this.moveEverywhere = options?.moveEverywhere ?? false;
         this.movementSpace = this.blueprint?.getGridDOMElement() ?? document.documentElement;
     }
 
@@ -38,6 +37,7 @@ 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];
@@ -140,8 +140,6 @@ 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];
     }
@@ -920,23 +918,32 @@ class UDrag extends UMouseClickDrag {
             return
         }
 
-        this.target.addLocation(d);
+        this.target.dragDispatch(d);
 
         // Reassign the position of mouse
         this.mousePosition = mousePosition;
     }
 }
 
-class UEBlueprintDraggableObject extends HTMLElement {
+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.dragObject = new UDrag(this, null, {
+        this.blueprint = this.closest('u-blueprint');
+        this.dragObject = new UDrag(this, null, { // UDrag doesn't need blueprint
             looseTarget: true
         });
     }
@@ -955,13 +962,40 @@ class UEBlueprintDraggableObject extends HTMLElement {
         this.setLocation([this.location[0] + value[0], this.location[1] + value[1]]);
     }
 
-    getLocation() {
-        return this.location
+    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);
+        }
     }
 
 }
 
-class UEBlueprintObject extends UEBlueprintDraggableObject {
+class UEBlueprintObject extends USelectableDraggableObject {
     static classInputs = [/*
         {
             name: "Input Example",
@@ -1025,7 +1059,6 @@ class UEBlueprintObject extends UEBlueprintDraggableObject {
 
     constructor() {
         super();
-        this.selected = false;
         this.inputs = this.constructor.classInputs.map(value => {
             return {
                 connected: null
@@ -1051,22 +1084,6 @@ 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);