diff --git a/css/ueblueprint-style.css b/css/ueblueprint-style.css index 66f5078..aa2cf76 100644 --- a/css/ueblueprint-style.css +++ b/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%), diff --git a/js/UEBlueprintDraggableObject.js b/js/UEBlueprintDraggableObject.js deleted file mode 100644 index 0ce3b48..0000000 --- a/js/UEBlueprintDraggableObject.js +++ /dev/null @@ -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 - } - -} \ No newline at end of file diff --git a/js/UEBlueprintObject.js b/js/UEBlueprintObject.js index 21afa93..d5b6d62 100644 --- a/js/UEBlueprintObject.js +++ b/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) diff --git a/js/USelectableDraggableObject.js b/js/USelectableDraggableObject.js new file mode 100644 index 0000000..c8a9aa4 --- /dev/null +++ b/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) + } + } + +} \ No newline at end of file diff --git a/js/input/UDrag.js b/js/input/UDrag.js index 282d87c..4ddeab0 100644 --- a/js/input/UDrag.js +++ b/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 diff --git a/js/input/UMouseClickDrag.js b/js/input/UMouseClickDrag.js index d402745..21296b8 100644 --- a/js/input/UMouseClickDrag.js +++ b/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] diff --git a/js/input/UPointing.js b/js/input/UPointing.js index 6132d39..f1a09e3 100644 --- a/js/input/UPointing.js +++ b/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 } diff --git a/js/input/USelect.js b/js/input/USelect.js index 15f59ba..ef5bb4f 100644 --- a/js/input/USelect.js +++ b/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] } diff --git a/ueblueprint.js b/ueblueprint.js index e1f593c..ec0aa71 100644 --- a/ueblueprint.js +++ b/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);