feat(free-layout): workflow onContentChange add LINE_DATA_CHANGE event, workflow-line-entity remove isDefaultLine (bytedance#660)

* feat(free-layout): workflow onContentChange add LINE_DATA_CHANGE event

* refactor(free-layout): workflow-line-entity remove isDefaultLine

* chore(demo): demo-nextjs-antd add build:prod

* fix(free-layout): workflow-drag-service lineData update

* feat(free-history-plugin): add change-line-data to history

* � This is a combination of 2 commits.
� This is the 1st commit message:

feat(free-history-plugin): add change-line-data to history

� The commit message bytedance#2 will be skipped:

� feat(free-history-plugin): add change-line-data to history

* fix: history lint

Author: xiamidaxia

apps/demo-nextjs-antd/package.json

@@ -18,7 +18,8 @@
   ],
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "exit 0",
+    "build:prod": "next build",
     "start": "next start",
     "lint": "eslint ./src --cache",
     "lint:fix": "eslint ./src --fix"

packages/canvas-engine/free-layout-core/__tests__/mocks/index.tsx

@@ -66,6 +66,7 @@ export const baseJSON: WorkflowJSON = {
     {
       sourceNodeID: 'start_0',
       targetNodeID: 'condition_0',
+      data: { a: 33 },
     },
     {
       sourceNodeID: 'condition_0',
@@ -112,6 +113,7 @@ export const nestJSON: WorkflowJSON = {
         {
           sourceNodeID: 'break_0',
           targetNodeID: 'variable_0',
+          data: { a: 33 },
         },
       ],
     },

packages/canvas-engine/free-layout-core/__tests__/workflow-document.test.ts

@@ -5,9 +5,7 @@
 
 import { vi } from 'vitest';
 import { interfaces } from 'inversify';
-import { FlowNodeTransformData } from '@flowgram.ai/document';
-import { FlowNodeRegistry } from '@flowgram.ai/document';
-import { FlowNodeBaseType } from '@flowgram.ai/document';
+import { FlowNodeBaseType, FlowNodeRegistry, FlowNodeTransformData } from '@flowgram.ai/document';
 import { PlaygroundConfigEntity } from '@flowgram.ai/core';
 
 import {
@@ -20,7 +18,7 @@ import {
   WorkflowNodeJSON,
   WorkflowSubCanvas,
 } from '../src';
-import { createWorkflowContainer, baseJSON, nestJSON, createSubCanvasNodes } from './mocks';
+import { baseJSON, createSubCanvasNodes, createWorkflowContainer, nestJSON } from './mocks';
 
 let container: interfaces.Container;
 let document: WorkflowDocument;
@@ -551,4 +549,23 @@ describe('workflow-document with nestedJSON & subCanvas', () => {
     document.dispose();
     expect(() => document.toJSON()).toThrowError(/disposed/);
   });
+  it('lineData change trigger onContentChange', () => {
+    document.fromJSON(baseJSON);
+    let contentChangeEvent: WorkflowContentChangeEvent;
+    document.onContentChange((e) => {
+      contentChangeEvent = e;
+    });
+    const line = document.linesManager.getLine({
+      from: 'start_0',
+      to: 'condition_0',
+    })!;
+    line.lineData = { b: 33 };
+    expect(document.toJSON().edges[0].data).toEqual({ b: 33 });
+    expect(contentChangeEvent!.type).toEqual(WorkflowContentChangeType.LINE_DATA_CHANGE);
+    expect(contentChangeEvent!.toJSON()).toEqual({
+      sourceNodeID: 'start_0',
+      targetNodeID: 'condition_0',
+      data: { b: 33 },
+    });
+  });
 });

packages/canvas-engine/free-layout-core/__tests__/workflow-lines-manager.test.ts

@@ -240,5 +240,23 @@ describe('workflow-lines-manager', () => {
       // 选中状态应该优先于流动状态
       expect(linesManager.getLineColor(line!)).toBe('#00ff00');
     });
+    it('line data change', () => {
+      const line = linesManager.createLine({
+        from: 'start_0',
+        to: 'end_0',
+        data: { a: 1 },
+      })!;
+      expect(line.toJSON()).toEqual({
+        sourceNodeID: 'start_0',
+        targetNodeID: 'end_0',
+        data: { a: 1 },
+      });
+      line.lineData = { a: 2 };
+      expect(line.toJSON()).toEqual({
+        sourceNodeID: 'start_0',
+        targetNodeID: 'end_0',
+        data: { a: 2 },
+      });
+    });
   });
 });

packages/canvas-engine/free-layout-core/src/entities/workflow-line-entity.ts

@@ -4,7 +4,7 @@
  */
 
 import { isEqual } from 'lodash-es';
-import { domUtils, type IPoint, Rectangle } from '@flowgram.ai/utils';
+import { domUtils, type IPoint, Rectangle, Emitter } from '@flowgram.ai/utils';
 import { Entity, type EntityOpts } from '@flowgram.ai/core';
 
 import { type WorkflowLinesManager } from '../workflow-lines-manager';
@@ -25,6 +25,7 @@ export interface WorkflowLinePortInfo {
   to?: string; // 后置节点 id
   fromPort?: string | number; // 连线的 port 位置
   toPort?: string | number; // 连线的 port 位置
+  data?: any;
 }
 
 export interface WorkflowLineEntityOpts extends EntityOpts, WorkflowLinePortInfo {
@@ -35,7 +36,6 @@ export interface WorkflowLineEntityOpts extends EntityOpts, WorkflowLinePortInfo
 
 export interface WorkflowLineInfo extends WorkflowLinePortInfo {
   drawingTo?: IPoint; // 正在画中的元素
-  isDefaultLine?: boolean; // 是否为默认的线
 }
 
 export interface WorkflowLineUIState {
@@ -64,10 +64,14 @@ export class WorkflowLineEntity extends Entity<WorkflowLineEntityOpts> {
     return `${from}_${fromPort || ''}-${to || ''}_${toPort || ''}`;
   }
 
+  private _onLineDataChangeEmitter = new Emitter<{ oldValue: any; newValue: any }>();
+
   readonly document: WorkflowDocument;
 
   readonly linesManager: WorkflowLinesManager;
 
+  readonly onLineDataChange = this._onLineDataChangeEmitter.event;
+
   private _from: WorkflowNodeEntity;
 
   private _to?: WorkflowNodeEntity;
@@ -121,9 +125,13 @@ export class WorkflowLineEntity extends Entity<WorkflowLineEntityOpts> {
    * 更新线条扩展数据
    * @param data
    */
-  set lineData(data: any) {
-    this._lineData = data;
-    this.fireChange();
+  set lineData(newValue: any) {
+    const oldValue = this._lineData;
+    if (!isEqual(oldValue, newValue)) {
+      this._lineData = newValue;
+      this._onLineDataChangeEmitter.fire({ oldValue, newValue });
+      this.fireChange();
+    }
   }
 
   public stackIndex = 0;
@@ -153,6 +161,7 @@ export class WorkflowLineEntity extends Entity<WorkflowLineEntityOpts> {
       drawingTo: opts.drawingTo,
       fromPort: opts.fromPort,
       toPort: opts.toPort,
+      data: opts.data,
     });
     if (opts.drawingTo) {
       this.isDrawing = true;
@@ -165,6 +174,7 @@ export class WorkflowLineEntity extends Entity<WorkflowLineEntityOpts> {
       this.fromPort?.validate();
       this.toPort?.validate();
     });
+    this.toDispose.push(this._onLineDataChangeEmitter);
     // this.onDispose(() => {
     // this._infoDispose.dispose();
     // });
@@ -248,7 +258,6 @@ export class WorkflowLineEntity extends Entity<WorkflowLineEntityOpts> {
       const { node, portID } = toPort;
       this._to = node;
       this.info.drawingTo = undefined;
-      this.info.isDefaultLine = false;
       this.info.to = node.id;
       this.info.toPort = portID;
     } else {
@@ -277,7 +286,6 @@ export class WorkflowLineEntity extends Entity<WorkflowLineEntityOpts> {
     }
     if (!oldDrawingTo || pos.x !== oldDrawingTo.x || pos.y !== oldDrawingTo.y) {
       this.info.to = undefined;
-      this.info.isDefaultLine = false;
       this.info.drawingTo = pos;
       this.fireChange();
     }
@@ -392,6 +400,7 @@ export class WorkflowLineEntity extends Entity<WorkflowLineEntityOpts> {
       this.info = info;
       this._from = this.document.getNode(info.from)!;
       this._to = info.to ? this.document.getNode(info.to) : undefined;
+      this._lineData = info.data;
       this.fireChange();
     }
   }

packages/canvas-engine/free-layout-core/src/service/workflow-drag-service.ts

@@ -610,6 +610,7 @@ export class WorkflowDragService {
             from: fromPort.node.id,
             fromPort: fromPort.portID,
             drawingTo: config.getPosFromMouseEvent(event),
+            data: originLine?.lineData,
           });
           if (!line) {
             return;
@@ -708,6 +709,7 @@ export class WorkflowDragService {
                 fromPort: fromPort.portID,
                 to: toPort.node.id,
                 toPort: toPort.portID,
+                data: originLine?.lineData,
               }
             : undefined;
           // Step2: 检测 reset

packages/canvas-engine/free-layout-core/src/typings/workflow-json.ts

@@ -37,6 +37,10 @@ export enum WorkflowContentChangeType {
    * 删除线条
    */
   DELETE_LINE = 'DELETE_LINE',
+  /**
+   * 线条数据修改
+   */
+  LINE_DATA_CHANGE = 'LINE_DATA_CHANGE',
   /**
    * 节点Meta信息变更
    */
@@ -49,6 +53,10 @@ export interface WorkflowContentChangeEvent {
    * 当前触发的元素的json数据，toJSON 需要主动触发
    */
   toJSON: () => any;
+  /**
+   * oldValue
+   */
+  oldValue?: any;
   /*
    * 当前的事件的 entity
    */

packages/canvas-engine/free-layout-core/src/workflow-document.ts

@@ -775,6 +775,7 @@ export class WorkflowDocument extends FlowDocument {
       fromPort: json.sourcePortID,
       to: json.targetNodeID,
       toPort: json.targetPortID,
+      data: json.data,
     };
     if (!parentId) {
       return this.linesManager.createLine(lineInfo);

packages/canvas-engine/free-layout-core/src/workflow-lines-manager.ts

@@ -138,6 +138,10 @@ export class WorkflowLinesManager {
     );
   }
 
+  getLineById(id: string): WorkflowLineEntity | undefined {
+    return this.entityManager.getEntityById<WorkflowLineEntity>(id);
+  }
+
   replaceLine(
     oldPortInfo: WorkflowLinePortInfo,
     newPortInfo: WorkflowLinePortInfo
@@ -155,7 +159,7 @@ export class WorkflowLinesManager {
       key?: string; // 自定义 key
     } & WorkflowLinePortInfo
   ): WorkflowLineEntity | undefined {
-    const { from, to, drawingTo, fromPort, toPort } = options;
+    const { from, to, drawingTo, fromPort, toPort, data } = options;
     const available = Boolean(from && to);
     const key = options.key || WorkflowLineEntity.portInfoToLineId(options);
     let line = this.entityManager.getEntityById<WorkflowLineEntity>(key)!;
@@ -190,6 +194,7 @@ export class WorkflowLinesManager {
       toPort,
       to,
       drawingTo,
+      data,
     });
 
     this.registerData(line);
@@ -212,6 +217,14 @@ export class WorkflowLinesManager {
         });
       }
     });
+    line.onLineDataChange(({ oldValue }) => {
+      this.onAvailableLinesChangeEmitter.fire({
+        type: WorkflowContentChangeType.LINE_DATA_CHANGE,
+        toJSON: () => line.toJSON(),
+        oldValue,
+        entity: line,
+      });
+    });
     // 是否为有效的线条
     if (available) {
       this.onAvailableLinesChangeEmitter.fire({