Mergin better performance branch

js/template/LinkTemplate.js

@@ -1,16 +1,17 @@
-// @ts-check
-
+import { css, html } from "lit"
 import Configuration from "../Configuration"
-import html from "./html"
-import ITemplate from "./ITemplate"
-import sanitizeText from "./sanitizeText"
+import Utility from "../Utility"
+import IFromToPositionedTemplate from "./IFromToPositionedTemplate"
 
 /**
  * @typedef {import("../element/LinkElement").default} LinkElement
- * @typedef {import("../element/LinkMessageElement").default} LinkMessageElement
  */
 
-export default class LinkTemplate extends ITemplate {
+
+/**
+ * @extends {IFromToPositionedTemplate<LinkElement>}
+ */
+export default class LinkTemplate extends IFromToPositionedTemplate {
 
     /**
      * Returns a function performing the inverse multiplication y = a / x + q. The value of a and q are calculated using
@@ -53,12 +54,59 @@ export default class LinkTemplate extends ITemplate {
                 : m * x + q
     }
 
-    static c1DecreasingValue = LinkTemplate.decreasingValue(-0.1, [100, 15])
+    static c1DecreasingValue = LinkTemplate.decreasingValue(-0.15, [100, 15])
 
     static c2DecreasingValue = LinkTemplate.decreasingValue(-0.06, [500, 130])
 
     static c2Clamped = LinkTemplate.clampedLine([0, 100], [200, 30])
 
+    /**
+     * @param {LinkElement} link
+     * @param {Map} changedProperties
+     */
+    willUpdate(link, changedProperties) {
+        super.willUpdate(link, changedProperties)
+        const dx = Math.max(Math.abs(link.initialPositionX - link.finaPositionX), 1)
+        const width = Math.max(dx, Configuration.linkMinWidth)
+        // const height = Math.max(Math.abs(link.initialPositionY - link.finaPositionY), 1)
+        const fillRatio = dx / width
+        // const aspectRatio = width / height
+        const xInverted = link.originatesFromInput
+            ? link.initialPositionX < link.finaPositionX
+            : link.finaPositionX < link.initialPositionX
+        link.startPixels = dx < width // If under minimum width
+            ? (width - dx) / 2 // Start from half the empty space
+            : 0 // Otherwise start from the beginning
+        link.startPercentage = xInverted ? link.startPixels + fillRatio * 100 : link.startPixels
+        const c1
+            = link.startPercentage
+            + (xInverted
+                ? LinkTemplate.c1DecreasingValue(width)
+                : 10
+            )
+            * fillRatio
+        let c2 = LinkTemplate.c2Clamped(xInverted ? -dx : dx) + link.startPercentage
+        c2 = Math.min(c2, LinkTemplate.c2DecreasingValue(width))
+        link.svgPathD = Configuration.linkRightSVGPath(link.startPercentage, c1, c2)
+    }
+
+    /**
+     * @param {LinkElement} link
+     * @param {Map} changedProperties
+     */
+    update(link, changedProperties) {
+        super.update(link, changedProperties)
+        if (changedProperties.has("originatesFromInput")) {
+            link.style.setProperty("--ueb-from-input", link.originatesFromInput ? "1" : "0")
+        }
+        const referencePin = link.sourcePin ?? link.destinationPin
+        if (referencePin) {
+            link.style.setProperty("--ueb-link-color-rgb", Utility.printLinearColor(referencePin.color))
+        }
+        link.style.setProperty("--ueb-link-start", `${Math.round(link.startPixels)}`)
+        link.style.setProperty("--ueb-start-percentage", `${Math.round(link.startPercentage)}%`)
+    }
+
     /**
      * @param {LinkElement} link
      */
@@ -67,116 +115,16 @@ export default class LinkTemplate extends ITemplate {
         return html`
             <svg version="1.2" baseProfile="tiny" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                 <g>
-                    <path id="${uniqueId}" fill="none" vector-effect="non-scaling-stroke" />
+                    <path id="${uniqueId}" fill="none" vector-effect="non-scaling-stroke" d="${link.svgPathD}" />
                     <use href="#${uniqueId}" pointer-events="stroke" stroke-width="10" />
                 </g>
             </svg>
+            ${link.linkMessageIcon != "" || link.linkMessageText != "" ? html`
+                <div class="ueb-link-message">
+                    <span class="${link.linkMessageIcon}"></span>
+                    <span class="ueb-link-message-text">${link.linkMessageText}</span>
+                </div>
+            ` : html``}
         `
     }
-
-    /**
-     * @param {LinkElement} link
-     */
-    setup(link) {
-        super.setup(link)
-        if (link.linkMessageElement) {
-            link.appendChild(link.linkMessageElement)
-        }
-        link.classList.add("ueb-positioned")
-        link.pathElement = link.querySelector("path")
-        const referencePin = link.sourcePin ?? link.destinationPin
-        if (referencePin) {
-            link.style.setProperty("--ueb-pin-color", referencePin.getColor())
-        }
-        this.applyPins(link)
-        if (link.sourcePin && link.destinationPin) {
-            this.applyFullLocation(link)
-        }
-    }
-
-    /**
-     * @param {LinkElement} link
-     */
-    applyPins(link) {
-        if (link.sourcePin) {
-            link.dataset.source = link.sourcePin.GetPinId().toString()
-        }
-        if (link.destinationPin) {
-            link.dataset.destination = link.destinationPin.GetPinId().toString()
-        }
-    }
-
-    /**
-     * @param {LinkElement} link
-     */
-    applyStartDragging(link) {
-        link.blueprint.dataset.creatingLink = "true"
-        link.classList.add("ueb-link-dragging")
-    }
-
-    /**
-     * @param {LinkElement} link
-     */
-    applyFinishDragging(link) {
-        link.blueprint.dataset.creatingLink = "false"
-        link.classList.remove("ueb-link-dragging")
-    }
-
-    /**
-     * @param {LinkElement} link
-     */
-    applySourceLocation(link) {
-        link.style.setProperty("--ueb-from-input", link.originatesFromInput ? "1" : "0")
-        link.style.setProperty("--ueb-from-x", sanitizeText(link.sourceLocation[0]))
-        link.style.setProperty("--ueb-from-y", sanitizeText(link.sourceLocation[1]))
-    }
-
-    /**
-     * @param {LinkElement} link
-     */
-    applyFullLocation(link) {
-        const dx = Math.max(Math.abs(link.sourceLocation[0] - link.destinationLocation[0]), 1)
-        const width = Math.max(dx, Configuration.linkMinWidth)
-        const height = Math.max(Math.abs(link.sourceLocation[1] - link.destinationLocation[1]), 1)
-        const fillRatio = dx / width
-        const aspectRatio = width / height
-        const xInverted = link.originatesFromInput
-            ? link.sourceLocation[0] < link.destinationLocation[0]
-            : link.destinationLocation[0] < link.sourceLocation[0]
-        let start = dx < width // If under minimum width
-            ? (width - dx) / 2 // Start from half the empty space
-            : 0 // Otherwise start from the beginning
-
-        link.style.setProperty("--ueb-from-x", sanitizeText(link.sourceLocation[0]))
-        link.style.setProperty("--ueb-from-y", sanitizeText(link.sourceLocation[1]))
-        link.style.setProperty("--ueb-to-x", sanitizeText(link.destinationLocation[0]))
-        link.style.setProperty("--ueb-to-y", sanitizeText(link.destinationLocation[1]))
-        link.style.setProperty("margin-left", `-${start}px`)
-        if (xInverted) {
-            start += fillRatio * 100
-        }
-        link.style.setProperty("--ueb-start-percentage", `${start}%`)
-        const c1
-            = start
-            + (xInverted
-                ? LinkTemplate.c1DecreasingValue(width)
-                : 10
-            )
-            * fillRatio
-        let c2 = LinkTemplate.c2Clamped(xInverted ? -dx : dx) + start
-        c2 = Math.min(c2, LinkTemplate.c2DecreasingValue(width))
-        const d = Configuration.linkRightSVGPath(start, c1, c2)
-        // TODO move to CSS when Firefox will support property d and css will have enough functions
-        link.pathElement?.setAttribute("d", d)
-    }
-
-    /**
-     * @param {LinkElement} link
-     * @param {LinkMessageElement} linkMessage
-     */
-    applyLinkMessage(link, linkMessage) {
-        link.querySelectorAll("ueb-link-message").forEach(element => element.remove())
-        link.appendChild(linkMessage)
-        link.linkMessageElement = linkMessage
-    }
 }