@blueking/flow-canvas 0.0.2 → 0.0.4
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 +183 -123
- package/dist/index.cjs.js +1 -1
- package/dist/index.d.ts +68 -12
- package/dist/index.esm.js +2185 -1548
- package/dist/style.css +1 -1
- package/package.json +2 -5
package/README.md
CHANGED
|
@@ -4,6 +4,12 @@
|
|
|
4
4
|
|
|
5
5
|
`@blueking/flow-canvas` 是一个通用流程画布编辑引擎，基于 AntV X6 构建，提供数据驱动的图编辑能力。适用于 DAG / 流程图 / 工作流等场景。
|
|
6
6
|
|
|
7
|
+
补充文档：
|
|
8
|
+
|
|
9
|
+
- 使用说明：[`docs/usage.md`](./docs/usage.md)
|
|
10
|
+
- 设计说明：[`docs/design.md`](./docs/design.md)
|
|
11
|
+
- 测试计划：[`docs/testing.md`](./docs/testing.md)
|
|
12
|
+
|
|
7
13
|
## 安装
|
|
8
14
|
|
|
9
15
|
```bash
|
|
@@ -13,7 +19,7 @@ npm install @blueking/flow-canvas
|
|
|
13
19
|
项目中另外还需要安装以下前置依赖
|
|
14
20
|
|
|
15
21
|
```bash
|
|
16
|
-
npm install @antv/x6 @antv/x6-plugin-minimap @antv/x6-plugin-selection @antv/x6-plugin-snapline @antv/x6-plugin-dnd @antv/x6-vue-shape vue
|
|
22
|
+
npm install @antv/x6 @antv/x6-plugin-minimap @antv/x6-plugin-selection @antv/x6-plugin-snapline @antv/x6-plugin-dnd @antv/x6-vue-shape modern-screenshot vue
|
|
17
23
|
```
|
|
18
24
|
|
|
19
25
|
## 快速开始
|
|
@@ -38,6 +44,7 @@ npm install @antv/x6 @antv/x6-plugin-minimap @antv/x6-plugin-selection @antv/x6-
|
|
|
38
44
|
CanvasToolbar,
|
|
39
45
|
createDefaultSchema,
|
|
40
46
|
createEmptyFlowModel,
|
|
47
|
+
searchPlugin,
|
|
41
48
|
selectionPlugin,
|
|
42
49
|
snaplinePlugin,
|
|
43
50
|
type CanvasUiEvent,
|
|
@@ -49,7 +56,7 @@ npm install @antv/x6 @antv/x6-plugin-minimap @antv/x6-plugin-selection @antv/x6-
|
|
|
49
56
|
const editor = useCanvasEditor({
|
|
50
57
|
initialFlowModel: createEmptyFlowModel(),
|
|
51
58
|
schema,
|
|
52
|
-
plugins: [selectionPlugin(), snaplinePlugin()],
|
|
59
|
+
plugins: [selectionPlugin(), snaplinePlugin(), searchPlugin()],
|
|
53
60
|
});
|
|
54
61
|
|
|
55
62
|
function handleUiEvent(event: CanvasUiEvent) {
|
|
@@ -167,23 +174,27 @@ npm install @antv/x6 @antv/x6-plugin-minimap @antv/x6-plugin-selection @antv/x6-
|
|
|
167
174
|
| plugins | `CanvasPlugin[]` | 否 | `[]` | 插件列表 |
|
|
168
175
|
| mode | `CanvasMode` | 否 | `'edit'` | `'edit'` / `'readonly'` / `'thumbnail'` |
|
|
169
176
|
| historyOptions | `CanvasHistoryOptions` | 否 | - | 历史配置 |
|
|
177
|
+
| idGenerator | `IdGenerator` | 否 | 内置生成 | 自定义节点/边 ID 生成函数 |
|
|
170
178
|
| onCommandResult | `(result) => void` | 否 | - | 命令执行结果回调 |
|
|
171
179
|
| onFlowModelChange | `(event) => void` | 否 | - | FlowModel 变更回调 |
|
|
172
180
|
|
|
173
181
|
#### CanvasEditorContext（返回值）
|
|
174
182
|
|
|
175
|
-
| 属性/方法
|
|
176
|
-
|
|
|
177
|
-
| flowModel
|
|
178
|
-
| history
|
|
179
|
-
| schema
|
|
180
|
-
| mode
|
|
181
|
-
|
|
|
182
|
-
|
|
|
183
|
-
|
|
|
184
|
-
|
|
|
185
|
-
|
|
|
186
|
-
|
|
|
183
|
+
| 属性/方法 | 类型 | 说明 |
|
|
184
|
+
| ------------------------- | --------------------------------------------- | ------------------------------ |
|
|
185
|
+
| flowModel | `Readonly<Ref<FlowModel>>` | 当前流程模型（响应式） |
|
|
186
|
+
| history | `CanvasHistory` | 历史管理器 |
|
|
187
|
+
| schema | `CanvasSchema` | Schema 定义 |
|
|
188
|
+
| mode | `Ref<CanvasMode>` | 当前模式 |
|
|
189
|
+
| selectionMode | `Ref<boolean>` | 是否启用框选模式 |
|
|
190
|
+
| api | `Ref<CanvasApi \| null>` | 画布 API（Runtime 挂载后可用） |
|
|
191
|
+
| toolbarItems | `Ref<CanvasToolbarItem[]>` | 插件聚合的工具栏项 |
|
|
192
|
+
| idGenerator | `IdGenerator` | 节点/边 ID 生成函数 |
|
|
193
|
+
| extendedApi | `Record<string, Function>` | 插件扩展的 API |
|
|
194
|
+
| executeCommand(envelope) | `(CommandEnvelope) => CommandExecutionResult` | 执行命令 |
|
|
195
|
+
| replaceFlowModel(model) | `(FlowModel) => void` | 整体替换流程模型 |
|
|
196
|
+
| setMode(mode) | `(CanvasMode) => void` | 切换模式 |
|
|
197
|
+
| setSelectionMode(enabled) | `(boolean) => void` | 切换框选模式 |
|
|
187
198
|
|
|
188
199
|
<br>
|
|
189
200
|
|
|
@@ -649,19 +660,20 @@ if (result.status === 'applied') {
|
|
|
649
660
|
|
|
650
661
|
核心渲染组件，负责创建 X6 Graph 并双向桥接 FlowModel。
|
|
651
662
|
|
|
652
|
-
| Prop
|
|
653
|
-
|
|
|
654
|
-
| editor
|
|
655
|
-
| graphOptions
|
|
656
|
-
| nodeActions
|
|
657
|
-
| quickAdd
|
|
663
|
+
| Prop | 类型 | 说明 |
|
|
664
|
+
| ---------------------------- | -------------------------------------------- | ---------------------------------------------------- |
|
|
665
|
+
| editor | `CanvasEditorContext` | 编辑器实例（必填） |
|
|
666
|
+
| graphOptions | `Record<string, unknown>` | 额外 X6 Graph 选项 |
|
|
667
|
+
| nodeActions | `NodeActionsConfig` | 节点快捷操作工具栏配置（见下方详细说明） |
|
|
668
|
+
| quickAdd | `QuickAddConfig` | 快捷添加按钮配置（默认绑定右侧端口，见下方详细说明） |
|
|
669
|
+
| getConnectionExcludedNodeIds | `(sourceNodeId: string) => Iterable<string>` | 拖拽连线时返回不应显示端口的节点 ID 集合 |
|
|
658
670
|
|
|
659
671
|
| Emit | 参数 | 说明 |
|
|
660
672
|
| -------- | --------------- | -------------------- |
|
|
661
673
|
| ui-event | `CanvasUiEvent` | 非命令类 UI 交互事件 |
|
|
662
674
|
|
|
663
|
-
| Slot | Props | 说明
|
|
664
|
-
| --------------- | ------------------------------------------------ |
|
|
675
|
+
| Slot | Props | 说明 |
|
|
676
|
+
| --------------- | ------------------------------------------------ | ------------------------------------------------------------------- |
|
|
665
677
|
| quick-add-panel | `{ node, api, insertNodeToRight, closePopover }` | 快捷添加弹层内容，点击绑定端口上的"+"按钮时显示（默认显示提示文字） |
|
|
666
678
|
|
|
667
679
|
#### 节点快捷操作工具栏
|
|
@@ -687,19 +699,23 @@ if (result.status === 'applied') {
|
|
|
687
699
|
|
|
688
700
|
通过 schema `getBehavior` 返回值控制每个节点类型的工具栏行为：
|
|
689
701
|
|
|
690
|
-
| 属性
|
|
691
|
-
|
|
|
692
|
-
| `showActions`
|
|
693
|
-
| `deletable`
|
|
694
|
-
| `copyable`
|
|
695
|
-
| `disconnectable`
|
|
696
|
-
| `debuggable`
|
|
697
|
-
| `deleteDisabled`
|
|
698
|
-
| `copyDisabled`
|
|
699
|
-
| `copyInsertDisabled`
|
|
700
|
-
| `disconnectDisabled`
|
|
701
|
-
| `debugDisabled`
|
|
702
|
-
| `
|
|
702
|
+
| 属性 | 说明 |
|
|
703
|
+
| --------------------- | --------------------------------------------------------------------------------- |
|
|
704
|
+
| `showActions` | `false` → 该节点类型不显示整个工具栏 |
|
|
705
|
+
| `deletable` | `false` → 隐藏删除按钮 |
|
|
706
|
+
| `copyable` | `false` → 隐藏复制和复制并插入按钮 |
|
|
707
|
+
| `disconnectable` | `false` → 隐藏断开连线按钮 |
|
|
708
|
+
| `debuggable` | `false` → 隐藏调试按钮（需全局 `showDebug` 也为 `true`） |
|
|
709
|
+
| `deleteDisabled` | `true` → 删除按钮可见但置灰不可点击 |
|
|
710
|
+
| `copyDisabled` | `true` → 复制按钮置灰 |
|
|
711
|
+
| `copyInsertDisabled` | `true` → 复制并插入按钮置灰 |
|
|
712
|
+
| `disconnectDisabled` | `true` → 断开连线按钮置灰 |
|
|
713
|
+
| `debugDisabled` | `true` → 调试按钮置灰 |
|
|
714
|
+
| `connectable` | `false` → 此节点端口不允许发起连线（控制 magnet 属性） |
|
|
715
|
+
| `targetable` | `false` → 拖拽连线期间不显示此节点端口（不可作为连线目标） |
|
|
716
|
+
| `bringToFrontOnDrag` | `false` → 拖拽时不临时置顶节点 z-index（默认 `true`） |
|
|
717
|
+
| `hidePortForQuickAdd` | `false` → quick-add 激活时不隐藏对应方向的连接端口（默认 `true`） |
|
|
718
|
+
| `actionsOffset` | `{ x?: number; y?: number }` — 工具栏位置偏移（px），相对于默认位置（节点右下角） |
|
|
703
719
|
|
|
704
720
|
按钮有效可见性 = 全局 `show*` AND 逐节点 `*able !== false`；
|
|
705
721
|
按钮禁用状态 = 逐节点 `*Disabled === true`。
|
|
@@ -720,13 +736,12 @@ hover 节点时，指定端口会显示为"+"按钮，支持点击弹出面板
|
|
|
720
736
|
|
|
721
737
|
**QuickAddConfig（全局配置）**
|
|
722
738
|
|
|
723
|
-
| 属性
|
|
724
|
-
|
|
|
725
|
-
| `enabled`
|
|
726
|
-
| `
|
|
727
|
-
| `
|
|
728
|
-
| `
|
|
729
|
-
| `insertDirection` | `string \| function` | - | 点击 quick-add 插入节点时使用的方向；默认跟随当前绑定 port 的标准方向，不可推断时回退为 `'right'` |
|
|
739
|
+
| 属性 | 类型 | 默认 | 说明 |
|
|
740
|
+
| ----------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------- |
|
|
741
|
+
| `enabled` | `boolean` | `true` | 全局开关 |
|
|
742
|
+
| `portGroup` | `string` | `'right'` | quick-add 默认绑定的端口分组；节点不存在该分组端口时不显示 quick-add |
|
|
743
|
+
| `getPort` | `function` | - | 精确指定当前节点使用哪个 port；优先级高于 `portGroup` |
|
|
744
|
+
| `insertDirection` | `string \| function` | - | 点击 quick-add 插入节点时使用的方向；默认跟随当前绑定 port 的标准方向，不可推断时回退为 `'right'` |
|
|
730
745
|
|
|
731
746
|
**NodeBehaviorConfig 中的快捷添加相关字段（逐节点控制）**
|
|
732
747
|
|
|
@@ -776,12 +791,12 @@ slot 中提供的 `insertNodeToRight` helper 出于兼容仍保留这个名字
|
|
|
776
791
|
|
|
777
792
|
**quick-add-panel Slot Props**
|
|
778
793
|
|
|
779
|
-
| Prop | 类型 | 说明
|
|
780
|
-
| ------------------- | ------------------------------------------------- |
|
|
781
|
-
| `node` | `FlowNodeModel` | 当前触发的源节点
|
|
782
|
-
| `api` | `CanvasApi` | 画布 API
|
|
794
|
+
| Prop | 类型 | 说明 |
|
|
795
|
+
| ------------------- | ------------------------------------------------- | ---------------------------------------------------------------- |
|
|
796
|
+
| `node` | `FlowNodeModel` | 当前触发的源节点 |
|
|
797
|
+
| `api` | `CanvasApi` | 画布 API |
|
|
783
798
|
| `insertNodeToRight` | `(node: Omit<FlowNodeModel, 'position'>) => void` | 快捷插入方法（自动连线 + 事件）；方向遵循 `insertDirection` 配置 |
|
|
784
|
-
| `closePopover` | `() => void` | 关闭弹层
|
|
799
|
+
| `closePopover` | `() => void` | 关闭弹层 |
|
|
785
800
|
|
|
786
801
|
操作触发后通过 `@ui-event` 发出对应事件：`node.quick-add`（弹层打开时）/ `node.action.quick-insert`（插入成功时）。
|
|
787
802
|
|
|
@@ -1005,7 +1020,7 @@ interface NodePaletteItem {
|
|
|
1005
1020
|
|
|
1006
1021
|
### CanvasToolbar
|
|
1007
1022
|
|
|
1008
|
-
|
|
1023
|
+
可选的工具栏组件。默认浮动在画布左上角，内置下载、缩放、重置等核心操作；`search` / `minimap` 由对应插件注入后显示。
|
|
1009
1024
|
|
|
1010
1025
|
| Prop | 类型 | 默认 | 说明 |
|
|
1011
1026
|
| ------- | ---------------------- | ---------- | --------------------------------------- |
|
|
@@ -1028,9 +1043,9 @@ const items = createDefaultToolbarItems();
|
|
|
1028
1043
|
// 恢复显示撤销/重做
|
|
1029
1044
|
const itemsWithHistory = createDefaultToolbarItems({ include: ['undo', 'redo'] });
|
|
1030
1045
|
|
|
1031
|
-
//
|
|
1046
|
+
// 恢复撤销/重做，追加自定义项
|
|
1032
1047
|
const customItems = [
|
|
1033
|
-
...createDefaultToolbarItems({ include: ['undo', 'redo']
|
|
1048
|
+
...createDefaultToolbarItems({ include: ['undo', 'redo'] }),
|
|
1034
1049
|
{ id: 'my-tool', type: 'custom', icon: 'my-icon-class', onClick: handleClick },
|
|
1035
1050
|
];
|
|
1036
1051
|
```
|
|
@@ -1073,13 +1088,13 @@ const customItems = [
|
|
|
1073
1088
|
</template>
|
|
1074
1089
|
|
|
1075
1090
|
<style scoped>
|
|
1076
|
-
.my-canvas-wrapper {
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
}
|
|
1091
|
+
.my-canvas-wrapper {
|
|
1092
|
+
--flow-canvas-toolbar-top: auto;
|
|
1093
|
+
--flow-canvas-toolbar-bottom: 16px;
|
|
1094
|
+
--flow-canvas-toolbar-left: 50%;
|
|
1095
|
+
--flow-canvas-toolbar-right: auto;
|
|
1096
|
+
--flow-canvas-toolbar-bg: #1a1a2e;
|
|
1097
|
+
}
|
|
1083
1098
|
</style>
|
|
1084
1099
|
```
|
|
1085
1100
|
|
|
@@ -1192,37 +1207,54 @@ const schema: CanvasSchema = {
|
|
|
1192
1207
|
|
|
1193
1208
|
`editor.api.value` 在 `CanvasRuntime` 挂载后可用，之前为 `null`。
|
|
1194
1209
|
|
|
1195
|
-
| 方法 | 说明
|
|
1196
|
-
| ----------------------------------------------- |
|
|
1197
|
-
| zoomIn() / zoomOut() | 缩放
|
|
1198
|
-
| zoomTo(value) | 缩放到指定比例
|
|
1199
|
-
| zoomToFit() | 自适应画布
|
|
1200
|
-
| getZoom() | 获取当前缩放比例
|
|
1201
|
-
| centerContent() | 居中画布内容
|
|
1202
|
-
| scrollToNode(nodeId) | 滚动到指定节点
|
|
1203
|
-
| getSelection() | 获取当前选区 `{ nodeIds, edgeIds }`
|
|
1204
|
-
|
|
|
1205
|
-
|
|
|
1206
|
-
|
|
|
1207
|
-
|
|
|
1208
|
-
|
|
|
1209
|
-
|
|
|
1210
|
-
|
|
|
1211
|
-
|
|
|
1212
|
-
|
|
|
1213
|
-
|
|
|
1210
|
+
| 方法 | 说明 |
|
|
1211
|
+
| ----------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
|
|
1212
|
+
| zoomIn() / zoomOut() | 缩放 |
|
|
1213
|
+
| zoomTo(value) | 缩放到指定比例 |
|
|
1214
|
+
| zoomToFit() | 自适应画布 |
|
|
1215
|
+
| getZoom() | 获取当前缩放比例 |
|
|
1216
|
+
| centerContent() | 居中画布内容 |
|
|
1217
|
+
| scrollToNode(nodeId) | 滚动到指定节点 |
|
|
1218
|
+
| getSelection() | 获取当前选区 `{ nodeIds, edgeIds }` |
|
|
1219
|
+
| getSelectionBounds(selection?) | 获取当前选区或指定选区的整体包围盒，用于挂载选区工具条等 overlay |
|
|
1220
|
+
| selectNodes(ids) | 选中指定节点 |
|
|
1221
|
+
| selectEdges(ids) | 选中指定边 |
|
|
1222
|
+
| clearSelection() | 清除选区 |
|
|
1223
|
+
| deleteSelection(options?) | 统一删除当前选区或指定选区；按 schema behavior 过滤不可删元素，默认成功后清空选区 |
|
|
1224
|
+
| registerDndSource(el, factory) | 注册 DND 拖拽源，返回清理函数 |
|
|
1225
|
+
| startConnection(nodeId, portId?) | 从指定节点/端口发起连线 |
|
|
1226
|
+
| highlightNodes(ids) / highlightEdges(ids) | 高亮指定元素 |
|
|
1227
|
+
| clearHighlight() | 清除所有高亮 |
|
|
1228
|
+
| exportAsImage(options?) | 导出为 PNG Blob（基于 `modern-screenshot`，需安装为 peer dependency） |
|
|
1229
|
+
| overlay | `OverlayManager` 实例，提供节点屏幕定位 |
|
|
1214
1230
|
| insertNodeToRight(sourceNodeId, node, options?) | 默认在指定节点右侧插入新节点；传 `options.direction` 后可改为上/右/下/左方向，并支持自动连线和重叠检测 |
|
|
1215
|
-
| getContextMenuItems(position) | 收集插件提供的右键菜单项
|
|
1216
|
-
| onGraphEvent(event, handler) | 监听 X6 底层事件，返回取消函数
|
|
1217
|
-
| unsafeGetGraph() | 获取 X6 Graph 实例（谨慎使用）
|
|
1231
|
+
| getContextMenuItems(position) | 收集插件提供的右键菜单项 |
|
|
1232
|
+
| onGraphEvent(event, handler) | 监听 X6 底层事件，返回取消函数 |
|
|
1233
|
+
| unsafeGetGraph() | 获取 X6 Graph 实例（谨慎使用） |
|
|
1218
1234
|
|
|
1219
1235
|
<br>
|
|
1220
1236
|
|
|
1221
1237
|
## 内置插件
|
|
1222
1238
|
|
|
1239
|
+
### 框选模式
|
|
1240
|
+
|
|
1241
|
+
`selectionMode` 只表示“是否启用框选模式”，不等价于“是否允许节点被选中”。
|
|
1242
|
+
|
|
1243
|
+
- `selectionMode = true`
|
|
1244
|
+
空白区域左键拖拽启用 rubberband 框选。
|
|
1245
|
+
- `selectionMode = false`
|
|
1246
|
+
空白区域左键拖拽恢复为画布平移。
|
|
1247
|
+
- 无论 `selectionMode` 是否开启
|
|
1248
|
+
普通点击选中、`selectNodes()`、`selectEdges()` 仍然可用。
|
|
1249
|
+
|
|
1250
|
+
```typescript
|
|
1251
|
+
editor.setSelectionMode(true);
|
|
1252
|
+
editor.setSelectionMode(false);
|
|
1253
|
+
```
|
|
1254
|
+
|
|
1223
1255
|
### selectionPlugin(options?)
|
|
1224
1256
|
|
|
1225
|
-
|
|
1257
|
+
接入 X6 的通用选区能力，支持多选、框选和 `_selectable` 节点过滤。
|
|
1226
1258
|
|
|
1227
1259
|
```typescript
|
|
1228
1260
|
selectionPlugin({
|
|
@@ -1232,6 +1264,12 @@ selectionPlugin({
|
|
|
1232
1264
|
});
|
|
1233
1265
|
```
|
|
1234
1266
|
|
|
1267
|
+
注意：
|
|
1268
|
+
|
|
1269
|
+
- `selectionPlugin()` 负责注册 X6 Selection 能力。
|
|
1270
|
+
- `selectionMode` 由 `CanvasRuntime` 在运行时控制 rubberband / panning 的切换。
|
|
1271
|
+
- `selectionPlugin()` 本身不负责决定当前是否处于框选模式。
|
|
1272
|
+
|
|
1235
1273
|
### snaplinePlugin(options?)
|
|
1236
1274
|
|
|
1237
1275
|
节点拖拽时显示对齐辅助线。
|
|
@@ -1256,6 +1294,24 @@ connectionValidatorPlugin((ctx) => {
|
|
|
1256
1294
|
});
|
|
1257
1295
|
```
|
|
1258
1296
|
|
|
1297
|
+
### searchPlugin(options?)
|
|
1298
|
+
|
|
1299
|
+
工具栏搜索节点。点击搜索图标后弹出面板，支持按关键字过滤节点并通过 `Enter` / 点击快速定位到目标节点。
|
|
1300
|
+
|
|
1301
|
+
```typescript
|
|
1302
|
+
searchPlugin({
|
|
1303
|
+
placeholder: '搜索节点名称',
|
|
1304
|
+
getNodeMeta(node) {
|
|
1305
|
+
const stageName = typeof node.payload?.stageName === 'string' ? node.payload.stageName : '';
|
|
1306
|
+
return {
|
|
1307
|
+
label: node.label ?? '',
|
|
1308
|
+
subtitle: stageName || undefined,
|
|
1309
|
+
keywords: [node.label ?? '', stageName],
|
|
1310
|
+
};
|
|
1311
|
+
},
|
|
1312
|
+
});
|
|
1313
|
+
```
|
|
1314
|
+
|
|
1259
1315
|
### minimapPlugin(options?)
|
|
1260
1316
|
|
|
1261
1317
|
小地图。传入 `container` 后启用。
|
|
@@ -1345,6 +1401,7 @@ const myPlugin: CanvasPlugin = {
|
|
|
1345
1401
|
| `generateId()` | 生成唯一 ID |
|
|
1346
1402
|
| `applyCanvasCommand(model, cmd)` | 纯函数 reducer，将单条命令应用到 FlowModel，返回新 FlowModel |
|
|
1347
1403
|
| `createCanvasHistory(initialFlowModel, options?)` | 创建独立的历史管理器实例（通常由 `useCanvasEditor` 内部调用，高级场景可直接使用） |
|
|
1404
|
+
| `IdGenerator` | `(type: 'node' \| 'edge') => string`，自定义 ID 生成函数类型 |
|
|
1348
1405
|
| `CanvasConstraintError` | 命令违反 FlowModel 不变量时抛出的错误类（如重复 ID、悬挂引用等） |
|
|
1349
1406
|
| `CanvasSchemaError` | 未知节点/边类型等 Schema 级错误类 |
|
|
1350
1407
|
|
|
@@ -1371,23 +1428,24 @@ editor.history.clear();
|
|
|
1371
1428
|
|
|
1372
1429
|
## 事件类型 (CanvasUiEvent)
|
|
1373
1430
|
|
|
1374
|
-
| type | 附加字段 | 说明
|
|
1375
|
-
| ------------------------ | ----------------------- |
|
|
1376
|
-
| node.click | nodeId | 节点点击
|
|
1377
|
-
| node.dblclick | nodeId | 节点双击
|
|
1378
|
-
| node.contextmenu | nodeId, position | 节点右键
|
|
1379
|
-
| edge.click | edgeId | 边点击
|
|
1380
|
-
| edge.label.click | edgeId, labelId | 边标签点击
|
|
1381
|
-
| blank.click | position | 空白区域点击
|
|
1382
|
-
| blank.contextmenu | position | 空白区域右键
|
|
1383
|
-
| selection.change | nodeIds, edgeIds | 选区变更
|
|
1384
|
-
| node.action.delete | nodeId | 快捷删除节点
|
|
1385
|
-
| node.action.copy | sourceNodeId, newNodeId | 快捷复制节点
|
|
1386
|
-
| node.action.copy-insert | sourceNodeId, newNodeId | 快捷复制并插入
|
|
1387
|
-
| node.action.disconnect | nodeId, edgeIds | 快捷断开连线
|
|
1388
|
-
| node.action.debug | nodeId | 快捷调试
|
|
1389
|
-
| node.quick-add | nodeId, position | 快捷添加弹层打开
|
|
1390
|
-
| node.action.quick-insert | sourceNodeId, newNodeId | 快捷插入节点
|
|
1431
|
+
| type | 附加字段 | 说明 |
|
|
1432
|
+
| ------------------------ | ----------------------- | ---------------------- |
|
|
1433
|
+
| node.click | nodeId | 节点点击 |
|
|
1434
|
+
| node.dblclick | nodeId | 节点双击 |
|
|
1435
|
+
| node.contextmenu | nodeId, position | 节点右键 |
|
|
1436
|
+
| edge.click | edgeId | 边点击 |
|
|
1437
|
+
| edge.label.click | edgeId, labelId | 边标签点击 |
|
|
1438
|
+
| blank.click | position | 空白区域点击 |
|
|
1439
|
+
| blank.contextmenu | position | 空白区域右键 |
|
|
1440
|
+
| selection.change | nodeIds, edgeIds | 选区变更 |
|
|
1441
|
+
| node.action.delete | nodeId | 快捷删除节点 |
|
|
1442
|
+
| node.action.copy | sourceNodeId, newNodeId | 快捷复制节点 |
|
|
1443
|
+
| node.action.copy-insert | sourceNodeId, newNodeId | 快捷复制并插入 |
|
|
1444
|
+
| node.action.disconnect | nodeId, edgeIds | 快捷断开连线 |
|
|
1445
|
+
| node.action.debug | nodeId | 快捷调试 |
|
|
1446
|
+
| node.quick-add | nodeId, position | 快捷添加弹层打开 |
|
|
1447
|
+
| node.action.quick-insert | sourceNodeId, newNodeId | 快捷插入节点 |
|
|
1448
|
+
| toolbar.auto-layout | — | 自动排版（由外层实现） |
|
|
1391
1449
|
|
|
1392
1450
|
<br>
|
|
1393
1451
|
|
|
@@ -1407,16 +1465,16 @@ editor.history.clear();
|
|
|
1407
1465
|
|
|
1408
1466
|
### Schema 与渲染
|
|
1409
1467
|
|
|
1410
|
-
| 类型 | 说明
|
|
1411
|
-
| ----------------------- |
|
|
1412
|
-
| `CanvasSchema` | 画布配置（nodeTypes / edgeTypes）
|
|
1413
|
-
| `CanvasNodeDefinition` | 节点类型定义（component / getSize / getPorts / getBehavior）
|
|
1414
|
-
| `CanvasEdgeDefinition` | 边类型定义（router / connector / style / labelDraggable）。`labelRenderer` 字段为 `@experimental`，当前未实现
|
|
1415
|
-
| `CanvasCallbackContext` | 运行时上下文（api / flowModel / history / mode）
|
|
1416
|
-
| `CanvasMode` | 模式：`'edit'` / `'readonly'` / `'thumbnail'`
|
|
1417
|
-
| `NodeBehaviorConfig` | 节点行为配置（showActions / draggable / selectable / deletable / connectable / copyable / disconnectable / debuggable / quickAddEnabled + 各按钮 Disabled 状态） |
|
|
1418
|
-
| `EdgeRenderState` | 边渲染状态（selected / highlighted / hovered）
|
|
1419
|
-
| `EdgeStyle` | 边样式（stroke / strokeWidth / strokeDasharray）
|
|
1468
|
+
| 类型 | 说明 |
|
|
1469
|
+
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
1470
|
+
| `CanvasSchema` | 画布配置（nodeTypes / edgeTypes） |
|
|
1471
|
+
| `CanvasNodeDefinition` | 节点类型定义（component / getSize / getPorts / getBehavior） |
|
|
1472
|
+
| `CanvasEdgeDefinition` | 边类型定义（router / connector / style / labelDraggable）。`labelRenderer` 字段为 `@experimental`，当前未实现 |
|
|
1473
|
+
| `CanvasCallbackContext` | 运行时上下文（api / flowModel / history / mode） |
|
|
1474
|
+
| `CanvasMode` | 模式：`'edit'` / `'readonly'` / `'thumbnail'` |
|
|
1475
|
+
| `NodeBehaviorConfig` | 节点行为配置（showActions / draggable / selectable / deletable / connectable / targetable / copyable / disconnectable / debuggable / quickAddEnabled / bringToFrontOnDrag / hidePortForQuickAdd + 各按钮 Disabled 状态） |
|
|
1476
|
+
| `EdgeRenderState` | 边渲染状态（selected / highlighted / hovered） |
|
|
1477
|
+
| `EdgeStyle` | 边样式（stroke / strokeWidth / strokeDasharray） |
|
|
1420
1478
|
|
|
1421
1479
|
### 命令系统
|
|
1422
1480
|
|
|
@@ -1447,22 +1505,23 @@ editor.history.clear();
|
|
|
1447
1505
|
|
|
1448
1506
|
### API 与工具栏
|
|
1449
1507
|
|
|
1450
|
-
| 类型
|
|
1451
|
-
|
|
|
1452
|
-
| `CanvasApi`
|
|
1453
|
-
| `CanvasToolbarItem`
|
|
1454
|
-
| `BuiltinToolbarType`
|
|
1455
|
-
| `NodeActionsConfig`
|
|
1456
|
-
| `QuickAddConfig`
|
|
1457
|
-
| `QuickAddPortResolver`
|
|
1458
|
-
| `QuickAddInsertDirectionResolver` | quick-add 插入方向回调类型；返回具体方向后，优先级高于默认方向推导
|
|
1459
|
-
| `InsertDirection`
|
|
1460
|
-
| `InsertNodeOptions`
|
|
1461
|
-
| `ExportOptions`
|
|
1462
|
-
| `
|
|
1463
|
-
| `
|
|
1464
|
-
| `
|
|
1465
|
-
| `
|
|
1508
|
+
| 类型 | 说明 |
|
|
1509
|
+
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
1510
|
+
| `CanvasApi` | 画布公共 API 接口（含 `insertNodeToRight`） |
|
|
1511
|
+
| `CanvasToolbarItem` | 工具栏项配置 |
|
|
1512
|
+
| `BuiltinToolbarType` | 内置工具类型（`'undo'` / `'redo'` / `'select'` / `'auto-layout'` / `'search'` / `'minimap'` / `'export'` / `'zoom-in'` / `'zoom-out'` / `'reset'` 等） |
|
|
1513
|
+
| `NodeActionsConfig` | 节点快捷操作工具栏全局配置（showDebug / showDelete / showCopy / showCopyInsert / showDisconnect / insertGap） |
|
|
1514
|
+
| `QuickAddConfig` | 快捷添加按钮全局配置（enabled / portGroup / getPort / insertDirection） |
|
|
1515
|
+
| `QuickAddPortResolver` | quick-add 端口选择回调类型；返回具体 port 后，优先级高于 `portGroup` |
|
|
1516
|
+
| `QuickAddInsertDirectionResolver` | quick-add 插入方向回调类型；返回具体方向后，优先级高于默认方向推导 |
|
|
1517
|
+
| `InsertDirection` | 节点插入方向类型（`'top' \| 'right' \| 'bottom' \| 'left'`） |
|
|
1518
|
+
| `InsertNodeOptions` | `insertNodeToRight` 选项（autoWireEdges / gap / source / label / direction） |
|
|
1519
|
+
| `ExportOptions` | 导出选项（backgroundColor / padding / quality / scale） |
|
|
1520
|
+
| `DeleteSelectionOptions` | `deleteSelection` 选项（selection / source / label / clearSelectionAfterApply） |
|
|
1521
|
+
| `ConnectionValidator` | 连接校验函数类型 |
|
|
1522
|
+
| `ConnectionValidateContext` | 连接校验上下文 |
|
|
1523
|
+
| `ConnectionValidateResult` | 连接校验结果 |
|
|
1524
|
+
| `NodePaletteItem` | 节点面板项（type / label / icon） |
|
|
1466
1525
|
|
|
1467
1526
|
### 默认 Schema
|
|
1468
1527
|
|
|
@@ -1494,4 +1553,5 @@ editor.history.clear();
|
|
|
1494
1553
|
| ------------------------ | -------------------- |
|
|
1495
1554
|
| `SelectionPluginOptions` | selectionPlugin 配置 |
|
|
1496
1555
|
| `SnaplinePluginOptions` | snaplinePlugin 配置 |
|
|
1556
|
+
| `SearchPluginOptions` | searchPlugin 配置 |
|
|
1497
1557
|
| `MinimapPluginOptions` | minimapPlugin 配置 |
|