Move style related actions to templates

js/graph/GraphElement.js

@@ -8,12 +8,14 @@ export default class GraphElement extends HTMLElement {
         super()
         /** @type {import("../Blueprint").default}" */
         this.blueprint = null
+        /** @type {import("../entity/Entity").default}" */
         this.entity = entity
+        /** @type {import("../template/Template").default}" */
         this.template = template
     }
 
     connectedCallback() {
         this.blueprint = this.closest("u-blueprint")
-        this.append(...this.template.getElements(this.entity))
+        this.template.apply(this)
     }
 }

js/graph/GraphLink.js

@@ -1,4 +1,5 @@
 import GraphElement from "./GraphElement"
+import LinkTemplate from "../template/LinkTemplate"
 
 export default class GraphLink extends GraphElement {
 
@@ -12,18 +13,10 @@ export default class GraphLink extends GraphElement {
      * @param {?PinReference} destination 
      */
     constructor(source, destination) {
-        super()
+        super(this, new LinkTemplate())
         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

@@ -6,31 +6,27 @@ import DragLink from "../input/DragLink"
 
 export default class GraphNode extends SelectableDraggable {
 
-    static fromSerializedObject(str) {
-        let entity = SerializerFactory.getSerializer(ObjectEntity).read(str)
-        return new GraphNode(entity)
-    }
-
     /**
      * 
      * @param {ObjectEntity} entity 
      */
     constructor(entity) {
         super(entity, new NodeTemplate())
+        /** @type {ObjectEntity} */
+        this.entity
         this.graphNodeName = "n/a"
-        this.dragLinkObjects = Array()
+        this.dragLinkObjects = []
         super.setLocation([this.entity.NodePosX, this.entity.NodePosY])
     }
 
+    static fromSerializedObject(str) {
+        let entity = SerializerFactory.getSerializer(ObjectEntity).read(str)
+        return new GraphNode(entity)
+    }
+
     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])
         this.querySelectorAll(".ueb-node-input, .ueb-node-output").forEach(element => {
             this.dragLinkObjects.push(
                 new DragLink(element, this.blueprint, {

js/graph/GraphPin.js

@@ -0,0 +1,15 @@
+import GraphElement from "./GraphElement"
+import PinTemplate from "../template/PinTemplate"
+
+export default class GraphPin extends GraphElement {
+
+    constructor() {
+        super({}, new PinTemplate())
+    }
+
+    /*connectedCallback() {
+        super.connectedCallback()
+    }*/
+}
+
+customElements.define("u-pin", GraphPin)

js/graph/GraphSelector.js

@@ -1,21 +1,14 @@
 import FastSelectionModel from "../selection/FastSelectionModel"
 import GraphElement from "./GraphElement"
-import Template from "../template/Template"
+import SelectorTemplate from "../template/SelectorTemplate"
 
 export default class GraphSelector extends GraphElement {
 
     constructor() {
-        super({}, new Template())
-        /**
-         * @type {import("./GraphSelector").default}
-         */
+        super({}, new SelectorTemplate())
         this.selectionModel = null
-    }
-
-    connectedCallback() {
-        super.connectedCallback()
-        this.classList.add("ueb-selector")
-        this.dataset.selecting = "false"
+        /** @type {SelectorTemplate} */
+        this.template
     }
 
     /**
@@ -24,13 +17,7 @@ export default class GraphSelector extends GraphElement {
      */
     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.template.applyStartSelecting(this, initialPosition)
         this.selectionModel = new FastSelectionModel(initialPosition, this.blueprint.getNodes(), this.blueprint.nodeBoundariesSupplier, this.blueprint.nodeSelectToggleFunction)
     }
 
@@ -40,13 +27,12 @@ export default class GraphSelector extends GraphElement {
      */
     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.template.applyDoSelecting(this, finalPosition)
         this.selectionModel.selectTo(finalPosition)
     }
 
     finishSelecting() {
-        this.dataset.selecting = "false"
+        this.template.applyFinishSelecting(this)
         this.selectionModel = null
     }
 }

js/graph/SelectableDraggable.js

@@ -8,6 +8,8 @@ export default class SelectableDraggable extends GraphElement {
         this.dragObject = null
         this.location = [0, 0]
         this.selected = false
+        /** @type {import("../template/SelectableDraggableTemplate").default} */
+        this.template
 
         let self = this
         this.dragHandler = (e) => {
@@ -28,8 +30,7 @@ export default class SelectableDraggable extends GraphElement {
 
     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])
+        this.template.applyLocation(this)
     }
 
     addLocation(value) {
@@ -59,11 +60,10 @@ export default class SelectableDraggable extends GraphElement {
         }
         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)
         }
+        this.template.applySelected(this)
     }
 }