@blueking/flow-canvas 0.0.1 → 0.0.2

package/README.md

@@ -81,6 +81,7 @@ npm install @antv/x6 @antv/x6-plugin-minimap @antv/x6-plugin-selection @antv/x6-
     CanvasRuntime,
     CanvasLayout,
     CanvasToolbar,
+    createBuiltinEdgeTypes,
     selectionPlugin,
     snaplinePlugin,
     connectionValidatorPlugin,
@@ -91,24 +92,19 @@ npm install @antv/x6 @antv/x6-plugin-minimap @antv/x6-plugin-selection @antv/x6-
   import '@blueking/flow-canvas/style';
   import MyTaskNode from './components/my-task-node.vue';
 
+  const builtinEdgeTypes = createBuiltinEdgeTypes();
+
   const schema: CanvasSchema = {
     nodeTypes: {
       task: {
         component: MyTaskNode,
         getSize: () => ({ width: 180, height: 60 }),
-        getPorts: () => [
-          { id: 'left', group: 'left' },
-          { id: 'right', group: 'right' },
-        ],
       },
     },
     edgeTypes: {
-      default: {
-        router: { name: 'manhattan', args: { padding: 10 } },
-        connector: 'rounded',
-      },
+      bezier: builtinEdgeTypes.bezier,
     },
-    defaultEdgeType: 'default',
+    defaultEdgeType: 'bezier',
   };
 
   const initialFlowModel: FlowModel = {
@@ -152,6 +148,8 @@ npm install @antv/x6 @antv/x6-plugin-minimap @antv/x6-plugin-selection @antv/x6-
 </script>
 ```
 
+这个示例刻意省略了 `getPorts`，因为当前版本在未提供 `getPorts` / `node.ports` 时会自动补齐默认四向端口，普通自定义节点通常只需要关注 `component` 和 `getSize`。
+
 <br>
 
 ## 核心 API
@@ -1147,18 +1145,17 @@ const customItems = [
 ### 在 Schema 中注册节点组件
 
 ```typescript
+import { createBuiltinEdgeTypes } from '@blueking/flow-canvas';
 import MyTaskNode from './components/my-task-node.vue';
 import MyGatewayNode from './components/my-gateway-node.vue';
 
+const builtinEdgeTypes = createBuiltinEdgeTypes();
+
 const schema: CanvasSchema = {
   nodeTypes: {
     task: {
       component: MyTaskNode,
       getSize: () => ({ width: 180, height: 60 }),
-      getPorts: () => [
-        { id: 'left', group: 'left' },
-        { id: 'right', group: 'right' },
-      ],
       getBehavior: (node, ctx) => ({
         deletable: true,
         copyable: true,
@@ -1181,18 +1178,14 @@ const schema: CanvasSchema = {
     },
   },
   edgeTypes: {
-    default: {
-      connector: { name: 'smooth' },
-      style: (_edge, state) => ({
-        stroke: state.hovered ? '#3a84ff' : '#abb5cc',
-        strokeWidth: 2,
-      }),
-    },
+    bezier: builtinEdgeTypes.bezier,
   },
-  defaultEdgeType: 'default',
+  defaultEdgeType: 'bezier',
 };
 ```
 
+上面这个例子里，`task` 故意不写 `getPorts`，直接复用引擎默认四向端口；`gateway` 保留 `getPorts`，用于演示“当节点需要显式控制端口拓扑时再覆盖默认行为”。
+
 <br>
 
 ## CanvasApi

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueking/flow-canvas",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "通用流程画布编辑引擎",
   "type": "module",
   "main": "./dist/index.cjs.js",