Added template concept

js/GraphEntity.js

@@ -2,21 +2,24 @@
  * 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 {
-    constructor() {
+    /**
+     * 
+     * @param {import("./template/Template").default} template The template to render this node
+     */
+    constructor(template) {
         super()
         /** @type {import("./UEBlueprint").EBlueprint}" */
         this.blueprint = null
+        this.template = template
     }
 
     connectedCallback() {
         this.blueprint = this.closest('u-blueprint')
-        let aDiv = document.createElement('div')
-        aDiv.innerHTML = this.render()
-        this.appendChild(aDiv.firstElementChild)
+        this.append(...this.template.getElements(this))
     }
 
     // Subclasses want to rewrite this
     render() {
-        return ""
+        return ''
     }
 }

js/SelectableDraggable.js

@@ -3,8 +3,8 @@ import GraphEntity from "./GraphEntity"
 
 export default class SelectableDraggable extends GraphEntity {
 
-    constructor() {
-        super()
+    constructor(template) {
+        super(template)
         this.dragObject = null
         this.location = [0, 0]
         this.selected = false

js/UEBlueprint.js

@@ -4,51 +4,20 @@ import Select from "./input/Select"
 import Zoom from "./input/Zoom"
 import FastSelectionModel from "./selection/FastSelectionModel"
 import SimpleSelectionModel from "./selection/SimpleSelectionModel"
+import GraphEntity from "./GraphEntity"
+import BlueprintTemplate from "./template/BlueprintTemplate"
 
 /**
  * @typedef {import("./UEBlueprintObject").default} UEBlueprintObject
  */
-export default class UEBlueprint extends HTMLElement {
-
-    headerTemplate() {
-        return `
-            <div class="ueb-viewport-header">
-                <div class="ueb-viewport-zoom">1:1</div>
-            </div>
-        `
-    }
-
-    overlayTemplate() {
-        return `
-            <div class="ueb-viewport-overlay"></div>
-        `
-    }
-
-    viewportTemplate() {
-        return `
-            <div class="ueb-viewport-body">
-                <div class="ueb-grid"
-                    style="--ueb-additional-x:${this.additional[0]}; --ueb-additional-y:${this.additional[1]}; --ueb-translate-x:${this.translateValue[0]}; --ueb-translate-y:${this.translateValue[1]}">
-                    <div class="ueb-grid-content" data-nodes>
-                        <div class="ueb-selector" data-selecting="false"></div>
-                    </div>
-                </div>
-            </div>
-        `
-    }
-
-    static getElement(template) {
-        let div = document.createElement('div')
-        div.innerHTML = template
-        return div.firstElementChild
-    }
+export default class UEBlueprint extends GraphEntity {
 
     insertChildren() {
         this.querySelector('[data-nodes]').append(...this.nodes)
     }
 
     constructor() {
-        super()
+        super(new BlueprintTemplate())
         /** @type {UEBlueprintObject[]}" */
         this.nodes = new Array()
         this.expandGridSize = 400
@@ -95,17 +64,21 @@ export default class UEBlueprint extends HTMLElement {
     }
 
     connectedCallback() {
+        super.connectedCallback()
         this.classList.add('ueb', `ueb-zoom-${this.zoom}`)
 
-        this.headerElement = this.constructor.getElement(this.headerTemplate())
-        this.appendChild(this.headerElement)
-        this.overlayElement = this.constructor.getElement(this.overlayTemplate())
-        this.appendChild(this.overlayElement)
-        this.viewportElement = this.constructor.getElement(this.viewportTemplate())
-        this.appendChild(this.viewportElement)
+        this.headerElement = this.querySelector('.ueb-node-header')
+        console.assert(this.headerElement, "Header element not provided by the template.")
+        this.overlayElement = this.querySelector('.ueb-viewport-overlay')
+        console.assert(this.overlayElement, "Overlay element not provided by the template.")
+        this.viewportElement = this.querySelector('.ueb-viewport-body')
+        console.assert(this.viewportElement, "Viewport element not provided by the template.")
         this.gridElement = this.viewportElement.querySelector('.ueb-grid')
+        console.assert(this.gridElement, "Grid element not provided by the template.")
         this.selectorElement = this.viewportElement.querySelector('.ueb-selector')
+        console.assert(this.selectorElement, "Selector element not provided by the template.")
         this.nodesContainerElement = this.querySelector('[data-nodes]')
+        console.assert(this.nodesContainerElement, "Nodes container element not provided by the template.")
         this.insertChildren()
 
         this.dragObject = new DragScroll(this.getGridDOMElement(), this, {

js/UEBlueprintObject.js

@@ -1,79 +1,13 @@
 import SelectableDraggable from "./SelectableDraggable"
+import NodeTemplate from "./template/NodeTemplate"
 
 export default class UEBlueprintObject extends SelectableDraggable {
-    static classInputs = [/*
-        {
-            name: "Input Example",
-            type: 'integer'
-        }
-    */]
-    static classOutputs = [/*
-        {
-            name: "Return Value",
-            type: 'string'
-        }*/
-    ]
-    static classInFlow = false
-    static classOutFlow = false
-    static className = 'Empty node'
-
-    header() {
-        return `
-            <div class="ueb-node-header">
-                <span class="ueb-node-name">
-                    <span class="ueb-node-symbol"></span>
-                    <span class="ueb-node-text">${this.constructor.className}</span>
-                </span>
-            </div>
-        `
-    }
-
-    body() {
-        return `
-            <div class="ueb-node-body">
-                <div class="ueb-node-inputs">
-                    ${this.constructor.classInputs.forEach((input, index) => `
-                    <div class="ueb-node-input ueb-node-value-${input.type}">
-                        <span class="ueb-node-value-icon ${this.inputs[index].connected ? 'ueb-node-value-fill' : ''}"></span>
-                        ${input.name}
-                    </div>
-                    `) ?? ''}
-                </div>
-                <div class="ueb-node-outputs">
-                    ${this.constructor.classOutputs.forEach((output, index) => `
-                    <div class="ueb-node-output ueb-node-value-${output.type}">
-                        ${output.name}
-                        <span class="ueb-node-value-icon ${this.outputs[index].connected ? 'ueb-node-value-fill' : ''}"></span>
-                    </div>
-                    `) ?? ''}
-                </div>
-            </div>
-        `
-    }
-
-    render() {
-        return `
-            <div class="ueb-node-border">
-                <div class="ueb-node-content">
-                    ${this.header()}
-                    ${this.body()}
-                </div>
-            </div>
-`
-    }
 
     constructor() {
-        super()
-        this.inputs = this.constructor.classInputs.map(value => {
-            return {
-                connected: null
-            }
-        })
-        this.outputs = this.constructor.classOutputs.map(value => {
-            return {
-                connected: null
-            }
-        })
+        super(new NodeTemplate())
+        this.graphNodeName = 'N/A'
+        this.inputs = []
+        this.outputs = []
     }
 
     connectedCallback() {

js/template/BlueprintTemplate.js

@@ -0,0 +1,48 @@
+import Template from "./Template";
+
+export default class BlueprintTemplate extends Template {
+    header(element) {
+        return `
+            <div class="ueb-viewport-header">
+                <div class="ueb-viewport-zoom">1:1</div>
+            </div>
+        `
+    }
+
+    overlay() {
+        return `
+            <div class="ueb-viewport-overlay"></div>
+        `
+    }
+
+    /**
+     * 
+     * @param {import("../UEBlueprint").default} element 
+     * @returns 
+     */
+    viewport(element) {
+        return `
+            <div class="ueb-viewport-body">
+                <div class="ueb-grid"
+                    style="--ueb-additional-x:${element.additional[0]}; --ueb-additional-y:${element.additional[1]}; --ueb-translate-x:${element.translateValue[0]}; --ueb-translate-y:${element.translateValue[1]}">
+                    <div class="ueb-grid-content" data-nodes>
+                        <div class="ueb-selector" data-selecting="false"></div>
+                    </div>
+                </div>
+            </div>
+        `
+    }
+
+    /**
+     * Computes the html content of the target element.
+     * @param {HTMLElement} element Target element 
+     * @returns The computed html 
+     */
+    render(element) {
+        return `
+            ${this.header(element)}
+            ${this.overlay(element)}
+            ${this.viewport(element)}
+        `
+    }
+}

js/template/NodeTemplate.js

@@ -0,0 +1,64 @@
+import Template from "./Template"
+
+export default class NodeTemplate extends Template {
+
+    /**
+     * Computes the html content of the target element.
+     * @param {HTMLElement} element Target element 
+     * @returns The computed html 
+     */
+    header(element) {
+        return `
+            <div class="ueb-node-header">
+                <span class="ueb-node-name">
+                    <span class="ueb-node-symbol"></span>
+                    <span class="ueb-node-text">${element.graphNodeName}</span>
+                </span>
+            </div>
+        `
+    }
+
+    /**
+     * Computes the html content of the target element.
+     * @param {HTMLElement} element Target element 
+     * @returns The computed html 
+     */
+    body(element) {
+        return `
+            <div class="ueb-node-body">
+                <div class="ueb-node-inputs">
+                    ${element.inputs.forEach((input, index) => `
+                    <div class="ueb-node-input ueb-node-value-${input.type}">
+                        <span class="ueb-node-value-icon ${element.inputs[index].connected ? 'ueb-node-value-fill' : ''}"></span>
+                        ${input.name}
+                    </div>
+                    `) ?? ''}
+                </div>
+                <div class="ueb-node-outputs">
+                    ${element.outputs.forEach((output, index) => `
+                    <div class="ueb-node-output ueb-node-value-${output.type}">
+                        ${output.name}
+                        <span class="ueb-node-value-icon ${element.outputs[index].connected ? 'ueb-node-value-fill' : ''}"></span>
+                    </div>
+                    `) ?? ''}
+                </div>
+            </div>
+        `
+    }
+
+    /**
+     * Computes the html content of the target element.
+     * @param {HTMLElement} element Target element 
+     * @returns The computed html 
+     */
+    render(element) {
+        return `
+            <div class="ueb-node-border">
+                <div class="ueb-node-content">
+                    ${this.header(element)}
+                    ${this.body(element)}
+                </div>
+            </div>
+        `
+    }
+}

js/template/Template.js

@@ -0,0 +1,22 @@
+export default class Template {
+
+    /**
+     * Computes the html content of the target element.
+     * @param {HTMLElement} element Target element 
+     * @returns The computed html 
+     */
+    render(element) {
+        return ``
+    }
+
+    /**
+     * Returns the html elements rendered by this template.
+     * @param {HTMLElement} element Target element
+     * @returns The rendered elements
+     */
+    getElements(element) {
+        let aDiv = document.createElement('div')
+        aDiv.innerHTML = this.render(element)
+        return aDiv.childNodes
+    }
+}