@flowgram-vue/free-history-plugin 0.2.0

package/dist/index.js

@@ -0,0 +1,672 @@
+import { HistoryService, HistoryContainerModule, OperationContribution } from '@flowgram-vue/history';
+export * from '@flowgram-vue/history';
+import { definePluginCreator, bindContributions, TransformData, PositionData, useService } from '@flowgram-vue/core';
+import { cloneDeep, isEqual } from 'lodash-es';
+import { injectable, inject } from 'inversify';
+import { DisposableCollection } from '@flowgram-vue/utils';
+import { WorkflowContentChangeType, WorkflowOperationBaseService, WorkflowDocument, WorkflowDragService, WorkflowResetLayoutService, WorkflowLinesManager } from '@flowgram-vue/free-layout-core';
+import { OperationType, FlowNodeBaseType } from '@flowgram-vue/document';
+import { ref, onBeforeUnmount } from 'vue';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var HistoryEntityManager = class {
+  constructor() {
+    this._entityDataValues = /* @__PURE__ */ new Map();
+    this._toDispose = new DisposableCollection();
+  }
+  addEntityData(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) {
+    return this._entityDataValues.get(entityData);
+  }
+  setValue(entityData, value) {
+    return this._entityDataValues.set(entityData, value);
+  }
+  dispose() {
+    this._entityDataValues.clear();
+    this._toDispose.dispose();
+  }
+};
+HistoryEntityManager = __decorateClass([
+  injectable()
+], HistoryEntityManager);
+
+// src/types.ts
+var FreeOperationType = /* @__PURE__ */ ((FreeOperationType2) => {
+  FreeOperationType2["addLine"] = "addLine";
+  FreeOperationType2["deleteLine"] = "deleteLine";
+  FreeOperationType2["changeLineData"] = "changeLineData";
+  FreeOperationType2["moveNode"] = "moveNode";
+  FreeOperationType2["addNode"] = "addNode";
+  FreeOperationType2["deleteNode"] = "deleteNode";
+  FreeOperationType2["changeNodeData"] = "changeNodeData";
+  FreeOperationType2["resetLayout"] = "resetLayout";
+  FreeOperationType2["dragNodes"] = "dragNodes";
+  FreeOperationType2["moveChildNodes"] = "moveChildNodes";
+  return FreeOperationType2;
+})(FreeOperationType || {});
+
+// src/handlers/drag-nodes-handler.ts
+var DragNodesHandler = class {
+  handle(event) {
+    if (event.type === "onDragEnd") {
+      this._dragNode(event);
+    }
+  }
+  _dragNode(event) {
+    this._historyService.pushOperation(
+      {
+        type: "dragNodes" /* 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 }
+    );
+  }
+};
+__decorateClass([
+  inject(HistoryService)
+], DragNodesHandler.prototype, "_historyService", 2);
+DragNodesHandler = __decorateClass([
+  injectable()
+], DragNodesHandler);
+var FreeHistoryConfig = class {
+  constructor() {
+    this.enableChangeNode = true;
+    this.enableChangeLineData = true;
+    this.enable = false;
+    this.nodeToJSON = (node) => node.toJSON();
+    this.getNodeLabelById = (id) => id;
+    this.getNodeLabel = (node) => node.id;
+    this.getBlockLabel = (node) => node.id;
+    this.getNodeURI = (id) => `node:${id}`;
+    this.getLineURI = (id) => `line:${id}`;
+  }
+  init(ctx, options) {
+    this.enable = !!options?.enable;
+    if (options.nodeToJSON) {
+      this.nodeToJSON = options.nodeToJSON(ctx);
+    }
+    if (options.getNodeLabelById) {
+      this.getNodeLabelById = options.getNodeLabelById(ctx);
+    }
+    if (options.getNodeLabel) {
+      this.getNodeLabel = options.getNodeLabel(ctx);
+    }
+    if (options.getBlockLabel) {
+      this.getBlockLabel = options.getBlockLabel(ctx);
+    }
+    if (options.getNodeURI) {
+      this.getNodeURI = options.getNodeURI(ctx);
+    }
+    if (options.getLineURI) {
+      this.getLineURI = options.getLineURI(ctx);
+    }
+    if (options.enableChangeNode !== void 0) {
+      this.enableChangeNode = options.enableChangeNode;
+    }
+    if (options.enableChangeLineData !== void 0) {
+      this.enableChangeLineData = options.enableChangeLineData;
+    }
+  }
+};
+FreeHistoryConfig = __decorateClass([
+  injectable()
+], FreeHistoryConfig);
+var deleteNodeChange = {
+  type: WorkflowContentChangeType.DELETE_NODE,
+  toOperation: (event, ctx) => {
+    const config = ctx.get(FreeHistoryConfig);
+    const node = event.entity;
+    const json = event.toJSON();
+    const parentID = node.parent?.id;
+    return {
+      type: "deleteNode" /* deleteNode */,
+      value: {
+        node: json,
+        parentID
+      },
+      uri: config.getNodeURI(node.id)
+    };
+  }
+};
+var deleteLineChange = {
+  type: WorkflowContentChangeType.DELETE_LINE,
+  toOperation: (event, ctx) => {
+    const config = ctx.get(FreeHistoryConfig);
+    const line = event.entity;
+    const value = {
+      from: line.info.from,
+      to: line.info.to || "",
+      fromPort: line.info.fromPort || "",
+      toPort: line.info.toPort || "",
+      data: line.info.data,
+      id: line.id
+    };
+    return {
+      type: "deleteLine" /* deleteLine */,
+      value,
+      uri: config.getNodeURI(line.id)
+    };
+  }
+};
+var changeLineData = {
+  type: WorkflowContentChangeType.LINE_DATA_CHANGE,
+  toOperation: (event, ctx) => {
+    const config = ctx.get(FreeHistoryConfig);
+    const line = event.entity;
+    const value = {
+      id: line.id,
+      oldValue: event.oldValue,
+      newValue: line.lineData
+    };
+    return {
+      type: "changeLineData" /* changeLineData */,
+      value,
+      uri: config.getLineURI(line.id)
+    };
+  }
+};
+var addNodeChange = {
+  type: WorkflowContentChangeType.ADD_NODE,
+  toOperation: (event, ctx) => {
+    const config = ctx.get(FreeHistoryConfig);
+    const document = ctx.get(WorkflowDocument);
+    const node = event.entity;
+    const parentID = node.parent?.id;
+    const json = document.toNodeJSON(node);
+    return {
+      type: "addNode" /* addNode */,
+      value: {
+        node: json,
+        parentID
+      },
+      uri: config.getNodeURI(node.id)
+    };
+  }
+};
+var addLineChange = {
+  type: WorkflowContentChangeType.ADD_LINE,
+  toOperation: (event, ctx) => {
+    const config = ctx.get(FreeHistoryConfig);
+    const line = event.entity;
+    const value = {
+      from: line.info.from,
+      to: line.info.to || "",
+      fromPort: line.info.fromPort || "",
+      toPort: line.info.toPort || "",
+      data: line.info.data,
+      id: line.id
+    };
+    return {
+      type: "addLine" /* addLine */,
+      value,
+      uri: config.getLineURI(line.id)
+    };
+  }
+};
+
+// src/changes/index.ts
+var changes_default = [addLineChange, deleteLineChange, addNodeChange, deleteNodeChange, changeLineData];
+
+// src/handlers/change-content-handler.ts
+var ChangeContentHandler = class {
+  handle(event, ctx) {
+    if (!this._historyService.undoRedoService.canPush()) {
+      return;
+    }
+    if (!this._historyConfig.enableChangeLineData && event.type === WorkflowContentChangeType.LINE_DATA_CHANGE) {
+      return;
+    }
+    const change = changes_default.find((c) => c.type === event.type);
+    if (!change) {
+      return;
+    }
+    const operation = change.toOperation(event, ctx);
+    if (!operation) {
+      return;
+    }
+    this._historyService.pushOperation(operation, { noApply: true });
+  }
+};
+__decorateClass([
+  inject(HistoryService)
+], ChangeContentHandler.prototype, "_historyService", 2);
+__decorateClass([
+  inject(FreeHistoryConfig)
+], ChangeContentHandler.prototype, "_historyConfig", 2);
+ChangeContentHandler = __decorateClass([
+  injectable()
+], ChangeContentHandler);
+
+// src/operation-metas/base.ts
+var baseOperationMeta = {
+  shouldMerge: (_op, prev, element) => {
+    if (!prev) {
+      return false;
+    }
+    if (
+      // 合并500ms内的操作, 如删除节点会联动删除线条
+      Date.now() - element.getTimestamp() < 500
+    ) {
+      return true;
+    }
+    return false;
+  }
+};
+
+// src/operation-metas/reset-layout.ts
+var resetLayoutOperationMeta = {
+  ...baseOperationMeta,
+  type: "resetLayout" /* resetLayout */,
+  inverse: (op) => ({
+    ...op,
+    value: {
+      ...op.value,
+      value: op.value.oldValue,
+      oldValue: op.value.value
+    }
+  }),
+  apply: async (operation, ctx) => {
+    const reset = ctx.get(WorkflowResetLayoutService);
+    await reset.layoutToPositions(operation.value.ids, operation.value.value);
+  },
+  shouldMerge: () => false
+};
+var moveChildNodesOperationMeta = {
+  ...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) => {
+    const document = ctx.get(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();
+      }
+    });
+  }
+};
+var dragNodesOperationMeta = {
+  ...baseOperationMeta,
+  type: "dragNodes" /* 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);
+      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);
+    });
+  }
+};
+var deleteNodeOperationMeta = {
+  ...baseOperationMeta,
+  type: "deleteNode" /* deleteNode */,
+  inverse: (op) => ({
+    ...op,
+    type: "addNode" /* addNode */
+  }),
+  apply: (operation, ctx) => {
+    const document = ctx.get(WorkflowDocument);
+    const node = document.getNode(operation.value.node.id);
+    if (node) {
+      node.dispose();
+    }
+  },
+  getLabel: (op, ctx) => {
+    const config = ctx.get(FreeHistoryConfig);
+    return `Delete Node ${config.getNodeLabel(op.value.node)}`;
+  },
+  getDescription: (op, ctx) => {
+    const config = ctx.get(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;
+  }
+};
+var deleteLineOperationMeta = {
+  ...baseOperationMeta,
+  type: "deleteLine" /* deleteLine */,
+  inverse: (op) => ({
+    ...op,
+    type: "addLine" /* addLine */
+  }),
+  apply: (operation, ctx) => {
+    const document = ctx.get(WorkflowDocument);
+    document.removeNode(operation.value.id);
+  },
+  getLabel: (op, ctx) => "Delete Line",
+  getDescription: (op, ctx) => {
+    const config = ctx.get(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}`;
+  }
+};
+var changeLineDataOperationMeta = {
+  ...baseOperationMeta,
+  type: "changeLineData" /* changeLineData */,
+  inverse: (op) => ({
+    ...op,
+    value: {
+      ...op.value,
+      newValue: op.value.oldValue,
+      oldValue: op.value.newValue
+    }
+  }),
+  apply: (op, ctx) => {
+    const linesManager = ctx.get(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;
+  }
+};
+var addNodeOperationMeta = {
+  ...baseOperationMeta,
+  type: "addNode" /* addNode */,
+  inverse: (op) => ({
+    ...op,
+    type: "deleteNode" /* deleteNode */
+  }),
+  apply: async (operation, ctx) => {
+    const document = ctx.get(WorkflowDocument);
+    await document.createWorkflowNode(
+      cloneDeep(operation.value.node),
+      false,
+      operation.value.parentID
+    );
+  },
+  getLabel: (op, ctx) => {
+    const config = ctx.get(FreeHistoryConfig);
+    return `Create Node ${config.getNodeLabel(op.value.node)}`;
+  },
+  getDescription: (op, ctx) => {
+    const config = ctx.get(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;
+  }
+};
+var addLineOperationMeta = {
+  ...baseOperationMeta,
+  type: "addLine" /* addLine */,
+  inverse: (op) => ({
+    ...op,
+    type: "deleteLine" /* deleteLine */
+  }),
+  apply: (operation, ctx) => {
+    const linesManager = ctx.get(WorkflowLinesManager);
+    linesManager.createLine({
+      ...operation.value,
+      key: operation.value.id
+    });
+  },
+  getLabel: (op, ctx) => "Create Line",
+  getDescription: (op, ctx) => {
+    const config = ctx.get(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}`;
+  }
+};
+
+// src/operation-metas/index.ts
+var operationMetas = [
+  addLineOperationMeta,
+  deleteLineOperationMeta,
+  addNodeOperationMeta,
+  deleteNodeOperationMeta,
+  resetLayoutOperationMeta,
+  dragNodesOperationMeta,
+  moveChildNodesOperationMeta,
+  changeLineDataOperationMeta
+];
+
+// src/free-history-registers.ts
+var FreeHistoryRegisters = class {
+  registerOperationMeta(operationRegistry) {
+    operationMetas.forEach((operationMeta) => {
+      operationRegistry.registerOperationMeta(operationMeta);
+    });
+  }
+};
+FreeHistoryRegisters = __decorateClass([
+  injectable()
+], FreeHistoryRegisters);
+var FreeHistoryManager = class {
+  constructor() {
+    this._toDispose = new DisposableCollection();
+  }
+  onInit(ctx, opts) {
+    const document = ctx.get(WorkflowDocument);
+    const historyService = ctx.get(HistoryService);
+    const dragService = ctx.get(WorkflowDragService);
+    const resetLayoutService = ctx.get(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: "resetLayout" /* 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 = {
+          ids: [event.node.id],
+          value: [event.newPosition],
+          oldValue: [event.oldPosition]
+        };
+        historyService.pushOperation(
+          {
+            type: "dragNodes" /* dragNodes */,
+            value
+          },
+          {
+            noApply: true
+          }
+        );
+      })
+    ]);
+  }
+  dispose() {
+    this._entityManager.dispose();
+    this._toDispose.dispose();
+  }
+};
+__decorateClass([
+  inject(DragNodesHandler)
+], FreeHistoryManager.prototype, "_dragNodesHandler", 2);
+__decorateClass([
+  inject(ChangeContentHandler)
+], FreeHistoryManager.prototype, "_changeContentHandler", 2);
+__decorateClass([
+  inject(HistoryEntityManager)
+], FreeHistoryManager.prototype, "_entityManager", 2);
+__decorateClass([
+  inject(WorkflowOperationBaseService)
+], FreeHistoryManager.prototype, "_operationService", 2);
+FreeHistoryManager = __decorateClass([
+  injectable()
+], FreeHistoryManager);
+
+// src/create-free-history-plugin.ts
+var createFreeHistoryPlugin = definePluginCreator({
+  onBind: ({ bind }) => {
+    bindContributions(bind, FreeHistoryRegisters, [OperationContribution]);
+    bind(FreeHistoryConfig).toSelf().inSingletonScope();
+    bind(FreeHistoryManager).toSelf().inSingletonScope();
+    bind(HistoryEntityManager).toSelf().inSingletonScope();
+    bind(DragNodesHandler).toSelf().inSingletonScope();
+    bind(ChangeContentHandler).toSelf().inSingletonScope();
+  },
+  onInit(ctx, opts) {
+    ctx.get(FreeHistoryConfig).init(ctx, opts);
+    if (!opts.enable) {
+      return;
+    }
+    ctx.get(FreeHistoryManager).onInit(ctx, opts);
+  },
+  onDispose(ctx) {
+    ctx.get(HistoryEntityManager).dispose();
+  },
+  containerModules: [HistoryContainerModule]
+});
+function useUndoRedo() {
+  const historyService = useService(HistoryService);
+  const canUndo = ref(false);
+  const canRedo = ref(false);
+  const toDispose = historyService.undoRedoService.onChange(() => {
+    canUndo.value = historyService.canUndo();
+    canRedo.value = historyService.canRedo();
+  });
+  onBeforeUnmount(() => {
+    toDispose.dispose();
+  });
+  return {
+    canUndo,
+    canRedo,
+    undo: () => historyService.undo(),
+    redo: () => historyService.redo()
+  };
+}
+
+export { FreeHistoryConfig, FreeHistoryRegisters, FreeOperationType, createFreeHistoryPlugin, useUndoRedo };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map