Links improved, refactoring

js/template/BlueprintTemplate.js

@@ -78,7 +78,7 @@ export default class BlueprintTemplate extends Template {
         blueprint.gridElement = blueprint.viewportElement.querySelector(".ueb-grid")
         blueprint.nodesContainerElement = blueprint.querySelector("[data-nodes]")
         blueprint.selectorElement = new GraphSelector()
-        blueprint.nodesContainerElement.append(blueprint.selectorElement, ...blueprint.nodes)
+        blueprint.nodesContainerElement.append(blueprint.selectorElement, ...blueprint.getNodes())
         this.applyEndDragScrolling(blueprint)
     }
 

js/template/LinkMessageTemplate.js

@@ -0,0 +1,35 @@
+import GraphLink from "../graph/GraphLink"
+import html from "./html"
+import Template from "./Template"
+
+/**
+ * @typedef {import("../graph/GraphLinkMessage").default} GraphLinkMessage
+ */
+export default class LinkMessageTemplate extends Template {
+
+    /**
+     * Computes the html content of the target element.
+     * @param {GraphLinkMessage} linkMessage attached to link destination
+     * @returns The result html 
+     */
+    render(linkMessage) {
+        return html`
+            <span class="${linkMessage.icon}"></span>
+            <span class="ueb-link-message"></span>
+        `
+    }
+
+    /**
+     * Applies the style to the element.
+     * @param {GraphLinkMessage} linkMessage element
+     */
+    apply(linkMessage) {
+        super.apply(linkMessage)
+        linkMessage.linkElement = linkMessage.closest(GraphLink.tagName)
+        linkMessage.querySelector(".ueb-link-message").innerText = linkMessage.message(
+            linkMessage.linkElement.getSourcePin(),
+            linkMessage.linkElement.getDestinationPin()
+        )
+    }
+
+}

js/template/LinkTemplate.js

@@ -2,10 +2,10 @@ import html from "./html"
 import sanitizeText from "./sanitizeText"
 import Template from "./Template"
 import Configuration from "../Configuration"
-import Utility from "../Utility"
 
 /**
  * @typedef {import("../graph/GraphLink").default} GraphLink
+ * @typedef {import("../graph/GraphLinkMessage").default} GraphLinkMessage
  */
 export default class LinkTemplate extends Template {
 
@@ -19,7 +19,7 @@ export default class LinkTemplate extends Template {
 
     /**
      * Computes the html content of the target element.
-     * @param {GraphLink} link Link connecting two graph nodes 
+     * @param {GraphLink} link connecting two graph nodes 
      * @returns The result html 
      */
     render(link) {
@@ -38,6 +38,9 @@ export default class LinkTemplate extends Template {
         super.apply(link)
         link.classList.add("ueb-positioned")
         link.pathElement = link.querySelector("path")
+        if (link.linkMessageElement) {
+            link.appendChild(link.linkMessageElement)
+        }
     }
 
     /**
@@ -74,11 +77,12 @@ export default class LinkTemplate extends Template {
             link.style.setProperty("margin-left", `-${start}px`)
         }
         if (xInverted) {
-            start = start + fillRatio * 100
+            start += fillRatio * 100
         }
+        link.style.setProperty("--ueb-start-percentage", `${100 - start}%`)
         const c1 = start + 15 * fillRatio
         let c2 = Math.max(40 / aspectRatio, 30) + start
-        const c2Decreasing = -0.05
+        const c2Decreasing = -0.06
         const getMaxC2 = (m, p) => {
             const a = -m * p[0] * p[0]
             const q = p[1] - a / p[0]
@@ -90,4 +94,15 @@ export default class LinkTemplate extends Template {
         // TODO move to CSS when Firefox will support property d
         link.pathElement.setAttribute("d", d)
     }
+
+    /**
+     * 
+     * @param {GraphLink} link element
+     * @param {GraphLinkMessage} linkMessage 
+     */
+    applyLinkMessage(link, linkMessage) {
+        link.querySelectorAll(linkMessage.constructor.tagName).forEach(element => element.remove())
+        link.appendChild(linkMessage)
+        link.linkMessageElement = linkMessage
+    }
 }

js/template/NodeTemplate.js

@@ -9,29 +9,6 @@ import SelectableDraggableTemplate from "./SelectableDraggableTemplate"
  */
 export default class NodeTemplate extends SelectableDraggableTemplate {
 
-    /**
-     * Computes the html content of the target element.
-     * @param {GraphNode} node Graph node element 
-     * @returns The result html 
-     */
-    header(node) {
-        return html`
-        `
-    }
-
-    /**
-     * Computes the html content of the target element.
-     * @param {GraphNode} node Graph node element 
-     * @returns The result html 
-     */
-    body(node) {
-        let inputs = node.entity.CustomProperties.filter(v => v instanceof PinEntity)
-        let outputs = inputs.filter(v => v.isOutput())
-        inputs = inputs.filter(v => v.isInput())
-        return html`
-        `
-    }
-
     /**
      * Computes the html content of the target element.
      * @param {GraphNode} node Graph node element