@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.
- package/README.md +239 -209
- package/dist/index/index.d.ts +164 -59
- package/dist/index/index.js +238 -116
- package/dist/index/index.jsx +170 -73
- package/dist/styles/index.css +1 -1
- package/package.json +3 -1
package/dist/index/index.d.ts
CHANGED
|
@@ -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
|
|
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.
|
|
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
|
-
*
|
|
849
|
-
*
|
|
850
|
-
*
|
|
851
|
-
*
|
|
852
|
-
*
|
|
853
|
-
*
|
|
854
|
-
*
|
|
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
|
|
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/
|
|
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
|
|
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
|
-
|
|
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
|
|
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
|
|
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
|
-
|
|
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
|
|
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
|
|
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
|
|
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
|
-
*
|
|
1471
|
-
*
|
|
1472
|
-
*
|
|
1473
|
-
*
|
|
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
|
|
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
|
-
|
|
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,
|
|
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 };
|