@rxflow/workflow 0.0.3 → 0.0.4-alpha.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/cjs/components/Handle/NodePopover.js +1 -1
- package/cjs/components/Handle/index.js +1 -1
- package/cjs/hooks/index.d.ts +2 -1
- package/cjs/hooks/index.d.ts.map +1 -1
- package/cjs/hooks/index.js +11 -0
- package/cjs/hooks/useWorkFlow.js +2 -2
- package/cjs/hooks/useWorkFlowProps.d.ts +5 -6
- package/cjs/hooks/useWorkFlowProps.d.ts.map +1 -1
- package/cjs/hooks/useWorkFlowProps.js +0 -2
- package/cjs/hooks/useWorkflowPropsHooks.d.ts +82 -0
- package/cjs/hooks/useWorkflowPropsHooks.d.ts.map +1 -0
- package/cjs/hooks/useWorkflowPropsHooks.js +100 -0
- package/cjs/index.d.ts +1 -3
- package/cjs/index.d.ts.map +1 -1
- package/cjs/index.js +20 -18
- package/esm/components/Handle/NodePopover.js +4 -4
- package/esm/components/Handle/index.js +4 -4
- package/esm/hooks/index.d.ts +2 -1
- package/esm/hooks/index.d.ts.map +1 -1
- package/esm/hooks/index.js +2 -1
- package/esm/hooks/useWorkFlow.js +3 -3
- package/esm/hooks/useWorkFlowProps.d.ts +5 -6
- package/esm/hooks/useWorkFlowProps.d.ts.map +1 -1
- package/esm/hooks/useWorkFlowProps.js +0 -2
- package/esm/hooks/useWorkflowPropsHooks.d.ts +82 -0
- package/esm/hooks/useWorkflowPropsHooks.d.ts.map +1 -0
- package/esm/hooks/useWorkflowPropsHooks.js +110 -0
- package/esm/index.d.ts +1 -3
- package/esm/index.d.ts.map +1 -1
- package/esm/index.js +12 -5
- package/package.json +2 -2
|
@@ -49,7 +49,7 @@ const NodePopover = ({
|
|
|
49
49
|
} = (0, _useWorkFlow.useWorkFlow)();
|
|
50
50
|
const {
|
|
51
51
|
nodeTypes: nodeTypeList = []
|
|
52
|
-
} = (0, _base.
|
|
52
|
+
} = (0, _base.useFlowProps)();
|
|
53
53
|
const [filter, setFilter] = (0, _react2.useState)('');
|
|
54
54
|
const nodeTypeMap = (0, _base.useNodeTypeMap)();
|
|
55
55
|
const {
|
package/cjs/hooks/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @author: yanxianliang
|
|
3
3
|
* @date: 2025-11-23 18:48
|
|
4
|
-
* @modified:2025/
|
|
4
|
+
* @modified:2025/1/17 by yanxianliang
|
|
5
5
|
* @desc: export all hooks
|
|
6
6
|
*
|
|
7
7
|
* Copyright (c) 2025 by yanxianliang, All Rights Reserved.
|
|
@@ -20,6 +20,7 @@ export * from './useUpstreams';
|
|
|
20
20
|
export * from './useWatchSelectionNodes';
|
|
21
21
|
export * from './useWorkFlow';
|
|
22
22
|
export * from './useWorkFlowProps';
|
|
23
|
+
export * from './useWorkflowPropsHooks';
|
|
23
24
|
export * from './run/useActiveEdge';
|
|
24
25
|
export * from './run/useCleanRunState';
|
|
25
26
|
export * from './run/useNodeRunningState';
|
package/cjs/hooks/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC"}
|
package/cjs/hooks/index.js
CHANGED
|
@@ -157,6 +157,17 @@ Object.keys(_useWorkFlowProps).forEach(function (key) {
|
|
|
157
157
|
}
|
|
158
158
|
});
|
|
159
159
|
});
|
|
160
|
+
var _useWorkflowPropsHooks = require("./useWorkflowPropsHooks");
|
|
161
|
+
Object.keys(_useWorkflowPropsHooks).forEach(function (key) {
|
|
162
|
+
if (key === "default" || key === "__esModule") return;
|
|
163
|
+
if (key in exports && exports[key] === _useWorkflowPropsHooks[key]) return;
|
|
164
|
+
Object.defineProperty(exports, key, {
|
|
165
|
+
enumerable: true,
|
|
166
|
+
get: function () {
|
|
167
|
+
return _useWorkflowPropsHooks[key];
|
|
168
|
+
}
|
|
169
|
+
});
|
|
170
|
+
});
|
|
160
171
|
var _useActiveEdge = require("./run/useActiveEdge");
|
|
161
172
|
Object.keys(_useActiveEdge).forEach(function (key) {
|
|
162
173
|
if (key === "default" || key === "__esModule") return;
|
package/cjs/hooks/useWorkFlow.js
CHANGED
|
@@ -21,7 +21,7 @@ var _react2 = require("react");
|
|
|
21
21
|
const useWorkFlow = () => {
|
|
22
22
|
const reactFlow = (0, _react.useReactFlow)();
|
|
23
23
|
const storeContext = (0, _react2.useContext)(_base.FlowContext);
|
|
24
|
-
const
|
|
24
|
+
const getFlowProps = (0, _base.useGetFlowProps)();
|
|
25
25
|
if (!storeContext) {
|
|
26
26
|
throw new Error("useWorkFlow must be used within FlowProvider");
|
|
27
27
|
}
|
|
@@ -35,7 +35,7 @@ const useWorkFlow = () => {
|
|
|
35
35
|
* @param connection
|
|
36
36
|
*/
|
|
37
37
|
const connect = connection => {
|
|
38
|
-
const onConnect =
|
|
38
|
+
const onConnect = getFlowProps(state => state.onConnect);
|
|
39
39
|
onConnect?.(connection); // 直接回调内置的onConnect 逻辑
|
|
40
40
|
};
|
|
41
41
|
const getChildren = (nodeId, allowSubFlow = true) => {
|
|
@@ -9,11 +9,10 @@
|
|
|
9
9
|
* Copyright (c) 2025 by yanxianliang, All Rights Reserved.
|
|
10
10
|
*/
|
|
11
11
|
import { LayoutFunction } from "@rxflow/base";
|
|
12
|
-
import { IWorkflowProps, WorkflowNode } from "
|
|
12
|
+
import { IWorkflowProps, WorkflowNode } from "../types";
|
|
13
13
|
import { Edge } from "@xyflow/react";
|
|
14
14
|
export declare const useWorkFlowProps: <NodeType extends WorkflowNode = WorkflowNode, EdgeType extends Edge = Edge>(props: IWorkflowProps<NodeType, EdgeType>) => {
|
|
15
15
|
selectNodesOnDrag: boolean;
|
|
16
|
-
omitProps: string[];
|
|
17
16
|
nodesDraggable: boolean;
|
|
18
17
|
nodesConnectable: boolean;
|
|
19
18
|
deleteKeyCode: import("@xyflow/react").KeyCode | null;
|
|
@@ -94,7 +93,7 @@ export declare const useWorkFlowProps: <NodeType extends WorkflowNode = Workflow
|
|
|
94
93
|
popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
|
|
95
94
|
popoverTarget?: string | undefined;
|
|
96
95
|
inert?: boolean | undefined;
|
|
97
|
-
inputMode?: "none" | "search" | "text" | "
|
|
96
|
+
inputMode?: "none" | "search" | "text" | "url" | "email" | "tel" | "numeric" | "decimal" | undefined;
|
|
98
97
|
is?: string | undefined;
|
|
99
98
|
exportparts?: string | undefined;
|
|
100
99
|
part?: string | undefined;
|
|
@@ -110,7 +109,7 @@ export declare const useWorkFlowProps: <NodeType extends WorkflowNode = Workflow
|
|
|
110
109
|
"aria-colindextext"?: string | undefined;
|
|
111
110
|
"aria-colspan"?: number | undefined;
|
|
112
111
|
"aria-controls"?: string | undefined;
|
|
113
|
-
"aria-current"?: boolean | "
|
|
112
|
+
"aria-current"?: boolean | "step" | "date" | "time" | "page" | "location" | "true" | "false" | undefined;
|
|
114
113
|
"aria-describedby"?: string | undefined;
|
|
115
114
|
"aria-description"?: string | undefined;
|
|
116
115
|
"aria-details"?: string | undefined;
|
|
@@ -464,7 +463,7 @@ export declare const useWorkFlowProps: <NodeType extends WorkflowNode = Workflow
|
|
|
464
463
|
forceFitView?: boolean | undefined;
|
|
465
464
|
loading?: boolean | undefined;
|
|
466
465
|
quickAdd?: boolean | undefined;
|
|
467
|
-
renderNodeIcon?: ((nodeDefinition: import("
|
|
466
|
+
renderNodeIcon?: ((nodeDefinition: import("../types").WorkFlowNodeDefinition<NodeType["data"]>) => import("react").ReactNode) | undefined;
|
|
468
467
|
sider?: {
|
|
469
468
|
loading?: boolean | undefined;
|
|
470
469
|
} | undefined;
|
|
@@ -479,7 +478,7 @@ export declare const useWorkFlowProps: <NodeType extends WorkflowNode = Workflow
|
|
|
479
478
|
connectTargetHandle: string;
|
|
480
479
|
} | undefined>) | undefined;
|
|
481
480
|
controlsPosition: import("@xyflow/react").PanelPosition;
|
|
482
|
-
nodeTypes: import("
|
|
481
|
+
nodeTypes: import("../types").WorkFlowNodeDefinition<NodeType["data"]>[] | undefined;
|
|
483
482
|
fitView: boolean;
|
|
484
483
|
};
|
|
485
484
|
//# sourceMappingURL=useWorkFlowProps.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useWorkFlowProps.d.ts","sourceRoot":"","sources":["useWorkFlowProps.ts"],"names":[],"mappings":";;AAAA;;;;;;;GAOG;AACH,OAAO,
|
|
1
|
+
{"version":3,"file":"useWorkFlowProps.d.ts","sourceRoot":"","sources":["useWorkFlowProps.ts"],"names":[],"mappings":";;AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,cAAc,EAAqC,MAAM,cAAc,CAAC;AACjF,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAerC,eAAO,MAAM,gBAAgB,sFAGpB,eAAe,QAAQ,EAAE,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6E1C,CAAC"}
|
|
@@ -25,7 +25,6 @@ var _useOnSelectionChange = require("./useOnSelectionChange");
|
|
|
25
25
|
* Copyright (c) 2025 by yanxianliang, All Rights Reserved.
|
|
26
26
|
*/
|
|
27
27
|
|
|
28
|
-
const omitProps = ['height', 'sider', 'loading', 'connectionLimit', 'onNodeTypeDrop', 'renderNodeIcon', 'quickAdd'];
|
|
29
28
|
const defaultDeleteKeyCode = ["Delete", "Backspace"];
|
|
30
29
|
const useWorkFlowProps = props => {
|
|
31
30
|
const {
|
|
@@ -72,7 +71,6 @@ const useWorkFlowProps = props => {
|
|
|
72
71
|
fitView: fitView,
|
|
73
72
|
...others,
|
|
74
73
|
selectNodesOnDrag,
|
|
75
|
-
omitProps: omitProps,
|
|
76
74
|
nodesDraggable: nodesDraggable,
|
|
77
75
|
nodesConnectable: nodesConnectable,
|
|
78
76
|
deleteKeyCode: deleteKeyCode,
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
/**
|
|
3
|
+
* @author: yanxianliang
|
|
4
|
+
* @date: 2025-01-17
|
|
5
|
+
* @desc: Workflow Props hooks - 类型化的 props 访问
|
|
6
|
+
*
|
|
7
|
+
* Copyright (c) 2025 by yanxianliang, All Rights Reserved.
|
|
8
|
+
*/
|
|
9
|
+
import { IBaseFlowProps } from '@rxflow/base';
|
|
10
|
+
import { IWorkflowProps, WorkflowExtendProps, WorkflowNode } from '../types';
|
|
11
|
+
import { Edge } from '@xyflow/react';
|
|
12
|
+
type WorkflowFullFlowProps<NodeType extends WorkflowNode = WorkflowNode, EdgeType extends Edge = Edge> = IBaseFlowProps<NodeType, EdgeType> & WorkflowExtendProps<NodeType>;
|
|
13
|
+
/**
|
|
14
|
+
* 获取原始输入 props
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* const inputProps = useWorkflowInputProps();
|
|
18
|
+
* const nodeTypes = useWorkflowInputProps(state => state.nodeTypes);
|
|
19
|
+
*/
|
|
20
|
+
export declare function useWorkflowInputProps<NodeType extends WorkflowNode = WorkflowNode, EdgeType extends Edge = Edge>(): IWorkflowProps<NodeType, EdgeType>;
|
|
21
|
+
export declare function useWorkflowInputProps<NodeType extends WorkflowNode = WorkflowNode, EdgeType extends Edge = Edge, U = unknown>(selector: (state: IWorkflowProps<NodeType, EdgeType>) => U): U;
|
|
22
|
+
/**
|
|
23
|
+
* 获取转换后的 Flow props
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* const flowProps = useWorkflowFlowProps();
|
|
27
|
+
* const nodes = useWorkflowFlowProps(state => state.nodes);
|
|
28
|
+
*/
|
|
29
|
+
export declare function useWorkflowFlowProps<NodeType extends WorkflowNode = WorkflowNode, EdgeType extends Edge = Edge>(): WorkflowFullFlowProps<NodeType, EdgeType>;
|
|
30
|
+
export declare function useWorkflowFlowProps<NodeType extends WorkflowNode = WorkflowNode, EdgeType extends Edge = Edge, U = unknown>(selector: (state: WorkflowFullFlowProps<NodeType, EdgeType>) => U): U;
|
|
31
|
+
/**
|
|
32
|
+
* 获取原始输入 props 的 getter(非响应式)
|
|
33
|
+
*/
|
|
34
|
+
export declare const useGetWorkflowInputProps: <NodeType extends WorkflowNode = WorkflowNode, EdgeType extends Edge = Edge>() => {
|
|
35
|
+
(): IWorkflowProps<NodeType, EdgeType>;
|
|
36
|
+
<U>(selector: (state: IWorkflowProps<NodeType, EdgeType>) => U): U;
|
|
37
|
+
};
|
|
38
|
+
/**
|
|
39
|
+
* 获取转换后 Flow props 的 getter(非响应式)
|
|
40
|
+
*/
|
|
41
|
+
export declare const useGetWorkflowFlowProps: <NodeType extends WorkflowNode = WorkflowNode, EdgeType extends Edge = Edge>() => {
|
|
42
|
+
(): WorkflowFullFlowProps<NodeType, EdgeType>;
|
|
43
|
+
<U>(selector: (state: WorkflowFullFlowProps<NodeType, EdgeType>) => U): U;
|
|
44
|
+
};
|
|
45
|
+
/**
|
|
46
|
+
* 获取连接限制配置
|
|
47
|
+
*/
|
|
48
|
+
export declare const useConnectionLimit: () => {
|
|
49
|
+
preventCycle?: boolean | undefined;
|
|
50
|
+
preventConcurrency?: boolean | undefined;
|
|
51
|
+
preventCrossSubFlow?: boolean | undefined;
|
|
52
|
+
} | undefined;
|
|
53
|
+
/**
|
|
54
|
+
* 获取是否启用快速添加
|
|
55
|
+
*/
|
|
56
|
+
export declare const useQuickAdd: () => boolean | undefined;
|
|
57
|
+
/**
|
|
58
|
+
* 获取节点类型拖放回调
|
|
59
|
+
*/
|
|
60
|
+
export declare const useOnNodeTypeDrop: () => ((parentFlow: import("@xyflow/react").InternalNode<WorkflowNode> | undefined, positionInParent: import("@xyflow/react").XYPosition, nodeType: string) => Promise<{
|
|
61
|
+
id: string;
|
|
62
|
+
connectSourceHandle: string;
|
|
63
|
+
connectTargetHandle: string;
|
|
64
|
+
} | undefined>) | undefined;
|
|
65
|
+
/**
|
|
66
|
+
* 获取渲染节点图标函数
|
|
67
|
+
*/
|
|
68
|
+
export declare const useRenderNodeIcon: () => ((nodeDefinition: import("../types").WorkFlowNodeDefinition<Record<string, unknown>>) => import("react").ReactNode) | undefined;
|
|
69
|
+
/**
|
|
70
|
+
* 获取选择策略
|
|
71
|
+
*/
|
|
72
|
+
export declare const useSelectionStrategy: () => import("@rxflow/base").SelectionStrategy | undefined;
|
|
73
|
+
/**
|
|
74
|
+
* 获取是否只读
|
|
75
|
+
*/
|
|
76
|
+
export declare const useWorkflowReadOnly: () => boolean | undefined;
|
|
77
|
+
/**
|
|
78
|
+
* 获取加载状态
|
|
79
|
+
*/
|
|
80
|
+
export declare const useWorkflowLoading: () => boolean | undefined;
|
|
81
|
+
export {};
|
|
82
|
+
//# sourceMappingURL=useWorkflowPropsHooks.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useWorkflowPropsHooks.d.ts","sourceRoot":"","sources":["useWorkflowPropsHooks.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG;AACH,OAAO,EAAkE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9G,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7E,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,KAAK,qBAAqB,CACxB,QAAQ,SAAS,YAAY,GAAG,YAAY,EAC5C,QAAQ,SAAS,IAAI,GAAG,IAAI,IAC1B,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,mBAAmB,CAAC,QAAQ,CAAC,CAAC;AAEvE;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CACnC,QAAQ,SAAS,YAAY,GAAG,YAAY,EAC5C,QAAQ,SAAS,IAAI,GAAG,IAAI,KACzB,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AACxC,wBAAgB,qBAAqB,CACnC,QAAQ,SAAS,YAAY,GAAG,YAAY,EAC5C,QAAQ,SAAS,IAAI,GAAG,IAAI,EAC5B,CAAC,GAAG,OAAO,EACX,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AASjE;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,SAAS,YAAY,GAAG,YAAY,EAC5C,QAAQ,SAAS,IAAI,GAAG,IAAI,KACzB,qBAAqB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC/C,wBAAgB,oBAAoB,CAClC,QAAQ,SAAS,YAAY,GAAG,YAAY,EAC5C,QAAQ,SAAS,IAAI,GAAG,IAAI,EAC5B,CAAC,GAAG,OAAO,EACX,QAAQ,EAAE,CAAC,KAAK,EAAE,qBAAqB,CAAC,QAAQ,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AASxE;;GAEG;AACH,eAAO,MAAM,wBAAwB;;;CAKpC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;CAKnC,CAAC;AAGF;;GAEG;AACH,eAAO,MAAM,kBAAkB;;;;aAA8D,CAAC;AAE9F;;GAEG;AACH,eAAO,MAAM,WAAW,2BAAuD,CAAC;AAEhF;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;2BAA6D,CAAC;AAE5F;;GAEG;AACH,eAAO,MAAM,iBAAiB,uIAA6D,CAAC;AAE5F;;GAEG;AACH,eAAO,MAAM,oBAAoB,4DAAgE,CAAC;AAElG;;GAEG;AACH,eAAO,MAAM,mBAAmB,2BAAuD,CAAC;AAExF;;GAEG;AACH,eAAO,MAAM,kBAAkB,2BAAsD,CAAC"}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useSelectionStrategy = exports.useRenderNodeIcon = exports.useQuickAdd = exports.useOnNodeTypeDrop = exports.useGetWorkflowInputProps = exports.useGetWorkflowFlowProps = exports.useConnectionLimit = void 0;
|
|
7
|
+
exports.useWorkflowFlowProps = useWorkflowFlowProps;
|
|
8
|
+
exports.useWorkflowInputProps = useWorkflowInputProps;
|
|
9
|
+
exports.useWorkflowReadOnly = exports.useWorkflowLoading = void 0;
|
|
10
|
+
var _base = require("@rxflow/base");
|
|
11
|
+
/**
|
|
12
|
+
* @author: yanxianliang
|
|
13
|
+
* @date: 2025-01-17
|
|
14
|
+
* @desc: Workflow Props hooks - 类型化的 props 访问
|
|
15
|
+
*
|
|
16
|
+
* Copyright (c) 2025 by yanxianliang, All Rights Reserved.
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* 获取原始输入 props
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* const inputProps = useWorkflowInputProps();
|
|
24
|
+
* const nodeTypes = useWorkflowInputProps(state => state.nodeTypes);
|
|
25
|
+
*/
|
|
26
|
+
|
|
27
|
+
function useWorkflowInputProps(selector) {
|
|
28
|
+
return (0, _base.useInputProps)(selector);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* 获取转换后的 Flow props
|
|
33
|
+
*
|
|
34
|
+
* @example
|
|
35
|
+
* const flowProps = useWorkflowFlowProps();
|
|
36
|
+
* const nodes = useWorkflowFlowProps(state => state.nodes);
|
|
37
|
+
*/
|
|
38
|
+
|
|
39
|
+
function useWorkflowFlowProps(selector) {
|
|
40
|
+
return (0, _base.useFlowProps)(selector);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* 获取原始输入 props 的 getter(非响应式)
|
|
45
|
+
*/
|
|
46
|
+
const useGetWorkflowInputProps = () => {
|
|
47
|
+
return (0, _base.useGetInputProps)();
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* 获取转换后 Flow props 的 getter(非响应式)
|
|
52
|
+
*/
|
|
53
|
+
exports.useGetWorkflowInputProps = useGetWorkflowInputProps;
|
|
54
|
+
const useGetWorkflowFlowProps = () => {
|
|
55
|
+
return (0, _base.useGetFlowProps)();
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
// 便捷 hooks
|
|
59
|
+
/**
|
|
60
|
+
* 获取连接限制配置
|
|
61
|
+
*/
|
|
62
|
+
exports.useGetWorkflowFlowProps = useGetWorkflowFlowProps;
|
|
63
|
+
const useConnectionLimit = () => useWorkflowInputProps(state => state.connectionLimit);
|
|
64
|
+
|
|
65
|
+
/**
|
|
66
|
+
* 获取是否启用快速添加
|
|
67
|
+
*/
|
|
68
|
+
exports.useConnectionLimit = useConnectionLimit;
|
|
69
|
+
const useQuickAdd = () => useWorkflowInputProps(state => state.quickAdd);
|
|
70
|
+
|
|
71
|
+
/**
|
|
72
|
+
* 获取节点类型拖放回调
|
|
73
|
+
*/
|
|
74
|
+
exports.useQuickAdd = useQuickAdd;
|
|
75
|
+
const useOnNodeTypeDrop = () => useWorkflowInputProps(state => state.onNodeTypeDrop);
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* 获取渲染节点图标函数
|
|
79
|
+
*/
|
|
80
|
+
exports.useOnNodeTypeDrop = useOnNodeTypeDrop;
|
|
81
|
+
const useRenderNodeIcon = () => useWorkflowInputProps(state => state.renderNodeIcon);
|
|
82
|
+
|
|
83
|
+
/**
|
|
84
|
+
* 获取选择策略
|
|
85
|
+
*/
|
|
86
|
+
exports.useRenderNodeIcon = useRenderNodeIcon;
|
|
87
|
+
const useSelectionStrategy = () => useWorkflowInputProps(state => state.selectionStrategy);
|
|
88
|
+
|
|
89
|
+
/**
|
|
90
|
+
* 获取是否只读
|
|
91
|
+
*/
|
|
92
|
+
exports.useSelectionStrategy = useSelectionStrategy;
|
|
93
|
+
const useWorkflowReadOnly = () => useWorkflowInputProps(state => state.readOnly);
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* 获取加载状态
|
|
97
|
+
*/
|
|
98
|
+
exports.useWorkflowReadOnly = useWorkflowReadOnly;
|
|
99
|
+
const useWorkflowLoading = () => useWorkflowInputProps(state => state.loading);
|
|
100
|
+
exports.useWorkflowLoading = useWorkflowLoading;
|
package/cjs/index.d.ts
CHANGED
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @author: yanxianliang
|
|
3
3
|
* @date: 2025-06-27 09:32
|
|
4
|
+
* @modified:2025/1/17 by yanxianliang
|
|
4
5
|
* @desc: 工作流组件
|
|
5
6
|
*
|
|
6
7
|
* 支持工作流编排能力,支持节点自定义
|
|
7
8
|
*
|
|
8
|
-
* 支持nodes 外部传递
|
|
9
|
-
* 支持x6数据结构转换
|
|
10
|
-
*
|
|
11
9
|
* Copyright (c) 2025 by yanxianliang, All Rights Reserved.
|
|
12
10
|
*/
|
|
13
11
|
import '@xyflow/react/dist/style.css';
|
package/cjs/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,KAAe,MAAM,OAAO,CAAC;AAGpC,OAAO,EAAE,cAAc,EAAuB,MAAM,SAAS,CAAC;8DAO6E,eAAe,QAAQ,CAAC,KAAK,MAAM,YAAY;AAA1L,wBAA2L;AAG3L,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,2BAA2B,CAAC;AAG1C,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC"}
|
package/cjs/index.js
CHANGED
|
@@ -21,18 +21,7 @@ Object.keys(_components).forEach(function (key) {
|
|
|
21
21
|
}
|
|
22
22
|
});
|
|
23
23
|
});
|
|
24
|
-
var
|
|
25
|
-
Object.keys(_hooks).forEach(function (key) {
|
|
26
|
-
if (key === "default" || key === "__esModule") return;
|
|
27
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
28
|
-
if (key in exports && exports[key] === _hooks[key]) return;
|
|
29
|
-
Object.defineProperty(exports, key, {
|
|
30
|
-
enumerable: true,
|
|
31
|
-
get: function () {
|
|
32
|
-
return _hooks[key];
|
|
33
|
-
}
|
|
34
|
-
});
|
|
35
|
-
});
|
|
24
|
+
var _useWorkFlowProps = require("./hooks/useWorkFlowProps");
|
|
36
25
|
var _types = require("./types");
|
|
37
26
|
Object.keys(_types).forEach(function (key) {
|
|
38
27
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -69,19 +58,32 @@ Object.keys(_RunningStatus).forEach(function (key) {
|
|
|
69
58
|
}
|
|
70
59
|
});
|
|
71
60
|
});
|
|
61
|
+
var _hooks = require("./hooks");
|
|
62
|
+
Object.keys(_hooks).forEach(function (key) {
|
|
63
|
+
if (key === "default" || key === "__esModule") return;
|
|
64
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
65
|
+
if (key in exports && exports[key] === _hooks[key]) return;
|
|
66
|
+
Object.defineProperty(exports, key, {
|
|
67
|
+
enumerable: true,
|
|
68
|
+
get: function () {
|
|
69
|
+
return _hooks[key];
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
});
|
|
72
73
|
/**
|
|
73
74
|
* @author: yanxianliang
|
|
74
75
|
* @date: 2025-06-27 09:32
|
|
76
|
+
* @modified:2025/1/17 by yanxianliang
|
|
75
77
|
* @desc: 工作流组件
|
|
76
78
|
*
|
|
77
79
|
* 支持工作流编排能力,支持节点自定义
|
|
78
80
|
*
|
|
79
|
-
* 支持nodes 外部传递
|
|
80
|
-
* 支持x6数据结构转换
|
|
81
|
-
*
|
|
82
81
|
* Copyright (c) 2025 by yanxianliang, All Rights Reserved.
|
|
83
82
|
*/
|
|
84
83
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
84
|
+
const WorkFlow = (0, _base.createFlow)(_components.Layout, _useWorkFlowProps.useWorkFlowProps);
|
|
85
|
+
var _default = exports.default = /*#__PURE__*/(0, _react.memo)(WorkFlow, (prevProps, nextProps) => (0, _lodash.isEqual)(prevProps, nextProps)); // 类型导出
|
|
86
|
+
// 工具函数导出
|
|
87
|
+
// 常量导出
|
|
88
|
+
// 组件导出
|
|
89
|
+
// Hooks 导出
|
|
@@ -13,7 +13,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
|
13
13
|
*/
|
|
14
14
|
|
|
15
15
|
import SearchOutlined from "@ant-design/icons/lib/icons/SearchOutlined";
|
|
16
|
-
import { useNodeTypeMap,
|
|
16
|
+
import { useNodeTypeMap, useFlowProps } from '@rxflow/base';
|
|
17
17
|
import { useStoreApi } from "@xyflow/react";
|
|
18
18
|
import { Input, List, Space } from 'antd';
|
|
19
19
|
import groupBy from 'lodash/groupBy';
|
|
@@ -45,9 +45,9 @@ export var NodePopover = function NodePopover(_ref) {
|
|
|
45
45
|
nodeId = _ref.nodeId;
|
|
46
46
|
var _useWorkFlow = useWorkFlow(),
|
|
47
47
|
getNode = _useWorkFlow.getNode;
|
|
48
|
-
var
|
|
49
|
-
|
|
50
|
-
nodeTypeList =
|
|
48
|
+
var _useFlowProps = useFlowProps(),
|
|
49
|
+
_useFlowProps$nodeTyp = _useFlowProps.nodeTypes,
|
|
50
|
+
nodeTypeList = _useFlowProps$nodeTyp === void 0 ? [] : _useFlowProps$nodeTyp;
|
|
51
51
|
var _useState = useState(''),
|
|
52
52
|
_useState2 = _slicedToArray(_useState, 2),
|
|
53
53
|
filter = _useState2[0],
|
|
@@ -26,7 +26,7 @@ import PlusOutlined from '@ant-design/icons/PlusOutlined';
|
|
|
26
26
|
import { getParentFlow } from "../..";
|
|
27
27
|
import { Handle as InnerHandle, Position, useNodeConnections, useNodeId, useStoreApi } from '@xyflow/react';
|
|
28
28
|
import { useMemoizedFn } from 'ahooks';
|
|
29
|
-
import { Popover, Tooltip, getNodeWidth,
|
|
29
|
+
import { Popover, Tooltip, getNodeWidth, useFlowProps, useNodeTypeMap } from '@rxflow/base';
|
|
30
30
|
import cat from 'classcat';
|
|
31
31
|
import { useState } from 'react';
|
|
32
32
|
import "./index.less";
|
|
@@ -44,14 +44,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
44
44
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
45
45
|
export var Handle = function Handle(props) {
|
|
46
46
|
var nodeId = useNodeId();
|
|
47
|
-
var
|
|
47
|
+
var _useFlowProps = useFlowProps(function (props) {
|
|
48
48
|
return {
|
|
49
49
|
quickAdd: !!props.quickAdd,
|
|
50
50
|
onNodeTypeDrop: props.onNodeTypeDrop
|
|
51
51
|
};
|
|
52
52
|
}),
|
|
53
|
-
quickAdd =
|
|
54
|
-
onNodeTypeDrop =
|
|
53
|
+
quickAdd = _useFlowProps.quickAdd,
|
|
54
|
+
onNodeTypeDrop = _useFlowProps.onNodeTypeDrop;
|
|
55
55
|
var position = props.position,
|
|
56
56
|
style = props.style,
|
|
57
57
|
id = props.id,
|
package/esm/hooks/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @author: yanxianliang
|
|
3
3
|
* @date: 2025-11-23 18:48
|
|
4
|
-
* @modified:2025/
|
|
4
|
+
* @modified:2025/1/17 by yanxianliang
|
|
5
5
|
* @desc: export all hooks
|
|
6
6
|
*
|
|
7
7
|
* Copyright (c) 2025 by yanxianliang, All Rights Reserved.
|
|
@@ -20,6 +20,7 @@ export * from './useUpstreams';
|
|
|
20
20
|
export * from './useWatchSelectionNodes';
|
|
21
21
|
export * from './useWorkFlow';
|
|
22
22
|
export * from './useWorkFlowProps';
|
|
23
|
+
export * from './useWorkflowPropsHooks';
|
|
23
24
|
export * from './run/useActiveEdge';
|
|
24
25
|
export * from './run/useCleanRunState';
|
|
25
26
|
export * from './run/useNodeRunningState';
|
package/esm/hooks/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC"}
|
package/esm/hooks/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @author: yanxianliang
|
|
3
3
|
* @date: 2025-11-23 18:48
|
|
4
|
-
* @modified:2025/
|
|
4
|
+
* @modified:2025/1/17 by yanxianliang
|
|
5
5
|
* @desc: export all hooks
|
|
6
6
|
*
|
|
7
7
|
* Copyright (c) 2025 by yanxianliang, All Rights Reserved.
|
|
@@ -20,6 +20,7 @@ export * from "./useUpstreams";
|
|
|
20
20
|
export * from "./useWatchSelectionNodes";
|
|
21
21
|
export * from "./useWorkFlow";
|
|
22
22
|
export * from "./useWorkFlowProps";
|
|
23
|
+
export * from "./useWorkflowPropsHooks";
|
|
23
24
|
export * from "./run/useActiveEdge";
|
|
24
25
|
export * from "./run/useCleanRunState";
|
|
25
26
|
export * from "./run/useNodeRunningState";
|
package/esm/hooks/useWorkFlow.js
CHANGED
|
@@ -11,7 +11,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
|
|
|
11
11
|
*
|
|
12
12
|
* Copyright (c) 2025 by yanxianliang, All Rights Reserved.
|
|
13
13
|
*/
|
|
14
|
-
import {
|
|
14
|
+
import { useGetFlowProps, FlowContext } from "@rxflow/base";
|
|
15
15
|
import { useReactFlow, useStoreApi } from "@xyflow/react";
|
|
16
16
|
import { useContext, useMemo } from "react";
|
|
17
17
|
|
|
@@ -21,7 +21,7 @@ import { useContext, useMemo } from "react";
|
|
|
21
21
|
export var useWorkFlow = function useWorkFlow() {
|
|
22
22
|
var reactFlow = useReactFlow();
|
|
23
23
|
var storeContext = useContext(FlowContext);
|
|
24
|
-
var
|
|
24
|
+
var getFlowProps = useGetFlowProps();
|
|
25
25
|
if (!storeContext) {
|
|
26
26
|
throw new Error("useWorkFlow must be used within FlowProvider");
|
|
27
27
|
}
|
|
@@ -35,7 +35,7 @@ export var useWorkFlow = function useWorkFlow() {
|
|
|
35
35
|
* @param connection
|
|
36
36
|
*/
|
|
37
37
|
var connect = function connect(connection) {
|
|
38
|
-
var onConnect =
|
|
38
|
+
var onConnect = getFlowProps(function (state) {
|
|
39
39
|
return state.onConnect;
|
|
40
40
|
});
|
|
41
41
|
onConnect === null || onConnect === void 0 || onConnect(connection); // 直接回调内置的onConnect 逻辑
|
|
@@ -9,11 +9,10 @@
|
|
|
9
9
|
* Copyright (c) 2025 by yanxianliang, All Rights Reserved.
|
|
10
10
|
*/
|
|
11
11
|
import { LayoutFunction } from "@rxflow/base";
|
|
12
|
-
import { IWorkflowProps, WorkflowNode } from "
|
|
12
|
+
import { IWorkflowProps, WorkflowNode } from "../types";
|
|
13
13
|
import { Edge } from "@xyflow/react";
|
|
14
14
|
export declare const useWorkFlowProps: <NodeType extends WorkflowNode = WorkflowNode, EdgeType extends Edge = Edge>(props: IWorkflowProps<NodeType, EdgeType>) => {
|
|
15
15
|
selectNodesOnDrag: boolean;
|
|
16
|
-
omitProps: string[];
|
|
17
16
|
nodesDraggable: boolean;
|
|
18
17
|
nodesConnectable: boolean;
|
|
19
18
|
deleteKeyCode: import("@xyflow/react").KeyCode | null;
|
|
@@ -94,7 +93,7 @@ export declare const useWorkFlowProps: <NodeType extends WorkflowNode = Workflow
|
|
|
94
93
|
popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
|
|
95
94
|
popoverTarget?: string | undefined;
|
|
96
95
|
inert?: boolean | undefined;
|
|
97
|
-
inputMode?: "none" | "search" | "text" | "
|
|
96
|
+
inputMode?: "none" | "search" | "text" | "url" | "email" | "tel" | "numeric" | "decimal" | undefined;
|
|
98
97
|
is?: string | undefined;
|
|
99
98
|
exportparts?: string | undefined;
|
|
100
99
|
part?: string | undefined;
|
|
@@ -110,7 +109,7 @@ export declare const useWorkFlowProps: <NodeType extends WorkflowNode = Workflow
|
|
|
110
109
|
"aria-colindextext"?: string | undefined;
|
|
111
110
|
"aria-colspan"?: number | undefined;
|
|
112
111
|
"aria-controls"?: string | undefined;
|
|
113
|
-
"aria-current"?: boolean | "
|
|
112
|
+
"aria-current"?: boolean | "step" | "date" | "time" | "page" | "location" | "true" | "false" | undefined;
|
|
114
113
|
"aria-describedby"?: string | undefined;
|
|
115
114
|
"aria-description"?: string | undefined;
|
|
116
115
|
"aria-details"?: string | undefined;
|
|
@@ -464,7 +463,7 @@ export declare const useWorkFlowProps: <NodeType extends WorkflowNode = Workflow
|
|
|
464
463
|
forceFitView?: boolean | undefined;
|
|
465
464
|
loading?: boolean | undefined;
|
|
466
465
|
quickAdd?: boolean | undefined;
|
|
467
|
-
renderNodeIcon?: ((nodeDefinition: import("
|
|
466
|
+
renderNodeIcon?: ((nodeDefinition: import("../types").WorkFlowNodeDefinition<NodeType["data"]>) => import("react").ReactNode) | undefined;
|
|
468
467
|
sider?: {
|
|
469
468
|
loading?: boolean | undefined;
|
|
470
469
|
} | undefined;
|
|
@@ -479,7 +478,7 @@ export declare const useWorkFlowProps: <NodeType extends WorkflowNode = Workflow
|
|
|
479
478
|
connectTargetHandle: string;
|
|
480
479
|
} | undefined>) | undefined;
|
|
481
480
|
controlsPosition: import("@xyflow/react").PanelPosition;
|
|
482
|
-
nodeTypes: import("
|
|
481
|
+
nodeTypes: import("../types").WorkFlowNodeDefinition<NodeType["data"]>[] | undefined;
|
|
483
482
|
fitView: boolean;
|
|
484
483
|
};
|
|
485
484
|
//# sourceMappingURL=useWorkFlowProps.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useWorkFlowProps.d.ts","sourceRoot":"","sources":["useWorkFlowProps.ts"],"names":[],"mappings":";;AAAA;;;;;;;GAOG;AACH,OAAO,
|
|
1
|
+
{"version":3,"file":"useWorkFlowProps.d.ts","sourceRoot":"","sources":["useWorkFlowProps.ts"],"names":[],"mappings":";;AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,cAAc,EAAqC,MAAM,cAAc,CAAC;AACjF,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAerC,eAAO,MAAM,gBAAgB,sFAGpB,eAAe,QAAQ,EAAE,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6E1C,CAAC"}
|
|
@@ -27,7 +27,6 @@ import { useOnEdgeMouseEnter } from "./useOnEdgeMouseEnter";
|
|
|
27
27
|
import { useOnEdgeMouseLeave } from "./useOnEdgeMouseLeave";
|
|
28
28
|
import { useOnNodesChange } from "./useOnNodesChange";
|
|
29
29
|
import { useOnSelectionChange } from "./useOnSelectionChange";
|
|
30
|
-
var omitProps = ['height', 'sider', 'loading', 'connectionLimit', 'onNodeTypeDrop', 'renderNodeIcon', 'quickAdd'];
|
|
31
30
|
var defaultDeleteKeyCode = ["Delete", "Backspace"];
|
|
32
31
|
export var useWorkFlowProps = function useWorkFlowProps(props) {
|
|
33
32
|
var _props$deleteKeyCode = props.deleteKeyCode,
|
|
@@ -77,7 +76,6 @@ export var useWorkFlowProps = function useWorkFlowProps(props) {
|
|
|
77
76
|
fitView: fitView
|
|
78
77
|
}, others), {}, {
|
|
79
78
|
selectNodesOnDrag: selectNodesOnDrag,
|
|
80
|
-
omitProps: omitProps,
|
|
81
79
|
nodesDraggable: nodesDraggable,
|
|
82
80
|
nodesConnectable: nodesConnectable,
|
|
83
81
|
deleteKeyCode: deleteKeyCode,
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
/**
|
|
3
|
+
* @author: yanxianliang
|
|
4
|
+
* @date: 2025-01-17
|
|
5
|
+
* @desc: Workflow Props hooks - 类型化的 props 访问
|
|
6
|
+
*
|
|
7
|
+
* Copyright (c) 2025 by yanxianliang, All Rights Reserved.
|
|
8
|
+
*/
|
|
9
|
+
import { IBaseFlowProps } from '@rxflow/base';
|
|
10
|
+
import { IWorkflowProps, WorkflowExtendProps, WorkflowNode } from '../types';
|
|
11
|
+
import { Edge } from '@xyflow/react';
|
|
12
|
+
type WorkflowFullFlowProps<NodeType extends WorkflowNode = WorkflowNode, EdgeType extends Edge = Edge> = IBaseFlowProps<NodeType, EdgeType> & WorkflowExtendProps<NodeType>;
|
|
13
|
+
/**
|
|
14
|
+
* 获取原始输入 props
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* const inputProps = useWorkflowInputProps();
|
|
18
|
+
* const nodeTypes = useWorkflowInputProps(state => state.nodeTypes);
|
|
19
|
+
*/
|
|
20
|
+
export declare function useWorkflowInputProps<NodeType extends WorkflowNode = WorkflowNode, EdgeType extends Edge = Edge>(): IWorkflowProps<NodeType, EdgeType>;
|
|
21
|
+
export declare function useWorkflowInputProps<NodeType extends WorkflowNode = WorkflowNode, EdgeType extends Edge = Edge, U = unknown>(selector: (state: IWorkflowProps<NodeType, EdgeType>) => U): U;
|
|
22
|
+
/**
|
|
23
|
+
* 获取转换后的 Flow props
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* const flowProps = useWorkflowFlowProps();
|
|
27
|
+
* const nodes = useWorkflowFlowProps(state => state.nodes);
|
|
28
|
+
*/
|
|
29
|
+
export declare function useWorkflowFlowProps<NodeType extends WorkflowNode = WorkflowNode, EdgeType extends Edge = Edge>(): WorkflowFullFlowProps<NodeType, EdgeType>;
|
|
30
|
+
export declare function useWorkflowFlowProps<NodeType extends WorkflowNode = WorkflowNode, EdgeType extends Edge = Edge, U = unknown>(selector: (state: WorkflowFullFlowProps<NodeType, EdgeType>) => U): U;
|
|
31
|
+
/**
|
|
32
|
+
* 获取原始输入 props 的 getter(非响应式)
|
|
33
|
+
*/
|
|
34
|
+
export declare const useGetWorkflowInputProps: <NodeType extends WorkflowNode = WorkflowNode, EdgeType extends Edge = Edge>() => {
|
|
35
|
+
(): IWorkflowProps<NodeType, EdgeType>;
|
|
36
|
+
<U>(selector: (state: IWorkflowProps<NodeType, EdgeType>) => U): U;
|
|
37
|
+
};
|
|
38
|
+
/**
|
|
39
|
+
* 获取转换后 Flow props 的 getter(非响应式)
|
|
40
|
+
*/
|
|
41
|
+
export declare const useGetWorkflowFlowProps: <NodeType extends WorkflowNode = WorkflowNode, EdgeType extends Edge = Edge>() => {
|
|
42
|
+
(): WorkflowFullFlowProps<NodeType, EdgeType>;
|
|
43
|
+
<U>(selector: (state: WorkflowFullFlowProps<NodeType, EdgeType>) => U): U;
|
|
44
|
+
};
|
|
45
|
+
/**
|
|
46
|
+
* 获取连接限制配置
|
|
47
|
+
*/
|
|
48
|
+
export declare const useConnectionLimit: () => {
|
|
49
|
+
preventCycle?: boolean | undefined;
|
|
50
|
+
preventConcurrency?: boolean | undefined;
|
|
51
|
+
preventCrossSubFlow?: boolean | undefined;
|
|
52
|
+
} | undefined;
|
|
53
|
+
/**
|
|
54
|
+
* 获取是否启用快速添加
|
|
55
|
+
*/
|
|
56
|
+
export declare const useQuickAdd: () => boolean | undefined;
|
|
57
|
+
/**
|
|
58
|
+
* 获取节点类型拖放回调
|
|
59
|
+
*/
|
|
60
|
+
export declare const useOnNodeTypeDrop: () => ((parentFlow: import("@xyflow/react").InternalNode<WorkflowNode> | undefined, positionInParent: import("@xyflow/react").XYPosition, nodeType: string) => Promise<{
|
|
61
|
+
id: string;
|
|
62
|
+
connectSourceHandle: string;
|
|
63
|
+
connectTargetHandle: string;
|
|
64
|
+
} | undefined>) | undefined;
|
|
65
|
+
/**
|
|
66
|
+
* 获取渲染节点图标函数
|
|
67
|
+
*/
|
|
68
|
+
export declare const useRenderNodeIcon: () => ((nodeDefinition: import("../types").WorkFlowNodeDefinition<Record<string, unknown>>) => import("react").ReactNode) | undefined;
|
|
69
|
+
/**
|
|
70
|
+
* 获取选择策略
|
|
71
|
+
*/
|
|
72
|
+
export declare const useSelectionStrategy: () => import("@rxflow/base").SelectionStrategy | undefined;
|
|
73
|
+
/**
|
|
74
|
+
* 获取是否只读
|
|
75
|
+
*/
|
|
76
|
+
export declare const useWorkflowReadOnly: () => boolean | undefined;
|
|
77
|
+
/**
|
|
78
|
+
* 获取加载状态
|
|
79
|
+
*/
|
|
80
|
+
export declare const useWorkflowLoading: () => boolean | undefined;
|
|
81
|
+
export {};
|
|
82
|
+
//# sourceMappingURL=useWorkflowPropsHooks.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useWorkflowPropsHooks.d.ts","sourceRoot":"","sources":["useWorkflowPropsHooks.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG;AACH,OAAO,EAAkE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9G,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7E,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,KAAK,qBAAqB,CACxB,QAAQ,SAAS,YAAY,GAAG,YAAY,EAC5C,QAAQ,SAAS,IAAI,GAAG,IAAI,IAC1B,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,mBAAmB,CAAC,QAAQ,CAAC,CAAC;AAEvE;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CACnC,QAAQ,SAAS,YAAY,GAAG,YAAY,EAC5C,QAAQ,SAAS,IAAI,GAAG,IAAI,KACzB,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AACxC,wBAAgB,qBAAqB,CACnC,QAAQ,SAAS,YAAY,GAAG,YAAY,EAC5C,QAAQ,SAAS,IAAI,GAAG,IAAI,EAC5B,CAAC,GAAG,OAAO,EACX,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AASjE;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,SAAS,YAAY,GAAG,YAAY,EAC5C,QAAQ,SAAS,IAAI,GAAG,IAAI,KACzB,qBAAqB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC/C,wBAAgB,oBAAoB,CAClC,QAAQ,SAAS,YAAY,GAAG,YAAY,EAC5C,QAAQ,SAAS,IAAI,GAAG,IAAI,EAC5B,CAAC,GAAG,OAAO,EACX,QAAQ,EAAE,CAAC,KAAK,EAAE,qBAAqB,CAAC,QAAQ,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AASxE;;GAEG;AACH,eAAO,MAAM,wBAAwB;;;CAKpC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;CAKnC,CAAC;AAGF;;GAEG;AACH,eAAO,MAAM,kBAAkB;;;;aAA8D,CAAC;AAE9F;;GAEG;AACH,eAAO,MAAM,WAAW,2BAAuD,CAAC;AAEhF;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;2BAA6D,CAAC;AAE5F;;GAEG;AACH,eAAO,MAAM,iBAAiB,uIAA6D,CAAC;AAE5F;;GAEG;AACH,eAAO,MAAM,oBAAoB,4DAAgE,CAAC;AAElG;;GAEG;AACH,eAAO,MAAM,mBAAmB,2BAAuD,CAAC;AAExF;;GAEG;AACH,eAAO,MAAM,kBAAkB,2BAAsD,CAAC"}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @author: yanxianliang
|
|
3
|
+
* @date: 2025-01-17
|
|
4
|
+
* @desc: Workflow Props hooks - 类型化的 props 访问
|
|
5
|
+
*
|
|
6
|
+
* Copyright (c) 2025 by yanxianliang, All Rights Reserved.
|
|
7
|
+
*/
|
|
8
|
+
import { useInputProps, useFlowProps, useGetInputProps, useGetFlowProps } from '@rxflow/base';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* 获取原始输入 props
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* const inputProps = useWorkflowInputProps();
|
|
15
|
+
* const nodeTypes = useWorkflowInputProps(state => state.nodeTypes);
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
export function useWorkflowInputProps(selector) {
|
|
19
|
+
return useInputProps(selector);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* 获取转换后的 Flow props
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* const flowProps = useWorkflowFlowProps();
|
|
27
|
+
* const nodes = useWorkflowFlowProps(state => state.nodes);
|
|
28
|
+
*/
|
|
29
|
+
|
|
30
|
+
export function useWorkflowFlowProps(selector) {
|
|
31
|
+
return useFlowProps(selector);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* 获取原始输入 props 的 getter(非响应式)
|
|
36
|
+
*/
|
|
37
|
+
export var useGetWorkflowInputProps = function useGetWorkflowInputProps() {
|
|
38
|
+
return useGetInputProps();
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* 获取转换后 Flow props 的 getter(非响应式)
|
|
43
|
+
*/
|
|
44
|
+
export var useGetWorkflowFlowProps = function useGetWorkflowFlowProps() {
|
|
45
|
+
return useGetFlowProps();
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
// 便捷 hooks
|
|
49
|
+
/**
|
|
50
|
+
* 获取连接限制配置
|
|
51
|
+
*/
|
|
52
|
+
export var useConnectionLimit = function useConnectionLimit() {
|
|
53
|
+
return useWorkflowInputProps(function (state) {
|
|
54
|
+
return state.connectionLimit;
|
|
55
|
+
});
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
/**
|
|
59
|
+
* 获取是否启用快速添加
|
|
60
|
+
*/
|
|
61
|
+
export var useQuickAdd = function useQuickAdd() {
|
|
62
|
+
return useWorkflowInputProps(function (state) {
|
|
63
|
+
return state.quickAdd;
|
|
64
|
+
});
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
/**
|
|
68
|
+
* 获取节点类型拖放回调
|
|
69
|
+
*/
|
|
70
|
+
export var useOnNodeTypeDrop = function useOnNodeTypeDrop() {
|
|
71
|
+
return useWorkflowInputProps(function (state) {
|
|
72
|
+
return state.onNodeTypeDrop;
|
|
73
|
+
});
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* 获取渲染节点图标函数
|
|
78
|
+
*/
|
|
79
|
+
export var useRenderNodeIcon = function useRenderNodeIcon() {
|
|
80
|
+
return useWorkflowInputProps(function (state) {
|
|
81
|
+
return state.renderNodeIcon;
|
|
82
|
+
});
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* 获取选择策略
|
|
87
|
+
*/
|
|
88
|
+
export var useSelectionStrategy = function useSelectionStrategy() {
|
|
89
|
+
return useWorkflowInputProps(function (state) {
|
|
90
|
+
return state.selectionStrategy;
|
|
91
|
+
});
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
/**
|
|
95
|
+
* 获取是否只读
|
|
96
|
+
*/
|
|
97
|
+
export var useWorkflowReadOnly = function useWorkflowReadOnly() {
|
|
98
|
+
return useWorkflowInputProps(function (state) {
|
|
99
|
+
return state.readOnly;
|
|
100
|
+
});
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* 获取加载状态
|
|
105
|
+
*/
|
|
106
|
+
export var useWorkflowLoading = function useWorkflowLoading() {
|
|
107
|
+
return useWorkflowInputProps(function (state) {
|
|
108
|
+
return state.loading;
|
|
109
|
+
});
|
|
110
|
+
};
|
package/esm/index.d.ts
CHANGED
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @author: yanxianliang
|
|
3
3
|
* @date: 2025-06-27 09:32
|
|
4
|
+
* @modified:2025/1/17 by yanxianliang
|
|
4
5
|
* @desc: 工作流组件
|
|
5
6
|
*
|
|
6
7
|
* 支持工作流编排能力,支持节点自定义
|
|
7
8
|
*
|
|
8
|
-
* 支持nodes 外部传递
|
|
9
|
-
* 支持x6数据结构转换
|
|
10
|
-
*
|
|
11
9
|
* Copyright (c) 2025 by yanxianliang, All Rights Reserved.
|
|
12
10
|
*/
|
|
13
11
|
import '@xyflow/react/dist/style.css';
|
package/esm/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,KAAe,MAAM,OAAO,CAAC;AAGpC,OAAO,EAAE,cAAc,EAAuB,MAAM,SAAS,CAAC;8DAO6E,eAAe,QAAQ,CAAC,KAAK,MAAM,YAAY;AAA1L,wBAA2L;AAG3L,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,2BAA2B,CAAC;AAG1C,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC"}
|
package/esm/index.js
CHANGED
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @author: yanxianliang
|
|
3
3
|
* @date: 2025-06-27 09:32
|
|
4
|
+
* @modified:2025/1/17 by yanxianliang
|
|
4
5
|
* @desc: 工作流组件
|
|
5
6
|
*
|
|
6
7
|
* 支持工作流编排能力,支持节点自定义
|
|
7
8
|
*
|
|
8
|
-
* 支持nodes 外部传递
|
|
9
|
-
* 支持x6数据结构转换
|
|
10
|
-
*
|
|
11
9
|
* Copyright (c) 2025 by yanxianliang, All Rights Reserved.
|
|
12
10
|
*/
|
|
13
11
|
|
|
@@ -16,14 +14,23 @@ import { createFlow } from "@rxflow/base";
|
|
|
16
14
|
import { isEqual } from 'lodash';
|
|
17
15
|
import { memo } from "react";
|
|
18
16
|
import { Layout } from "./components";
|
|
19
|
-
import { useWorkFlowProps } from "./hooks";
|
|
20
|
-
// 怎么把 nodeType 和 EdgeType 传递进去
|
|
17
|
+
import { useWorkFlowProps } from "./hooks/useWorkFlowProps";
|
|
21
18
|
var WorkFlow = createFlow(Layout, useWorkFlowProps);
|
|
22
19
|
export default /*#__PURE__*/memo(WorkFlow, function (prevProps, nextProps) {
|
|
23
20
|
return isEqual(prevProps, nextProps);
|
|
24
21
|
});
|
|
22
|
+
|
|
23
|
+
// 类型导出
|
|
25
24
|
export * from "./types";
|
|
25
|
+
|
|
26
|
+
// 工具函数导出
|
|
26
27
|
export * from "./utils";
|
|
28
|
+
|
|
29
|
+
// 常量导出
|
|
27
30
|
export * from "./constants/RunningStatus";
|
|
31
|
+
|
|
32
|
+
// 组件导出
|
|
28
33
|
export * from "./components";
|
|
34
|
+
|
|
35
|
+
// Hooks 导出
|
|
29
36
|
export * from "./hooks";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rxflow/workflow",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4-alpha.0",
|
|
4
4
|
"description": "工作流",
|
|
5
5
|
"homepage": "https://tree-graph.publib.cn/packages/workflow",
|
|
6
6
|
"repository": {
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"@codemirror/theme-one-dark": "^6.1.3",
|
|
42
42
|
"@fsegurai/codemirror-theme-github-dark": "^6.2.0",
|
|
43
43
|
"@fsegurai/codemirror-theme-github-light": "^6.2.0",
|
|
44
|
-
"@rxflow/base": "^0.0.
|
|
44
|
+
"@rxflow/base": "^0.0.4-alpha.0",
|
|
45
45
|
"@uiw/react-codemirror": "^4.24.1",
|
|
46
46
|
"@xterm/addon-fit": "^0.10.0",
|
|
47
47
|
"@xterm/xterm": "^5.5.0",
|