feat: 处理polylineTool

Author: Yan Heng

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

@@ -50,7 +50,9 @@ class EllipseTool implements Tool {
   public onMouseUp({ app }: AppMouseEvent): void {
     app.setTool(selectTool);
     this.startPointer.setXY(0, 0);
-    this.ellipse && app.canvas.setActiveObject(this.ellipse);
+    if (this.ellipse) {
+      app.canvas.setActiveObject(this.ellipse);
+    }
     this.ellipse = null;
     app.render(true);
   }

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

@@ -12,14 +12,21 @@ class PolylineTool implements Tool {
   private polyline: Polyline | null = null;
 
   public onMouseDown({ app }: AppMouseEvent): void {
+    console.log('mouseDown');
+
     app.canvas.selection = false;
     this.points.push(app.pointer);
-    this.polyline = new Polyline(this.points, {
-      fill: 'transparent',
-      stroke: 'black',
-      strokeWidth: 2,
-    });
-    app.canvas.add(this.polyline);
+    if (!this.polyline) {
+      this.polyline = new Polyline(this.points, {
+        fill: 'transparent',
+        stroke: 'black',
+        strokeWidth: 2,
+      });
+      app.canvas.add(this.polyline);
+    } else {
+      this.polyline.points = this.points;
+      app.render();
+    }
   }
 
   public onMouseMove({ app }: AppMouseEvent): void {
@@ -34,13 +41,11 @@ class PolylineTool implements Tool {
     app.render(); // Call render after updating the polyline
   }
 
-  public onMouseUp({ app, event }: AppMouseEvent): void {
+  public onMouseDoubleClick({ app }: AppMouseEvent) {
     app.setTool(selectTool);
+
     if (this.polyline) {
-      // Use setTimeout to delay the selection after the fabric.js selection process is done
-      setTimeout(() => {
-        app.canvas.setActiveObject(this.polyline!, event.e);
-      }, 10);
+      app.canvas.setActiveObject(this.polyline);
     }
 
     this.points = [];

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

@@ -39,7 +39,9 @@ class RectTool implements Tool {
   public onMouseUp({ app }: AppMouseEvent): void {
     app.setTool(selectTool);
     this.startPointer.setXY(0, 0);
-    this.rectangle && app.canvas.setActiveObject(this.rectangle);
+    if (this.rectangle) {
+      app.canvas.setActiveObject(this.rectangle);
+    }
     this.rectangle = null;
     app.render(true);
   }

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

@@ -39,7 +39,9 @@ class TriangleTool implements Tool {
   public onMouseUp({ app }: AppMouseEvent): void {
     app.setTool(selectTool);
     this.startPointer.setXY(0, 0);
-    this.triangle && app.canvas.setActiveObject(this.triangle);
+    if (this.triangle) {
+      app.canvas.setActiveObject(this.triangle);
+    }
     this.triangle = null;
     app.render(true);
   }