@flowgram-vue/document 0.2.0

package/src/typings/flow-transition.ts

@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type IPoint } from '@flowgram-vue/utils';
+
+import { type FlowNodeEntity } from '../entities';
+import { type LABEL_SIDE_TYPE } from './flow-node-register';
+
+// 内置几种线条
+export enum FlowTransitionLineEnum {
+  STRAIGHT_LINE, // 直线
+  DIVERGE_LINE, // 分支线 (一种 ROUNDED_LINE)
+  MERGE_LINE, // 汇聚线 (一种 ROUNDED_LINE)
+  ROUNDED_LINE, // 自定义圆角转弯线
+  CUSTOM_LINE, // 自定义，用于处理循环节点等自定义线条
+  DRAGGING_LINE, // 分支拖拽场景渲染的线条
+}
+
+export interface Vertex extends IPoint {
+  radiusX?: number;
+  radiusY?: number;
+  // 圆弧出入点位置移动
+  moveX?: number;
+  moveY?: number;
+  /**
+   * Strategy for handling arc curvature when space is insufficient, defaults to compress
+   */
+  radiusOverflow?: 'compress' | 'truncate';
+}
+
+export interface FlowTransitionLine {
+  type: FlowTransitionLineEnum;
+  from: IPoint;
+  to: IPoint;
+  vertices?: Vertex[]; // 自定义圆角转弯线需要转弯的拐点
+  arrow?: boolean; // 是否有箭头
+  renderKey?: string; // 只有自定义线条需要
+  isHorizontal?: boolean; // 是否为水平布局
+  isDraggingLine?: boolean; // 是否是拖拽线条
+  activated?: boolean; // 是否激活态
+  side?: LABEL_SIDE_TYPE; // 区分是否分支前缀线条
+  style?: Record<string, string | number | undefined>;
+  lineId?: string;
+}
+
+// 内置几种标签
+export enum FlowTransitionLabelEnum {
+  ADDER_LABEL, // 添加按钮
+  TEXT_LABEL, // 文本标签
+  COLLAPSE_LABEL, // 复合节点收起的展开标签
+  COLLAPSE_ADDER_LABEL, // 复合节点收起 + 加号复合标签
+  CUSTOM_LABEL, // 自定义，用于处理循环节点等自定义标签
+  BRANCH_DRAGGING_LABEL, // 分支拖拽场景下的 label
+}
+
+export interface FlowTransitionLabel {
+  type: FlowTransitionLabelEnum;
+  // type === 'CUSTOM_LABEL'需要配置的数据
+  renderKey?: string;
+  offset: IPoint; // 位置
+  width?: number; // 宽度
+  rotate?: string; // 循环, 如 '60deg'
+  /**
+   * Anchor point for positioning, relative to the label's bounding box
+   * 重心偏移量，相对于标签边界框
+   *
+   * Format: [x, y] / 格式：[x, y]
+   * Default Value: [0.5, 0.5] indicates center / 默认值：[0.5, 0.5] 表示居中
+   */
+  origin?: [number, number];
+  props?: Record<string, any>;
+  labelId?: string;
+}
+
+export interface AdderProps {
+  node: FlowNodeEntity; // 实际挂载 label 的节点
+  from: FlowNodeEntity; // 边起始点在哪个节点
+  to: FlowNodeEntity; // 边终点在哪个节点
+  renderTo: FlowNodeEntity; // 实际渲染（renderTree）边终点在哪个节点
+  [key: string]: any;
+}
+
+export interface CollapseProps {
+  node: FlowNodeEntity; // 实际挂载 label 的节点
+  collapseNode: FlowNodeEntity; // 要展开收起的节点，默认为 node
+  activateNode?: FlowNodeEntity; // 设置获取 label 激活状态的节点
+  forceVisible?: boolean; // 是否强制显示
+  [key: string]: any;
+}
+
+export interface CustomLabelProps {
+  node: FlowNodeEntity; // 实际挂载 label 的节点
+  [key: string]: any;
+}
+
+export interface CollapseAdderProps extends AdderProps, CollapseProps {
+  [key: string]: any;
+}
+
+export interface DragNodeProps {
+  node: FlowNodeEntity; // 实际挂载 label 的节点
+}

package/src/typings/flow.ts

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FlowNodeEntity } from '../entities';
+import { type FlowNodeMeta } from './flow-node-register';
+
+export type FlowNodeType = string | number;
+
+/**
+ * Flow node json data
+ */
+export interface FlowNodeJSON {
+  id: string;
+  type?: FlowNodeBaseType | FlowNodeSplitType | FlowNodeType; // 如果缺省 则 为 block
+  data?: Record<string, any>; // 节点额外扩展的内容
+  meta?: FlowNodeMeta;
+  blocks?: FlowNodeJSON[]; // 子节点
+}
+
+export type FlowDocumentJSON = {
+  nodes: FlowNodeJSON[];
+};
+
+export enum FlowNodeBaseType {
+  START = 'start', // 开始节点
+  DEFAULT = 'default', // 默认节点类型
+  ROOT = 'root', // 根节点
+  EMPTY = 'empty', // 空节点，宽和高为 0
+  INLINE_BLOCKS = 'inlineBlocks', // 所有块合并为 InlineBlocks
+  BLOCK_ICON = 'blockIcon', // 图标节点，如条件分支的头部的 菱形图标
+  BLOCK = 'block', // 块节点
+  BLOCK_ORDER_ICON = 'blockOrderIcon', // 带顺序的图标节点，一般为 block 第一个分支节点
+  GROUP = 'group', // 分组节点
+  END = 'end', // 结束节点
+  BREAK = 'break', // 分支结束
+  CONDITION = 'condition', // 可以连接多条线的条件判断节点，目前只支持横向布局
+  SUB_CANVAS = 'subCanvas', // 自由布局子画布
+  MULTI_INPUTS = 'multiInputs', // 多输入
+  MULTI_OUTPUTS = 'multiOutputs', // 多输出
+  INPUT = 'input', // 输入节点
+  OUTPUT = 'output', // 输出节点
+  SLOT = 'slot', // 插槽节点
+  SLOT_BLOCK = 'slotBlock', // 插槽子节点
+}
+
+export enum FlowNodeSplitType {
+  SIMPLE_SPLIT = 'simpleSplit', // 无 BlockOrderIcon
+  DYNAMIC_SPLIT = 'dynamicSplit', // 动态分支
+  STATIC_SPLIT = 'staticSplit', // 静态分支
+}
+
+export enum FlowDocumentConfigEnum {
+  // 结束节点拖拽分支逻辑
+  END_NODES_REFINE_BRANCH = 'END_NODES_REFINE_BRANCH',
+}
+
+export const FLOW_DEFAULT_HIDDEN_TYPES: FlowNodeType[] = [
+  FlowNodeBaseType.ROOT,
+  FlowNodeBaseType.INLINE_BLOCKS,
+  FlowNodeBaseType.BLOCK,
+];
+
+export type AddNodeData = FlowNodeJSON & {
+  originParent?: FlowNodeEntity;
+  parent?: FlowNodeEntity;
+  hidden?: boolean;
+  index?: number;
+};

package/src/typings/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './flow';
+export * from './flow-layout';
+export * from './flow-transition';
+export * from './flow-node-register';
+export * from './flow-operation';
+export * from './flow-group';

package/src/utils/get-default-spacing.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { DEFAULT_SPACING } from '../typings';
+import { FlowDocumentOptions } from '../flow-document-options';
+import { FlowNodeEntity } from '../entities/flow-node-entity';
+
+/**
+ *
+ * @param node 节点 entity
+ * @param key 从 DocumentOptions 里获取 constants 的 key
+ * @param defaultSpacing 默认从 DEFAULT_SPACING 获取 spacing，也可以外部传入默认值
+ * @returns
+ */
+export const getDefaultSpacing = (node: FlowNodeEntity, key: string, defaultSpacing?: number) => {
+  const flowDocumentOptions = node.getService<FlowDocumentOptions>(FlowDocumentOptions);
+  const spacing = flowDocumentOptions?.constants?.[key] || defaultSpacing || DEFAULT_SPACING[key];
+  return spacing;
+};

package/src/utils/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { getDefaultSpacing } from './get-default-spacing';