@flowgram-vue/free-layout-core 0.2.0

package/src/entities/workflow-port-entity.ts

@@ -0,0 +1,340 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type IPoint, Rectangle, Emitter, Compare } from '@flowgram-vue/utils';
+import { FlowNodeTransformData } from '@flowgram-vue/document';
+import { Entity, type EntityOpts, PlaygroundConfigEntity, TransformData } from '@flowgram-vue/core';
+
+import { type WorkflowDocument } from '../workflow-document';
+import { type WorkflowPortType, getPortEntityId, domReactToBounds } from '../utils/statics';
+import { locationConfigToPoint } from '../utils/location-config-to-point';
+import { type WorkflowNodeMeta, LinePointLocation, LinePoint } from '../typings';
+import { type WorkflowNodeEntity } from './workflow-node-entity';
+import { type WorkflowLineEntity } from './workflow-line-entity';
+
+// port 的宽度
+export const PORT_SIZE = 24;
+
+export interface WorkflowPort {
+  /**
+   * 没有代表 默认连接点，默认 input 类型 为最左边中心，output 类型为最右边中心
+   */
+  portID?: string | number;
+  /**
+   * 输入或者输出点
+   */
+  type: WorkflowPortType;
+  /**
+   * 端口位置
+   */
+  location?: LinePointLocation;
+  /**
+   * 端口位置配置
+   * @example
+   *  // bottom-center
+   *  {
+   *    left: '50%',
+   *    bottom: 0
+   *  }
+   *  // right-center
+   *  {
+   *    right: 0,
+   *    top: '50%'
+   *  }
+   */
+  locationConfig?: {
+    left?: string | number;
+    top?: string | number;
+    right?: string | number;
+    bottom?: string | number;
+  };
+  /**
+   * 相对于 location 的偏移
+   */
+  offset?: IPoint;
+  /**
+   * 端口热区大小
+   */
+  size?: { width: number; height: number };
+  /**
+   * 禁用端口
+   */
+  disabled?: boolean;
+  /**
+   * 将点位渲染到该父节点上
+   */
+  targetElement?: HTMLElement;
+}
+
+export type WorkflowPorts = WorkflowPort[];
+
+export interface WorkflowPortEntityOpts extends EntityOpts, WorkflowPort {
+  /**
+   * port 属于哪个节点
+   */
+  node: WorkflowNodeEntity;
+}
+
+/**
+ * Port 抽象的 Entity
+ */
+export class WorkflowPortEntity extends Entity<WorkflowPortEntityOpts> {
+  static type = 'WorkflowPortEntity';
+
+  readonly node: WorkflowNodeEntity;
+
+  readonly portID: string | number = '';
+
+  readonly portType: WorkflowPortType;
+
+  private _disabled?: boolean;
+
+  private _hasError = false;
+
+  private _location?: LinePointLocation;
+
+  private _locationConfig?: WorkflowPort['locationConfig'];
+
+  private _size?: { width: number; height: number };
+
+  private _offset?: IPoint;
+
+  protected readonly _onErrorChangedEmitter = new Emitter<void>();
+
+  onErrorChanged = this._onErrorChangedEmitter.event;
+
+  targetElement?: HTMLElement;
+
+  static getPortEntityId(
+    node: WorkflowNodeEntity,
+    portType: WorkflowPortType,
+    portID: string | number = ''
+  ): string {
+    return getPortEntityId(node, portType, portID);
+  }
+
+  get position(): LinePointLocation | undefined {
+    return this._location;
+  }
+
+  constructor(opts: WorkflowPortEntityOpts) {
+    super(opts);
+    this.portID = opts.portID || '';
+    this.portType = opts.type;
+    this._disabled = opts.disabled;
+    this._offset = opts.offset;
+    this._locationConfig = opts.locationConfig;
+    this._location = opts.location;
+    this._size = opts.size;
+    this.node = opts.node;
+    this.updateTargetElement(opts.targetElement);
+    this.toDispose.push(this.node.getData(TransformData)!.onDataChange(() => this.fireChange()));
+    this.toDispose.push(this.node.onDispose(this.dispose.bind(this)));
+  }
+
+  // 获取连线是否为错误态
+  get hasError() {
+    return this._hasError;
+  }
+
+  // 设置连线的错误态，外部应使用 validate 进行更新
+  set hasError(hasError: boolean) {
+    if (hasError !== this._hasError) {
+      this._hasError = hasError;
+      this._onErrorChangedEmitter.fire();
+    }
+  }
+
+  validate() {
+    // 一个端口可能连接很多线，需要保证所有的连线都不包含错误
+    const anyLineHasError = this.allLines.some((line) => {
+      // 忽略已销毁和被隐藏的线
+      if (line.disposed || line.isHidden) {
+        return false;
+      }
+
+      return line.hasError;
+    });
+    // 如果没有连线错误，需校验端口自身错误
+    const isPortHasError = (this.node.document as WorkflowDocument).isErrorPort(this);
+    this.hasError = anyLineHasError || isPortHasError;
+  }
+
+  isErrorPort() {
+    return (this.node.document as WorkflowDocument).isErrorPort(this, this.hasError);
+  }
+
+  get location(): LinePointLocation {
+    if (this._location) {
+      return this._location;
+    }
+    if (this.portType === 'input') {
+      return 'left';
+    }
+    return 'right';
+  }
+
+  get point(): LinePoint {
+    const { targetElement, _locationConfig } = this;
+    const { bounds } = this.node.getData(FlowNodeTransformData)!;
+    const location = this.location;
+    if (targetElement) {
+      const pos = domReactToBounds(targetElement.getBoundingClientRect()).center;
+      const point = this.entityManager
+        .getEntity<PlaygroundConfigEntity>(PlaygroundConfigEntity)!
+        .getPosFromMouseEvent({
+          clientX: pos.x,
+          clientY: pos.y,
+        });
+      return {
+        x: point.x,
+        y: point.y,
+        location,
+      };
+    }
+    if (_locationConfig) {
+      return {
+        ...locationConfigToPoint(bounds, _locationConfig, this._offset),
+        location,
+      };
+    }
+    const offset = this._offset || { x: 0, y: 0 };
+    let point = { x: 0, y: 0 };
+    switch (location) {
+      case 'left':
+        point = bounds.leftCenter;
+        break;
+      case 'top':
+        point = bounds.topCenter;
+        break;
+      case 'right':
+        point = bounds.rightCenter;
+        break;
+      case 'bottom':
+        point = bounds.bottomCenter;
+        break;
+    }
+    return {
+      x: point.x + offset.x,
+      y: point.y + offset.y,
+      location,
+    };
+  }
+
+  /**
+   * 端口热区
+   */
+  get bounds(): Rectangle {
+    const { point } = this;
+    const size = this._size || { width: PORT_SIZE, height: PORT_SIZE };
+    return new Rectangle(
+      point.x - size.width / 2,
+      point.y - size.height / 2,
+      size.width,
+      size.height
+    );
+  }
+
+  isHovered(x: number, y: number): boolean {
+    return this.bounds.contains(x, y);
+  }
+
+  /**
+   * 相对节点左上角的位置
+   */
+  get relativePosition(): IPoint {
+    const { point } = this;
+    const { bounds } = this.node.getData(FlowNodeTransformData)!;
+    return {
+      x: point.x - bounds.x,
+      y: point.y - bounds.y,
+    };
+  }
+
+  updateTargetElement(el?: HTMLElement): void {
+    if (el !== this.targetElement) {
+      this.targetElement = el;
+      this.fireChange();
+    }
+  }
+
+  /**
+   * 是否被禁用
+   */
+  get disabled(): boolean {
+    const document = this.node.document as WorkflowDocument;
+    if (typeof document.options.isDisabledPort === 'function') {
+      return document.options.isDisabledPort(this);
+    }
+    if (this._disabled) {
+      return true;
+    }
+    const meta = this.node.getNodeMeta<WorkflowNodeMeta>();
+    if (this.portType === 'input') {
+      return !!meta.inputDisable;
+    }
+    return !!meta.outputDisable;
+  }
+
+  /**
+   * 当前点位上连接的线条
+   * @deprecated use `availableLines` instead
+   */
+  get lines(): WorkflowLineEntity[] {
+    return this.allLines.filter((line) => !line.isDrawing);
+  }
+
+  /**
+   * 当前有效的线条，不包含正在画的线条和隐藏的线条（这个出现在线条重连会先把原来的线条隐藏）
+   */
+  get availableLines(): WorkflowLineEntity[] {
+    return this.allLines.filter((line) => !line.isDrawing && !line.isHidden);
+  }
+
+  /**
+   * 当前点位上连接的线条（包含 isDrawing === true 的线条）
+   */
+  get allLines(): WorkflowLineEntity[] {
+    const document = this.node.document as WorkflowDocument;
+    return document.linesManager.getLinesByPortId(this.id);
+  }
+
+  update(data: Exclude<WorkflowPort, 'portID' | 'type'>) {
+    let changed = false;
+    if (data.targetElement !== this.targetElement) {
+      this.targetElement = data.targetElement;
+      changed = true;
+    }
+    if (data.location !== this._location) {
+      this._location = data.location;
+      changed = true;
+    }
+    if (Compare.isChanged(data.offset, this._offset)) {
+      this._offset = data.offset;
+      changed = true;
+    }
+    if (Compare.isChanged(data.locationConfig, this._locationConfig)) {
+      this._locationConfig = data.locationConfig;
+      changed = true;
+    }
+    if (Compare.isChanged(data.size, this._size)) {
+      this._size = data.size;
+      changed = true;
+    }
+    if (data.disabled !== this._disabled) {
+      this._disabled = data.disabled;
+      changed = true;
+    }
+    if (changed) {
+      this.fireChange();
+    }
+  }
+
+  dispose(): void {
+    // 点位被删除，对应的线条也要删除
+    this.lines.forEach((l) => l.dispose());
+    super.dispose();
+  }
+}

package/src/entity-datas/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './workflow-node-ports-data';
+export * from './workflow-node-lines-data';
+export * from './workflow-line-render-data';

package/src/entity-datas/workflow-line-render-data.ts

@@ -0,0 +1,136 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IPoint, Rectangle } from '@flowgram-vue/utils';
+import { EntityData } from '@flowgram-vue/core';
+
+import {
+  LineCenterPoint,
+  LinePosition,
+  LineRenderType,
+  WorkflowLineRenderContribution,
+  WorkflowLineRenderContributionFactory,
+} from '../typings';
+import { WorkflowLineEntity } from '../entities';
+
+export interface WorkflowLineRenderDataSchema {
+  version: string;
+  contributions: Map<LineRenderType, WorkflowLineRenderContribution>;
+  position: LinePosition;
+}
+
+export class WorkflowLineRenderData extends EntityData<WorkflowLineRenderDataSchema> {
+  static type = 'WorkflowLineRenderData';
+
+  declare entity: WorkflowLineEntity;
+
+  constructor(entity: WorkflowLineEntity) {
+    super(entity);
+    this.syncContributions();
+  }
+
+  public getDefaultData(): WorkflowLineRenderDataSchema {
+    return {
+      version: '',
+      contributions: new Map(),
+      position: {
+        from: { x: 0, y: 0, location: 'right' },
+        to: { x: 0, y: 0, location: 'left' },
+      },
+    };
+  }
+
+  public get renderVersion(): string {
+    return this.data.version;
+  }
+
+  public get position(): LinePosition {
+    return this.data.position;
+  }
+
+  public get path(): string {
+    return this.currentLine?.path ?? '';
+  }
+
+  public calcDistance(pos: IPoint): number {
+    return this.currentLine?.calcDistance(pos) ?? Number.MAX_SAFE_INTEGER;
+  }
+
+  public get bounds(): Rectangle {
+    return this.currentLine?.bounds ?? new Rectangle();
+  }
+
+  /**
+   * 更新数据
+   * WARNING: 这个方法，必须在 requestAnimationFrame / useLayoutEffect 中调用，否则会引起浏览器强制重排
+   */
+  public update(): void {
+    this.syncContributions();
+    const oldVersion = this.data.version;
+    this.updatePosition();
+    const newVersion = this.data.version;
+    if (oldVersion === newVersion) {
+      return;
+    }
+    this.data.version = newVersion;
+    this.currentLine?.update({
+      fromPos: this.data.position.from,
+      toPos: this.data.position.to,
+    });
+  }
+
+  private get lineType(): LineRenderType {
+    return this.entity.renderType ?? this.entity.linesManager.lineType;
+  }
+
+  /**
+   * 获取 center 位置
+   */
+  get center(): LineCenterPoint {
+    return this.currentLine?.center || { x: 0, y: 0, labelX: 0, labelY: 0 };
+  }
+
+  /**
+   * 更新版本
+   * WARNING: 这个方法，必须在 requestAnimationFrame / useLayoutEffect 中调用，否则会引起浏览器强制重排
+   */
+  private updatePosition(): void {
+    this.data.position.from = this.entity.drawingFrom || this.entity.fromPort!.point;
+    this.data.position.to = this.entity.drawingTo || this.entity.toPort!.point;
+
+    this.data.version = [
+      this.lineType,
+      this.data.position.from.x,
+      this.data.position.from.y,
+      this.data.position.from.location,
+      this.data.position.to.x,
+      this.data.position.to.y,
+      this.data.position.to.location,
+      this.entity.uiState.shrink, // 这个会影响线条的变化
+      this.entity.uiState.curvature,
+    ].join('-');
+  }
+
+  private get currentLine(): WorkflowLineRenderContribution | undefined {
+    return this.data.contributions.get(this.lineType);
+  }
+
+  private syncContributions(): void {
+    if (this.entity.linesManager.contributionFactories.length === this.data.contributions.size) {
+      return;
+    }
+    this.entity.linesManager.contributionFactories.forEach((factory) => {
+      this.registerContribution(factory);
+    });
+  }
+
+  private registerContribution(contributionFactory: WorkflowLineRenderContributionFactory): void {
+    if (this.data.contributions.has(contributionFactory.type)) {
+      return;
+    }
+    const contribution = new contributionFactory(this.entity);
+    this.data.contributions.set(contributionFactory.type, contribution);
+  }
+}

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

@@ -0,0 +1,166 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Disposable } from '@flowgram-vue/utils';
+import { EntityData } from '@flowgram-vue/core';
+
+import { type WorkflowLineEntity, type WorkflowNodeEntity } from '../entities';
+
+export interface WorkflowNodeLines {
+  inputLines: WorkflowLineEntity[];
+  outputLines: WorkflowLineEntity[];
+}
+
+/**
+ * 节点的关联的线条
+ */
+export class WorkflowNodeLinesData extends EntityData<WorkflowNodeLines> {
+  static type = 'WorkflowNodeLinesData';
+
+  entity: WorkflowNodeEntity;
+
+  getDefaultData(): WorkflowNodeLines {
+    return {
+      inputLines: [],
+      outputLines: [],
+    };
+  }
+
+  constructor(entity: WorkflowNodeEntity) {
+    super(entity);
+    this.entity = entity;
+    this.entity.preDispose.push(
+      Disposable.create(() => {
+        this.inputLines.slice().forEach((line) => line.dispose());
+        this.outputLines.slice().forEach((line) => line.dispose());
+      })
+    );
+  }
+
+  /**
+   * 输入线条
+   */
+  get inputLines(): WorkflowLineEntity[] {
+    return this.data.inputLines;
+  }
+
+  /**
+   * 输出线条
+   */
+  get outputLines(): WorkflowLineEntity[] {
+    return this.data.outputLines;
+  }
+
+  get allLines(): WorkflowLineEntity[] {
+    return this.data.inputLines.concat(this.data.outputLines);
+  }
+
+  get availableLines(): WorkflowLineEntity[] {
+    return this.allLines.filter((line) => !line.isDrawing && !line.isHidden);
+  }
+
+  /**
+   * 输入节点
+   */
+  get inputNodes(): WorkflowNodeEntity[] {
+    return this.inputLines.map((l) => l.from!).filter(Boolean);
+  }
+
+  /**
+   * 所有输入节点
+   */
+  get allInputNodes(): WorkflowNodeEntity[] {
+    const nodeSet: Set<WorkflowNodeEntity> = new Set();
+
+    const handleNode = (node: WorkflowNodeEntity): void => {
+      if (nodeSet.has(node)) {
+        return;
+      }
+
+      nodeSet.add(node);
+
+      const { inputNodes } = node.getData<WorkflowNodeLinesData>(WorkflowNodeLinesData)!;
+      if (!inputNodes || !inputNodes.length) {
+        return;
+      }
+
+      inputNodes.forEach((inputNode: WorkflowNodeEntity) => {
+        // 如果 outputNode 和当前 node 是父子节点，则不向下遍历
+        if (inputNode?.parent === node || node?.parent === inputNode) {
+          return;
+        }
+        handleNode(inputNode);
+      });
+    };
+
+    handleNode(this.entity);
+    nodeSet.delete(this.entity);
+
+    return Array.from(nodeSet);
+  }
+
+  /**
+   * 输出节点
+   */
+  get outputNodes(): WorkflowNodeEntity[] {
+    return this.outputLines.map((l) => l.to!).filter(Boolean);
+  }
+
+  /**
+   * 输入输出节点
+   */
+  get allOutputNodes(): WorkflowNodeEntity[] {
+    const nodeSet: Set<WorkflowNodeEntity> = new Set();
+
+    const handleNode = (node: WorkflowNodeEntity): void => {
+      if (nodeSet.has(node)) {
+        return;
+      }
+
+      nodeSet.add(node);
+
+      const { outputNodes } = node.getData<WorkflowNodeLinesData>(WorkflowNodeLinesData)!;
+      if (!outputNodes || !outputNodes.length) {
+        return;
+      }
+
+      outputNodes.forEach((outputNode: WorkflowNodeEntity) => {
+        // 如果 outputNode 和当前 node 是父子节点，则不向下遍历
+        if (outputNode?.parent === node || node?.parent === outputNode) {
+          return;
+        }
+        handleNode(outputNode);
+      });
+    };
+
+    handleNode(this.entity);
+    nodeSet.delete(this.entity);
+
+    return Array.from(nodeSet);
+  }
+
+  addLine(line: WorkflowLineEntity): void {
+    if (line.from === this.entity) {
+      this.outputLines.push(line);
+    } else {
+      this.inputLines.push(line);
+    }
+    this.fireChange();
+  }
+
+  removeLine(line: WorkflowLineEntity): void {
+    const { inputLines, outputLines } = this;
+    const inputIndex = inputLines.indexOf(line);
+    const outputIndex = outputLines.indexOf(line);
+    if (inputIndex !== -1) {
+      inputLines.splice(inputIndex, 1);
+      this.fireChange();
+    }
+    if (outputIndex !== -1) {
+      outputLines.splice(outputIndex, 1);
+      this.fireChange();
+    }
+  }
+}