Serialization work in progress

js/graph/GraphEntity.js

@@ -0,0 +1,25 @@
+/**
+ * A Graph Entity is an element that can stay directly (as a first child) on the blueprint grid. Those entities are either nodes or links
+ */
+export default class GraphEntity extends HTMLElement {
+    /**
+     * 
+     * @param {import("../template/Template").default} template The template to render this node
+     */
+    constructor(template) {
+        super()
+        /** @type {import("../Blueprint").Blueprint}" */
+        this.blueprint = null
+        this.template = template
+    }
+
+    connectedCallback() {
+        this.blueprint = this.closest('u-blueprint')
+        this.append(...this.template.getElements(this))
+    }
+
+    // Subclasses want to rewrite this
+    render() {
+        return ''
+    }
+}

js/graph/GraphLink.js

@@ -0,0 +1,29 @@
+import UBlueprintEntity from "./UBlueprintEntity"
+
+export default class GraphLink extends UBlueprintEntity {
+
+    /**
+     * 
+     * @typedef {{
+     *      node: String,
+     *      pin: String
+     * }} PinReference
+     * @param {?PinReference} source 
+     * @param {?PinReference} destination 
+     */
+    constructor(source, destination) {
+        super()
+        this.source = source
+        this.destination = destination
+    }
+
+    render() {
+        return `
+            <svg viewBox="0 0 100 100">
+                <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
+            </svg>
+        `
+    }
+}
+
+customElements.define('u-link', GraphLink)

js/graph/GraphNode.js

@@ -0,0 +1,25 @@
+import SelectableDraggable from "./SelectableDraggable"
+import NodeTemplate from "../template/NodeTemplate"
+
+export default class GraphNode extends SelectableDraggable {
+
+    constructor() {
+        super(new NodeTemplate())
+        this.graphNodeName = 'n/a'
+        this.inputs = []
+        this.outputs = []
+    }
+
+    connectedCallback() {
+        const type = this.getAttribute('type')?.trim()
+        super.connectedCallback()
+        this.classList.add('ueb-node')
+        if (this.selected) {
+            this.classList.add('ueb-selected')
+        }
+        this.style.setProperty('--ueb-position-x', this.location[0])
+        this.style.setProperty('--ueb-position-y', this.location[1])
+    }
+}
+
+customElements.define('u-node', GraphNode)

js/graph/GraphSelector.js

@@ -0,0 +1,54 @@
+import FastSelectionModel from "../selection/FastSelectionModel";
+import GraphEntity from "./GraphEntity";
+import Template from "../template/Template";
+
+export default class GraphSelector extends GraphEntity {
+
+    constructor() {
+        super(new Template())
+        /**
+         * @type {import("./GraphSelector").default}
+         */
+        this.selectionModel = null
+    }
+
+    connectedCallback() {
+        super.connectedCallback()
+        this.classList.add('ueb-selector')
+        this.dataset.selecting = "false"
+    }
+
+    /**
+     * Create a selection rectangle starting from the specified position
+     * @param {number[]} initialPosition - Selection rectangle initial position (relative to the .ueb-grid element)
+     */
+    startSelecting(initialPosition) {
+        initialPosition = this.blueprint.compensateTranslation(initialPosition)
+        // Set initial position
+        this.style.setProperty('--ueb-select-from-x', initialPosition[0])
+        this.style.setProperty('--ueb-select-from-y', initialPosition[1])
+        // Final position coincide with the initial position, at the beginning of selection
+        this.style.setProperty('--ueb-select-to-x', initialPosition[0])
+        this.style.setProperty('--ueb-select-to-y', initialPosition[1])
+        this.dataset.selecting = "true"
+        this.selectionModel = new FastSelectionModel(initialPosition, this.blueprint.nodes, this.blueprint.nodeBoundariesSupplier, this.blueprint.nodeSelectToggleFunction)
+    }
+
+    /**
+     * Move selection rectagle to the specified final position. The initial position was specified by startSelecting()
+     * @param {number[]} finalPosition - Selection rectangle final position (relative to the .ueb-grid element)
+     */
+    doSelecting(finalPosition) {
+        finalPosition = this.blueprint.compensateTranslation(finalPosition)
+        this.style.setProperty('--ueb-select-to-x', finalPosition[0])
+        this.style.setProperty('--ueb-select-to-y', finalPosition[1])
+        this.selectionModel.selectTo(finalPosition)
+    }
+
+    finishSelecting() {
+        this.dataset.selecting = "false"
+        this.selectionModel = null
+    }
+}
+
+customElements.define('u-selector', GraphSelector)

js/graph/SelectableDraggable.js

@@ -0,0 +1,70 @@
+import Drag from "../input/Drag"
+import GraphEntity from "./GraphEntity"
+
+export default class SelectableDraggable extends GraphEntity {
+
+    constructor(template) {
+        super(template)
+        this.dragObject = null
+        this.location = [0, 0]
+        this.selected = false
+
+        let self = this
+        this.dragHandler = (e) => {
+            self.addLocation(e.detail.value)
+        }
+    }
+
+    connectedCallback() {
+        super.connectedCallback()
+        this.dragObject = new Drag(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)
+        }
+    }
+
+}