From dea86c920981256c113077855fb101811e424b96 Mon Sep 17 00:00:00 2001
From: Alice Peng <1399789151@qq.com>
Date: Mon, 24 Jun 2024 18:52:21 +0800
Subject: [PATCH 1/3] =?UTF-8?q?fix(stroke):=20=E4=BF=AE=E5=A4=8D=E6=8F=8F?=
 =?UTF-8?q?=E8=BE=B9=E8=89=B2=E5=BD=A9=E9=80=89=E6=8B=A9=E5=99=A8=E4=BD=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/imgStroke.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/imgStroke.vue b/src/components/imgStroke.vue
index 3b071728..3e67f857 100644
--- a/src/components/imgStroke.vue
+++ b/src/components/imgStroke.vue
@@ -52,7 +52,7 @@
         </div>
 
         <div>
-          <ColorPicker v-model="strokeColor" @on-change="onColorChange" />
+          <ColorPicker v-model="strokeColor" @on-change="onColorChange" placement="left" />
         </div>
       </div>
     </template>
@@ -64,6 +64,7 @@ import useSelect from '@/hooks/select';
 import { Slider } from 'view-ui-plus';
 import { fabric } from 'fabric';
 import { Utils } from '@kuaitu/core';
+import { values } from 'lodash-es';
 
 interface IExtendImage {
   [x: string]: any;
@@ -118,6 +119,7 @@ const onSliderChange = (val: number) => {
 };
 
 const onColorChange = (val: string) => {
+  console.log('onColorChnage', val);
   strokeColor.value = val;
   updateStroke();
 };

From c938d2dbe94524bfdc842b3893955247620d2b2a Mon Sep 17 00:00:00 2001
From: Alice Peng <1399789151@qq.com>
Date: Wed, 26 Jun 2024 18:25:34 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat(component):=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E6=A9=A1=E7=9A=AE=E6=93=A6=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/erase.vue | 49 ++++++++++++++++++++++++++++++++++++++++
 src/language/zh.json     |  3 ++-
 src/views/home/index.vue |  3 +++
 typings/extends.d.ts     |  4 ++++
 4 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 src/components/erase.vue

diff --git a/src/components/erase.vue b/src/components/erase.vue
new file mode 100644
index 00000000..c6ab2e50
--- /dev/null
+++ b/src/components/erase.vue
@@ -0,0 +1,49 @@
+<!--
+ * @Author: AliceLanniste
+ * @Date: 2024-06-26 10：05
+ * @Description: 橡皮檫功能呢
+-->
+
+<template>
+  <Tooltip :content="$t('erase')">
+    <Button long @click="doErase" type="text">
+      <svg
+        t="1719383882631"
+        class="icon"
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        p-id="1448"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        width="14"
+        height="14"
+      >
+        <path
+          d="M667.257905 139.873524l3.85219 3.632762 252.903619 254.537143a73.142857 73.142857 0 0 1 0 103.107047L604.501333 822.686476H828.952381v73.142857H266.532571l-172.129523-173.226666a73.142857 73.142857 0 0 1 0-103.131429L567.344762 143.530667a73.142857 73.142857 0 0 1 99.913143-3.632762zM227.181714 589.604571L146.285714 671.036952l150.674286 151.649524h163.303619l-233.081905-233.081905zM619.227429 195.047619L278.747429 537.721905l253.70819 253.70819 339.675429-341.820952L619.227429 195.047619z"
+          p-id="1449"
+        ></path>
+      </svg>
+    </Button>
+  </Tooltip>
+</template>
+
+<script setup name="Erase">
+import useSelect from '@/hooks/select';
+import { fabric } from 'fabric';
+import 'fabric-eraser-brush';
+
+const { mixinState, canvasEditor } = useSelect();
+const isErase = ref(false);
+
+const doErase = () => {
+  isErase.value = !isErase.value;
+  let canvas = canvasEditor.canvas;
+  if (isErase.value) {
+    canvas.isDrawingMode = true;
+    canvas.freeDrawingBrush = new fabric.EraserBrush(canvas);
+    canvas.freeDrawingBrush.width = 15; // optional
+  } else {
+    canvas.isDrawingMode = false;
+  }
+};
+</script>
diff --git a/src/language/zh.json b/src/language/zh.json
index a761dda7..4560392d 100644
--- a/src/language/zh.json
+++ b/src/language/zh.json
@@ -33,6 +33,7 @@
     }
   },
   "color": "颜色",
+  "erase": "橡皮檫",
   "textFloat": "小数",
   "templates": "模板",
   "elements": "元素",
@@ -254,4 +255,4 @@
   },
   "mine": "我的",
   "batch": "批量"
-}
\ No newline at end of file
+}
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 8d653768..5d47a03d 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -23,6 +23,8 @@
           <Divider type="vertical" />
 
           <myTemplName></myTemplName>
+          <erase></erase>
+          <Divider type="vertical" />
           <!-- 标尺开关 -->
           <Tooltip :content="$t('grid')">
             <iSwitch
@@ -199,6 +201,7 @@ import group from '@/components/group.vue';
 import zoom from '@/components/zoom.vue';
 import dragMode from '@/components/dragMode.vue';
 import lock from '@/components/lock.vue';
+import erase from '@/components/erase.vue';
 import dele from '@/components/del.vue';
 import waterMark from '@/components/waterMark.vue';
 import login from '@/components/login';
diff --git a/typings/extends.d.ts b/typings/extends.d.ts
index 2f17ba01..9cc23b7a 100644
--- a/typings/extends.d.ts
+++ b/typings/extends.d.ts
@@ -97,4 +97,8 @@ declare namespace fabric {
   export interface StaticCanvas {
     ruler: InstanceType<typeof CanvasRuler>;
   }
+
+  export class EraserBrush {
+    constructor(canvas: Canvas);
+  }
 }

From 8343ddc7a965c473efe115bfa2da083f5173db94 Mon Sep 17 00:00:00 2001
From: Alice Peng <1399789151@qq.com>
Date: Wed, 26 Jun 2024 18:38:24 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat(component):=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=BA=95=E5=9B=BE=E6=97=A0=E6=B3=95=E6=93=A6=E9=99=A4=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/core/plugin/WorkspacePlugin.ts | 2 ++
 src/components/erase.vue                | 2 +-
 src/components/imgStroke.vue            | 1 -
 typings/extends.d.ts                    | 4 ++++
 4 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/core/plugin/WorkspacePlugin.ts b/packages/core/plugin/WorkspacePlugin.ts
index 375132b8..8aa330c4 100644
--- a/packages/core/plugin/WorkspacePlugin.ts
+++ b/packages/core/plugin/WorkspacePlugin.ts
@@ -79,7 +79,9 @@ class WorkspacePlugin implements IPluginTempl {
       height,
       id: 'workspace',
       strokeWidth: 0,
+      erasable: false,
     });
+
     workspace.set('selectable', false);
     workspace.set('hasControls', false);
     workspace.hoverCursor = 'default';
diff --git a/src/components/erase.vue b/src/components/erase.vue
index c6ab2e50..e10011a4 100644
--- a/src/components/erase.vue
+++ b/src/components/erase.vue
@@ -41,7 +41,7 @@ const doErase = () => {
   if (isErase.value) {
     canvas.isDrawingMode = true;
     canvas.freeDrawingBrush = new fabric.EraserBrush(canvas);
-    canvas.freeDrawingBrush.width = 15; // optional
+    canvas.freeDrawingBrush.width = 15;
   } else {
     canvas.isDrawingMode = false;
   }
diff --git a/src/components/imgStroke.vue b/src/components/imgStroke.vue
index 3e67f857..0ec26602 100644
--- a/src/components/imgStroke.vue
+++ b/src/components/imgStroke.vue
@@ -119,7 +119,6 @@ const onSliderChange = (val: number) => {
 };
 
 const onColorChange = (val: string) => {
-  console.log('onColorChnage', val);
   strokeColor.value = val;
   updateStroke();
 };
diff --git a/typings/extends.d.ts b/typings/extends.d.ts
index 9cc23b7a..43371952 100644
--- a/typings/extends.d.ts
+++ b/typings/extends.d.ts
@@ -101,4 +101,8 @@ declare namespace fabric {
   export class EraserBrush {
     constructor(canvas: Canvas);
   }
+
+  export interface IRectOptions {
+    [key: string]: unknown;
+  }
 }