Small refactoring

js/Blueprint.js

@@ -55,6 +55,8 @@ export default class Blueprint extends IElement {
     /** @type {SelectorElement} */
     selectorElement = null
     /** @type {HTMLElement} */
+    linksContainerElement = null
+    /** @type {HTMLElement} */
     nodesContainerElement = null
     /** @type {Number} */
     zoom = 0
@@ -391,7 +393,7 @@ export default class Blueprint extends IElement {
                 this.nodesContainerElement?.appendChild(element)
             } else if (element instanceof LinkElement && !this.links.includes(element)) {
                 this.links.push(element)
-                this.nodesContainerElement?.appendChild(element)
+                this.linksContainerElement?.appendChild(element)
             }
         }
         graphElements.filter(element => element instanceof NodeElement).forEach(

js/template/BlueprintTemplate.js

@@ -80,14 +80,16 @@ export default class BlueprintTemplate extends ITemplate {
     viewport(element) {
         return html`
             <div class="ueb-viewport-body">
-                <div class="ueb-grid"
-                    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 class="ueb-grid" 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">
+                        <div data-links></div>
+                        <div data-nodes></div>
+                    </div>
                 </div>
             </div>
         `
@@ -127,10 +129,13 @@ export default class BlueprintTemplate extends ITemplate {
         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 SelectorElement()
-        blueprint.nodesContainerElement.append(blueprint.selectorElement, ...blueprint.getNodes())
+        blueprint.gridElement = blueprint.viewportElement.querySelector(".ueb-grid")
+        blueprint.querySelector(".ueb-grid-content").append(blueprint.selectorElement)
+        blueprint.linksContainerElement = blueprint.querySelector("[data-links]")
+        blueprint.linksContainerElement.append(...blueprint.getLinks())
+        blueprint.nodesContainerElement = blueprint.querySelector("[data-nodes]")
+        blueprint.nodesContainerElement.append(...blueprint.getNodes())
         this.applyEndDragScrolling(blueprint)
     }
 

js/template/PinTemplate.js

@@ -35,23 +35,21 @@ export default class PinTemplate extends ITemplate {
      * @param {PinElement} pin
      */
     render(pin) {
+        const icon = html`
+            <div class="ueb-pin-icon">
+                ${this.renderIcon(pin)}
+            </div>
+        `
+        const content = html`
+            <div class="ueb-pin-content">
+                <span class="ueb-pin-name">${sanitizeText(pin.getPinDisplayName())}</span>
+                ${this.renderInput(pin)}
+            </div>
+        `
         if (pin.isInput()) {
-            return html`
-                <div class="ueb-pin-icon">
-                    ${this.renderIcon(pin)}
-                </div>
-                <div class="ueb-pin-content">
-                    <span class="ueb-pin-name">${sanitizeText(pin.getPinDisplayName())}</span>
-                    ${this.renderInput(pin)}
-                </div>
-            `
+            return icon + content
         } else {
-            return html`
-                <div class="ueb-pin-name">${sanitizeText(pin.getPinDisplayName())}</div>
-                <div class="ueb-pin-icon">
-                    ${this.renderIcon(pin)}
-                </div>
-            `
+            return content + icon
         }
     }
 

js/template/StringPinTemplate.js

@@ -21,11 +21,14 @@ export default class StringPinTemplate extends PinTemplate {
      * @param {PinElement} pin
      */
     renderInput(pin) {
-        return html`
-            <div class="ueb-pin-input">
-                <div class="ueb-pin-input-content" role="textbox" contenteditable="true"></div>
-            </div>
-        `
+        if (pin.isInput()) {
+            return html`
+                <div class="ueb-pin-input">
+                    <div class="ueb-pin-input-content" role="textbox" contenteditable="true"></div>
+                </div>
+            `
+        }
+        return ""
     }
 
     /**