Add custom connection line

Author: object-Object

mindy-website/www/src/components/BuildingLinkConnectionLine.tsx

@@ -0,0 +1,32 @@
+import {
+    getStraightPath,
+    type ConnectionLineComponentProps,
+} from "@xyflow/react";
+
+export default function BuildingLinkConnectionLine({
+    fromX,
+    fromY,
+    toX,
+    toY,
+    connectionLineStyle,
+}: ConnectionLineComponentProps) {
+    const [edgePath] = getStraightPath({
+        sourceX: fromX,
+        sourceY: fromY,
+        targetX: toX,
+        targetY: toY,
+    });
+
+    return (
+        <g>
+            <path
+                style={{
+                    stroke: "var(--mantine-color-dark-1)",
+                    ...connectionLineStyle,
+                }}
+                fill="none"
+                d={edgePath}
+            />
+        </g>
+    );
+}

mindy-website/www/src/components/LogicVMFlow.tsx

@@ -17,6 +17,7 @@ import { ProcessorKind } from "mindy-website";
 
 import { useLogicVM } from "../hooks";
 import { packPoint } from "../utils";
+import BuildingLinkConnectionLine from "./BuildingLinkConnectionLine";
 import BuildingLinkEdge from "./BuildingLinkEdge";
 import DisplayNode, { type DisplayNodeType } from "./nodes/DisplayNode";
 import ProcessorNode, { type ProcessorNodeType } from "./nodes/ProcessorNode";
@@ -209,6 +210,7 @@ export default function LogicVMFlow() {
             onEdgesChange={onEdgesChange}
             onBeforeDelete={onBeforeDelete}
             onConnect={onConnect}
+            connectionLineComponent={BuildingLinkConnectionLine}
             fitView
         >
             <Background variant={BackgroundVariant.Dots} />