@dschz/solid-flow 0.3.0-next.1 → 0.3.0-next.2

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.
@@ -1,6 +1,9 @@
1
1
  import { JSX } from "@solidjs/web";
2
+ import { Align, Align as Align$1, AriaLabelConfig, AriaLabelConfig as AriaLabelConfig$1, BezierPathOptions, BezierPathOptions as BezierPathOptions$1, Box, ColorMode, ColorMode as ColorMode$1, ColorModeClass, 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, EdgeBase, EdgeMarker, EdgeMarkerType, EdgePosition, EdgeToolbarBaseProps, FinalConnectionState, FitBounds, FitBoundsOptions, FitBoundsOptions as FitBoundsOptions$1, FitViewOptionsBase, GetBezierPathParams, GetSmoothStepPathParams, GetStraightPathParams, Handle as Handle$1, HandleConnection, HandleConnection as HandleConnection$1, HandleProps, HandleType, InternalNodeBase, IsValidConnection, MarkerProps, MarkerType, NodeBase, NodeConnection, NodeConnection as NodeConnection$1, NodeOrigin, NodeOrigin as NodeOrigin$1, NodeProps as NodeProps$1, OnBeforeDeleteBase, OnConnect, OnConnectEnd, OnConnectEnd as OnConnectEnd$1, OnConnectStart, OnConnectStart as OnConnectStart$1, OnConnectStartParams, OnError, OnError as OnError$1, OnMove, OnMove as OnMove$1, OnMoveEnd, OnMoveEnd as OnMoveEnd$1, OnMoveStart, OnMoveStart as OnMoveStart$1, OnReconnect, OnReconnect as OnReconnect$1, OnReconnectEnd, OnReconnectEnd as OnReconnectEnd$1, OnReconnectStart, OnReconnectStart as OnReconnectStart$1, OnResize, OnResize as OnResize$1, OnResizeEnd, OnResizeEnd as OnResizeEnd$1, OnResizeStart, OnResizeStart as OnResizeStart$1, OnSelectionDrag, PanOnScrollMode, PanOnScrollMode as PanOnScrollMode$1, PanelPosition, PanelPosition as PanelPosition$1, Position, Position as Position$1, ProOptions, ProOptions as ProOptions$1, Rect, Rect as Rect$1, ResizeControlVariant, ResizeControlVariant as ResizeControlVariant$1, ResizeDragEvent, ResizeParams, ResizeParamsWithDirection, SelectionMode, SelectionMode as SelectionMode$1, SelectionRect, SetCenter, SetCenterOptions, SetCenterOptions as SetCenterOptions$1, SetViewport, ShouldResize, ShouldResize as ShouldResize$1, SmoothStepPathOptions, SmoothStepPathOptions as SmoothStepPathOptions$1, SnapGrid, SnapGrid as SnapGrid$1, StepPathOptions, Transform, UpdateNodeInternals, Viewport, Viewport as Viewport$1, ViewportHelperFunctionOptions, ViewportHelperFunctionOptions as ViewportHelperFunctionOptions$1, XYPosition, XYPosition as XYPosition$1, XYZPosition, ZIndexMode, ZoomInOut, addEdge, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds } from "@xyflow/system";
2
3
  import { Accessor, ParentComponent, ParentProps, Store, StoreSetter } from "solid-js";
3
- import { Align, Align as Align$1, AriaLabelConfig, AriaLabelConfig as AriaLabelConfig$1, BezierPathOptions, BezierPathOptions as BezierPathOptions$1, Box, ColorMode, ColorMode as ColorMode$1, ColorModeClass, 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, EdgeBase, EdgeMarker, EdgeMarkerType, EdgePosition, EdgeToolbarBaseProps, FinalConnectionState, FitBounds, FitBoundsOptions, FitBoundsOptions as FitBoundsOptions$1, FitViewOptionsBase, GetBezierPathParams, GetSmoothStepPathParams, GetStraightPathParams, Handle as Handle$1, HandleConnection, HandleConnection as HandleConnection$1, HandleProps, HandleType, InternalNodeBase, IsValidConnection, MarkerProps, MarkerType, NodeBase, NodeConnection, NodeConnection as NodeConnection$1, NodeOrigin, NodeOrigin as NodeOrigin$1, NodeProps as NodeProps$1, OnBeforeDeleteBase, OnConnect, OnConnectEnd, OnConnectEnd as OnConnectEnd$1, OnConnectStart, OnConnectStart as OnConnectStart$1, OnConnectStartParams, OnError, OnError as OnError$1, OnMove, OnMove as OnMove$1, OnMoveEnd, OnMoveEnd as OnMoveEnd$1, OnMoveStart, OnMoveStart as OnMoveStart$1, OnReconnect, OnReconnect as OnReconnect$1, OnReconnectEnd, OnReconnectEnd as OnReconnectEnd$1, OnReconnectStart, OnReconnectStart as OnReconnectStart$1, OnResize, OnResize as OnResize$1, OnResizeEnd, OnResizeEnd as OnResizeEnd$1, OnResizeStart, OnResizeStart as OnResizeStart$1, OnSelectionDrag, PanOnScrollMode, PanOnScrollMode as PanOnScrollMode$1, PanelPosition, PanelPosition as PanelPosition$1, Position as Position$1, Position as Position$2, ProOptions, ProOptions as ProOptions$1, Rect, Rect as Rect$1, ResizeControlVariant, ResizeControlVariant as ResizeControlVariant$1, ResizeDragEvent, ResizeParams, ResizeParamsWithDirection, SelectionMode, SelectionMode as SelectionMode$1, SelectionRect, SetCenter, SetCenterOptions, SetCenterOptions as SetCenterOptions$1, SetViewport, ShouldResize, ShouldResize as ShouldResize$1, SmoothStepPathOptions, SmoothStepPathOptions as SmoothStepPathOptions$1, SnapGrid, SnapGrid as SnapGrid$1, StepPathOptions, Transform, UpdateNodeInternals, Viewport, Viewport as Viewport$1, ViewportHelperFunctionOptions, ViewportHelperFunctionOptions as ViewportHelperFunctionOptions$1, XYPosition, XYPosition as XYPosition$1, XYZPosition, ZIndexMode, ZoomInOut, addEdge, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds } from "@xyflow/system";
4
+ //#region src/types/custom.d.ts
5
+ type UnknownStruct = Record<string, unknown>;
6
+ //#endregion
4
7
  //#region src/types/node.d.ts
5
8
  /**
6
9
  * The node data structure that gets used for internal nodes.
@@ -50,9 +53,6 @@ type BuiltInNodeTypes = {
50
53
  group: (props: NodeProps<Record<string, never>, "group">) => JSX.Element;
51
54
  };
52
55
  //#endregion
53
- //#region src/types/custom.d.ts
54
- type UnknownStruct = Record<string, unknown>;
55
- //#endregion
56
56
  //#region src/types/edge.d.ts
57
57
  /**
58
58
  * An `Edge` is the complete description with everything Svelte Flow needs to know in order to
@@ -244,9 +244,31 @@ type EdgeReconnectEvents<EdgeType extends Edge = Edge> = {
244
244
  type OnSelectionDrag$1<NodeType extends Node = Node> = (event: MouseEvent, nodes: NodeType[]) => void;
245
245
  //#endregion
246
246
  //#region src/types/general.d.ts
247
- type Position$3 = `${Position$2}`;
247
+ type Position$2 = `${Position$1}`;
248
248
  type ConnectionMode$2 = `${ConnectionMode$1}`;
249
- type ConnectionLineType$3 = `${ConnectionLineType$1}`;
249
+ type ConnectionLineType$2 = `${ConnectionLineType$1}`;
250
+ /**
251
+ * If you want to render a custom component for connection lines, you can set the
252
+ * `connectionLineComponent` prop on the [`<SolidFlow />`](/api-reference/react-flow#connection-connectionLineComponent)
253
+ * component. The `ConnectionLineComponentProps` are passed to your custom component.
254
+ *
255
+ * @public
256
+ */
257
+ type ConnectionLineComponentProps<NodeType extends Node = Node> = {
258
+ readonly connectionLineStyle?: JSX.CSSProperties;
259
+ readonly connectionLineType: ConnectionLineType$2;
260
+ readonly fromNode: InternalNode<NodeType>;
261
+ readonly fromHandle: Handle$1;
262
+ readonly fromX: number;
263
+ readonly fromY: number;
264
+ readonly toX: number;
265
+ readonly toY: number;
266
+ readonly fromPosition: Position$2;
267
+ readonly toPosition: Position$2;
268
+ readonly connectionStatus: "valid" | "invalid" | null;
269
+ readonly toNode: InternalNode<NodeType> | null;
270
+ readonly toHandle: Handle$1 | null;
271
+ };
250
272
  type SelectionMode$2 = `${SelectionMode$1}`;
251
273
  type PanOnScrollMode$2 = `${PanOnScrollMode$1}`;
252
274
  type ResizeControlVariant$2 = `${ResizeControlVariant$1}`;
@@ -289,6 +311,15 @@ type NodeGraph<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
289
311
  };
290
312
  type OnEdgeCreate<EdgeType extends Edge = Edge> = (connection: Connection$1) => EdgeType | Connection$1;
291
313
  //#endregion
314
+ //#region src/components/connection/ConnectionLine.d.ts
315
+ type ConnectionLineProps<NodeType extends Node = Node> = {
316
+ readonly style: JSX.CSSProperties;
317
+ readonly type: ConnectionLineType$2;
318
+ readonly component: (props: ConnectionLineComponentProps<NodeType>) => JSX.Element;
319
+ readonly containerStyle: string | JSX.CSSProperties;
320
+ };
321
+ declare const ConnectionLine: <NodeType extends Node = Node>(props: ParentProps<Partial<ConnectionLineProps<NodeType>>>) => JSX.Element;
322
+ //#endregion
292
323
  //#region src/components/container/EdgeRenderer.d.ts
293
324
  type EdgeRendererProps<EdgeType extends Edge = Edge> = EdgeEvents<EdgeType> & {
294
325
  readonly defaultEdgeOptions?: DefaultEdgeOptions;
@@ -348,50 +379,16 @@ type ZoomProps = {
348
379
  };
349
380
  declare const Zoom: (props: ParentProps<ZoomProps>) => JSX.Element;
350
381
  //#endregion
351
- //#region src/components/graph/connection/types.d.ts
352
- type ConnectionLineType$2 = `${ConnectionLineType$1}`;
353
- /**
354
- * If you want to render a custom component for connection lines, you can set the
355
- * `connectionLineComponent` prop on the [`<SolidFlow />`](/api-reference/react-flow#connection-connectionLineComponent)
356
- * component. The `ConnectionLineComponentProps` are passed to your custom component.
357
- *
358
- * @public
359
- */
360
- type ConnectionLineComponentProps<NodeType extends Node = Node> = {
361
- readonly connectionLineStyle?: JSX.CSSProperties;
362
- readonly connectionLineType: ConnectionLineType$2;
363
- readonly fromNode: InternalNode<NodeType>;
364
- readonly fromHandle: Handle$1;
365
- readonly fromX: number;
366
- readonly fromY: number;
367
- readonly toX: number;
368
- readonly toY: number;
369
- readonly fromPosition: Position$3;
370
- readonly toPosition: Position$3;
371
- readonly connectionStatus: "valid" | "invalid" | null;
372
- readonly toNode: InternalNode<NodeType> | null;
373
- readonly toHandle: Handle$1 | null;
374
- };
375
- //#endregion
376
- //#region src/components/graph/connection/ConnectionLine.d.ts
377
- type ConnectionLineProps<NodeType extends Node = Node> = {
378
- readonly style: JSX.CSSProperties;
379
- readonly type: ConnectionLineType$2;
380
- readonly component: (props: ConnectionLineComponentProps<NodeType>) => JSX.Element;
381
- readonly containerStyle: string | JSX.CSSProperties;
382
- };
383
- declare const ConnectionLine: <NodeType extends Node = Node>(props: ParentProps<Partial<ConnectionLineProps<NodeType>>>) => JSX.Element;
384
- //#endregion
385
- //#region src/components/graph/edge/BaseEdge.d.ts
382
+ //#region src/components/edge/BaseEdge.d.ts
386
383
  declare const BaseEdge: (props: ParentProps<BaseEdgeProps>) => JSX.Element;
387
384
  //#endregion
388
- //#region src/components/graph/edge/BezierEdge.d.ts
385
+ //#region src/components/edge/BezierEdge.d.ts
389
386
  declare const BezierEdge: (props: BezierEdgeProps) => JSX.Element;
390
387
  //#endregion
391
- //#region src/components/graph/edge/BezierEdgeInternal.d.ts
388
+ //#region src/components/edge/BezierEdgeInternal.d.ts
392
389
  declare const BezierEdgeInternal: (props: BezierEdgeProps) => JSX.Element;
393
390
  //#endregion
394
- //#region src/components/graph/edge/EdgeLabel.d.ts
391
+ //#region src/components/edge/EdgeLabel.d.ts
395
392
  type EdgeLabelProps = {
396
393
  readonly x?: number;
397
394
  readonly y?: number;
@@ -403,10 +400,10 @@ type EdgeLabelProps = {
403
400
  } & Omit<JSX.HTMLAttributes<HTMLDivElement>, "style">;
404
401
  declare const EdgeLabel: (props: ParentProps<EdgeLabelProps>) => JSX.Element;
405
402
  //#endregion
406
- //#region src/components/graph/edge/EdgeLabelRenderer.d.ts
403
+ //#region src/components/edge/EdgeLabelRenderer.d.ts
407
404
  declare const EdgeLabelRenderer: (props: ParentProps) => JSX.Element;
408
405
  //#endregion
409
- //#region src/components/graph/edge/EdgeReconnectAnchor.d.ts
406
+ //#region src/components/edge/EdgeReconnectAnchor.d.ts
410
407
  type EdgeReconnectAnchorProps = {
411
408
  readonly type: HandleType;
412
409
  readonly class?: string;
@@ -417,33 +414,33 @@ type EdgeReconnectAnchorProps = {
417
414
  } & Omit<JSX.HTMLAttributes<HTMLDivElement>, "style">;
418
415
  declare const EdgeReconnectAnchor: (props: ParentProps<EdgeReconnectAnchorProps>) => JSX.Element;
419
416
  //#endregion
420
- //#region src/components/graph/edge/EdgeWrapper.d.ts
417
+ //#region src/components/edge/EdgeWrapper.d.ts
421
418
  type EdgeWrapperProps<EdgeType extends Edge = Edge> = EdgeEvents<EdgeType> & {
422
419
  readonly edgeId: string;
423
420
  };
424
421
  declare const EdgeWrapper: <NodeType extends Node = Node, EdgeType extends Edge = Edge>(props: EdgeWrapperProps<EdgeType>) => JSX.Element;
425
422
  //#endregion
426
- //#region src/components/graph/edge/SmoothStepEdge.d.ts
423
+ //#region src/components/edge/SmoothStepEdge.d.ts
427
424
  declare const SmoothStepEdge: (props: SmoothStepEdgeProps) => JSX.Element;
428
425
  //#endregion
429
- //#region src/components/graph/edge/SmoothStepEdgeInternal.d.ts
426
+ //#region src/components/edge/SmoothStepEdgeInternal.d.ts
430
427
  declare const SmoothStepEdgeInternal: (props: SmoothStepEdgeProps) => JSX.Element;
431
428
  //#endregion
432
- //#region src/components/graph/edge/StepEdge.d.ts
429
+ //#region src/components/edge/StepEdge.d.ts
433
430
  declare const StepEdge: (props: StepEdgeProps) => JSX.Element;
434
431
  //#endregion
435
- //#region src/components/graph/edge/StepEdgeInternal.d.ts
432
+ //#region src/components/edge/StepEdgeInternal.d.ts
436
433
  declare const StepEdgeInternal: (props: StepEdgeProps) => JSX.Element;
437
434
  //#endregion
438
- //#region src/components/graph/edge/StraightEdge.d.ts
435
+ //#region src/components/edge/StraightEdge.d.ts
439
436
  declare const StraightEdge: (props: StraightEdgeProps) => JSX.Element;
440
437
  //#endregion
441
- //#region src/components/graph/edge/StraightEdgeInternal.d.ts
438
+ //#region src/components/edge/StraightEdgeInternal.d.ts
442
439
  declare const StraightEdgeInternal: (props: Omit<StraightEdgeProps, "sourcePosition" | "targetPosition">) => JSX.Element;
443
440
  //#endregion
444
- //#region src/components/graph/handle/Handle.d.ts
441
+ //#region src/components/handle/Handle.d.ts
445
442
  type HandleProps$1 = Omit<HandleProps, "position"> & {
446
- readonly position: Position$3;
443
+ readonly position: Position$2;
447
444
  readonly class?: string;
448
445
  readonly style?: JSX.CSSProperties;
449
446
  readonly onConnect?: (connections: Connection$1[]) => void;
@@ -451,30 +448,30 @@ type HandleProps$1 = Omit<HandleProps, "position"> & {
451
448
  } & Omit<JSX.HTMLAttributes<HTMLDivElement>, "style">;
452
449
  declare const Handle: <NodeType extends Node = Node, EdgeType extends Edge = Edge>(props: ParentProps<HandleProps$1>) => JSX.Element;
453
450
  //#endregion
454
- //#region src/components/graph/marker/Marker.d.ts
451
+ //#region src/components/marker/Marker.d.ts
455
452
  type MarkerProps$1 = MarkerProps & {
456
453
  readonly markerUnits?: "strokeWidth" | "userSpaceOnUse";
457
454
  readonly strokeWidth?: number;
458
455
  };
459
456
  declare const Marker: (props: MarkerProps$1) => JSX.Element;
460
457
  //#endregion
461
- //#region src/components/graph/marker/MarkerDefinition.d.ts
458
+ //#region src/components/marker/MarkerDefinition.d.ts
462
459
  declare const MarkerDefinition: () => JSX.Element;
463
460
  //#endregion
464
- //#region src/components/graph/node/DefaultNode.d.ts
461
+ //#region src/components/node/DefaultNode.d.ts
465
462
  declare const DefaultNode: (props: NodeProps<{
466
463
  label: string;
467
464
  }, "default">) => JSX.Element;
468
465
  //#endregion
469
- //#region src/components/graph/node/GroupNode.d.ts
466
+ //#region src/components/node/GroupNode.d.ts
470
467
  declare const GroupNode: (props: NodeProps<Record<string, never>>) => JSX.Element;
471
468
  //#endregion
472
- //#region src/components/graph/node/InputNode.d.ts
469
+ //#region src/components/node/InputNode.d.ts
473
470
  declare const InputNode: (props: NodeProps<{
474
471
  label: string;
475
472
  }>) => JSX.Element;
476
473
  //#endregion
477
- //#region src/components/graph/node/NodeWrapper.d.ts
474
+ //#region src/components/node/NodeWrapper.d.ts
478
475
  type NodeWrapperProps<NodeType extends Node = Node> = NodeEvents<NodeType> & {
479
476
  readonly nodeId: string;
480
477
  readonly resizeObserver: ResizeObserver | undefined;
@@ -482,261 +479,66 @@ type NodeWrapperProps<NodeType extends Node = Node> = NodeEvents<NodeType> & {
482
479
  };
483
480
  declare const NodeWrapper: <NodeType extends Node = Node>(props: NodeWrapperProps<NodeType>) => JSX.Element;
484
481
  //#endregion
485
- //#region src/components/graph/node/OutputNode.d.ts
482
+ //#region src/components/node/OutputNode.d.ts
486
483
  declare const OutputNode: (props: NodeProps<{
487
484
  label: string;
488
485
  }>) => JSX.Element;
489
486
  //#endregion
490
- //#region src/components/graph/plugins/background/types.d.ts
491
- type BackgroundVariant = "lines" | "dots" | "cross";
487
+ //#region src/components/selection/NodeSelection.d.ts
488
+ type NodeSelectionProps<NodeType extends Node = Node> = NodeSelectionEvents<NodeType> & Pick<NodeEvents<NodeType>, "onNodeDrag" | "onNodeDragStart" | "onNodeDragStop">;
489
+ declare const NodeSelection: <NodeType extends Node = Node>(props: NodeSelectionProps<NodeType>) => JSX.Element;
492
490
  //#endregion
493
- //#region src/components/graph/plugins/background/Background.d.ts
494
- type BackgroundProps = {
495
- readonly id?: string;
496
- /** Variant of the pattern
497
- * @example 'lines', 'dots', 'cross'
498
- */
499
- readonly variant?: BackgroundVariant;
500
- /** Color of the background */
501
- readonly bgColor?: string;
502
- /** Color of the pattern */
503
- readonly patternColor?: string;
504
- /** Class applied to the pattern */
505
- readonly patternClass?: string;
506
- /** Class applied to the container */
507
- readonly class?: string;
508
- /** Gap between repetitions of the pattern */
509
- readonly gap?: number | [number, number];
510
- /** Size of a single pattern element */
511
- readonly size?: number;
512
- /** Line width of the Line pattern */
513
- readonly lineWidth?: number;
514
- /** Style applied to the container */
515
- readonly style?: JSX.CSSProperties;
491
+ //#region src/components/selection/Selection.d.ts
492
+ type SelectionProps = {
493
+ readonly x?: number;
494
+ readonly y?: number;
495
+ readonly width?: number | string;
496
+ readonly height?: number | string;
497
+ readonly isVisible?: boolean;
516
498
  };
517
- declare const Background: (props: BackgroundProps) => JSX.Element;
499
+ declare const Selection: (props: SelectionProps) => JSX.Element;
518
500
  //#endregion
519
- //#region src/components/graph/plugins/controls/ControlButton.d.ts
520
- type ControlButtonProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & {
521
- readonly class?: string;
522
- readonly bgColor?: string;
523
- readonly bgColorHover?: string;
524
- readonly color?: string;
525
- readonly colorHover?: string;
526
- readonly borderColor?: string;
527
- readonly onClick?: JSX.EventHandler<HTMLButtonElement, MouseEvent>;
501
+ //#region src/core/flowProps.d.ts
502
+ type SolidFlowInitialProps = {
503
+ readonly initialNodes: Node[];
504
+ readonly initialEdges: Edge[];
505
+ readonly initialWidth: number;
506
+ readonly initialHeight: number;
507
+ readonly fitView: boolean;
508
+ readonly nodeOrigin: NodeOrigin$1;
528
509
  };
529
- declare const ControlButton: (props: ParentProps<ControlButtonProps>) => JSX.Element;
530
- //#endregion
531
- //#region src/components/graph/plugins/controls/Controls.d.ts
532
- type ControlsOrientation = "horizontal" | "vertical";
533
- type ControlsProps = {
534
- /** Position of the controls on the pane
535
- * @example PanelPosition.TopLeft, PanelPosition.TopRight,
536
- * PanelPosition.BottomLeft, PanelPosition.BottomRight
537
- */
538
- readonly position?: PanelPosition$1;
539
- /** Show button for zoom in/out */
540
- readonly showZoom?: boolean;
541
- /** Show button for fit view */
542
- readonly showFitView?: boolean;
543
- /** Show button for toggling interactivity */
544
- readonly showLock?: boolean;
545
- readonly buttonBgColor?: string;
546
- readonly buttonBgColorHover?: string;
547
- readonly buttonColor?: string;
548
- readonly buttonColorHover?: string;
549
- readonly buttonBorderColor?: string;
550
- readonly style?: JSX.CSSProperties;
551
- readonly orientation?: ControlsOrientation;
552
- readonly fitViewOptions?: FitViewOptions;
553
- readonly beforeControls?: JSX.Element;
554
- readonly afterControls?: JSX.Element;
555
- } & Omit<JSX.HTMLAttributes<HTMLDivElement>, "style">;
556
- declare const Controls: (props: ParentProps<ControlsProps>) => JSX.Element;
557
- //#endregion
558
- //#region src/components/graph/plugins/EdgeToolbar.d.ts
559
- type EdgeToolbarProps = EdgeToolbarBaseProps & {
560
- /** If `true`, clicking the toolbar selects the edge it belongs to. */
561
- readonly selectEdgeOnClick?: boolean;
562
- } & Omit<JSX.HTMLAttributes<HTMLDivElement>, "style">;
563
- /**
564
- * The `<EdgeToolbar />` component renders a toolbar or tooltip for an edge.
565
- * It must be used inside a custom edge component. By default it is only
566
- * visible when the edge is selected; pass `isVisible` to control it manually.
567
- *
568
- * The toolbar does not scale with the viewport so that its content is always legible.
569
- */
570
- declare const EdgeToolbar: (props: ParentProps<EdgeToolbarProps>) => JSX.Element;
571
- //#endregion
572
- //#region src/components/graph/plugins/minimap/MiniMap.d.ts
573
- type GetMiniMapNodeAttribute<NodeType extends Node> = (node: NodeType) => string;
574
- type MiniMapProps<NodeType extends Node> = Omit<JSX.HTMLAttributes<HTMLDivElement>, "style"> & {
575
- /** Background color of minimap */
576
- readonly bgColor?: string;
577
- /** Color of nodes on the minimap */
578
- readonly nodeColor?: string | GetMiniMapNodeAttribute<NodeType>;
579
- /** Stroke color of nodes on the minimap */
580
- readonly nodeStrokeColor?: string | GetMiniMapNodeAttribute<NodeType>;
581
- /** Class applied to nodes on the minimap */
582
- readonly nodeClass?: string | GetMiniMapNodeAttribute<NodeType>;
583
- /** Border radius of nodes on the minimap */
584
- readonly nodeBorderRadius?: number;
585
- /** Stroke width of nodes on the minimap */
586
- readonly nodeStrokeWidth?: number;
587
- /** Color of the mask representing viewport */
588
- readonly maskColor?: string;
589
- /** Stroke color of the mask representing viewport */
590
- readonly maskStrokeColor?: string;
591
- /** Stroke width of the mask representing viewport */
592
- readonly maskStrokeWidth?: number;
593
- /** Position of the minimap on the pane
594
- * @example PanelPosition.TopLeft, PanelPosition.TopRight,
595
- * PanelPosition.BottomLeft, PanelPosition.BottomRight
510
+ type SolidFlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = NodeEvents<NodeType> & NodeSelectionEvents<NodeType> & EdgeEvents<EdgeType> & DeleteEvents<NodeType, EdgeType> & PaneEvents & {
511
+ /**
512
+ * The id of the flow. This is necessary if you want to render multiple flows.
596
513
  */
597
- readonly position?: PanelPosition$1;
598
- /** Style applied to container */
599
- readonly style?: JSX.CSSProperties;
600
- /** The aria-label applied to container */
601
- readonly ariaLabel?: string | null;
602
- /** Width of minimap */
514
+ readonly id?: string;
515
+ /** Sets a fixed width for the flow */
603
516
  readonly width?: number;
604
- /** Height of minimap */
517
+ /** Sets a fixed height for the flow */
605
518
  readonly height?: number;
606
- readonly pannable?: boolean;
607
- readonly zoomable?: boolean;
608
- /** Invert the direction when panning the minimap viewport */
609
- readonly inversePan?: boolean;
610
- /** Step size for zooming in/out */
611
- readonly zoomStep?: number;
612
- };
613
- declare const MiniMap: <NodeType extends Node>(props: ParentProps<Partial<MiniMapProps<NodeType>>>) => JSX.Element;
614
- //#endregion
615
- //#region src/components/graph/plugins/nodeResizer/NodeResizer.d.ts
616
- type NodeResizerProps = {
617
- /** Id of the node it is resizing
618
- * @remarks optional if used inside custom node
519
+ /**
520
+ * An store of nodes to render in a flow.
521
+ * @example
522
+ * const [nodes] = createStore([
523
+ * {
524
+ * id: 'node-1',
525
+ * type: 'input',
526
+ * data: { label: 'Node 1' },
527
+ * position: { x: 250, y: 50 }
528
+ * }
529
+ * ]);
619
530
  */
620
- readonly nodeId?: string;
621
- /** Class applied to handle */
622
- readonly handleClass?: string;
623
- /** Style applied to handle */
624
- readonly handleStyle?: JSX.CSSProperties;
625
- /** Class applied to line */
626
- readonly lineClass?: string;
627
- /** Style applied to line */
628
- readonly lineStyle?: JSX.CSSProperties;
629
- /** Are the controls visible */
630
- readonly visible?: boolean;
631
- /** Minimum width of node */
632
- readonly minWidth?: number;
633
- /** Minimum height of node */
634
- readonly minHeight?: number;
635
- /** Maximum width of node */
636
- readonly maxWidth?: number;
637
- /** Maximum height of node */
638
- readonly maxHeight?: number;
639
- /** Keep aspect ratio when resizing */
640
- readonly keepAspectRatio?: boolean;
641
- /** Automatically scale the node when resizing */
642
- readonly autoScale?: boolean;
643
- /** Callback to determine if node should resize */
644
- readonly shouldResize?: ShouldResize$1;
645
- /** Callback called when resizing starts */
646
- readonly onResizeStart?: OnResizeStart$1;
647
- /** Callback called when resizing */
648
- readonly onResize?: OnResize$1;
649
- /** Callback called when resizing ends */
650
- readonly onResizeEnd?: OnResizeEnd$1;
651
- } & Omit<JSX.HTMLAttributes<HTMLDivElement>, "onResize" | "style">;
652
- declare const NodeResizer: (props: Partial<NodeResizerProps>) => JSX.Element;
653
- //#endregion
654
- //#region src/components/graph/plugins/nodeResizer/ResizeControl.d.ts
655
- type NodeResizerSubProps = Pick<NodeResizerProps, "nodeId" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "autoScale" | "keepAspectRatio" | "shouldResize" | "onResizeStart" | "onResize" | "onResizeEnd">;
656
- type ResizeControlProps = NodeResizerSubProps & {
657
- /** Position of control
658
- * @example ControlPosition.TopLeft, ControlPosition.TopRight,
659
- * ControlPosition.BottomLeft, ControlPosition.BottomRight
660
- */
661
- readonly position?: ControlPosition$1;
662
- /** Variant of control
663
- * @example ResizeControlVariant.Handle, ResizeControlVariant.Line
664
- */
665
- readonly variant?: ResizeControlVariant$2;
666
- readonly color?: string;
667
- readonly style?: JSX.CSSProperties;
668
- } & Omit<JSX.HTMLAttributes<HTMLDivElement>, "onResize" | "style">;
669
- declare const ResizeControl: <NodeType extends Node = Node>(props: ParentProps<ResizeControlProps>) => JSX.Element;
670
- //#endregion
671
- //#region src/components/graph/plugins/NodeToolbar.d.ts
672
- type NodeToolbarProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "style"> & {
673
- /** The id of the node, or array of ids the toolbar should be displayed at */
674
- readonly nodeId: string | string[];
675
- /** Position of the toolbar relative to the node
676
- * @example Position.TopLeft, Position.TopRight,
677
- * Position.BottomLeft, Position.BottomRight
678
- */
679
- readonly position: Position$3;
680
- /** Align the toolbar relative to the node
681
- * @example Align.Start, Align.Center, Align.End
682
- */
683
- readonly align: Align$1;
684
- /** Offset the toolbar from the node */
685
- readonly offset: number;
686
- /** If true, node toolbar is visible even if node is not selected */
687
- readonly isVisible: boolean;
688
- /** Style of the toolbar */
689
- readonly style: Omit<JSX.CSSProperties, "z-index" | "position" | "transform">;
690
- };
691
- declare const NodeToolbar: ParentComponent<Partial<NodeToolbarProps>>;
692
- //#endregion
693
- //#region src/components/graph/selection/NodeSelection.d.ts
694
- type NodeSelectionProps<NodeType extends Node = Node> = NodeSelectionEvents<NodeType> & Pick<NodeEvents<NodeType>, "onNodeDrag" | "onNodeDragStart" | "onNodeDragStop">;
695
- declare const NodeSelection: <NodeType extends Node = Node>(props: NodeSelectionProps<NodeType>) => JSX.Element;
696
- //#endregion
697
- //#region src/components/graph/selection/Selection.d.ts
698
- type SelectionProps = {
699
- readonly x?: number;
700
- readonly y?: number;
701
- readonly width?: number | string;
702
- readonly height?: number | string;
703
- readonly isVisible?: boolean;
704
- };
705
- declare const Selection: (props: SelectionProps) => JSX.Element;
706
- //#endregion
707
- //#region src/components/SolidFlow/types.d.ts
708
- type SolidFlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = NodeEvents<NodeType> & NodeSelectionEvents<NodeType> & EdgeEvents<EdgeType> & DeleteEvents<NodeType, EdgeType> & PaneEvents & {
709
- /**
710
- * The id of the flow. This is necessary if you want to render multiple flows.
711
- */
712
- readonly id?: string;
713
- /** Sets a fixed width for the flow */
714
- readonly width?: number;
715
- /** Sets a fixed height for the flow */
716
- readonly height?: number;
717
- /**
718
- * An store of nodes to render in a flow.
719
- * @example
720
- * const [nodes] = createStore([
721
- * {
722
- * id: 'node-1',
723
- * type: 'input',
724
- * data: { label: 'Node 1' },
725
- * position: { x: 250, y: 50 }
726
- * }
727
- * ]);
728
- */
729
- readonly nodes?: Store<NodeType[]>;
730
- /**
731
- * An store of edges to render in a flow.
732
- * @example
733
- * const [edges] = createStore([
734
- * {
735
- * id: 'edge-1-2',
736
- * source: 'node-1',
737
- * target: 'node-2',
738
- * }
739
- * ]);
531
+ readonly nodes?: Store<NodeType[]>;
532
+ /**
533
+ * An store of edges to render in a flow.
534
+ * @example
535
+ * const [edges] = createStore([
536
+ * {
537
+ * id: 'edge-1-2',
538
+ * source: 'node-1',
539
+ * target: 'node-2',
540
+ * }
541
+ * ]);
740
542
  */
741
543
  readonly edges?: Store<EdgeType[]>;
742
544
  /**
@@ -981,9 +783,13 @@ type SolidFlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge>
981
783
  */
982
784
  readonly selectionOnDrag?: boolean;
983
785
  /**
984
- * You can enable this optimization to instruct Solid Flow to only render nodes and edges that would be visible in the viewport.
985
- * This might improve performance when you have a large number of nodes and edges but also adds an overhead.
986
- * @default false
786
+ * Viewport culling: elements outside the (overscanned) viewport are hidden
787
+ * with CSS (`visibility: hidden` + `pointer-events: none`). Everything
788
+ * stays mounted — custom nodes keep their DOM state off-screen, and
789
+ * measurement/fitView/minimap are unaffected. Selected elements are never
790
+ * culled. Set to `false` to keep every element visible; note that culled
791
+ * elements leave the accessibility tree and tab order while off-screen.
792
+ * @default true
987
793
  */
988
794
  readonly onlyRenderVisibleElements?: boolean;
989
795
  /**
@@ -1023,7 +829,7 @@ type SolidFlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge>
1023
829
  * @example 'straight' | 'default' | 'step' | 'smoothstep' | 'bezier'
1024
830
  * @example ConnectionLineType.Straight | ConnectionLineType.Default | ConnectionLineType.Step | ConnectionLineType.SmoothStep | ConnectionLineType.Bezier
1025
831
  */
1026
- readonly connectionLineType?: ConnectionLineType$3;
832
+ readonly connectionLineType?: ConnectionLineType$2;
1027
833
  /** Enabling this option will raise the z-index of nodes when they are selected.
1028
834
  * @default true
1029
835
  */
@@ -1161,6 +967,91 @@ declare const SolidFlow: <NodeType extends Node = Node, EdgeType extends Edge =
1161
967
  //#region src/components/SolidFlow/provider.d.ts
1162
968
  declare const SolidFlowProvider: <NodeType extends Node = Node, EdgeType extends Edge = Edge>(props: ParentProps<SolidFlowProps<NodeType, EdgeType>>) => JSX.Element;
1163
969
  //#endregion
970
+ //#region src/core/createEdgeStore.d.ts
971
+ type ExtractEdgeInfo<T> = T extends ((props: EdgeProps<infer TData, infer TType>) => unknown) ? {
972
+ data: TData;
973
+ type: TType;
974
+ } : never;
975
+ type AllEdgeTypes<TUserEdgeTypes extends EdgeTypes> = TUserEdgeTypes extends Record<string, never> ? BuiltInEdgeTypes : BuiltInEdgeTypes & TUserEdgeTypes;
976
+ type EdgesInput<TUserEdgeTypes extends EdgeTypes> = { [K in keyof AllEdgeTypes<TUserEdgeTypes>]: Edge<ExtractEdgeInfo<AllEdgeTypes<TUserEdgeTypes>[K]>["data"], ExtractEdgeInfo<AllEdgeTypes<TUserEdgeTypes>[K]>["type"]>; }[keyof AllEdgeTypes<TUserEdgeTypes>];
977
+ /**
978
+ * Creates a type-safe reactive store of edges for use in Solid Flow.
979
+ *
980
+ * This utility function provides full type safety and autocomplete for creating edges,
981
+ * combining both built-in edge types (default, straight, step, smoothstep) and custom user-defined
982
+ * edge types. When a specific edge type is selected, TypeScript automatically infers the
983
+ * required data structure and validates the edge configuration.
984
+ *
985
+ * @template TUserEdgeTypes - The user's custom edge types map (optional)
986
+ * @param edges - Array of edge configurations to create
987
+ * @returns A SolidJS store tuple [store, setStore] with properly typed Edge objects
988
+ *
989
+ * @example
990
+ * ```typescript
991
+ * // Using only built-in edge types (no generic parameter needed)
992
+ * const [builtInEdges, setBuiltInEdges] = createEdgeStore([
993
+ * {
994
+ * id: "1",
995
+ * source: "1",
996
+ * target: "2",
997
+ * type: "default",
998
+ * data: { label: "Start" }
999
+ * },
1000
+ * {
1001
+ * id: "2",
1002
+ * source: "2",
1003
+ * target: "3",
1004
+ * type: "default",
1005
+ * data: { label: "Process" }
1006
+ * }
1007
+ * ]);
1008
+ * ```
1009
+ *
1010
+ * @example
1011
+ * ```typescript
1012
+ * // Using custom edge types (requires generic parameter)
1013
+ * const customEdgeTypes = {
1014
+ * textEdge: (props: EdgeProps<{ content: string }, "textEdge">) =>
1015
+ * <div>{props.data.content}</div>,
1016
+ * numberEdge: (props: EdgeProps<{ value: number }, "numberEdge">) =>
1017
+ * <div>{props.data.value}</div>
1018
+ * } satisfies EdgeTypes;
1019
+ *
1020
+ * const [mixedEdges, setMixedEdges] = createEdgeStore<typeof customEdgeTypes>([
1021
+ * {
1022
+ * id: "1",
1023
+ * source: "1",
1024
+ * target: "2",
1025
+ * type: "default", // Built-in type
1026
+ * data: { label: "Input" }
1027
+ * },
1028
+ * {
1029
+ * id: "2",
1030
+ * source: "2",
1031
+ * target: "3",
1032
+ * type: "textEdge", // Custom type - gets autocomplete
1033
+ * data: { content: "Custom text edge" } // Type-safe data
1034
+ * },
1035
+ * {
1036
+ * id: "3",
1037
+ * source: "3",
1038
+ * target: "4",
1039
+ * type: "numberEdge", // Another custom type
1040
+ * data: { value: 42 }, // Type-safe data
1041
+ * style: { "background-color": "lightblue" } // All Edge properties available
1042
+ * }
1043
+ * ]);
1044
+ * ```
1045
+ *
1046
+ * @remarks
1047
+ * - Provides autocomplete for the `type` field with all available node types
1048
+ * - Validates `data` structure based on the selected node type
1049
+ * - Supports all Node properties (style, draggable, hidden, etc.)
1050
+ * - Works seamlessly with both built-in and custom node types
1051
+ * - Type errors prevent invalid type names or incorrect data structures
1052
+ */
1053
+ declare const createEdgeStore: <TUserEdgeTypes extends EdgeTypes = Record<string, never>>(edges: EdgesInput<TUserEdgeTypes>[]) => readonly [Store<EdgesInput<TUserEdgeTypes>[]>, StoreSetter<EdgesInput<TUserEdgeTypes>[]>];
1054
+ //#endregion
1164
1055
  //#region src/core/projections/connections.d.ts
1165
1056
  /**
1166
1057
  * Lookup keys for the connection index. Each edge is registered under six
@@ -1313,92 +1204,7 @@ type FlowCommands<NodeType extends Node = Node, EdgeType extends Edge = Edge> =
1313
1204
  };
1314
1205
  };
1315
1206
  //#endregion
1316
- //#region src/data/createEdgeStore.d.ts
1317
- type ExtractEdgeInfo<T> = T extends ((props: EdgeProps<infer TData, infer TType>) => unknown) ? {
1318
- data: TData;
1319
- type: TType;
1320
- } : never;
1321
- type AllEdgeTypes<TUserEdgeTypes extends EdgeTypes> = TUserEdgeTypes extends Record<string, never> ? BuiltInEdgeTypes : BuiltInEdgeTypes & TUserEdgeTypes;
1322
- type EdgesInput<TUserEdgeTypes extends EdgeTypes> = { [K in keyof AllEdgeTypes<TUserEdgeTypes>]: Edge<ExtractEdgeInfo<AllEdgeTypes<TUserEdgeTypes>[K]>["data"], ExtractEdgeInfo<AllEdgeTypes<TUserEdgeTypes>[K]>["type"]>; }[keyof AllEdgeTypes<TUserEdgeTypes>];
1323
- /**
1324
- * Creates a type-safe reactive store of edges for use in Solid Flow.
1325
- *
1326
- * This utility function provides full type safety and autocomplete for creating edges,
1327
- * combining both built-in edge types (default, straight, step, smoothstep) and custom user-defined
1328
- * edge types. When a specific edge type is selected, TypeScript automatically infers the
1329
- * required data structure and validates the edge configuration.
1330
- *
1331
- * @template TUserEdgeTypes - The user's custom edge types map (optional)
1332
- * @param edges - Array of edge configurations to create
1333
- * @returns A SolidJS store tuple [store, setStore] with properly typed Edge objects
1334
- *
1335
- * @example
1336
- * ```typescript
1337
- * // Using only built-in edge types (no generic parameter needed)
1338
- * const [builtInEdges, setBuiltInEdges] = createEdgeStore([
1339
- * {
1340
- * id: "1",
1341
- * source: "1",
1342
- * target: "2",
1343
- * type: "default",
1344
- * data: { label: "Start" }
1345
- * },
1346
- * {
1347
- * id: "2",
1348
- * source: "2",
1349
- * target: "3",
1350
- * type: "default",
1351
- * data: { label: "Process" }
1352
- * }
1353
- * ]);
1354
- * ```
1355
- *
1356
- * @example
1357
- * ```typescript
1358
- * // Using custom edge types (requires generic parameter)
1359
- * const customEdgeTypes = {
1360
- * textEdge: (props: EdgeProps<{ content: string }, "textEdge">) =>
1361
- * <div>{props.data.content}</div>,
1362
- * numberEdge: (props: EdgeProps<{ value: number }, "numberEdge">) =>
1363
- * <div>{props.data.value}</div>
1364
- * } satisfies EdgeTypes;
1365
- *
1366
- * const [mixedEdges, setMixedEdges] = createEdgeStore<typeof customEdgeTypes>([
1367
- * {
1368
- * id: "1",
1369
- * source: "1",
1370
- * target: "2",
1371
- * type: "default", // Built-in type
1372
- * data: { label: "Input" }
1373
- * },
1374
- * {
1375
- * id: "2",
1376
- * source: "2",
1377
- * target: "3",
1378
- * type: "textEdge", // Custom type - gets autocomplete
1379
- * data: { content: "Custom text edge" } // Type-safe data
1380
- * },
1381
- * {
1382
- * id: "3",
1383
- * source: "3",
1384
- * target: "4",
1385
- * type: "numberEdge", // Another custom type
1386
- * data: { value: 42 }, // Type-safe data
1387
- * style: { "background-color": "lightblue" } // All Edge properties available
1388
- * }
1389
- * ]);
1390
- * ```
1391
- *
1392
- * @remarks
1393
- * - Provides autocomplete for the `type` field with all available node types
1394
- * - Validates `data` structure based on the selected node type
1395
- * - Supports all Node properties (style, draggable, hidden, etc.)
1396
- * - Works seamlessly with both built-in and custom node types
1397
- * - Type errors prevent invalid type names or incorrect data structures
1398
- */
1399
- declare const createEdgeStore: <TUserEdgeTypes extends EdgeTypes = Record<string, never>>(edges: EdgesInput<TUserEdgeTypes>[]) => readonly [Store<EdgesInput<TUserEdgeTypes>[]>, StoreSetter<EdgesInput<TUserEdgeTypes>[]>];
1400
- //#endregion
1401
- //#region src/data/createNodeStore.d.ts
1207
+ //#region src/core/createNodeStore.d.ts
1402
1208
  type ExtractNodeInfo<T> = T extends ((props: NodeProps<infer TData, infer TType>) => unknown) ? {
1403
1209
  data: TData;
1404
1210
  type: TType;
@@ -1646,4 +1452,207 @@ declare function useSolidFlow<NodeType extends Node = Node, EdgeType extends Edg
1646
1452
  */
1647
1453
  declare function useUpdateNodeInternals(): UpdateNodeInternals;
1648
1454
  //#endregion
1649
- export { type Align, type AriaLabelConfig, Background, type BackgroundProps, type BackgroundVariant, BaseEdge, BezierEdge, BezierEdgeInternal, type BezierEdgeProps, type BezierPathOptions, type Box, type BuiltInEdge, type BuiltInNode, type BuiltInNodeTypes, type ColorMode, type ColorModeClass, type Connection, ConnectionData, ConnectionLine, type ConnectionLineComponentProps, ConnectionLineType, ConnectionMode, type ConnectionsRecord, ControlButton, type ControlLinePosition, type ControlPosition, Controls, type CoordinateExtent, type DefaultEdgeOptions, DefaultNode, DeleteEvents, type Dimensions, type Edge, EdgeConnection, EdgeEvents, EdgeLabel, EdgeLabelRenderer, type EdgeMarker, type EdgeMarkerType, type EdgeProps, EdgeReconnectAnchor, EdgeReconnectEvents, EdgeRenderer, EdgeToolbar, EdgeToolbarProps, type EdgeTypes, EdgeWrapper, type FitBounds, type FitBoundsOptions, FitViewOptions, type FlowCommands, type FlowSelection, type FlowState, type GetBezierPathParams, type GetSmoothStepPathParams, type 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, type OnConnect, type OnConnectEnd, type OnConnectStart, type OnConnectStartParams, OnDelete, OnEdgeConnect, OnEdgeCreate, type OnError, type OnMove, type OnMoveEnd, type OnMoveStart, type OnReconnect, type OnReconnectEnd, type OnReconnectStart, type OnResize, type OnResizeEnd, type OnResizeStart, OnSelectionChange, OnSelectionDrag, OutputNode, PanOnScrollMode, Pane, PaneEvents, Panel, type PanelPosition, Position$1 as Position, type ProOptions, type Rect, ResizeControl, ResizeControlVariant, type ResizeDragEvent, type ResizeParams, type ResizeParamsWithDirection, Selection, SelectionMode, type SelectionRect, type SetCenter, type SetCenterOptions, type SetViewport, ShortcutModifier, ShortcutModifierDefinition, type ShouldResize, SmoothStepEdge, SmoothStepEdgeInternal, type SmoothStepEdgeProps, type SmoothStepPathOptions, type SnapGrid, SolidFlow, SolidFlowProvider, StepEdge, StepEdgeInternal, type StepEdgeProps, StraightEdge, StraightEdgeInternal, type StraightEdgeProps, type Transform, UseSolidFlowReturn, Viewport, type ViewportHelperFunctionOptions, ViewportPortal, type XYPosition, type 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 };
1455
+ //#region src/plugins/background/types.d.ts
1456
+ type BackgroundVariant = "lines" | "dots" | "cross";
1457
+ //#endregion
1458
+ //#region src/plugins/background/Background.d.ts
1459
+ type BackgroundProps = {
1460
+ readonly id?: string;
1461
+ /** Variant of the pattern
1462
+ * @example 'lines', 'dots', 'cross'
1463
+ */
1464
+ readonly variant?: BackgroundVariant;
1465
+ /** Color of the background */
1466
+ readonly bgColor?: string;
1467
+ /** Color of the pattern */
1468
+ readonly patternColor?: string;
1469
+ /** Class applied to the pattern */
1470
+ readonly patternClass?: string;
1471
+ /** Class applied to the container */
1472
+ readonly class?: string;
1473
+ /** Gap between repetitions of the pattern */
1474
+ readonly gap?: number | [number, number];
1475
+ /** Size of a single pattern element */
1476
+ readonly size?: number;
1477
+ /** Line width of the Line pattern */
1478
+ readonly lineWidth?: number;
1479
+ /** Style applied to the container */
1480
+ readonly style?: JSX.CSSProperties;
1481
+ };
1482
+ declare const Background: (props: BackgroundProps) => JSX.Element;
1483
+ //#endregion
1484
+ //#region src/plugins/controls/ControlButton.d.ts
1485
+ type ControlButtonProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & {
1486
+ readonly class?: string;
1487
+ readonly bgColor?: string;
1488
+ readonly bgColorHover?: string;
1489
+ readonly color?: string;
1490
+ readonly colorHover?: string;
1491
+ readonly borderColor?: string;
1492
+ readonly onClick?: JSX.EventHandler<HTMLButtonElement, MouseEvent>;
1493
+ };
1494
+ declare const ControlButton: (props: ParentProps<ControlButtonProps>) => JSX.Element;
1495
+ //#endregion
1496
+ //#region src/plugins/controls/Controls.d.ts
1497
+ type ControlsOrientation = "horizontal" | "vertical";
1498
+ type ControlsProps = {
1499
+ /** Position of the controls on the pane
1500
+ * @example PanelPosition.TopLeft, PanelPosition.TopRight,
1501
+ * PanelPosition.BottomLeft, PanelPosition.BottomRight
1502
+ */
1503
+ readonly position?: PanelPosition$1;
1504
+ /** Show button for zoom in/out */
1505
+ readonly showZoom?: boolean;
1506
+ /** Show button for fit view */
1507
+ readonly showFitView?: boolean;
1508
+ /** Show button for toggling interactivity */
1509
+ readonly showLock?: boolean;
1510
+ readonly buttonBgColor?: string;
1511
+ readonly buttonBgColorHover?: string;
1512
+ readonly buttonColor?: string;
1513
+ readonly buttonColorHover?: string;
1514
+ readonly buttonBorderColor?: string;
1515
+ readonly style?: JSX.CSSProperties;
1516
+ readonly orientation?: ControlsOrientation;
1517
+ readonly fitViewOptions?: FitViewOptions;
1518
+ readonly beforeControls?: JSX.Element;
1519
+ readonly afterControls?: JSX.Element;
1520
+ } & Omit<JSX.HTMLAttributes<HTMLDivElement>, "style">;
1521
+ declare const Controls: (props: ParentProps<ControlsProps>) => JSX.Element;
1522
+ //#endregion
1523
+ //#region src/plugins/minimap/MiniMap.d.ts
1524
+ type GetMiniMapNodeAttribute<NodeType extends Node> = (node: NodeType) => string;
1525
+ type MiniMapProps<NodeType extends Node> = Omit<JSX.HTMLAttributes<HTMLDivElement>, "style"> & {
1526
+ /** Background color of minimap */
1527
+ readonly bgColor?: string;
1528
+ /** Color of nodes on the minimap */
1529
+ readonly nodeColor?: string | GetMiniMapNodeAttribute<NodeType>;
1530
+ /** Stroke color of nodes on the minimap */
1531
+ readonly nodeStrokeColor?: string | GetMiniMapNodeAttribute<NodeType>;
1532
+ /** Class applied to nodes on the minimap */
1533
+ readonly nodeClass?: string | GetMiniMapNodeAttribute<NodeType>;
1534
+ /** Border radius of nodes on the minimap */
1535
+ readonly nodeBorderRadius?: number;
1536
+ /** Stroke width of nodes on the minimap */
1537
+ readonly nodeStrokeWidth?: number;
1538
+ /** Color of the mask representing viewport */
1539
+ readonly maskColor?: string;
1540
+ /** Stroke color of the mask representing viewport */
1541
+ readonly maskStrokeColor?: string;
1542
+ /** Stroke width of the mask representing viewport */
1543
+ readonly maskStrokeWidth?: number;
1544
+ /** Position of the minimap on the pane
1545
+ * @example PanelPosition.TopLeft, PanelPosition.TopRight,
1546
+ * PanelPosition.BottomLeft, PanelPosition.BottomRight
1547
+ */
1548
+ readonly position?: PanelPosition$1;
1549
+ /** Style applied to container */
1550
+ readonly style?: JSX.CSSProperties;
1551
+ /** The aria-label applied to container */
1552
+ readonly ariaLabel?: string | null;
1553
+ /** Width of minimap */
1554
+ readonly width?: number;
1555
+ /** Height of minimap */
1556
+ readonly height?: number;
1557
+ readonly pannable?: boolean;
1558
+ readonly zoomable?: boolean;
1559
+ /** Invert the direction when panning the minimap viewport */
1560
+ readonly inversePan?: boolean;
1561
+ /** Step size for zooming in/out */
1562
+ readonly zoomStep?: number;
1563
+ };
1564
+ declare const MiniMap: <NodeType extends Node>(props: ParentProps<Partial<MiniMapProps<NodeType>>>) => JSX.Element;
1565
+ //#endregion
1566
+ //#region src/plugins/nodeResizer/NodeResizer.d.ts
1567
+ type NodeResizerProps = {
1568
+ /** Id of the node it is resizing
1569
+ * @remarks optional if used inside custom node
1570
+ */
1571
+ readonly nodeId?: string;
1572
+ /** Class applied to handle */
1573
+ readonly handleClass?: string;
1574
+ /** Style applied to handle */
1575
+ readonly handleStyle?: JSX.CSSProperties;
1576
+ /** Class applied to line */
1577
+ readonly lineClass?: string;
1578
+ /** Style applied to line */
1579
+ readonly lineStyle?: JSX.CSSProperties;
1580
+ /** Are the controls visible */
1581
+ readonly visible?: boolean;
1582
+ /** Minimum width of node */
1583
+ readonly minWidth?: number;
1584
+ /** Minimum height of node */
1585
+ readonly minHeight?: number;
1586
+ /** Maximum width of node */
1587
+ readonly maxWidth?: number;
1588
+ /** Maximum height of node */
1589
+ readonly maxHeight?: number;
1590
+ /** Keep aspect ratio when resizing */
1591
+ readonly keepAspectRatio?: boolean;
1592
+ /** Automatically scale the node when resizing */
1593
+ readonly autoScale?: boolean;
1594
+ /** Callback to determine if node should resize */
1595
+ readonly shouldResize?: ShouldResize$1;
1596
+ /** Callback called when resizing starts */
1597
+ readonly onResizeStart?: OnResizeStart$1;
1598
+ /** Callback called when resizing */
1599
+ readonly onResize?: OnResize$1;
1600
+ /** Callback called when resizing ends */
1601
+ readonly onResizeEnd?: OnResizeEnd$1;
1602
+ } & Omit<JSX.HTMLAttributes<HTMLDivElement>, "onResize" | "style">;
1603
+ declare const NodeResizer: (props: Partial<NodeResizerProps>) => JSX.Element;
1604
+ //#endregion
1605
+ //#region src/plugins/nodeResizer/ResizeControl.d.ts
1606
+ type NodeResizerSubProps = Pick<NodeResizerProps, "nodeId" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "autoScale" | "keepAspectRatio" | "shouldResize" | "onResizeStart" | "onResize" | "onResizeEnd">;
1607
+ type ResizeControlProps = NodeResizerSubProps & {
1608
+ /** Position of control
1609
+ * @example ControlPosition.TopLeft, ControlPosition.TopRight,
1610
+ * ControlPosition.BottomLeft, ControlPosition.BottomRight
1611
+ */
1612
+ readonly position?: ControlPosition$1;
1613
+ /** Variant of control
1614
+ * @example ResizeControlVariant.Handle, ResizeControlVariant.Line
1615
+ */
1616
+ readonly variant?: ResizeControlVariant$2;
1617
+ readonly color?: string;
1618
+ readonly style?: JSX.CSSProperties;
1619
+ } & Omit<JSX.HTMLAttributes<HTMLDivElement>, "onResize" | "style">;
1620
+ declare const ResizeControl: <NodeType extends Node = Node>(props: ParentProps<ResizeControlProps>) => JSX.Element;
1621
+ //#endregion
1622
+ //#region src/plugins/toolbar/EdgeToolbar.d.ts
1623
+ type EdgeToolbarProps = EdgeToolbarBaseProps & {
1624
+ /** If `true`, clicking the toolbar selects the edge it belongs to. */
1625
+ readonly selectEdgeOnClick?: boolean;
1626
+ } & Omit<JSX.HTMLAttributes<HTMLDivElement>, "style">;
1627
+ /**
1628
+ * The `<EdgeToolbar />` component renders a toolbar or tooltip for an edge.
1629
+ * It must be used inside a custom edge component. By default it is only
1630
+ * visible when the edge is selected; pass `isVisible` to control it manually.
1631
+ *
1632
+ * The toolbar does not scale with the viewport so that its content is always legible.
1633
+ */
1634
+ declare const EdgeToolbar: (props: ParentProps<EdgeToolbarProps>) => JSX.Element;
1635
+ //#endregion
1636
+ //#region src/plugins/toolbar/NodeToolbar.d.ts
1637
+ type NodeToolbarProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "style"> & {
1638
+ /** The id of the node, or array of ids the toolbar should be displayed at */
1639
+ readonly nodeId: string | string[];
1640
+ /** Position of the toolbar relative to the node
1641
+ * @example Position.TopLeft, Position.TopRight,
1642
+ * Position.BottomLeft, Position.BottomRight
1643
+ */
1644
+ readonly position: Position$2;
1645
+ /** Align the toolbar relative to the node
1646
+ * @example Align.Start, Align.Center, Align.End
1647
+ */
1648
+ readonly align: Align$1;
1649
+ /** Offset the toolbar from the node */
1650
+ readonly offset: number;
1651
+ /** If true, node toolbar is visible even if node is not selected */
1652
+ readonly isVisible: boolean;
1653
+ /** Style of the toolbar */
1654
+ readonly style: Omit<JSX.CSSProperties, "z-index" | "position" | "transform">;
1655
+ };
1656
+ declare const NodeToolbar: ParentComponent<Partial<NodeToolbarProps>>;
1657
+ //#endregion
1658
+ export { type Align, type AriaLabelConfig, Background, type BackgroundProps, type BackgroundVariant, BaseEdge, BezierEdge, BezierEdgeInternal, type BezierEdgeProps, type BezierPathOptions, type Box, type BuiltInEdge, type BuiltInNode, type BuiltInNodeTypes, type ColorMode, type ColorModeClass, type Connection, ConnectionData, ConnectionLine, ConnectionLineComponentProps, ConnectionLineType, ConnectionMode, type ConnectionsRecord, ControlButton, type ControlLinePosition, type ControlPosition, Controls, type CoordinateExtent, type DefaultEdgeOptions, DefaultNode, DeleteEvents, type Dimensions, type Edge, EdgeConnection, EdgeEvents, EdgeLabel, EdgeLabelRenderer, type EdgeMarker, type EdgeMarkerType, type EdgeProps, EdgeReconnectAnchor, EdgeReconnectEvents, EdgeRenderer, EdgeToolbar, EdgeToolbarProps, type EdgeTypes, EdgeWrapper, type FitBounds, type FitBoundsOptions, FitViewOptions, type FlowCommands, type FlowSelection, type FlowState, type GetBezierPathParams, type GetSmoothStepPathParams, type 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, type OnConnect, type OnConnectEnd, type OnConnectStart, type OnConnectStartParams, OnDelete, OnEdgeConnect, OnEdgeCreate, type OnError, type OnMove, type OnMoveEnd, type OnMoveStart, type OnReconnect, type OnReconnectEnd, type OnReconnectStart, type OnResize, type OnResizeEnd, type OnResizeStart, OnSelectionChange, OnSelectionDrag, OutputNode, PanOnScrollMode, Pane, PaneEvents, Panel, type PanelPosition, Position, type ProOptions, type Rect, ResizeControl, ResizeControlVariant, type ResizeDragEvent, type ResizeParams, type ResizeParamsWithDirection, Selection, SelectionMode, type SelectionRect, type SetCenter, type SetCenterOptions, type SetViewport, ShortcutModifier, ShortcutModifierDefinition, type ShouldResize, SmoothStepEdge, SmoothStepEdgeInternal, type SmoothStepEdgeProps, type SmoothStepPathOptions, type SnapGrid, SolidFlow, type SolidFlowInitialProps, type SolidFlowProps, SolidFlowProvider, StepEdge, StepEdgeInternal, type StepEdgeProps, StraightEdge, StraightEdgeInternal, type StraightEdgeProps, type Transform, UseSolidFlowReturn, Viewport, type ViewportHelperFunctionOptions, ViewportPortal, type XYPosition, type 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 };