@flowgram-vue/document 0.2.0

package/src/layout/vertical-fixed-layout.ts

@@ -0,0 +1,198 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { injectable, inject, multiInject, optional } from 'inversify';
+import { IPoint, OriginSchema, PaddingSchema, ScrollSchema, SizeSchema } from '@flowgram-vue/utils';
+
+import { type FlowLayout, FlowLayoutDefault, FlowLayoutContribution } from '../typings';
+import { type FlowDocument, FlowDocumentProvider } from '../flow-document';
+import { FlowNodeEntity } from '../entities';
+import { FlowNodeTransformData } from '../datas';
+
+// 开始节点距离上边 36 像素
+const DEFAULT_SCROLL = -36;
+
+/**
+ * 用于描述节点的结构特征
+ */
+interface FlowNodeTransformStructData {
+  childrenLength: number;
+  index: number;
+}
+/**
+ * 用于描述节点的结构特征
+ */
+interface FlowNodeTransformStructData {
+  childrenLength: number;
+  index: number;
+}
+
+function isStructDataEqual(
+  struct1: FlowNodeTransformStructData,
+  struct2: FlowNodeTransformStructData
+): boolean {
+  return struct1.childrenLength === struct2.childrenLength && struct1.index === struct2.index;
+}
+
+@injectable()
+export class VerticalFixedLayout implements FlowLayout {
+  name = FlowLayoutDefault.VERTICAL_FIXED_LAYOUT;
+
+  protected structDataMap = new WeakMap<FlowNodeEntity, FlowNodeTransformStructData>();
+
+  @inject(FlowDocumentProvider) protected documentProvider: FlowDocumentProvider;
+
+  @multiInject(FlowLayoutContribution)
+  @optional()
+  contribs?: FlowLayoutContribution[];
+
+  get document(): FlowDocument {
+    return this.documentProvider();
+  }
+
+  reload() {
+    this.structDataMap = new WeakMap();
+  }
+
+  /**
+   * 更新布局
+   */
+  update(): void {
+    this.updateLocalTransform(this.document.root);
+  }
+
+  /**
+   * 更新节点的偏移
+   * @param node
+   * @param forceChange
+   */
+  updateLocalTransform(node: FlowNodeEntity, forceChange = false): boolean {
+    const { children, parent, isInlineBlock } = node;
+
+    const transform = node.getData<FlowNodeTransformData>(FlowNodeTransformData);
+    const { getDelta, getOrigin } = node.getNodeRegistry();
+    const lastStructData = this.structDataMap.get(node) || {
+      childrenLength: 0,
+      index: -1,
+    };
+    // 重新计算都要清空 bounds 缓存，因为 bounds 依赖所有
+    node.clearMemoGlobal();
+    let localDirty = transform.localDirty || forceChange;
+    const newStructData: FlowNodeTransformStructData = {
+      index: node.index,
+      childrenLength: node.children.length,
+    };
+    // index 变化也要重新计算
+    if (!isStructDataEqual(lastStructData, newStructData)) {
+      localDirty = true;
+      this.structDataMap.set(node, newStructData);
+    }
+    // Step1: 计算子节点
+    let siblingDirty = false;
+    if (children.length > 0) {
+      for (const child of children) {
+        const childDirty = this.updateLocalTransform(child, siblingDirty);
+        // 子节点变更则父节点跟着变更
+        if (childDirty) {
+          siblingDirty = true;
+          localDirty = true;
+        }
+      }
+    }
+    // 如果没有变更则不执行
+    if (!localDirty) return false;
+    // Step2: 计算节点的 position 偏移量
+    node.clearMemoLocal();
+    transform.transform.update({
+      origin: getOrigin ? getOrigin(transform, this) : this.getDefaultNodeOrigin(),
+    });
+    const preTransform = transform.pre;
+    const delta = getDelta?.(transform, this) || { x: 0, y: 0 };
+    const inlineSpacingPre =
+      isInlineBlock && transform.parent?.inlineSpacingPre ? transform.parent?.inlineSpacingPre : 0;
+    const fromParentDelta = parent?.getNodeRegistry().getChildDelta?.(transform, this) || {
+      x: 0,
+      y: 0,
+    };
+    delta.x += fromParentDelta.x;
+    delta.y += fromParentDelta.y;
+
+    // Step3：根据上一个节点的相对偏移算当前偏移
+    const position = { x: delta.x, y: delta.y };
+    // 垂直布局
+    if (isInlineBlock) {
+      position.y += inlineSpacingPre;
+    } else {
+      position.y += preTransform?.localBounds.bottom || 0;
+      position.y += preTransform?.spacing || 0;
+    }
+
+    transform.transform.update({
+      size: transform.data.size,
+      position,
+    });
+
+    // 布局结束后可执行额外逻辑
+    this.onAfterUpdateLocalTransform(transform);
+
+    transform.localDirty = false;
+
+    return true;
+  }
+
+  onAfterUpdateLocalTransform(transform: FlowNodeTransformData) {
+    // 执行 register 上的 onAfterUpdateLocalTransform
+    const { onAfterUpdateLocalTransform } = transform.entity.getNodeRegistry();
+    onAfterUpdateLocalTransform?.(transform, this);
+
+    // 执行 contribution 上的 onAfterUpdateLocalTransform
+    this.contribs?.forEach((_contrib) => {
+      _contrib?.onAfterUpdateLocalTransform?.(transform, this);
+    });
+  }
+
+  getNodeTransform(node: FlowNodeEntity): FlowNodeTransformData {
+    return node.getData(FlowNodeTransformData)!;
+  }
+
+  getPadding(node: FlowNodeEntity): PaddingSchema {
+    const { inlineSpacingPre, inlineSpacingAfter, padding } = node.getNodeMeta();
+    const transform = this.getNodeTransform(node);
+    if (padding) {
+      return typeof padding === 'function' ? padding(transform) : padding;
+    }
+
+    const paddingPre =
+      typeof inlineSpacingPre === 'function' ? inlineSpacingPre(transform) : inlineSpacingPre;
+    const paddingAfter =
+      typeof inlineSpacingAfter === 'function' ? inlineSpacingAfter(transform) : inlineSpacingAfter;
+
+    return {
+      left: 0,
+      top: paddingPre,
+      right: 0,
+      bottom: paddingAfter,
+    };
+  }
+
+  getInitScroll(contentSize: SizeSchema): ScrollSchema {
+    return {
+      scrollX: -contentSize.width / 2,
+      scrollY: DEFAULT_SCROLL,
+    };
+  }
+
+  getDefaultInputPoint(node: FlowNodeEntity): IPoint {
+    return this.getNodeTransform(node).bounds.topCenter;
+  }
+
+  getDefaultOutputPoint(node: FlowNodeEntity): IPoint {
+    return this.getNodeTransform(node).bounds.bottomCenter;
+  }
+
+  getDefaultNodeOrigin(): OriginSchema {
+    return { x: 0.5, y: 0 };
+  }
+}

package/src/services/flow-drag-service.ts

@@ -0,0 +1,211 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject, injectable } from 'inversify';
+import { Emitter } from '@flowgram-vue/utils';
+import { EntityManager } from '@flowgram-vue/core';
+
+import { FlowGroupUtils } from './flow-group-service/flow-group-utils';
+import {
+  FlowNodeBaseType,
+  FlowNodeJSON,
+  FlowOperationBaseService,
+  LABEL_SIDE_TYPE,
+} from '../typings';
+import { FlowDocument } from '../flow-document';
+import { FlowNodeEntity, FlowRendererStateEntity } from '../entities';
+
+/**
+ * 拖拽相关操作
+ * 外部实现抽象类
+ */
+@injectable()
+export class FlowDragService {
+  @inject(FlowDocument)
+  protected document: FlowDocument;
+
+  @inject(FlowOperationBaseService)
+  protected operationService: FlowOperationBaseService;
+
+  @inject(EntityManager)
+  protected entityManager: EntityManager;
+
+  protected onDropEmitter = new Emitter<{
+    dropNode: FlowNodeEntity;
+    dragNodes: FlowNodeEntity[];
+    dragJSON?: FlowNodeJSON;
+  }>();
+
+  readonly onDrop = this.onDropEmitter.event;
+
+  get renderState(): FlowRendererStateEntity {
+    return this.document.renderState;
+  }
+
+  // 拖拽所有节点中的首个节点
+  get dragStartNode(): FlowNodeEntity {
+    return this.renderState.getDragStartEntity()!;
+  }
+
+  // 拖拽的所有节点
+  get dragNodes(): FlowNodeEntity[] {
+    return this.renderState.getDragEntities();
+  }
+
+  // 放置的区域
+  get dropNodeId(): string | undefined {
+    return this.renderState.getNodeDroppingId();
+  }
+
+  // 是否在拖拽分支
+  get isDragBranch(): boolean {
+    return this.renderState.isBranch || this.dragStartNode?.isInlineBlock;
+  }
+
+  // 拖拽的所有节点及其自节点
+  get nodeDragIdsWithChildren(): string[] {
+    return this.renderState.config.nodeDragIdsWithChildren || [];
+  }
+
+  get dragging(): boolean {
+    return !!this.renderState.dragging;
+  }
+
+  get labelSide(): LABEL_SIDE_TYPE | undefined {
+    return this.renderState.config.dragLabelSide;
+  }
+
+  /**
+   * 放置到目标分支
+   */
+  dropBranch(): void {
+    this.dropNode();
+  }
+
+  /**
+   * 移动并且创建节点
+   * Move and create node
+   */
+  async dropCreateNode(
+    json: FlowNodeJSON,
+    onCreateNode?: (json: FlowNodeJSON, dropEntity: FlowNodeEntity) => Promise<FlowNodeEntity>
+  ) {
+    const dropEntity = this.document.getNode(this.dropNodeId!);
+
+    if (!dropEntity) {
+      return;
+    }
+
+    if (json) {
+      const dragNodes = await onCreateNode?.(json, dropEntity);
+      this.onDropEmitter.fire({
+        dropNode: dropEntity,
+        dragNodes: dragNodes ? [dragNodes] : [],
+        dragJSON: json,
+      });
+    }
+  }
+
+  /**
+   * 移动到目标节点
+   */
+  dropNode(): void {
+    const dropEntity = this.document.getNode(this.dropNodeId!);
+    if (!dropEntity) {
+      return;
+    }
+
+    const sortNodes: FlowNodeEntity[] = [];
+    let curr: FlowNodeEntity | undefined = this.dragStartNode;
+    while (curr && this.dragNodes.includes(curr)) {
+      sortNodes.push(curr);
+      curr = curr.next;
+    }
+
+    this.operationService.dragNodes({
+      dropNode: dropEntity,
+      nodes: sortNodes,
+    });
+
+    if (sortNodes.length > 0) {
+      this.onDropEmitter.fire({
+        dropNode: dropEntity,
+        dragNodes: sortNodes,
+      });
+    }
+  }
+
+  /**
+   * 拖拽是否可以释放在该节点后面
+   */
+  isDroppableNode(node: FlowNodeEntity) {
+    // 没有拖拽节点时，所有节点都不可 drop
+    if (!this.dragging || this.isDragBranch) {
+      return false;
+    }
+
+    // 当前节点 & 下一个节点是否在拖拽区域
+    if (
+      this.nodeDragIdsWithChildren.includes(node.id) ||
+      (node.next && this.nodeDragIdsWithChildren.includes(node.next.id))
+    ) {
+      return false;
+    }
+
+    if (node.isInlineBlocks || node.isInlineBlock) {
+      return false;
+    }
+
+    // 分组节点不能嵌套
+    const hasGroupNode = this.dragNodes.some(
+      (node) => node.flowNodeType === FlowNodeBaseType.GROUP
+    );
+    if (hasGroupNode) {
+      const group = FlowGroupUtils.getNodeRecursionGroupController(node);
+      if (group) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  /**
+   * 拖拽分支是否可以释放在该分支
+   * @param node 拖拽的分支节点
+   * @param side 分支的前面还是后面
+   */
+  isDroppableBranch(node: FlowNodeEntity, side: LABEL_SIDE_TYPE = LABEL_SIDE_TYPE.NORMAL_BRANCH) {
+    // 外部添加拖拽标识，默认所有分支均可添加
+    if (this.renderState.isBranch) {
+      return true;
+    }
+    // 拖拽的是分支
+    if (this.isDragBranch) {
+      if (
+        // 拖拽到分支
+        !node.isInlineBlock ||
+        // 只能在同一分支条件下
+        node.parent !== this.dragStartNode.parent ||
+        // 自己不能拖拽给自己
+        node === this.dragStartNode
+      ) {
+        return false;
+      }
+
+      // 分支的下一个节点不是当前要拖拽的节点
+      if (side === LABEL_SIDE_TYPE.NORMAL_BRANCH && node.next !== this.dragStartNode) {
+        return true;
+      }
+
+      // 分支的前一个节点不是当前要拖拽的节点
+      if (side === LABEL_SIDE_TYPE.PRE_BRANCH && node.pre !== this.dragStartNode) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+}

package/src/services/flow-group-service/flow-group-controller.ts

@@ -0,0 +1,120 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Rectangle } from '@flowgram-vue/utils';
+
+import { FlowNodeEntity } from '../../entities';
+import { FlowNodeRenderData, FlowNodeTransformData } from '../../datas';
+import { FlowGroupUtils } from './flow-group-utils';
+
+/** 分组控制器 */
+export class FlowGroupController {
+  private constructor(public readonly groupNode: FlowNodeEntity) {}
+
+  public get nodes(): FlowNodeEntity[] {
+    return this.groupNode.collapsedChildren || [];
+  }
+
+  public get collapsed(): boolean {
+    const groupTransformData = this.groupNode.getData<FlowNodeTransformData>(FlowNodeTransformData);
+    return groupTransformData.collapsed;
+  }
+
+  public collapse(): void {
+    this.collapsed = true;
+  }
+
+  public expand(): void {
+    this.collapsed = false;
+  }
+
+  /** 获取分组外围的最大边框 */
+  public get bounds(): Rectangle {
+    const groupNodeBounds =
+      this.groupNode.getData<FlowNodeTransformData>(FlowNodeTransformData).bounds;
+    return groupNodeBounds;
+  }
+
+  /** 是否是开始节点 */
+  public isStartNode(node?: FlowNodeEntity): boolean {
+    if (!node) {
+      return false;
+    }
+    const nodes = this.nodes;
+    if (!nodes[0]) {
+      return false;
+    }
+    return node.id === nodes[0].id;
+  }
+
+  /** 是否是结束节点 */
+  public isEndNode(node?: FlowNodeEntity): boolean {
+    if (!node) {
+      return false;
+    }
+    const nodes = this.nodes;
+    if (!nodes[nodes.length - 1]) {
+      return false;
+    }
+    return node.id === nodes[nodes.length - 1].id;
+  }
+
+  public set note(note: string) {
+    this.groupNode.getNodeMeta().note = note;
+  }
+
+  public get note(): string {
+    return this.groupNode.getNodeMeta().note || '';
+  }
+
+  public set noteHeight(height: number) {
+    this.groupNode.getNodeMeta().noteHeight = height;
+  }
+
+  public get noteHeight(): number {
+    return this.groupNode.getNodeMeta().noteHeight || 0;
+  }
+
+  public get positionConfig(): Record<string, number> {
+    return this.groupNode.getNodeMeta().positionConfig;
+  }
+
+  private set collapsed(collapsed: boolean) {
+    const groupTransformData = this.groupNode.getData<FlowNodeTransformData>(FlowNodeTransformData);
+    groupTransformData.collapsed = collapsed;
+    groupTransformData.localDirty = true;
+    if (groupTransformData.parent) groupTransformData.parent.localDirty = true;
+    if (groupTransformData.parent?.firstChild)
+      groupTransformData.parent.firstChild.localDirty = true;
+  }
+
+  public set hovered(hovered: boolean) {
+    const groupRenderData = this.groupNode.getData<FlowNodeRenderData>(FlowNodeRenderData);
+    if (hovered) {
+      groupRenderData.toggleMouseEnter();
+    } else {
+      groupRenderData.toggleMouseLeave();
+    }
+    if (groupRenderData.hovered === hovered) {
+      return;
+    }
+    groupRenderData.hovered = hovered;
+  }
+
+  public get hovered(): boolean {
+    const groupRenderData = this.groupNode.getData<FlowNodeRenderData>(FlowNodeRenderData);
+    return groupRenderData.hovered;
+  }
+
+  public static create(groupNode?: FlowNodeEntity): FlowGroupController | undefined {
+    if (!groupNode) {
+      return;
+    }
+    if (!FlowGroupUtils.isGroupNode(groupNode)) {
+      return;
+    }
+    return new FlowGroupController(groupNode);
+  }
+}

package/src/services/flow-group-service/flow-group-service.ts

@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { nanoid } from 'nanoid';
+import { inject, injectable } from 'inversify';
+import { EntityManager } from '@flowgram-vue/core';
+
+import { FlowNodeBaseType, FlowOperationBaseService, OperationType } from '../../typings';
+import { FlowNodeEntity } from '../../entities';
+import { FlowGroupUtils } from './flow-group-utils';
+import { FlowGroupController } from './flow-group-controller';
+
+@injectable()
+/** 分组服务 */
+export class FlowGroupService {
+  @inject(EntityManager) public readonly entityManager: EntityManager;
+
+  @inject(FlowOperationBaseService)
+  public readonly operationService: FlowOperationBaseService;
+
+  /** 创建分组节点 */
+  public createGroup(nodes: FlowNodeEntity[]): FlowNodeEntity | undefined {
+    if (!nodes || !Array.isArray(nodes) || nodes.length === 0) {
+      return;
+    }
+    if (!FlowGroupUtils.validate(nodes)) {
+      return;
+    }
+    const sortedNodes: FlowNodeEntity[] = nodes.sort((a, b) => a.index - b.index);
+    const fromNode = sortedNodes[0];
+    const groupId = `group_${nanoid(5)}`;
+    this.operationService.apply({
+      type: OperationType.createGroup,
+      value: {
+        targetId: fromNode.id,
+        groupId,
+        nodeIds: nodes.map((node) => node.id),
+      },
+    });
+    const groupNode = this.entityManager.getEntityById<FlowNodeEntity>(groupId);
+    if (!groupNode) {
+      return;
+    }
+    const group = this.groupController(groupNode);
+    if (!group) {
+      return;
+    }
+    group.expand();
+    return groupNode;
+  }
+
+  /** 删除分组 */
+  public deleteGroup(groupNode: FlowNodeEntity): void {
+    const json = groupNode.toJSON();
+    if (!groupNode.pre || !json) {
+      return;
+    }
+    this.operationService.apply({
+      type: OperationType.deleteNodes,
+      value: {
+        fromId: groupNode.pre.id,
+        nodes: [json],
+      },
+    });
+  }
+
+  /** 取消分组 */
+  public ungroup(groupNode: FlowNodeEntity): void {
+    const group = this.groupController(groupNode);
+    if (!group) {
+      return;
+    }
+    const nodes = group.nodes;
+    if (!groupNode.pre) {
+      return;
+    }
+    group.collapse();
+    this.operationService.apply({
+      type: OperationType.ungroup,
+      value: {
+        groupId: groupNode.id,
+        targetId: groupNode.pre.id,
+        nodeIds: nodes.map((node) => node.id),
+      },
+    });
+  }
+
+  /** 返回所有分组节点 */
+  public getAllGroups(): FlowGroupController[] {
+    const allNodes = this.entityManager.getEntities<FlowNodeEntity>(FlowNodeEntity);
+    const groupNodes = allNodes.filter((node) => node.flowNodeType === FlowNodeBaseType.GROUP);
+    return groupNodes
+      .map((node) => this.groupController(node))
+      .filter(Boolean) as FlowGroupController[];
+  }
+
+  /** 获取分组控制器*/
+  public groupController(group: FlowNodeEntity): FlowGroupController | undefined {
+    return FlowGroupController.create(group);
+  }
+
+  public static validate(nodes: FlowNodeEntity[]): boolean {
+    return FlowGroupUtils.validate(nodes);
+  }
+}