@flowgram-vue/fixed-layout-core 0.2.0

package/src/activities/multi-inputs.ts

@@ -0,0 +1,98 @@
+/**
+ * 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 {
+  FlowNodeBaseType,
+  type FlowNodeRegistry,
+  FlowNodeRenderData,
+  FlowTransitionLabelEnum,
+  FlowNodeSplitType,
+  getDefaultSpacing,
+  ConstantKeys,
+} from '@flowgram-vue/document';
+
+/**
+ * 多输入节点, 只能作为 开始节点
+ * - multiInputs:
+ *   - inlineBlocks
+ *     - input
+ *     - input
+ */
+export const MultiInputsRegistry: FlowNodeRegistry = {
+  type: FlowNodeBaseType.MULTI_INPUTS,
+  extend: FlowNodeSplitType.SIMPLE_SPLIT,
+  extendChildRegistries: [
+    {
+      type: FlowNodeBaseType.BLOCK_ICON,
+      meta: {
+        hidden: true,
+        spacing: 0,
+      },
+      getLines() {
+        return [];
+      },
+      getLabels() {
+        return [];
+      },
+    },
+    {
+      type: FlowNodeBaseType.INLINE_BLOCKS,
+      meta: {
+        inlineSpacingPre: 0,
+      },
+      getLabels(transition) {
+        const isVertical = transition.entity.isVertical;
+        const currentTransform = transition.transform;
+        const spacing = getDefaultSpacing(
+          transition.entity,
+          ConstantKeys.INLINE_BLOCKS_PADDING_BOTTOM
+        );
+
+        if (currentTransform.collapsed || transition.entity.childrenLength === 0) {
+          return [
+            {
+              type: FlowTransitionLabelEnum.CUSTOM_LABEL,
+              renderKey: FlowRendererKey.BRANCH_ADDER,
+              offset: Point.move(
+                currentTransform.outputPoint,
+                isVertical ? { y: spacing } : { x: spacing }
+              ),
+              props: {
+                // 激活状态
+                activated: transition.entity.getData(FlowNodeRenderData)!.activated,
+                transform: currentTransform,
+                // 传给外部使用的 node 信息
+                node: currentTransform.originParent?.entity,
+              },
+            },
+          ];
+        }
+
+        return [
+          {
+            type: FlowTransitionLabelEnum.CUSTOM_LABEL,
+            renderKey: FlowRendererKey.BRANCH_ADDER,
+            offset: Point.move(
+              currentTransform.outputPoint,
+              isVertical ? { y: -spacing / 2 } : { x: -spacing / 2 }
+            ),
+            props: {
+              // 激活状态
+              activated: transition.entity.getData(FlowNodeRenderData)!.activated,
+              transform: currentTransform,
+              // 传给外部使用的 node 信息
+              node: currentTransform.originParent?.entity,
+            },
+          },
+        ];
+      },
+    },
+  ],
+  getLabels() {
+    return [];
+  },
+};

package/src/activities/multi-outputs.ts

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  FlowLayoutDefault,
+  type FlowNodeRegistry,
+  FlowNodeSplitType,
+  FlowNodeBaseType,
+} from '@flowgram-vue/document';
+
+import { DynamicSplitRegistry } from './dynamic-split';
+import { BlockRegistry } from './block';
+
+/**
+ * 多输出节点
+ * - multiOutputs:
+ *  - blockIcon
+ *  - inlineBlocks
+ *    - output or multiOutputs
+ *    - output or multiOutputs
+ */
+export const MultiOuputsRegistry: FlowNodeRegistry = {
+  type: FlowNodeBaseType.MULTI_OUTPUTS,
+  extend: FlowNodeSplitType.SIMPLE_SPLIT,
+  meta: {
+    isNodeEnd: true,
+  },
+  getLines: (transition, layout) => {
+    // 嵌套在 mutliOutputs 下边
+    if (transition.entity.parent?.flowNodeType === FlowNodeBaseType.INLINE_BLOCKS) {
+      return BlockRegistry.getLines!(transition, layout);
+    }
+    return [];
+  },
+  getLabels: (transition, layout) => [
+    ...DynamicSplitRegistry.getLabels!(transition, layout),
+    ...BlockRegistry.getLabels!(transition, layout),
+  ],
+  getOutputPoint(transform, layout) {
+    const isVertical = FlowLayoutDefault.isVertical(layout);
+    const lastChildOutput = transform.lastChild?.outputPoint;
+
+    if (isVertical) {
+      return {
+        x: lastChildOutput ? lastChildOutput.x : transform.bounds.center.x,
+        y: transform.bounds.bottom,
+      };
+    }
+
+    return {
+      x: transform.bounds.right,
+      y: lastChildOutput ? lastChildOutput.y : transform.bounds.center.y,
+    };
+  },
+  extendChildRegistries: [
+    {
+      type: FlowNodeBaseType.BLOCK_ICON,
+      meta: {
+        // isNodeEnd: true
+      },
+    },
+  ],
+};

package/src/activities/output.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FlowNodeBaseType, type FlowNodeRegistry } from '@flowgram-vue/document';
+
+/**
+ * 输出节点, 一般作为 end 节点
+ */
+export const OuputRegistry: FlowNodeRegistry = {
+  type: FlowNodeBaseType.OUTPUT,
+  extend: FlowNodeBaseType.BLOCK,
+  meta: {
+    hidden: false,
+    isNodeEnd: true,
+  },
+};

package/src/activities/root.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { DEFAULT_SPACING, FlowNodeBaseType, type FlowNodeRegistry } from '@flowgram-vue/document';
+
+/**
+ * 根节点
+ */
+export const RootRegistry: FlowNodeRegistry = {
+  type: FlowNodeBaseType.ROOT,
+  meta: {
+    spacing: DEFAULT_SPACING.NULL,
+    hidden: true,
+  },
+  getInputPoint(transform) {
+    return transform.firstChild?.inputPoint || transform.bounds.topCenter;
+  },
+  getOutputPoint(transform) {
+    return transform.lastChild?.outputPoint || transform.bounds.bottomCenter;
+  },
+};

package/src/activities/simple-split.ts

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  type FlowNodeRegistry,
+  FlowNodeSplitType,
+  FlowNodeBaseType,
+  FlowNodeJSON,
+  FlowNodeEntity,
+} from '@flowgram-vue/document';
+
+/**
+ * - simpleSplit:  (最原始的 id)
+ *  blockIcon
+ *  inlineBlocks
+ *    node1
+ *    node2
+ */
+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}`);
+    const realBlock = document.addNode(
+      {
+        ...blockData,
+        type: blockData.type || FlowNodeBaseType.BLOCK,
+        parent,
+      },
+      addedNodes
+    );
+    addedNodes.push(realBlock);
+    return realBlock;
+  },
+  // addChild(node, json, options = {}) {
+  //   const { index } = options;
+  //   const document = node.document;
+  //   return document.addBlock(node, json, undefined, undefined, index);
+  // }
+};

package/src/activities/slot/constants.ts

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FlowRendererKey } from '@flowgram-vue/renderer';
+
+export const RENDER_SLOT_ADDER_KEY: string = FlowRendererKey.SLOT_ADDER;
+export const RENDER_SLOT_LABEL_KEY: string = FlowRendererKey.SLOT_LABEL;
+export const RENDER_SLOT_COLLAPSE_KEY: string = FlowRendererKey.SLOT_COLLAPSE;
+
+export const SlotSpacingKey = {
+  /**
+   * = Next Node - Slot END
+   */
+  SLOT_SPACING: 'SLOT_SPACING',
+
+  /**
+   * = Slot Start Line - Slot Icon Right
+   */
+  SLOT_START_DISTANCE: 'SLOT_START_DISTANCE',
+
+  /**
+   * = Slot Radius
+   */
+  SLOT_RADIUS: 'SLOT_RADIUS',
+
+  /**
+   * = Slot Port - Slot Start
+   */
+  SLOT_PORT_DISTANCE: 'SLOT_PORT_DISTANCE',
+
+  /**
+   * = Slot Label - Slot Start
+   */
+  SLOT_LABEL_DISTANCE: 'SLOT_LABEL_DISTANCE',
+
+  /**
+   * = Slot Block - Slot Port
+   */
+  SLOT_BLOCK_PORT_DISTANCE: 'SLOT_BLOCK_PORT_DISTANCE',
+
+  /**
+   * Vertical Layout: Slot Block - Slot Block
+   */
+  SLOT_BLOCK_VERTICAL_SPACING: 'SLOT_BLOCK_VERTICAL_SPACING',
+};
+
+export const SLOT_START_DISTANCE = 16;
+export const SLOT_PORT_DISTANCE = 100;
+export const SLOT_LABEL_DISTANCE = 32;
+export const SLOT_BLOCK_PORT_DISTANCE = 32.5;
+export const SLOT_RADIUS = 16;
+export const SLOT_SPACING = 32;
+export const SLOT_BLOCK_VERTICAL_SPACING = 32.5;
+export const SLOT_NODE_LAST_SPACING = 10;

package/src/activities/slot/extends/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { SlotIconRegistry } from './slot-icon';
+export { SlotInlineBlocksRegistry } from './slot-inline-blocks';
+export { SlotBlockRegistry } from './slot-block';

package/src/activities/slot/extends/slot-block.ts

@@ -0,0 +1,229 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { mean } from 'lodash-es';
+import {
+  FlowNodeRegistry,
+  FlowNodeBaseType,
+  FlowTransitionLabelEnum,
+  FlowTransitionLineEnum,
+  getDefaultSpacing,
+  Vertex,
+} from '@flowgram-vue/document';
+import { FlowNodeTransformData } from '@flowgram-vue/document';
+
+import { getPortChildInput, getSlotChildLineStartPoint } from '../utils/transition';
+import { SlotNodeType } from '../typings';
+import {
+  RENDER_SLOT_ADDER_KEY,
+  SlotSpacingKey,
+  SLOT_PORT_DISTANCE,
+  SLOT_RADIUS,
+  SLOT_LABEL_DISTANCE,
+  RENDER_SLOT_LABEL_KEY,
+  SLOT_BLOCK_VERTICAL_SPACING,
+} from '../constants';
+
+export const SlotBlockRegistry: FlowNodeRegistry = {
+  type: SlotNodeType.SlotBlock,
+  extend: FlowNodeBaseType.BLOCK,
+  meta: {
+    inlineSpacingAfter: 0,
+    inlineSpacingPre: 0,
+    spacing: (transform) => {
+      // 水平布局没有子节点情况
+      if (!transform.entity.isVertical && transform.size.width === 0) {
+        return 90;
+      }
+      return getDefaultSpacing(
+        transform.entity,
+        SlotSpacingKey.SLOT_BLOCK_VERTICAL_SPACING,
+        SLOT_BLOCK_VERTICAL_SPACING
+      );
+    },
+    isInlineBlocks: (node) => !node.isVertical,
+  },
+  getLines(transition) {
+    const icon = transition.transform.parent?.pre;
+    const start = getSlotChildLineStartPoint(icon);
+    const portPoint = transition.transform.inputPoint;
+
+    const radius = getDefaultSpacing(
+      transition.transform.entity,
+      SlotSpacingKey.SLOT_RADIUS,
+      SLOT_RADIUS
+    );
+
+    let startPortVertices: Vertex[] = [{ x: start.x, y: portPoint.y }];
+
+    /**
+     * When Radius is not enough, we should use truncate strategy
+     * 弧度不够时，采取截断策略
+     */
+    if (transition.entity.isVertical) {
+      const deltaY = Math.abs(portPoint.y - start.y);
+      let deltaX = radius;
+      let isTruncated = false;
+
+      if (deltaY < radius * 2) {
+        isTruncated = true;
+        if (deltaY < radius) {
+          // Calculate the x by circle equation
+          deltaX = Math.sqrt(radius ** 2 - (radius - deltaY) ** 2);
+        }
+      }
+
+      startPortVertices = [
+        {
+          x: start.x + deltaX,
+          y: start.y,
+          radiusX: radius,
+          radiusY: radius,
+          radiusOverflow: 'truncate',
+        },
+        {
+          x: start.x + deltaX,
+          y: portPoint.y,
+          ...(isTruncated ? { radiusX: 0, radiusY: 0 } : {}),
+        },
+      ];
+    }
+
+    /**
+     * When One Children, we should keep dash array align, so we draw one line directly to child nodes
+     * 只有一个子节点时，我们通常需要保证两条虚线是连贯的，因此我们直接合并，绘制一条线连到子节点
+     */
+    if (transition.transform.children.length === 1) {
+      return [
+        {
+          type: FlowTransitionLineEnum.ROUNDED_LINE,
+          from: start,
+          to: getPortChildInput(transition.transform.children[0]),
+          vertices: startPortVertices,
+          style: {
+            strokeDasharray: '5 5',
+          },
+          radius,
+        },
+      ];
+    }
+
+    return [
+      {
+        type: FlowTransitionLineEnum.ROUNDED_LINE,
+        from: start,
+        to: portPoint,
+        vertices: startPortVertices,
+        style: {
+          strokeDasharray: '5 5',
+        },
+        radius,
+      },
+      ...transition.transform.children.map((_child) => {
+        const childInput = getPortChildInput(_child);
+
+        return {
+          type: FlowTransitionLineEnum.ROUNDED_LINE,
+          radius,
+          from: portPoint,
+          to: childInput,
+          vertices: [{ x: portPoint.x, y: childInput.y }],
+          style: {
+            strokeDasharray: '5 5',
+          },
+        };
+      }),
+    ];
+  },
+  getLabels(transition) {
+    const icon = transition.transform.parent?.pre;
+    const start = getSlotChildLineStartPoint(icon);
+    const portPoint = transition.transform.inputPoint;
+
+    return [
+      {
+        type: FlowTransitionLabelEnum.CUSTOM_LABEL,
+        renderKey: RENDER_SLOT_ADDER_KEY,
+        props: {
+          node: transition.entity,
+        },
+        offset: portPoint,
+      },
+      {
+        type: FlowTransitionLabelEnum.CUSTOM_LABEL,
+        renderKey: RENDER_SLOT_LABEL_KEY,
+        props: {
+          node: transition.entity,
+        },
+        offset: {
+          x:
+            start.x +
+            getDefaultSpacing(
+              transition.entity,
+              SlotSpacingKey.SLOT_LABEL_DISTANCE,
+              SLOT_LABEL_DISTANCE
+            ),
+          y: portPoint.y,
+        },
+        origin: [0, 0.5],
+      },
+    ];
+  },
+  getInputPoint(transform) {
+    const icon = transform.parent?.pre;
+    const start = getSlotChildLineStartPoint(icon);
+
+    let inputY = transform.bounds.center.y;
+    if (transform.children.length) {
+      inputY = mean([
+        getPortChildInput(transform.firstChild).y,
+        getPortChildInput(transform.lastChild).y,
+      ]);
+    }
+
+    return {
+      x:
+        start.x +
+        getDefaultSpacing(transform.entity, SlotSpacingKey.SLOT_PORT_DISTANCE, SLOT_PORT_DISTANCE),
+      y: inputY,
+    };
+  },
+  getChildDelta(child, layout) {
+    const hasChild = !!child.firstChild;
+
+    if (child.entity.isVertical) {
+      // 绑定普通节点时进行重心纠偏
+      let deltaX = hasChild ? 0 : -child.originDeltaX;
+
+      return { x: deltaX, y: 0 };
+    }
+
+    let deltaY = hasChild ? 0 : -child.originDeltaY;
+
+    const preTransform = child.entity.pre?.getData(FlowNodeTransformData);
+    if (preTransform) {
+      const { localBounds: preBounds } = preTransform;
+
+      return {
+        x: 0,
+        y: preBounds.bottom + 30 + deltaY,
+      };
+    }
+
+    return { x: 0, y: deltaY };
+  },
+  getChildLabels() {
+    return [];
+  },
+  getChildLines() {
+    return [];
+  },
+  getDelta(transform) {
+    return {
+      x: 0,
+      y: 0,
+    };
+  },
+};

package/src/activities/slot/extends/slot-icon.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FlowNodeRegistry, FlowNodeBaseType } from '@flowgram-vue/document';
+
+import { drawCollapseLabel, drawCollapseLine } from '../utils/transition';
+import { canSlotDrilldown, insideSlot } from '../utils/node';
+
+export const SlotIconRegistry: FlowNodeRegistry = {
+  type: FlowNodeBaseType.BLOCK_ICON,
+  meta: {
+    defaultExpanded: false,
+    spacing: 0,
+  },
+  getLines: (transition) => [
+    ...(canSlotDrilldown(transition.entity.parent!) ? drawCollapseLine(transition) : []),
+  ],
+  getLabels: (transition) => [
+    ...(canSlotDrilldown(transition.entity.parent!) ? drawCollapseLabel(transition) : []),
+  ],
+  getDelta: (transform) => {
+    // Slot 节点内部时，重新纠正重心调整产生的偏移
+    if (insideSlot(transform.entity.parent)) {
+      return transform.entity.isVertical
+        ? { x: -transform.originDeltaX, y: 0 }
+        : { x: 0, y: -transform.originDeltaY };
+    }
+    return { x: 0, y: 0 };
+  },
+};

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

@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FlowNodeRegistry, FlowNodeBaseType, getDefaultSpacing } from '@flowgram-vue/document';
+import { FlowNodeTransformData } from '@flowgram-vue/document';
+
+import { SlotNodeType } from '../typings';
+import {
+  SlotSpacingKey,
+  SLOT_START_DISTANCE,
+  SLOT_PORT_DISTANCE,
+  SLOT_BLOCK_PORT_DISTANCE,
+} from '../constants';
+
+export const SlotInlineBlocksRegistry: FlowNodeRegistry = {
+  type: SlotNodeType.SlotInlineBlocks,
+  extend: FlowNodeBaseType.BLOCK,
+  meta: {
+    spacing: 0,
+    inlineSpacingPre: 0,
+    inlineSpacingAfter: 0,
+    isInlineBlocks: (node) => !node.isVertical,
+  },
+  getLines() {
+    return [];
+  },
+  getLabels() {
+    return [];
+  },
+  getChildDelta(child, layout) {
+    if (child.entity.isVertical) {
+      return { x: 0, y: 0 };
+    }
+    const preTransform = child.entity.pre?.getData(FlowNodeTransformData);
+    if (preTransform) {
+      const { localBounds: preBounds } = preTransform;
+
+      return {
+        x: 0,
+        y: preBounds.bottom + 30,
+      };
+    }
+
+    return { x: 0, y: 0 };
+  },
+  /**
+   * 控制条件分支居右布局
+   */
+  getDelta(transform) {
+    if (!transform.children.length) {
+      return { x: 0, y: 0 };
+    }
+
+    const icon = transform.pre;
+    if (!icon) {
+      return { x: 0, y: 0 };
+    }
+
+    const startDistance = getDefaultSpacing(
+      transform.entity,
+      SlotSpacingKey.SLOT_START_DISTANCE,
+      SLOT_START_DISTANCE
+    );
+
+    const portDistance = getDefaultSpacing(
+      transform.entity,
+      SlotSpacingKey.SLOT_PORT_DISTANCE,
+      SLOT_PORT_DISTANCE
+    );
+
+    const portBlockDistance = getDefaultSpacing(
+      transform.entity,
+      SlotSpacingKey.SLOT_BLOCK_PORT_DISTANCE,
+      SLOT_BLOCK_PORT_DISTANCE
+    );
+
+    if (!transform.entity.isVertical) {
+      const noChildren = transform?.children?.every?.((_port) => !_port.children.length);
+      /**
+       * 如果没有 children 的时候，不需要有右侧的间距，避免水平布局的时候 Slot 右侧空间过大。
+       */
+      if (noChildren) {
+        return {
+          x: portDistance - icon.localBounds.width / 2,
+          y: icon.localBounds.bottom + startDistance,
+        };
+      }
+      return {
+        x: portDistance + portBlockDistance - icon.localBounds.width / 2,
+        y: icon.localBounds.bottom + startDistance,
+      };
+    }
+
+    const slotInlineBlockDelta = startDistance + portDistance + portBlockDistance;
+    return {
+      x: icon.localBounds.right + slotInlineBlockDelta,
+      y: -icon.localBounds.height,
+    };
+  },
+};

package/src/activities/slot/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { SlotRegistry } from './slot';
+export { SlotBlockRegistry } from './extends';
+export { SlotSpacingKey } from './constants';