feat: adds moving-handles example

Author: thedanchez

playground/constants.tsx

@@ -13,6 +13,7 @@ import {
   Interaction,
   InteractiveMinimap,
   Intersections,
+  MovingHandles,
   NodeResizer,
   NodeToolbar,
   Overview,
@@ -44,6 +45,7 @@ export const SolidFlowExamplesMap = {
   Interaction,
   InteractiveMinimap,
   Intersections,
+  MovingHandles,
   NodeResizer,
   NodeToolbar,
   Overview,

playground/examples/index.tsx

@@ -12,6 +12,7 @@ export { HandleConnect } from "./handle-connect/page";
 export { Interaction } from "./interaction/page";
 export { InteractiveMinimap } from "./interactive-minimap/page";
 export { Intersections } from "./intersections/page";
+export { MovingHandles } from "./moving-handles/page";
 export { NodeResizer } from "./node-resizer/page";
 export { NodeToolbar } from "./node-toolbar/page";
 export { Overview } from "./overview/page";

playground/examples/moving-handles/MovingHandleNode.tsx

@@ -0,0 +1,61 @@
+import { Position } from "@xyflow/system";
+import type { JSX } from "solid-js";
+
+import { Handle, useConnection } from "@/index";
+import type { NodeProps } from "@/types";
+
+const sourceHandleStyle: JSX.CSSProperties = {
+  position: "relative",
+  transform: "translate(-50%, 0)",
+  top: 0,
+  transition: "transform 0.5s",
+};
+
+export const MovingHandleNode = (_props: NodeProps<Record<string, never>, "movingHandle">) => {
+  const connection = useConnection();
+
+  return (
+    <>
+      <div
+        style={{
+          display: "flex",
+          "flex-direction": "column",
+          position: "absolute",
+          left: 0,
+          top: 0,
+          "justify-content": "space-around",
+          height: "100%",
+        }}
+      >
+        <Handle
+          type="target"
+          id="a"
+          position={Position.Left}
+          style={{
+            ...sourceHandleStyle,
+            transform: connection().inProgress ? "translate(-20px, 0)" : "translate(-50%, 0)",
+          }}
+        />
+        <Handle
+          type="target"
+          id="b"
+          position={Position.Left}
+          style={{
+            ...sourceHandleStyle,
+            transform: connection().inProgress ? "translate(-20px, 0)" : "translate(-50%, 0)",
+          }}
+        />
+      </div>
+      <div
+        style={{
+          background: "#f4f4f4",
+          padding: "10px",
+        }}
+      >
+        <div>moving handles</div>
+        <Handle type="source" position={Position.Right} />
+        <Handle type="source" position={Position.Right} />
+      </div>
+    </>
+  );
+};

playground/examples/moving-handles/page.tsx

@@ -0,0 +1,96 @@
+import { Position } from "@xyflow/system";
+import { createEffect } from "solid-js";
+import { produce } from "solid-js/store";
+
+import {
+  Background,
+  Controls,
+  createEdgeStore,
+  createNodeStore,
+  SolidFlow,
+  useConnection,
+  useSolidFlow,
+  useUpdateNodeInternals,
+} from "@/index";
+import type { EdgeConnection } from "@/types";
+
+import { MovingHandleNode } from "./MovingHandleNode";
+
+const nodeTypes = {
+  movingHandle: MovingHandleNode,
+};
+
+const NodeUpdater = () => {
+  const connection = useConnection();
+  const { getNodes } = useSolidFlow();
+  const updateNodeInternals = useUpdateNodeInternals();
+
+  createEffect(() => {
+    if (connection()) {
+      const startTime = Date.now();
+      const nodeIds = getNodes().map((n) => n.id);
+
+      const update = () => {
+        if (Date.now() - startTime < 500) {
+          updateNodeInternals(nodeIds);
+          requestAnimationFrame(update);
+        }
+      };
+
+      update();
+    }
+  });
+
+  return null;
+};
+
+export const MovingHandles = () => {
+  const [nodes] = createNodeStore([
+    {
+      id: "input",
+      type: "input",
+      data: { label: "input" },
+      position: { x: -300, y: 0 },
+      sourcePosition: Position.Right,
+    },
+    ...new Array(10).fill(0).map(
+      (_, i) =>
+        ({
+          id: `${i}`,
+          type: "movingHandle",
+          position: { x: 0, y: i * 60 },
+          data: {},
+        }) as Parameters<typeof createNodeStore>[0][number],
+    ),
+  ]);
+
+  const [edges, setEdges] = createEdgeStore([]);
+
+  const onConnect = (connection: EdgeConnection) => {
+    setEdges(
+      (edge) => edge.id === connection.id,
+      produce((edge) => {
+        edge.animated = true;
+      }),
+    );
+  };
+
+  return (
+    <SolidFlow
+      nodes={nodes}
+      edges={edges}
+      onConnect={onConnect}
+      nodeTypes={nodeTypes}
+      minZoom={0.2}
+      fitView
+      connectionLineStyle={{
+        stroke: "#ff0000",
+        "stroke-width": "3",
+      }}
+    >
+      <Controls />
+      <Background />
+      <NodeUpdater />
+    </SolidFlow>
+  );
+};

src/components/SolidFlow/types.ts

@@ -4,7 +4,6 @@ import type {
   CoordinateExtent,
   IsValidConnection,
   NodeOrigin,
-  OnConnect,
   OnConnectEnd,
   OnConnectStart,
   OnError,
@@ -36,10 +35,11 @@ import type {
   NodeEvents,
   NodeSelectionEvents,
   NodeTypes,
-  OnBeforeConnect,
   OnBeforeDelete,
+  OnBeforeEdgeConnect,
   OnBeforeReconnect,
   OnDelete,
+  OnEdgeConnect,
   OnSelectionChange,
   OnSelectionDrag,
   PaneEvents,
@@ -463,9 +463,9 @@ export type SolidFlowProps<
     /** This handler gets called before the user deletes nodes or edges and provides a way to abort the deletion by returning false. */
     readonly onBeforeDelete?: OnBeforeDelete<NodeType, EdgeType>;
     /** This handler gets called when a new edge is created. You can use it to modify the newly created edge. */
-    readonly onBeforeConnect?: OnBeforeConnect<EdgeType>;
+    readonly onBeforeConnect?: OnBeforeEdgeConnect<EdgeType>;
     /** This event gets fired when a connection successfully completes and an edge is created. */
-    readonly onConnect?: OnConnect;
+    readonly onConnect?: OnEdgeConnect;
     /** When a user starts to drag a connection line, this event gets fired. */
     readonly onConnectStart?: OnConnectStart;
     /** When a user stops dragging a connection line, this event gets fired. */

src/components/graph/connection/ConnectionLine.tsx

@@ -23,6 +23,7 @@ const ConnectionLine = <NodeType extends Node = Node>(
   props: ParentProps<Partial<ConnectionLineProps<NodeType>>>,
 ) => {
   const { store } = useInternalSolidFlow<NodeType>();
+  const connectionStatus = () => getConnectionStatus(store.connection.isValid);
 
   return (
     <Show when={store.connection.inProgress}>
@@ -32,7 +33,7 @@ const ConnectionLine = <NodeType extends Node = Node>(
         height={store.height}
         style={props.containerStyle}
       >
-        <g class={clsx(["solid-flow__connection", getConnectionStatus(store.connection.isValid)])}>
+        <g class={clsx(["solid-flow__connection", connectionStatus()])}>
           <Show when={props.component} fallback={<InternalConnectionLine style={props.style} />}>
             {(CustomComponent) => {
               const UserConnectionLine = CustomComponent();
@@ -49,7 +50,7 @@ const ConnectionLine = <NodeType extends Node = Node>(
                   toY={store.connection.to!.y}
                   fromPosition={store.connection.fromPosition!}
                   toPosition={store.connection.toPosition!}
-                  connectionStatus={getConnectionStatus(store.connection.isValid)}
+                  connectionStatus={connectionStatus()}
                   toNode={store.connection.toNode!}
                   toHandle={store.connection.toHandle!}
                 />

src/components/graph/handle/Handle.tsx

@@ -19,6 +19,7 @@ import { unwrap } from "solid-js/store";
 
 import { useInternalSolidFlow, useNodeId } from "@/components/contexts";
 import { useNodeConnectable } from "@/components/contexts/nodeConnectable";
+import { getEdgeId } from "@/data/utils";
 import type { Edge, Node, Position } from "@/types";
 
 type HandleProps = Omit<SystemHandleProps, "position"> & {
@@ -112,12 +113,15 @@ export const Handle = <NodeType extends Node = Node, EdgeType extends Edge = Edg
   });
 
   const onConnectExtended = (connection: Connection) => {
-    const edge = store.onBeforeConnect?.(connection) ?? connection;
+    const handleConnection = {
+      ...connection,
+      id: getEdgeId(connection),
+    };
 
-    if (!edge) return;
+    const edge = store.onBeforeConnect?.(handleConnection) ?? handleConnection;
 
     actions.addEdge(edge);
-    store.onConnect?.(connection);
+    store.onConnect?.(handleConnection);
   };
 
   const onPointerDown = (event: PointerEvent) => {

src/components/graph/plugins/NodeToolbar.tsx

@@ -2,9 +2,9 @@ import { type Align, getNodeToolbarTransform, Position as SystemPosition } from
 import { type JSX, mergeProps, type ParentComponent, Show, splitProps, useContext } from "solid-js";
 import { Portal } from "solid-js/web";
 
+import { useInternalSolidFlow } from "@/components/contexts";
 import { NodeIdContext } from "@/components/contexts/nodeId";
 import { useSolidFlow } from "@/hooks";
-import { useSolidFlowStore } from "@/hooks/useSolidFlowStore";
 import type { InternalNode, Position } from "@/types";
 
 export type NodeToolbarProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "style"> & {
@@ -28,15 +28,9 @@ export type NodeToolbarProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "style">
 };
 
 export const NodeToolbar: ParentComponent<Partial<NodeToolbarProps>> = (props) => {
-  const store = useSolidFlowStore();
+  const { store } = useInternalSolidFlow();
   const { getNodes, getNodesBounds, getInternalNode } = useSolidFlow();
 
-  const ctxNodeId = () => {
-    // NodeToolbar can be rendered outside of NodeWrapper, so we need to use the context directly.
-    const id = useContext(NodeIdContext);
-    return id ? id() : "";
-  };
-
   const _props = mergeProps(
     {
       offset: 10,
@@ -57,6 +51,12 @@ export const NodeToolbar: ParentComponent<Partial<NodeToolbarProps>> = (props) =
     "children",
   ]);
 
+  const ctxNodeId = () => {
+    // NodeToolbar can be rendered outside of NodeWrapper, so we need to use the context directly.
+    const id = useContext(NodeIdContext);
+    return id ? id() : "";
+  };
+
   const toolbarNodes = () => {
     const nodeIds = Array.isArray(local.nodeId) ? local.nodeId : [local.nodeId ?? ctxNodeId()];
 

src/data/createSolidFlow.tsx

@@ -257,6 +257,7 @@ export const createSolidFlow = <NodeType extends Node = Node, EdgeType extends E
       const state = connection();
       return {
         ...state,
+        from: state.inProgress ? pointToRendererPoint(state.from, this.transform) : state.from,
         to: state.inProgress ? pointToRendererPoint(state.to, this.transform) : state.to,
       } as ConnectionState<InternalNode<NodeType>>;
     },

src/data/utils.ts

@@ -1,7 +1,18 @@
-import { getNodesInside, type NodeLookup, type Transform } from "@xyflow/system";
+import {
+  type Connection,
+  type EdgeBase,
+  getNodesInside,
+  type NodeLookup,
+  type Transform,
+} from "@xyflow/system";
 
 import type { InternalNode, Node } from "../types";
 
+export const getEdgeId = (connection: Connection | EdgeBase) => {
+  const { source, sourceHandle, target, targetHandle } = connection;
+  return `xy-edge__${source}${sourceHandle || ""}-${target}${targetHandle || ""}`;
+};
+
 export function getVisibleNodes<NodeType extends Node = Node>(
   nodeLookup: NodeLookup<InternalNode<NodeType>>,
   transform: Transform,