@01.software/sdk 0.4.3-dev.260324.6dc30aa → 0.5.0
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 +13 -13
- package/dist/index.cjs +8 -8
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +21 -12
- package/dist/index.d.ts +21 -12
- package/dist/index.js +8 -8
- package/dist/index.js.map +1 -1
- package/dist/realtime.cjs +1 -1
- package/dist/realtime.cjs.map +1 -1
- package/dist/realtime.js +1 -1
- package/dist/realtime.js.map +1 -1
- package/dist/server-B80o7igg.d.cts +242 -0
- package/dist/server-B80o7igg.d.ts +242 -0
- package/dist/ui/flow/server.cjs +233 -0
- package/dist/ui/flow/server.cjs.map +1 -0
- package/dist/ui/flow/server.d.cts +3 -0
- package/dist/ui/flow/server.d.ts +3 -0
- package/dist/ui/flow/server.js +213 -0
- package/dist/ui/flow/server.js.map +1 -0
- package/dist/ui/flow.cjs +302 -139
- package/dist/ui/flow.cjs.map +1 -1
- package/dist/ui/flow.d.cts +20 -215
- package/dist/ui/flow.d.ts +20 -215
- package/dist/ui/flow.js +306 -147
- package/dist/ui/flow.js.map +1 -1
- package/package.json +12 -8
package/dist/ui/flow.d.cts
CHANGED
|
@@ -1,181 +1,13 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import { N as NodeTypeDef, E as EdgeTypeDef, C as CanvasData, F as FlowNode, D as DynamicNodeSlotProps, a as FlowEdge, b as FrameNodeSlotProps, c as EdgeSlotProps, d as NodeWrapperSlotProps, e as FlowViewport, f as FlowBounds } from '../server-B80o7igg.cjs';
|
|
2
|
+
export { i as DynamicNodeData, h as FlowNodeData, g as FlowNodePosition, s as FrameData, j as FrameNodeData, k as NodeTypeFieldDef, P as PrefetchFlowOptions, S as SDKClient, U as UseFlowOptions, n as UseFlowResult, r as getFrameData, q as getFrames, o as getNodeBounds, l as isDynamicNode, m as isFrameNode, p as prefetchFlow, u as useFlow } from '../server-B80o7igg.cjs';
|
|
3
3
|
import { Edge } from '@xyflow/react';
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
nodeTypeSlug: string;
|
|
7
|
-
label: string;
|
|
8
|
-
fields: Record<string, unknown>;
|
|
9
|
-
}
|
|
10
|
-
type FlowNodeData = (DynamicNodeData | FrameNodeData) & Record<string, unknown>;
|
|
11
|
-
interface FlowNodePosition {
|
|
12
|
-
x: number;
|
|
13
|
-
y: number;
|
|
14
|
-
}
|
|
15
|
-
interface FlowNode {
|
|
16
|
-
id: string;
|
|
17
|
-
type?: string;
|
|
18
|
-
position: FlowNodePosition;
|
|
19
|
-
data: FlowNodeData;
|
|
20
|
-
parentId?: string;
|
|
21
|
-
style?: React.CSSProperties;
|
|
22
|
-
width?: number;
|
|
23
|
-
height?: number;
|
|
24
|
-
measured?: {
|
|
25
|
-
width?: number;
|
|
26
|
-
height?: number;
|
|
27
|
-
};
|
|
28
|
-
draggable?: boolean;
|
|
29
|
-
selectable?: boolean;
|
|
30
|
-
[key: string]: unknown;
|
|
31
|
-
}
|
|
32
|
-
interface FlowEdge {
|
|
33
|
-
id: string;
|
|
34
|
-
source: string;
|
|
35
|
-
target: string;
|
|
36
|
-
sourceHandle?: string | null;
|
|
37
|
-
targetHandle?: string | null;
|
|
38
|
-
type?: string;
|
|
39
|
-
style?: React.CSSProperties;
|
|
40
|
-
animated?: boolean;
|
|
41
|
-
markerStart?: unknown;
|
|
42
|
-
markerEnd?: unknown;
|
|
43
|
-
edgeTypeSlug?: string;
|
|
44
|
-
fields?: Record<string, unknown>;
|
|
45
|
-
[key: string]: unknown;
|
|
46
|
-
}
|
|
47
|
-
interface FlowViewport {
|
|
48
|
-
x: number;
|
|
49
|
-
y: number;
|
|
50
|
-
zoom: number;
|
|
51
|
-
}
|
|
52
|
-
interface CanvasData {
|
|
53
|
-
nodes: FlowNode[];
|
|
54
|
-
edges: FlowEdge[];
|
|
55
|
-
viewport: FlowViewport;
|
|
56
|
-
}
|
|
57
|
-
interface NodeTypeFieldDef {
|
|
58
|
-
name: string;
|
|
59
|
-
label: string;
|
|
60
|
-
fieldType: 'text' | 'textarea' | 'number' | 'url' | 'color' | 'image' | 'select' | 'toggle';
|
|
61
|
-
options?: {
|
|
62
|
-
label: string;
|
|
63
|
-
value: string;
|
|
64
|
-
}[];
|
|
65
|
-
defaultValue?: string;
|
|
66
|
-
required?: boolean;
|
|
67
|
-
}
|
|
68
|
-
interface NodeTypeDef {
|
|
69
|
-
slug: string;
|
|
70
|
-
name: string;
|
|
71
|
-
color: string;
|
|
72
|
-
defaultSize: {
|
|
73
|
-
width: number;
|
|
74
|
-
height: number;
|
|
75
|
-
};
|
|
76
|
-
fields: NodeTypeFieldDef[];
|
|
77
|
-
transparentBackground?: boolean;
|
|
78
|
-
template?: string | null;
|
|
79
|
-
customCSS?: string | null;
|
|
80
|
-
}
|
|
81
|
-
interface EdgeTypeDef {
|
|
82
|
-
slug: string;
|
|
83
|
-
name: string;
|
|
84
|
-
color: string;
|
|
85
|
-
strokeWidth: number;
|
|
86
|
-
animated: boolean;
|
|
87
|
-
lineStyle: string;
|
|
88
|
-
markerStart: string;
|
|
89
|
-
markerEnd: string;
|
|
90
|
-
fields: NodeTypeFieldDef[];
|
|
91
|
-
}
|
|
92
|
-
declare function isDynamicNode(node: FlowNode): node is FlowNode & {
|
|
93
|
-
data: DynamicNodeData;
|
|
94
|
-
};
|
|
95
|
-
declare function isFrameNode(node: FlowNode): node is FlowNode & {
|
|
96
|
-
data: FrameNodeData;
|
|
97
|
-
};
|
|
98
|
-
interface DynamicNodeSlotProps {
|
|
99
|
-
id: string;
|
|
100
|
-
nodeTypeSlug: string;
|
|
101
|
-
label: string;
|
|
102
|
-
fields: Record<string, unknown>;
|
|
103
|
-
nodeTypeDef?: NodeTypeDef;
|
|
104
|
-
}
|
|
105
|
-
interface FrameNodeData {
|
|
106
|
-
label: string;
|
|
107
|
-
color?: string;
|
|
108
|
-
padding?: number;
|
|
109
|
-
borderStyle?: 'dashed' | 'solid' | 'none';
|
|
110
|
-
opacity?: number;
|
|
111
|
-
}
|
|
112
|
-
interface FrameNodeSlotProps {
|
|
113
|
-
id: string;
|
|
114
|
-
label: string;
|
|
115
|
-
color?: string;
|
|
116
|
-
padding?: number;
|
|
117
|
-
borderStyle?: 'dashed' | 'solid' | 'none';
|
|
118
|
-
opacity?: number;
|
|
119
|
-
children?: React.ReactNode;
|
|
120
|
-
}
|
|
121
|
-
interface EdgeSlotProps {
|
|
122
|
-
id: string;
|
|
123
|
-
edgeTypeSlug?: string;
|
|
124
|
-
source: string;
|
|
125
|
-
target: string;
|
|
126
|
-
label?: string;
|
|
127
|
-
fields?: Record<string, unknown>;
|
|
128
|
-
edgeTypeDef?: EdgeTypeDef;
|
|
129
|
-
style?: React.CSSProperties;
|
|
130
|
-
}
|
|
131
|
-
interface NodeWrapperSlotProps {
|
|
132
|
-
id: string;
|
|
133
|
-
nodeTypeSlug: string;
|
|
134
|
-
label: string;
|
|
135
|
-
selected?: boolean;
|
|
136
|
-
nodeTypeDef?: NodeTypeDef;
|
|
137
|
-
children: React.ReactNode;
|
|
138
|
-
}
|
|
139
|
-
interface FlowBounds {
|
|
140
|
-
x: number;
|
|
141
|
-
y: number;
|
|
142
|
-
width: number;
|
|
143
|
-
height: number;
|
|
144
|
-
}
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import '@tanstack/react-query';
|
|
145
6
|
|
|
146
7
|
declare const BUILT_IN_NODE_TYPES: NodeTypeDef[];
|
|
147
8
|
|
|
148
9
|
declare const BUILT_IN_EDGE_TYPES: EdgeTypeDef[];
|
|
149
10
|
|
|
150
|
-
type FlowCollection = 'flows' | 'flow-node-types' | 'flow-edge-types';
|
|
151
|
-
type AnyFn = (...args: any[]) => any;
|
|
152
|
-
interface SDKClient {
|
|
153
|
-
from(collection: FlowCollection): {
|
|
154
|
-
find: AnyFn;
|
|
155
|
-
findById: AnyFn;
|
|
156
|
-
};
|
|
157
|
-
queryClient: QueryClient;
|
|
158
|
-
}
|
|
159
|
-
interface UseFlowOptions {
|
|
160
|
-
/** SDK client instance (BrowserClient or ServerClient) */
|
|
161
|
-
client: SDKClient;
|
|
162
|
-
/** Flow slug (URL-friendly identifier) */
|
|
163
|
-
slug?: string;
|
|
164
|
-
/** Flow document ID (UUID) */
|
|
165
|
-
id?: string;
|
|
166
|
-
/** Enable/disable data fetching (default: true) */
|
|
167
|
-
enabled?: boolean;
|
|
168
|
-
}
|
|
169
|
-
interface UseFlowResult {
|
|
170
|
-
data: CanvasData | undefined;
|
|
171
|
-
nodeTypeDefs: NodeTypeDef[];
|
|
172
|
-
edgeTypeDefs: EdgeTypeDef[];
|
|
173
|
-
flow: Record<string, unknown> | undefined;
|
|
174
|
-
isLoading: boolean;
|
|
175
|
-
error: Error | null;
|
|
176
|
-
}
|
|
177
|
-
declare function useFlow(options: UseFlowOptions): UseFlowResult;
|
|
178
|
-
|
|
179
11
|
interface UseFlowDataOptions {
|
|
180
12
|
/** Canvas data from Flow document's `canvas` field */
|
|
181
13
|
data: CanvasData | undefined;
|
|
@@ -201,45 +33,6 @@ interface UseFlowDataResult {
|
|
|
201
33
|
*/
|
|
202
34
|
declare function useFlowData(options: UseFlowDataOptions): UseFlowDataResult;
|
|
203
35
|
|
|
204
|
-
/**
|
|
205
|
-
* Calculate bounding box for given node IDs.
|
|
206
|
-
* Pure function — usable in SSR, server components, or outside React.
|
|
207
|
-
*/
|
|
208
|
-
declare function getNodeBounds(nodes: FlowNode[], nodeIds: string[]): FlowBounds | undefined;
|
|
209
|
-
/**
|
|
210
|
-
* Get all frame nodes with their bounds.
|
|
211
|
-
* Sorted by position (top-left to bottom-right).
|
|
212
|
-
*/
|
|
213
|
-
declare function getFrames(nodes: FlowNode[]): Array<{
|
|
214
|
-
id: string;
|
|
215
|
-
label: string;
|
|
216
|
-
bounds: FlowBounds;
|
|
217
|
-
}>;
|
|
218
|
-
/** Result of getFrameData — contains filtered canvas + dual bounds. */
|
|
219
|
-
interface FrameData {
|
|
220
|
-
/** Canvas data containing only the frame's descendants (nodes have draggable: false). */
|
|
221
|
-
data: CanvasData;
|
|
222
|
-
/** Bounding box of child content nodes — use for initial viewport fit (centering). */
|
|
223
|
-
fitBounds: FlowBounds;
|
|
224
|
-
/** Bounding box of the frame itself — use for panning/zoom restriction (clamp). */
|
|
225
|
-
clampBounds: FlowBounds;
|
|
226
|
-
/** @deprecated Use fitBounds instead. Alias for clampBounds for backward compatibility. */
|
|
227
|
-
bounds: FlowBounds;
|
|
228
|
-
}
|
|
229
|
-
/**
|
|
230
|
-
* Extract a frame's descendants and related edges from canvas data.
|
|
231
|
-
* Recursively collects all nested children (supports nested frames).
|
|
232
|
-
* Returns undefined if frameId is not found or is not a frame node.
|
|
233
|
-
*
|
|
234
|
-
* Child nodes are marked `draggable: false` to prevent interfering with canvas panning.
|
|
235
|
-
* The frame node itself is included (use `frameRenderer={() => null}` to hide it).
|
|
236
|
-
*
|
|
237
|
-
* Returns dual bounds:
|
|
238
|
-
* - `fitBounds`: child content bounding box (for centering the viewport)
|
|
239
|
-
* - `clampBounds`: frame area bounding box (for panning restriction)
|
|
240
|
-
*/
|
|
241
|
-
declare function getFrameData(data: CanvasData, frameId: string): FrameData | undefined;
|
|
242
|
-
|
|
243
36
|
interface CodeComponentProps {
|
|
244
37
|
fields: Record<string, unknown>;
|
|
245
38
|
label: string;
|
|
@@ -280,6 +73,14 @@ interface FlowRendererProps {
|
|
|
280
73
|
fitView?: boolean;
|
|
281
74
|
/** Called when a node is clicked */
|
|
282
75
|
onNodeClick?: (event: React.MouseEvent, node: FlowNode) => void;
|
|
76
|
+
/** Called when a node is double-clicked */
|
|
77
|
+
onNodeDoubleClick?: (event: React.MouseEvent, node: FlowNode) => void;
|
|
78
|
+
/** Called on node right-click / context menu */
|
|
79
|
+
onNodeContextMenu?: (event: React.MouseEvent, node: FlowNode) => void;
|
|
80
|
+
/** Called when mouse enters a node */
|
|
81
|
+
onNodeMouseEnter?: (event: React.MouseEvent, node: FlowNode) => void;
|
|
82
|
+
/** Called when mouse leaves a node */
|
|
83
|
+
onNodeMouseLeave?: (event: React.MouseEvent, node: FlowNode) => void;
|
|
283
84
|
/** Called when an edge is clicked */
|
|
284
85
|
onEdgeClick?: (event: React.MouseEvent, edge: FlowEdge) => void;
|
|
285
86
|
/** S1: Custom frame node renderer. Should be a stable reference (memoize or define outside render). */
|
|
@@ -296,8 +97,8 @@ interface FlowRendererProps {
|
|
|
296
97
|
minimapNodeColor?: (node: FlowNode) => string;
|
|
297
98
|
/** S4: Additional children rendered inside ReactFlow */
|
|
298
99
|
children?: React.ReactNode;
|
|
299
|
-
/** S5: Global override for all dynamic nodes.
|
|
300
|
-
renderNode?: (props: DynamicNodeSlotProps,
|
|
100
|
+
/** S5: Global override for all dynamic nodes. `content` is the resolved rendering (custom renderer output or default). `props.defaultRender` contains the original template/field-based rendering. */
|
|
101
|
+
renderNode?: (props: DynamicNodeSlotProps, content: React.ReactElement) => React.ReactElement | null;
|
|
301
102
|
/** S6: Called when viewport changes (pan/zoom) */
|
|
302
103
|
onViewportChange?: (viewport: FlowViewport) => void;
|
|
303
104
|
/** S6: Default viewport (used when fitView is false) */
|
|
@@ -316,7 +117,11 @@ interface FlowRendererProps {
|
|
|
316
117
|
responsiveFit?: boolean;
|
|
317
118
|
/** Override translateExtent directly. When set, overrides the automatic bounds-based panning restriction. */
|
|
318
119
|
translateExtent?: [[number, number], [number, number]];
|
|
120
|
+
/** Minimum zoom level. When clampBounds is set, automatically enforced as cover zoom (user cannot zoom out beyond the frame). */
|
|
121
|
+
minZoom?: number;
|
|
122
|
+
/** Maximum zoom level */
|
|
123
|
+
maxZoom?: number;
|
|
319
124
|
}
|
|
320
|
-
declare function FlowRenderer({ data, className, style, nodeRenderers, nodeTypeDefs, edgeTypeDefs, background, interactive, fitView, onNodeClick, onEdgeClick, frameRenderer, edgeRenderers, nodeWrapper, controls, minimap, minimapNodeColor, children, renderNode, onViewportChange, defaultViewport: defaultViewportProp, bounds, clampBounds, focusPadding, focusAnimation, focusMode, responsiveFit, translateExtent: translateExtentProp, }: FlowRendererProps): React.JSX.Element | null;
|
|
125
|
+
declare function FlowRenderer({ data, className, style, nodeRenderers, nodeTypeDefs, edgeTypeDefs, background, interactive, fitView, onNodeClick, onNodeDoubleClick, onNodeContextMenu, onNodeMouseEnter, onNodeMouseLeave, onEdgeClick, frameRenderer, edgeRenderers, nodeWrapper, controls, minimap, minimapNodeColor, children, renderNode, onViewportChange, defaultViewport: defaultViewportProp, bounds, clampBounds, focusPadding, focusAnimation, focusMode, responsiveFit, translateExtent: translateExtentProp, minZoom: minZoomProp, maxZoom: maxZoomProp, }: FlowRendererProps): React.JSX.Element | null;
|
|
321
126
|
|
|
322
|
-
export { BUILT_IN_EDGE_TYPES, BUILT_IN_NODE_TYPES,
|
|
127
|
+
export { BUILT_IN_EDGE_TYPES, BUILT_IN_NODE_TYPES, CanvasData, type CodeComponentProps, DynamicNodeSlotProps, EdgeSlotProps, EdgeTypeDef, FlowBounds, FlowEdge, FlowNode, FlowRenderer, type FlowRendererProps, FlowViewport, FrameNodeSlotProps, NodeTypeDef, NodeWrapperSlotProps, type UseFlowDataOptions, type UseFlowDataResult, clearTemplateCache, compileTemplate, useFlowData };
|
package/dist/ui/flow.d.ts
CHANGED
|
@@ -1,181 +1,13 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import { N as NodeTypeDef, E as EdgeTypeDef, C as CanvasData, F as FlowNode, D as DynamicNodeSlotProps, a as FlowEdge, b as FrameNodeSlotProps, c as EdgeSlotProps, d as NodeWrapperSlotProps, e as FlowViewport, f as FlowBounds } from '../server-B80o7igg.js';
|
|
2
|
+
export { i as DynamicNodeData, h as FlowNodeData, g as FlowNodePosition, s as FrameData, j as FrameNodeData, k as NodeTypeFieldDef, P as PrefetchFlowOptions, S as SDKClient, U as UseFlowOptions, n as UseFlowResult, r as getFrameData, q as getFrames, o as getNodeBounds, l as isDynamicNode, m as isFrameNode, p as prefetchFlow, u as useFlow } from '../server-B80o7igg.js';
|
|
3
3
|
import { Edge } from '@xyflow/react';
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
nodeTypeSlug: string;
|
|
7
|
-
label: string;
|
|
8
|
-
fields: Record<string, unknown>;
|
|
9
|
-
}
|
|
10
|
-
type FlowNodeData = (DynamicNodeData | FrameNodeData) & Record<string, unknown>;
|
|
11
|
-
interface FlowNodePosition {
|
|
12
|
-
x: number;
|
|
13
|
-
y: number;
|
|
14
|
-
}
|
|
15
|
-
interface FlowNode {
|
|
16
|
-
id: string;
|
|
17
|
-
type?: string;
|
|
18
|
-
position: FlowNodePosition;
|
|
19
|
-
data: FlowNodeData;
|
|
20
|
-
parentId?: string;
|
|
21
|
-
style?: React.CSSProperties;
|
|
22
|
-
width?: number;
|
|
23
|
-
height?: number;
|
|
24
|
-
measured?: {
|
|
25
|
-
width?: number;
|
|
26
|
-
height?: number;
|
|
27
|
-
};
|
|
28
|
-
draggable?: boolean;
|
|
29
|
-
selectable?: boolean;
|
|
30
|
-
[key: string]: unknown;
|
|
31
|
-
}
|
|
32
|
-
interface FlowEdge {
|
|
33
|
-
id: string;
|
|
34
|
-
source: string;
|
|
35
|
-
target: string;
|
|
36
|
-
sourceHandle?: string | null;
|
|
37
|
-
targetHandle?: string | null;
|
|
38
|
-
type?: string;
|
|
39
|
-
style?: React.CSSProperties;
|
|
40
|
-
animated?: boolean;
|
|
41
|
-
markerStart?: unknown;
|
|
42
|
-
markerEnd?: unknown;
|
|
43
|
-
edgeTypeSlug?: string;
|
|
44
|
-
fields?: Record<string, unknown>;
|
|
45
|
-
[key: string]: unknown;
|
|
46
|
-
}
|
|
47
|
-
interface FlowViewport {
|
|
48
|
-
x: number;
|
|
49
|
-
y: number;
|
|
50
|
-
zoom: number;
|
|
51
|
-
}
|
|
52
|
-
interface CanvasData {
|
|
53
|
-
nodes: FlowNode[];
|
|
54
|
-
edges: FlowEdge[];
|
|
55
|
-
viewport: FlowViewport;
|
|
56
|
-
}
|
|
57
|
-
interface NodeTypeFieldDef {
|
|
58
|
-
name: string;
|
|
59
|
-
label: string;
|
|
60
|
-
fieldType: 'text' | 'textarea' | 'number' | 'url' | 'color' | 'image' | 'select' | 'toggle';
|
|
61
|
-
options?: {
|
|
62
|
-
label: string;
|
|
63
|
-
value: string;
|
|
64
|
-
}[];
|
|
65
|
-
defaultValue?: string;
|
|
66
|
-
required?: boolean;
|
|
67
|
-
}
|
|
68
|
-
interface NodeTypeDef {
|
|
69
|
-
slug: string;
|
|
70
|
-
name: string;
|
|
71
|
-
color: string;
|
|
72
|
-
defaultSize: {
|
|
73
|
-
width: number;
|
|
74
|
-
height: number;
|
|
75
|
-
};
|
|
76
|
-
fields: NodeTypeFieldDef[];
|
|
77
|
-
transparentBackground?: boolean;
|
|
78
|
-
template?: string | null;
|
|
79
|
-
customCSS?: string | null;
|
|
80
|
-
}
|
|
81
|
-
interface EdgeTypeDef {
|
|
82
|
-
slug: string;
|
|
83
|
-
name: string;
|
|
84
|
-
color: string;
|
|
85
|
-
strokeWidth: number;
|
|
86
|
-
animated: boolean;
|
|
87
|
-
lineStyle: string;
|
|
88
|
-
markerStart: string;
|
|
89
|
-
markerEnd: string;
|
|
90
|
-
fields: NodeTypeFieldDef[];
|
|
91
|
-
}
|
|
92
|
-
declare function isDynamicNode(node: FlowNode): node is FlowNode & {
|
|
93
|
-
data: DynamicNodeData;
|
|
94
|
-
};
|
|
95
|
-
declare function isFrameNode(node: FlowNode): node is FlowNode & {
|
|
96
|
-
data: FrameNodeData;
|
|
97
|
-
};
|
|
98
|
-
interface DynamicNodeSlotProps {
|
|
99
|
-
id: string;
|
|
100
|
-
nodeTypeSlug: string;
|
|
101
|
-
label: string;
|
|
102
|
-
fields: Record<string, unknown>;
|
|
103
|
-
nodeTypeDef?: NodeTypeDef;
|
|
104
|
-
}
|
|
105
|
-
interface FrameNodeData {
|
|
106
|
-
label: string;
|
|
107
|
-
color?: string;
|
|
108
|
-
padding?: number;
|
|
109
|
-
borderStyle?: 'dashed' | 'solid' | 'none';
|
|
110
|
-
opacity?: number;
|
|
111
|
-
}
|
|
112
|
-
interface FrameNodeSlotProps {
|
|
113
|
-
id: string;
|
|
114
|
-
label: string;
|
|
115
|
-
color?: string;
|
|
116
|
-
padding?: number;
|
|
117
|
-
borderStyle?: 'dashed' | 'solid' | 'none';
|
|
118
|
-
opacity?: number;
|
|
119
|
-
children?: React.ReactNode;
|
|
120
|
-
}
|
|
121
|
-
interface EdgeSlotProps {
|
|
122
|
-
id: string;
|
|
123
|
-
edgeTypeSlug?: string;
|
|
124
|
-
source: string;
|
|
125
|
-
target: string;
|
|
126
|
-
label?: string;
|
|
127
|
-
fields?: Record<string, unknown>;
|
|
128
|
-
edgeTypeDef?: EdgeTypeDef;
|
|
129
|
-
style?: React.CSSProperties;
|
|
130
|
-
}
|
|
131
|
-
interface NodeWrapperSlotProps {
|
|
132
|
-
id: string;
|
|
133
|
-
nodeTypeSlug: string;
|
|
134
|
-
label: string;
|
|
135
|
-
selected?: boolean;
|
|
136
|
-
nodeTypeDef?: NodeTypeDef;
|
|
137
|
-
children: React.ReactNode;
|
|
138
|
-
}
|
|
139
|
-
interface FlowBounds {
|
|
140
|
-
x: number;
|
|
141
|
-
y: number;
|
|
142
|
-
width: number;
|
|
143
|
-
height: number;
|
|
144
|
-
}
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import '@tanstack/react-query';
|
|
145
6
|
|
|
146
7
|
declare const BUILT_IN_NODE_TYPES: NodeTypeDef[];
|
|
147
8
|
|
|
148
9
|
declare const BUILT_IN_EDGE_TYPES: EdgeTypeDef[];
|
|
149
10
|
|
|
150
|
-
type FlowCollection = 'flows' | 'flow-node-types' | 'flow-edge-types';
|
|
151
|
-
type AnyFn = (...args: any[]) => any;
|
|
152
|
-
interface SDKClient {
|
|
153
|
-
from(collection: FlowCollection): {
|
|
154
|
-
find: AnyFn;
|
|
155
|
-
findById: AnyFn;
|
|
156
|
-
};
|
|
157
|
-
queryClient: QueryClient;
|
|
158
|
-
}
|
|
159
|
-
interface UseFlowOptions {
|
|
160
|
-
/** SDK client instance (BrowserClient or ServerClient) */
|
|
161
|
-
client: SDKClient;
|
|
162
|
-
/** Flow slug (URL-friendly identifier) */
|
|
163
|
-
slug?: string;
|
|
164
|
-
/** Flow document ID (UUID) */
|
|
165
|
-
id?: string;
|
|
166
|
-
/** Enable/disable data fetching (default: true) */
|
|
167
|
-
enabled?: boolean;
|
|
168
|
-
}
|
|
169
|
-
interface UseFlowResult {
|
|
170
|
-
data: CanvasData | undefined;
|
|
171
|
-
nodeTypeDefs: NodeTypeDef[];
|
|
172
|
-
edgeTypeDefs: EdgeTypeDef[];
|
|
173
|
-
flow: Record<string, unknown> | undefined;
|
|
174
|
-
isLoading: boolean;
|
|
175
|
-
error: Error | null;
|
|
176
|
-
}
|
|
177
|
-
declare function useFlow(options: UseFlowOptions): UseFlowResult;
|
|
178
|
-
|
|
179
11
|
interface UseFlowDataOptions {
|
|
180
12
|
/** Canvas data from Flow document's `canvas` field */
|
|
181
13
|
data: CanvasData | undefined;
|
|
@@ -201,45 +33,6 @@ interface UseFlowDataResult {
|
|
|
201
33
|
*/
|
|
202
34
|
declare function useFlowData(options: UseFlowDataOptions): UseFlowDataResult;
|
|
203
35
|
|
|
204
|
-
/**
|
|
205
|
-
* Calculate bounding box for given node IDs.
|
|
206
|
-
* Pure function — usable in SSR, server components, or outside React.
|
|
207
|
-
*/
|
|
208
|
-
declare function getNodeBounds(nodes: FlowNode[], nodeIds: string[]): FlowBounds | undefined;
|
|
209
|
-
/**
|
|
210
|
-
* Get all frame nodes with their bounds.
|
|
211
|
-
* Sorted by position (top-left to bottom-right).
|
|
212
|
-
*/
|
|
213
|
-
declare function getFrames(nodes: FlowNode[]): Array<{
|
|
214
|
-
id: string;
|
|
215
|
-
label: string;
|
|
216
|
-
bounds: FlowBounds;
|
|
217
|
-
}>;
|
|
218
|
-
/** Result of getFrameData — contains filtered canvas + dual bounds. */
|
|
219
|
-
interface FrameData {
|
|
220
|
-
/** Canvas data containing only the frame's descendants (nodes have draggable: false). */
|
|
221
|
-
data: CanvasData;
|
|
222
|
-
/** Bounding box of child content nodes — use for initial viewport fit (centering). */
|
|
223
|
-
fitBounds: FlowBounds;
|
|
224
|
-
/** Bounding box of the frame itself — use for panning/zoom restriction (clamp). */
|
|
225
|
-
clampBounds: FlowBounds;
|
|
226
|
-
/** @deprecated Use fitBounds instead. Alias for clampBounds for backward compatibility. */
|
|
227
|
-
bounds: FlowBounds;
|
|
228
|
-
}
|
|
229
|
-
/**
|
|
230
|
-
* Extract a frame's descendants and related edges from canvas data.
|
|
231
|
-
* Recursively collects all nested children (supports nested frames).
|
|
232
|
-
* Returns undefined if frameId is not found or is not a frame node.
|
|
233
|
-
*
|
|
234
|
-
* Child nodes are marked `draggable: false` to prevent interfering with canvas panning.
|
|
235
|
-
* The frame node itself is included (use `frameRenderer={() => null}` to hide it).
|
|
236
|
-
*
|
|
237
|
-
* Returns dual bounds:
|
|
238
|
-
* - `fitBounds`: child content bounding box (for centering the viewport)
|
|
239
|
-
* - `clampBounds`: frame area bounding box (for panning restriction)
|
|
240
|
-
*/
|
|
241
|
-
declare function getFrameData(data: CanvasData, frameId: string): FrameData | undefined;
|
|
242
|
-
|
|
243
36
|
interface CodeComponentProps {
|
|
244
37
|
fields: Record<string, unknown>;
|
|
245
38
|
label: string;
|
|
@@ -280,6 +73,14 @@ interface FlowRendererProps {
|
|
|
280
73
|
fitView?: boolean;
|
|
281
74
|
/** Called when a node is clicked */
|
|
282
75
|
onNodeClick?: (event: React.MouseEvent, node: FlowNode) => void;
|
|
76
|
+
/** Called when a node is double-clicked */
|
|
77
|
+
onNodeDoubleClick?: (event: React.MouseEvent, node: FlowNode) => void;
|
|
78
|
+
/** Called on node right-click / context menu */
|
|
79
|
+
onNodeContextMenu?: (event: React.MouseEvent, node: FlowNode) => void;
|
|
80
|
+
/** Called when mouse enters a node */
|
|
81
|
+
onNodeMouseEnter?: (event: React.MouseEvent, node: FlowNode) => void;
|
|
82
|
+
/** Called when mouse leaves a node */
|
|
83
|
+
onNodeMouseLeave?: (event: React.MouseEvent, node: FlowNode) => void;
|
|
283
84
|
/** Called when an edge is clicked */
|
|
284
85
|
onEdgeClick?: (event: React.MouseEvent, edge: FlowEdge) => void;
|
|
285
86
|
/** S1: Custom frame node renderer. Should be a stable reference (memoize or define outside render). */
|
|
@@ -296,8 +97,8 @@ interface FlowRendererProps {
|
|
|
296
97
|
minimapNodeColor?: (node: FlowNode) => string;
|
|
297
98
|
/** S4: Additional children rendered inside ReactFlow */
|
|
298
99
|
children?: React.ReactNode;
|
|
299
|
-
/** S5: Global override for all dynamic nodes.
|
|
300
|
-
renderNode?: (props: DynamicNodeSlotProps,
|
|
100
|
+
/** S5: Global override for all dynamic nodes. `content` is the resolved rendering (custom renderer output or default). `props.defaultRender` contains the original template/field-based rendering. */
|
|
101
|
+
renderNode?: (props: DynamicNodeSlotProps, content: React.ReactElement) => React.ReactElement | null;
|
|
301
102
|
/** S6: Called when viewport changes (pan/zoom) */
|
|
302
103
|
onViewportChange?: (viewport: FlowViewport) => void;
|
|
303
104
|
/** S6: Default viewport (used when fitView is false) */
|
|
@@ -316,7 +117,11 @@ interface FlowRendererProps {
|
|
|
316
117
|
responsiveFit?: boolean;
|
|
317
118
|
/** Override translateExtent directly. When set, overrides the automatic bounds-based panning restriction. */
|
|
318
119
|
translateExtent?: [[number, number], [number, number]];
|
|
120
|
+
/** Minimum zoom level. When clampBounds is set, automatically enforced as cover zoom (user cannot zoom out beyond the frame). */
|
|
121
|
+
minZoom?: number;
|
|
122
|
+
/** Maximum zoom level */
|
|
123
|
+
maxZoom?: number;
|
|
319
124
|
}
|
|
320
|
-
declare function FlowRenderer({ data, className, style, nodeRenderers, nodeTypeDefs, edgeTypeDefs, background, interactive, fitView, onNodeClick, onEdgeClick, frameRenderer, edgeRenderers, nodeWrapper, controls, minimap, minimapNodeColor, children, renderNode, onViewportChange, defaultViewport: defaultViewportProp, bounds, clampBounds, focusPadding, focusAnimation, focusMode, responsiveFit, translateExtent: translateExtentProp, }: FlowRendererProps): React.JSX.Element | null;
|
|
125
|
+
declare function FlowRenderer({ data, className, style, nodeRenderers, nodeTypeDefs, edgeTypeDefs, background, interactive, fitView, onNodeClick, onNodeDoubleClick, onNodeContextMenu, onNodeMouseEnter, onNodeMouseLeave, onEdgeClick, frameRenderer, edgeRenderers, nodeWrapper, controls, minimap, minimapNodeColor, children, renderNode, onViewportChange, defaultViewport: defaultViewportProp, bounds, clampBounds, focusPadding, focusAnimation, focusMode, responsiveFit, translateExtent: translateExtentProp, minZoom: minZoomProp, maxZoom: maxZoomProp, }: FlowRendererProps): React.JSX.Element | null;
|
|
321
126
|
|
|
322
|
-
export { BUILT_IN_EDGE_TYPES, BUILT_IN_NODE_TYPES,
|
|
127
|
+
export { BUILT_IN_EDGE_TYPES, BUILT_IN_NODE_TYPES, CanvasData, type CodeComponentProps, DynamicNodeSlotProps, EdgeSlotProps, EdgeTypeDef, FlowBounds, FlowEdge, FlowNode, FlowRenderer, type FlowRendererProps, FlowViewport, FrameNodeSlotProps, NodeTypeDef, NodeWrapperSlotProps, type UseFlowDataOptions, type UseFlowDataResult, clearTemplateCache, compileTemplate, useFlowData };
|