@flowgram-vue/free-layout-core 0.2.0

package/src/service/workflow-hover-service.ts

@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject, injectable } from 'inversify';
+import { Emitter, type PositionSchema } from '@flowgram-vue/utils';
+import { EntityManager } from '@flowgram-vue/core';
+
+import {
+  type WorkflowLineEntity,
+  type WorkflowNodeEntity,
+  type WorkflowPortEntity,
+} from '../entities';
+
+/**
+ * 可 Hover 的节点 类型
+ */
+export type WorkflowEntityHoverable = WorkflowNodeEntity | WorkflowLineEntity | WorkflowPortEntity;
+
+export interface HoverPosition {
+  position: PositionSchema;
+  target?: HTMLElement;
+}
+
+/** @deprecated */
+export type WorkfloEntityHoverable = WorkflowEntityHoverable;
+/**
+ * hover 状态管理
+ */
+@injectable()
+export class WorkflowHoverService {
+  @inject(EntityManager) protected entityManager: EntityManager;
+
+  protected onHoveredChangeEmitter = new Emitter<string>();
+
+  protected onUpdateHoverPositionEmitter = new Emitter<HoverPosition>();
+
+  readonly onHoveredChange = this.onHoveredChangeEmitter.event;
+
+  readonly onUpdateHoverPosition = this.onUpdateHoverPositionEmitter.event;
+
+  // 当前鼠标 hover 位置
+  hoveredPos: PositionSchema = { x: 0, y: 0 };
+
+  /**
+   * 当前 hovered 的 节点或者线条或者点
+   * 1: nodeId / lineId  （节点 / 线条）
+   * 2: nodeId:portKey  （节点连接点）
+   */
+  hoveredKey = '';
+
+  /**
+   * 更新 hover 的内容
+   * @param hoveredKey hovered key
+   */
+  updateHoveredKey(hoveredKey: string): void {
+    if (this.hoveredKey !== hoveredKey) {
+      this.hoveredKey = hoveredKey;
+      this.onHoveredChangeEmitter.fire(hoveredKey);
+    }
+  }
+
+  updateHoverPosition(position: PositionSchema, target?: HTMLElement): void {
+    this.hoveredPos = position;
+    this.onUpdateHoverPositionEmitter.fire({
+      position,
+      target,
+    });
+  }
+
+  /**
+   * 清空 hover 内容
+   */
+  clearHovered(): void {
+    this.updateHoveredKey('');
+  }
+
+  /**
+   *  判断是否 hover
+   * @param nodeId hoveredKey
+   * @returns 是否 hover
+   */
+  isHovered(nodeId: string): boolean {
+    return nodeId === this.hoveredKey;
+  }
+
+  isSomeHovered(): boolean {
+    return !!this.hoveredKey;
+  }
+
+  /**
+   * 获取被 hover 的节点或线条
+   * @deprecated use 'someHovered' instead
+   */
+  get hoveredNode(): WorkflowEntityHoverable | undefined {
+    return this.entityManager.getEntityById(this.hoveredKey);
+  }
+
+  /**
+   * 获取被 hover 的节点或线条
+   */
+  get someHovered(): WorkflowEntityHoverable | undefined {
+    return this.entityManager.getEntityById(this.hoveredKey);
+  }
+}

package/src/service/workflow-operation-base-service.ts

@@ -0,0 +1,118 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject } from 'inversify';
+import { IPoint, Emitter } from '@flowgram-vue/utils';
+import { FlowNodeEntityOrId, FlowOperationBaseServiceImpl } from '@flowgram-vue/document';
+import { TransformData } from '@flowgram-vue/core';
+
+import { WorkflowLinesManager } from '../workflow-lines-manager';
+import { WorkflowDocument } from '../workflow-document';
+import {
+  NodePostionUpdateEvent,
+  WorkflowOperationBaseService,
+} from '../typings/workflow-operation';
+import { WorkflowJSON } from '../typings';
+import { WorkflowNodeEntity, WorkflowLineEntity } from '../entities';
+
+export class WorkflowOperationBaseServiceImpl
+  extends FlowOperationBaseServiceImpl
+  implements WorkflowOperationBaseService
+{
+  @inject(WorkflowDocument)
+  protected declare document: WorkflowDocument;
+
+  @inject(WorkflowLinesManager) linesManager: WorkflowLinesManager;
+
+  private onNodePostionUpdateEmitter = new Emitter<NodePostionUpdateEvent>();
+
+  public readonly onNodePostionUpdate = this.onNodePostionUpdateEmitter.event;
+
+  updateNodePosition(nodeOrId: FlowNodeEntityOrId, position: IPoint): void {
+    const node = this.toNodeEntity(nodeOrId);
+
+    if (!node) {
+      return;
+    }
+
+    const transformData = node.getData(TransformData);
+    const oldPosition = {
+      x: transformData.position.x,
+      y: transformData.position.y,
+    };
+    transformData.update({
+      position,
+    });
+
+    this.onNodePostionUpdateEmitter.fire({
+      node,
+      oldPosition,
+      newPosition: position,
+    });
+  }
+
+  fromJSON(json: WorkflowJSON) {
+    if (this.document.disposed) return;
+    const workflowJSON: WorkflowJSON = {
+      nodes: json.nodes ?? [],
+      edges: json.edges ?? [],
+    };
+
+    const oldNodes = this.document.getAllNodes();
+    const oldEdges = this.linesManager.getAllLines();
+    const oldPositionMap = new Map<string, IPoint>(
+      oldNodes.map((node) => [
+        node.id,
+        {
+          x: node.transform.transform.position.x,
+          y: node.transform.transform.position.y,
+        },
+      ])
+    );
+
+    const newNodes: WorkflowNodeEntity[] = [];
+    const newEdges: WorkflowLineEntity[] = [];
+
+    // 逐层渲染
+    this.document.batchAddFromJSON(workflowJSON, {
+      onNodeCreated: (node) => newNodes.push(node),
+      onEdgeCreated: (edge) => newEdges.push(edge),
+    });
+
+    const newEdgeIDSet = new Set<string>(newEdges.map((edge) => edge.id));
+    oldEdges.forEach((edge) => {
+      // 清空旧线条
+      if (!newEdgeIDSet.has(edge.id)) {
+        edge.dispose();
+        return;
+      }
+    });
+
+    const newNodeIDSet = new Set<string>(newNodes.map((node) => node.id));
+    oldNodes.forEach((node) => {
+      // 清空旧节点
+      if (!newNodeIDSet.has(node.id)) {
+        node.dispose();
+        return;
+      }
+      // 记录现有节点位置变更
+      const oldPosition = oldPositionMap.get(node.id);
+      const newPosition = {
+        x: node.transform.transform.position.x,
+        y: node.transform.transform.position.y,
+      };
+      if (oldPosition && (oldPosition.x !== newPosition.x || oldPosition.y !== newPosition.y)) {
+        this.onNodePostionUpdateEmitter.fire({
+          node,
+          oldPosition,
+          newPosition,
+        });
+      }
+    });
+
+    // 批量触发画布更新
+    this.document.fireRender();
+  }
+}

package/src/service/workflow-reset-layout-service.ts

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject, injectable, postConstruct } from 'inversify';
+import { PlaygroundConfigEntity } from '@flowgram-vue/core';
+import { EntityManager } from '@flowgram-vue/core';
+import { DisposableCollection, Emitter, type IPoint } from '@flowgram-vue/utils';
+
+import { WorkflowDocument } from '../workflow-document';
+import { layoutToPositions } from '../utils/layout-to-positions';
+import { fitView } from '../utils';
+import { WorkflowNodeEntity } from '../entities';
+
+export type PositionMap = Record<string, IPoint>;
+
+/**
+ * 重置布局服务
+ */
+@injectable()
+export class WorkflowResetLayoutService {
+  @inject(PlaygroundConfigEntity)
+  private _config: PlaygroundConfigEntity;
+
+  @inject(WorkflowDocument)
+  private _document: WorkflowDocument;
+
+  @inject(EntityManager)
+  private _entityManager: EntityManager;
+
+  private _resetLayoutEmitter = new Emitter<{
+    nodeIds: string[];
+    positionMap: PositionMap;
+    oldPositionMap: PositionMap;
+  }>();
+
+  /**
+   * reset layout事件
+   */
+  readonly onResetLayout = this._resetLayoutEmitter.event;
+
+  private _toDispose = new DisposableCollection();
+
+  /**
+   * 初始化
+   */
+  @postConstruct()
+  init() {
+    this._toDispose.push(this._resetLayoutEmitter);
+  }
+
+  /**
+   * 触发重置布局
+   * @param nodeIds 节点id
+   * @param positionMap 新布局数据
+   * @param oldPositionMap 老布局数据
+   */
+  fireResetLayout(nodeIds: string[], positionMap: PositionMap, oldPositionMap: PositionMap) {
+    this._resetLayoutEmitter.fire({
+      nodeIds,
+      positionMap,
+      oldPositionMap,
+    });
+  }
+
+  /**
+   * 根据数据重新布局
+   * @param positionMap
+   * @returns
+   */
+  async layoutToPositions(nodeIds: string[], positionMap: PositionMap) {
+    const nodes = nodeIds
+      .map(id => this._entityManager.getEntityById(id))
+      .filter(Boolean) as WorkflowNodeEntity[];
+    const positions = await layoutToPositions(nodes, positionMap);
+    fitView(this._document, this._config, true);
+    return positions;
+  }
+
+  /**
+   * 销毁
+   */
+  dispose() {
+    this._toDispose.dispose();
+  }
+}

package/src/service/workflow-select-service.ts

@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject, injectable } from 'inversify';
+import {
+  type Entity,
+  Playground,
+  SelectionService,
+  TransformData,
+  type PlaygroundConfigRevealOpts,
+} from '@flowgram-vue/core';
+import { type Event, Rectangle, SizeSchema } from '@flowgram-vue/utils';
+
+import { delay } from '../utils';
+import { WorkflowNodeEntity } from '../entities';
+import { type WorkfloEntityHoverable } from './workflow-hover-service';
+
+@injectable()
+export class WorkflowSelectService {
+  @inject(SelectionService) protected selectionService: SelectionService;
+
+  @inject(Playground) protected playground: Playground;
+
+  get onSelectionChanged(): Event<void> {
+    return this.selectionService.onSelectionChanged;
+  }
+
+  get selection(): Entity[] {
+    return this.selectionService.selection;
+  }
+
+  set selection(entities: Entity[]) {
+    this.selectionService.selection = entities;
+  }
+
+  /**
+   * 当前激活的节点只能有一个
+   */
+  get activatedNode(): WorkflowNodeEntity | undefined {
+    const { selectedNodes } = this;
+    if (selectedNodes.length !== 1) {
+      return undefined;
+    }
+    return selectedNodes[0];
+  }
+
+  isSelected(id: string): boolean {
+    return this.selectionService.selection.some(s => s.id === id);
+  }
+
+  isActivated(id: string): boolean {
+    return this.activatedNode?.id === id;
+  }
+
+  /**
+   * 选中的节点
+   */
+  get selectedNodes(): WorkflowNodeEntity[] {
+    return this.selectionService.selection.filter(
+      n => n instanceof WorkflowNodeEntity,
+    ) as WorkflowNodeEntity[];
+  }
+
+  /**
+   * 选中
+   * @param node
+   */
+  selectNode(node: WorkflowNodeEntity): void {
+    this.selectionService.selection = [node];
+  }
+
+  toggleSelect(node: WorkflowNodeEntity): void {
+    if (this.selectionService.selection.includes(node)) {
+      this.selectionService.selection = this.selectionService.selection.filter(n => n !== node);
+    } else {
+      this.selectionService.selection = this.selectionService.selection.concat(node);
+    }
+  }
+
+  select(node: WorkfloEntityHoverable): void {
+    this.selectionService.selection = [node];
+  }
+
+  clear(): void {
+    this.selectionService.selection = [];
+  }
+
+  /**
+   *  选中并滚动到节点
+   * @param node
+   */
+  async selectNodeAndScrollToView(node: WorkflowNodeEntity, fitView?: boolean): Promise<void> {
+    this.selectNodeAndFocus(node);
+    const DELAY_TIME = 30;
+    // 等待节点渲染完成(一般用于刚添加的节点)
+    await delay(DELAY_TIME);
+
+    const scrollConfig: PlaygroundConfigRevealOpts = {
+      entities: [node],
+    };
+
+    if (fitView) {
+      const bounds = Rectangle.enlarge([node.getData<TransformData>(TransformData).bounds]).pad(
+        30,
+        30,
+      ); // 留出 30 像素的边界
+
+      const viewport = this.playground.config.getViewport(false);
+
+      const zoom = SizeSchema.fixSize(bounds, viewport);
+
+      scrollConfig.zoom = zoom;
+      scrollConfig.scrollToCenter = true;
+      scrollConfig.easing = true;
+    }
+
+    return this.playground.config.scrollToView(scrollConfig);
+  }
+
+  selectNodeAndFocus(node: WorkflowNodeEntity): void {
+    // 新添加的节点需要被选中
+    this.select(node);
+    // 拖进来需要让画布聚焦, 才能使用快捷键删除
+    this.playground.node.focus();
+  }
+}

package/src/typings/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './workflow-json';
+export * from './workflow-edge';
+export * from './workflow-node';
+export * from './workflow-registry';
+export * from './workflow-line';
+export * from './workflow-sub-canvas';
+export * from './workflow-operation';
+export * from './workflow-drag';
+
+export const URLParams = Symbol('');
+
+export interface URLParams {
+  [key: string]: string;
+}

package/src/typings/workflow-drag.ts

@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type PositionSchema } from '@flowgram-vue/utils';
+import { type FlowNodeEntity } from '@flowgram-vue/document';
+import { PlaygroundDrag, type PlaygroundDragEvent } from '@flowgram-vue/core';
+
+import { type WorkflowLineEntity, type WorkflowPortEntity } from '../entities';
+
+export interface LineEventProps {
+  type: 'onDrag' | 'onDragEnd';
+  onDragNodeId?: string;
+  event?: MouseEvent;
+}
+
+interface INodesDragEvent {
+  type: string;
+  nodes: FlowNodeEntity[];
+  startPositions: PositionSchema[];
+  dragEvent: PlaygroundDragEvent;
+  triggerEvent: MouseEvent | TouchEvent;
+  dragger: PlaygroundDrag;
+}
+
+export interface NodesDragStartEvent extends INodesDragEvent {
+  type: 'onDragStart';
+}
+
+export interface NodesDragEndEvent extends INodesDragEvent {
+  type: 'onDragEnd';
+}
+
+export interface NodesDraggingEvent extends INodesDragEvent {
+  type: 'onDragging';
+  positions: PositionSchema[];
+}
+
+export type NodesDragEvent = NodesDragStartEvent | NodesDraggingEvent | NodesDragEndEvent;
+
+export type onDragLineEndParams = {
+  fromPort?: WorkflowPortEntity;
+  toPort?: WorkflowPortEntity;
+  mousePos: PositionSchema;
+  line?: WorkflowLineEntity;
+  originLine?: WorkflowLineEntity;
+  event: PlaygroundDragEvent;
+};
+
+export type OnDragLineEnd = (params: onDragLineEndParams) => Promise<void>;

package/src/typings/workflow-edge.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * 边数据
+ */
+export interface WorkflowEdgeJSON {
+  sourceNodeID: string;
+  targetNodeID: string;
+  sourcePortID?: string | number;
+  targetPortID?: string | number;
+  data?: any;
+}

package/src/typings/workflow-json.ts

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type WorkflowLineEntity, type WorkflowNodeEntity } from '../entities';
+import { type WorkflowNodeJSON } from './workflow-node';
+import { type WorkflowEdgeJSON } from './workflow-edge';
+
+export interface WorkflowJSON {
+  nodes: WorkflowNodeJSON[];
+  edges: WorkflowEdgeJSON[];
+}
+
+export enum WorkflowContentChangeType {
+  /**
+   * 添加节点
+   */
+  ADD_NODE = 'ADD_NODE',
+  /**
+   * 删除节点
+   */
+  DELETE_NODE = 'DELETE_NODE',
+  /**
+   * 移动节点
+   */
+  MOVE_NODE = 'MOVE_NODE',
+  /**
+   * 节点数据更新 （表单引擎数据 或者 extInfo 数据）
+   */
+  NODE_DATA_CHANGE = 'NODE_DATA_CHANGE',
+  /**
+   * 添加线条
+   */
+  ADD_LINE = 'ADD_LINE',
+  /**
+   * 删除线条
+   */
+  DELETE_LINE = 'DELETE_LINE',
+  /**
+   * 线条数据修改
+   */
+  LINE_DATA_CHANGE = 'LINE_DATA_CHANGE',
+  /**
+   * 节点Meta信息变更
+   */
+  META_CHANGE = 'META_CHANGE',
+}
+
+export interface WorkflowContentChangeEvent {
+  type: WorkflowContentChangeType;
+  /**
+   * 当前触发的元素的json数据，toJSON 需要主动触发
+   */
+  toJSON: () => any;
+  /**
+   * oldValue
+   */
+  oldValue?: any;
+  /*
+   * 当前的事件的 entity
+   */
+  entity: WorkflowNodeEntity | WorkflowLineEntity;
+}

package/src/typings/workflow-line.ts

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { Rectangle, IPoint } from '@flowgram-vue/utils';
+
+import { type WorkflowLineEntity } from '../entities';
+
+export enum LineType {
+  BEZIER, // 贝塞尔曲线
+  LINE_CHART, // 折叠线
+  STRAIGHT, // 直线
+}
+
+export type LineRenderType = LineType | string;
+
+export type LinePointLocation = 'left' | 'top' | 'right' | 'bottom';
+
+export interface LinePoint {
+  x: number;
+  y: number;
+  location: LinePointLocation;
+}
+
+export interface LinePosition {
+  from: LinePoint;
+  to: LinePoint;
+}
+
+export interface LineColor {
+  hidden: string;
+  default: string;
+  drawing: string;
+  hovered: string;
+  selected: string;
+  error: string;
+  flowing: string;
+}
+
+export enum LineColors {
+  HIDDEN = 'var(--g-workflow-line-color-hidden,transparent)', // 隐藏线条
+  DEFUALT = 'var(--g-workflow-line-color-default,#4d53e8)',
+  DRAWING = 'var(--g-workflow-line-color-drawing, #5DD6E3)', // '#b5bbf8', // '#9197F1',
+  HOVER = 'var(--g-workflow-line-color-hover,#37d0ff)',
+  SELECTED = 'var(--g-workflow-line-color-selected,#37d0ff)',
+  ERROR = 'var(--g-workflow-line-color-error,red)',
+  FLOWING = 'var(--g-workflow-line-color-flowing,#4d53e8)', // 流动线条，默认使用主题色
+}
+
+export interface LineCenterPoint {
+  x: number;
+  y: number;
+  labelX: number; // Relative to where the line begins
+  labelY: number; // Relative to where the line begins
+}
+
+export interface WorkflowLineRenderContribution {
+  entity: WorkflowLineEntity;
+  path: string;
+  center?: LineCenterPoint;
+  bounds: Rectangle;
+  update: (params: { fromPos: LinePoint; toPos: LinePoint }) => void;
+  calcDistance: (pos: IPoint) => number;
+}
+
+export type WorkflowLineRenderContributionFactory = (new (
+  entity: WorkflowLineEntity
+) => WorkflowLineRenderContribution) & {
+  type: LineRenderType;
+};