Added template concept

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