@squeed/flow-sdk 2.0.21 → 2.0.24
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 +117 -0
- package/dist/index.cjs +12 -9
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +138 -5
- package/dist/index.d.ts +138 -5
- package/dist/index.js +11982 -10238
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -169,6 +169,8 @@ export declare type ContractType = {
|
|
|
169
169
|
ports?: Record<string, ContractPort>;
|
|
170
170
|
};
|
|
171
171
|
|
|
172
|
+
export declare function copySelection(json: SqueedJson, ids: string[]): SqueedJson;
|
|
173
|
+
|
|
172
174
|
export declare function createFlowDiagram(jsnObjct: any, path?: string, nodes?: any[], edges?: any[], activeLabel?: string, flowConfig?: any, nodeConfig?: any): {
|
|
173
175
|
nodes: any[];
|
|
174
176
|
edges: any[];
|
|
@@ -243,6 +245,11 @@ export declare function DiagramAppearanceControls(): JSX_2.Element;
|
|
|
243
245
|
|
|
244
246
|
export declare function downloadSvg(canvas: HTMLElement, filename?: string): Promise<void>;
|
|
245
247
|
|
|
248
|
+
export declare function duplicateSelection(json: SqueedJson, ids: string[]): {
|
|
249
|
+
json: SqueedJson;
|
|
250
|
+
ids: string[];
|
|
251
|
+
};
|
|
252
|
+
|
|
246
253
|
export declare const DynamicIcon: ({ name, svg, ...props }: {
|
|
247
254
|
[x: string]: any;
|
|
248
255
|
name: any;
|
|
@@ -284,6 +291,8 @@ export declare function FlowDiagram({ loading, loader, ...props }: FlowDiagramPr
|
|
|
284
291
|
|
|
285
292
|
/** Event callbacks for the flow diagram */
|
|
286
293
|
export declare interface FlowDiagramCallbacks {
|
|
294
|
+
onNodesCopy?: (ids: string[]) => boolean | void | Promise<boolean | void>;
|
|
295
|
+
onNodesDuplicate?: (ids: string[]) => boolean | void;
|
|
287
296
|
onGraphEdgeColorChange?: (color: string) => void;
|
|
288
297
|
onAllNodesIconLabelChange?: (enabled: boolean) => void;
|
|
289
298
|
onNodeCreateRequest?: (request: FlowNodeCreationRequest) => boolean;
|
|
@@ -295,6 +304,13 @@ export declare interface FlowDiagramCallbacks {
|
|
|
295
304
|
onEdgeRadiusChange?: (radius: number) => void;
|
|
296
305
|
onCompactPropertyLayoutChange?: (enabled: boolean) => void;
|
|
297
306
|
onBackgroundVariantChange?: (variant: BackgroundVariant) => void;
|
|
307
|
+
onNodeGridZoomOut?: (options: NodeGridOptions) => boolean;
|
|
308
|
+
onNodeGridFillRequest?: (options: NodeGridOptions) => boolean;
|
|
309
|
+
onNodeGridModeRequest?: (enabled: boolean, options: NodeGridOptions) => boolean;
|
|
310
|
+
onNodeGridDrop?: (nodeId: string, point: {
|
|
311
|
+
x: number;
|
|
312
|
+
y: number;
|
|
313
|
+
}, modifiers?: NodeSelectionModifiers) => boolean;
|
|
298
314
|
/** Fires when a node is clicked/selected */
|
|
299
315
|
onNodeSelect?: (nodeId: string, nodeData: any, modifiers?: NodeSelectionModifiers) => void;
|
|
300
316
|
onBackgroundClick?: () => void;
|
|
@@ -312,14 +328,16 @@ export declare interface FlowDiagramCallbacks {
|
|
|
312
328
|
position: any;
|
|
313
329
|
sourceNodeId?: string;
|
|
314
330
|
isArrayMode?: boolean;
|
|
315
|
-
}) => void;
|
|
331
|
+
}) => boolean | void;
|
|
316
332
|
/** Fires when a node is deleted */
|
|
317
333
|
onNodeDelete?: (nodeId: string, nodeData: any) => void;
|
|
318
334
|
/** Fires when a node label is edited inline */
|
|
319
335
|
onNodeLabelChange?: (nodeId: string, newLabel: string) => void;
|
|
320
|
-
|
|
336
|
+
onNodeSubtitleChange?: (nodeId: string, subtitle: string) => void;
|
|
337
|
+
onNodeContentChange?: (nodeId: string, content: NodeContent) => void;
|
|
321
338
|
/** Fires when a node's collapse toggle is clicked */
|
|
322
339
|
onNodeCollapse?: (nodeId: string, collapsed: boolean) => void;
|
|
340
|
+
onNodeParentChange?: (nodeId: string, parentId: string) => void;
|
|
323
341
|
/** Fires when a node's color is changed via the toolbar */
|
|
324
342
|
onNodeColorChange?: (nodeId: string, colorType: "text" | "bg", color: string) => void;
|
|
325
343
|
/** Fires when a node's icon is changed via the toolbar */
|
|
@@ -383,6 +401,7 @@ export declare interface FlowDiagramCallbacks {
|
|
|
383
401
|
export declare interface FlowDiagramConfig {
|
|
384
402
|
bottomBarExtra?: React.ReactNode;
|
|
385
403
|
bottomBarCollapsed?: boolean;
|
|
404
|
+
bottomBarNavigation?: boolean;
|
|
386
405
|
/** Animate fit/center/focus actions for 300ms by default. Per-action flags override this; reduced motion stays instant. */
|
|
387
406
|
animateViewport?: boolean;
|
|
388
407
|
disableAnimations?: boolean;
|
|
@@ -403,6 +422,7 @@ export declare interface FlowDiagramConfig {
|
|
|
403
422
|
edgeMode?: EdgeMode;
|
|
404
423
|
compactPropertyLayout?: boolean;
|
|
405
424
|
nodeViewModes?: Record<string, NodeViewMode>;
|
|
425
|
+
allNodesIconLabel?: boolean;
|
|
406
426
|
workflowContract?: WorkflowContract;
|
|
407
427
|
/** Layout algorithm */
|
|
408
428
|
layout?: LayoutAlgorithm;
|
|
@@ -420,6 +440,9 @@ export declare interface FlowDiagramConfig {
|
|
|
420
440
|
parentNodeStyle?: ParentNodeStyle;
|
|
421
441
|
/** Min zoom level (default: 0.01) */
|
|
422
442
|
minZoom?: number;
|
|
443
|
+
nodeGridSpacing?: "collision" | "layout";
|
|
444
|
+
nodeGridConnections?: boolean;
|
|
445
|
+
bottomBarFill?: boolean;
|
|
423
446
|
/** Max zoom level (default: 1.5) */
|
|
424
447
|
maxZoom?: number;
|
|
425
448
|
/** Initial viewport position and zoom */
|
|
@@ -448,7 +471,7 @@ export declare interface FlowDiagramConfig {
|
|
|
448
471
|
renderBottomBar?: (props: BottomBarRenderProps) => React.ReactNode;
|
|
449
472
|
/** Built-in node/edge selection toolbars (bottom bar swaps to them on select). `false` disables. */
|
|
450
473
|
selectionToolbar?: SelectionToolbarConfig | false;
|
|
451
|
-
/** Custom
|
|
474
|
+
/** Custom views: objectView, arrayView, text, parentContainer; jsxContent receives JsxContentRendererProps. */
|
|
452
475
|
customViews?: Record<string, React.ComponentType<any>>;
|
|
453
476
|
/** Disable built-in keyboard shortcuts (Z/M/D) when the consumer handles its own */
|
|
454
477
|
disableKeyboardShortcuts?: boolean;
|
|
@@ -467,6 +490,8 @@ export declare interface FlowDiagramContextValue {
|
|
|
467
490
|
setAllNodesIconLabel: (enabled: boolean) => void;
|
|
468
491
|
nodeViewModes: Record<string, NodeViewMode>;
|
|
469
492
|
setNodeViewMode: (nodeId: string, mode: NodeViewMode) => void;
|
|
493
|
+
nodeRadiusPreviews: Record<string, number>;
|
|
494
|
+
setNodeRadiusPreview: (ids: string[], radius: number | undefined) => void;
|
|
470
495
|
spacing: number;
|
|
471
496
|
edgeRadius: number | undefined;
|
|
472
497
|
setEdgeRadius: (radius: number) => void;
|
|
@@ -507,6 +532,11 @@ export declare interface FlowDiagramContextValue {
|
|
|
507
532
|
setIsPinned: (v: boolean) => void;
|
|
508
533
|
isPerformanceMode: boolean;
|
|
509
534
|
setIsPerformanceMode: (v: boolean) => void;
|
|
535
|
+
nodeGridOptions: NodeGridOptions | null;
|
|
536
|
+
setNodeGridOptions: (options: NodeGridOptions | null) => void;
|
|
537
|
+
lastNodeGridOptions: NodeGridOptions;
|
|
538
|
+
fillRadiusEditedIds: ReadonlySet<string>;
|
|
539
|
+
setFillRadiusEditedIds: (ids: Set<string>) => void;
|
|
510
540
|
engineRef: React.MutableRefObject<FlowEngine | null>;
|
|
511
541
|
callbacks: FlowDiagramCallbacks;
|
|
512
542
|
config: FlowDiagramConfig;
|
|
@@ -639,6 +669,11 @@ export declare interface FlowEngine {
|
|
|
639
669
|
clientToModel(clientX: number, clientY: number): Point;
|
|
640
670
|
modelToClient(p: Point): Point;
|
|
641
671
|
getNodeBox(id: string): Box | undefined;
|
|
672
|
+
detectNodeCollisions(options?: NodeCollisionOptions): NodeCollision[];
|
|
673
|
+
resolveNodeCollisions(options?: ResolveNodeCollisionsOptions): NodeCollisionResolution;
|
|
674
|
+
arrangeNodesInGrid(options?: NodeGridOptions): NodeGridArrangement;
|
|
675
|
+
setNodeGridMode(enabled: boolean, options?: NodeGridOptions): void;
|
|
676
|
+
swapGridNodes(source: string, target: string, animate?: boolean): boolean;
|
|
642
677
|
setNodePosition(id: string, position: Point | undefined, options?: {
|
|
643
678
|
persist?: boolean;
|
|
644
679
|
}): boolean;
|
|
@@ -807,6 +842,18 @@ export declare function getInteractionSurface(surface: string, border: string):
|
|
|
807
842
|
|
|
808
843
|
export declare function getNode(json: SqueedJson, address: string): any;
|
|
809
844
|
|
|
845
|
+
export declare function getSelectionRoots(json: SqueedJson, ids: string[]): string[];
|
|
846
|
+
|
|
847
|
+
declare interface GridDivider {
|
|
848
|
+
section: string;
|
|
849
|
+
axis: "x" | "y";
|
|
850
|
+
row: number;
|
|
851
|
+
index: number;
|
|
852
|
+
weights: number[];
|
|
853
|
+
length: number;
|
|
854
|
+
position: Point;
|
|
855
|
+
}
|
|
856
|
+
|
|
810
857
|
export declare interface JsonPlaybackState {
|
|
811
858
|
position: number;
|
|
812
859
|
total: number;
|
|
@@ -822,11 +869,26 @@ export declare interface JsonStreamOptions<Document> {
|
|
|
822
869
|
maxBytes?: number;
|
|
823
870
|
}
|
|
824
871
|
|
|
872
|
+
export declare interface JsxContentRendererProps {
|
|
873
|
+
components: {
|
|
874
|
+
type: string;
|
|
875
|
+
[key: string]: unknown;
|
|
876
|
+
}[];
|
|
877
|
+
colorMode?: "light" | "dark";
|
|
878
|
+
fillHeight?: boolean;
|
|
879
|
+
}
|
|
880
|
+
|
|
825
881
|
export declare type LayoutAlgorithm = "dagre" | "elk" | "tidytree" | "concentric" | "cose";
|
|
826
882
|
|
|
827
883
|
export declare const LIGHT_BLACK = "#c6c6c6";
|
|
828
884
|
|
|
829
|
-
export declare
|
|
885
|
+
export declare function LoadingBorder({ active, label, radius }: {
|
|
886
|
+
active?: boolean;
|
|
887
|
+
label?: string;
|
|
888
|
+
radius?: number;
|
|
889
|
+
}): JSX_2.Element;
|
|
890
|
+
|
|
891
|
+
export declare const NODE_TYPE_VIEWS: readonly ["", "icon-label", "object", "text", "grid", "parent"];
|
|
830
892
|
|
|
831
893
|
export declare type NodeAlignment = "leading" | "center" | "trailing";
|
|
832
894
|
|
|
@@ -837,11 +899,31 @@ export declare function NodeBorderRadiusControl({ ids, showDivider, }: {
|
|
|
837
899
|
showDivider?: boolean;
|
|
838
900
|
}): JSX_2.Element;
|
|
839
901
|
|
|
902
|
+
export declare interface NodeCollision {
|
|
903
|
+
source: string;
|
|
904
|
+
target: string;
|
|
905
|
+
overlap: Point;
|
|
906
|
+
}
|
|
907
|
+
|
|
908
|
+
export declare interface NodeCollisionOptions {
|
|
909
|
+
margin?: number;
|
|
910
|
+
}
|
|
911
|
+
|
|
912
|
+
export declare interface NodeCollisionResolution {
|
|
913
|
+
positions: Map<string, Point>;
|
|
914
|
+
movedNodeIds: string[];
|
|
915
|
+
collisions: NodeCollision[];
|
|
916
|
+
iterations: number;
|
|
917
|
+
resolved: boolean;
|
|
918
|
+
}
|
|
919
|
+
|
|
840
920
|
export declare function NodeConfigSummary({ nodeAddress, expanded, }: {
|
|
841
921
|
nodeAddress: string;
|
|
842
922
|
expanded?: boolean;
|
|
843
923
|
}): JSX_2.Element;
|
|
844
924
|
|
|
925
|
+
export declare type NodeContent = string | Record<string, unknown>[];
|
|
926
|
+
|
|
845
927
|
export declare function NodeForm({ nodeAddress, structured, }: {
|
|
846
928
|
nodeAddress: string;
|
|
847
929
|
structured?: boolean;
|
|
@@ -859,6 +941,38 @@ export declare function NodeFormPopover({ nodeAddress, active, label, open, onCl
|
|
|
859
941
|
width?: number;
|
|
860
942
|
}): JSX_2.Element;
|
|
861
943
|
|
|
944
|
+
export declare interface NodeGridArrangement {
|
|
945
|
+
dividers?: GridDivider[];
|
|
946
|
+
positions: Map<string, Point>;
|
|
947
|
+
movedNodeIds: string[];
|
|
948
|
+
skippedNodeIds: string[];
|
|
949
|
+
collisions: NodeCollision[];
|
|
950
|
+
bounds?: Rect;
|
|
951
|
+
sizes?: Map<string, {
|
|
952
|
+
w: number;
|
|
953
|
+
h: number;
|
|
954
|
+
}>;
|
|
955
|
+
}
|
|
956
|
+
|
|
957
|
+
export declare interface NodeGridOptions extends NodeCollisionOptions {
|
|
958
|
+
adjustment?: {
|
|
959
|
+
enabled?: boolean;
|
|
960
|
+
sections?: Record<string, {
|
|
961
|
+
rows?: number[];
|
|
962
|
+
columns?: number[][];
|
|
963
|
+
}>;
|
|
964
|
+
};
|
|
965
|
+
order?: string[];
|
|
966
|
+
columns?: number;
|
|
967
|
+
animate?: boolean;
|
|
968
|
+
gaps?: number | {
|
|
969
|
+
x: number;
|
|
970
|
+
y: number;
|
|
971
|
+
};
|
|
972
|
+
fill?: boolean;
|
|
973
|
+
padding?: number;
|
|
974
|
+
}
|
|
975
|
+
|
|
862
976
|
export declare function NodeIconPicker({ nodeId, edgeId, value, open: requestedOpen, onOpenChange, }: {
|
|
863
977
|
nodeId?: string;
|
|
864
978
|
edgeId?: string;
|
|
@@ -976,6 +1090,13 @@ export declare function readFormSchema(file: Pick<File, "name" | "size" | "text"
|
|
|
976
1090
|
|
|
977
1091
|
export declare function readWorkflowContract(file: File): Promise<WorkflowContract>;
|
|
978
1092
|
|
|
1093
|
+
declare interface Rect {
|
|
1094
|
+
x1: number;
|
|
1095
|
+
y1: number;
|
|
1096
|
+
x2: number;
|
|
1097
|
+
y2: number;
|
|
1098
|
+
}
|
|
1099
|
+
|
|
979
1100
|
/** Removes explicit edges or suppresses a hierarchy edge without deleting its child. */
|
|
980
1101
|
export declare function removeEdge(json: SqueedJson, edge: RenderedEdgeRef): {
|
|
981
1102
|
json: SqueedJson;
|
|
@@ -995,6 +1116,8 @@ export declare interface RenderedEdgeRef extends FlowEdgeProperties {
|
|
|
995
1116
|
};
|
|
996
1117
|
}
|
|
997
1118
|
|
|
1119
|
+
export declare function reparentNode(json: SqueedJson, nodeId: string, parentId: string): SqueedJson;
|
|
1120
|
+
|
|
998
1121
|
/**
|
|
999
1122
|
* Resolve which JSON node carries an edge's keys.
|
|
1000
1123
|
* parent→child edges (implicit hierarchy) are configured on the child;
|
|
@@ -1005,6 +1128,11 @@ export declare function resolveEdgeOwner(edge: RenderedEdgeRef): {
|
|
|
1005
1128
|
kind: "hierarchy" | "target" | "connection";
|
|
1006
1129
|
};
|
|
1007
1130
|
|
|
1131
|
+
export declare interface ResolveNodeCollisionsOptions extends NodeCollisionOptions {
|
|
1132
|
+
animate?: boolean;
|
|
1133
|
+
maxIterations?: number;
|
|
1134
|
+
}
|
|
1135
|
+
|
|
1008
1136
|
export declare function resolveStateView(view: SqueedJson, state: SqueedJson): SqueedJson;
|
|
1009
1137
|
|
|
1010
1138
|
declare interface RuntimeReference {
|
|
@@ -1180,11 +1308,14 @@ rememberAction?: boolean;
|
|
|
1180
1308
|
|
|
1181
1309
|
export declare const ToolbarRangeInput: ForwardRefExoticComponent<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & RefAttributes<HTMLInputElement>>;
|
|
1182
1310
|
|
|
1183
|
-
export declare function ToolbarScrollContainer({ children, background, border, endElement, }: {
|
|
1311
|
+
export declare function ToolbarScrollContainer({ children, background, border, endElement, startElement, startElementWidth, framed, }: {
|
|
1184
1312
|
children: ReactNode;
|
|
1185
1313
|
background: string;
|
|
1186
1314
|
border: string;
|
|
1187
1315
|
endElement?: ReactNode;
|
|
1316
|
+
startElement?: ReactNode;
|
|
1317
|
+
startElementWidth?: number;
|
|
1318
|
+
framed?: boolean;
|
|
1188
1319
|
}): JSX_2.Element;
|
|
1189
1320
|
|
|
1190
1321
|
export declare function ToolbarSelect({ children, value, onValueChange, disabled, style, title, icon, popupContent, footer, labelCase, "aria-label": label, ...triggerProps }: {
|
|
@@ -1294,6 +1425,8 @@ export declare function useThemeContentColors(color: any): {
|
|
|
1294
1425
|
highlightColorFaint: string;
|
|
1295
1426
|
};
|
|
1296
1427
|
|
|
1428
|
+
export declare function validateGridAdjustment(adjustment: NodeGridOptions["adjustment"]): void;
|
|
1429
|
+
|
|
1297
1430
|
declare interface ViewportState {
|
|
1298
1431
|
pan: Point;
|
|
1299
1432
|
zoom: number;
|
package/dist/index.d.ts
CHANGED
|
@@ -169,6 +169,8 @@ export declare type ContractType = {
|
|
|
169
169
|
ports?: Record<string, ContractPort>;
|
|
170
170
|
};
|
|
171
171
|
|
|
172
|
+
export declare function copySelection(json: SqueedJson, ids: string[]): SqueedJson;
|
|
173
|
+
|
|
172
174
|
export declare function createFlowDiagram(jsnObjct: any, path?: string, nodes?: any[], edges?: any[], activeLabel?: string, flowConfig?: any, nodeConfig?: any): {
|
|
173
175
|
nodes: any[];
|
|
174
176
|
edges: any[];
|
|
@@ -243,6 +245,11 @@ export declare function DiagramAppearanceControls(): JSX_2.Element;
|
|
|
243
245
|
|
|
244
246
|
export declare function downloadSvg(canvas: HTMLElement, filename?: string): Promise<void>;
|
|
245
247
|
|
|
248
|
+
export declare function duplicateSelection(json: SqueedJson, ids: string[]): {
|
|
249
|
+
json: SqueedJson;
|
|
250
|
+
ids: string[];
|
|
251
|
+
};
|
|
252
|
+
|
|
246
253
|
export declare const DynamicIcon: ({ name, svg, ...props }: {
|
|
247
254
|
[x: string]: any;
|
|
248
255
|
name: any;
|
|
@@ -284,6 +291,8 @@ export declare function FlowDiagram({ loading, loader, ...props }: FlowDiagramPr
|
|
|
284
291
|
|
|
285
292
|
/** Event callbacks for the flow diagram */
|
|
286
293
|
export declare interface FlowDiagramCallbacks {
|
|
294
|
+
onNodesCopy?: (ids: string[]) => boolean | void | Promise<boolean | void>;
|
|
295
|
+
onNodesDuplicate?: (ids: string[]) => boolean | void;
|
|
287
296
|
onGraphEdgeColorChange?: (color: string) => void;
|
|
288
297
|
onAllNodesIconLabelChange?: (enabled: boolean) => void;
|
|
289
298
|
onNodeCreateRequest?: (request: FlowNodeCreationRequest) => boolean;
|
|
@@ -295,6 +304,13 @@ export declare interface FlowDiagramCallbacks {
|
|
|
295
304
|
onEdgeRadiusChange?: (radius: number) => void;
|
|
296
305
|
onCompactPropertyLayoutChange?: (enabled: boolean) => void;
|
|
297
306
|
onBackgroundVariantChange?: (variant: BackgroundVariant) => void;
|
|
307
|
+
onNodeGridZoomOut?: (options: NodeGridOptions) => boolean;
|
|
308
|
+
onNodeGridFillRequest?: (options: NodeGridOptions) => boolean;
|
|
309
|
+
onNodeGridModeRequest?: (enabled: boolean, options: NodeGridOptions) => boolean;
|
|
310
|
+
onNodeGridDrop?: (nodeId: string, point: {
|
|
311
|
+
x: number;
|
|
312
|
+
y: number;
|
|
313
|
+
}, modifiers?: NodeSelectionModifiers) => boolean;
|
|
298
314
|
/** Fires when a node is clicked/selected */
|
|
299
315
|
onNodeSelect?: (nodeId: string, nodeData: any, modifiers?: NodeSelectionModifiers) => void;
|
|
300
316
|
onBackgroundClick?: () => void;
|
|
@@ -312,14 +328,16 @@ export declare interface FlowDiagramCallbacks {
|
|
|
312
328
|
position: any;
|
|
313
329
|
sourceNodeId?: string;
|
|
314
330
|
isArrayMode?: boolean;
|
|
315
|
-
}) => void;
|
|
331
|
+
}) => boolean | void;
|
|
316
332
|
/** Fires when a node is deleted */
|
|
317
333
|
onNodeDelete?: (nodeId: string, nodeData: any) => void;
|
|
318
334
|
/** Fires when a node label is edited inline */
|
|
319
335
|
onNodeLabelChange?: (nodeId: string, newLabel: string) => void;
|
|
320
|
-
|
|
336
|
+
onNodeSubtitleChange?: (nodeId: string, subtitle: string) => void;
|
|
337
|
+
onNodeContentChange?: (nodeId: string, content: NodeContent) => void;
|
|
321
338
|
/** Fires when a node's collapse toggle is clicked */
|
|
322
339
|
onNodeCollapse?: (nodeId: string, collapsed: boolean) => void;
|
|
340
|
+
onNodeParentChange?: (nodeId: string, parentId: string) => void;
|
|
323
341
|
/** Fires when a node's color is changed via the toolbar */
|
|
324
342
|
onNodeColorChange?: (nodeId: string, colorType: "text" | "bg", color: string) => void;
|
|
325
343
|
/** Fires when a node's icon is changed via the toolbar */
|
|
@@ -383,6 +401,7 @@ export declare interface FlowDiagramCallbacks {
|
|
|
383
401
|
export declare interface FlowDiagramConfig {
|
|
384
402
|
bottomBarExtra?: React.ReactNode;
|
|
385
403
|
bottomBarCollapsed?: boolean;
|
|
404
|
+
bottomBarNavigation?: boolean;
|
|
386
405
|
/** Animate fit/center/focus actions for 300ms by default. Per-action flags override this; reduced motion stays instant. */
|
|
387
406
|
animateViewport?: boolean;
|
|
388
407
|
disableAnimations?: boolean;
|
|
@@ -403,6 +422,7 @@ export declare interface FlowDiagramConfig {
|
|
|
403
422
|
edgeMode?: EdgeMode;
|
|
404
423
|
compactPropertyLayout?: boolean;
|
|
405
424
|
nodeViewModes?: Record<string, NodeViewMode>;
|
|
425
|
+
allNodesIconLabel?: boolean;
|
|
406
426
|
workflowContract?: WorkflowContract;
|
|
407
427
|
/** Layout algorithm */
|
|
408
428
|
layout?: LayoutAlgorithm;
|
|
@@ -420,6 +440,9 @@ export declare interface FlowDiagramConfig {
|
|
|
420
440
|
parentNodeStyle?: ParentNodeStyle;
|
|
421
441
|
/** Min zoom level (default: 0.01) */
|
|
422
442
|
minZoom?: number;
|
|
443
|
+
nodeGridSpacing?: "collision" | "layout";
|
|
444
|
+
nodeGridConnections?: boolean;
|
|
445
|
+
bottomBarFill?: boolean;
|
|
423
446
|
/** Max zoom level (default: 1.5) */
|
|
424
447
|
maxZoom?: number;
|
|
425
448
|
/** Initial viewport position and zoom */
|
|
@@ -448,7 +471,7 @@ export declare interface FlowDiagramConfig {
|
|
|
448
471
|
renderBottomBar?: (props: BottomBarRenderProps) => React.ReactNode;
|
|
449
472
|
/** Built-in node/edge selection toolbars (bottom bar swaps to them on select). `false` disables. */
|
|
450
473
|
selectionToolbar?: SelectionToolbarConfig | false;
|
|
451
|
-
/** Custom
|
|
474
|
+
/** Custom views: objectView, arrayView, text, parentContainer; jsxContent receives JsxContentRendererProps. */
|
|
452
475
|
customViews?: Record<string, React.ComponentType<any>>;
|
|
453
476
|
/** Disable built-in keyboard shortcuts (Z/M/D) when the consumer handles its own */
|
|
454
477
|
disableKeyboardShortcuts?: boolean;
|
|
@@ -467,6 +490,8 @@ export declare interface FlowDiagramContextValue {
|
|
|
467
490
|
setAllNodesIconLabel: (enabled: boolean) => void;
|
|
468
491
|
nodeViewModes: Record<string, NodeViewMode>;
|
|
469
492
|
setNodeViewMode: (nodeId: string, mode: NodeViewMode) => void;
|
|
493
|
+
nodeRadiusPreviews: Record<string, number>;
|
|
494
|
+
setNodeRadiusPreview: (ids: string[], radius: number | undefined) => void;
|
|
470
495
|
spacing: number;
|
|
471
496
|
edgeRadius: number | undefined;
|
|
472
497
|
setEdgeRadius: (radius: number) => void;
|
|
@@ -507,6 +532,11 @@ export declare interface FlowDiagramContextValue {
|
|
|
507
532
|
setIsPinned: (v: boolean) => void;
|
|
508
533
|
isPerformanceMode: boolean;
|
|
509
534
|
setIsPerformanceMode: (v: boolean) => void;
|
|
535
|
+
nodeGridOptions: NodeGridOptions | null;
|
|
536
|
+
setNodeGridOptions: (options: NodeGridOptions | null) => void;
|
|
537
|
+
lastNodeGridOptions: NodeGridOptions;
|
|
538
|
+
fillRadiusEditedIds: ReadonlySet<string>;
|
|
539
|
+
setFillRadiusEditedIds: (ids: Set<string>) => void;
|
|
510
540
|
engineRef: React.MutableRefObject<FlowEngine | null>;
|
|
511
541
|
callbacks: FlowDiagramCallbacks;
|
|
512
542
|
config: FlowDiagramConfig;
|
|
@@ -639,6 +669,11 @@ export declare interface FlowEngine {
|
|
|
639
669
|
clientToModel(clientX: number, clientY: number): Point;
|
|
640
670
|
modelToClient(p: Point): Point;
|
|
641
671
|
getNodeBox(id: string): Box | undefined;
|
|
672
|
+
detectNodeCollisions(options?: NodeCollisionOptions): NodeCollision[];
|
|
673
|
+
resolveNodeCollisions(options?: ResolveNodeCollisionsOptions): NodeCollisionResolution;
|
|
674
|
+
arrangeNodesInGrid(options?: NodeGridOptions): NodeGridArrangement;
|
|
675
|
+
setNodeGridMode(enabled: boolean, options?: NodeGridOptions): void;
|
|
676
|
+
swapGridNodes(source: string, target: string, animate?: boolean): boolean;
|
|
642
677
|
setNodePosition(id: string, position: Point | undefined, options?: {
|
|
643
678
|
persist?: boolean;
|
|
644
679
|
}): boolean;
|
|
@@ -807,6 +842,18 @@ export declare function getInteractionSurface(surface: string, border: string):
|
|
|
807
842
|
|
|
808
843
|
export declare function getNode(json: SqueedJson, address: string): any;
|
|
809
844
|
|
|
845
|
+
export declare function getSelectionRoots(json: SqueedJson, ids: string[]): string[];
|
|
846
|
+
|
|
847
|
+
declare interface GridDivider {
|
|
848
|
+
section: string;
|
|
849
|
+
axis: "x" | "y";
|
|
850
|
+
row: number;
|
|
851
|
+
index: number;
|
|
852
|
+
weights: number[];
|
|
853
|
+
length: number;
|
|
854
|
+
position: Point;
|
|
855
|
+
}
|
|
856
|
+
|
|
810
857
|
export declare interface JsonPlaybackState {
|
|
811
858
|
position: number;
|
|
812
859
|
total: number;
|
|
@@ -822,11 +869,26 @@ export declare interface JsonStreamOptions<Document> {
|
|
|
822
869
|
maxBytes?: number;
|
|
823
870
|
}
|
|
824
871
|
|
|
872
|
+
export declare interface JsxContentRendererProps {
|
|
873
|
+
components: {
|
|
874
|
+
type: string;
|
|
875
|
+
[key: string]: unknown;
|
|
876
|
+
}[];
|
|
877
|
+
colorMode?: "light" | "dark";
|
|
878
|
+
fillHeight?: boolean;
|
|
879
|
+
}
|
|
880
|
+
|
|
825
881
|
export declare type LayoutAlgorithm = "dagre" | "elk" | "tidytree" | "concentric" | "cose";
|
|
826
882
|
|
|
827
883
|
export declare const LIGHT_BLACK = "#c6c6c6";
|
|
828
884
|
|
|
829
|
-
export declare
|
|
885
|
+
export declare function LoadingBorder({ active, label, radius }: {
|
|
886
|
+
active?: boolean;
|
|
887
|
+
label?: string;
|
|
888
|
+
radius?: number;
|
|
889
|
+
}): JSX_2.Element;
|
|
890
|
+
|
|
891
|
+
export declare const NODE_TYPE_VIEWS: readonly ["", "icon-label", "object", "text", "grid", "parent"];
|
|
830
892
|
|
|
831
893
|
export declare type NodeAlignment = "leading" | "center" | "trailing";
|
|
832
894
|
|
|
@@ -837,11 +899,31 @@ export declare function NodeBorderRadiusControl({ ids, showDivider, }: {
|
|
|
837
899
|
showDivider?: boolean;
|
|
838
900
|
}): JSX_2.Element;
|
|
839
901
|
|
|
902
|
+
export declare interface NodeCollision {
|
|
903
|
+
source: string;
|
|
904
|
+
target: string;
|
|
905
|
+
overlap: Point;
|
|
906
|
+
}
|
|
907
|
+
|
|
908
|
+
export declare interface NodeCollisionOptions {
|
|
909
|
+
margin?: number;
|
|
910
|
+
}
|
|
911
|
+
|
|
912
|
+
export declare interface NodeCollisionResolution {
|
|
913
|
+
positions: Map<string, Point>;
|
|
914
|
+
movedNodeIds: string[];
|
|
915
|
+
collisions: NodeCollision[];
|
|
916
|
+
iterations: number;
|
|
917
|
+
resolved: boolean;
|
|
918
|
+
}
|
|
919
|
+
|
|
840
920
|
export declare function NodeConfigSummary({ nodeAddress, expanded, }: {
|
|
841
921
|
nodeAddress: string;
|
|
842
922
|
expanded?: boolean;
|
|
843
923
|
}): JSX_2.Element;
|
|
844
924
|
|
|
925
|
+
export declare type NodeContent = string | Record<string, unknown>[];
|
|
926
|
+
|
|
845
927
|
export declare function NodeForm({ nodeAddress, structured, }: {
|
|
846
928
|
nodeAddress: string;
|
|
847
929
|
structured?: boolean;
|
|
@@ -859,6 +941,38 @@ export declare function NodeFormPopover({ nodeAddress, active, label, open, onCl
|
|
|
859
941
|
width?: number;
|
|
860
942
|
}): JSX_2.Element;
|
|
861
943
|
|
|
944
|
+
export declare interface NodeGridArrangement {
|
|
945
|
+
dividers?: GridDivider[];
|
|
946
|
+
positions: Map<string, Point>;
|
|
947
|
+
movedNodeIds: string[];
|
|
948
|
+
skippedNodeIds: string[];
|
|
949
|
+
collisions: NodeCollision[];
|
|
950
|
+
bounds?: Rect;
|
|
951
|
+
sizes?: Map<string, {
|
|
952
|
+
w: number;
|
|
953
|
+
h: number;
|
|
954
|
+
}>;
|
|
955
|
+
}
|
|
956
|
+
|
|
957
|
+
export declare interface NodeGridOptions extends NodeCollisionOptions {
|
|
958
|
+
adjustment?: {
|
|
959
|
+
enabled?: boolean;
|
|
960
|
+
sections?: Record<string, {
|
|
961
|
+
rows?: number[];
|
|
962
|
+
columns?: number[][];
|
|
963
|
+
}>;
|
|
964
|
+
};
|
|
965
|
+
order?: string[];
|
|
966
|
+
columns?: number;
|
|
967
|
+
animate?: boolean;
|
|
968
|
+
gaps?: number | {
|
|
969
|
+
x: number;
|
|
970
|
+
y: number;
|
|
971
|
+
};
|
|
972
|
+
fill?: boolean;
|
|
973
|
+
padding?: number;
|
|
974
|
+
}
|
|
975
|
+
|
|
862
976
|
export declare function NodeIconPicker({ nodeId, edgeId, value, open: requestedOpen, onOpenChange, }: {
|
|
863
977
|
nodeId?: string;
|
|
864
978
|
edgeId?: string;
|
|
@@ -976,6 +1090,13 @@ export declare function readFormSchema(file: Pick<File, "name" | "size" | "text"
|
|
|
976
1090
|
|
|
977
1091
|
export declare function readWorkflowContract(file: File): Promise<WorkflowContract>;
|
|
978
1092
|
|
|
1093
|
+
declare interface Rect {
|
|
1094
|
+
x1: number;
|
|
1095
|
+
y1: number;
|
|
1096
|
+
x2: number;
|
|
1097
|
+
y2: number;
|
|
1098
|
+
}
|
|
1099
|
+
|
|
979
1100
|
/** Removes explicit edges or suppresses a hierarchy edge without deleting its child. */
|
|
980
1101
|
export declare function removeEdge(json: SqueedJson, edge: RenderedEdgeRef): {
|
|
981
1102
|
json: SqueedJson;
|
|
@@ -995,6 +1116,8 @@ export declare interface RenderedEdgeRef extends FlowEdgeProperties {
|
|
|
995
1116
|
};
|
|
996
1117
|
}
|
|
997
1118
|
|
|
1119
|
+
export declare function reparentNode(json: SqueedJson, nodeId: string, parentId: string): SqueedJson;
|
|
1120
|
+
|
|
998
1121
|
/**
|
|
999
1122
|
* Resolve which JSON node carries an edge's keys.
|
|
1000
1123
|
* parent→child edges (implicit hierarchy) are configured on the child;
|
|
@@ -1005,6 +1128,11 @@ export declare function resolveEdgeOwner(edge: RenderedEdgeRef): {
|
|
|
1005
1128
|
kind: "hierarchy" | "target" | "connection";
|
|
1006
1129
|
};
|
|
1007
1130
|
|
|
1131
|
+
export declare interface ResolveNodeCollisionsOptions extends NodeCollisionOptions {
|
|
1132
|
+
animate?: boolean;
|
|
1133
|
+
maxIterations?: number;
|
|
1134
|
+
}
|
|
1135
|
+
|
|
1008
1136
|
export declare function resolveStateView(view: SqueedJson, state: SqueedJson): SqueedJson;
|
|
1009
1137
|
|
|
1010
1138
|
declare interface RuntimeReference {
|
|
@@ -1180,11 +1308,14 @@ rememberAction?: boolean;
|
|
|
1180
1308
|
|
|
1181
1309
|
export declare const ToolbarRangeInput: ForwardRefExoticComponent<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & RefAttributes<HTMLInputElement>>;
|
|
1182
1310
|
|
|
1183
|
-
export declare function ToolbarScrollContainer({ children, background, border, endElement, }: {
|
|
1311
|
+
export declare function ToolbarScrollContainer({ children, background, border, endElement, startElement, startElementWidth, framed, }: {
|
|
1184
1312
|
children: ReactNode;
|
|
1185
1313
|
background: string;
|
|
1186
1314
|
border: string;
|
|
1187
1315
|
endElement?: ReactNode;
|
|
1316
|
+
startElement?: ReactNode;
|
|
1317
|
+
startElementWidth?: number;
|
|
1318
|
+
framed?: boolean;
|
|
1188
1319
|
}): JSX_2.Element;
|
|
1189
1320
|
|
|
1190
1321
|
export declare function ToolbarSelect({ children, value, onValueChange, disabled, style, title, icon, popupContent, footer, labelCase, "aria-label": label, ...triggerProps }: {
|
|
@@ -1294,6 +1425,8 @@ export declare function useThemeContentColors(color: any): {
|
|
|
1294
1425
|
highlightColorFaint: string;
|
|
1295
1426
|
};
|
|
1296
1427
|
|
|
1428
|
+
export declare function validateGridAdjustment(adjustment: NodeGridOptions["adjustment"]): void;
|
|
1429
|
+
|
|
1297
1430
|
declare interface ViewportState {
|
|
1298
1431
|
pan: Point;
|
|
1299
1432
|
zoom: number;
|