refactor: update BaseEdge implementation

Author: thedanchez

playground/examples/edges/CustomEdge3.tsx

@@ -26,6 +26,7 @@ export const CustomEdge3 = (props: EdgeProps<{ text: string }>) => {
       <BaseEdge
         id={props.id}
         path={pathData().edgePath}
+        pathLength={100}
         class="solid-flow__edge-custom3"
         style={{
           "stroke-dasharray": "100",

playground/examples/switch/page.tsx

@@ -2,86 +2,86 @@ import { type Component, createSignal } from "solid-js";
 
 import { createEdgeStore, createNodeStore, SolidFlow, SolidFlowProvider } from "../../../src";
 
-const [nodesA] = createNodeStore([
-  {
-    id: "1a",
-    type: "input",
-    data: { label: "Node 1" },
-    position: { x: 250, y: 5 },
-    class: "light",
-    ariaLabel: "Input Node 1",
-  },
-  {
-    id: "2a",
-    type: "default",
-    data: { label: "Node 2" },
-    position: { x: 100, y: 100 },
-    class: "light",
-    ariaLabel: "Default Node 2",
-  },
-  {
-    id: "3a",
-    type: "default",
-    data: { label: "Node 3" },
-    position: { x: 400, y: 100 },
-    class: "light",
-  },
-]);
+const SwitchFlow: Component = () => {
+  const [nodesA] = createNodeStore([
+    {
+      id: "1a",
+      type: "input",
+      data: { label: "Node 1" },
+      position: { x: 250, y: 5 },
+      class: "light",
+      ariaLabel: "Input Node 1",
+    },
+    {
+      id: "2a",
+      type: "default",
+      data: { label: "Node 2" },
+      position: { x: 100, y: 100 },
+      class: "light",
+      ariaLabel: "Default Node 2",
+    },
+    {
+      id: "3a",
+      type: "default",
+      data: { label: "Node 3" },
+      position: { x: 400, y: 100 },
+      class: "light",
+    },
+  ]);
 
-const [edgesA] = createEdgeStore([
-  { id: "e1-2", source: "1a", target: "2a" },
-  { id: "e1-3", source: "1a", target: "3a" },
-]);
+  const [edgesA] = createEdgeStore([
+    { id: "e1-2", source: "1a", target: "2a" },
+    { id: "e1-3", source: "1a", target: "3a" },
+  ]);
 
-const [nodesB] = createNodeStore([
-  {
-    id: "inputb",
-    type: "input",
-    data: { label: "Input" },
-    position: { x: 300, y: 5 },
-    class: "light",
-    ariaLabel: "Input Node",
-  },
-  {
-    id: "1b",
-    type: "default",
-    data: { label: "Node 1" },
-    position: { x: 0, y: 100 },
-    class: "light",
-    ariaLabel: "Node with id 1",
-  },
-  {
-    id: "2b",
-    type: "default",
-    data: { label: "Node 2" },
-    position: { x: 200, y: 100 },
-    class: "light",
-    ariaLabel: "Node with id 2",
-  },
-  {
-    id: "3b",
-    type: "default",
-    data: { label: "Node 3" },
-    position: { x: 400, y: 100 },
-    class: "light",
-  },
-  {
-    id: "4b",
-    type: "default",
-    data: { label: "Node 4" },
-    position: { x: 600, y: 100 },
-    class: "light",
-  },
-]);
+  const [nodesB] = createNodeStore([
+    {
+      id: "inputb",
+      type: "input",
+      data: { label: "Input" },
+      position: { x: 300, y: 5 },
+      class: "light",
+      ariaLabel: "Input Node",
+    },
+    {
+      id: "1b",
+      type: "default",
+      data: { label: "Node 1" },
+      position: { x: 0, y: 100 },
+      class: "light",
+      ariaLabel: "Node with id 1",
+    },
+    {
+      id: "2b",
+      type: "default",
+      data: { label: "Node 2" },
+      position: { x: 200, y: 100 },
+      class: "light",
+      ariaLabel: "Node with id 2",
+    },
+    {
+      id: "3b",
+      type: "default",
+      data: { label: "Node 3" },
+      position: { x: 400, y: 100 },
+      class: "light",
+    },
+    {
+      id: "4b",
+      type: "default",
+      data: { label: "Node 4" },
+      position: { x: 600, y: 100 },
+      class: "light",
+    },
+  ]);
 
-const [edgesB] = createEdgeStore([
-  { id: "e1b", source: "inputb", target: "1b", ariaLabel: "edge to connect" },
-  { id: "e2b", source: "inputb", target: "2b" },
-  { id: "e3b", source: "inputb", target: "3b" },
-  { id: "e4b", source: "inputb", target: "4b" },
-]);
+  const [edgesB] = createEdgeStore([
+    { id: "e1b", source: "inputb", target: "1b", ariaLabel: "edge to connect" },
+    { id: "e2b", source: "inputb", target: "2b" },
+    { id: "e3b", source: "inputb", target: "3b" },
+    { id: "e4b", source: "inputb", target: "4b" },
+  ]);
 
-const SwitchFlow: Component = () => {
   const [nodes, setNodes] = createSignal(nodesA);
   const [edges, setEdges] = createSignal(edgesA);
 

src/components/graph/edge/BaseEdge.tsx

@@ -14,7 +14,6 @@ export const BaseEdge = (props: ParentProps<BaseEdgeProps>) => {
   );
 
   const [local, rest] = splitProps(_props, [
-    "id",
     "class",
     "style",
     "path",
@@ -30,13 +29,13 @@ export const BaseEdge = (props: ParentProps<BaseEdgeProps>) => {
   return (
     <>
       <path
-        id={local.id}
         d={local.path}
         class={clsx(["solid-flow__edge-path", local.class])}
         marker-start={local.markerStart}
         marker-end={local.markerEnd}
         fill="none"
         style={local.style}
+        {...rest}
       />
 
       <Show when={local.interactionWidth > 0}>
@@ -46,7 +45,6 @@ export const BaseEdge = (props: ParentProps<BaseEdgeProps>) => {
           stroke-width={local.interactionWidth}
           fill="none"
           class="solid-flow__edge-interaction"
-          {...rest}
         />
       </Show>
 

src/data/createSolidFlow.tsx

@@ -121,7 +121,7 @@ const getInitialViewport = (
 };
 
 export const createSolidFlow = <NodeType extends Node = Node, EdgeType extends Edge = Edge>(
-  props: Partial<SolidFlowProps<NodeType, EdgeType>>,
+  props: SolidFlowProps<NodeType, EdgeType>,
 ) => {
   const _props = mergeProps(getDefaultFlowStateProps<NodeType, EdgeType>(), props);
 

src/types/edge.ts

@@ -58,7 +58,6 @@ export type EdgeProps<
  * Props for built-in edge components that render the actual SVG path.
  */
 export type BaseEdgeProps = {
-  id?: string;
   /** SVG path of the edge */
   path: string;
   /** The x coordinate of the label */