From 6881ab6c736f299848f7176ed5d1619c77411a3a Mon Sep 17 00:00:00 2001
From: JessYan <52144974+JessYan0913@users.noreply.github.com>
Date: Mon, 24 Jul 2023 23:36:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E7=BA=BF=E5=B7=A5?=
 =?UTF-8?q?=E5=85=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 main/src/view/canvas/index.vue       |  3 +-
 packages/core/src/customs/line.ts    |  9 ++++++
 packages/core/src/index.ts           |  1 +
 packages/core/src/tools/line-tool.ts | 45 ++++++++++++++++++++++++++++
 4 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 packages/core/src/customs/line.ts
 create mode 100644 packages/core/src/tools/line-tool.ts

diff --git a/main/src/view/canvas/index.vue b/main/src/view/canvas/index.vue
index 75ff4294..531e6324 100644
--- a/main/src/view/canvas/index.vue
+++ b/main/src/view/canvas/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import { App, ellipseTool, rectTool, selectTool, triangleTool } from '@pictode/core';
+import { App, ellipseTool, lineTool, rectTool, selectTool, triangleTool } from '@pictode/core';
 
 const containerRef = ref<HTMLDivElement>();
 
@@ -20,6 +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>
     </div>
     <div ref="containerRef" class="container"></div>
   </div>
diff --git a/packages/core/src/customs/line.ts b/packages/core/src/customs/line.ts
new file mode 100644
index 00000000..d0d975cb
--- /dev/null
+++ b/packages/core/src/customs/line.ts
@@ -0,0 +1,9 @@
+import { fabric } from 'fabric';
+
+export class Line extends fabric.Line {
+  public render(ctx: CanvasRenderingContext2D): void {
+    super.render(ctx);
+  }
+}
+
+export default Line;
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index d1d24a27..625fae1c 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -5,3 +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';
diff --git a/packages/core/src/tools/line-tool.ts b/packages/core/src/tools/line-tool.ts
new file mode 100644
index 00000000..66c4c274
--- /dev/null
+++ b/packages/core/src/tools/line-tool.ts
@@ -0,0 +1,45 @@
+import { fabric } from 'fabric';
+
+import { Line } from '../customs/line';
+import { AppMouseEvent, ToolStrategy } from '../types';
+
+import { selectTool } from './select-tool';
+
+class LineTool implements ToolStrategy {
+  public drawable: boolean = true;
+  private startPointer: fabric.Point = new fabric.Point(0, 0);
+  private line: Line | null = null;
+
+  public onMouseDown({ app }: AppMouseEvent): void {
+    app.canvas.selection = false;
+    this.startPointer = app.pointer;
+    this.line = new Line([this.startPointer.x, this.startPointer.y, this.startPointer.x, this.startPointer.y], {
+      fill: 'transparent',
+      stroke: 'black',
+      strokeWidth: 2,
+    });
+    app.canvas.add(this.line);
+  }
+
+  public onMouseMove({ app }: AppMouseEvent): void {
+    if (!this.line) {
+      return;
+    }
+    const endX = app.pointer.x;
+    const endY = app.pointer.y;
+    this.line.set({ x2: endX, y2: endY });
+    app.render(); // Call render after updating the line
+  }
+
+  public onMouseUp({ app }: AppMouseEvent): void {
+    app.setTool(selectTool);
+    this.startPointer.setXY(0, 0);
+    this.line && app.canvas.setActiveObject(this.line);
+    this.line = null;
+    app.render(true);
+  }
+}
+
+export const lineTool = new LineTool();
+
+export default lineTool;