@flowgram-vue/fixed-layout-core 0.2.0

package/src/activities/slot/slot.ts

@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FlowNodeRegistry, FlowNodeBaseType, getDefaultSpacing } from '@flowgram-vue/document';
+
+import {
+  drawStraightAdder,
+  drawStraightLine,
+  getInputPoint,
+  getOutputPoint,
+} from './utils/transition';
+import { insideSlot } from './utils/node';
+import { getAllPortsMiddle } from './utils/layout';
+import { createSlotFromJSON } from './utils/create';
+import { SlotInlineBlocksRegistry, SlotIconRegistry } from './extends';
+import {
+  SLOT_NODE_LAST_SPACING,
+  SLOT_SPACING,
+  SLOT_START_DISTANCE,
+  SlotSpacingKey,
+} from './constants';
+
+export const SlotRegistry: FlowNodeRegistry = {
+  type: FlowNodeBaseType.SLOT,
+  extend: 'block',
+  meta: {
+    // Slot 节点内部暂时不允许拖拽
+    draggable: (node) => !insideSlot(node),
+    hidden: true,
+    spacing: (node) => getDefaultSpacing(node.entity, SlotSpacingKey.SLOT_SPACING, SLOT_SPACING),
+    padding: (node) => ({
+      left: 0,
+      right: node.collapsed
+        ? getDefaultSpacing(node.entity, SlotSpacingKey.SLOT_START_DISTANCE, SLOT_START_DISTANCE)
+        : 0,
+      bottom: !insideSlot(node.entity) && node.isLast ? SLOT_NODE_LAST_SPACING : 0,
+      top: 0,
+    }),
+    copyDisable: false,
+    defaultExpanded: false,
+  },
+  /**
+   * 业务通常需要重载方法
+   */
+  onCreate: createSlotFromJSON,
+  getLines: (transition) => [
+    ...(!insideSlot(transition.entity) ? drawStraightLine(transition) : []),
+  ],
+  getLabels: (transition) => [
+    ...(!insideSlot(transition.entity) ? drawStraightAdder(transition) : []),
+  ],
+  getInputPoint,
+  getOutputPoint,
+  onAfterUpdateLocalTransform(transform) {
+    const { isVertical } = transform.entity;
+
+    if (!isVertical) {
+      return;
+    }
+
+    const icon = transform.firstChild;
+    const inlineBlocks = transform.lastChild;
+
+    if (!icon || !inlineBlocks) {
+      return;
+    }
+
+    const iconSize = icon.localBounds.height;
+    const inlineBlocksSize = inlineBlocks.localBounds.height;
+
+    if (transform.collapsed || !inlineBlocks) {
+      return;
+    }
+
+    // 所有 Ports 的中间点
+    const portsMiddle = getAllPortsMiddle(inlineBlocks);
+
+    icon.entity.clearMemoLocal();
+    inlineBlocks.entity.clearMemoLocal();
+
+    if (iconSize / 2 + portsMiddle > inlineBlocksSize || !inlineBlocks.children.length) {
+      icon.transform.update({
+        position: { x: icon.transform.position.x, y: 0 },
+      });
+      inlineBlocks.transform.update({
+        position: {
+          x: inlineBlocks.transform.position.x,
+          y: Math.max(iconSize / 2 - inlineBlocksSize / 2, 0),
+        },
+      });
+
+      return;
+    }
+
+    inlineBlocks.transform.update({
+      position: { x: inlineBlocks.transform.position.x, y: 0 },
+    });
+    icon?.transform.update({
+      position: {
+        x: icon.transform.position.x,
+        y: Math.max(portsMiddle - iconSize / 2, 0), // 所有 port 的中间点
+      },
+    });
+  },
+  extendChildRegistries: [SlotIconRegistry, SlotInlineBlocksRegistry],
+};

package/src/activities/slot/typings.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FlowNodeBaseType } from '@flowgram-vue/document';
+
+export enum SlotNodeType {
+  Slot = FlowNodeBaseType.SLOT,
+  SlotBlock = FlowNodeBaseType.SLOT_BLOCK,
+  SlotInlineBlocks = 'slotInlineBlocks',
+  SlotBlockInlineBlocks = 'slotBlockInlineBlocks',
+}

package/src/activities/slot/utils/create.ts

@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FlowNodeBaseType } from '@flowgram-vue/document';
+import { type FlowNodeEntity } from '@flowgram-vue/document';
+import { FlowNodeJSON } from '@flowgram-vue/document';
+
+import { SlotNodeType } from '../typings';
+
+// Slot 样例数据
+// const mock = {
+//   type: 'slot',
+//   id: 'reactor_parent',
+//   blocks: [
+//     {
+//       id: 'port_LnSdK',
+//       blocks: [{ type: 'Slot', id: 'reactor_child' }],
+//     },
+//     {
+//       id: 'port_60X7U',
+//     },
+//     {
+//       id: 'port_JWhcm',
+//     },
+//     {
+//       id: 'port_scHWa',
+//     },
+//   ],
+// };
+
+/**
+ * 创建 Slot 子节点
+ * - Slot
+ *  - SlotBlockIcon
+ *  - SlotInlineBlocks
+ *    - SlotBlock 1
+ *        - SlotBlockIcon 1
+ *          - ChildSlot 1
+ *          - ChildSlot 2
+ *    - SlotBlock 2
+ *
+ * 范例数据：
+ * {
+ *  type: 'Slot',
+ *  id: 'reactor_parent',
+ *  blocks: [
+ *    {
+ *      id: 'port_LnSdK',
+ *      blocks: [{ type: 'Slot', id: 'reactor_child' }],
+ *    },
+ *    {
+ *      id: 'port_60X7U',
+ *    }
+ *  ],
+ * }
+ *
+ */
+export const createSlotFromJSON = (node: FlowNodeEntity, json: FlowNodeJSON): FlowNodeEntity[] => {
+  const { document } = node;
+
+  const addedNodes: FlowNodeEntity[] = [];
+
+  // 块列表开始节点，用来展示块的按钮
+  const blockIconNode = document.addNode({
+    id: `$slotIcon$${node.id}`,
+    type: FlowNodeBaseType.BLOCK_ICON,
+    originParent: node,
+    parent: node,
+  });
+  const inlineBlocksNode = document.addNode({
+    id: `$slotInlineBlocks$${node.id}`,
+    type: SlotNodeType.SlotInlineBlocks,
+    originParent: node,
+    parent: node,
+  });
+  addedNodes.push(blockIconNode);
+  addedNodes.push(inlineBlocksNode);
+
+  const portJSONList = json.blocks || [];
+
+  portJSONList.forEach((_portJSON) => {
+    const port = document.addNode({
+      type: SlotNodeType.SlotBlock,
+      ..._portJSON,
+      originParent: node,
+      parent: inlineBlocksNode,
+    });
+    addedNodes.push(port);
+
+    (_portJSON.blocks || []).forEach((_portChild) => {
+      document.addNode(
+        {
+          type: SlotNodeType.Slot,
+          ..._portChild,
+          parent: port,
+        },
+        addedNodes
+      );
+    });
+  });
+
+  return addedNodes;
+};

package/src/activities/slot/utils/layout.ts

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { mean } from 'lodash-es';
+import { FlowNodeTransformData } from '@flowgram-vue/document';
+
+export const getDisplayFirstChildTop = (transform: FlowNodeTransformData): number => {
+  if (transform.firstChild) {
+    return transform.localBounds.top + getDisplayFirstChildTop(transform.firstChild);
+  }
+
+  return transform.localBounds.center.y;
+};
+
+/**
+ * 获取单个 Port 的中间点
+ * @param inlineBlocks
+ * @returns
+ */
+export const getPortMiddle = (_port: FlowNodeTransformData) => {
+  if (!_port.children.length) {
+    return _port.localBounds.top;
+  }
+
+  const portChildInputs = [_port.firstChild!, _port.lastChild!].map((_portChild) =>
+    getDisplayFirstChildTop(_portChild)
+  );
+
+  return _port.localBounds.top + mean(portChildInputs);
+};
+
+/**
+ * 获取所有 Port 的中间点
+ * @param inlineBlocks
+ * @returns
+ */
+export const getAllPortsMiddle = (inlineBlocks: FlowNodeTransformData) => {
+  if (!inlineBlocks.children.length) {
+    return inlineBlocks.localBounds.height / 2;
+  }
+
+  const portInputs = [inlineBlocks.firstChild!, inlineBlocks.lastChild!].map((_port) =>
+    getPortMiddle(_port)
+  );
+
+  return mean(portInputs);
+};

package/src/activities/slot/utils/node.ts

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FlowNodeEntity } from '@flowgram-vue/document';
+import { FlowNodeTransformData } from '@flowgram-vue/document';
+
+import { SlotNodeType } from '../typings';
+
+/**
+ * Slot 节点是否可下钻，看 inlineBlocks 是否有子节点
+ * @param Slot Slot 节点
+ */
+export const canSlotDrilldown = (Slot: FlowNodeEntity): boolean =>
+  !!Slot?.lastCollapsedChild?.blocks.length;
+
+/**
+ * 是否是 Slot 内部
+ * @param entity
+ * @returns
+ */
+export const insideSlot = (entity?: FlowNodeEntity): boolean =>
+  !!entity?.parent?.isTypeOrExtendType(SlotNodeType.SlotBlock);
+
+/**
+ * 获取在页面上实际渲染的第一个 Child 节点
+ * @param node
+ */
+export const getDisplayFirstChildTransform = (
+  transform: FlowNodeTransformData
+): FlowNodeTransformData => {
+  if (transform.firstChild) {
+    return getDisplayFirstChildTransform(transform.firstChild);
+  }
+
+  return transform;
+};

package/src/activities/slot/utils/transition.ts

@@ -0,0 +1,222 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IPoint, Point } from '@flowgram-vue/utils';
+import {
+  type FlowNodeTransitionData,
+  FlowTransitionLineEnum,
+  FlowTransitionLabelEnum,
+  type FlowNodeTransformData,
+  type FlowTransitionLine,
+  type FlowTransitionLabel,
+  getDefaultSpacing,
+} from '@flowgram-vue/document';
+
+import { RENDER_SLOT_COLLAPSE_KEY, SlotSpacingKey, SLOT_START_DISTANCE } from '../constants';
+import { getDisplayFirstChildTransform } from './node';
+
+/**
+ * 画 Slot 节点虚线起点
+ * @param iconTransform blockIcon 的 transform
+ * @returns
+ */
+export const getSlotChildLineStartPoint = (iconTransform?: FlowNodeTransformData): IPoint => {
+  if (!iconTransform) {
+    return { x: 0, y: 0 };
+  }
+
+  const startDistance = getDefaultSpacing(
+    iconTransform.entity,
+    SlotSpacingKey.SLOT_START_DISTANCE,
+    SLOT_START_DISTANCE
+  );
+
+  if (!iconTransform.entity.isVertical) {
+    return {
+      x: iconTransform?.bounds.center.x,
+      y: iconTransform?.bounds.bottom + startDistance,
+    };
+  }
+  return {
+    x: iconTransform?.bounds.right + startDistance,
+    y: iconTransform?.bounds.center.y,
+  };
+};
+
+export const getOutputPoint = (transform: FlowNodeTransformData): IPoint => {
+  const icon = transform.firstChild;
+
+  if (!icon) {
+    return { x: 0, y: 0 };
+  }
+
+  if (!transform.entity.isVertical) {
+    return {
+      x: transform.bounds.right,
+      y: icon.outputPoint.y,
+    };
+  }
+
+  return {
+    x: icon.outputPoint.x,
+    y: transform.bounds.bottom,
+  };
+};
+
+export const getInputPoint = (transform: FlowNodeTransformData): IPoint => {
+  const icon = transform.firstChild;
+
+  if (!icon) {
+    return { x: 0, y: 0 };
+  }
+
+  if (!transform.entity.isVertical) {
+    return {
+      x: transform.bounds.left,
+      y: icon.outputPoint.y,
+    };
+  }
+
+  return icon.inputPoint;
+};
+
+/**
+ * 获取实连线终点
+ * @param transition
+ * @returns
+ */
+export const getTransitionToPoint = (transition: FlowNodeTransitionData): IPoint => {
+  let toPoint = transition.transform.next?.inputPoint;
+  const icon = transition.transform.firstChild;
+
+  const parent = transition.transform.parent;
+
+  if (!icon || !parent) {
+    return { x: 0, y: 0 };
+  }
+
+  if (!transition.transform.next) {
+    if (!transition.entity.isVertical) {
+      toPoint = {
+        x: parent.outputPoint.x,
+        y: icon.outputPoint.y,
+      };
+    } else {
+      toPoint = {
+        x: icon.outputPoint.x,
+        y: parent.outputPoint.y,
+      };
+    }
+  }
+
+  return toPoint || { x: 0, y: 0 };
+};
+
+/**
+ * 画实现线
+ * @param transition Slot 节点的 transition
+ * @returns
+ */
+export const drawStraightLine = (transition: FlowNodeTransitionData): FlowTransitionLine[] => {
+  const icon = transition.transform.firstChild;
+  const toPoint = getTransitionToPoint(transition);
+
+  if (!icon) {
+    return [];
+  }
+
+  return [
+    {
+      type: FlowTransitionLineEnum.STRAIGHT_LINE,
+      from: icon.outputPoint,
+      to: toPoint,
+    },
+    {
+      type: FlowTransitionLineEnum.STRAIGHT_LINE,
+      from: icon.inputPoint,
+      to: transition.transform.inputPoint,
+    },
+  ];
+};
+
+export const drawCollapseLabel = (transition: FlowNodeTransitionData): FlowTransitionLabel[] => {
+  const icon = transition.transform;
+
+  return [
+    {
+      type: FlowTransitionLabelEnum.CUSTOM_LABEL,
+      renderKey: RENDER_SLOT_COLLAPSE_KEY,
+      offset: getSlotChildLineStartPoint(icon),
+      props: {
+        node: transition.entity.parent,
+      },
+    },
+  ];
+};
+
+export const drawCollapseLine = (transition: FlowNodeTransitionData): FlowTransitionLine[] => {
+  const startDistance = getDefaultSpacing(
+    transition.transform.entity,
+    SlotSpacingKey.SLOT_START_DISTANCE,
+    SLOT_START_DISTANCE
+  );
+
+  return [
+    {
+      type: FlowTransitionLineEnum.STRAIGHT_LINE,
+      from: getSlotChildLineStartPoint(transition.transform),
+      to: Point.move(
+        getSlotChildLineStartPoint(transition.transform),
+        transition.entity.isVertical ? { x: -startDistance, y: 0 } : { x: 0, y: -startDistance }
+      ),
+      style: {
+        strokeDasharray: '5 5',
+      },
+    },
+  ];
+};
+
+/**
+ * 画实线上的叫号
+ * @param transition
+ * @returns
+ */
+export const drawStraightAdder = (transition: FlowNodeTransitionData): FlowTransitionLabel[] => {
+  const toPoint = getTransitionToPoint(transition);
+  const fromPoint = transition.transform.firstChild!.outputPoint;
+
+  const hoverProps = transition.entity.isVertical
+    ? {
+        hoverHeight: toPoint.y - fromPoint.y,
+        hoverWidth: transition.transform.firstChild?.bounds.width,
+      }
+    : {
+        hoverHeight: transition.transform.firstChild?.bounds.height,
+        hoverWidth: toPoint.x - fromPoint.x,
+      };
+
+  return [
+    {
+      offset: Point.getMiddlePoint(fromPoint, toPoint),
+      type: FlowTransitionLabelEnum.ADDER_LABEL,
+      props: hoverProps,
+    },
+  ];
+};
+
+/**
+ * 获取端口的子节点线条输入点
+ * @param _child
+ * @returns
+ */
+export const getPortChildInput = (_child?: FlowNodeTransformData) => {
+  if (!_child) {
+    return { x: 0, y: 0 };
+  }
+
+  const firstChild = getDisplayFirstChildTransform(_child);
+
+  return { x: _child.bounds.left, y: firstChild.bounds.center.y };
+};

package/src/activities/start.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FlowNodeBaseType, type FlowNodeRegistry } from '@flowgram-vue/document';
+
+/**
+ * 开始节点
+ */
+export const StartRegistry: FlowNodeRegistry = {
+  type: FlowNodeBaseType.START,
+  meta: {
+    isStart: true,
+    draggable: false,
+    selectable: false, // 触发器等开始节点不能被框选
+    deleteDisable: true, // 禁止删除
+    copyDisable: true, // 禁止copy
+    addDisable: true, // 禁止添加
+  },
+};

package/src/activities/static-split.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FlowNodeBaseType, type FlowNodeRegistry, FlowNodeSplitType } from '@flowgram-vue/document';
+
+/**
+ * 不能动态添加分支的分支节点
+ * staticSplit:  (最原始的 id)
+ *  blockIcon
+ *  inlineBlocks
+ *    block1
+ *      blockOrderIcon
+ *    block2
+ *      blockOrderIcon
+ */
+export const StaticSplitRegistry: FlowNodeRegistry = {
+  extend: FlowNodeSplitType.DYNAMIC_SPLIT,
+  type: FlowNodeSplitType.STATIC_SPLIT,
+  extendChildRegistries: [
+    {
+      type: FlowNodeBaseType.INLINE_BLOCKS,
+      getLabels() {
+        return [];
+      },
+    },
+  ],
+};

package/src/activities/try-catch-extends/catch-block.ts

@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  DEFAULT_SPACING,
+  FlowNodeBaseType,
+  type FlowNodeRegistry,
+  FlowTransitionLineEnum,
+} from '@flowgram-vue/document';
+
+import { TryCatchSpacings, TryCatchTypeEnum } from './constants';
+
+/**
+ * catch 分支
+ */
+export const CatchBlockRegistry: FlowNodeRegistry = {
+  extend: FlowNodeBaseType.BLOCK,
+  type: TryCatchTypeEnum.CATCH_BLOCK,
+  meta: {
+    hidden: true,
+    spacing: DEFAULT_SPACING.NULL,
+  },
+  getLines(transition) {
+    const { transform } = transition;
+    const { isVertical } = transition.entity;
+    const parentPoint = transform.parent!;
+    const { inputPoint, outputPoint } = transform;
+    let parentInputPoint;
+    if (isVertical) {
+      parentInputPoint = {
+        x: parentPoint.inputPoint.x,
+        y: parentPoint.inputPoint.y - TryCatchSpacings.CATCH_INLINE_SPACING,
+      };
+    } else {
+      parentInputPoint = {
+        x: parentPoint.inputPoint.x - TryCatchSpacings.CATCH_INLINE_SPACING,
+        y: parentPoint.inputPoint.y,
+      };
+    }
+
+    const lines = [
+      {
+        type: FlowTransitionLineEnum.DIVERGE_LINE,
+        from: parentInputPoint,
+        to: inputPoint,
+      },
+    ];
+
+    // 最后一个节点是 end 节点，不绘制 mergeLine
+    if (!transition.isNodeEnd) {
+      let mergePoint;
+      if (isVertical) {
+        mergePoint = {
+          x: parentPoint.outputPoint.x,
+          y: parentPoint.bounds.bottom,
+        };
+      } else {
+        mergePoint = {
+          x: parentPoint.bounds.right,
+          y: parentPoint.outputPoint.y,
+        };
+      }
+
+      lines.push({
+        type: FlowTransitionLineEnum.MERGE_LINE,
+        from: outputPoint,
+        to: mergePoint,
+      });
+    }
+
+    return lines;
+  },
+  getLabels() {
+    return [];
+  },
+};