From 885148cdecd94eb0aaa0339061c0e77112410a1b Mon Sep 17 00:00:00 2001
From: Nevermore <15972699417@163.com>
Date: Tue, 5 Dec 2023 17:40:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=94=BB=E5=B8=83=E8=92=99?=
 =?UTF-8?q?=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/configs/canvas.ts                                 |  2 +-
 src/mocks/templates.ts                                |  6 +++---
 src/views/Canvas/useCanvas.ts                         |  5 +++--
 src/views/Canvas/useCenter.ts                         | 10 +++-------
 src/views/Canvas/useCommon.ts                         |  2 ++
 src/views/Editor/CanvasRight/WorkStylePanel/index.vue |  2 +-
 6 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/configs/canvas.ts b/src/configs/canvas.ts
index 0e6e9f3f..76e3aeba 100644
--- a/src/configs/canvas.ts
+++ b/src/configs/canvas.ts
@@ -28,7 +28,7 @@ export const LocalStorageDiscardedKey = 'YFT_DISCARD_DB'
 export const WorkSpaceEditColor = 'rgba(255,255,255,1)'
 
 // 画布蒙版颜色
-export const WorkSpaceMaskColor = 'rgba(255,255,255,0)'
+export const WorkSpaceMaskColor = '#f3f3f3'
 
 // 画布背景颜色
 export const CanvasBackground = 'rgba(255,255,255,0)'
diff --git a/src/mocks/templates.ts b/src/mocks/templates.ts
index 07ad1381..f405eaf4 100644
--- a/src/mocks/templates.ts
+++ b/src/mocks/templates.ts
@@ -15,7 +15,7 @@ export const Templates: Template[] = [
         "ry": 0,
         "id": "WorkSpaceDrawType",
         "name": "rect",
-        "fill": "#f3f3f3",
+        "fill": "#ffffff",
         "selectable": false,
         "evented": false,
         "lockMovementX": false,
@@ -570,7 +570,7 @@ export const Templates: Template[] = [
         "ry": 0,
         "id": "WorkSpaceDrawType",
         "name": "rect",
-        "fill": "#f3f3f3",
+        "fill": "#ffffff",
         "selectable": false,
         "evented": false,
         "lockMovementX": false,
@@ -29497,7 +29497,7 @@ export const Templates: Template[] = [
         "ry": 0,
         "id": "WorkSpaceDrawType",
         "name": "rect",
-        "fill": "#f3f3f3",
+        "fill": "#ffffff",
         "selectable": false,
         "evented": false,
         "lockMovementX": false,
diff --git a/src/views/Canvas/useCanvas.ts b/src/views/Canvas/useCanvas.ts
index ea969aac..2489c40c 100644
--- a/src/views/Canvas/useCanvas.ts
+++ b/src/views/Canvas/useCanvas.ts
@@ -1,7 +1,8 @@
+import { watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { Canvas, Object as FabricObject, Textbox, Group, Point } from 'fabric'
+import { WorkSpaceThumbType } from "@/configs/canvas"
 import { useFabricStore } from '@/store/modules/fabric'
-import { watch } from 'vue'
 import { useElementBounding } from '@vueuse/core'
 import { FabricTool } from '@/app/fabricTool'
 import { GuideLines } from '@/app/guideLines'
@@ -72,7 +73,7 @@ const setCanvasTransform = () => {
   const { zoom, wrapperRef, scalePercentage } = storeToRefs(fabricStore)
   const { width, height } = useElementBounding(wrapperRef.value)
   canvas.setDimensions({width: width.value, height: height.value})
-  const objects = canvas.getObjects()
+  const objects = canvas.getObjects().filter(ele => !WorkSpaceThumbType.includes(ele.id))
   const boundingBox = Group.prototype.getObjectsBoundingBox(objects)
   if (!boundingBox) return
   zoom.value = Math.min(canvas.getWidth() / boundingBox.width, canvas.getHeight() / boundingBox.height,) * scalePercentage.value / 100
diff --git a/src/views/Canvas/useCenter.ts b/src/views/Canvas/useCenter.ts
index ab1d9700..247f27f9 100644
--- a/src/views/Canvas/useCenter.ts
+++ b/src/views/Canvas/useCenter.ts
@@ -1,18 +1,14 @@
 import useCanvas from "./useCanvas"
-import { WorkSpaceDrawType } from "@/configs/canvas"
+import { WorkSpaceDrawType, WorkSpaceThumbType } from "@/configs/canvas"
 import { CanvasElement } from "@/types/canvas"
 import { Group, Point } from "fabric"
 
 export default () => {
   const [ canvas ] = useCanvas()
   const workSpaceDraw = canvas.getObjects().filter(item => (item as CanvasElement).id === WorkSpaceDrawType)[0] as CanvasElement
-  const objects = canvas.getObjects()
-  // const centerPoint = workSpaceDraw.getCenterPoint()
-  // const originPoint = workSpaceDraw.getPointByOrigin('left', 'top')
+  const objects = canvas.getObjects().filter(ele => !WorkSpaceThumbType.includes(ele.id))
   const boundingBox = Group.prototype.getObjectsBoundingBox(objects)
-  // if (boundingBox) {
-  //   console.log(boundingBox.centerX, boundingBox.centerY, centerPoint)
-  // }
+
   let left = 0, top = 0
   let centerPoint = canvas.getCenterPoint()
   let width = canvas.getWidth(), height = canvas.getHeight()
diff --git a/src/views/Canvas/useCommon.ts b/src/views/Canvas/useCommon.ts
index 9901a6ff..bcb4addd 100644
--- a/src/views/Canvas/useCommon.ts
+++ b/src/views/Canvas/useCommon.ts
@@ -125,9 +125,11 @@ export default () => {
       visible: showClip.value,
       ...WorkSpaceCommonOption
     })
+    
     canvas.add(workSpaceClip)
     canvas.add(workSpaceSafe)
     canvas.add(workLineGroup)
+    canvas.add(workSpaceMask)
     canvas.renderAll()
   }
 
diff --git a/src/views/Editor/CanvasRight/WorkStylePanel/index.vue b/src/views/Editor/CanvasRight/WorkStylePanel/index.vue
index 8a5f7d8f..c53a8dd0 100644
--- a/src/views/Editor/CanvasRight/WorkStylePanel/index.vue
+++ b/src/views/Editor/CanvasRight/WorkStylePanel/index.vue
@@ -292,7 +292,7 @@ watch(gridColorRecent, () => {
 
 const changeMaskOpacity = () => {
   const [ canvas ] = useCanvas()
-  const workMask = canvas.getObjects(WorkSpaceMaskType)[0]
+  const workMask = canvas.getObjects().filter(ele => ele.id === WorkSpaceMaskType)[0]
   if (!workMask) return
   workMask.set('opacity', opacity.value)
   canvas.renderAll()