update: 用序列化的方式实现命令存储

JessYan0913 · Aug 2, 2023 · 3fdd318 · 3fdd318
1 parent ce3e8c1
commit 3fdd318
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 15 deletions.
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -1,3 +1,4 @@
+export { default as Konva } from 'konva';
 export * from './app';
 export * from './types';
 export * from './decorators/expand-app';

diff --git a/packages/plugin-history/src/commands/add-object-cmd.ts b/packages/plugin-history/src/commands/add-object-cmd.ts
@@ -1,4 +1,4 @@
-import { App } from '@pictode/core';
+import { App, Konva } from '@pictode/core';
 
 import { Cmd } from '../types';
 
@@ -10,11 +10,11 @@ export class AddObjectCmd extends BaseCmd<Cmd.AddObjectOptions> {
   }
 
   public execute(): void {
-    this.app._add(...this.options.nodes);
+    this.app._add(...this.options.nodes.map((node) => Konva.Node.create(node)));
   }
 
   public undo(): void {
-    this.app._remove(...this.options.nodes);
+    this.app._remove(...this.options.nodes.map((node) => Konva.Node.create(node)));
   }
 }
 

diff --git a/packages/plugin-history/src/commands/remove-object-cmd.ts b/packages/plugin-history/src/commands/remove-object-cmd.ts
@@ -1,4 +1,4 @@
-import { App } from '@pictode/core';
+import { App, Konva } from '@pictode/core';
 
 import { Cmd } from '../types';
 
@@ -10,11 +10,11 @@ export class RemoveObjectCmd extends BaseCmd<Cmd.RemoveObjectOptions> {
   }
 
   public execute(): void {
-    this.app._remove(...this.options.nodes);
+    this.app._remove(...this.options.nodes.map((node) => Konva.Node.create(node)));
   }
 
   public undo(): void {
-    this.app._add(...this.options.nodes);
+    this.app._add(...this.options.nodes.map((node) => Konva.Node.create(node)));
   }
 }
 

diff --git a/packages/plugin-history/src/index.ts b/packages/plugin-history/src/index.ts
@@ -61,14 +61,14 @@ export class HistoryPlugin implements Plugin {
     if (!this.app || !this.history) {
       return;
     }
-    this.history.execute(new AddObjectCmd(this.app, { nodes }));
+    this.history.execute(new AddObjectCmd(this.app, { nodes: nodes.map((node) => node.toJSON()) }));
   };
 
   private onNodeRemove = ({ nodes }: EventArgs['node:removed']) => {
     if (!this.app || !this.history) {
       return;
     }
-    this.history.execute(new RemoveObjectCmd(this.app, { nodes }));
+    this.history.execute(new RemoveObjectCmd(this.app, { nodes: nodes.map((node) => node.toJSON()) }));
   };
 
   private onNodeTransformStart = ({ nodes }: EventArgs['node:transform:start']) => {
@@ -79,7 +79,12 @@ export class HistoryPlugin implements Plugin {
     if (!this.app || !this.history) {
       return;
     }
-    this.history.execute(new ModifiedObjectCmd(this.app, { oldNodes: this.oldNodes, newNodes: nodes }));
+    this.history.execute(
+      new ModifiedObjectCmd(this.app, {
+        oldNodes: this.oldNodes.map((node) => node.toJSON()),
+        newNodes: nodes.map((node) => node.toJSON()),
+      })
+    );
   };
 }
 

diff --git a/packages/plugin-history/src/types.ts b/packages/plugin-history/src/types.ts
@@ -1,5 +1,3 @@
-import { KonvaNode } from '@pictode/core';
-
 import { HistoryPlugin } from './index';
 
 declare module '@pictode/core' {
@@ -36,16 +34,16 @@ export namespace Cmd {
   }
 
   export interface AddObjectOptions {
-    nodes: KonvaNode[];
+    nodes: string[];
   }
 
   export interface RemoveObjectOptions {
-    nodes: KonvaNode[];
+    nodes: string[];
   }
 
   export interface ModifiedObjectOptions {
-    oldNodes: KonvaNode[];
-    newNodes: KonvaNode[];
+    oldNodes: string[];
+    newNodes: string[];
   }
 }