@dschz/solid-flow 0.3.0-next.3 → 0.3.0-next.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,6 +2,7 @@ import { JSX } from "@solidjs/web";
2
2
  import { Align as Align$1, AriaLabelConfig as AriaLabelConfig$1, BezierPathOptions as BezierPathOptions$1, Box as Box$1, ColorMode as ColorMode$1, ColorModeClass as ColorModeClass$1, Connection, Connection as Connection$1, ConnectionLineType, ConnectionLineType as ConnectionLineType$1, ConnectionMode, ConnectionMode as ConnectionMode$1, ConnectionState, ControlLinePosition, ControlPosition, ControlPosition as ControlPosition$1, CoordinateExtent, CoordinateExtent as CoordinateExtent$1, DefaultEdgeOptionsBase, Dimensions as Dimensions$1, EdgeBase, EdgeMarker, EdgeMarkerType as EdgeMarkerType$1, EdgePosition, EdgeToolbarBaseProps, FinalConnectionState, FitBounds, FitBoundsOptions as FitBoundsOptions$1, FitViewOptionsBase, GetBezierPathParams as GetBezierPathParams$1, GetSmoothStepPathParams as GetSmoothStepPathParams$1, GetStraightPathParams as GetStraightPathParams$1, Handle as Handle$1, HandleConnection, HandleConnection as HandleConnection$1, HandleProps, HandleType, InternalNodeBase, IsValidConnection as IsValidConnection$1, MarkerProps, MarkerType, NodeBase, NodeConnection, NodeConnection as NodeConnection$1, NodeOrigin, NodeOrigin as NodeOrigin$1, NodeProps as NodeProps$1, OnBeforeDeleteBase, OnConnect as OnConnect$1, OnConnectEnd as OnConnectEnd$1, OnConnectStart as OnConnectStart$1, OnConnectStartParams as OnConnectStartParams$1, OnError as OnError$1, OnMove, OnMove as OnMove$1, OnMoveEnd as OnMoveEnd$1, OnMoveStart as OnMoveStart$1, OnReconnect as OnReconnect$1, OnReconnectEnd as OnReconnectEnd$1, OnReconnectStart as OnReconnectStart$1, OnResize as OnResize$1, OnResizeEnd as OnResizeEnd$1, OnResizeStart as OnResizeStart$1, OnSelectionDrag as OnSelectionDrag$1, PanOnScrollMode, PanOnScrollMode as PanOnScrollMode$1, PanelPosition, PanelPosition as PanelPosition$1, Position, Position as Position$1, ProOptions as ProOptions$1, Rect as Rect$1, ResizeControlVariant, ResizeControlVariant as ResizeControlVariant$1, ResizeDragEvent as ResizeDragEvent$1, ResizeParams as ResizeParams$1, ResizeParamsWithDirection as ResizeParamsWithDirection$1, SelectionMode as SelectionMode$1, SelectionRect as SelectionRect$1, SetCenter, SetCenterOptions as SetCenterOptions$1, SetViewport, ShouldResize, ShouldResize as ShouldResize$1, SmoothStepPathOptions as SmoothStepPathOptions$1, SnapGrid as SnapGrid$1, StepPathOptions, Transform as Transform$1, UpdateNodeInternals, Viewport, Viewport as Viewport$1, ViewportHelperFunctionOptions as ViewportHelperFunctionOptions$1, XYPosition, XYPosition as XYPosition$1, XYZPosition as XYZPosition$1, ZIndexMode, ZoomInOut, addEdge, getBezierEdgeCenter as getBezierEdgeCenter$1, getBezierPath, getConnectedEdges, getEdgeCenter as getEdgeCenter$1, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds } from "@xyflow/system";
3
3
  import { Accessor, ParentComponent, ParentProps, Store, StoreSetter } from "solid-js";
4
4
  //#region src/types/custom.d.ts
5
+ /** An arbitrary string-keyed record — the unconstrained default for node/edge data. */
5
6
  type UnknownStruct = Record<string, unknown>;
6
7
  //#endregion
7
8
  //#region src/types/node.d.ts
@@ -20,15 +21,26 @@ type Node<NodeData extends UnknownStruct = UnknownStruct, NodeType extends strin
20
21
  class?: string;
21
22
  style?: JSX.CSSProperties;
22
23
  focusable?: boolean;
24
+ /**
25
+ * When `false`, the node is exempt from viewport culling on both tiers:
26
+ * the always-on CSS tier never hides it and `onlyRenderVisibleElements`
27
+ * never unmounts it. Use for nodes whose content must keep running while
28
+ * off-screen (media playback, timers, third-party embeds).
29
+ * @default true
30
+ */
31
+ cullable?: boolean;
23
32
  /**
24
33
  * The ARIA role attribute for the node element, used for accessibility.
25
34
  * @default "group"
26
35
  */
27
36
  ariaRole?: JSX.HTMLAttributes<HTMLDivElement>["role"];
28
37
  /**
29
- * General escape hatch for adding custom attributes to the node's DOM element.
38
+ * General escape hatch for adding custom attributes to the node's DOM
39
+ * element. Event handlers, refs, and content-injection props are excluded
40
+ * (Svelte Flow parity: their omit of `keyof DOMAttributes`); interaction
41
+ * belongs on the node component, not here.
30
42
  */
31
- domAttributes?: Omit<JSX.HTMLAttributes<HTMLDivElement>, "id" | "style" | "class" | "draggable" | "role" | "aria-label" | keyof JSX.HTMLAttributes<HTMLDivElement>>;
43
+ domAttributes?: Omit<JSX.HTMLAttributes<HTMLDivElement>, "id" | "style" | "class" | "draggable" | "role" | "aria-label" | "innerHTML" | "textContent" | "children" | keyof JSX.CustomAttributes<HTMLDivElement> | keyof JSX.EventHandlersElement<HTMLDivElement> | keyof JSX.EventHandlersWindow<HTMLDivElement>>;
32
44
  };
33
45
  /** Props passed to a node component (custom or built-in). */
34
46
  type NodeProps<TData extends UnknownStruct = UnknownStruct, TType extends string | undefined = string | undefined> = NodeProps$1<Node<TData, TType>>;
@@ -68,6 +80,13 @@ type Edge<EdgeData extends UnknownStruct = UnknownStruct, EdgeType extends strin
68
80
  style?: JSX.CSSProperties;
69
81
  class?: string;
70
82
  focusable?: boolean;
83
+ /**
84
+ * When `false`, the edge is exempt from viewport culling on both tiers:
85
+ * the always-on CSS tier never hides it and `onlyRenderVisibleElements`
86
+ * never unmounts it.
87
+ * @default true
88
+ */
89
+ cullable?: boolean;
71
90
  /**
72
91
  * The ARIA role attribute for the edge, used for accessibility.
73
92
  * @default "group"
@@ -449,7 +468,12 @@ type EdgeReconnectAnchorProps = {
449
468
  readonly style?: JSX.CSSProperties;
450
469
  readonly position?: XYPosition$1;
451
470
  readonly size?: number;
471
+ /** Externally mark the anchor as reconnecting (hides its children), in
472
+ * addition to the gesture-driven internal state. */
452
473
  readonly reconnecting?: boolean;
474
+ /** Called when a reconnect gesture on this anchor starts/ends — the Solid
475
+ * translation of Svelte Flow's `bind:reconnecting`. */
476
+ readonly onReconnectingChange?: (reconnecting: boolean) => void;
453
477
  } & Omit<JSX.HTMLAttributes<HTMLDivElement>, "style">;
454
478
  /** Grab area that lets an edge end be dragged off its handle and reconnected. */
455
479
  declare const EdgeReconnectAnchor: (props: ParentProps<EdgeReconnectAnchorProps>) => JSX.Element;
@@ -845,13 +869,28 @@ type SolidFlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge>
845
869
  */
846
870
  readonly selectionOnDrag?: boolean;
847
871
  /**
848
- * Viewport culling: elements outside the (overscanned) viewport are hidden
849
- * with CSS (`visibility: hidden` + `pointer-events: none`). Everything
850
- * stays mounted custom nodes keep their DOM state off-screen, and
851
- * measurement/fitView/minimap are unaffected. Selected elements are never
852
- * culled. Set to `false` to keep every element visible; note that culled
853
- * elements leave the accessibility tree and tab order while off-screen.
854
- * @default true
872
+ * Only render (mount) elements inside the overscanned viewport: nodes and
873
+ * edges outside it are unmounted entirely, and remount as the viewport
874
+ * reaches them. This is the heavy-duty tier for very large graphs — at
875
+ * 10k nodes it cuts the DOM by ~16x, roughly halves memory, and makes
876
+ * node drags ~3.7x faster (fewer live subscribers).
877
+ *
878
+ * The flow's data graph is unaffected: positions, selection, and cached
879
+ * measurements live outside the components, so an unmounted node comes
880
+ * back exactly as it left (at its measured size, still selected).
881
+ * Component-LOCAL state does not survive — signals created inside a
882
+ * custom node, uncontrolled inputs, scroll positions of inner elements.
883
+ * Keep state you care about in `node.data`. Never unmounted: selected
884
+ * elements, unmeasured nodes, and the node holding DOM focus. Elements
885
+ * whose component-local state (or side effects) must keep running while
886
+ * off-screen can opt out entirely with `cullable: false` on the node or
887
+ * edge — they are then exempt from both tiers.
888
+ *
889
+ * Independent of this prop, off-viewport elements are always CSS-culled
890
+ * (`visibility: hidden` + `pointer-events: none`, everything stays
891
+ * mounted) — that tier has no user-visible semantics beyond leaving the
892
+ * accessibility tree and tab order while off-screen.
893
+ * @default false
855
894
  */
856
895
  readonly onlyRenderVisibleElements?: boolean;
857
896
  /**
@@ -1022,22 +1061,33 @@ type SolidFlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge>
1022
1061
  readonly ariaLabelConfig?: Partial<AriaLabelConfig$1>;
1023
1062
  };
1024
1063
  //#endregion
1025
- //#region src/components/SolidFlow/component.d.ts
1064
+ //#region src/components/SolidFlow.d.ts
1026
1065
  type SolidFlowComponentProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = ParentProps<SolidFlowProps<NodeType, EdgeType>> & Omit<JSX.HTMLAttributes<HTMLDivElement>, "style" | "onselectionchange" | "onSelectionChange">;
1027
1066
  /** The flow canvas component: renders nodes and edges and wires up viewport and interactions. */
1028
1067
  declare const SolidFlow: <NodeType extends Node = Node, EdgeType extends Edge = Edge>(props: SolidFlowComponentProps<NodeType, EdgeType>) => JSX.Element;
1029
1068
  //#endregion
1030
- //#region src/components/SolidFlow/provider.d.ts
1069
+ //#region src/components/SolidFlowProvider.d.ts
1031
1070
  /** Hoists flow state above `SolidFlow` so hooks work outside the component (multi-panel UIs). */
1032
1071
  declare const SolidFlowProvider: <NodeType extends Node = Node, EdgeType extends Edge = Edge>(props: ParentProps<SolidFlowProps<NodeType, EdgeType>>) => JSX.Element;
1033
1072
  //#endregion
1034
1073
  //#region src/core/createEdgeStore.d.ts
1035
- type ExtractEdgeInfo<T> = T extends ((props: EdgeProps<infer TData, infer TType>) => unknown) ? {
1036
- data: TData;
1037
- type: TType;
1038
- } : never;
1074
+ type EdgeDataOf<T> = T extends ((props: EdgeProps<infer TData, infer _TType>) => unknown) ? TData : UnknownStruct;
1039
1075
  type AllEdgeTypes<TUserEdgeTypes extends EdgeTypes> = TUserEdgeTypes extends Record<string, never> ? BuiltInEdgeTypes : BuiltInEdgeTypes & TUserEdgeTypes;
1040
- type EdgesInput<TUserEdgeTypes extends EdgeTypes> = { [K in keyof AllEdgeTypes<TUserEdgeTypes>]: Edge<ExtractEdgeInfo<AllEdgeTypes<TUserEdgeTypes>[K]>["data"], ExtractEdgeInfo<AllEdgeTypes<TUserEdgeTypes>[K]>["type"]>; }[keyof AllEdgeTypes<TUserEdgeTypes>];
1076
+ /**
1077
+ * The discriminated union of edge configurations for a renderer map: one
1078
+ * member per built-in and custom edge type, with `data` narrowed by the
1079
+ * `type` discriminant (the MAP KEY — what the renderer actually matches).
1080
+ * Use it to carry `createEdgeStore`'s guided typing anywhere a plain array
1081
+ * or vanilla store is typed:
1082
+ *
1083
+ * ```typescript
1084
+ * const initialEdges = [
1085
+ * { id: "e1", source: "1", target: "2", type: "labeled", data: { label: "hi" } },
1086
+ * ] satisfies EdgesFor<typeof edgeTypes>[];
1087
+ * ```
1088
+ */
1089
+ type EdgesFor<TUserEdgeTypes extends EdgeTypes = Record<string, never>> = { [K in keyof AllEdgeTypes<TUserEdgeTypes>]: Edge<EdgeDataOf<AllEdgeTypes<TUserEdgeTypes>[K]>, K & string>; }[keyof AllEdgeTypes<TUserEdgeTypes>];
1090
+ type EdgesInput<TUserEdgeTypes extends EdgeTypes> = EdgesFor<TUserEdgeTypes>;
1041
1091
  /**
1042
1092
  * Creates a type-safe reactive store of edges for use in Solid Flow.
1043
1093
  *
@@ -1114,7 +1164,7 @@ type EdgesInput<TUserEdgeTypes extends EdgeTypes> = { [K in keyof AllEdgeTypes<T
1114
1164
  * - Works seamlessly with both built-in and custom node types
1115
1165
  * - Type errors prevent invalid type names or incorrect data structures
1116
1166
  */
1117
- declare const createEdgeStore: <TUserEdgeTypes extends EdgeTypes = Record<string, never>>(edges: EdgesInput<TUserEdgeTypes>[]) => readonly [Store<EdgesInput<TUserEdgeTypes>[]>, StoreSetter<EdgesInput<TUserEdgeTypes>[]>];
1167
+ declare const createEdgeStore: <TUserEdgeTypes extends EdgeTypes = Record<string, never>>(edges: NoInfer<EdgesInput<TUserEdgeTypes>>[]) => readonly [Store<EdgesInput<TUserEdgeTypes>[]>, StoreSetter<EdgesInput<TUserEdgeTypes>[]>];
1118
1168
  //#endregion
1119
1169
  //#region src/core/projections/connections.d.ts
1120
1170
  /**
@@ -1270,12 +1320,23 @@ type FlowCommands<NodeType extends Node = Node, EdgeType extends Edge = Edge> =
1270
1320
  };
1271
1321
  //#endregion
1272
1322
  //#region src/core/createNodeStore.d.ts
1273
- type ExtractNodeInfo<T> = T extends ((props: NodeProps<infer TData, infer TType>) => unknown) ? {
1274
- data: TData;
1275
- type: TType;
1276
- } : never;
1323
+ type NodeDataOf<T> = T extends ((props: NodeProps<infer TData, infer _TType>) => unknown) ? TData : UnknownStruct;
1277
1324
  type AllNodeTypes<TUserNodeTypes extends NodeTypes> = TUserNodeTypes extends Record<string, never> ? BuiltInNodeTypes : BuiltInNodeTypes & TUserNodeTypes;
1278
- type NodesInput<TUserNodeTypes extends NodeTypes> = { [K in keyof AllNodeTypes<TUserNodeTypes>]: Node<ExtractNodeInfo<AllNodeTypes<TUserNodeTypes>[K]>["data"], ExtractNodeInfo<AllNodeTypes<TUserNodeTypes>[K]>["type"]>; }[keyof AllNodeTypes<TUserNodeTypes>];
1325
+ /**
1326
+ * The discriminated union of node configurations for a renderer map: one
1327
+ * member per built-in and custom node type, with `data` narrowed by the
1328
+ * `type` discriminant (the MAP KEY — what the renderer actually matches).
1329
+ * Use it to carry `createNodeStore`'s guided typing anywhere a plain array
1330
+ * or vanilla store is typed:
1331
+ *
1332
+ * ```typescript
1333
+ * const initialNodes = [
1334
+ * { id: "1", type: "custom", position: { x: 0, y: 0 }, data: { value: 1 } },
1335
+ * ] satisfies NodesFor<typeof nodeTypes>[];
1336
+ * ```
1337
+ */
1338
+ type NodesFor<TUserNodeTypes extends NodeTypes = Record<string, never>> = { [K in keyof AllNodeTypes<TUserNodeTypes>]: Node<NodeDataOf<AllNodeTypes<TUserNodeTypes>[K]>, K & string>; }[keyof AllNodeTypes<TUserNodeTypes>];
1339
+ type NodesInput<TUserNodeTypes extends NodeTypes> = NodesFor<TUserNodeTypes>;
1279
1340
  /**
1280
1341
  * Creates a type-safe reactive store of nodes for use in Solid Flow.
1281
1342
  *
@@ -1347,7 +1408,7 @@ type NodesInput<TUserNodeTypes extends NodeTypes> = { [K in keyof AllNodeTypes<T
1347
1408
  * - Works seamlessly with both built-in and custom node types
1348
1409
  * - Type errors prevent invalid type names or incorrect data structures
1349
1410
  */
1350
- declare const createNodeStore: <TUserNodeTypes extends NodeTypes = Record<string, never>>(nodes: NodesInput<TUserNodeTypes>[]) => readonly [Store<NodesInput<TUserNodeTypes>[]>, StoreSetter<NodesInput<TUserNodeTypes>[]>];
1411
+ declare const createNodeStore: <TUserNodeTypes extends NodeTypes = Record<string, never>>(nodes: NoInfer<NodesInput<TUserNodeTypes>>[]) => readonly [Store<NodesInput<TUserNodeTypes>[]>, StoreSetter<NodesInput<TUserNodeTypes>[]>];
1351
1412
  //#endregion
1352
1413
  //#region src/hooks/useColorMode.d.ts
1353
1414
  /**
@@ -1377,14 +1438,14 @@ declare function useConnection(): Accessor<ConnectionState>;
1377
1438
  * @public
1378
1439
  * @returns store with an array of nodes
1379
1440
  */
1380
- declare function useNodes<NodeType extends Node = Node>(): Accessor<NodeType[]>;
1441
+ declare function useNodes<NodeType extends Node = Node>(): Accessor<readonly NodeType[]>;
1381
1442
  /**
1382
1443
  * Hook for getting the current edges from the store.
1383
1444
  *
1384
1445
  * @public
1385
1446
  * @returns store with an array of edges
1386
1447
  */
1387
- declare function useEdges<EdgeType extends Edge = Edge>(): Accessor<EdgeType[]>;
1448
+ declare function useEdges<EdgeType extends Edge = Edge>(): Accessor<readonly EdgeType[]>;
1388
1449
  /**
1389
1450
  * Hook for getting the current viewport from the store.
1390
1451
  *
@@ -1393,10 +1454,6 @@ declare function useEdges<EdgeType extends Edge = Edge>(): Accessor<EdgeType[]>;
1393
1454
  */
1394
1455
  declare function useViewport(): Accessor<Viewport$1>;
1395
1456
  //#endregion
1396
- //#region src/hooks/useHandleEdgeSelect.d.ts
1397
- /** Returns a callback applying edge-selection semantics for the given edge id. */
1398
- declare function useHandleEdgeSelect(): (id: string) => void;
1399
- //#endregion
1400
1457
  //#region src/hooks/useInitialized.d.ts
1401
1458
  /**
1402
1459
  * Hook for seeing if all nodes have been measured.
@@ -1420,11 +1477,16 @@ declare function useViewportInitialized(): Accessor<boolean>;
1420
1477
  //#endregion
1421
1478
  //#region src/hooks/useInternalNode.d.ts
1422
1479
  /**
1423
- * Hook to get an internal node by id.
1480
+ * Hook to get an internal node (the node enriched with measured dimensions,
1481
+ * absolute position, and z-order) by id.
1482
+ *
1483
+ * The id is an accessor (not a plain string) on purpose: passing a raw
1484
+ * reactive read like `props.nodeId` would capture the value once and silently
1485
+ * lose reactivity — `useInternalNode(() => props.nodeId)` keeps it live.
1424
1486
  *
1425
1487
  * @public
1426
- * @param id - the node id
1427
- * @returns an accessor with an internal node or undefined
1488
+ * @param id - a reactive accessor for the node id
1489
+ * @returns an accessor with the internal node, or undefined while absent
1428
1490
  */
1429
1491
  declare function useInternalNode(id: Accessor<string>): Accessor<InternalNode | undefined>;
1430
1492
  //#endregion
@@ -1467,36 +1529,16 @@ declare function useNodesData<NodeType extends Node = Node>(nodeIds: Accessor<st
1467
1529
  * familiarity — `useSolidFlow().fitView()` and
1468
1530
  * `useSolidFlow().commands.fitView()` are the same function.
1469
1531
  *
1470
- * The imperative getters are deprecated: event handlers are untracked scopes
1471
- * in Solid, so reading `flow.viewport.zoom` (or `flow.internalNodes[id]`)
1472
- * inside one already IS the imperative read — no wrapper needed while the
1473
- * same read in a tracked scope subscribes.
1532
+ * There are no imperative getters: event handlers are untracked scopes in
1533
+ * Solid, so reading `flow.viewport.zoom` (or `flow.internalNodes[id]`) inside
1534
+ * one already IS the imperative read — while the same read in a tracked scope
1535
+ * subscribes.
1474
1536
  */
1475
1537
  type UseSolidFlowReturn<NodeType extends Node = Node, EdgeType extends Edge = Edge> = FlowCommands<NodeType, EdgeType> & {
1476
1538
  /** The flow's data graph as one reactive struct — the canonical read surface. */
1477
1539
  readonly flow: FlowState<NodeType, EdgeType>;
1478
1540
  /** The flow's write surface (same functions as the spread members). */
1479
1541
  readonly commands: FlowCommands<NodeType, EdgeType>;
1480
- /** @deprecated Read `flow.internalNodes[id]` instead. */
1481
- readonly getInternalNode: (id: string) => InternalNode<NodeType> | undefined;
1482
- /** @deprecated Read `flow.internalNodes[id]?.internals.userNode` (or find in `flow.nodes`) instead. */
1483
- readonly getNode: (id: string) => NodeType | undefined;
1484
- /** @deprecated Read `flow.nodes` (or map ids over `flow.internalNodes`) instead. */
1485
- readonly getNodes: (ids?: string[]) => NodeType[];
1486
- /** @deprecated Read `flow.edges` (or find by id) instead. */
1487
- readonly getEdge: (id: string) => EdgeType | undefined;
1488
- /** @deprecated Read `flow.edges` (or filter by ids) instead. */
1489
- readonly getEdges: (ids?: string[]) => EdgeType[];
1490
- /** @deprecated Read `flow.viewport` instead. */
1491
- readonly getViewport: () => Viewport$1;
1492
- /** @deprecated Read `flow.viewport.zoom` instead. */
1493
- readonly getZoom: () => number;
1494
- /** @deprecated Read `flow.connections[connectionKey(nodeId, type, id)]` (or use `useNodeConnections`) instead. */
1495
- readonly getHandleConnections: (params: {
1496
- type: HandleType;
1497
- nodeId: string;
1498
- id?: string | null;
1499
- }) => HandleConnection$1[];
1500
1542
  };
1501
1543
  /**
1502
1544
  * Hook for accessing the flow instance: `{ flow, commands }` plus the
@@ -1506,7 +1548,7 @@ type UseSolidFlowReturn<NodeType extends Node = Node, EdgeType extends Edge = Ed
1506
1548
  * `const { flow, commands } = useSolidFlow()`.
1507
1549
  *
1508
1550
  * @public
1509
- * @returns the flow's read struct, write surface, and deprecated aliases
1551
+ * @returns the flow's read struct and write surface
1510
1552
  */
1511
1553
  declare function useSolidFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(): UseSolidFlowReturn<NodeType, EdgeType>;
1512
1554
  //#endregion
@@ -1519,6 +1561,30 @@ declare function useSolidFlow<NodeType extends Node = Node, EdgeType extends Edg
1519
1561
  */
1520
1562
  declare function useUpdateNodeInternals(): UpdateNodeInternals;
1521
1563
  //#endregion
1564
+ //#region src/contexts/edgeId.d.ts
1565
+ /**
1566
+ * Returns the id of the edge this component is rendered inside. Available
1567
+ * anywhere in a custom edge's subtree (provided by the edge wrapper), so
1568
+ * nested components — like a custom edge label — can learn their host edge
1569
+ * without prop drilling.
1570
+ *
1571
+ * @public
1572
+ * @returns a reactive accessor for the surrounding edge's id
1573
+ */
1574
+ declare function useEdgeId(): Accessor<string>;
1575
+ //#endregion
1576
+ //#region src/contexts/nodeId.d.ts
1577
+ /**
1578
+ * Returns the id of the node this component is rendered inside. Available
1579
+ * anywhere in a custom node's subtree (provided by the node wrapper), so
1580
+ * nested components — like a custom `Handle` — can learn their host node
1581
+ * without prop drilling.
1582
+ *
1583
+ * @public
1584
+ * @returns a reactive accessor for the surrounding node's id
1585
+ */
1586
+ declare function useNodeId(): Accessor<string>;
1587
+ //#endregion
1522
1588
  //#region src/plugins/background/types.d.ts
1523
1589
  /** Available background pattern styles. */
1524
1590
  type BackgroundVariant = "lines" | "dots" | "cross";
@@ -1592,9 +1658,39 @@ type ControlsProps = {
1592
1658
  /** Viewport control panel: zoom in/out, fit view, and interactivity lock. */
1593
1659
  declare const Controls: (props: ParentProps<ControlsProps>) => JSX.Element;
1594
1660
  //#endregion
1661
+ //#region src/plugins/minimap/MiniMapNode.d.ts
1662
+ /**
1663
+ * Props passed to a minimap node renderer — the default `MiniMapNode` or a
1664
+ * custom component supplied via the `MiniMap` `nodeComponent` prop. Position
1665
+ * and dimensions are in flow coordinates (the minimap svg's viewBox space).
1666
+ */
1667
+ type MiniMapNodeProps = {
1668
+ /** The id of the node this minimap representation stands for. */
1669
+ readonly id: string;
1670
+ readonly class?: string;
1671
+ readonly x: number;
1672
+ readonly y: number;
1673
+ readonly width?: number;
1674
+ readonly height?: number;
1675
+ readonly borderRadius?: number;
1676
+ readonly color?: string;
1677
+ readonly shapeRendering: JSX.RectSVGAttributes<SVGRectElement>["shape-rendering"];
1678
+ readonly strokeColor?: string;
1679
+ readonly strokeWidth?: number;
1680
+ readonly selected?: boolean;
1681
+ /** The node's own style; its background feeds the default fill fallback. */
1682
+ readonly style?: JSX.CSSProperties;
1683
+ /** Click handler (wired when the `MiniMap` has `onNodeClick`); call with the node id. */
1684
+ readonly onClick?: (event: MouseEvent, id: string) => void;
1685
+ };
1686
+ /** The default minimap node: a rounded rect. Custom `nodeComponent`s can wrap it. */
1687
+ declare const MiniMapNode: (props: MiniMapNodeProps) => JSX.Element;
1688
+ //#endregion
1595
1689
  //#region src/plugins/minimap/MiniMap.d.ts
1690
+ /** Derives a per-node minimap attribute (color, stroke, class) from the node. */
1596
1691
  type GetMiniMapNodeAttribute<NodeType extends Node> = (node: NodeType) => string;
1597
- type MiniMapProps<NodeType extends Node> = Omit<JSX.HTMLAttributes<HTMLDivElement>, "style"> & {
1692
+ /** Props for the `MiniMap` plugin. */
1693
+ type MiniMapProps<NodeType extends Node> = Omit<JSX.HTMLAttributes<HTMLDivElement>, "style" | "onClick"> & {
1598
1694
  /** Background color of minimap */
1599
1695
  readonly bgColor?: string;
1600
1696
  /** Color of nodes on the minimap */
@@ -1626,8 +1722,17 @@ type MiniMapProps<NodeType extends Node> = Omit<JSX.HTMLAttributes<HTMLDivElemen
1626
1722
  readonly width?: number;
1627
1723
  /** Height of minimap */
1628
1724
  readonly height?: number;
1725
+ /** Called when the minimap pane is clicked, with the position in flow coordinates. */
1726
+ readonly onClick?: (event: MouseEvent, position: XYPosition$1) => void;
1727
+ /** Called when a node on the minimap is clicked. */
1728
+ readonly onNodeClick?: (event: MouseEvent, node: NodeType) => void;
1629
1729
  readonly pannable?: boolean;
1630
1730
  readonly zoomable?: boolean;
1731
+ /**
1732
+ * Custom component rendering each node on the minimap (receives
1733
+ * {@link MiniMapNodeProps}); defaults to the built-in rounded rect.
1734
+ */
1735
+ readonly nodeComponent?: (props: MiniMapNodeProps) => JSX.Element;
1631
1736
  /** Invert the direction when panning the minimap viewport */
1632
1737
  readonly inversePan?: boolean;
1633
1738
  /** Step size for zooming in/out */
@@ -1824,4 +1929,4 @@ declare const getEdgeCenter: typeof getEdgeCenter$1;
1824
1929
  /** Returns the label center and offsets for a bezier edge. */
1825
1930
  declare const getBezierEdgeCenter: typeof getBezierEdgeCenter$1;
1826
1931
  //#endregion
1827
- export { Align, AriaLabelConfig, Background, type BackgroundProps, type BackgroundVariant, BaseEdge, BezierEdge, BezierEdgeInternal, type BezierEdgeProps, BezierPathOptions, Box, type BuiltInEdge, type BuiltInNode, type BuiltInNodeTypes, ColorMode, ColorModeClass, type Connection, ConnectionData, ConnectionLine, ConnectionLineComponentProps, ConnectionLineType, ConnectionMode, type ConnectionsRecord, ControlButton, type ControlLinePosition, type ControlPosition, Controls, type CoordinateExtent, type DefaultEdgeOptions, DefaultNode, DeleteEvents, Dimensions, type Edge, EdgeConnection, EdgeEvents, EdgeLabel, EdgeLabelRenderer, type EdgeMarker, EdgeMarkerType, type EdgeProps, EdgeReconnectAnchor, EdgeReconnectEvents, EdgeRenderer, EdgeToolbar, EdgeToolbarProps, type EdgeTypes, EdgeWrapper, type FitBounds, FitBoundsOptions, FitViewOptions, type FlowCommands, type FlowSelection, type FlowState, GetBezierPathParams, GetSmoothStepPathParams, GetStraightPathParams, GroupNode, Handle, type HandleConnection, InputNode, type InternalNode, IsValidConnection, KeyDefinition, KeyDefinitionObject, KeyModifier, Marker, MarkerDefinition, MarkerType, MiniMap, type Node, type NodeConnection, NodeEvents, NodeGraph, type NodeOrigin, type NodeProps, NodeRenderer, NodeResizer, NodeSelection, NodeSelectionEvents, NodeToolbar, NodeToolbarProps, type NodeTypes, NodeWrapper, OnBeforeDelete, OnBeforeEdgeConnect, OnBeforeReconnect, OnConnect, OnConnectEnd, OnConnectStart, OnConnectStartParams, OnDelete, OnEdgeConnect, OnEdgeCreate, OnError, type OnMove, OnMoveEnd, OnMoveStart, OnReconnect, OnReconnectEnd, OnReconnectStart, OnResize, OnResizeEnd, OnResizeStart, OnSelectionChange, OnSelectionDrag, OutputNode, PanOnScrollMode, Pane, PaneEvents, Panel, type PanelPosition, Position, ProOptions, Rect, ResizeControl, ResizeControlVariant, ResizeDragEvent, ResizeParams, ResizeParamsWithDirection, Selection, SelectionMode, SelectionRect, type SetCenter, SetCenterOptions, type SetViewport, ShortcutModifier, ShortcutModifierDefinition, type ShouldResize, SmoothStepEdge, SmoothStepEdgeInternal, type SmoothStepEdgeProps, SmoothStepPathOptions, SnapGrid, SolidFlow, type SolidFlowInitialProps, type SolidFlowProps, SolidFlowProvider, StepEdge, StepEdgeInternal, type StepEdgeProps, StraightEdge, StraightEdgeInternal, type StraightEdgeProps, Transform, UseSolidFlowReturn, Viewport, ViewportHelperFunctionOptions, ViewportPortal, type XYPosition, XYZPosition, Zoom, addEdge, connectionKey, createEdgeStore, createNodeStore, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, useColorMode, useConnection, useEdges, useHandleEdgeSelect, useInternalNode, useNodeConnections, useNodes, useNodesData, useNodesInitialized, useSolidFlow, useUpdateNodeInternals, useViewport, useViewportInitialized };
1932
+ export { Align, AriaLabelConfig, Background, type BackgroundProps, type BackgroundVariant, BaseEdge, BezierEdge, BezierEdgeInternal, type BezierEdgeProps, BezierPathOptions, Box, type BuiltInEdge, type BuiltInNode, type BuiltInNodeTypes, ColorMode, ColorModeClass, type Connection, ConnectionData, ConnectionLine, ConnectionLineComponentProps, ConnectionLineType, ConnectionMode, type ConnectionsRecord, ControlButton, type ControlLinePosition, type ControlPosition, Controls, type CoordinateExtent, type DefaultEdgeOptions, DefaultNode, DeleteEvents, Dimensions, type Edge, EdgeConnection, EdgeEvents, EdgeLabel, EdgeLabelRenderer, type EdgeMarker, EdgeMarkerType, type EdgeProps, EdgeReconnectAnchor, EdgeReconnectEvents, EdgeRenderer, EdgeToolbar, EdgeToolbarProps, type EdgeTypes, EdgeWrapper, type EdgesFor, type FitBounds, FitBoundsOptions, FitViewOptions, type FlowCommands, type FlowSelection, type FlowState, GetBezierPathParams, type GetMiniMapNodeAttribute, GetSmoothStepPathParams, GetStraightPathParams, GroupNode, Handle, type HandleConnection, InputNode, type InternalNode, IsValidConnection, KeyDefinition, KeyDefinitionObject, KeyModifier, Marker, MarkerDefinition, MarkerType, MiniMap, MiniMapNode, type MiniMapNodeProps, type MiniMapProps, type Node, type NodeConnection, NodeEvents, NodeGraph, type NodeOrigin, type NodeProps, NodeRenderer, NodeResizer, NodeSelection, NodeSelectionEvents, NodeToolbar, NodeToolbarProps, type NodeTypes, NodeWrapper, type NodesFor, OnBeforeDelete, OnBeforeEdgeConnect, OnBeforeReconnect, OnConnect, OnConnectEnd, OnConnectStart, OnConnectStartParams, OnDelete, OnEdgeConnect, OnEdgeCreate, OnError, type OnMove, OnMoveEnd, OnMoveStart, OnReconnect, OnReconnectEnd, OnReconnectStart, OnResize, OnResizeEnd, OnResizeStart, OnSelectionChange, OnSelectionDrag, OutputNode, PanOnScrollMode, Pane, PaneEvents, Panel, type PanelPosition, Position, ProOptions, Rect, ResizeControl, ResizeControlVariant, ResizeDragEvent, ResizeParams, ResizeParamsWithDirection, Selection, SelectionMode, SelectionRect, type SetCenter, SetCenterOptions, type SetViewport, ShortcutModifier, ShortcutModifierDefinition, type ShouldResize, SmoothStepEdge, SmoothStepEdgeInternal, type SmoothStepEdgeProps, SmoothStepPathOptions, SnapGrid, SolidFlow, type SolidFlowInitialProps, type SolidFlowProps, SolidFlowProvider, StepEdge, StepEdgeInternal, type StepEdgeProps, StraightEdge, StraightEdgeInternal, type StraightEdgeProps, Transform, UseSolidFlowReturn, Viewport, ViewportHelperFunctionOptions, ViewportPortal, type XYPosition, XYZPosition, Zoom, addEdge, connectionKey, createEdgeStore, createNodeStore, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, useColorMode, useConnection, useEdgeId, useEdges, useInternalNode, useNodeConnections, useNodeId, useNodes, useNodesData, useNodesInitialized, useSolidFlow, useUpdateNodeInternals, useViewport, useViewportInitialized };