feat(fixed-layout): add simple-split node (bytedance#224)

* feat(fixed-layout): add simple-split node

* fix(fixed-layout): svg overflow visible

Author: xiamidaxia

packages/canvas-engine/document/src/typings/flow.ts

@@ -34,6 +34,7 @@ export enum FlowNodeBaseType {
 }
 
 export enum FlowNodeSplitType {
+  SIMPLE_SPLIT = 'simpleSplit', // 无 BlockOrderIcon
   DYNAMIC_SPLIT = 'dynamicSplit', // 动态分支
   STATIC_SPLIT = 'staticSplit', // 静态分支
 }

packages/canvas-engine/fixed-layout-core/src/activities/index.ts

@@ -10,3 +10,4 @@ export * from './loop';
 export * from './root';
 export * from './empty';
 export * from './end';
+export * from './simple-split';

packages/canvas-engine/fixed-layout-core/src/activities/simple-split.ts

@@ -0,0 +1,50 @@
+import {
+  type FlowNodeRegistry,
+  FlowNodeSplitType,
+  FlowNodeBaseType,
+  FlowNodeJSON,
+  FlowNodeEntity,
+} from '@flowgram.ai/document';
+
+/**
+ * 可以动态添加分支的分支节点, 无 BlockOrderIcon 节点
+ * simpleSplit:  (最原始的 id)
+ *  blockIcon
+ *  inlineBlocks
+ *    block1
+ *    block2
+ */
+export const SimpleSplitRegistry: FlowNodeRegistry = {
+  type: FlowNodeSplitType.SIMPLE_SPLIT,
+  extend: FlowNodeSplitType.DYNAMIC_SPLIT,
+  onBlockChildCreate(
+    originParent: FlowNodeEntity,
+    blockData: FlowNodeJSON,
+    addedNodes: FlowNodeEntity[] = [] // 新创建的节点都要存在这里
+  ) {
+    const { document } = originParent;
+    const parent = document.getNode(`$inlineBlocks$${originParent.id}`);
+    // 块节点会生成一个空的 Block 节点用来切割 Block
+    const proxyBlock = document.addNode({
+      id: `$block$${blockData.id}`,
+      type: FlowNodeBaseType.BLOCK,
+      originParent,
+      parent,
+    });
+    const realBlock = document.addNode(
+      {
+        ...blockData,
+        type: blockData.type || FlowNodeBaseType.BLOCK,
+        parent: proxyBlock,
+      },
+      addedNodes
+    );
+    addedNodes.push(proxyBlock, realBlock);
+    return proxyBlock;
+  },
+  // addChild(node, json, options = {}) {
+  //   const { index } = options;
+  //   const document = node.document;
+  //   return document.addBlock(node, json, undefined, undefined, index);
+  // }
+};

packages/canvas-engine/fixed-layout-core/src/flow-registers.ts

@@ -31,6 +31,7 @@ import {
   StartRegistry,
   StaticSplitRegistry,
   TryCatchRegistry,
+  SimpleSplitRegistry,
 } from './activities';
 
 @injectable()
@@ -50,6 +51,7 @@ export class FlowRegisters
       StartRegistry, // 开始节点
       DynamicSplitRegistry, // 动态分支（并行、排他）
       StaticSplitRegistry, // 静态分支（审批）
+      SimpleSplitRegistry, // 简单分支 （不带 orderIcon 节点）
       BlockRegistry, // 单条 block 注册
       InlineBlocksRegistry, // 多个 block 组成的 block 列表
       BlockIconRegistry, // icon 节点，如条件分支的菱形图标

packages/client/fixed-layout-editor/index.css

@@ -25,6 +25,10 @@
   background-color: var(--g-editor-background);
 }
 
+.gedit-playground .flow-lines-container {
+  overflow: visible;
+}
+
 .gedit-transition-ease {
   transition: left, top 0.3s ease;
 }