@flowgram-vue/free-layout-core 0.2.0

package/src/entity-datas/workflow-node-ports-data.ts

@@ -0,0 +1,253 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { isEqual } from 'lodash-es';
+import { FlowNodeRenderData } from '@flowgram-vue/document';
+import { EntityData, SizeData } from '@flowgram-vue/core';
+
+import { type WorkflowPortType, getPortEntityId } from '../utils/statics';
+import { type LinePoint, LinePointLocation, type WorkflowNodeMeta } from '../typings';
+import { WorkflowPortEntity } from '../entities/workflow-port-entity';
+import { type WorkflowNodeEntity, type WorkflowPort, type WorkflowPorts } from '../entities';
+
+/**
+ * 节点的点位信息
+ * portsData 只监听点位的数目和类型，不监听点位的 position 变化
+ */
+export class WorkflowNodePortsData extends EntityData {
+  public static readonly type = 'WorkflowNodePortsData';
+
+  public readonly entity: WorkflowNodeEntity;
+
+  /** 静态的 ports 数据 */
+  protected _staticPorts: WorkflowPorts = [];
+
+  /** 存储 port 实体的 id，用于判断 port 是否存在 */
+  protected _portIDSet = new Set<string>();
+
+  /** 上一次的 ports 数据，用于判断 ports 是否发生变化 */
+  protected _prePorts: WorkflowPorts;
+
+  constructor(entity: WorkflowNodeEntity) {
+    super(entity);
+    this.entity = entity;
+    const meta = entity.getNodeMeta<WorkflowNodeMeta>();
+    // 动态模式默认为空, 非动态模式默认左右两个点位
+    const defaultPorts: WorkflowPorts = meta.useDynamicPort
+      ? []
+      : [{ type: 'input' }, { type: 'output' }];
+    this._staticPorts = meta.defaultPorts?.slice() || defaultPorts;
+    this.updatePorts(this._staticPorts);
+    if (meta.useDynamicPort) {
+      this.toDispose.push(
+        // 只需要监听节点的大小，因为算的是相对位置
+        entity.getData!(SizeData)!.onDataChange(() => {
+          // 有可能节点被销毁了
+          if (entity.getData!(SizeData).width && entity.getData!(SizeData).height) {
+            this.updateDynamicPorts();
+          }
+        })
+      );
+    }
+    this.onDispose(() => {
+      this.allPorts.forEach((port) => port.dispose());
+    });
+  }
+
+  public getDefaultData(): any {
+    return {};
+  }
+
+  /**
+   * Update all ports data, includes static ports and dynamic ports
+   * @param ports
+   */
+  public updateAllPorts(ports?: WorkflowPorts) {
+    const meta = this.entity.getNodeMeta<WorkflowNodeMeta>();
+    if (ports) {
+      this._staticPorts = ports;
+    }
+    if (meta.useDynamicPort) {
+      this.updateDynamicPorts();
+    } else {
+      this.updatePorts(this._staticPorts);
+    }
+  }
+
+  /**
+   * @deprecated use `updateAllPorts` instead
+   */
+  public updateStaticPorts(ports: WorkflowPorts): void {
+    this.updateAllPorts(ports);
+  }
+
+  /**
+   * 动态计算点位，通过 dom 的 data-port-key
+   */
+  public updateDynamicPorts(): void {
+    const domNode = this.entity.getData(FlowNodeRenderData)!.node;
+    const elements = domNode.querySelectorAll<HTMLDivElement>('[data-port-id]');
+    const staticPorts: WorkflowPorts = this._staticPorts;
+    const dynamicPorts: WorkflowPorts = [];
+    if (elements.length > 0) {
+      dynamicPorts.push(
+        ...Array.from(elements).map((element) => ({
+          portID: element.getAttribute('data-port-id')!,
+          type: element.getAttribute('data-port-type')! as WorkflowPortType,
+          location: element.getAttribute('data-port-location')! as LinePointLocation,
+          targetElement: element,
+        }))
+      );
+    }
+    this.updatePorts(staticPorts.concat(dynamicPorts));
+  }
+
+  /**
+   * 根据 key 获取 port 实体
+   */
+  public getPortEntityByKey(
+    portType: WorkflowPortType,
+    portKey?: string | number
+  ): WorkflowPortEntity {
+    const entity = this.getOrCreatePortEntity({
+      type: portType,
+      portID: portKey,
+    });
+    return entity;
+  }
+
+  /**
+   * 更新 ports 数据
+   */
+  protected updatePorts(ports: WorkflowPorts): void {
+    if (!isEqual(this._prePorts, ports)) {
+      const portKeys = ports.map((port) => this.getPortId(port.type, port.portID));
+      this._portIDSet.forEach((portId) => {
+        if (!portKeys.includes(portId)) {
+          this.getPortEntity(portId)?.dispose();
+        }
+      });
+      ports.forEach((port) => this.updatePortEntity(port));
+      this._prePorts = ports;
+      this.fireChange();
+    }
+
+    // Note: 为什么调用 port.validate 不够，需要调用 line.validate
+    // 原因：假设有这样的连线：dynamic port → end 节点。
+    // line.validate 时，line.fromPort 可能为 undefined（未创建实体），导致 end 节点上的 port 未正确校验
+    // 所以需要在所有 port entities 准备完成后，通过再次调用 line.validate 来触发连线另一端的 port 更新
+    this.allPorts.forEach((port) => {
+      port.allLines.forEach((line) => {
+        line.validate();
+      });
+    });
+  }
+
+  /**
+   * 获取所有 port entities
+   */
+  public get allPorts(): WorkflowPortEntity[] {
+    return Array.from(this._portIDSet)
+      .map((portId) => this.getPortEntity(portId)!)
+      .filter(Boolean); // dispose 时，会获取不到 port
+  }
+
+  /**
+   * 获取输入点位
+   */
+  public get inputPorts(): WorkflowPortEntity[] {
+    return this.allPorts.filter((port) => port.portType === 'input');
+  }
+
+  /**
+   * 获取输出点位
+   */
+  public get outputPorts(): WorkflowPortEntity[] {
+    return this.allPorts.filter((port) => port.portType === 'output');
+  }
+
+  /**
+   * 获取输入点位置
+   */
+  public get inputPoints(): LinePoint[] {
+    return this.inputPorts.map((port) => port.point);
+  }
+
+  /**
+   * 获取输出点位置
+   */
+  public get outputPoints(): LinePoint[] {
+    return this.inputPorts.map((port) => port.point);
+  }
+
+  /**
+   * 根据 key 获取 输入点位置
+   */
+  public getInputPoint(key?: string | number): LinePoint {
+    return this.getPortEntityByKey('input', key).point;
+  }
+
+  /**
+   * 根据 key 获取输出点位置
+   */
+  public getOutputPoint(key?: string | number): LinePoint {
+    return this.getPortEntityByKey('output', key).point;
+  }
+
+  /**
+   * 获取 port 实体
+   */
+  protected getPortEntity(portId: string): WorkflowPortEntity | undefined {
+    if (!this._portIDSet.has(portId)) {
+      // 如果不是自身创建的 port，则返回 undefined
+      return undefined;
+    }
+    return this.entity.entityManager.getEntityById<WorkflowPortEntity>(portId)!;
+  }
+
+  /**
+   * 拼接 port 实体的 id
+   */
+  protected getPortId(portType: WorkflowPortType, portKey: string | number = ''): string {
+    return getPortEntityId(this.entity, portType, portKey);
+  }
+
+  /**
+   * 创建 port 实体
+   */
+  protected createPortEntity(portInfo: WorkflowPort): WorkflowPortEntity {
+    const id = this.getPortId(portInfo.type, portInfo.portID);
+    let portEntity = this.entity.entityManager.getEntityById<WorkflowPortEntity>(id);
+    if (!portEntity) {
+      portEntity = this.entity.entityManager.createEntity<WorkflowPortEntity>(WorkflowPortEntity, {
+        id,
+        node: this.entity,
+        ...portInfo,
+      });
+    }
+    portEntity.onDispose(() => {
+      this._portIDSet.delete(id);
+    });
+    this._portIDSet.add(id);
+    return portEntity;
+  }
+
+  /**
+   * 获取或创建 port 实体
+   */
+  protected getOrCreatePortEntity(portInfo: WorkflowPort): WorkflowPortEntity {
+    const id = this.getPortId(portInfo.type, portInfo.portID);
+    return this.getPortEntity(id) ?? this.createPortEntity(portInfo);
+  }
+
+  /**
+   * 更新 port 实体
+   */
+  protected updatePortEntity(portInfo: WorkflowPort): WorkflowPortEntity {
+    const portEntity = this.getOrCreatePortEntity(portInfo);
+    portEntity.update(portInfo);
+    return portEntity;
+  }
+}

package/src/env.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<object, object, unknown>;
+  export default component;
+}

package/src/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './workflow-commands';
+export * from './composables';
+export * from './vue';
+export * from './utils';
+export * from './typings';
+export * from './entities';
+export * from './constants';
+export * from './entity-datas';
+export * from './service';
+export * from './workflow-document';
+export * from './workflow-document-container-module';
+export * from './workflow-lines-manager';
+export * from './workflow-document-option';

package/src/layout/free-layout.ts

@@ -0,0 +1,166 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject, injectable } from 'inversify';
+import {
+  type IPoint,
+  PaddingSchema,
+  Rectangle,
+  type ScrollSchema,
+  SizeSchema,
+} from '@flowgram-vue/utils';
+import {
+  type FlowDocument,
+  type FlowLayout,
+  type FlowNodeEntity,
+  FlowDocumentProvider,
+  FlowNodeTransformData,
+} from '@flowgram-vue/document';
+import { PlaygroundConfigEntity, TransformData } from '@flowgram-vue/core';
+
+export const FREE_LAYOUT_KEY = 'free-layout';
+/**
+ * 自由画布布局
+ */
+@injectable()
+export class FreeLayout implements FlowLayout {
+  name = FREE_LAYOUT_KEY;
+
+  @inject(PlaygroundConfigEntity) playgroundConfig: PlaygroundConfigEntity;
+
+  @inject(FlowDocumentProvider)
+  protected documentProvider: FlowDocumentProvider;
+
+  get document(): FlowDocument {
+    return this.documentProvider();
+  }
+
+  /**
+   * 更新布局
+   */
+  update(): void {
+    if (this.document.root.getData(FlowNodeTransformData)?.localDirty) {
+      this.document.root.clearMemoGlobal();
+      // this.document.root.getData(FlowNodeTransformData)!.localDirty = false
+    }
+    // 自由画布同步同步大小, TODO 这个移动到 createWorkflowNode
+    // this.document.root.allChildren.forEach(this.syncTransform.bind(this))
+  }
+
+  syncTransform(node: FlowNodeEntity): void {
+    const transform = node.getData<FlowNodeTransformData>(FlowNodeTransformData)!;
+    if (!transform.localDirty) {
+      return;
+    }
+    node.clearMemoGlobal();
+    node.clearMemoLocal();
+    // 同步 size 给原始的 transform
+    transform.transform.update({
+      size: transform.data.size,
+    });
+    if (!node.parent) {
+      return;
+    }
+    node.parent.clearMemoGlobal();
+    node.parent.clearMemoLocal();
+    const parentTransform = node.parent.getData<FlowNodeTransformData>(FlowNodeTransformData);
+    parentTransform.transform.fireChange();
+  }
+
+  /**
+   * 更新所有受影响的上下游节点
+   */
+  updateAffectedTransform(node: FlowNodeEntity): void {
+    const transformData = node.transform;
+    if (!transformData.localDirty) {
+      return;
+    }
+    const allParents = this.getAllParents(node);
+    const allBlocks = this.getAllBlocks(node).reverse();
+    const affectedNodes = [...allBlocks, ...allParents];
+    affectedNodes.forEach((node) => {
+      this.fireChange(node);
+    });
+  }
+
+  /**
+   * 获取节点的 padding 数据
+   * @param node
+   */
+  getPadding(node: FlowNodeEntity): PaddingSchema {
+    const { padding } = node.getNodeMeta();
+    const transform = node.getData<FlowNodeTransformData>(FlowNodeTransformData);
+    if (padding) {
+      return typeof padding === 'function' ? padding(transform) : padding;
+    }
+    return PaddingSchema.empty();
+  }
+
+  /**
+   * 默认滚动到 fitview 区域
+   * @param contentSize
+   */
+  getInitScroll(contentSize: SizeSchema): ScrollSchema {
+    const bounds = Rectangle.enlarge(
+      this.document.getAllNodes().map((node) => node.getData<TransformData>(TransformData).bounds)
+    ).pad(30, 30); // 留出 30 像素的边界
+    const viewport = this.playgroundConfig.getViewport(false);
+    const zoom = SizeSchema.fixSize(bounds, viewport);
+    return {
+      scrollX: (bounds.x + bounds.width / 2) * zoom - this.playgroundConfig.config.width / 2,
+      scrollY: (bounds.y + bounds.height / 2) * zoom - this.playgroundConfig.config.height / 2,
+    };
+  }
+
+  /**
+   * 获取默认输入点
+   */
+  getDefaultInputPoint(node: FlowNodeEntity): IPoint {
+    return node.getData<TransformData>(TransformData)!.bounds.leftCenter;
+  }
+
+  /**
+   * 获取默认输出点
+   */
+  getDefaultOutputPoint(node: FlowNodeEntity): IPoint {
+    return node.getData<TransformData>(TransformData)!.bounds.rightCenter;
+  }
+
+  /**
+   * 水平中心点
+   */
+  getDefaultNodeOrigin(): IPoint {
+    return { x: 0.5, y: 0 };
+  }
+
+  private getAllParents(node: FlowNodeEntity): FlowNodeEntity[] {
+    const parents: FlowNodeEntity[] = [];
+    let current = node.parent;
+
+    while (current) {
+      parents.push(current);
+      current = current.parent;
+    }
+
+    return parents;
+  }
+
+  private getAllBlocks(node: FlowNodeEntity): FlowNodeEntity[] {
+    return node.blocks.reduce<FlowNodeEntity[]>(
+      (acc, child) => [...acc, ...this.getAllBlocks(child)],
+      [node]
+    );
+  }
+
+  private fireChange(node?: FlowNodeEntity): void {
+    const transformData = node?.transform;
+    if (!node || !transformData?.localDirty) {
+      return;
+    }
+    node.clearMemoGlobal();
+    node.clearMemoLocal();
+    transformData.transform.fireChange();
+  }
+}

package/src/layout/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './free-layout';

package/src/service/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './workflow-select-service';
+export * from './workflow-hover-service';
+export * from './workflow-drag-service';
+export * from './workflow-reset-layout-service';
+export * from './workflow-operation-base-service';