@flowgram-vue/fixed-layout-core 0.2.0

package/src/activities/try-catch-extends/catch-inline-blocks.ts

@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FlowRendererKey } from '@flowgram-vue/renderer';
+import {
+  DEFAULT_SPACING,
+  FlowNodeBaseType,
+  type FlowNodeRegistry,
+  FlowNodeRenderData,
+  FlowTransitionLabelEnum,
+  FlowTransitionLineEnum,
+  FlowLayoutDefault,
+} from '@flowgram-vue/document';
+
+import { TryCatchSpacings, TryCatchTypeEnum } from './constants';
+
+/**
+ * catch 分支列表
+ */
+export const CatchInlineBlocksRegistry: FlowNodeRegistry = {
+  extend: FlowNodeBaseType.INLINE_BLOCKS,
+  type: TryCatchTypeEnum.CATCH_INLINE_BLOCKS,
+  meta: {
+    spacing: DEFAULT_SPACING.NULL,
+    inlineSpacingPre: DEFAULT_SPACING.NULL,
+    // inlineSpacingAfter: DEFAULT_SPACING.NULL,
+  },
+  getDelta() {
+    return undefined;
+  },
+  getLines(transition) {
+    const { transform } = transition;
+    const mainInlineBlocks = transform.parent!;
+
+    const lines = [
+      {
+        type: FlowTransitionLineEnum.DIVERGE_LINE,
+        from: mainInlineBlocks.pre!.outputPoint,
+        to: transform.inputPoint,
+      },
+    ];
+
+    if (!transform.entity.isNodeEnd) {
+      lines.push({
+        type: FlowTransitionLineEnum.MERGE_LINE,
+        from: transform.outputPoint,
+        to: mainInlineBlocks.outputPoint,
+      });
+    }
+
+    return lines;
+  },
+  getOriginDeltaX(transform) {
+    const { firstChild } = transform;
+    if (!firstChild) return 0;
+    return firstChild.originDeltaX;
+  },
+  getLabels(transition) {
+    const { inputPoint } = transition.transform;
+    const { isVertical } = transition.entity;
+    const currentTransform = transition.transform;
+
+    // 实际输入点
+    const actualInputPoint = {
+      x: isVertical ? inputPoint.x : inputPoint.x - TryCatchSpacings.CATCH_INLINE_SPACING,
+      y: isVertical ? inputPoint.y - TryCatchSpacings.CATCH_INLINE_SPACING : inputPoint.y,
+    };
+
+    if (currentTransform.collapsed) {
+      return [];
+    }
+
+    // branch adder 节点
+    return [
+      {
+        type: FlowTransitionLabelEnum.CUSTOM_LABEL,
+        renderKey: FlowRendererKey.BRANCH_ADDER,
+        offset: actualInputPoint,
+        props: {
+          // 激活状态
+          activated: transition.entity.getData(FlowNodeRenderData)!.activated,
+          transform: currentTransform,
+          // 传给外部使用的 node 信息
+          node: currentTransform.originParent?.entity,
+        },
+      },
+    ];
+  },
+  getInputPoint(transform, layout) {
+    const isVertical = FlowLayoutDefault.isVertical(layout);
+    // 因为是左偏移，所以用第一条 catch 分支
+    const firstCatchBlock = transform.firstChild;
+    if (firstCatchBlock) {
+      return firstCatchBlock.inputPoint;
+    }
+    return isVertical ? transform.bounds.topCenter : transform.bounds.rightCenter;
+  },
+  getOutputPoint(transform, layout) {
+    const isVertical = FlowLayoutDefault.isVertical(layout);
+
+    // 收缩时，出点为入点
+    if (transform.collapsed) {
+      return transform.inputPoint;
+    }
+
+    const firstCatchBlock = transform.firstChild;
+    if (firstCatchBlock) {
+      return isVertical
+        ? {
+            x: firstCatchBlock!.outputPoint?.x,
+            y: transform.bounds.bottom,
+          }
+        : {
+            x: transform.bounds.right,
+            y: firstCatchBlock!.outputPoint?.y,
+          };
+    }
+    return isVertical ? transform.bounds.bottomCenter : transform.bounds.rightCenter;
+  },
+};

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

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * tryCatch 自定义类型
+ */
+export enum TryCatchTypeEnum {
+  MAIN_INLINE_BLOCKS = 'mainInlineBlocks',
+  CATCH_INLINE_BLOCKS = 'catchInlineBlocks',
+  TRY_BLOCK = 'tryBlock',
+  TRY_SLOT = 'trySlot',
+  CATCH_BLOCK = 'catchBlock',
+}
+
+export enum TryCatchSpacings {
+  INLINE_SPACING_TOP = 54, // 上边空白
+  INLINE_SPACING_BOTTOM = 0, // 下边空白
+  TRY_START_LABEL_DELTA = -20, // try 开始标签偏移
+  TRY_END_LABEL_DELTA = -20, // try 结束标签偏移
+  CATCH_INLINE_SPACING = 20, //  Catch 分支的上边间隙
+  // lint-fix: 这里枚举重复了，但是看语义定义两个 key 是合理的。因此 disabled 处理
+  // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
+  MAIN_INLINE_SPACING_TOP = 20,
+  MAIN_INLINE_SPACING_BOTTOM = 40, // main 分支下边留白，不然会遮挡 "监控结束"标签
+}

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

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './constants';
+export * from './catch-block';
+export * from './catch-inline-blocks';
+export * from './main-inline-blocks';
+export * from './try-block';
+export * from './try-slot';

package/src/activities/try-catch-extends/main-inline-blocks.ts

@@ -0,0 +1,147 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FlowRendererKey, FlowTextKey } from '@flowgram-vue/renderer';
+import {
+  FlowNodeBaseType,
+  type FlowNodeRegistry,
+  FlowNodeTransformData,
+  FlowTransitionLabelEnum,
+  FlowTransitionLineEnum,
+  FlowLayoutDefault,
+  getDefaultSpacing,
+  ConstantKeys,
+} from '@flowgram-vue/document';
+
+import { TryCatchSpacings, TryCatchTypeEnum } from './constants';
+
+/**
+ * 主 BLOCK
+ */
+export const MainInlineBlocksRegistry: FlowNodeRegistry = {
+  extend: FlowNodeBaseType.INLINE_BLOCKS,
+  type: TryCatchTypeEnum.MAIN_INLINE_BLOCKS,
+  meta: {
+    inlineSpacingPre: TryCatchSpacings.MAIN_INLINE_SPACING_TOP,
+    inlineSpacingAfter: TryCatchSpacings.MAIN_INLINE_SPACING_BOTTOM,
+  },
+  getLines(transition) {
+    const { transform } = transition;
+    const tryBranch = transform.firstChild!;
+
+    const lines = [
+      {
+        type: FlowTransitionLineEnum.STRAIGHT_LINE,
+        from: tryBranch.outputPoint,
+        to: transform.originParent!.outputPoint,
+      },
+    ];
+
+    return lines;
+  },
+  getLabels(transition) {
+    const { transform } = transition;
+    const { isVertical } = transition.entity;
+    const catchInlineBlocks = transform.children[1]!;
+    const errLabelX = isVertical
+      ? (transform.parent!.outputPoint.x + catchInlineBlocks.inputPoint.x) / 2
+      : transform.inputPoint.x - TryCatchSpacings.INLINE_SPACING_TOP;
+    const errLabelY = isVertical
+      ? transform.inputPoint.y - TryCatchSpacings.INLINE_SPACING_TOP
+      : (transform.parent!.outputPoint.y + catchInlineBlocks.inputPoint.y) / 2;
+
+    const errorLabelX = errLabelX;
+    const errorLabelY = errLabelY;
+    return [
+      {
+        type: FlowTransitionLabelEnum.TEXT_LABEL,
+        renderKey: FlowTextKey.TRY_START_TEXT,
+        offset: {
+          x: isVertical
+            ? transform.inputPoint.x
+            : transform.inputPoint.x + TryCatchSpacings.TRY_START_LABEL_DELTA,
+          y: isVertical
+            ? transform.inputPoint.y + TryCatchSpacings.TRY_START_LABEL_DELTA
+            : transform.inputPoint.y,
+        },
+      },
+      {
+        type: FlowTransitionLabelEnum.TEXT_LABEL,
+        renderKey: FlowTextKey.TRY_END_TEXT,
+        offset: {
+          x: isVertical
+            ? transform.inputPoint.x
+            : transform.originParent!.outputPoint.x + TryCatchSpacings.TRY_END_LABEL_DELTA,
+          y: isVertical
+            ? transform.originParent!.outputPoint.y + TryCatchSpacings.TRY_END_LABEL_DELTA
+            : transform.inputPoint.y,
+        },
+      },
+      // 错误分支收起
+      {
+        type: FlowTransitionLabelEnum.CUSTOM_LABEL,
+        renderKey: FlowRendererKey.TRY_CATCH_COLLAPSE,
+        offset: {
+          x: errorLabelX,
+          y: errorLabelY,
+        },
+        props: {
+          node: transform.lastChild?.entity,
+        },
+      },
+    ];
+  },
+  getInputPoint(transform) {
+    const tryBlock = transform.firstChild!;
+    return tryBlock.inputPoint;
+  },
+  getOutputPoint(transform, layout) {
+    const tryBlock = transform.firstChild!;
+    const isVertical = FlowLayoutDefault.isVertical(layout);
+    if (isVertical) {
+      return {
+        x: tryBlock.outputPoint.x,
+        y: transform.bounds.bottom + TryCatchSpacings.CATCH_INLINE_SPACING,
+      };
+    }
+    return {
+      x: transform.bounds.right + TryCatchSpacings.CATCH_INLINE_SPACING,
+      y: tryBlock.outputPoint.y,
+    };
+  },
+  getDelta() {
+    return undefined;
+  },
+  getChildDelta(child, layout) {
+    const preTransform = child.entity.pre?.getData(FlowNodeTransformData);
+    const isVertical = FlowLayoutDefault.isVertical(layout);
+    if (preTransform) {
+      const { localBounds: preBounds } = preTransform;
+      // try 分支和 catch 分支的最小间距不低于 minInlineBlockSpacing
+      let delta = 0;
+      if (isVertical) {
+        delta = Math.max(
+          child.parent!.minInlineBlockSpacing,
+          -child.originDeltaX + getDefaultSpacing(child.entity, ConstantKeys.BRANCH_SPACING)
+        );
+      } else {
+        delta = Math.max(
+          child.parent!.minInlineBlockSpacing,
+          -child.originDeltaY + getDefaultSpacing(child.entity, ConstantKeys.BRANCH_SPACING)
+        );
+      }
+
+      return {
+        // 分支只有两个所以这里可以写死间隔宽度
+        x: isVertical ? preBounds.right + delta : 0,
+        y: isVertical ? 0 : preBounds.bottom + delta,
+      };
+    }
+    return {
+      x: 0,
+      y: 0,
+    };
+  },
+};

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

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { DEFAULT_SPACING, FlowNodeBaseType, type FlowNodeRegistry } from '@flowgram-vue/document';
+
+import { TryCatchTypeEnum } from './constants';
+
+/**
+ * try 分支
+ */
+export const TryBlockRegistry: FlowNodeRegistry = {
+  extend: FlowNodeBaseType.BLOCK,
+  type: TryCatchTypeEnum.TRY_BLOCK,
+  meta: {
+    hidden: true,
+    spacing: DEFAULT_SPACING.NULL,
+  },
+  getLines() {
+    return [];
+  },
+  getLabels() {
+    return [];
+  },
+};

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

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type FlowNodeRegistry, FlowTransitionLabelEnum } from '@flowgram-vue/document';
+
+import { TryCatchTypeEnum } from './constants';
+
+/**
+ * try 占位节点
+ */
+export const TrySlotRegistry: FlowNodeRegistry = {
+  type: TryCatchTypeEnum.TRY_SLOT,
+  meta: {
+    inlineSpacingAfter: 16,
+    spacing: 0,
+    size: {
+      width: 16,
+      height: 0,
+    },
+  },
+  onAfterUpdateLocalTransform(transform): void {
+    // 根据布局要置换宽高数据
+    if (transform.entity.isVertical) {
+      transform.data.size = {
+        width: 16,
+        height: 0,
+      };
+    } else {
+      transform.data.size = {
+        width: 0,
+        height: 16,
+      };
+    }
+    transform.transform.update({
+      size: transform.data.size,
+    });
+  },
+  getLabels(transition) {
+    return [
+      {
+        offset: transition.transform.bounds.center,
+        type: FlowTransitionLabelEnum.ADDER_LABEL,
+      },
+    ];
+  },
+};

package/src/activities/try-catch.ts

@@ -0,0 +1,176 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  FlowLayoutDefault,
+  FlowNodeBaseType,
+  type FlowNodeEntity,
+  type FlowNodeJSON,
+  type FlowNodeRegistry,
+} from '@flowgram-vue/document';
+
+import {
+  CatchBlockRegistry,
+  CatchInlineBlocksRegistry,
+  MainInlineBlocksRegistry,
+  TryBlockRegistry,
+  TryCatchSpacings,
+  TryCatchTypeEnum,
+  TrySlotRegistry,
+} from './try-catch-extends';
+
+/**
+ * try catch 节点
+ */
+export const TryCatchRegistry: FlowNodeRegistry = {
+  type: 'tryCatch',
+  meta: {
+    hidden: true,
+    inlineSpacingAfter: TryCatchSpacings.INLINE_SPACING_BOTTOM,
+  },
+  /**
+   * 结构
+   * tryCatch
+   *    - tryCatchIcon
+   *    - mainInlineBlocks
+   *        - tryBlock // try 分支
+   *          - trySlot // 空节点用来占位，try 分支一开始没有节点
+   *        - catchInlineBlocks
+   *            - catchBlock // catch 分支 1
+   *              - blockOrderIcon
+   *              - node1
+   *            - catchBlock // catch 分支 2
+   *              - blockOrderIcon
+   *              - node 2
+   * @param node
+   * @param json
+   */
+  onCreate(node: FlowNodeEntity, json: FlowNodeJSON) {
+    const { document } = node;
+    const [tryBlock, ...catchBlocks] = json.blocks || [];
+    const addedNodes: FlowNodeEntity[] = [];
+    const tryCatchIconNode = document.addNode({
+      id: `$tryCatchIcon$${node.id}`,
+      type: FlowNodeBaseType.BLOCK_ICON,
+      originParent: node,
+      parent: node,
+    });
+    const mainBlockNode = document.addNode({
+      id: `$mainInlineBlocks$${node.id}`,
+      type: TryCatchTypeEnum.MAIN_INLINE_BLOCKS,
+      originParent: node,
+      parent: node,
+    });
+    const tryBlockNode = document.addNode({
+      id: tryBlock.id,
+      type: tryBlock.type || TryCatchTypeEnum.TRY_BLOCK,
+      originParent: node,
+      parent: mainBlockNode,
+      data: tryBlock.data,
+    });
+    const trySlotNode = document.addNode({
+      id: `$trySlot$${tryBlock.id}`,
+      hidden: true,
+      type: TryCatchTypeEnum.TRY_SLOT, // 占位节点
+      originParent: node,
+      parent: tryBlockNode,
+    });
+    const catchInlineBlocksNode = document.addNode({
+      id: `$catchInlineBlocks$${node.id}`,
+      type: TryCatchTypeEnum.CATCH_INLINE_BLOCKS,
+      originParent: node,
+      parent: mainBlockNode,
+    });
+    addedNodes.push(
+      tryCatchIconNode,
+      mainBlockNode,
+      tryBlockNode,
+      trySlotNode,
+      catchInlineBlocksNode
+    );
+    (tryBlock.blocks || []).forEach((blockData) => {
+      document.addNode(
+        {
+          ...blockData,
+          parent: tryBlockNode,
+        },
+        addedNodes
+      );
+    });
+    catchBlocks.forEach((blockData) => {
+      document.addBlock(node, blockData, addedNodes);
+    });
+    return addedNodes;
+  },
+  /**
+   * 添加 catch 分支
+   * @param node
+   * @param blockData
+   * @param addedNodes
+   */
+  onBlockChildCreate(node, blockData, addedNodes) {
+    const parent = node.document.getNode(`$catchInlineBlocks$${node.id}`);
+    const block = node.document.addNode({
+      id: blockData.id,
+      type: blockData.type || TryCatchTypeEnum.CATCH_BLOCK,
+      originParent: node,
+      parent,
+      data: blockData.data,
+    });
+    // 分支开始节点
+    const blockOrderIcon = node.document.addNode({
+      id: `$blockOrderIcon$${blockData.id}`,
+      type: FlowNodeBaseType.BLOCK_ORDER_ICON,
+      originParent: node,
+      parent: block,
+    });
+    if (blockData.blocks) {
+      node.document.addBlocksAsChildren(block, blockData.blocks || [], addedNodes);
+    }
+    addedNodes?.push(block, blockOrderIcon);
+    return block;
+  },
+  getInputPoint(transform) {
+    const tryCatchIcon = transform.firstChild!;
+    // 使用图标的 inputPoint
+    return tryCatchIcon.inputPoint;
+  },
+  getOutputPoint(transform, layout) {
+    const isVertical = FlowLayoutDefault.isVertical(layout);
+    const tryCatchIcon = transform.firstChild!;
+    if (isVertical) {
+      return {
+        x: tryCatchIcon.inputPoint.x,
+        y: transform.bounds.bottom,
+      };
+    }
+    return {
+      x: transform.bounds.right,
+      y: tryCatchIcon.inputPoint.y,
+    };
+  },
+  /**
+   * tryCatch 子节点配置
+   */
+  extendChildRegistries: [
+    /**
+     * icon 节点
+     */
+    {
+      type: FlowNodeBaseType.BLOCK_ICON,
+      meta: {
+        spacing: TryCatchSpacings.INLINE_SPACING_TOP,
+      },
+      getLabels() {
+        return [];
+      },
+    },
+    MainInlineBlocksRegistry,
+    CatchInlineBlocksRegistry,
+    TryBlockRegistry,
+    CatchBlockRegistry,
+    TrySlotRegistry,
+  ],
+};

package/src/fixed-layout-container-module.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { ContainerModule } from 'inversify';
+import { FlowRendererContribution } from '@flowgram-vue/renderer';
+import { FlowDocumentContribution } from '@flowgram-vue/document';
+import { PlaygroundContribution } from '@flowgram-vue/core';
+import { bindContributions } from '@flowgram-vue/utils';
+
+import { FlowRegisters } from './flow-registers';
+
+export const FixedLayoutContainerModule = new ContainerModule(bind => {
+  bindContributions(bind, FlowRegisters, [
+    FlowDocumentContribution,
+    FlowRendererContribution,
+    PlaygroundContribution,
+  ]);
+});

package/src/flow-registers.ts

@@ -0,0 +1,117 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { injectable } from 'inversify';
+import {
+  FlowLabelsLayer,
+  FlowLinesLayer,
+  FlowNodesContentLayer,
+  FlowNodesTransformLayer,
+  type FlowRendererContribution,
+  type FlowRendererRegistry,
+} from '@flowgram-vue/renderer';
+import {
+  type FlowDocument,
+  type FlowDocumentContribution,
+  FlowNodeRenderData,
+  FlowNodeTransformData,
+  FlowNodeTransitionData,
+} from '@flowgram-vue/document';
+import { type PlaygroundContribution, PlaygroundLayer } from '@flowgram-vue/core';
+
+import { EndRegistry } from './activities/end';
+import {
+  BlockIconRegistry,
+  BlockOrderIconRegistry,
+  BlockRegistry,
+  DynamicSplitRegistry,
+  EmptyRegistry,
+  InlineBlocksRegistry,
+  LoopRegistry,
+  RootRegistry,
+  StartRegistry,
+  StaticSplitRegistry,
+  TryCatchRegistry,
+  SimpleSplitRegistry,
+  BreakRegistry,
+  MultiOuputsRegistry,
+  MultiInputsRegistry,
+  InputRegistry,
+  OuputRegistry,
+  SlotRegistry,
+  SlotBlockRegistry,
+} from './activities';
+
+@injectable()
+export class FlowRegisters
+  implements FlowDocumentContribution, FlowRendererContribution, PlaygroundContribution
+{
+  /**
+   * 注册数据层
+   * @param document
+   */
+  registerDocument(document: FlowDocument) {
+    /**
+     * 注册节点 (ECS - Entity)
+     */
+    document.registerFlowNodes(
+      RootRegistry, // 根节点
+      StartRegistry, // 开始节点
+      DynamicSplitRegistry, // 动态分支（并行、排他）
+      StaticSplitRegistry, // 静态分支（审批）
+      SimpleSplitRegistry, // 简单分支 （不带 orderIcon 节点）
+      BlockRegistry, // 单条 block 注册
+      InlineBlocksRegistry, // 多个 block 组成的 block 列表
+      BlockIconRegistry, // icon 节点，如条件分支的菱形图标
+      BlockOrderIconRegistry, // 带顺序的图标节点，一般为 block 第一个分支节点
+      TryCatchRegistry, // TryCatch
+      EndRegistry, // 结束节点
+      LoopRegistry, // 循环节点
+      EmptyRegistry, // 占位节点
+      BreakRegistry, // 分支断开
+      MultiOuputsRegistry,
+      MultiInputsRegistry,
+      InputRegistry,
+      OuputRegistry,
+      SlotRegistry,
+      SlotBlockRegistry
+    );
+    /**
+     * 注册节点数据 (ECS - Component)
+     */
+    document.registerNodeDatas(
+      FlowNodeRenderData, // 渲染节点相关数据
+      FlowNodeTransitionData, // 线条绘制数据
+      FlowNodeTransformData // 坐标计算数据
+    );
+  }
+
+  /**
+   * 注册渲染层
+   * @param renderer
+   */
+  registerRenderer(renderer: FlowRendererRegistry) {
+    /**
+     * 注册 layer (ECS - System)
+     */
+    renderer.registerLayers(
+      FlowNodesTransformLayer, // 节点位置渲染
+      FlowNodesContentLayer, // 节点内容渲染
+      FlowLinesLayer, // 线条渲染
+      FlowLabelsLayer, // Label 渲染
+      PlaygroundLayer // 画布基础层，提供缩放、手势等能力
+    );
+  }
+
+  /**
+   * 画布开始渲染 (hook)
+   */
+  onReady(): void {}
+
+  /**
+   * 画布销毁 (hook)
+   */
+  onDispose(): void {}
+}