Link morphing WIP

dist/css/ueblueprint-style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/ueblueprint-style.scss"],"names":[],"mappings":"AAAA,WACI,qBACA,iBACA,IACI,kGAIR,WACI,qBACA,mBACA,IACI,sGAIR,cACI,cACA,kBACA,8EACA,+BACA,iBAGJ,qBACI,aACA,kBACA,MACA,QACA,OACA,aACA,0BACA,UAGJ,mBACI,gBAGJ,mBACI,kBACA,aACA,gBACA,qBAGJ,oDACI,gBAGJ,UACI,kFACA,kBACA,eACA,gBACA,kEACA,mEACA,yBACA,iBAEI,s3BA0BJ,gBAEI,sZAQJ,sFACA,gEACA,oDACA,qBACA,gBAGJ,kDACI,gBAGJ,qBAGI,eACA,6CAGJ,iBAEI,mBAGJ,iBAEI,kBAGJ,iBAEI,mBAGJ,iBAEI,iBACA,uDAGJ,iBAEI,mBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,iBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,sBACA,uDAGJ,kBAEI,iBACA,uDAGJ,kBAEI,sBACA,uDAGJ,kBAEI,sBACA,uDAGJ,kBACI,kBACA,QACA,SACA,wGAGJ,SACI,cACA,kBACA,sGACA,qCACA,uDACA,sBAGJ,wEACI,YAGJ,iBACI,YACA,YACA,+CAGJ,cACI,UAGJ,+BACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,gCACA,qCACA,0BACA,gBAGJ,iBACI,kBACA,6DACA,gEACA,8EACA,aACA,gBACA,mBAGJ,eACI,iFACA,qBACA,mBAGJ,eACI,aACA,cACA,WACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,kBAGJ,QACI,cACA,gBAGJ,mDACI,eAGJ,sFACI,4CACA,iBAGJ,qBACI,qBACA,kBACA,YACA,aACA,wBACA,wBAGJ,6BACI,WACA,cACA,kBACA,MACA,QACA,SACA,OACA,6CACA,kBAGJ,6BACI,uCAGJ,4BACI,WACA,cACA,kBACA,qBACA,sBACA,QACA,SACA,kCACA,qCACA,mDAGJ,gEACI,8DACA,8DACA,8DACA,8DACA,oGACA,qGACA,kBACA,wCACA,yCACA,0CACA,4CAGJ,aACI,cACA,kBACA,kBACA,MACA,OACA,QACA,SACA,iBAEI,wlDAmDJ,gBAEI,gQAWJ,oBAEI,wJAOJ,4BAGJ,gDACI,mBAIJ,eACI,mBAGJ,SACI,0BACA,cACA,qBAGJ,aACI,WACA,YACA,oEACA,iBAGJ,kBAEI,oJAOA,uFACA,qBACA,eACA,4BAGJ,wBACI","file":"ueblueprint-style.css"}
+{"version":3,"sourceRoot":"","sources":["../../scss/ueblueprint-style.scss"],"names":[],"mappings":"AAAA,WACI,qBACA,iBACA,IACI,kGAIR,WACI,qBACA,mBACA,IACI,sGAIR,cACI,cACA,kBACA,8EACA,+BACA,iBAGJ,qBACI,aACA,kBACA,MACA,QACA,OACA,aACA,0BACA,UAGJ,mBACI,gBAGJ,mBACI,kBACA,aACA,gBACA,qBAGJ,oDACI,gBAGJ,UACI,kFACA,kBACA,eACA,gBACA,kEACA,mEACA,yBACA,iBAEI,s3BA0BJ,gBAEI,sZAQJ,sFACA,gEACA,oDACA,qBACA,gBAGJ,kDACI,gBAGJ,qBAGI,eACA,6CAGJ,iBAEI,mBAGJ,iBAEI,kBAGJ,iBAEI,mBAGJ,iBAEI,iBACA,uDAGJ,iBAEI,mBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,iBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,sBACA,uDAGJ,kBAEI,iBACA,uDAGJ,kBAEI,sBACA,uDAGJ,kBAEI,sBACA,uDAGJ,kBACI,kBACA,QACA,SACA,wGAGJ,SACI,cACA,kBACA,sGACA,qCACA,uDACA,sBAGJ,wEACI,YAGJ,iBACI,YACA,YACA,+CAGJ,cACI,UAGJ,+BACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,gCACA,qCACA,0BACA,gBAGJ,iBACI,kBACA,6DACA,gEACA,8EACA,aACA,gBACA,mBAGJ,eACI,iFACA,qBACA,mBAGJ,eACI,aACA,cACA,WACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,kBAGJ,QACI,cACA,gBAGJ,mDACI,eAGJ,sFACI,4CACA,iBAGJ,qBACI,qBACA,kBACA,YACA,aACA,wBACA,wBAGJ,6BACI,WACA,cACA,kBACA,MACA,QACA,SACA,OACA,6CACA,kBAGJ,6BACI,uCAGJ,4BACI,WACA,cACA,kBACA,qBACA,sBACA,QACA,SACA,kCACA,qCACA,mDAGJ,gEACI,8DACA,8DACA,8DACA,8DACA,oGACA,qGACA,kBACA,wCACA,yCACA,0CACA,4CAGJ,aACI,cACA,kBACA,kBACA,MACA,OACA,QACA,SACA,iBAEI,wlDAmDJ,gBAEI,gQAWJ,oBAEI,wJAOJ,4BAGJ,gDACI,mBAIJ,eACI,mBAGJ,SACI,+DACA,cACA,8CAIJ,aACI,0DACA,kBACA,MACA,OACA,WACA,YACA,iGAKA,iBAGJ,kBAEI,oJAOA,uFACA,qBACA,eACA,4BAGJ,wBACI","file":"ueblueprint-style.css"}

dist/ueblueprint.js

@@ -1,20 +1,22 @@
 class Configuration {
-    static fontSize = "13px"
-    static gridSize = "16"
-    static gridLineWidth = "2px"
-    static gridLineColor = "#353535"
-    static gridSet = "8"
-    static gridSetLineColor = "#161616"
-    static gridAxisLineColor = "black"
-    static gridSnap = "16px"
-    static nodeRadius = "8px"
     static deleteNodesKeyboardKey = "Delete"
     static expandGridSize = 400
-    static selectAllKeyboardKey = "Ctrl+A"
+    static fontSize = "13px"
+    static gridAxisLineColor = "black"
+    static gridLineColor = "#353535"
+    static gridLineWidth = 2 // in pixel
+    static gridSet = 8
+    static gridSetLineColor = "#161616"
+    static gridSize = 16 // in pixel
     static keysSeparator = "+"
-    static linkMinWidth = "20px"
-    static linkRightSVGPath = (c1, c2) => `M 0 0 C ${c1} 0, ${c2} 0, 50 50 S ${100 - c1} 100, 100 100`
     static linkLeftSVGPath = "M 100 0 c 20 0, 30 0, 50 50 S 70 100, 100 100"
+    static linkMinWidth = 128 // in pixel
+    static linkRightSVGPath = (start, c1, c2) => {
+        const endPoint = 100 - start;
+        return `M ${start} 0 C ${c1} 0, ${c2} 0, 50 50 S ${endPoint - c1 + start} 100, ${endPoint} 100`
+    }
+    static nodeRadius = 8 // in pixel
+    static selectAllKeyboardKey = "Ctrl+A"
     static ModifierKeys = [
         "Ctrl",
         "Shift",
@@ -644,14 +646,14 @@ class BlueprintTemplate extends Template {
         blueprint.classList.add("ueb", `ueb-zoom-${blueprint.zoom}`);
         Object.entries({
             "--ueb-font-size": sanitizeText(Configuration.fontSize),
-            "--ueb-grid-size": `calc(${sanitizeText(Configuration.gridSize)} * 1px)`,
+            "--ueb-grid-size": `${sanitizeText(Configuration.gridSize)}px`,
-            "--ueb-grid-line-width": sanitizeText(Configuration.gridLineWidth),
+            "--ueb-grid-line-width": `${sanitizeText(Configuration.gridLineWidth)}px`,
             "--ueb-grid-line-color": sanitizeText(Configuration.gridLineColor),
             "--ueb-grid-set": sanitizeText(Configuration.gridSet),
             "--ueb-grid-set-line-color": sanitizeText(Configuration.gridSetLineColor),
             "--ueb-grid-axis-line-color": sanitizeText(Configuration.gridAxisLineColor),
-            "--ueb-grid-snap": sanitizeText(Configuration.gridSnap),
+            "--ueb-node-radius": `${sanitizeText(Configuration.nodeRadius)}px`,
-            "--ueb-node-radius": sanitizeText(Configuration.nodeRadius)
+            "--ueb-link-min-width": sanitizeText(Configuration.linkMinWidth)
         }).forEach(entry => blueprint.style.setProperty(entry[0], entry[1]));
         blueprint.headerElement = blueprint.querySelector('.ueb-viewport-header');
         blueprint.overlayElement = blueprint.querySelector('.ueb-viewport-overlay');
@@ -1530,8 +1532,7 @@ class LinkTemplate extends Template {
      * @param {GraphLink} link Link element
      */
     applySourceLocation(link) {
-        link.style.setProperty("--ueb-from-input", link.originatesFromInput ? "1" : "0");
+        link.style.setProperty("--ueb-from-output", link.originatesFromOutput ? "0" : "1");
-        // Set initial position
         link.style.setProperty("--ueb-from-x", sanitizeText(link.sourceLocation[0]));
         link.style.setProperty("--ueb-from-y", sanitizeText(link.sourceLocation[1]));
     }
@@ -1541,11 +1542,25 @@ class LinkTemplate extends Template {
      * @param {GraphLink} link Link element
      */
     applyDestinationLocation(link) {
+        const dx = Math.abs(link.sourceLocation[0] - link.destinationLocation[0]);
+        const width = Math.max(dx, Configuration.linkMinWidth);
+        const height = Math.abs(link.sourceLocation[1] - link.destinationLocation[1]);
+        const ratio = Math.max(width, 1) / Math.max(height, 1);
+        let start = dx < width ? (width - dx) / width * 100 / 2 : 0;
         link.style.setProperty("--ueb-to-x", sanitizeText(link.destinationLocation[0]));
         link.style.setProperty("--ueb-to-y", sanitizeText(link.destinationLocation[1]));
-        const r = Math.max(Math.abs(link.sourceLocation[0] - link.destinationLocation[0]), 1)
+        link.style.setProperty("margin-left", `-${start}px`);
-            / Math.max(Math.abs(link.sourceLocation[1] - link.destinationLocation[1]), 1);
+        const xInverted = link.destinationLocation[0] < link.sourceLocation[0];
-        const d = Configuration.linkRightSVGPath(20, Math.max(40 / r, 30));
+        if (xInverted) {
+            if (dx < width) {
+                start = start + dx / width * 100;
+            } else {
+                start = 100;
+            }
+        }
+        const c1 = start + 20;
+        const c2 = Math.max(40 / ratio, 30) + start * 1.5;
+        const d = Configuration.linkRightSVGPath(start, c1, c2);
         // TODO move to CSS when Firefox will support property d
         link.pathElement.setAttribute("d", d);
     }
@@ -1573,7 +1588,7 @@ class GraphLink extends GraphElement {
         this.template;
         /** @type {SVGPathElement} */
         this.pathElement = null;
-        this.originatesFromInput = false;
+        this.originatesFromOutput = false;
         this.sourceLocation = [0, 0];
         this.destinationLocation = [0, 0];
         this.setSourcePin(source);
@@ -1608,7 +1623,7 @@ class GraphLink extends GraphElement {
         this.#source?.removeEventListener("ueb-node-delete", this.#nodeDeleteHandler);
         this.#source?.removeEventListener("ueb-node-drag", this.#nodeDragSourceHandler);
         this.#source = graphPin;
-        this.originatesFromInput = graphPin.isInput();
+        this.originatesFromOutput = graphPin.isInput();
         this.#source?.addEventListener("ueb-node-delete", this.#nodeDeleteHandler);
         this.#source?.addEventListener("ueb-node-drag", this.#nodeDragSourceHandler);
         this.setSourceLocation();

js/Configuration.js

@@ -1,20 +1,22 @@
 export default class Configuration {
-    static fontSize = "13px"
-    static gridSize = "16"
-    static gridLineWidth = "2px"
-    static gridLineColor = "#353535"
-    static gridSet = "8"
-    static gridSetLineColor = "#161616"
-    static gridAxisLineColor = "black"
-    static gridSnap = "16px"
-    static nodeRadius = "8px"
     static deleteNodesKeyboardKey = "Delete"
     static expandGridSize = 400
-    static selectAllKeyboardKey = "Ctrl+A"
+    static fontSize = "13px"
+    static gridAxisLineColor = "black"
+    static gridLineColor = "#353535"
+    static gridLineWidth = 2 // in pixel
+    static gridSet = 8
+    static gridSetLineColor = "#161616"
+    static gridSize = 16 // in pixel
     static keysSeparator = "+"
-    static linkMinWidth = "20px"
-    static linkRightSVGPath = (c1, c2) => `M 0 0 C ${c1} 0, ${c2} 0, 50 50 S ${100 - c1} 100, 100 100`
     static linkLeftSVGPath = "M 100 0 c 20 0, 30 0, 50 50 S 70 100, 100 100"
+    static linkMinWidth = 128 // in pixel
+    static linkRightSVGPath = (start, c1, c2) => {
+        const endPoint = 100 - start
+        return `M ${start} 0 C ${c1} 0, ${c2} 0, 50 50 S ${endPoint - c1 + start} 100, ${endPoint} 100`
+    }
+    static nodeRadius = 8 // in pixel
+    static selectAllKeyboardKey = "Ctrl+A"
     static ModifierKeys = [
         "Ctrl",
         "Shift",

js/graph/GraphLink.js

@@ -24,7 +24,7 @@ export default class GraphLink extends GraphElement {
         this.template
         /** @type {SVGPathElement} */
         this.pathElement = null
-        this.originatesFromInput = false
+        this.originatesFromOutput = false
         this.sourceLocation = [0, 0]
         this.destinationLocation = [0, 0]
         this.setSourcePin(source)
@@ -59,7 +59,7 @@ export default class GraphLink extends GraphElement {
         this.#source?.removeEventListener("ueb-node-delete", this.#nodeDeleteHandler)
         this.#source?.removeEventListener("ueb-node-drag", this.#nodeDragSourceHandler)
         this.#source = graphPin
-        this.originatesFromInput = graphPin.isInput()
+        this.originatesFromOutput = graphPin.isInput()
         this.#source?.addEventListener("ueb-node-delete", this.#nodeDeleteHandler)
         this.#source?.addEventListener("ueb-node-drag", this.#nodeDragSourceHandler)
         this.setSourceLocation()

js/template/BlueprintTemplate.js

@@ -63,14 +63,14 @@ export default class BlueprintTemplate extends Template {
         blueprint.classList.add("ueb", `ueb-zoom-${blueprint.zoom}`)
         Object.entries({
             "--ueb-font-size": sanitizeText(Configuration.fontSize),
-            "--ueb-grid-size": `calc(${sanitizeText(Configuration.gridSize)} * 1px)`,
+            "--ueb-grid-size": `${sanitizeText(Configuration.gridSize)}px`,
-            "--ueb-grid-line-width": sanitizeText(Configuration.gridLineWidth),
+            "--ueb-grid-line-width": `${sanitizeText(Configuration.gridLineWidth)}px`,
             "--ueb-grid-line-color": sanitizeText(Configuration.gridLineColor),
             "--ueb-grid-set": sanitizeText(Configuration.gridSet),
             "--ueb-grid-set-line-color": sanitizeText(Configuration.gridSetLineColor),
             "--ueb-grid-axis-line-color": sanitizeText(Configuration.gridAxisLineColor),
-            "--ueb-grid-snap": sanitizeText(Configuration.gridSnap),
+            "--ueb-node-radius": `${sanitizeText(Configuration.nodeRadius)}px`,
-            "--ueb-node-radius": sanitizeText(Configuration.nodeRadius)
+            "--ueb-link-min-width": sanitizeText(Configuration.linkMinWidth)
         }).forEach(entry => blueprint.style.setProperty(entry[0], entry[1]))
         blueprint.headerElement = blueprint.querySelector('.ueb-viewport-header')
         blueprint.overlayElement = blueprint.querySelector('.ueb-viewport-overlay')

js/template/LinkTemplate.js

@@ -36,8 +36,7 @@ export default class LinkTemplate extends Template {
      * @param {GraphLink} link Link element
      */
     applySourceLocation(link) {
-        link.style.setProperty("--ueb-from-input", link.originatesFromInput ? "1" : "0")
+        link.style.setProperty("--ueb-from-output", link.originatesFromOutput ? "0" : "1")
-        // Set initial position
         link.style.setProperty("--ueb-from-x", sanitizeText(link.sourceLocation[0]))
         link.style.setProperty("--ueb-from-y", sanitizeText(link.sourceLocation[1]))
     }
@@ -47,11 +46,25 @@ export default class LinkTemplate extends Template {
      * @param {GraphLink} link Link element
      */
     applyDestinationLocation(link) {
+        const dx = Math.abs(link.sourceLocation[0] - link.destinationLocation[0])
+        const width = Math.max(dx, Configuration.linkMinWidth)
+        const height = Math.abs(link.sourceLocation[1] - link.destinationLocation[1])
+        const ratio = Math.max(width, 1) / Math.max(height, 1)
+        let start = dx < width ? (width - dx) / width * 100 / 2 : 0
         link.style.setProperty("--ueb-to-x", sanitizeText(link.destinationLocation[0]))
         link.style.setProperty("--ueb-to-y", sanitizeText(link.destinationLocation[1]))
-        const r = Math.max(Math.abs(link.sourceLocation[0] - link.destinationLocation[0]), 1)
+        link.style.setProperty("margin-left", `-${start}px`)
-            / Math.max(Math.abs(link.sourceLocation[1] - link.destinationLocation[1]), 1)
+        const xInverted = link.destinationLocation[0] < link.sourceLocation[0]
-        const d = Configuration.linkRightSVGPath(20, Math.max(40 / r, 30))
+        if (xInverted) {
+            if (dx < width) {
+                start = start + dx / width * 100
+            } else {
+                start = 100
+            }
+        }
+        const c1 = start + 20
+        const c2 = Math.max(40 / ratio, 30) + start * 1.5
+        const d = Configuration.linkRightSVGPath(start, c1, c2)
         // TODO move to CSS when Firefox will support property d
         link.pathElement.setAttribute("d", d)
     }

scss/ueblueprint-style.scss

@@ -424,16 +424,25 @@ ueb-selector>* {
 }
 
 ueb-link {
-    --ueb-width-threshold: 50;
+    --ueb-computed-width-px   : calc(var(--ueb-computed-width) * 1px);
-    display              : block;
+    display                   : block;
-    border               : 1px solid red;
+    min-width                 : calc(var(--ueb-link-min-width) * 1px);
+    // border                 : 1px solid red;
 }
 
 ueb-link svg {
-    width    : 100%;
+    --ueb-output-invert: calc(2 * var(--ueb-from-output) - 1);
-    height   : 100%;
+    position           : absolute;
-    transform: scaleY(clamp(-1, calc(var(--ueb-to-y) - var(--ueb-from-y)), 1));
+    top                : 0;
-    overflow : visible;
+    left               : 0;
+    width              : 100%;
+    height             : 100%;
+    transform          : scaleY(clamp(
+                /* Mirror just when it starts from output */
+                -1,
+                calc((var(--ueb-to-y) - var(--ueb-from-y)) * var(--ueb-output-invert)),
+                1));
+    overflow: visible;
 }
 
 ueb-link svg path {