feat: adds easy-connect example

Author: thedanchez

playground/constants.tsx

@@ -7,6 +7,7 @@ import {
   CustomNode,
   Dagre,
   DragNDrop,
+  EasyConnect,
   Edges,
   HandleConnect,
   Interaction,
@@ -37,6 +38,7 @@ export const SolidFlowExamplesMap = {
   CustomNode,
   Dagre,
   DragNDrop,
+  EasyConnect,
   Edges,
   HandleConnect,
   Interaction,

playground/examples/easy-connect/CustomConnectionLine.tsx

@@ -0,0 +1,22 @@
+import { getStraightPath } from "@xyflow/system";
+
+import type { ConnectionLineComponentProps } from "@/index";
+
+export default function CustomConnectionLine(props: ConnectionLineComponentProps) {
+  const edgePath = () => {
+    const [path] = getStraightPath({
+      sourceX: props.fromX,
+      sourceY: props.fromY,
+      targetX: props.toX,
+      targetY: props.toY,
+    });
+    return path;
+  };
+
+  return (
+    <g>
+      <path style={props.connectionLineStyle} fill="none" d={edgePath()} />
+      <circle cx={props.toX} cy={props.toY} fill="black" r={3} stroke="black" stroke-width={1.5} />
+    </g>
+  );
+}

playground/examples/easy-connect/CustomNode.tsx

@@ -0,0 +1,33 @@
+import { Show } from "solid-js";
+
+import { Handle, useConnection } from "@/index";
+import type { NodeProps } from "@/types";
+
+export default function CustomNode(props: NodeProps<Record<string, never>, "custom">) {
+  const connection = useConnection();
+  const isTarget = () => connection().inProgress && connection().fromNode?.id !== props.id;
+  const label = () => (isTarget() ? "Drop here" : "Drag to connect");
+
+  return (
+    <div class="customNode">
+      <div
+        class="customNodeBody"
+        style={{
+          "border-style": isTarget() ? "dashed" : "solid",
+          "background-color": isTarget() ? "#ffcce3" : "#ccd9f6",
+        }}
+      >
+        {/* If handles are conditionally rendered and not present initially, you need to update the node internals */}
+        {/* In this case we don't need to use useUpdateNodeInternals, since !isConnecting is true at the beginning and all handles are rendered initially. */}
+        <Show when={!connection().inProgress}>
+          <Handle class="customHandle" position="right" type="source" />
+        </Show>
+        {/* We want to disable the target handle, if the connection was started from this node */}
+        <Show when={!connection().inProgress || isTarget()}>
+          <Handle class="customHandle" position="left" type="target" isConnectableStart={false} />
+        </Show>
+        {label()}
+      </div>
+    </div>
+  );
+}

playground/examples/easy-connect/FloatingEdge.tsx

@@ -0,0 +1,44 @@
+import { getStraightPath } from "@xyflow/system";
+import { Show } from "solid-js";
+
+import { useInternalNode } from "@/index";
+import type { EdgeProps } from "@/types";
+
+import { getEdgeParams } from "./utils";
+
+export default function FloatingEdge(props: EdgeProps) {
+  const sourceNode = useInternalNode(() => props.source);
+  const targetNode = useInternalNode(() => props.target);
+
+  const edgePath = () => {
+    const src = sourceNode();
+    const tgt = targetNode();
+
+    if (!src || !tgt) return null;
+
+    const { sx, sy, tx, ty } = getEdgeParams(src, tgt);
+
+    const [path] = getStraightPath({
+      sourceX: sx,
+      sourceY: sy,
+      targetX: tx,
+      targetY: ty,
+    });
+
+    return path;
+  };
+
+  return (
+    <Show when={edgePath()}>
+      {(path) => (
+        <path
+          id={props.id}
+          class="solid-flow__edge-path"
+          d={path()}
+          marker-end={props.markerEnd}
+          style={props.style}
+        />
+      )}
+    </Show>
+  );
+}

playground/examples/easy-connect/page.tsx

@@ -0,0 +1,79 @@
+import "./style.css";
+
+import { MarkerType } from "@xyflow/system";
+
+import { Background, createEdgeStore, createNodeStore, SolidFlow } from "@/index";
+import type { NodeTypes } from "@/types";
+
+import CustomConnectionLine from "./CustomConnectionLine";
+import CustomNode from "./CustomNode";
+import FloatingEdge from "./FloatingEdge";
+
+const nodeTypes = {
+  custom: CustomNode,
+} satisfies NodeTypes;
+
+const edgeTypes = {
+  floating: FloatingEdge,
+};
+
+const defaultEdgeOptions = {
+  style: { "stroke-width": "3px", stroke: "black" },
+  type: "floating",
+  markerEnd: {
+    type: MarkerType.ArrowClosed,
+    color: "black",
+  },
+};
+
+const connectionLineStyle = {
+  "stroke-width": "3px",
+  stroke: "black",
+};
+
+export const EasyConnect = () => {
+  const [nodes] = createNodeStore<typeof nodeTypes>([
+    {
+      id: "1",
+      type: "custom",
+      position: { x: 0, y: 0 },
+      data: {},
+    },
+    {
+      id: "2",
+      type: "custom",
+      position: { x: 250, y: 320 },
+      data: {},
+    },
+    {
+      id: "3",
+      type: "custom",
+      position: { x: 40, y: 300 },
+      data: {},
+    },
+    {
+      id: "4",
+      type: "custom",
+      position: { x: 300, y: 0 },
+      data: {},
+    },
+  ]);
+
+  const [edges] = createEdgeStore([]);
+
+  return (
+    <SolidFlow
+      nodes={nodes}
+      edges={edges}
+      // onConnect={onConnect}
+      fitView
+      nodeTypes={nodeTypes}
+      edgeTypes={edgeTypes}
+      defaultEdgeOptions={defaultEdgeOptions}
+      connectionLineComponent={CustomConnectionLine}
+      connectionLineStyle={connectionLineStyle}
+    >
+      <Background />
+    </SolidFlow>
+  );
+};

playground/examples/easy-connect/style.css

@@ -0,0 +1,42 @@
+.customNodeBody {
+  width: 150px;
+  height: 80px;
+  border: 3px solid black;
+  position: relative;
+  overflow: hidden;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+}
+
+.customNode:before {
+  content: "";
+  position: absolute;
+  top: -10px;
+  left: 50%;
+  height: 20px;
+  width: 40px;
+  transform: translate(-50%, 0);
+  background: #d6d5e6;
+  z-index: 1000;
+  line-height: 1;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 9px;
+  border: 2px solid #222138;
+}
+
+div.customHandle {
+  width: 100%;
+  height: 100%;
+  background: blue;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 0;
+  transform: none;
+  border: none;
+  opacity: 0;
+}

playground/examples/easy-connect/utils.tsx

@@ -0,0 +1,75 @@
+import { Position, type XYPosition } from "@xyflow/system";
+
+import type { InternalNode } from "@/types";
+
+// this helper function returns the intersection point
+// of the line between the center of the intersectionNode and the target node
+function getNodeIntersection(intersectionNode: InternalNode, targetNode: InternalNode) {
+  // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
+
+  const { width: intersectionNodeWidth, height: intersectionNodeHeight } =
+    intersectionNode.measured;
+  const intersectionNodePosition = intersectionNode.internals.positionAbsolute;
+  const targetPosition = targetNode.internals.positionAbsolute!;
+
+  const w = intersectionNodeWidth! / 2;
+  const h = intersectionNodeHeight! / 2;
+
+  const x2 = intersectionNodePosition.x + w;
+  const y2 = intersectionNodePosition.y + h;
+  const x1 = targetPosition.x + w;
+  const y1 = targetPosition.y + h;
+
+  const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h);
+  const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h);
+  const a = 1 / (Math.abs(xx1) + Math.abs(yy1) || 1);
+  const xx3 = a * xx1;
+  const yy3 = a * yy1;
+  const x = w * (xx3 + yy3) + x2;
+  const y = h * (-xx3 + yy3) + y2;
+  return { x, y };
+}
+
+// returns the position (top,right,bottom or right) passed node compared to the intersection point
+function getEdgePosition(node: InternalNode, intersectionPoint: XYPosition) {
+  const n = { ...node.internals.positionAbsolute, ...node };
+  const nx = Math.round(n.x!);
+  const ny = Math.round(n.y!);
+  const px = Math.round(intersectionPoint.x);
+  const py = Math.round(intersectionPoint.y);
+
+  const { width = 0, height = 0 } = node.measured;
+
+  if (px <= nx + 1) {
+    return Position.Left;
+  }
+  if (px >= nx + width - 1) {
+    return Position.Right;
+  }
+  if (py <= ny + 1) {
+    return Position.Top;
+  }
+  if (py >= n.y! + height - 1) {
+    return Position.Bottom;
+  }
+
+  return Position.Top;
+}
+
+// returns the parameters (sx, sy, tx, ty, sourcePos, targetPos) you need to create an edge
+export function getEdgeParams(source: InternalNode, target: InternalNode) {
+  const sourceIntersectionPoint = getNodeIntersection(source, target);
+  const targetIntersectionPoint = getNodeIntersection(target, source);
+
+  const sourcePos = getEdgePosition(source, sourceIntersectionPoint);
+  const targetPos = getEdgePosition(target, targetIntersectionPoint);
+
+  return {
+    sx: sourceIntersectionPoint.x,
+    sy: sourceIntersectionPoint.y,
+    tx: targetIntersectionPoint.x,
+    ty: targetIntersectionPoint.y,
+    sourcePos,
+    targetPos,
+  };
+}

playground/examples/index.tsx

@@ -6,6 +6,7 @@ export { CustomConnectionLine } from "./custom-connection-line/page";
 export { CustomNode } from "./custom-node/page";
 export { Dagre } from "./dagre/page";
 export { DragNDrop } from "./drag-n-drop/page";
+export { EasyConnect } from "./easy-connect/page";
 export { Edges } from "./edges/page";
 export { HandleConnect } from "./handle-connect/page";
 export { Interaction } from "./interaction/page";

src/components/graph/connection/index.tsx

@@ -1 +1,2 @@
 export { default as ConnectionLine } from "./ConnectionLine";
+export type { ConnectionLineComponentProps } from "./types";

src/components/graph/handle/Handle.tsx

@@ -227,9 +227,10 @@ export const Handle = <NodeType extends Node = Node, EdgeType extends Edge = Edg
       style={local.style}
       class={clsx(
         "solid-flow__handle",
+        `solid-flow__handle-${local.position}`,
         store.noDragClass,
         store.noPanClass,
-        local.position,
+        local.class,
         {
           valid: valid(),
           connectingto: connectingTo(),
@@ -241,7 +242,6 @@ export const Handle = <NodeType extends Node = Node, EdgeType extends Edge = Edg
           connectable: connectable(),
           connectionindicator: connectionIndicator(),
         },
-        local.class,
       )}
       {...rest}
     >