feat(free-layout-editor): add operation(WorkflowOperationService) to FreeLayoutPluginContext (#891)

* feat(free-layout-editor): add operation(WorkflowOperationService) to FreeLayoutPluginContext

* docs: update docs

apps/docs/src/en/guide/advanced/free-layout/load.mdx

@@ -123,7 +123,7 @@ function App() {
 }
 ```
 
-- Dynamic reload of all data
+- Dynamic reload of all data (will produce redo/undo/onContentChange)
 
 ```tsx pure
 import { FreeLayoutEditorProvider, FreeLayoutPluginContext, EditorRenderer } from '@flowgram.ai/free-layout-editor'
@@ -131,13 +131,13 @@ import { FreeLayoutEditorProvider, FreeLayoutPluginContext, EditorRenderer } fro
 function App({ data }) {
   const ref = useRef<FreeLayoutPluginContext | undefined>();
 
-  useEffect(async () => {
-    // Reload canvas data when data changes
-    await ref.current.document.reload(data)
+  useEffect(() => {
+   // ctx.operation supports diff reloading of canvas data and can be undone via undo
+    ref.current.operation.fromJSON(data)
     setTimeout(() => {
       // Trigger canvas fitview after loading to center nodes automatically
       ref.current.document.fitView()
-    }, 100)
+    }, 10)
   }, [data])
   return (
     <FreeLayoutEditorProvider ref={ref} {...otherProps}>

apps/docs/src/zh/guide/advanced/free-layout/load.mdx

@@ -126,7 +126,7 @@ function App() {
 }
 ```
 
-- 动态 reload 所有数据
+- 动态重载画布所有数据 (会产生 redo/undo/onContentChange )
 
 ```tsx pure
 
@@ -135,13 +135,13 @@ import { FreeLayoutEditorProvider, FreeLayoutPluginContext, EditorRenderer } fro
 function App({ data }) {
   const ref = useRef<FreeLayoutPluginContext | undefined>();
 
-  useEffect(async () => {
-    // 当 data 变化时候重新加载画布数据
-    await ref.current.document.reload(data)
+  useEffect(() => {
+    // ctx.operation 支持 diff 重新加载画布数据并可通过 undo 撤销
+    ref.current.operation.fromJSON(data)
     setTimeout(() => {
       // 加载后触发画布的 fitview 让节点自动居中
       ref.current.document.fitView()
-    }, 100)
+    }, 10)
   }, [data])
   return (
     <FreeLayoutEditorProvider ref={ref} {...otherProps}>

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

@@ -123,7 +123,7 @@ export class WorkflowDocument extends FlowDocument {
   }
 
   /**
-   * @deprecated use `fromJSON` instead
+   * @deprecated use `ctx.operation.fromJSON` instead
    */
   async reload(json: WorkflowJSON, delayTime = 0): Promise<void> {
     if (this.disposed) return;

packages/client/free-layout-editor/src/components/free-layout-editor-provider.tsx

@@ -16,6 +16,7 @@ import {
   Playground,
 } from '@flowgram.ai/editor';
 
+import { WorkflowOperationService } from '../types';
 import { WorkflowAutoLayoutTool } from '../tools';
 import {
   createFreeLayoutPreset,
@@ -44,6 +45,9 @@ export const FreeLayoutEditorProvider = forwardRef<FreeLayoutPluginContext, Free
           get history(): HistoryService {
             return container.get<HistoryService>(HistoryService);
           },
+          get operation(): WorkflowOperationService {
+            return container.get<WorkflowOperationService>(WorkflowOperationService);
+          },
           get tools(): FreeLayoutPluginTools {
             const autoLayoutTool = container.get<WorkflowAutoLayoutTool>(WorkflowAutoLayoutTool);
             return {

packages/client/free-layout-editor/src/preset/free-layout-props.ts

@@ -29,6 +29,7 @@ import {
   FlowNodeType,
 } from '@flowgram.ai/editor';
 
+import { WorkflowOperationService } from '../types';
 import { AutoLayoutResetFn, AutoLayoutToolOptions } from '../tools';
 
 export const FreeLayoutPluginContext = PluginContext;
@@ -45,6 +46,10 @@ export interface FreeLayoutPluginContext extends EditorPluginContext {
   document: WorkflowDocument;
   clipboard: ClipboardService;
   selection: SelectionService;
+  /**
+   * 提供对画布节点相关操作方法, 并 支持 redo/undo
+   */
+  operation: WorkflowOperationService;
   history: HistoryService;
   tools: FreeLayoutPluginTools;
 }