@blueking/bkflow-canvas-editor 0.1.0-beta.5 → 1.0.0-beta.2
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 -20
- package/dist/advanced.cjs.js +1 -0
- package/dist/advanced.d.ts +660 -0
- package/dist/advanced.esm.js +5 -0
- package/dist/composable-C_Hcopou.cjs +1 -0
- package/dist/composable-Ces27z5E.js +352 -0
- package/dist/index.cjs.js +33 -55
- package/dist/index.d.ts +263 -91
- package/dist/index.esm.js +16571 -17352
- package/dist/style.css +1 -1
- package/package.json +11 -3
package/README.md
CHANGED
|
@@ -64,20 +64,20 @@ npm install @blueking/bkflow-canvas-editor
|
|
|
64
64
|
|
|
65
65
|
#### Props
|
|
66
66
|
|
|
67
|
-
| 参数 | 类型 | 默认值
|
|
68
|
-
| ------------------- | ---------------------------------------------- |
|
|
69
|
-
| `flowId` | `string` | -
|
|
70
|
-
| `apiConfig` | `FlowApiConfig` | -
|
|
71
|
-
| `permissions` | `{ canEdit?: boolean }` | `{ canEdit: true }` | 权限配置对象，`canEdit` 控制头部编辑按钮是否使用禁用样式
|
|
72
|
-
| `thumbnail` | `boolean` | `false`
|
|
73
|
-
| `enableVersion` | `boolean` | `false`
|
|
74
|
-
| `flowVersion` | `string` | -
|
|
75
|
-
| `showHeaderActions` | `boolean` | `true`
|
|
76
|
-
| `defaultZoom` | `number` | `1`
|
|
77
|
-
| `bkflowSaasUrl` | `string` | -
|
|
78
|
-
| `onEdit` | `() => void` | -
|
|
79
|
-
| `onBack` | `() => void` | -
|
|
80
|
-
| `onExecuteSuccess` | `(taskId: number, templateId: number) => void` | -
|
|
67
|
+
| 参数 | 类型 | 默认值 | 说明 |
|
|
68
|
+
| ------------------- | ---------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------- |
|
|
69
|
+
| `flowId` | `string` | - | **必需**，流程 ID |
|
|
70
|
+
| `apiConfig` | `FlowApiConfig` | - | **必需**，API 配置对象，详见 [API 配置](#api-配置) |
|
|
71
|
+
| `permissions` | `{ canEdit?: boolean }` | `{ canEdit: true }` | 权限配置对象，`canEdit` 控制头部编辑按钮是否使用禁用样式 |
|
|
72
|
+
| `thumbnail` | `boolean` | `false` | 缩略图模式，启用后只显示画布内容，不显示顶部 header 和操作按钮，禁用节点点击事件 |
|
|
73
|
+
| `enableVersion` | `boolean` | `false` | 是否开启流程版本功能，开启后会根据 `flowVersion` 的值获取对应版本的流程数据 |
|
|
74
|
+
| `flowVersion` | `string` | - | 流程版本号，仅在 `enableVersion` 为 `true` 时生效。为空时表示草稿版本，不为空时表示指定版本 |
|
|
75
|
+
| `showHeaderActions` | `boolean` | `true` | 是否显示头部操作按钮（编辑、执行流程、调试），仅在非缩略图模式下生效 |
|
|
76
|
+
| `defaultZoom` | `number` | `1` | x6 画布的默认缩放比例，用于控制画布的初始显示效果。取值范围建议在 0.25 到 1.5 之间 |
|
|
77
|
+
| `bkflowSaasUrl` | `string` | - | bkflow-saas-url，用于设置 `$.context.site_url` 的值，供插件内部使用 |
|
|
78
|
+
| `onEdit` | `() => void` | - | 编辑按钮点击回调（可选，也可以通过 `@edit` 事件监听） |
|
|
79
|
+
| `onBack` | `() => void` | - | 返回按钮点击回调（可选，也可以通过 `@back` 事件监听） |
|
|
80
|
+
| `onExecuteSuccess` | `(taskId: number, templateId: number) => void` | - | 执行成功回调（可选） |
|
|
81
81
|
|
|
82
82
|
#### Slots
|
|
83
83
|
|
|
@@ -130,6 +130,7 @@ npm install @blueking/bkflow-canvas-editor
|
|
|
130
130
|
| `defaultZoom` | `number` | `1` | x6 画布的默认缩放比例，用于控制画布的初始显示效果。取值范围建议在 0.25 到 1.5 之间 |
|
|
131
131
|
| `bkflowSaasUrl` | `string` | - | bkflow-saas-url，用于设置 `$.context.site_url` 的值，供插件内部使用 |
|
|
132
132
|
| `enableThirdPlugin` | `boolean` | `true` | 是否启用第三方插件。设置为 `false` 时，将不加载第三方插件列表和详情，只显示内置插件 |
|
|
133
|
+
| `quickAdd` | `QuickAddConfig` | - | 透传给底层画布的 quick-add 配置；默认启用，可自定义绑定端口、插入方向或显式关闭 |
|
|
133
134
|
|
|
134
135
|
#### Slots
|
|
135
136
|
|
|
@@ -160,12 +161,12 @@ npm install @blueking/bkflow-canvas-editor
|
|
|
160
161
|
|
|
161
162
|
#### Events
|
|
162
163
|
|
|
163
|
-
| 事件名 | 参数 | 说明
|
|
164
|
-
| ------------------ | ------------------------ |
|
|
165
|
-
| `save` | `flowData: FlowTemplate` | 保存时触发，参数为流程数据
|
|
166
|
-
| `saveSuccess` | - | 保存成功时触发
|
|
167
|
-
| `back` | - | 点击返回按钮时触发
|
|
168
|
-
| `debugBeforeClose` | - | 调试面板关闭前触发，用于清理数据
|
|
164
|
+
| 事件名 | 参数 | 说明 |
|
|
165
|
+
| ------------------ | ------------------------ | -------------------------------- |
|
|
166
|
+
| `save` | `flowData: FlowTemplate` | 保存时触发，参数为流程数据 |
|
|
167
|
+
| `saveSuccess` | - | 保存成功时触发 |
|
|
168
|
+
| `back` | - | 点击返回按钮时触发 |
|
|
169
|
+
| `debugBeforeClose` | - | 调试面板关闭前触发，用于清理数据 |
|
|
169
170
|
|
|
170
171
|
#### 暴露的方法
|
|
171
172
|
|
|
@@ -570,6 +571,35 @@ interface SelectPanelConfig {
|
|
|
570
571
|
|
|
571
572
|
> **注意**：`defaultZoom` 的取值范围建议在 0.25 到 1.5 之间，这是 x6 画布配置的最小和最大缩放比例限制。
|
|
572
573
|
|
|
574
|
+
### 配置 quick-add 端口与插入方向
|
|
575
|
+
|
|
576
|
+
`FlowEdit` 支持透传 `quickAdd` 配置，能力与 `@blueking/flow-canvas` 的 `QuickAddConfig` 保持一致，可用于修改 quick-add 绑定的端口、点击插入方向，或直接关闭该交互。
|
|
577
|
+
|
|
578
|
+
```vue
|
|
579
|
+
<template>
|
|
580
|
+
<FlowEdit
|
|
581
|
+
:flow-id="flowId"
|
|
582
|
+
:api-config="apiConfig"
|
|
583
|
+
:quick-add="{
|
|
584
|
+
portGroup: 'bottom',
|
|
585
|
+
insertDirection: 'bottom',
|
|
586
|
+
}" />
|
|
587
|
+
</template>
|
|
588
|
+
```
|
|
589
|
+
|
|
590
|
+
> **说明**：`FlowEdit` 只会在编辑态启用 quick-add；如果需要更底层的控制，也可以直接使用 `BkFlowCanvas` 并传入同名 `quickAdd` prop。
|
|
591
|
+
|
|
592
|
+
### 编辑态框选与批量删除
|
|
593
|
+
|
|
594
|
+
`FlowEdit` 在编辑态默认包含画布工具栏的框选能力。切换到框选模式后，鼠标在画布内拖拽会生成选区；当存在当前选区时，选区右下角会显示批量操作栏，当前内置操作为删除选中节点/边。
|
|
595
|
+
|
|
596
|
+
批量删除与键盘 `Delete` / `Backspace` 复用同一条底层删除链路，因此会保持一致的过滤和清理行为：
|
|
597
|
+
|
|
598
|
+
- 不可删除节点会按照节点行为配置统一过滤
|
|
599
|
+
- 网关 `conditions` / `defaultCondition` 会在删除时同步清理
|
|
600
|
+
- placeholder 相关级联删除会一并处理
|
|
601
|
+
- 删除成功后会自动清空当前选区并关闭批量操作栏
|
|
602
|
+
|
|
573
603
|
### 设置 bkflow-saas-url
|
|
574
604
|
|
|
575
605
|
可以通过 `bkflowSaasUrl` props 设置 `$.context.site_url` 的值，供插件内部使用：
|
|
@@ -1000,6 +1030,8 @@ import type {
|
|
|
1000
1030
|
UniformApiPluginInputsItem,
|
|
1001
1031
|
PluginDetailCommon,
|
|
1002
1032
|
SelectPanelConfig,
|
|
1033
|
+
QuickAddConfig,
|
|
1034
|
+
InsertDirection,
|
|
1003
1035
|
// ... 更多类型
|
|
1004
1036
|
} from 'bkflow-canvas-editor';
|
|
1005
1037
|
```
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./composable-C_Hcopou.cjs");exports.PLUGIN_GROUP_ICON_MAP=e.PLUGIN_GROUP_ICON_MAP;exports.useFlowApi=e.useFlowApi;
|