Restyle of slots connecting hint line

dist/style.css

@@ -271,9 +271,20 @@ div.help {
 
 /* Node links */
 
-line.link-hint {
-    stroke: var(--foreground-accent);
+path.link-hint {
+    fill: none;
+
     stroke-width: 2px;
+
+    pointer-events: none;
+}
+
+path.link-hint.from-input {
+    stroke: #FF6363;
+}
+
+path.link-hint.from-output {
+    stroke: #9CEF9A;
 }
 
 path.link {

src/Curve.ts

@@ -6,4 +6,20 @@ export class Curve
     public startDeviationPoint: Point = { x: 0, y: 0 };
     public endDeviationPoint: Point = { x: 0, y: 0 };
     public endPoint: Point = { x: 0, y: 0 };
+
+    public static fromTwoPoints(startPoint: Point, endPoint: Point): Curve
+    {
+        return {
+            startPoint: startPoint,
+            endPoint: endPoint,
+            startDeviationPoint: {
+                x: (startPoint.x + endPoint.x) / 2,
+                y: startPoint.y
+            },
+            endDeviationPoint: {
+                x: (startPoint.x + endPoint.x) / 2,
+                y: endPoint.y
+            },
+        };
+    }
 }

src/MouseHandler.ts

@@ -6,6 +6,8 @@ import { Rectangle } from "./Rectangle";
 import { SankeyLink } from "./Sankey/SankeyLink";
 import { SankeySlotMissing } from "./Sankey/Slots/SankeySlotMissing";
 import { SankeySlotExceeding } from "./Sankey/Slots/SankeySlotExceeding";
+import { Curve } from "./Curve";
+import { SvgPathBuilder } from "./SVG/SvgPathBuilder";
 
 export class MouseHandler
 {
@@ -66,16 +68,25 @@ export class MouseHandler
             {
                 throw Error("First connecting slot wasn't saved.");
             }
-            if (this.slotConnectingLine == undefined)
+            if (this.slotConnectingLine == undefined || this.slotConnectingCurve == undefined)
             {
                 throw Error("Slot connecting line wasn't created.");
             }
 
             const domPoint = new DOMPointReadOnly(event.clientX, event.clientY);
             const svgMousePos = domPoint.matrixTransform(this.viewport.getScreenCTM()!.inverse());
 
-            this.slotConnectingLine.setAttribute("x2", `${svgMousePos.x - 2}`);
-            this.slotConnectingLine.setAttribute("y2", `${svgMousePos.y - 2}`);
+            this.slotConnectingCurve = Curve.fromTwoPoints(
+                this.slotConnectingCurve.startPoint,
+                svgMousePos
+            );
+
+            let path = new SvgPathBuilder()
+                .startAt(this.slotConnectingCurve.startPoint)
+                .curve(this.slotConnectingCurve)
+                .build();
+
+            this.slotConnectingLine.setAttribute("d", path);
         }
     }
 
@@ -97,6 +108,7 @@ export class MouseHandler
         this.firstConnectingSlot = undefined;
         this.slotConnectingLine?.remove();
         this.slotConnectingLine = undefined;
+        this.slotConnectingCurve = undefined;
         this.mouseStatus = MouseHandler.MouseStatus.Free;
     }
 
@@ -192,11 +204,19 @@ export class MouseHandler
         const domPoint = new DOMPointReadOnly(event.clientX, event.clientY);
         const svgMousePos = domPoint.matrixTransform(this.viewport.getScreenCTM()!.inverse());
 
-        this.slotConnectingLine =
-            SvgFactory.createSvgLine(startPos, {
-                x: svgMousePos.x - 2,
-                y: svgMousePos.y - 2
-            }, "link-hint");
+        this.slotConnectingCurve = Curve.fromTwoPoints(
+            startPos,
+            svgMousePos
+        );
+
+        let path = new SvgPathBuilder()
+            .startAt(this.slotConnectingCurve.startPoint)
+            .curve(this.slotConnectingCurve)
+            .build();
+
+        this.slotConnectingLine = SvgFactory.createSvgPath("link-hint");
+        this.slotConnectingLine.classList.add(isInput ? "from-input" : "from-output");
+        this.slotConnectingLine.setAttribute("d", path);
 
         this.viewport.appendChild(this.slotConnectingLine);
     }
@@ -223,7 +243,9 @@ export class MouseHandler
 
     private firstConnectingSlot: SankeySlotMissing | SankeySlotExceeding | undefined;
     private draggedNode: SankeyNode | undefined;
-    private slotConnectingLine: SVGLineElement | undefined;
+
+    private slotConnectingLine: SVGPathElement | undefined;
+    private slotConnectingCurve?: Curve;
 
     private mouseStatus: MouseHandler.MouseStatus = MouseHandler.MouseStatus.Free;
     private lastMousePos = new Point(0, 0);

src/SVG/SvgPathBuilder.ts

@@ -17,7 +17,9 @@ export class SvgPathBuilder
         return this;
     }
 
-    // Start point will be ignored because that's how SVG works.
+    /**
+     * Start point will be ignored because that's how SVG works.
+     */
     public curve(curve: Curve): this
     {
         this.path +=

src/Sankey/SankeyLink.ts

@@ -32,43 +32,15 @@ export class SankeyLink
         let first = Rectangle.fromSvgBounds(this._firstSlot.slotSvgRect, this._panContext);
         let second = Rectangle.fromSvgBounds(this._secondSlot.slotSvgRect, this._panContext);
 
-        let curve1 = new Curve();
-
-        curve1.startPoint = {
-            x: first.x + first.width,
-            y: first.y
-        };
-        curve1.endPoint = {
-            x: second.x,
-            y: second.y
-        };
-        curve1.startDeviationPoint = {
-            x: (curve1.startPoint.x + curve1.endPoint.x) / 2,
-            y: first.y
-        };
-        curve1.endDeviationPoint = {
-            x: (curve1.startPoint.x + curve1.endPoint.x) / 2,
-            y: second.y
-        };
-
-        let curve2 = new Curve();
-
-        curve2.startPoint = {
-            x: curve1.endPoint.x,
-            y: second.y
-        };
-        curve2.endPoint = {
-            x: first.x + first.width,
-            y: first.y + first.height
-        };
-        curve2.startDeviationPoint = {
-            x: (curve2.startPoint.x + curve2.endPoint.x) / 2,
-            y: second.y + second.height
-        };
-        curve2.endDeviationPoint = {
-            x: (curve2.startPoint.x + curve2.endPoint.x) / 2,
-            y: first.y + first.height
-        };
+        let curve1 = Curve.fromTwoPoints(
+            { x: first.x + first.width, y: first.y },
+            { x: second.x, y: second.y }
+        );
+
+        let curve2 = Curve.fromTwoPoints(
+            { x: second.x, y: second.y + second.height },
+            { x: first.x + first.width, y: first.y + first.height },
+        );
 
         let svgPath = new SvgPathBuilder()
             .startAt(curve1.startPoint)