@jeevandev/flow-canvas 0.0.4 → 0.0.6
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/dist/index.d.ts +214 -1
- package/package.json +4 -2
- package/dist/flow-canvas.css +0 -1
package/dist/index.d.ts
CHANGED
|
@@ -1 +1,214 @@
|
|
|
1
|
-
|
|
1
|
+
import { default as default_2 } from 'react';
|
|
2
|
+
import { JSX } from 'react/jsx-runtime';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
4
|
+
import { StoreApi } from 'zustand';
|
|
5
|
+
import { WritableDraft } from 'immer';
|
|
6
|
+
|
|
7
|
+
export declare const Canvas: ({ children, grid, background, className, style, canvasStyle }: CanvasProps) => JSX.Element;
|
|
8
|
+
|
|
9
|
+
declare interface CanvasProps {
|
|
10
|
+
children?: ReactNode;
|
|
11
|
+
grid?: ReactNode;
|
|
12
|
+
background?: ReactNode;
|
|
13
|
+
className?: string;
|
|
14
|
+
style?: React.CSSProperties;
|
|
15
|
+
canvasStyle?: React.CSSProperties;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export declare const DefaultNode: ({ data, ...props }: {
|
|
19
|
+
data: any;
|
|
20
|
+
} & React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
|
|
21
|
+
|
|
22
|
+
export declare interface Edge {
|
|
23
|
+
id: string;
|
|
24
|
+
source: string;
|
|
25
|
+
target: string;
|
|
26
|
+
sourceHandle?: string;
|
|
27
|
+
targetHandle?: string;
|
|
28
|
+
type?: string;
|
|
29
|
+
data?: Record<string, any>;
|
|
30
|
+
style?: React.CSSProperties;
|
|
31
|
+
animated?: boolean;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export declare const Editor: ({ children, initialNodes, initialEdges, nodes, config, className, style, onChange }: EditorProps & {
|
|
35
|
+
nodes?: EditorNode[];
|
|
36
|
+
}) => JSX.Element;
|
|
37
|
+
|
|
38
|
+
export declare interface EditorConfig {
|
|
39
|
+
width?: number;
|
|
40
|
+
height?: number;
|
|
41
|
+
showGrid?: boolean;
|
|
42
|
+
gridSize?: number;
|
|
43
|
+
gridColor?: string;
|
|
44
|
+
snapGuide?: boolean;
|
|
45
|
+
snapping?: boolean;
|
|
46
|
+
pan?: boolean;
|
|
47
|
+
zoom?: boolean;
|
|
48
|
+
isLimited?: boolean;
|
|
49
|
+
minZoom?: number;
|
|
50
|
+
maxZoom?: number;
|
|
51
|
+
viewOnly?: boolean;
|
|
52
|
+
connectionMode?: 'loose' | 'strict';
|
|
53
|
+
snapToHandle?: boolean;
|
|
54
|
+
rotation?: boolean;
|
|
55
|
+
rotationSnap?: number;
|
|
56
|
+
rotationSpeed?: number;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
export declare interface EditorNode {
|
|
60
|
+
id: string;
|
|
61
|
+
x: number;
|
|
62
|
+
y: number;
|
|
63
|
+
width: number;
|
|
64
|
+
height: number;
|
|
65
|
+
rotation?: number;
|
|
66
|
+
draggable?: boolean;
|
|
67
|
+
resizable?: boolean;
|
|
68
|
+
rotatable?: boolean;
|
|
69
|
+
type?: string;
|
|
70
|
+
data?: Record<string, any>;
|
|
71
|
+
handles?: Record<string, {
|
|
72
|
+
id: string;
|
|
73
|
+
type: 'source' | 'target';
|
|
74
|
+
position: 'top' | 'right' | 'bottom' | 'left';
|
|
75
|
+
x: number;
|
|
76
|
+
y: number;
|
|
77
|
+
width: number;
|
|
78
|
+
height: number;
|
|
79
|
+
}>;
|
|
80
|
+
className?: string;
|
|
81
|
+
style?: React.CSSProperties;
|
|
82
|
+
customCss?: string;
|
|
83
|
+
[key: string]: any;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
export declare interface EditorProps {
|
|
87
|
+
children?: ReactNode;
|
|
88
|
+
initialNodes?: EditorNode[];
|
|
89
|
+
initialEdges?: Edge[];
|
|
90
|
+
config?: EditorConfig;
|
|
91
|
+
className?: string;
|
|
92
|
+
style?: React.CSSProperties;
|
|
93
|
+
onChange?: (state: EditorState) => void;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
export declare interface EditorState {
|
|
97
|
+
nodes: Record<string, EditorNode>;
|
|
98
|
+
edges: Record<string, Edge>;
|
|
99
|
+
selectedIds: string[];
|
|
100
|
+
config: EditorConfig;
|
|
101
|
+
camera: {
|
|
102
|
+
x: number;
|
|
103
|
+
y: number;
|
|
104
|
+
zoom: number;
|
|
105
|
+
};
|
|
106
|
+
dimensions: {
|
|
107
|
+
width: number;
|
|
108
|
+
height: number;
|
|
109
|
+
};
|
|
110
|
+
connectionState: {
|
|
111
|
+
nodeId: string | null;
|
|
112
|
+
handleId: string | null;
|
|
113
|
+
handleType: 'source' | 'target' | null;
|
|
114
|
+
position: {
|
|
115
|
+
x: number;
|
|
116
|
+
y: number;
|
|
117
|
+
} | null;
|
|
118
|
+
isValid: boolean;
|
|
119
|
+
};
|
|
120
|
+
startConnection: (nodeId: string, handleId: string, handleType: 'source' | 'target', position: {
|
|
121
|
+
x: number;
|
|
122
|
+
y: number;
|
|
123
|
+
}) => void;
|
|
124
|
+
updateConnection: (position: {
|
|
125
|
+
x: number;
|
|
126
|
+
y: number;
|
|
127
|
+
}) => void;
|
|
128
|
+
endConnection: () => void;
|
|
129
|
+
setNodes: (nodes: EditorNode[]) => void;
|
|
130
|
+
addNode: (node: EditorNode) => void;
|
|
131
|
+
updateNode: (id: string, node: Partial<EditorNode>) => void;
|
|
132
|
+
registerHandle: (nodeId: string, handleId: string, handle: {
|
|
133
|
+
type: 'source' | 'target';
|
|
134
|
+
position: 'top' | 'right' | 'bottom' | 'left';
|
|
135
|
+
x: number;
|
|
136
|
+
y: number;
|
|
137
|
+
width: number;
|
|
138
|
+
height: number;
|
|
139
|
+
}) => void;
|
|
140
|
+
removeNode: (id: string) => void;
|
|
141
|
+
setEdges: (edges: Edge[]) => void;
|
|
142
|
+
addEdge: (edge: Edge) => void;
|
|
143
|
+
removeEdge: (id: string) => void;
|
|
144
|
+
selectNode: (id: string, multi?: boolean) => void;
|
|
145
|
+
deselectAll: () => void;
|
|
146
|
+
deleteSelected: () => void;
|
|
147
|
+
duplicateSelected: () => void;
|
|
148
|
+
setConfig: (config: Partial<EditorConfig>) => void;
|
|
149
|
+
panCamera: (dx: number, dy: number) => void;
|
|
150
|
+
zoomCamera: (factor: number, cx: number, cy: number) => void;
|
|
151
|
+
setCamera: (x: number, y: number, zoom: number) => void;
|
|
152
|
+
setDimensions: (width: number, height: number) => void;
|
|
153
|
+
nudgeSelected: (dx: number, dy: number) => void;
|
|
154
|
+
resizeNode: (id: string, x: number, y: number, w: number, h: number) => void;
|
|
155
|
+
rotateNode: (id: string, angle: number) => void;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
export declare const ElementWrapper: default_2.MemoExoticComponent<({ id, children, className, style, draggable, resizable, rotatable, selectable, rotationSnap, showDragHandle, doubleClickToEdit, ...props }: Props) => JSX.Element | null>;
|
|
159
|
+
|
|
160
|
+
export declare const Handle: ({ type, id, position, className, style, ...props }: HandleProps) => JSX.Element;
|
|
161
|
+
|
|
162
|
+
declare interface HandleProps extends default_2.HTMLAttributes<HTMLDivElement> {
|
|
163
|
+
type: 'source' | 'target';
|
|
164
|
+
id?: string;
|
|
165
|
+
position?: 'top' | 'right' | 'bottom' | 'left';
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
export declare const InputNode: ({ data, ...props }: {
|
|
169
|
+
data: any;
|
|
170
|
+
} & React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
|
|
171
|
+
|
|
172
|
+
export declare const NodeLayer: ({ nodeTypes }: NodeLayerProps) => JSX.Element;
|
|
173
|
+
|
|
174
|
+
declare interface NodeLayerProps {
|
|
175
|
+
nodeTypes?: Record<string, default_2.ComponentType<any>>;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
export declare const OutputNode: ({ data, ...props }: {
|
|
179
|
+
data: any;
|
|
180
|
+
} & React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
|
|
181
|
+
|
|
182
|
+
declare interface Props extends Omit<default_2.HTMLAttributes<HTMLDivElement>, 'id' | 'style' | 'onDrag'> {
|
|
183
|
+
id: string;
|
|
184
|
+
children: ReactNode;
|
|
185
|
+
className?: string;
|
|
186
|
+
style?: default_2.CSSProperties;
|
|
187
|
+
draggable?: boolean;
|
|
188
|
+
resizable?: boolean;
|
|
189
|
+
rotatable?: boolean;
|
|
190
|
+
selectable?: boolean;
|
|
191
|
+
rotationSnap?: boolean | number;
|
|
192
|
+
showDragHandle?: boolean;
|
|
193
|
+
doubleClickToEdit?: boolean;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
declare interface Props_2 {
|
|
197
|
+
id: string;
|
|
198
|
+
children: ReactNode;
|
|
199
|
+
className?: string;
|
|
200
|
+
style?: default_2.CSSProperties;
|
|
201
|
+
draggable?: boolean;
|
|
202
|
+
selectable?: boolean;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
export declare const useEditor: <T>(selector: (state: EditorState) => T) => T;
|
|
206
|
+
|
|
207
|
+
export declare const useEditorStoreApi: () => Omit<StoreApi<EditorState>, "setState"> & {
|
|
208
|
+
setState(nextStateOrUpdater: EditorState | Partial<EditorState> | ((state: WritableDraft<EditorState>) => void), shouldReplace?: false): void;
|
|
209
|
+
setState(nextStateOrUpdater: EditorState | ((state: WritableDraft<EditorState>) => void), shouldReplace: true): void;
|
|
210
|
+
};
|
|
211
|
+
|
|
212
|
+
export declare const WorkflowNodeWrapper: default_2.MemoExoticComponent<({ id, children, className, style, draggable, selectable, }: Props_2) => JSX.Element | null>;
|
|
213
|
+
|
|
214
|
+
export { }
|
package/package.json
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jeevandev/flow-canvas",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.6",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/flow-canvas.umd.js",
|
|
6
6
|
"module": "./dist/flow-canvas.es.js",
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
8
8
|
"exports": {
|
|
9
9
|
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
10
11
|
"import": "./dist/flow-canvas.es.js",
|
|
11
12
|
"require": "./dist/flow-canvas.umd.js"
|
|
12
13
|
},
|
|
13
|
-
"./style.css": "./dist/
|
|
14
|
+
"./style.css": "./dist/flow-canvas.css"
|
|
14
15
|
},
|
|
15
16
|
"files": [
|
|
16
17
|
"dist"
|
|
@@ -22,6 +23,7 @@
|
|
|
22
23
|
"preview": "vite preview"
|
|
23
24
|
},
|
|
24
25
|
"dependencies": {
|
|
26
|
+
"@jeevandev/flow-canvas": "^0.0.5",
|
|
25
27
|
"@use-gesture/react": "^10.3.1",
|
|
26
28
|
"immer": "^11.0.1",
|
|
27
29
|
"lucide-react": "^0.561.0",
|
package/dist/flow-canvas.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.ce-editor{position:relative;width:100%;height:100%;overflow:hidden;background-color:#f3f4f6}.ce-editor__canvas{position:absolute;top:0;left:0;width:100%;height:100%;touch-action:none;transform-origin:0 0}.ce-editor__viewport{width:100%;height:100%;overflow:hidden}.ce-editor__viewport--panning{cursor:grab!important}.ce-editor__viewport--panning *{pointer-events:none!important}.ce-editor__grid-layer{position:absolute;top:-50000px;left:-50000px;width:100000px;height:100000px;opacity:.5;pointer-events:none;z-index:0}.ce-editor__content-area{position:absolute;left:0;top:0;background-color:#fff;overflow:hidden;z-index:1;box-shadow:0 0 20px #0000001a}.ce-editor__infinite-area{position:relative;z-index:1}.ce-element{position:absolute;touch-action:none;-webkit-user-select:none;user-select:none;box-sizing:border-box;transition:box-shadow .1s}.ce-element--selected{outline:2px solid #3b82f6;outline-width:calc(2px * var(--ce-inverse-zoom, 1));box-shadow:0 0 0 calc(4px * var(--ce-inverse-zoom, 1)) #3b82f633;z-index:100!important}.ce-element img{pointer-events:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.ce-editor--connecting{cursor:crosshair!important}.ce-editor--connecting .ce-element:hover{outline:2px dashed #3b82f6;outline-width:calc(2px * var(--ce-inverse-zoom, 1));background-color:#3b82f60d;cursor:copy}.ce-editor--connecting .ce-handle:hover{transform:scale(1.5);background-color:#3b82f6!important;border-color:#fff!important;transition:transform .1s}.ce-resize-handle{width:calc(10px * var(--ce-inverse-zoom, 1));height:calc(10px * var(--ce-inverse-zoom, 1));background:#fff;border:calc(1px * var(--ce-inverse-zoom, 1)) solid #3b82f6;position:absolute;z-index:101}.ce-resize-handle--nw{top:calc(-6px * var(--ce-inverse-zoom, 1));left:calc(-6px * var(--ce-inverse-zoom, 1));cursor:nw-resize}.ce-resize-handle--ne{top:calc(-6px * var(--ce-inverse-zoom, 1));right:calc(-6px * var(--ce-inverse-zoom, 1));cursor:ne-resize}.ce-resize-handle--sw{bottom:calc(-6px * var(--ce-inverse-zoom, 1));left:calc(-6px * var(--ce-inverse-zoom, 1));cursor:sw-resize}.ce-resize-handle--se{bottom:calc(-6px * var(--ce-inverse-zoom, 1));right:calc(-6px * var(--ce-inverse-zoom, 1));cursor:se-resize}.ce-resize-handle--n{top:calc(-6px * var(--ce-inverse-zoom, 1));left:50%;transform:translate(-50%);cursor:n-resize}.ce-resize-handle--s{bottom:calc(-6px * var(--ce-inverse-zoom, 1));left:50%;transform:translate(-50%);cursor:s-resize}.ce-resize-handle--e{right:calc(-6px * var(--ce-inverse-zoom, 1));top:50%;transform:translateY(-50%);cursor:e-resize}.ce-resize-handle--w{left:calc(-6px * var(--ce-inverse-zoom, 1));top:50%;transform:translateY(-50%);cursor:w-resize}.ce-rotate-handle{width:calc(24px * var(--ce-inverse-zoom, 1));height:calc(24px * var(--ce-inverse-zoom, 1));background:#fff;border:none;box-shadow:0 2px 4px #0003;border-radius:50%;position:absolute;top:auto;bottom:calc(-35px * var(--ce-inverse-zoom, 1));left:50%;transform:translate(-50%);cursor:grab;z-index:101;display:flex;align-items:center;justify-content:center;color:#555}.ce-rotate-handle:after{display:none}.ce-rotate-handle:active{cursor:grabbing;background:#f3f4f6;color:#000}.ce-drag-handle-minimal{width:calc(24px * var(--ce-inverse-zoom, 1));height:calc(24px * var(--ce-inverse-zoom, 1));position:absolute;top:auto;bottom:calc(-35px * var(--ce-inverse-zoom, 1));left:calc(50% + calc(30px * var(--ce-inverse-zoom, 1)));transform:translate(-50%);background-color:#fff;border-radius:50%;box-shadow:0 2px 4px #0003;cursor:grab;z-index:102;display:flex;align-items:center;justify-content:center;color:#555;background-image:none}.ce-drag-handle-minimal:active{cursor:grabbing;background-color:#f3f4f6;color:#000}.ce-snap-guide{position:absolute;background-color:#f0f;pointer-events:none;z-index:200}.ce-snap-guide--vertical{width:1px;height:100vh}.ce-snap-guide--horizontal{height:1px;width:100vw}.ce-node-default,.ce-node-input,.ce-node-output{background:#fff;border:1px solid #777;border-radius:4px;padding:10px;min-width:180px;text-align:center;font-size:14px;color:#222;box-shadow:0 1px 4px #0000001a;position:relative}.ce-node-input{border-color:#3b82f6}.ce-node-output{border-color:#10b981}.ce-node-content{pointer-events:none}.ce-handle{width:10px;height:10px;background:#fff;border-radius:50%;position:absolute;border:3px solid #777;z-index:10;cursor:crosshair;transition:border-color .2s}.ce-handle--left{left:0;transform:translate(-50%)}.ce-handle--right{right:0;transform:translate(50%)}.ce-handle--top{top:0;transform:translateY(-50%)}.ce-handle--bottom{bottom:0;transform:translateY(50%)}.ce-workflow-node:hover .ce-delete-node-btn{opacity:1;pointer-events:auto}.ce-delete-node-btn{position:absolute;top:-8px;right:-8px;width:18px;height:18px;background:#ff4d4f;color:#fff;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;line-height:1;padding:0;z-index:20;opacity:0;pointer-events:none;transition:opacity .2s,transform .1s;box-shadow:0 2px 4px #0000001a}.ce-delete-node-btn:hover{transform:scale(1.1);background:#ff7875}.ce-edge-group .ce-edge-delete-fo{opacity:0;pointer-events:none;transition:opacity .2s}.ce-edge-group:hover .ce-edge-delete-fo{opacity:1;pointer-events:auto}.ce-connection-line{animation:dashdraw .5s linear infinite}@keyframes dashdraw{0%{stroke-dashoffset:10}to{stroke-dashoffset:0}}
|