Move style related actions to templates

js/template/BlueprintTemplate.js

@@ -1,6 +1,10 @@
+import Blueprint from "../Blueprint"
 import html from "./html"
+import sanitizeText from "./sanitizeText"
 import Template from "./Template"
+import GraphSelector from "../graph/GraphSelector"
 
+/** @typedef {import("../Blueprint").default} Blueprint */
 export default class BlueprintTemplate extends Template {
     header(element) {
         return html`
@@ -18,14 +22,19 @@ export default class BlueprintTemplate extends Template {
 
     /**
      * 
-     * @param {import("../Blueprint").Blueprint} element 
+     * @param {Blueprint} element 
      * @returns 
      */
     viewport(element) {
         return html`
             <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]}">
+                    style="
+                        --ueb-additional-x:${sanitizeText(element.additional[0])};
+                        --ueb-additional-y:${sanitizeText(element.additional[1])};
+                        --ueb-translate-x:${sanitizeText(element.translateValue[0])};
+                        --ueb-translate-y:${sanitizeText(element.translateValue[1])};
+                    ">
                     <div class="ueb-grid-content" data-nodes></div>
                 </div>
             </div>
@@ -44,4 +53,47 @@ export default class BlueprintTemplate extends Template {
             ${this.viewport(element)}
         `
     }
+
+    /**
+     * Applies the style to the element.
+     * @param {Blueprint} brueprint The blueprint element
+     */
+    apply(blueprint) {
+        super.apply(blueprint)
+        blueprint.classList.add("ueb", `ueb-zoom-${blueprint.zoom}`)
+        blueprint.headerElement = blueprint.querySelector('.ueb-viewport-header')
+        blueprint.overlayElement = blueprint.querySelector('.ueb-viewport-overlay')
+        blueprint.viewportElement = blueprint.querySelector('.ueb-viewport-body')
+        blueprint.gridElement = blueprint.viewportElement.querySelector(".ueb-grid")
+        blueprint.nodesContainerElement = blueprint.querySelector("[data-nodes]")
+        blueprint.selectorElement = new GraphSelector()
+        blueprint.nodesContainerElement.append(blueprint.selectorElement, ...blueprint.nodes)
+    }
+
+    /**
+     * Applies the style to the element.
+     * @param {Blueprint} brueprint The blueprint element
+     */
+    applyZoom(blueprint, newZoom) {
+        blueprint.classList.remove(`ueb-zoom-${blueprint.zoom}`)
+        blueprint.classList.add(`ueb-zoom-${newZoom}`)
+    }
+
+    /**
+     * Applies the style to the element.
+     * @param {Blueprint} brueprint The blueprint element
+     */
+    applyExpand(blueprint) {
+        blueprint.gridElement.style.setProperty("--ueb-additional-x", blueprint.additional[0])
+        blueprint.gridElement.style.setProperty("--ueb-additional-y", blueprint.additional[1])
+    }
+
+    /**
+     * Applies the style to the element.
+     * @param {Blueprint} brueprint The blueprint element
+     */
+    applyTranlate(blueprint) {
+        blueprint.gridElement.style.setProperty("--ueb-translate-x", blueprint.translateValue[0])
+        blueprint.gridElement.style.setProperty("--ueb-translate-y", blueprint.translateValue[1])
+    }
 }

js/template/LinkTemplate.js

@@ -0,0 +1,21 @@
+import html from "./html"
+import Template from "./Template"
+
+/**
+ * @typedef {import("../graph/GraphLink").default} GraphLink
+ */
+export default class LinkTemplate extends Template {
+
+    /**
+     * Computes the html content of the target element.
+     * @param {GraphLink} link Link connecting two graph nodes 
+     * @returns The result html 
+     */
+    render(link) {
+        return html`
+            <svg viewBox="0 0 100 100">
+                <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
+            </svg>
+        `
+    }
+}

js/template/NodeTemplate.js

@@ -1,23 +1,23 @@
 import html from "./html"
 import PinEntity from "../entity/PinEntity"
-import Template from "./Template"
+import SelectableDraggableTemplate from "./SelectableDraggableTemplate"
 
 /**
- * @typedef {import("../entity/ObjectEntity").default} ObjectEntity
+ * @typedef {import("../graph/GraphNode").default} GraphNode
  */
-export default class NodeTemplate extends Template {
+export default class NodeTemplate extends SelectableDraggableTemplate {
 
     /**
      * Computes the html content of the target element.
-     * @param {ObjectEntity} entity Entity representing the element 
-     * @returns The computed html 
+     * @param {GraphNode} node Graph node element 
+     * @returns The result html 
      */
-    header(entity) {
+    header(node) {
         return html`
             <div class="ueb-node-header">
                 <span class="ueb-node-name">
                     <span class="ueb-node-symbol"></span>
-                    <span class="ueb-node-text">${entity.getNodeDisplayName()}</span>
+                    <span class="ueb-node-text">${node.entity.getNodeDisplayName()}</span>
                 </span>
             </div>
         `
@@ -25,14 +25,14 @@ export default class NodeTemplate extends Template {
 
     /**
      * Computes the html content of the target element.
-     * @param {ObjectEntity} entity Entity representing the element 
-     * @returns The computed html 
+     * @param {GraphNode} node Graph node element 
+     * @returns The result html 
      */
-    body(entity) {
+    body(node) {
         /** @type {PinEntity[]} */
-        let inputs = entity.CustomProperties.filter(v => v instanceof PinEntity)
+        let inputs = node.entity.CustomProperties.filter(v => v instanceof PinEntity)
         let outputs = inputs.filter(v => v.isOutput())
-        inputs = inputs.filter(v => !v.isOutput())
+        inputs = inputs.filter(v => v.isInput())
         return html`
             <div class="ueb-node-body">
                 <div class="ueb-node-inputs">
@@ -57,17 +57,31 @@ export default class NodeTemplate extends Template {
 
     /**
      * Computes the html content of the target element.
-     * @param {ObjectEntity} entity Entity representing the element 
-     * @returns The computed html 
+     * @param {GraphNode} node Graph node element 
+     * @returns The result html 
      */
-    render(entity) {
+    render(node) {
         return html`
             <div class="ueb-node-border">
                 <div class="ueb-node-content">
-                    ${this.header(entity)}
-                    ${this.body(entity)}
+                    ${this.header(node)}
+                    ${this.body(node)}
                 </div>
             </div>
         `
     }
+
+    /**
+     * Returns the html elements rendered from this template.
+     * @param {GraphNode} node Element of the graph
+     */
+    apply(node) {
+        super.apply(node)
+        node.classList.add("ueb-node")
+        if (node.selected) {
+            node.classList.add("ueb-selected")
+        }
+        node.style.setProperty("--ueb-position-x", node.location[0])
+        node.style.setProperty("--ueb-position-y", node.location[1])
+    }
 }

js/template/PinTemplate.js

@@ -0,0 +1,51 @@
+import html from "./html"
+import Template from "./Template"
+
+/**
+ * @typedef {import("../entity/PinEntity").default} PinEntity
+ */
+export default class PinTemplate extends Template {
+
+    /**
+     * Computes the template for a pin in case it is an input.
+     * @param {PinEntity} pin Pin entity 
+     * @returns The result html 
+     */
+    renderInputPin(pin) {
+        return html`
+            <div class="ueb-node-input ueb-node-value-${pin.getType()}">
+                <span class="ueb-node-value-icon ${pin.isConnected() ? 'ueb-node-value-fill' : ''}"></span>
+                ${pin.getPinDisplayName()}
+            </div>
+        `
+    }
+
+    /**
+     * Computes the template for a pin in case it is an output.
+     * @param {PinEntity} pin Pin entity 
+     * @returns The result html 
+     */
+    renderOutputPin(pin) {
+        return html`
+            <div class="ueb-node-output ueb-node-value-${pin.getType()}">
+                ${output.getPinDisplayName()}
+                <span class="ueb-node-value-icon ${pin.isConnected() ? 'ueb-node-value-fill' : ''}"></span>
+            </div>
+        `
+    }
+
+    /**
+     * Computes the html content of the pin.
+     * @param {PinEntity} pin Pin entity 
+     * @returns The result html 
+     */
+    render(pin) {
+        if (pin.isInput()) {
+            return this.renderInputPin(pin)
+        }
+        if (pin.isOutput()) {
+            return this.renderOutputPin(pin)
+        }
+        return ""
+    }
+}

js/template/SelectableDraggableTemplate.js

@@ -0,0 +1,29 @@
+import html from "./html"
+import Template from "./Template"
+
+/**
+ * @typedef {import("../graph/SelectableDraggable").default} SelectableDraggable
+ */
+export default class SelectableDraggableTemplate extends Template {
+
+    /**
+     * Returns the html elements rendered from this template.
+     * @param {SelectableDraggable} element Element of the graph
+     */
+    applyLocation(element) {
+        element.style.setProperty("--ueb-position-x", element.location[0])
+        element.style.setProperty("--ueb-position-y", element.location[1])
+    }
+
+    /**
+     * Returns the html elements rendered from this template.
+     * @param {SelectableDraggable} element Element of the graph
+     */
+    applySelected(element) {
+        if (element.selected) {
+            element.classList.add("ueb-selected")
+        } else {
+            element.classList.remove("ueb-selected")
+        }
+    }
+}

js/template/SelectorTemplate.js

@@ -0,0 +1,48 @@
+import Template from "./Template"
+
+/**
+ * @typedef {import("../graph/GraphSelector").default} GraphSelector
+ */
+export default class SelectorTemplate extends Template {
+
+    /**
+     * Applies the style to the element.
+     * @param {GraphSelector} selector Selector element
+     */
+    apply(selector) {
+        super.apply(selector)
+        selector.classList.add("ueb-selector")
+        selector.dataset.selecting = "false"
+    }
+
+    /**
+     * Applies the style relative to selection beginning.
+     * @param {GraphSelector} selector Selector element
+     */
+    applyStartSelecting(selector, initialPosition) {
+        // Set initial position
+        selector.style.setProperty("--ueb-select-from-x", initialPosition[0])
+        selector.style.setProperty("--ueb-select-from-y", initialPosition[1])
+        // Final position coincide with the initial position, at the beginning of selection
+        selector.style.setProperty("--ueb-select-to-x", initialPosition[0])
+        selector.style.setProperty("--ueb-select-to-y", initialPosition[1])
+        selector.dataset.selecting = "true"
+    }
+
+    /**
+     * Applies the style relative to selection.
+     * @param {GraphSelector} selector Selector element
+     */
+    applyDoSelecting(selector, finalPosition) {
+        selector.style.setProperty("--ueb-select-to-x", finalPosition[0])
+        selector.style.setProperty("--ueb-select-to-y", finalPosition[1])
+    }
+
+    /**
+     * Applies the style relative to selection finishing.
+     * @param {GraphSelector} selector Selector element
+     */
+    applyFinishSelecting(selector, finalPosition) {
+        selector.dataset.selecting = "false"
+    }
+}

js/template/Template.js

@@ -1,25 +1,23 @@
 /**
- * @typedef {import(""../entity/Entity"").default} Entity
+ * @typedef {import("../graph/GraphElement").default} GraphElement
  */
 export default class Template {
 
     /**
      * Computes the html content of the target element.
-     * @param {Entity} entity Entity representing the element
-     * @returns The computed html 
+     * @param {GraphElement} entity Element of the graph
+     * @returns The result html 
      */
     render(entity) {
         return ""
     }
 
     /**
-     * Returns the html elements rendered by this template.
-     * @param {Entity} entity Entity representing the element
-     * @returns The rendered elements
+     * Applies the style to the element.
+     * @param {GraphElement} element Element of the graph
      */
-    getElements(entity) {
-        let aDiv = document.createElement("div")
-        aDiv.innerHTML = this.render(entity)
-        return aDiv.childNodes
+    apply(element) {
+        // TODO replace with the safer element.setHTML(...) when it will be available
+        element.innerHTML = this.render(element)
     }
 }

js/template/sanitizeText.js

@@ -0,0 +1,10 @@
+const div = document.createElement("div")
+
+function sanitizeText(value) {
+    div.textContent = value
+    value = div.textContent
+    div.innerHTML = ""
+    return value
+}
+
+export default sanitizeText