@flowgram-vue/free-history-plugin 0.2.0

package/src/free-history-manager.ts

@@ -0,0 +1,127 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/* eslint-disable @typescript-eslint/naming-convention */
+import { injectable, inject } from 'inversify';
+import { DisposableCollection } from '@flowgram-vue/utils';
+import { HistoryService } from '@flowgram-vue/history';
+import {
+  WorkflowDocument,
+  WorkflowResetLayoutService,
+  WorkflowDragService,
+  WorkflowOperationBaseService,
+} from '@flowgram-vue/free-layout-core';
+import { OperationType } from '@flowgram-vue/document';
+import { type PluginContext, PositionData } from '@flowgram-vue/core';
+
+import { DragNodeOperationValue, type FreeHistoryPluginOptions, FreeOperationType } from './types';
+import { HistoryEntityManager } from './history-entity-manager';
+import { DragNodesHandler } from './handlers/drag-nodes-handler';
+import { ChangeContentHandler } from './handlers/change-content-handler';
+
+/**
+ * 历史管理
+ */
+@injectable()
+export class FreeHistoryManager {
+  @inject(DragNodesHandler)
+  private _dragNodesHandler: DragNodesHandler;
+
+  @inject(ChangeContentHandler)
+  private _changeContentHandler: ChangeContentHandler;
+
+  @inject(HistoryEntityManager)
+  private _entityManager: HistoryEntityManager;
+
+  private _toDispose: DisposableCollection = new DisposableCollection();
+
+  @inject(WorkflowOperationBaseService)
+  private _operationService: WorkflowOperationBaseService;
+
+  onInit(ctx: PluginContext, opts: FreeHistoryPluginOptions) {
+    const document = ctx.get<WorkflowDocument>(WorkflowDocument);
+    const historyService = ctx.get<HistoryService>(HistoryService);
+    const dragService = ctx.get<WorkflowDragService>(WorkflowDragService);
+
+    const resetLayoutService = ctx.get<WorkflowResetLayoutService>(WorkflowResetLayoutService);
+
+    if (opts?.limit) {
+      historyService.limit(opts.limit);
+    }
+    historyService.context.source = ctx;
+
+    this._toDispose.pushAll([
+      dragService.onNodesDrag(async (event) => {
+        if (event.type !== 'onDragEnd') {
+          return;
+        }
+        this._dragNodesHandler.handle(event);
+      }),
+      document.onNodeCreate(({ node, data }) => {
+        const positionData = node.getData(PositionData);
+        if (positionData) {
+          this._entityManager.addEntityData(positionData);
+        }
+      }),
+      document.onContentChange((event) => {
+        this._changeContentHandler.handle(event, ctx);
+      }),
+      document.onReload((_event) => {
+        historyService.clear();
+      }),
+      resetLayoutService.onResetLayout((event) => {
+        historyService.pushOperation(
+          {
+            type: FreeOperationType.resetLayout,
+            value: {
+              ids: event.nodeIds,
+              value: event.positionMap,
+              oldValue: event.oldPositionMap,
+            },
+          },
+          { noApply: true }
+        );
+      }),
+      this._operationService.onNodeMove(({ node, fromParent, fromIndex, toParent, toIndex }) => {
+        historyService.pushOperation(
+          {
+            type: OperationType.moveChildNodes,
+            value: {
+              fromParentId: fromParent.id,
+              fromIndex,
+              nodeIds: [node.id],
+              toParentId: toParent.id,
+              toIndex,
+            },
+          },
+          {
+            noApply: true,
+          }
+        );
+      }),
+      this._operationService.onNodePostionUpdate((event) => {
+        const value: DragNodeOperationValue = {
+          ids: [event.node.id],
+          value: [event.newPosition],
+          oldValue: [event.oldPosition],
+        };
+        historyService.pushOperation(
+          {
+            type: FreeOperationType.dragNodes,
+            value,
+          },
+          {
+            noApply: true,
+          }
+        );
+      }),
+    ]);
+  }
+
+  dispose() {
+    this._entityManager.dispose();
+    this._toDispose.dispose();
+  }
+}

package/src/free-history-registers.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { injectable } from 'inversify';
+import { type OperationContribution, type OperationRegistry } from '@flowgram-vue/history';
+
+import { operationMetas } from './operation-metas';
+
+@injectable()
+export class FreeHistoryRegisters implements OperationContribution {
+  registerOperationMeta(operationRegistry: OperationRegistry): void {
+    operationMetas.forEach(operationMeta => {
+      operationRegistry.registerOperationMeta(operationMeta);
+    });
+  }
+}

package/src/handlers/change-content-handler.ts

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/* eslint-disable @typescript-eslint/naming-convention */
+import { injectable, inject } from 'inversify';
+import { HistoryService, Operation } from '@flowgram-vue/history';
+import {
+  type WorkflowContentChangeEvent,
+  WorkflowContentChangeType,
+} from '@flowgram-vue/free-layout-core';
+import { type PluginContext } from '@flowgram-vue/core';
+
+import { type IHandler } from '../types';
+import { FreeHistoryConfig } from '../free-history-config';
+import changes from '../changes';
+
+@injectable()
+export class ChangeContentHandler implements IHandler<WorkflowContentChangeEvent> {
+  @inject(HistoryService)
+  private _historyService: HistoryService;
+
+  @inject(FreeHistoryConfig) private _historyConfig: FreeHistoryConfig;
+
+  handle(event: WorkflowContentChangeEvent, ctx: PluginContext) {
+    if (!this._historyService.undoRedoService.canPush()) {
+      return;
+    }
+    if (
+      !this._historyConfig.enableChangeLineData &&
+      event.type === WorkflowContentChangeType.LINE_DATA_CHANGE
+    ) {
+      return;
+    }
+
+    const change = changes.find((c) => c.type === event.type);
+    if (!change) {
+      return;
+    }
+    const operation: Operation | undefined = change.toOperation(event, ctx);
+    if (!operation) {
+      return;
+    }
+
+    this._historyService.pushOperation(operation, { noApply: true });
+  }
+}

package/src/handlers/drag-nodes-handler.ts

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/* eslint-disable @typescript-eslint/naming-convention */
+import { injectable, inject } from 'inversify';
+import { HistoryService } from '@flowgram-vue/history';
+import { type NodesDragEndEvent } from '@flowgram-vue/free-layout-core';
+import { TransformData } from '@flowgram-vue/core';
+
+import { FreeOperationType, type IHandler } from '../types';
+
+@injectable()
+export class DragNodesHandler implements IHandler<NodesDragEndEvent> {
+  @inject(HistoryService)
+  private _historyService: HistoryService;
+
+  handle(event: NodesDragEndEvent) {
+    if (event.type === 'onDragEnd') {
+      this._dragNode(event);
+    }
+  }
+
+  private _dragNode(event: NodesDragEndEvent) {
+    this._historyService.pushOperation(
+      {
+        type: FreeOperationType.dragNodes,
+        value: {
+          ids: event.nodes.map((node) => node.id),
+          value: event.nodes.map((node) => {
+            const { x, y } = node.getData(TransformData).position;
+            return {
+              x,
+              y,
+            };
+          }),
+          oldValue: event.startPositions,
+        },
+      },
+      { noApply: true }
+    );
+  }
+}

package/src/history-entity-manager.ts

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/* eslint-disable @typescript-eslint/naming-convention */
+import { cloneDeep, isEqual } from 'lodash-es';
+import { injectable } from 'inversify';
+import { type Disposable, DisposableCollection } from '@flowgram-vue/utils';
+import { type EntityData } from '@flowgram-vue/core';
+
+@injectable()
+export class HistoryEntityManager implements Disposable {
+  private _entityDataValues: Map<EntityData, unknown> = new Map();
+
+  private _toDispose: DisposableCollection = new DisposableCollection();
+
+  addEntityData(entityData: EntityData) {
+    this._entityDataValues.set(entityData, cloneDeep(entityData.toJSON()));
+    this._toDispose.push(
+      entityData.onWillChange((event) => {
+        const value = event.toJSON();
+        const oldValue = this._entityDataValues.get(entityData);
+        if (isEqual(value, oldValue)) {
+          return;
+        }
+        this._entityDataValues.set(entityData, cloneDeep(value));
+      })
+    );
+  }
+
+  getValue(entityData: EntityData) {
+    return this._entityDataValues.get(entityData);
+  }
+
+  setValue(entityData: EntityData, value: unknown) {
+    return this._entityDataValues.set(entityData, value);
+  }
+
+  dispose() {
+    this._entityDataValues.clear();
+    this._toDispose.dispose();
+  }
+}

package/src/hooks/index.ts

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

package/src/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './create-free-history-plugin';
+export * from './types';
+export * from '@flowgram-vue/history';
+export * from './free-history-config';
+export * from './hooks';
+export * from './free-history-registers';

package/src/operation-metas/add-line.ts

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type PluginContext } from '@flowgram-vue/core';
+import { WorkflowLinesManager } from '@flowgram-vue/free-layout-core';
+import { type OperationMeta } from '@flowgram-vue/history';
+
+import { type AddOrDeleteLineOperationValue, FreeOperationType } from '../types';
+import { FreeHistoryConfig } from '../free-history-config';
+import { baseOperationMeta } from './base';
+
+export const addLineOperationMeta: OperationMeta<
+  AddOrDeleteLineOperationValue,
+  PluginContext,
+  void
+> = {
+  ...baseOperationMeta,
+  type: FreeOperationType.addLine,
+  inverse: op => ({
+    ...op,
+    type: FreeOperationType.deleteLine,
+  }),
+  apply: (operation, ctx: PluginContext) => {
+    const linesManager = ctx.get<WorkflowLinesManager>(WorkflowLinesManager);
+    linesManager.createLine({
+      ...operation.value,
+      key: operation.value.id,
+    });
+  },
+  getLabel: (op, ctx) => 'Create Line',
+  getDescription: (op, ctx) => {
+    const config = ctx.get<FreeHistoryConfig>(FreeHistoryConfig);
+    const { value } = op;
+    if (!value.from || !value.to) {
+      return 'Create Line';
+    }
+
+    const fromName = config.getNodeLabelById(value.from);
+    const toName = config.getNodeLabelById(value.to);
+    return `Create Line from ${fromName} to ${toName}`;
+  },
+};

package/src/operation-metas/add-node.ts

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { cloneDeep } from 'lodash-es';
+import { type OperationMeta } from '@flowgram-vue/history';
+import { WorkflowDocument, type WorkflowNodeJSON } from '@flowgram-vue/free-layout-core';
+import { type PluginContext } from '@flowgram-vue/core';
+
+import { type AddOrDeleteWorkflowNodeOperationValue, FreeOperationType } from '../types';
+import { FreeHistoryConfig } from '../free-history-config';
+import { baseOperationMeta } from './base';
+
+export const addNodeOperationMeta: OperationMeta<
+  AddOrDeleteWorkflowNodeOperationValue,
+  PluginContext,
+  void
+> = {
+  ...baseOperationMeta,
+  type: FreeOperationType.addNode,
+  inverse: (op) => ({
+    ...op,
+    type: FreeOperationType.deleteNode,
+  }),
+  apply: async (operation, ctx: PluginContext) => {
+    const document = ctx.get<WorkflowDocument>(WorkflowDocument);
+    await document.createWorkflowNode(
+      cloneDeep(operation.value.node) as WorkflowNodeJSON,
+      false,
+      operation.value.parentID
+    );
+  },
+  getLabel: (op, ctx) => {
+    const config = ctx.get<FreeHistoryConfig>(FreeHistoryConfig);
+    return `Create Node ${config.getNodeLabel(op.value.node)}`;
+  },
+  getDescription: (op, ctx) => {
+    const config = ctx.get<FreeHistoryConfig>(FreeHistoryConfig);
+    let desc = `Create Node ${config.getNodeLabel(op.value.node)}`;
+    if (op.value.node.meta?.position) {
+      desc += ` at ${op.value.node.meta.position.x},${op.value.node.meta.position.y}`;
+    }
+    return desc;
+  },
+};

package/src/operation-metas/base.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type OperationMeta } from '@flowgram-vue/history';
+
+export const baseOperationMeta: Partial<OperationMeta> = {
+  shouldMerge: (_op, prev, element) => {
+    if (!prev) {
+      return false;
+    }
+
+    if (
+      // 合并500ms内的操作, 如删除节点会联动删除线条
+      Date.now() - element.getTimestamp() <
+      500
+    ) {
+      return true;
+    }
+    return false;
+  },
+};

package/src/operation-metas/change-line-data.ts

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type OperationMeta } from '@flowgram-vue/history';
+import { WorkflowLinesManager } from '@flowgram-vue/free-layout-core';
+import { type PluginContext } from '@flowgram-vue/core';
+
+import { FreeOperationType, type ChangeLineDataValue } from '../types';
+import { baseOperationMeta } from './base';
+
+export const changeLineDataOperationMeta: OperationMeta<ChangeLineDataValue, PluginContext, void> =
+  {
+    ...baseOperationMeta,
+    type: FreeOperationType.changeLineData,
+    inverse: (op) => ({
+      ...op,
+      value: {
+        ...op.value,
+        newValue: op.value.oldValue,
+        oldValue: op.value.newValue,
+      },
+    }),
+    apply: (op, ctx: PluginContext) => {
+      const linesManager = ctx.get<WorkflowLinesManager>(WorkflowLinesManager);
+      const line = linesManager.getLineById(op.value.id);
+
+      if (!line) {
+        return;
+      }
+
+      line.lineData = op.value.newValue;
+    },
+    shouldMerge: (op, prev, element) => {
+      if (!prev) {
+        return false;
+      }
+
+      if (Date.now() - element.getTimestamp() < 500) {
+        if (
+          op.type === prev.type && // 相同类型
+          op.value.id === prev.value.id // 相同节点
+        ) {
+          return {
+            type: op.type,
+            value: {
+              ...op.value,
+              newValue: op.value.newValue,
+              oldValue: prev.value.oldValue,
+            },
+          };
+        }
+        return true;
+      }
+      return false;
+    },
+  };

package/src/operation-metas/delete-line.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type OperationMeta } from '@flowgram-vue/history';
+import { WorkflowDocument } from '@flowgram-vue/free-layout-core';
+import { type PluginContext } from '@flowgram-vue/core';
+
+import { type AddOrDeleteLineOperationValue, FreeOperationType } from '../types';
+import { FreeHistoryConfig } from '../free-history-config';
+import { baseOperationMeta } from './base';
+
+export const deleteLineOperationMeta: OperationMeta<
+  AddOrDeleteLineOperationValue,
+  PluginContext,
+  void
+> = {
+  ...baseOperationMeta,
+  type: FreeOperationType.deleteLine,
+  inverse: (op) => ({
+    ...op,
+    type: FreeOperationType.addLine,
+  }),
+  apply: (operation, ctx: PluginContext) => {
+    const document = ctx.get<WorkflowDocument>(WorkflowDocument);
+    document.removeNode(operation.value.id);
+  },
+  getLabel: (op, ctx) => 'Delete Line',
+  getDescription: (op, ctx) => {
+    const config = ctx.get<FreeHistoryConfig>(FreeHistoryConfig);
+    const { value } = op;
+    if (!value.from || !value.to) {
+      return 'Delete Line';
+    }
+
+    const fromName = config.getNodeLabelById(value.from);
+    const toName = config.getNodeLabelById(value.to);
+    return `Delete Line from ${fromName} to ${toName}`;
+  },
+};

package/src/operation-metas/delete-node.ts

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type PluginContext } from '@flowgram-vue/core';
+import { WorkflowDocument } from '@flowgram-vue/free-layout-core';
+import { type OperationMeta } from '@flowgram-vue/history';
+
+import { type AddOrDeleteWorkflowNodeOperationValue, FreeOperationType } from '../types';
+import { FreeHistoryConfig } from '../free-history-config';
+import { baseOperationMeta } from './base';
+
+export const deleteNodeOperationMeta: OperationMeta<
+  AddOrDeleteWorkflowNodeOperationValue,
+  PluginContext,
+  void
+> = {
+  ...baseOperationMeta,
+  type: FreeOperationType.deleteNode,
+  inverse: op => ({
+    ...op,
+    type: FreeOperationType.addNode,
+  }),
+  apply: (operation, ctx: PluginContext) => {
+    const document = ctx.get<WorkflowDocument>(WorkflowDocument);
+    const node = document.getNode(operation.value.node.id);
+    if (node) {
+      node.dispose();
+    }
+  },
+  getLabel: (op, ctx) => {
+    const config = ctx.get<FreeHistoryConfig>(FreeHistoryConfig);
+    return `Delete Node ${config.getNodeLabel(op.value.node)}`;
+  },
+  getDescription: (op, ctx) => {
+    const config = ctx.get<FreeHistoryConfig>(FreeHistoryConfig);
+    let desc = `Delete Node ${config.getNodeLabel(op.value.node)}`;
+    if (op.value.node.meta?.position) {
+      desc += ` at ${op.value.node.meta.position.x},${op.value.node.meta.position.y}`;
+    }
+    return desc;
+  },
+};

package/src/operation-metas/drag-nodes.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type OperationMeta } from '@flowgram-vue/history';
+import { WorkflowDocument } from '@flowgram-vue/free-layout-core';
+import { type PluginContext, TransformData } from '@flowgram-vue/core';
+
+import { type DragNodeOperationValue, FreeOperationType } from '../types';
+import { baseOperationMeta } from './base';
+
+export const dragNodesOperationMeta: OperationMeta<DragNodeOperationValue, PluginContext, void> = {
+  ...baseOperationMeta,
+  type: FreeOperationType.dragNodes,
+  inverse: (op) => ({
+    ...op,
+    value: {
+      ...op.value,
+      value: op.value.oldValue,
+      oldValue: op.value.value,
+    },
+  }),
+  apply: (operation, ctx) => {
+    operation.value.ids.forEach((id, index) => {
+      const document = ctx.get<WorkflowDocument>(WorkflowDocument);
+      const node = document.getNode(id);
+      if (!node) {
+        return;
+      }
+
+      const transform = node.getData(TransformData);
+      const point = operation.value.value[index];
+      transform.update({
+        position: {
+          x: point.x,
+          y: point.y,
+        },
+      });
+      document.layout.updateAffectedTransform(node);
+    });
+  },
+};

package/src/operation-metas/index.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { resetLayoutOperationMeta } from './reset-layout';
+import { moveChildNodesOperationMeta } from './move-child-nodes';
+import { dragNodesOperationMeta } from './drag-nodes';
+import { deleteNodeOperationMeta } from './delete-node';
+import { deleteLineOperationMeta } from './delete-line';
+import { changeLineDataOperationMeta } from './change-line-data';
+import { addNodeOperationMeta } from './add-node';
+import { addLineOperationMeta } from './add-line';
+
+export const operationMetas = [
+  addLineOperationMeta,
+  deleteLineOperationMeta,
+  addNodeOperationMeta,
+  deleteNodeOperationMeta,
+  resetLayoutOperationMeta,
+  dragNodesOperationMeta,
+  moveChildNodesOperationMeta,
+  changeLineDataOperationMeta,
+];

package/src/operation-metas/move-child-nodes.ts

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { OperationMeta } from '@flowgram-vue/history';
+import { WorkflowDocument } from '@flowgram-vue/free-layout-core';
+import { MoveChildNodesOperationValue, OperationType } from '@flowgram-vue/document';
+import { FlowNodeBaseType } from '@flowgram-vue/document';
+import { PluginContext, TransformData } from '@flowgram-vue/core';
+
+import { baseOperationMeta } from './base';
+
+export const moveChildNodesOperationMeta: OperationMeta<
+  MoveChildNodesOperationValue,
+  PluginContext,
+  void
+> = {
+  ...baseOperationMeta,
+  type: OperationType.moveChildNodes,
+  inverse: (op) => ({
+    ...op,
+    value: {
+      ...op.value,
+      fromIndex: op.value.toIndex,
+      toIndex: op.value.fromIndex,
+      fromParentId: op.value.toParentId,
+      toParentId: op.value.fromParentId,
+    },
+  }),
+  apply: (operation, ctx: PluginContext) => {
+    const document = ctx.get<WorkflowDocument>(WorkflowDocument);
+    document.moveChildNodes(operation.value);
+    const fromContainer = document.getNode(operation.value.fromParentId);
+    requestAnimationFrame(() => {
+      if (fromContainer && fromContainer.flowNodeType !== FlowNodeBaseType.ROOT) {
+        const fromContainerTransformData = fromContainer.getData(TransformData);
+        fromContainerTransformData.fireChange();
+      }
+    });
+  },
+};