@flowgram-vue/fixed-layout-core 0.2.0

package/src/activities/block.ts

@@ -0,0 +1,192 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  DEFAULT_SPACING,
+  FlowLayoutDefault,
+  FlowNodeBaseType,
+  type FlowNodeRegistry,
+  FlowTransitionLabelEnum,
+  type FlowTransitionLine,
+  FlowTransitionLineEnum,
+  LABEL_SIDE_TYPE,
+} from '@flowgram-vue/document';
+
+/**
+ * block, block 的输入输出点由子节点决定
+ */
+export const BlockRegistry: FlowNodeRegistry = {
+  type: FlowNodeBaseType.BLOCK,
+  meta: {
+    spacing: DEFAULT_SPACING.NULL,
+    inlineSpacingAfter: DEFAULT_SPACING.INLINE_BLOCK_PADDING_BOTTOM,
+    hidden: true,
+  },
+  getLines(transition) {
+    const currentTransform = transition.transform;
+    const { isVertical } = transition.entity;
+    const lines: FlowTransitionLine[] = [
+      {
+        type: FlowTransitionLineEnum.DIVERGE_LINE,
+        from: currentTransform.parent!.inputPoint,
+        to: currentTransform.inputPoint,
+        side: LABEL_SIDE_TYPE.NORMAL_BRANCH,
+      },
+    ];
+
+    const hasBranchDraggingAdder =
+      currentTransform && currentTransform.entity.isInlineBlock && transition.renderData.draggable;
+
+    // 分支拖拽场景线条 push
+    // 当有其余分支的时候，绘制一条两个分支之间的线条
+    if (hasBranchDraggingAdder) {
+      if (isVertical) {
+        const currentOffsetRightX = currentTransform.firstChild
+          ? currentTransform.firstChild.bounds.right
+          : currentTransform.bounds.right;
+        const nextOffsetLeftX =
+          (currentTransform.next?.firstChild
+            ? currentTransform.next?.firstChild.bounds?.left
+            : currentTransform.next?.bounds?.left) || 0;
+        const currentInputPointY = currentTransform.inputPoint.y;
+        if (currentTransform?.next) {
+          lines.push({
+            type: FlowTransitionLineEnum.DRAGGING_LINE,
+            from: currentTransform.parent!.inputPoint,
+            to: {
+              x: (currentOffsetRightX + nextOffsetLeftX) / 2,
+              y: currentInputPointY,
+            },
+            side: LABEL_SIDE_TYPE.NORMAL_BRANCH,
+          });
+        }
+      } else {
+        const currentOffsetBottomX = currentTransform.firstChild
+          ? currentTransform.firstChild.bounds.bottom
+          : currentTransform.bounds.bottom;
+        const nextOffsetTopX =
+          (currentTransform.next?.firstChild
+            ? currentTransform.next?.firstChild.bounds?.top
+            : currentTransform.next?.bounds?.top) || 0;
+        const currentInputPointX = currentTransform.inputPoint.x;
+        if (currentTransform?.next) {
+          lines.push({
+            type: FlowTransitionLineEnum.DRAGGING_LINE,
+            from: currentTransform.parent!.inputPoint,
+            to: {
+              x: currentInputPointX,
+              y: (currentOffsetBottomX + nextOffsetTopX) / 2,
+            },
+            side: LABEL_SIDE_TYPE.NORMAL_BRANCH,
+          });
+        }
+      }
+    }
+
+    // 最后一个节点是 end 节点，不绘制 mergeLine
+    if (!transition.isNodeEnd) {
+      lines.push({
+        type: FlowTransitionLineEnum.MERGE_LINE,
+        from: currentTransform.outputPoint,
+        to: currentTransform.parent!.outputPoint,
+        side: LABEL_SIDE_TYPE.NORMAL_BRANCH,
+      });
+    }
+
+    return lines;
+  },
+  getInputPoint(trans) {
+    const child = trans.firstChild;
+    return child ? child.inputPoint : trans.defaultInputPoint;
+  },
+  getOutputPoint(trans, layout) {
+    const isVertical = FlowLayoutDefault.isVertical(layout);
+    const child = trans.lastChild;
+    if (isVertical) {
+      return {
+        x: child ? child.outputPoint.x : trans.bounds.bottomCenter.x,
+        y: trans.bounds.bottom,
+      };
+    }
+    return {
+      x: trans.bounds.right,
+      y: child ? child.outputPoint.y : trans.bounds.rightCenter.y,
+    };
+  },
+  getLabels(transition) {
+    const currentTransform = transition.transform;
+    const { isVertical } = transition.entity;
+
+    const draggingLabel = [];
+
+    const hasBranchDraggingAdder =
+      currentTransform && currentTransform.entity.isInlineBlock && transition.renderData.draggable;
+
+    // 获取两个分支节点中间点作为拖拽标签插入位置
+    if (hasBranchDraggingAdder) {
+      if (isVertical) {
+        const currentOffsetRightX = currentTransform.firstChild
+          ? currentTransform.firstChild.bounds.right
+          : currentTransform.bounds.right;
+        const nextOffsetLeftX =
+          (currentTransform.next?.firstChild
+            ? currentTransform.next.firstChild.bounds?.left
+            : currentTransform.next?.bounds?.left) || 0;
+        const currentInputPointY = currentTransform.inputPoint.y;
+        if (currentTransform?.next) {
+          draggingLabel.push({
+            offset: {
+              x: (currentOffsetRightX + nextOffsetLeftX) / 2,
+              y: currentInputPointY,
+            },
+            type: FlowTransitionLabelEnum.BRANCH_DRAGGING_LABEL,
+            width: nextOffsetLeftX - currentOffsetRightX,
+            props: {
+              side: LABEL_SIDE_TYPE.NORMAL_BRANCH,
+            },
+          });
+        }
+      } else {
+        const currentOffsetBottomX = currentTransform.firstChild
+          ? currentTransform.firstChild.bounds.bottom
+          : currentTransform.bounds.bottom;
+        const nextOffsetTopX =
+          (currentTransform.next?.firstChild
+            ? currentTransform.next.firstChild.bounds?.top
+            : currentTransform.next?.bounds?.top) || 0;
+        const currentInputPointX = currentTransform.inputPoint.x;
+        if (currentTransform?.next) {
+          draggingLabel.push({
+            offset: {
+              x: currentInputPointX,
+              y: (currentOffsetBottomX + nextOffsetTopX) / 2,
+            },
+            type: FlowTransitionLabelEnum.BRANCH_DRAGGING_LABEL,
+            width: nextOffsetTopX - currentOffsetBottomX,
+            props: {
+              side: LABEL_SIDE_TYPE.NORMAL_BRANCH,
+            },
+          });
+        }
+      }
+    }
+
+    return [...draggingLabel];
+  },
+
+  /**
+   * @depreacted
+   */
+  addChild(node, json, options = {}) {
+    const { index } = options;
+    const document = node.document;
+    return document.addNode({
+      ...json,
+      ...options,
+      parent: node,
+      index: typeof index === 'number' ? index + 1 : undefined,
+    });
+  },
+};

package/src/activities/break.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FlowNodeBaseType, type FlowNodeRegistry } from '@flowgram-vue/document';
+
+/**
+ * Break 节点, 用于分支断开
+ */
+export const BreakRegistry: FlowNodeRegistry = {
+  type: FlowNodeBaseType.BREAK,
+  extend: FlowNodeBaseType.END,
+};

package/src/activities/dynamic-split.ts

@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  FlowLayoutDefault,
+  type FlowNodeRegistry,
+  FlowNodeSplitType,
+  FlowTransitionLabelEnum,
+  ConstantKeys,
+  getDefaultSpacing,
+} from '@flowgram-vue/document';
+
+/**
+ * 可以动态添加分支的分支节点
+ * dynamicSplit:  (最原始的 id)
+ *  blockIcon
+ *  inlineBlocks
+ *    block1
+ *      blockOrderIcon
+ *    block2
+ *      blockOrderIcon
+ */
+export const DynamicSplitRegistry: FlowNodeRegistry = {
+  type: FlowNodeSplitType.DYNAMIC_SPLIT,
+  meta: {
+    hidden: true,
+    inlineSpacingAfter: (node) =>
+      node.collapsed && node.entity.collapsedChildren.length > 1 ? 21 : 0,
+    // 判断是否有分支节点
+    spacing: (node) => {
+      const spacing = getDefaultSpacing(node.entity, ConstantKeys.NODE_SPACING);
+      return node.children.length === 1 ? spacing : spacing / 2;
+    },
+  },
+  getLabels(transition) {
+    if (transition.isNodeEnd) {
+      return [];
+    }
+
+    return [
+      {
+        type: FlowTransitionLabelEnum.ADDER_LABEL,
+        offset: transition.transform.outputPoint,
+      },
+    ];
+  },
+  onCreate(node, json) {
+    return node.document.addInlineBlocks(node, json.blocks || []);
+  },
+  getInputPoint(transform) {
+    // block icon
+    return transform.firstChild?.inputPoint || transform.defaultInputPoint;
+  },
+  getOutputPoint(transform, layout) {
+    const isVertical = FlowLayoutDefault.isVertical(layout);
+    // 没有分支节点
+    const noInlineBlocks = transform.children.length === 1;
+    const lastChildOutput = transform.lastChild?.outputPoint;
+    const spacing = getDefaultSpacing(transform.entity, ConstantKeys.NODE_SPACING);
+
+    if (isVertical) {
+      return {
+        x: lastChildOutput ? lastChildOutput.x : transform.bounds.center.x,
+        y: transform.bounds.bottom + (noInlineBlocks ? spacing / 2 : 0),
+      };
+    }
+
+    return {
+      x: transform.bounds.right + (noInlineBlocks ? spacing / 2 : 0),
+      y: lastChildOutput ? lastChildOutput.y : transform.bounds.center.y,
+    };
+  },
+
+  /**
+   * @depreacted
+   */
+  addChild(node, json, options = {}) {
+    const { index } = options;
+    const document = node.document;
+    const parentId = `$inlineBlocks$${node.id}`;
+    let parent = document.getNode(parentId);
+    if (!parent) {
+      parent = document.addNode({
+        id: parentId,
+        type: 'inlineBlocks',
+        originParent: node,
+        parent: node,
+      });
+    }
+    return document.addBlock(node, json, undefined, undefined, index);
+  },
+};

package/src/activities/empty.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  FlowNodeBaseType,
+  type FlowNodeRegistry,
+  FlowTransitionLabelEnum,
+  ConstantKeys,
+  getDefaultSpacing,
+} from '@flowgram-vue/document';
+
+/**
+ * 占位节点，宽高为 0, 该节点下边同样有 "添加 label"
+ */
+export const EmptyRegistry: FlowNodeRegistry = {
+  type: FlowNodeBaseType.EMPTY,
+  meta: {
+    spacing: (node) => {
+      const spacing = getDefaultSpacing(node.entity, ConstantKeys.NODE_SPACING);
+      return spacing / 2;
+    },
+    size: { width: 0, height: 0 },
+    hidden: true,
+  },
+  getLabels(transition) {
+    return [
+      {
+        offset: transition.transform.bounds,
+        type: FlowTransitionLabelEnum.ADDER_LABEL,
+      },
+    ];
+  },
+};

package/src/activities/end.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FlowNodeBaseType, type FlowNodeRegistry } from '@flowgram-vue/document';
+
+/**
+ * 结束节点
+ */
+export const EndRegistry: FlowNodeRegistry = {
+  type: FlowNodeBaseType.END,
+  meta: {
+    draggable: false,
+    isNodeEnd: true,
+    selectable: false,
+    copyDisable: true,
+  },
+  // 结束节点没有出边和 label
+  getLines() {
+    return [];
+  },
+  getLabels() {
+    return [];
+  },
+};

package/src/activities/index.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './dynamic-split';
+export * from './static-split';
+export * from './block';
+export * from './inline-blocks';
+export * from './block-icon';
+export * from './block-order-icon';
+export * from './start';
+export * from './try-catch';
+export * from './loop';
+export * from './root';
+export * from './empty';
+export * from './end';
+export * from './simple-split';
+export * from './break';
+export * from './input';
+export * from './output';
+export * from './multi-outputs';
+export * from './multi-inputs';
+export * from './slot';

package/src/activities/inline-blocks.ts

@@ -0,0 +1,197 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Point } from '@flowgram-vue/utils';
+import { FlowRendererKey } from '@flowgram-vue/renderer';
+import {
+  DEFAULT_SPACING,
+  FlowNodeBaseType,
+  type FlowNodeRegistry,
+  FlowNodeRenderData,
+  FlowNodeTransformData,
+  type FlowNodeTransitionData,
+  FlowTransitionLabelEnum,
+  FlowLayoutDefault,
+  ConstantKeys,
+  getDefaultSpacing,
+} from '@flowgram-vue/document';
+
+/**
+ * 水平 Block 的偏移
+ */
+export const InlineBlocksRegistry: FlowNodeRegistry = {
+  type: FlowNodeBaseType.INLINE_BLOCKS,
+  meta: {
+    hidden: true,
+    spacing: (node) => getDefaultSpacing(node.entity, ConstantKeys.NODE_SPACING),
+    isInlineBlocks: true,
+    inlineSpacingPre: (transform) => {
+      if (transform.entity.blocks.length === 0) {
+        return 0;
+      }
+      return (
+        getDefaultSpacing(transform.entity, ConstantKeys.INLINE_BLOCKS_PADDING_TOP) ||
+        DEFAULT_SPACING.INLINE_BLOCKS_PADDING_TOP
+      );
+    },
+    inlineSpacingAfter: (transform) => {
+      if (transform.entity.blocks.length === 0) {
+        return 0;
+      }
+      return getDefaultSpacing(transform.entity, ConstantKeys.INLINE_BLOCKS_PADDING_BOTTOM);
+    },
+  },
+  /**
+   * 控制子分支的间距
+   * @param child
+   */
+  getChildDelta(child, layout) {
+    const isVertical = FlowLayoutDefault.isVertical(layout);
+    const preTransform = child.entity.pre?.getData(FlowNodeTransformData);
+    if (preTransform) {
+      const { localBounds: preBounds } = preTransform;
+      if (isVertical) {
+        const leftSpacing = preTransform.size.width + preTransform.originDeltaX;
+
+        // 如果小于最小宽度，偏移最小宽度的距离
+        const delta = Math.max(
+          child.parent!.minInlineBlockSpacing - leftSpacing,
+          getDefaultSpacing(child.entity, ConstantKeys.BRANCH_SPACING) - child.originDeltaX
+        );
+
+        return {
+          // 这里需要加上原点的偏移量，并加上水平间距
+          x: preBounds.right + delta,
+          y: 0,
+        };
+      } else {
+        const bottomSpacing = preTransform.size.height + preTransform.originDeltaY;
+
+        // 如果小于最小高度，偏移最小高度的距离
+        const delta = Math.max(
+          child.parent!.minInlineBlockSpacing - bottomSpacing,
+          getDefaultSpacing(child.entity, ConstantKeys.BRANCH_SPACING) - child.originDeltaY
+        );
+
+        return {
+          x: 0,
+          // 这里需要加上原点的偏移量，并加上垂直间距
+          y: preBounds.bottom + delta,
+        };
+      }
+    }
+    return {
+      x: 0,
+      y: 0,
+    };
+  },
+  /**
+   * 控制条件分支居中布局
+   * @param trans
+   */
+  getDelta(trans, layout) {
+    const isVertical = FlowLayoutDefault.isVertical(layout);
+    const { pre, collapsed } = trans;
+
+    if (collapsed) {
+      return { x: 0, y: 0 };
+    }
+
+    if (isVertical) {
+      const preCenter = pre!.localBounds.center.x;
+      const firstBlockX = trans.firstChild?.transform.position.x || 0;
+      const lastBlockX = trans.lastChild?.transform.position.x || 0;
+      const currentCenter = (lastBlockX - firstBlockX) / 2;
+
+      return {
+        x: preCenter - currentCenter,
+        y: 0,
+      };
+    }
+    const preCenter = pre!.localBounds.center.y;
+    const firstBlockY = trans.firstChild?.transform.position.y || 0;
+    const lastBlockY = trans.lastChild?.transform.position.y || 0;
+    const currentCenter = (lastBlockY - firstBlockY) / 2;
+
+    return {
+      x: 0,
+      y: preCenter - currentCenter,
+    };
+  },
+  getLabels(transition) {
+    return getBranchAdderLabel(transition);
+  },
+  getLines() {
+    return [];
+  },
+  // 和前序节点对齐
+  getInputPoint(transform, layout) {
+    const isVertical = FlowLayoutDefault.isVertical(layout);
+    if (isVertical) {
+      return {
+        x: transform.pre?.outputPoint.x || 0,
+        y: transform.bounds.top,
+      };
+    }
+    return {
+      x: transform.bounds.left,
+      y: transform.pre?.outputPoint.y || 0,
+    };
+  },
+  getOutputPoint(transform, layout) {
+    const isVertical = FlowLayoutDefault.isVertical(layout);
+    // 收缩时，出点为入点
+    if (transform.collapsed) {
+      return transform.inputPoint;
+    }
+
+    if (isVertical) {
+      return {
+        x: transform.pre?.outputPoint.x || 0,
+        y: transform.bounds.bottom,
+      };
+    }
+    return {
+      x: transform.bounds.right,
+      y: transform.pre?.outputPoint.y || 0,
+    };
+  },
+};
+
+/**
+ * inlineBlocks 获取 BranchAdder 和展开 label
+ */
+export function getBranchAdderLabel(transition: FlowNodeTransitionData) {
+  const { isVertical } = transition.entity;
+  const currentTransform = transition.transform;
+
+  // 收起时展示收起 label
+  if (currentTransform.collapsed) {
+    return [
+      {
+        type: FlowTransitionLabelEnum.COLLAPSE_LABEL,
+        offset: Point.move(currentTransform.inputPoint, isVertical ? { y: 10 } : { x: 10 }),
+        props: {
+          activateNode: transition.entity.pre,
+        },
+      },
+    ];
+  }
+
+  return [
+    {
+      type: FlowTransitionLabelEnum.CUSTOM_LABEL,
+      renderKey: FlowRendererKey.BRANCH_ADDER,
+      offset: Point.move(currentTransform.inputPoint, isVertical ? { y: 10 } : { x: 10 }),
+      props: {
+        // 激活状态
+        activated: transition.entity.getData(FlowNodeRenderData)!.activated,
+        transform: currentTransform,
+        // 传给外部使用的 node 信息
+        node: currentTransform.originParent?.entity,
+      },
+    },
+  ];
+}