@flowgram-vue/fixed-layout-core 0.2.0

package/src/activities/input.ts

@@ -0,0 +1,152 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  FlowNodeBaseType,
+  type FlowNodeRegistry,
+  type FlowTransitionLine,
+  FlowTransitionLineEnum,
+  LABEL_SIDE_TYPE,
+  FlowTransitionLabelEnum,
+} from '@flowgram-vue/document';
+
+/**
+ * 输入节点
+ */
+export const InputRegistry: FlowNodeRegistry = {
+  type: FlowNodeBaseType.INPUT,
+  extend: FlowNodeBaseType.BLOCK,
+  meta: {
+    hidden: false,
+  },
+  getLines(transition, layout) {
+    const currentTransform = transition.transform;
+    const { isVertical } = transition.entity;
+    const lines: FlowTransitionLine[] = [];
+
+    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.outputPoint.y;
+        if (currentTransform?.next) {
+          lines.push({
+            type: FlowTransitionLineEnum.MERGE_LINE,
+            isDraggingLine: true,
+            from: {
+              x: (currentOffsetRightX + nextOffsetLeftX) / 2,
+              y: currentInputPointY,
+            },
+            to: currentTransform.parent!.outputPoint,
+            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.outputPoint.x;
+        if (currentTransform?.next) {
+          lines.push({
+            type: FlowTransitionLineEnum.MERGE_LINE,
+            isDraggingLine: true,
+            from: {
+              x: currentInputPointX,
+              y: (currentOffsetBottomX + nextOffsetTopX) / 2,
+            },
+            to: currentTransform.parent!.outputPoint,
+            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;
+  },
+  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.outputPoint.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.outputPoint.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];
+  },
+};

package/src/activities/loop-extends/constants.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { ConstantKeys } from '@flowgram-vue/document';
+
+export enum LoopTypeEnum {
+  LOOP_LEFT_EMPTY_BLOCK = 'loopLeftEmptyBlock',
+  LOOP_RIGHT_EMPTY_BLOCK = 'loopRightEmptyBlock',
+  LOOP_EMPTY_BRANCH = 'loopEmptyBranch',
+}
+
+export const LoopSpacings = {
+  SPACING: 16, // 距离下面节点距离
+  COLLAPSE_INLINE_SPACING_BOTTOM: 60, // 距离下面节点距离
+  [ConstantKeys.INLINE_SPACING_BOTTOM]: 48, // 下边空白
+  MIN_INLINE_BLOCK_SPACING: 280, // 最小循环圈宽度
+  HORIZONTAL_MIN_INLINE_BLOCK_SPACING: 180, // 水平布局下的最小循环圈高度
+  LEFT_EMPTY_BLOCK_WIDTH: 80, // 左边空分支宽度
+  EMPTY_BRANCH_SPACING: 20, // 左边空分支宽度
+  LOOP_BLOCK_ICON_SPACING: 13, // inlineBlocks 的 inlineBottom
+  [ConstantKeys.INLINE_BLOCKS_INLINE_SPACING_BOTTOM]: 23, // inlineBlocks 的 inlineBottom
+  INLINE_BLOCKS_INLINE_SPACING_TOP: 30, // inlineBlocks 的 inlineTop
+};

package/src/activities/loop-extends/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './constants';
+export * from './loop-left-empty-block';
+export * from './loop-right-empty-block';
+export * from './loop-empty-branch';
+export * from './loop-inline-blocks';

package/src/activities/loop-extends/loop-empty-branch.ts

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type FlowNodeRegistry, FlowTransitionLabelEnum } from '@flowgram-vue/document';
+
+import { LoopSpacings, LoopTypeEnum } from './constants';
+
+export const LoopEmptyBranchRegistry: FlowNodeRegistry = {
+  type: LoopTypeEnum.LOOP_EMPTY_BRANCH,
+  meta: {
+    inlineSpacingAfter: 0,
+    spacing: LoopSpacings.EMPTY_BRANCH_SPACING,
+    size: {
+      width: 100,
+      height: 0,
+    },
+  },
+  getLabels(transition) {
+    const { isVertical } = transition.entity;
+    const currentTransform = transition.transform;
+    if (isVertical) {
+      return [
+        {
+          type: FlowTransitionLabelEnum.ADDER_LABEL,
+          offset: {
+            x: currentTransform.inputPoint.x,
+            y: currentTransform.bounds.center.y + 8, // 右边空节点
+          },
+        },
+      ];
+    }
+    return [
+      {
+        type: FlowTransitionLabelEnum.ADDER_LABEL,
+        offset: {
+          x: currentTransform.bounds.center.x + 8,
+          y: currentTransform.inputPoint.y,
+        },
+      },
+    ];
+  },
+  onAfterUpdateLocalTransform(transform): void {
+    if (transform.entity.isVertical) {
+      transform.data.size = {
+        width: 100,
+        height: 0,
+      };
+    } else {
+      transform.data.size = {
+        width: 0,
+        height: 100,
+      };
+    }
+    transform.transform.update({
+      size: transform.data.size,
+    });
+  },
+};

package/src/activities/loop-extends/loop-inline-blocks.ts

@@ -0,0 +1,140 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Point } from '@flowgram-vue/utils';
+import { FlowTextKey } from '@flowgram-vue/renderer';
+import {
+  FlowNodeBaseType,
+  type FlowNodeRegistry,
+  type FlowTransitionLabel,
+  FlowTransitionLabelEnum,
+  type FlowTransitionLine,
+  FlowTransitionLineEnum,
+  getDefaultSpacing,
+  ConstantKeys,
+} from '@flowgram-vue/document';
+
+import { LoopSpacings } from './constants';
+
+export const LoopInlineBlocksNodeRegistry: FlowNodeRegistry = {
+  type: FlowNodeBaseType.INLINE_BLOCKS,
+  meta: {
+    inlineSpacingPre: (node) => {
+      const inlineBlocksInlineSpacingTop = getDefaultSpacing(
+        node.entity,
+        ConstantKeys.INLINE_BLOCKS_INLINE_SPACING_TOP,
+        LoopSpacings.INLINE_BLOCKS_INLINE_SPACING_TOP
+      );
+      return inlineBlocksInlineSpacingTop;
+    },
+    inlineSpacingAfter: (node) => {
+      const inlineBlocksInlineSpacingBottom = getDefaultSpacing(
+        node.entity,
+        ConstantKeys.INLINE_BLOCKS_INLINE_SPACING_BOTTOM,
+        LoopSpacings.INLINE_BLOCKS_INLINE_SPACING_BOTTOM
+      );
+      return inlineBlocksInlineSpacingBottom;
+    },
+    minInlineBlockSpacing: (node) =>
+      node.entity.isVertical
+        ? LoopSpacings.MIN_INLINE_BLOCK_SPACING
+        : LoopSpacings.HORIZONTAL_MIN_INLINE_BLOCK_SPACING,
+  },
+  getLines(transition) {
+    const currentTransform = transition.transform;
+    const parentTransform = currentTransform.parent!;
+    const { isVertical } = transition.entity;
+
+    const lines: FlowTransitionLine[] = [
+      // 循环结束线
+      {
+        type: FlowTransitionLineEnum.STRAIGHT_LINE,
+        from: currentTransform.outputPoint,
+        to: parentTransform.outputPoint,
+      },
+    ];
+
+    // 收起时展示
+    if (currentTransform.collapsed) {
+      return lines;
+    }
+
+    const [leftBlockTransform] = currentTransform.children;
+
+    return [
+      ...lines,
+      // 循环回撤线 - 1 分成两段可以被 viewport 识别出矩阵区域
+      {
+        type: FlowTransitionLineEnum.ROUNDED_LINE,
+        from: currentTransform.outputPoint,
+        to: leftBlockTransform.outputPoint,
+        vertices: [
+          isVertical
+            ? { x: leftBlockTransform.inputPoint.x, y: currentTransform.bounds.bottom }
+            : { x: currentTransform.bounds.right, y: leftBlockTransform.inputPoint.y },
+        ],
+      },
+      // 循环回撤线 - 2
+      {
+        type: FlowTransitionLineEnum.ROUNDED_LINE,
+        from: leftBlockTransform.outputPoint,
+        to: Point.move(
+          currentTransform.inputPoint,
+          isVertical ? { x: -12, y: 10 } : { x: 10, y: -12 }
+        ),
+        vertices: [
+          isVertical
+            ? { x: leftBlockTransform.inputPoint.x, y: currentTransform.bounds.top + 10 }
+            : { x: currentTransform.bounds.left + 10, y: leftBlockTransform.inputPoint.y },
+        ],
+        arrow: true,
+      },
+    ];
+  },
+  getLabels(transition) {
+    const currentTransform = transition.transform;
+    const { isVertical } = transition.entity;
+
+    const labels: FlowTransitionLabel[] = [];
+
+    // 收起时展示
+    if (currentTransform.collapsed) {
+      return labels;
+    }
+
+    const leftBlockTransform = currentTransform.children[0];
+    const rightBlockTransform = currentTransform.children[1];
+
+    if (transition.entity.originParent?.id.startsWith('while_')) {
+      // 满足条件时
+      labels.push({
+        type: FlowTransitionLabelEnum.TEXT_LABEL,
+        renderKey: FlowTextKey.LOOP_WHILE_TEXT,
+        rotate: isVertical ? '' : '-90deg',
+        offset: isVertical
+          ? {
+              x: (currentTransform.inputPoint.x + rightBlockTransform.inputPoint.x) / 2,
+              y: currentTransform.inputPoint.y + 10,
+            }
+          : {
+              x: currentTransform.inputPoint.x + 10,
+              y: (currentTransform.inputPoint.y + rightBlockTransform.inputPoint.y) / 2,
+            },
+      });
+    } else {
+      // 循环遍历
+      labels.push({
+        type: FlowTransitionLabelEnum.TEXT_LABEL,
+        renderKey: FlowTextKey.LOOP_TRAVERSE_TEXT,
+        // rotate: isVertical ? '' : '-90deg',
+        offset: isVertical
+          ? { x: leftBlockTransform.inputPoint.x, y: currentTransform.bounds.center.y + 5 }
+          : { x: currentTransform.bounds.center.x + 5, y: leftBlockTransform.inputPoint.y },
+      });
+    }
+
+    return labels;
+  },
+};

package/src/activities/loop-extends/loop-left-empty-block.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type FlowNodeRegistry } from '@flowgram-vue/document';
+
+import { LoopSpacings, LoopTypeEnum } from './constants';
+
+export const LoopLeftEmptyBlockRegistry: FlowNodeRegistry = {
+  type: LoopTypeEnum.LOOP_LEFT_EMPTY_BLOCK,
+  meta: {
+    inlineSpacingAfter: 0,
+    spacing: 0,
+    size: {
+      width: LoopSpacings.LEFT_EMPTY_BLOCK_WIDTH,
+      height: 0,
+    },
+  },
+  onAfterUpdateLocalTransform(transform): void {
+    // 根据布局要置换宽高数据
+    if (transform.entity.isVertical) {
+      transform.data.size = {
+        width: LoopSpacings.LEFT_EMPTY_BLOCK_WIDTH,
+        height: 0,
+      };
+    } else {
+      transform.data.size = {
+        width: 0,
+        height: LoopSpacings.LEFT_EMPTY_BLOCK_WIDTH,
+      };
+    }
+    transform.transform.update({
+      size: transform.data.size,
+    });
+  },
+  getLines() {
+    return [];
+  },
+  getLabels() {
+    return [];
+  },
+};

package/src/activities/loop-extends/loop-right-empty-block.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type FlowNodeRegistry } from '@flowgram-vue/document';
+
+import { BlockRegistry } from '../block';
+import { LoopTypeEnum } from './constants';
+
+export const LoopRightEmptyBlockRegistry: FlowNodeRegistry = {
+  ...BlockRegistry,
+  type: LoopTypeEnum.LOOP_RIGHT_EMPTY_BLOCK,
+  meta: {
+    ...BlockRegistry.meta,
+    inlineSpacingAfter: 0,
+  },
+};

package/src/activities/loop.ts

@@ -0,0 +1,198 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Point } from '@flowgram-vue/utils';
+import { FlowTextKey } from '@flowgram-vue/renderer';
+import {
+  FlowNodeBaseType,
+  type FlowNodeEntity,
+  type FlowNodeJSON,
+  type FlowNodeRegistry,
+  FlowTransitionLabelEnum,
+  getDefaultSpacing,
+  ConstantKeys,
+} from '@flowgram-vue/document';
+
+import {
+  LoopEmptyBranchRegistry,
+  LoopInlineBlocksNodeRegistry,
+  LoopLeftEmptyBlockRegistry,
+  LoopRightEmptyBlockRegistry,
+  LoopSpacings,
+  LoopTypeEnum,
+} from './loop-extends';
+
+/**
+ * 循环节点
+ */
+export const LoopRegistry: FlowNodeRegistry = {
+  type: 'loop',
+  meta: {
+    hidden: true,
+    inlineSpacingAfter: (node) => {
+      if (node.collapsed) {
+        return LoopSpacings.COLLAPSE_INLINE_SPACING_BOTTOM;
+      }
+      const inlineSpacingBottom = getDefaultSpacing(
+        node.entity,
+        ConstantKeys.INLINE_SPACING_BOTTOM,
+        LoopSpacings.INLINE_SPACING_BOTTOM
+      );
+      return inlineSpacingBottom;
+    },
+    spacing: LoopSpacings.SPACING,
+  },
+  /**
+   * - loopNode
+   *  - loopBlockIcon
+   *  - loopInlineBlocks
+   *    - loopEmptyBlock 左侧占位区域
+   *    - loopBlock
+   *      - xxx
+   *      - xxx
+   * @param node
+   * @param json
+   */
+  onCreate(node: FlowNodeEntity, json: FlowNodeJSON) {
+    const { document } = node;
+    const loopBlocks = json.blocks || [];
+
+    const loopIconNode = document.addNode({
+      id: `$blockIcon$${node.id}`,
+      type: FlowNodeBaseType.BLOCK_ICON,
+      originParent: node,
+      parent: node,
+    });
+    const loopInlineBlocks = document.addNode({
+      id: `$inlineBlocks$${node.id}`,
+      hidden: true,
+      type: FlowNodeBaseType.INLINE_BLOCKS,
+      originParent: node,
+      parent: node,
+    });
+    const loopEmptyBlockNode = document.addNode({
+      id: `$loopLeftEmpty$${node.id}`,
+      hidden: true,
+      type: LoopTypeEnum.LOOP_LEFT_EMPTY_BLOCK,
+      originParent: node,
+      parent: loopInlineBlocks,
+    });
+
+    const loopBlockNode = document.addNode({
+      id: `$block$${node.id}`,
+      hidden: true,
+      type: FlowNodeBaseType.BLOCK, // : LoopTypeEnum.LOOP_RIGHT_EMPTY_BLOCK,
+      originParent: node,
+      parent: loopInlineBlocks,
+    });
+    const loopBranch = document.addNode({
+      id: `$loopRightEmpty$${node.id}`,
+      hidden: true,
+      type: LoopTypeEnum.LOOP_EMPTY_BRANCH,
+      originParent: node,
+      parent: loopBlockNode,
+    });
+    const otherNodes: FlowNodeEntity[] = [];
+    loopBlocks.forEach((b) =>
+      document.addNode(
+        {
+          ...b,
+          type: b.type!,
+          parent: loopBlockNode,
+        },
+        otherNodes
+      )
+    );
+
+    return [
+      loopIconNode,
+      loopEmptyBlockNode,
+      loopInlineBlocks,
+      loopBlockNode,
+      loopBranch,
+      ...otherNodes,
+    ];
+  },
+  getLabels(transition) {
+    const currentTransform = transition.transform;
+    const { isVertical } = transition.entity;
+    return [
+      // 循环结束
+      {
+        type: FlowTransitionLabelEnum.TEXT_LABEL,
+        renderKey: FlowTextKey.LOOP_END_TEXT,
+        // 循环 label 垂直样式展示，而非 rotate 旋转文案
+        props: isVertical
+          ? undefined
+          : {
+              style: {
+                maxWidth: '20px',
+                lineHeight: '12px',
+                whiteSpace: 'pre-wrap',
+              },
+            },
+        offset: Point.move(currentTransform.outputPoint, isVertical ? { y: -26 } : { x: -26 }),
+      },
+      {
+        type: FlowTransitionLabelEnum.ADDER_LABEL,
+        offset: currentTransform.outputPoint,
+      },
+    ];
+  },
+  // 和前序节点对齐
+  getInputPoint(transform) {
+    const { isVertical } = transform.entity;
+    if (isVertical) {
+      return {
+        x: transform.pre?.outputPoint.x || transform.firstChild?.outputPoint.x || 0,
+        y: transform.bounds.top,
+      };
+    }
+    return {
+      x: transform.bounds.left,
+      y: transform.pre?.outputPoint.y || transform.firstChild?.outputPoint.y || 0,
+    };
+  },
+  getOutputPoint(transform) {
+    const { isVertical } = transform.entity;
+    if (isVertical) {
+      return {
+        x: transform.pre?.outputPoint.x || transform.firstChild?.outputPoint.x || 0,
+        y: transform.bounds.bottom,
+      };
+    }
+    return {
+      x: transform.bounds.right,
+      y: transform.pre?.outputPoint.y || transform.firstChild?.outputPoint.y || 0,
+    };
+  },
+
+  extendChildRegistries: [
+    {
+      type: FlowNodeBaseType.BLOCK_ICON,
+      meta: {
+        spacing: LoopSpacings.LOOP_BLOCK_ICON_SPACING,
+      },
+    },
+    LoopLeftEmptyBlockRegistry,
+    LoopEmptyBranchRegistry,
+    LoopRightEmptyBlockRegistry,
+    LoopInlineBlocksNodeRegistry,
+  ],
+
+  /**
+   * @depreacted
+   */
+  addChild(node, json, options = {}) {
+    const { index } = options;
+    const document = node.document;
+    return document.addNode({
+      ...json,
+      ...options,
+      parent: document.getNode(`$block$${node.id}`),
+      index: typeof index === 'number' ? index + 1 : undefined,
+    });
+  },
+};