feat: draw path tool

F-star · Feb 17, 2024 · b0c8b49 · b0c8b49
1 parent fe362ff
commit b0c8b49
Show file tree

Hide file tree

Showing 51 changed files with 1,324 additions and 381 deletions.
diff --git a/packages/core/src/clipboard.ts b/packages/core/src/clipboard.ts
@@ -1,6 +1,6 @@
 import { arrMap, noop, omit } from '@suika/common';
 
-import { AddShapeCommand } from './commands/add_shape';
+import { AddGraphCmd } from './commands/add_graphs';
 import { Editor } from './editor';
 import { Graph } from './graphs';
 import { IEditorPaperData } from './type';
@@ -120,7 +120,7 @@ export class ClipboardManager {
 
     // TODO: duplicated objectName should be renamed
     editor.commandManager.pushCommand(
-      new AddShapeCommand('pasted graphs', editor, pastedGraphs),
+      new AddGraphCmd('pasted graphs', editor, pastedGraphs),
     );
     editor.selectedElements.setItems(pastedGraphs);
 

diff --git a/packages/core/src/commands/add_shape.ts → packages/core/src/commands/add_graphs.ts b/packages/core/src/commands/add_shape.ts → packages/core/src/commands/add_graphs.ts
@@ -2,10 +2,7 @@ import { Editor } from '../editor';
 import { Graph } from '../graphs';
 import { ICommand } from './type';
 
-/**
- * add elements
- */
-export class AddShapeCommand implements ICommand {
+export class AddGraphCmd implements ICommand {
   constructor(
     public desc: string,
     private editor: Editor,

diff --git a/packages/core/src/commands/command_manager.ts b/packages/core/src/commands/command_manager.ts
@@ -13,16 +13,25 @@ interface Events {
   beforeExecCmd(): void;
 }
 
+interface ICommandItem {
+  command: ICommand;
+  /**
+   * consider the continue commands marked "isBatched" as one macro command
+   */
+  isBatched?: boolean;
+}
+
 /**
  * Command Manager
  *
  * reference: https://mp.weixin.qq.com/s/JBhXeFPTw8O34vOtk05cQg
  */
 export class CommandManager {
-  redoStack: ICommand[] = [];
-  undoStack: ICommand[] = [];
+  redoStack: ICommandItem[] = [];
+  undoStack: ICommandItem[] = [];
   private isEnableRedoUndo = true;
   private emitter = new EventEmitter<Events>();
+  private isBatching = false;
 
   constructor(private editor: Editor) {}
 
@@ -31,14 +40,33 @@ export class CommandManager {
       return;
     }
     if (this.redoStack.length > 0) {
-      const command = this.redoStack.pop()!;
-      console.log(
-        `%c Redo %c ${command.desc}`,
-        'background: #f04; color: #ee0',
-        '',
-      );
-      this.undoStack.push(command);
-      command.redo();
+      const topCmdItem = this.redoStack.pop()!;
+      const isBatched = topCmdItem.isBatched;
+      const cmdItems: ICommandItem[] = [topCmdItem];
+
+      if (isBatched) {
+        // if the command is batched, redo all the commands marked "isBatched"
+        while (this.redoStack.length > 0 && this.redoStack.at(-1)!.isBatched) {
+          const currCmdItem = this.redoStack.pop()!;
+          cmdItems.push(currCmdItem);
+        }
+        console.log('------- [redo] batched start -----');
+      }
+
+      for (const cmdItem of cmdItems) {
+        const command = cmdItem.command;
+        console.log(
+          `%c Redo %c ${command.desc}`,
+          'background: #f04; color: #ee0',
+          '',
+        );
+        this.undoStack.push(cmdItem);
+        command.redo();
+      }
+
+      if (isBatched) {
+        console.log('------- [redo] batched end -----');
+      }
 
       this.editor.sceneGraph.render();
       this.emitStatusChange();
@@ -49,14 +77,33 @@ export class CommandManager {
       return;
     }
     if (this.undoStack.length > 0) {
-      const command = this.undoStack.pop()!;
-      console.log(
-        `%c Undo %c ${command.desc}`,
-        'background: #40f; color: #eee',
-        '',
-      );
-      this.redoStack.push(command);
-      command.undo();
+      const topCmdItem = this.undoStack.pop()!;
+      const isBatched = topCmdItem.isBatched;
+      const cmdItems: ICommandItem[] = [topCmdItem];
+
+      if (isBatched) {
+        // if the command is batched, undo all the commands marked "isBatched"
+        while (this.undoStack.length > 0 && this.undoStack.at(-1)!.isBatched) {
+          const currCmdItem = this.undoStack.pop()!;
+          cmdItems.push(currCmdItem);
+        }
+        console.log('------- [undo] batched start -----');
+      }
+
+      for (const cmdItem of cmdItems) {
+        const command = cmdItem.command;
+        console.log(
+          `%c Undo %c ${command.desc}`,
+          'background: #40f; color: #eee',
+          '',
+        );
+        this.redoStack.push(cmdItem);
+        command.undo();
+      }
+
+      if (isBatched) {
+        console.log('------- [undo] batched end -----');
+      }
 
       this.editor.sceneGraph.render();
       this.emitStatusChange();
@@ -68,14 +115,24 @@ export class CommandManager {
   disableRedoUndo() {
     this.isEnableRedoUndo = false;
   }
+  batchCommandStart() {
+    this.isBatching = true;
+  }
+  batchCommandEnd() {
+    this.isBatching = false;
+  }
   pushCommand(command: ICommand) {
     this.emitter.emit('beforeExecCmd');
     console.log(
       `%c Exec %c ${command.desc}`,
       'background: #222; color: #bada55',
       '',
     );
-    this.undoStack.push(command);
+    const commandItem: ICommandItem = { command };
+    if (this.isBatching) {
+      commandItem.isBatched = true;
+    }
+    this.undoStack.push(commandItem);
     this.redoStack = [];
     this.emitStatusChange();
   }

diff --git a/packages/core/src/commands/group.ts b/packages/core/src/commands/group.ts
@@ -3,7 +3,7 @@ import { Graph } from '../graphs';
 import { Group } from '../group_manager';
 import { ICommand } from './type';
 
-export class GroupElements implements ICommand {
+export class GroupCmd implements ICommand {
   private groupedElSet = new Set<Graph>();
   /** prevGraphId -> groupInfo */
   private prevGroupedElInfoMap = new Map<

diff --git a/packages/core/src/commands/index.ts b/packages/core/src/commands/index.ts
@@ -1,8 +1,8 @@
-export * from './add_shape';
+export * from './add_graphs';
 export * from './align';
 export * from './command_manager';
 export * from './group';
-export * from './move_elements';
-export * from './remove_element';
+export * from './move_graphs';
+export * from './remove_graphs';
 export * from './set_elements_attrs';
 export * from './type';
diff --git a/packages/core/src/commands/move_elements.ts b/packages/core/src/commands/move_elements.ts
diff --git a/packages/core/src/commands/move_graphs.ts b/packages/core/src/commands/move_graphs.ts
@@ -0,0 +1,25 @@
+import { Graph } from '../graphs';
+import { ICommand } from './type';
+
+export class MoveGraphsCommand implements ICommand {
+  constructor(
+    public desc: string,
+    private graphs: Graph[],
+    private dx: number,
+    private dy: number,
+  ) {}
+  redo() {
+    const { dx, dy } = this;
+    for (let i = 0, len = this.graphs.length; i < len; i++) {
+      const element = this.graphs[i];
+      element.updateAttrs({ x: element.x + dx, y: element.y + dy });
+    }
+  }
+  undo() {
+    const { dx, dy } = this;
+    for (let i = 0, len = this.graphs.length; i < len; i++) {
+      const element = this.graphs[i];
+      element.updateAttrs({ x: element.x - dx, y: element.y - dy });
+    }
+  }
+}
diff --git a/packages/core/src/commands/remove_element.ts → packages/core/src/commands/remove_graphs.ts b/packages/core/src/commands/remove_element.ts → packages/core/src/commands/remove_graphs.ts
@@ -2,7 +2,7 @@ import { Editor } from '../editor';
 import { Graph } from '../graphs';
 import { ICommand } from './type';
 
-export class RemoveElement implements ICommand {
+export class RemoveGraphsCmd implements ICommand {
   private removedIndexes: number[] = [];
 
   constructor(

diff --git a/packages/core/src/commands/set_elements_attrs.ts b/packages/core/src/commands/set_elements_attrs.ts
@@ -1,4 +1,4 @@
-import { Graph } from '../graphs';
+import { Graph, ISegment } from '../graphs';
 import { ITexture } from '../texture';
 import { ICommand } from './type';
 
@@ -15,12 +15,10 @@ export type ISetElementsAttrsType = Partial<{
   objectName: string;
   visible: boolean;
   lock: boolean;
+  pathData: ISegment[][];
 }>;
 
-/**
- * 创建矩形
- */
-export class SetElementsAttrs implements ICommand {
+export class SetGraphsAttrsCmd implements ICommand {
   static readonly type = 'SetElementsAttrs';
   constructor(
     public desc: string,
@@ -38,16 +36,16 @@ export class SetElementsAttrs implements ICommand {
     const { elements, attrs } = this;
     for (let i = 0, len = this.elements.length; i < len; i++) {
       if (Array.isArray(attrs)) {
-        elements[i].setAttrs(attrs[i]);
+        elements[i].updateAttrs(attrs[i]);
       } else {
-        elements[i].setAttrs(attrs);
+        elements[i].updateAttrs(attrs);
       }
     }
   }
   undo() {
     const { elements, prevAttrs } = this;
     for (let i = 0, len = this.elements.length; i < len; i++) {
-      elements[i].setAttrs(prevAttrs[i]);
+      elements[i].updateAttrs(prevAttrs[i]);
     }
   }
 }
diff --git a/packages/core/src/control_handle_manager/control_handle.ts b/packages/core/src/control_handle_manager/control_handle.ts
@@ -7,14 +7,18 @@ type HitTest = (
   x: number,
   y: number,
   tol: number,
-  rect: IRectWithRotation,
+  rect: IRectWithRotation | null,
 ) => boolean;
 
-type GetCursorFn = (type: string, selectedBox: IRectWithRotation) => ICursor;
+type GetCursorFn = (
+  type: string,
+  selectedBox: IRectWithRotation | null,
+) => ICursor;
 
 export class ControlHandle {
   cx: number;
   cy: number;
+  rotation?: number;
   type: string;
   graph: Graph;
   padding: number;
@@ -25,13 +29,17 @@ export class ControlHandle {
     cx?: number;
     cy?: number;
     type: string;
+    rotation?: number;
     padding?: number;
     graph: Graph;
     hitTest?: HitTest;
     getCursor: GetCursorFn;
   }) {
     this.cx = attrs.cx ?? 0;
     this.cy = attrs.cy ?? 0;
+    if (attrs.rotation !== undefined) {
+      this.rotation = attrs.rotation;
+    }
     this.type = attrs.type;
     this.padding = attrs.padding ?? 0;
     this.graph = attrs.graph;