@blueking/flow-canvas 0.0.13 → 0.0.14
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 +52 -26
- package/dist/index.cjs.js +1 -1
- package/dist/index.d.ts +41 -2
- package/dist/index.esm.js +1681 -1638
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -414,7 +414,7 @@ const schema: CanvasSchema = {
|
|
|
414
414
|
bezier: {
|
|
415
415
|
connector: { name: 'smooth' },
|
|
416
416
|
style: (_edge, state) => ({
|
|
417
|
-
stroke: state.hovered ? '#3a84ff' : '#abb5cc',
|
|
417
|
+
stroke: state.hovered || state.highlighted ? '#3a84ff' : '#abb5cc',
|
|
418
418
|
strokeWidth: 2,
|
|
419
419
|
}),
|
|
420
420
|
x6EdgeConfig: {
|
|
@@ -431,7 +431,7 @@ const schema: CanvasSchema = {
|
|
|
431
431
|
router: { name: 'manhattan', args: { padding: 10, maxDirectionChange: 90 } },
|
|
432
432
|
connector: { name: 'rounded', args: { radius: 8 } },
|
|
433
433
|
style: (_edge, state) => ({
|
|
434
|
-
stroke: state.hovered ? '#3a84ff' : '#abb5cc',
|
|
434
|
+
stroke: state.hovered || state.highlighted ? '#3a84ff' : '#abb5cc',
|
|
435
435
|
strokeWidth: 2,
|
|
436
436
|
}),
|
|
437
437
|
},
|
|
@@ -443,7 +443,7 @@ const schema: CanvasSchema = {
|
|
|
443
443
|
### 默认连线与端口样式
|
|
444
444
|
|
|
445
445
|
- **端口**：半径 6px，背景 `#3a84ff`，1px 白色描边。默认隐藏（`visibility: hidden`），hover 节点时显示；拖拽连线时自动显示所有节点端口。
|
|
446
|
-
- **连线**：宽度 2px，颜色 `#abb5cc`，hover
|
|
446
|
+
- **连线**：宽度 2px，颜色 `#abb5cc`，hover 或 API 高亮时变 `#3a84ff`，平角箭头（`block` marker）。`zIndex: -1` 确保在节点下方，不阻挡端口交互。
|
|
447
447
|
- **连接点**：`connectionPoint: 'anchor'` + `anchor: 'center'`，连线直达端口中心，紧贴节点。
|
|
448
448
|
|
|
449
449
|
<br>
|
|
@@ -1024,11 +1024,18 @@ interface NodePaletteItem {
|
|
|
1024
1024
|
|
|
1025
1025
|
可选的工具栏组件。默认浮动在画布左上角，内置下载、缩放、重置等核心操作；`search` / `minimap` 由对应插件注入后显示。
|
|
1026
1026
|
|
|
1027
|
-
| Prop | 类型 | 默认 | 说明
|
|
1028
|
-
| ------- | ---------------------- | ---------- |
|
|
1029
|
-
| editor | `CanvasEditorContext` | - | 编辑器实例（必填）
|
|
1030
|
-
| items | `CanvasToolbarItem[]` | 内置默认项 | 工具栏项列表，传入后完全替换默认项
|
|
1031
|
-
|
|
|
1027
|
+
| Prop | 类型 | 默认 | 说明 |
|
|
1028
|
+
| ------- | ---------------------- | ---------- | ------------------------------------------------ |
|
|
1029
|
+
| editor | `CanvasEditorContext` | - | 编辑器实例（必填） |
|
|
1030
|
+
| items | `CanvasToolbarItem[]` | 内置默认项 | 工具栏项列表，传入后完全替换默认项 |
|
|
1031
|
+
| include | `BuiltinToolbarType[]` | - | 恢复默认隐藏的工具项（`undo` / `redo` 默认隐藏） |
|
|
1032
|
+
| exclude | `BuiltinToolbarType[]` | - | 隐藏指定内置工具项（仅在未传 items 时生效） |
|
|
1033
|
+
|
|
1034
|
+
`exclude` 可隐藏任意内置工具项，例如隐藏下载按钮：
|
|
1035
|
+
|
|
1036
|
+
```vue
|
|
1037
|
+
<CanvasToolbar :editor="editor" :exclude="['export']" />
|
|
1038
|
+
```
|
|
1032
1039
|
|
|
1033
1040
|
#### createDefaultToolbarItems(options?)
|
|
1034
1041
|
|
|
@@ -1216,7 +1223,8 @@ const schema: CanvasSchema = {
|
|
|
1216
1223
|
| zoomToFit() | 自适应画布 |
|
|
1217
1224
|
| getZoom() | 获取当前缩放比例 |
|
|
1218
1225
|
| centerContent() | 居中画布内容 |
|
|
1219
|
-
| scrollToNode(nodeId)
|
|
1226
|
+
| scrollToNode(nodeId, options?) | 滚动到指定节点；可通过 `options.offset` 指定居中后的视口偏移量（屏幕像素） |
|
|
1227
|
+
| focusNode(nodeId, options?) | 将指定节点置于画布中心并高亮；节点不存在返回 `false`，成功定位返回 `true` |
|
|
1220
1228
|
| getSelection() | 获取当前选区 `{ nodeIds, edgeIds }` |
|
|
1221
1229
|
| getSelectionBounds(selection?) | 获取当前选区或指定选区的整体包围盒，用于挂载选区工具条等 overlay |
|
|
1222
1230
|
| selectNodes(ids) | 选中指定节点 |
|
|
@@ -1234,6 +1242,18 @@ const schema: CanvasSchema = {
|
|
|
1234
1242
|
| onGraphEvent(event, handler) | 监听 X6 底层事件，返回取消函数 |
|
|
1235
1243
|
| unsafeGetGraph() | 获取 X6 Graph 实例（谨慎使用） |
|
|
1236
1244
|
|
|
1245
|
+
`focusNode` 是 `scrollToNode`、`highlightNodes`、`highlightEdges`、`clearHighlight` 的组合封装，适合外部按节点 ID 定位并闪烁提示：
|
|
1246
|
+
|
|
1247
|
+
```typescript
|
|
1248
|
+
editor.api.value?.focusNode('node_a', {
|
|
1249
|
+
offset: { y: -120 },
|
|
1250
|
+
edgeIds: ['edge_a'],
|
|
1251
|
+
autoClearMs: 1500,
|
|
1252
|
+
});
|
|
1253
|
+
```
|
|
1254
|
+
|
|
1255
|
+
传入 `highlight: false` 时只定位节点，并清理上一轮 focus 遗留的高亮。
|
|
1256
|
+
|
|
1237
1257
|
<br>
|
|
1238
1258
|
|
|
1239
1259
|
## 内置插件
|
|
@@ -1303,6 +1323,7 @@ connectionValidatorPlugin((ctx) => {
|
|
|
1303
1323
|
```typescript
|
|
1304
1324
|
searchPlugin({
|
|
1305
1325
|
placeholder: '搜索节点名称',
|
|
1326
|
+
keywordPaths: [['payload', 'stageName']],
|
|
1306
1327
|
getNodeMeta(node) {
|
|
1307
1328
|
const stageName = typeof node.payload?.stageName === 'string' ? node.payload.stageName : '';
|
|
1308
1329
|
return {
|
|
@@ -1314,6 +1335,8 @@ searchPlugin({
|
|
|
1314
1335
|
});
|
|
1315
1336
|
```
|
|
1316
1337
|
|
|
1338
|
+
`keywordPaths` 从 `FlowNodeModel` 根部按路径取值，支持 string / number / boolean 或 string 数组；复杂对象会被忽略。若同时传入 `getNodeMeta().keywords`，`keywordPaths` 会作为额外关键词追加，不改变既有自定义 keywords 语义。
|
|
1339
|
+
|
|
1317
1340
|
### minimapPlugin(options?)
|
|
1318
1341
|
|
|
1319
1342
|
小地图。传入 `container` 后启用。
|
|
@@ -1507,23 +1530,26 @@ editor.history.clear();
|
|
|
1507
1530
|
|
|
1508
1531
|
### API 与工具栏
|
|
1509
1532
|
|
|
1510
|
-
| 类型 | 说明
|
|
1511
|
-
| --------------------------------- |
|
|
1512
|
-
| `CanvasApi` | 画布公共 API 接口（含 `insertNodeToRight`）
|
|
1513
|
-
| `CanvasToolbarItem` | 工具栏项配置
|
|
1514
|
-
| `BuiltinToolbarType` | 内置工具类型（`'undo'` / `'redo'` / `'select'` / `'auto-layout'` / `'search'` / `'minimap'` / `'export'` / `'zoom-in'` / `'zoom-out'` / `'
|
|
1515
|
-
| `
|
|
1516
|
-
| `
|
|
1517
|
-
| `
|
|
1518
|
-
| `
|
|
1519
|
-
| `
|
|
1520
|
-
| `
|
|
1521
|
-
| `
|
|
1522
|
-
| `
|
|
1523
|
-
| `
|
|
1524
|
-
| `
|
|
1525
|
-
| `
|
|
1526
|
-
| `
|
|
1533
|
+
| 类型 | 说明 |
|
|
1534
|
+
| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1535
|
+
| `CanvasApi` | 画布公共 API 接口（含 `insertNodeToRight` / `focusNode`） |
|
|
1536
|
+
| `CanvasToolbarItem` | 工具栏项配置 |
|
|
1537
|
+
| `BuiltinToolbarType` | 内置工具类型（`'undo'` / `'redo'` / `'select'` / `'auto-layout'` / `'search'` / `'minimap'` / `'export'` / `'zoom-in'` / `'zoom-out'` / `'zoom-display'` / `'fit'` / `'reset'`） |
|
|
1538
|
+
| `ScrollToNodeOptions` | 节点定位选项（offset） |
|
|
1539
|
+
| `FocusNodeOptions` | `focusNode` 选项（offset / highlight / edgeIds / autoClearMs / select） |
|
|
1540
|
+
| `NodeActionsConfig` | 节点快捷操作工具栏全局配置（showDebug / showDelete / showCopy / showCopyInsert / showDisconnect / insertGap） |
|
|
1541
|
+
| `QuickAddConfig` | 快捷添加按钮全局配置（enabled / portGroup / getPort / insertDirection） |
|
|
1542
|
+
| `QuickAddPortResolver` | quick-add 端口选择回调类型；返回具体 port 后，优先级高于 `portGroup` |
|
|
1543
|
+
| `QuickAddInsertDirectionResolver` | quick-add 插入方向回调类型；返回具体方向后，优先级高于默认方向推导 |
|
|
1544
|
+
| `InsertDirection` | 节点插入方向类型（`'top' \| 'right' \| 'bottom' \| 'left'`） |
|
|
1545
|
+
| `InsertNodeOptions` | `insertNodeToRight` 选项（autoWireEdges / gap / source / label / direction） |
|
|
1546
|
+
| `ExportOptions` | 导出选项（backgroundColor / padding / quality / scale） |
|
|
1547
|
+
| `DeleteSelectionOptions` | `deleteSelection` 选项（selection / source / label / clearSelectionAfterApply） |
|
|
1548
|
+
| `SearchKeywordPath` | `searchPlugin.keywordPaths` 的字段路径类型 |
|
|
1549
|
+
| `ConnectionValidator` | 连接校验函数类型 |
|
|
1550
|
+
| `ConnectionValidateContext` | 连接校验上下文 |
|
|
1551
|
+
| `ConnectionValidateResult` | 连接校验结果 |
|
|
1552
|
+
| `NodePaletteItem` | 节点面板项（type / label / icon） |
|
|
1527
1553
|
|
|
1528
1554
|
### 默认 Schema
|
|
1529
1555
|
|