feat: 调整工具

Author: Yan Heng

packages/core/src/tools/rect-tool.ts

@@ -1,40 +1,40 @@
+import { fabric } from 'fabric';
+
 import { Rect } from '../customs/rect';
 import { AppMouseEvent, ToolStrategy } from '../types';
 
 export class RectTool implements ToolStrategy {
-  private isDrawing: boolean = false;
-  private rect: Rect | null = null;
+  private startPointer: fabric.Point = new fabric.Point(0, 0);
+  private rectangle: Rect | null = null;
 
   public onMouseDown({ app }: AppMouseEvent): void {
-    this.isDrawing = true;
-    const pointer = app.pointer;
-    this.rect = new Rect({
-      left: pointer.x,
-      top: pointer.y,
-      width: 0,
-      height: 0,
+    this.startPointer = app.pointer;
+    this.rectangle = new Rect({
+      left: this.startPointer.x,
+      top: this.startPointer.y,
+      width: 10,
+      height: 10,
       fill: 'transparent',
       stroke: 'black',
       strokeWidth: 2,
     });
-    app.canvas.add(this.rect);
+    app.canvas.add(this.rectangle);
   }
 
   public onMouseMove({ app }: AppMouseEvent): void {
-    if (!this.isDrawing || !this.rect) {
+    if (!this.rectangle) {
       return;
     }
-    const pointer = app.pointer;
-    this.rect.set({
-      width: pointer.x - (this.rect.left ?? 0),
-      height: pointer.y - (this.rect.top ?? 0),
-    });
+    app.canvas.discardActiveObject();
+    app.render();
+    const width = app.pointer.x - this.startPointer.x;
+    const height = app.pointer.y - this.startPointer.y;
+    this.rectangle.set({ width, height });
     app.render();
   }
 
   public onMouseUp(): void {
-    this.isDrawing = false;
-    this.rect = null;
+    this.rectangle = null;
   }
 }
 

packages/core/src/tools/select-tool.ts

@@ -11,9 +11,7 @@ export class SelectTool implements ToolStrategy {
 
   public onMouseMove(): void {}
 
-  public onMouseUp({ app }: AppMouseEvent): void {
-    app.canvas.selection = false;
-  }
+  public onMouseUp(): void {}
 }
 
 export default SelectTool;