@flowgram-vue/document 0.2.0

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

@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FlowNodeBaseType } from '../../typings';
+import { FlowNodeEntity } from '../../entities';
+import { FlowGroupController } from './flow-group-controller';
+
+export namespace FlowGroupUtils {
+  /** 找到节点所有上级 */
+  const findNodeParents = (node: FlowNodeEntity): FlowNodeEntity[] => {
+    const parents = [];
+    let parent = node.parent;
+    while (parent) {
+      parents.push(parent);
+      parent = parent.parent;
+    }
+    return parents;
+  };
+
+  /** 节点是否处于分组中 */
+  const isNodeInGroup = (node: FlowNodeEntity): boolean => {
+    // 处于分组中
+    if (node?.parent?.flowNodeType === FlowNodeBaseType.GROUP) {
+      return true;
+    }
+    return false;
+  };
+
+  /** 判断节点能否组成分组 */
+  export const validate = (nodes: FlowNodeEntity[]): boolean => {
+    if (!nodes || !Array.isArray(nodes) || nodes.length === 0) {
+      // 参数不合法
+      return false;
+    }
+
+    // 判断是否有分组节点
+    const isGroupRelatedNode = nodes.some((node) => isGroupNode(node));
+    if (isGroupRelatedNode) return false;
+
+    // 判断是否有节点已经处于分组中
+    const hasGroup = nodes.some((node) => node && isNodeInGroup(node));
+    if (hasGroup) return false;
+
+    // 判断是否来自同一个父亲
+    const parent = nodes[0].parent;
+    const isSameParent = nodes.every((node) => node.parent === parent);
+    if (!isSameParent) return false;
+
+    // 判断节点索引是否连续
+    const indexes = nodes.map((node) => node.index).sort((a, b) => a - b);
+    const isIndexContinuous = indexes.every((index, i, arr) => {
+      if (i === 0) {
+        return true;
+      }
+      return index === arr[i - 1] + 1;
+    });
+    if (!isIndexContinuous) return false;
+
+    // 判断节点父亲是否已经在分组中
+    const parents = findNodeParents(nodes[0]);
+    const parentsInGroup = parents.some((parent) => isNodeInGroup(parent));
+    if (parentsInGroup) return false;
+
+    // 参数正确
+    return true;
+  };
+
+  /** 获取节点分组控制 */
+  export const getNodeGroupController = (
+    node?: FlowNodeEntity
+  ): FlowGroupController | undefined => {
+    if (!node) {
+      return;
+    }
+    if (!isNodeInGroup(node)) {
+      return;
+    }
+    const groupNode = node?.parent;
+    return FlowGroupController.create(groupNode);
+  };
+
+  /** 向上递归查找分组递归控制 */
+  export const getNodeRecursionGroupController = (
+    node?: FlowNodeEntity
+  ): FlowGroupController | undefined => {
+    if (!node) {
+      return;
+    }
+    const group = getNodeGroupController(node);
+    if (group) {
+      return group;
+    }
+    if (node.parent) {
+      return getNodeRecursionGroupController(node.parent);
+    }
+    return;
+  };
+
+  /** 是否分组节点 */
+  export const isGroupNode = (group: FlowNodeEntity): boolean =>
+    group.flowNodeType === FlowNodeBaseType.GROUP;
+}

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

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { FlowGroupController } from './flow-group-controller';
+export { FlowGroupService } from './flow-group-service';

package/src/services/flow-operation-base-service.ts

@@ -0,0 +1,333 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject, injectable, postConstruct } from 'inversify';
+import { DisposableCollection, Emitter } from '@flowgram-vue/utils';
+import { EntityManager } from '@flowgram-vue/core';
+
+import {
+  FlowOperation,
+  FlowOperationBaseService,
+  MoveChildNodesOperationValue,
+  OperationType,
+} from '../typings/flow-operation';
+import {
+  AddBlockConfig,
+  AddNodeConfig,
+  AddNodeData,
+  FlowNodeBaseType,
+  FlowNodeEntityOrId,
+  FlowNodeJSON,
+  MoveNodeConfig,
+  OnNodeAddEvent,
+  OnNodeMoveEvent,
+} from '../typings';
+import { FlowDocument } from '../flow-document';
+import { FlowNodeEntity } from '../entities';
+
+/**
+ * 操作服务
+ */
+@injectable()
+export class FlowOperationBaseServiceImpl implements FlowOperationBaseService {
+  @inject(EntityManager)
+  protected entityManager: EntityManager;
+
+  @inject(FlowDocument)
+  protected document: FlowDocument;
+
+  protected onNodeAddEmitter = new Emitter<OnNodeAddEvent>();
+
+  readonly onNodeAdd = this.onNodeAddEmitter.event;
+
+  protected toDispose = new DisposableCollection();
+
+  private onNodeMoveEmitter = new Emitter<OnNodeMoveEvent>();
+
+  readonly onNodeMove = this.onNodeMoveEmitter.event;
+
+  @postConstruct()
+  protected init() {
+    this.toDispose.pushAll([this.onNodeAddEmitter, this.onNodeMoveEmitter]);
+  }
+
+  addNode(nodeJSON: FlowNodeJSON, config: AddNodeConfig = {}): FlowNodeEntity {
+    const { parent, index, hidden } = config;
+    let parentEntity;
+
+    if (parent) {
+      parentEntity = this.toNodeEntity(parent);
+    }
+
+    let register;
+    if (parentEntity) {
+      register = parentEntity.getNodeRegistry();
+    }
+
+    const addJSON = {
+      ...nodeJSON,
+      type: nodeJSON.type || FlowNodeBaseType.BLOCK,
+    };
+
+    const addNodeData: AddNodeData = {
+      ...addJSON,
+      parent: parentEntity,
+      index,
+      hidden,
+    };
+
+    let added;
+    if (parentEntity && register?.addChild) {
+      added = register.addChild(parentEntity, addJSON, {
+        index,
+        hidden,
+      });
+    } else {
+      added = this.document.addNode(addNodeData);
+    }
+
+    this.onNodeAddEmitter.fire({
+      node: added,
+      data: addNodeData,
+    });
+
+    return added;
+  }
+
+  addFromNode(fromNode: FlowNodeEntityOrId, nodeJSON: FlowNodeJSON): FlowNodeEntity {
+    return this.document.addFromNode(fromNode, nodeJSON);
+  }
+
+  deleteNode(node: FlowNodeEntityOrId): void {
+    this.document.removeNode(node);
+  }
+
+  deleteNodes(nodes: FlowNodeEntityOrId[]): void {
+    (nodes || []).forEach((node) => {
+      this.deleteNode(node);
+    });
+  }
+
+  addBlock(
+    target: FlowNodeEntityOrId,
+    blockJSON: FlowNodeJSON,
+    config: AddBlockConfig = {}
+  ): FlowNodeEntity {
+    const { parent, index } = config;
+    return this.document.addBlock(target, blockJSON, undefined, parent, index);
+  }
+
+  moveNode(node: FlowNodeEntityOrId, config: MoveNodeConfig = {}) {
+    const { parent: newParent, index } = config;
+    const entity = this.toNodeEntity(node);
+    const parent = entity?.parent;
+
+    if (!parent) {
+      return;
+    }
+
+    const newParentEntity: FlowNodeEntity | undefined = newParent
+      ? this.toNodeEntity(newParent)
+      : parent;
+
+    if (!newParentEntity) {
+      console.warn('no new parent found', newParent);
+      return;
+    }
+
+    let toIndex = typeof index === 'undefined' ? newParentEntity.collapsedChildren.length : index;
+
+    return this.doMoveNode(entity, newParentEntity, toIndex);
+  }
+
+  /**
+   * 拖拽节点
+   * @param param0
+   * @returns
+   */
+  dragNodes({ dropNode, nodes }: { dropNode: FlowNodeEntity; nodes: FlowNodeEntity[] }) {
+    if (nodes.length === 0) {
+      return;
+    }
+
+    const startNode = nodes[0];
+    const fromParent = startNode.parent;
+    const toParent = dropNode.parent;
+
+    if (!fromParent || !toParent) {
+      return;
+    }
+
+    const fromIndex = fromParent.children.findIndex((child) => child === startNode);
+    const dropIndex = toParent.children.findIndex((child) => child === dropNode);
+
+    let toIndex = dropIndex + 1;
+    // 同父级节点移动，处理脏路径
+    if (fromParent === toParent && fromIndex < dropIndex) {
+      toIndex = toIndex - nodes.length;
+    }
+
+    const value: MoveChildNodesOperationValue = {
+      nodeIds: nodes.map((node) => node.id),
+      fromParentId: fromParent.id,
+      toParentId: toParent.id,
+      fromIndex,
+      toIndex,
+    };
+
+    return this.apply({
+      type: OperationType.moveChildNodes,
+      value,
+    });
+  }
+
+  /**
+   * 执行操作
+   * @param operation 可序列化的操作
+   * @returns 操作返回
+   */
+  apply(operation: FlowOperation): any {
+    const document = this.document;
+    switch (operation.type) {
+      case OperationType.addFromNode:
+        return document.addFromNode(operation.value.fromId, operation.value.data);
+      case OperationType.deleteFromNode:
+        return document.getNode(operation.value?.data?.id)?.dispose();
+      case OperationType.addBlock: {
+        let parent;
+
+        if (operation.value.parentId) {
+          parent = document.getNode(operation.value.parentId);
+        }
+        return document.addBlock(
+          operation.value.targetId,
+          operation.value.blockData,
+          undefined,
+          parent,
+          operation.value.index
+        );
+      }
+      case OperationType.deleteBlock: {
+        const entity = document.getNode(operation.value?.blockData.id);
+        return entity?.dispose();
+      }
+      case OperationType.createGroup: {
+        const groupNode = document.addFromNode(operation.value.targetId, {
+          id: operation.value.groupId,
+          type: FlowNodeBaseType.GROUP,
+        });
+        document.moveNodes({
+          dropNodeId: operation.value.groupId,
+          sortNodeIds: operation.value.nodeIds,
+          inside: true,
+        });
+        return groupNode;
+      }
+      case OperationType.ungroup: {
+        document.moveNodes({
+          dropNodeId: operation.value.groupId,
+          sortNodeIds: operation.value.nodeIds,
+        });
+        return document.getNode(operation.value.groupId)?.dispose();
+      }
+      case OperationType.moveNodes: {
+        return document.moveNodes({
+          dropNodeId: operation.value.toId,
+          sortNodeIds: operation.value.nodeIds,
+        });
+      }
+      case OperationType.moveBlock: {
+        return document.moveChildNodes({
+          ...operation.value,
+          nodeIds: [operation.value.nodeId],
+        });
+      }
+      case OperationType.addNodes: {
+        let fromId = operation.value.fromId;
+        (operation.value.nodes || []).forEach((node) => {
+          const added = document.addFromNode(fromId, node);
+          fromId = added.id;
+        });
+        break;
+      }
+      case OperationType.deleteNodes: {
+        (operation.value.nodes || []).forEach((node) => {
+          const entity = document.getNode(node.id);
+          entity?.dispose();
+        });
+        break;
+      }
+      case OperationType.addChildNode: {
+        return document.addNode({
+          ...operation.value.data,
+          parent: operation.value.parentId ? document.getNode(operation.value.parentId) : undefined,
+          originParent: operation.value.originParentId
+            ? document.getNode(operation.value.originParentId)
+            : undefined,
+          index: operation.value.index,
+          hidden: operation.value.hidden,
+        });
+      }
+      case OperationType.deleteChildNode:
+        return document.getNode(operation.value.data.id)?.dispose();
+      case OperationType.moveChildNodes:
+        return document.moveChildNodes(operation.value);
+      default:
+        throw new Error(`unknown operation type`);
+    }
+  }
+
+  /**
+   * 事务执行
+   * @param transaction
+   */
+  transact(transaction: () => void) {
+    transaction();
+  }
+
+  dispose() {
+    this.toDispose.dispose();
+  }
+
+  protected toId(node: FlowNodeEntityOrId): string {
+    return typeof node === 'string' ? node : node.id;
+  }
+
+  protected toNodeEntity(node: FlowNodeEntityOrId): FlowNodeEntity | undefined {
+    return typeof node === 'string' ? this.document.getNode(node) : node;
+  }
+
+  protected getNodeIndex(node: FlowNodeEntityOrId): number {
+    const entity = this.toNodeEntity(node);
+    const parent = entity?.parent;
+
+    if (!parent) {
+      return -1;
+    }
+
+    return parent.children.findIndex((child) => child === entity);
+  }
+
+  protected doMoveNode(node: FlowNodeEntity, newParent: FlowNodeEntity, index: number) {
+    if (!node.parent) {
+      throw new Error('root node cannot move');
+    }
+
+    const event: OnNodeMoveEvent = {
+      node,
+      fromParent: node.parent,
+      toParent: newParent,
+      fromIndex: this.getNodeIndex(node),
+      toIndex: index,
+    };
+
+    this.document.moveChildNodes({
+      nodeIds: [this.toId(node)],
+      toParentId: this.toId(newParent),
+      toIndex: index,
+    });
+    this.onNodeMoveEmitter.fire(event);
+  }
+}

package/src/services/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { FlowDragService } from './flow-drag-service';
+export { FlowOperationBaseServiceImpl } from './flow-operation-base-service';
+export { FlowGroupService, FlowGroupController } from './flow-group-service';

package/src/typings/flow-group.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export interface FlowGroupJSON {
+  nodeIDs: string[];
+}

package/src/typings/flow-layout.ts

@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IPoint, PaddingSchema, ScrollSchema, SizeSchema } from '@flowgram-vue/utils';
+
+import { type FlowNodeEntity } from '../entities';
+import { type FlowNodeTransformData } from '../datas';
+
+export const FlowLayout = Symbol('FlowLayout');
+export const FlowLayoutContribution = Symbol('FlowLayoutContribution');
+
+export enum FlowLayoutDefault {
+  VERTICAL_FIXED_LAYOUT = 'vertical-fixed-layout', // 垂直固定布局
+  HORIZONTAL_FIXED_LAYOUT = 'horizontal-fixed-layout', // 水平固定布局
+}
+
+export namespace FlowLayoutDefault {
+  export function isVertical(layout: FlowLayout): boolean {
+    return layout.name === FlowLayoutDefault.VERTICAL_FIXED_LAYOUT;
+  }
+}
+
+export interface FlowLayoutContribution {
+  onAfterUpdateLocalTransform?: (transform: FlowNodeTransformData, layout: FlowLayout) => void;
+}
+
+/**
+ * 流程布局算法
+ */
+export interface FlowLayout {
+  /**
+   * 布局名字
+   */
+  name: string;
+  /**
+   * 布局切换时候触发
+   */
+  reload?(): void;
+  /**
+   * 更新布局
+   */
+  update(): void;
+
+  /**
+   * 获取节点的 padding 数据
+   * @param node
+   */
+  getPadding(node: FlowNodeEntity): PaddingSchema;
+
+  /**
+   * 获取默认滚动 目前用在 scroll-limit-layer
+   * @param contentSize
+   */
+  getInitScroll(contentSize: SizeSchema): ScrollSchema;
+
+  /**
+   * 获取默认输入点
+   */
+  getDefaultInputPoint(node: FlowNodeEntity): IPoint;
+
+  /**
+   * 获取默认输出点
+   */
+  getDefaultOutputPoint(node: FlowNodeEntity): IPoint;
+
+  /**
+   * 获取默认远点
+   */
+  getDefaultNodeOrigin(): IPoint;
+}