feat: 更新line-tool为polyline-tool

Author: Yan Heng

main/src/view/canvas/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import { App, ellipseTool, lineTool, rectTool, selectTool, triangleTool } from '@pictode/core';
+import { App, ellipseTool, polylineTool, rectTool, selectTool, triangleTool } from '@pictode/core';
 
 const containerRef = ref<HTMLDivElement>();
 
@@ -20,7 +20,7 @@ onMounted(() => {
       <button @click="app.setTool(rectTool)">矩形⬜️</button>
       <button @click="app.setTool(ellipseTool)">圆形⭕️</button>
       <button @click="app.setTool(triangleTool)">三角形🔺</button>
-      <button @click="app.setTool(lineTool)">线条📉</button>
+      <button @click="app.setTool(polylineTool)">线条📉</button>
     </div>
     <div ref="containerRef" class="container"></div>
   </div>

packages/core/src/customs/line.ts renamed to packages/core/src/customs/polyline.ts

@@ -1,9 +1,9 @@
 import { fabric } from 'fabric';
 
-export class Line extends fabric.Line {
+export class Polyline extends fabric.Polyline {
   public render(ctx: CanvasRenderingContext2D): void {
     super.render(ctx);
   }
 }
 
-export default Line;
+export default Polyline;

packages/core/src/index.ts

@@ -5,4 +5,4 @@ export * from './tools/rect-tool';
 export * from './tools/select-tool';
 export * from './tools/ellipse-tool';
 export * from './tools/triangle-tool';
-export * from './tools/line-tool';
+export * from './tools/polyline-tool';

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

@@ -0,0 +1,53 @@
+import { fabric } from 'fabric';
+
+import { Polyline } from '../customs/polyline';
+import { AppMouseEvent, ToolStrategy } from '../types';
+
+import { selectTool } from './select-tool';
+
+class PolylineTool implements ToolStrategy {
+  public drawable: boolean = true;
+  private points: fabric.Point[] = [];
+  private polyline: Polyline | null = null;
+
+  public onMouseDown({ app }: AppMouseEvent): void {
+    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);
+  }
+
+  public onMouseMove({ app }: AppMouseEvent): void {
+    if (!this.polyline) {
+      return;
+    }
+    app.canvas.discardActiveObject();
+    app.render();
+    const pointer = app.pointer;
+    const points = this.points.concat(pointer);
+    this.polyline.set({ points });
+    app.render(); // Call render after updating the polyline
+  }
+
+  public onMouseUp({ app, event }: AppMouseEvent): void {
+    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);
+    }
+
+    this.points = [];
+    this.polyline = null;
+    app.render(true);
+  }
+}
+
+export const polylineTool = new PolylineTool();
+
+export default polylineTool;