From 0033b42008b5278fd8f770d3268956188d9ee9e3 Mon Sep 17 00:00:00 2001
From: mtruning <1262327911@qq.com>
Date: Sun, 23 Jan 2022 01:12:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Eresize=E6=97=B6?=
 =?UTF-8?q?=E7=9A=84=E8=BE=B9=E6=A1=86=E5=8F=98=E8=89=B2=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/chartEditStore/chartEditStore.ts  | 25 +++++++++++++------
 .../components/EditRange/index.vue            |  2 +-
 .../chart/components/ContentEdit/index.vue    | 14 ++++++++---
 3 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index 354ab670..9b8f152f 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -40,15 +40,15 @@ export const useChartEditStoreStore = defineStore({
     },
     getEditCanvas(): EditCanvasType {
       return this.editCanvas
-    }
+    },
   },
   actions: {
     // * 设置数据项
     setEditCanvasItem<T extends keyof EditCanvasType>(key: T, value: any) {
       this.editCanvas[key] = value
     },
-    // * 设置页面属性
-    setPageAttribute<T extends keyof CSSStyleDeclaration>(
+    // * 设置页面样式属性
+    setPageStyle<T extends keyof CSSStyleDeclaration>(
       key: T,
       value: any
     ): void {
@@ -58,10 +58,20 @@ export const useChartEditStoreStore = defineStore({
         dom.style[key] = value
       }
     },
+    // * 设置页面变换时候的 Class
+    setPageSizeClass(): void {
+      const dom = this.getEditCanvas.editContentDom
+      if (dom) {
+        dom.classList.add('content-resize')
+        setTimeout(() => {
+          dom.classList.remove('content-resize')
+        }, 600);
+      }
+    },
     // * 设置页面大小
     setPageSize(): void {
-      this.setPageAttribute('height', `${this.getEditCanvas.height}px`)
-      this.setPageAttribute('width', `${this.getEditCanvas.width}px`)
+      this.setPageStyle('height', `${this.getEditCanvas.height}px`)
+      this.setPageStyle('width', `${this.getEditCanvas.width}px`)
     },
     // * 设置鼠标位置
     setMousePosition(x: number, y: number): void {
@@ -119,8 +129,9 @@ export const useChartEditStoreStore = defineStore({
     },
     // * 设置缩放
     setScale(scale: number, sys = true): void {
-      if(!this.getEditCanvas.lockScale) {
-        this.setPageAttribute('transform', `scale(${scale})`)
+      if (!this.getEditCanvas.lockScale) {
+        this.setPageSizeClass()
+        this.setPageStyle('transform', `scale(${scale})`)
         this.getEditCanvas.userScale = scale
         if (sys) {
           this.getEditCanvas.scale = scale
diff --git a/src/views/chart/components/ContentEdit/components/EditRange/index.vue b/src/views/chart/components/ContentEdit/components/EditRange/index.vue
index 2e6e494f..e42d0aad 100644
--- a/src/views/chart/components/ContentEdit/components/EditRange/index.vue
+++ b/src/views/chart/components/ContentEdit/components/EditRange/index.vue
@@ -12,8 +12,8 @@
   height: 1080px;
   width: 1920px;
   border: 1px solid;
-  border-radius: 15px;
   background-color: #333;
+  border-radius: 15px;
   @include filter-bg-color('background-color2');
   @include fetch-theme('box-shadow');
   @include filter-border-color('hover-border-color');
diff --git a/src/views/chart/components/ContentEdit/index.vue b/src/views/chart/components/ContentEdit/index.vue
index 028e20c6..54b4b8a6 100644
--- a/src/views/chart/components/ContentEdit/index.vue
+++ b/src/views/chart/components/ContentEdit/index.vue
@@ -9,10 +9,10 @@
   >
     <div id="go-chart-edit-content">
       <!-- 中间区域 -->
-      <EditRange> </EditRange>
+      <EditRange></EditRange>
     </div>
     <!-- 底部控制 -->
-    <template #bottom> 
+    <template #bottom>
       <EditBottom />
     </template>
   </ContentBox>
@@ -50,7 +50,7 @@ onMounted(() => {
   })
 })
 
-computed(() => {})
+computed(() => { })
 </script>
 
 <style lang="scss" scoped>
@@ -58,14 +58,20 @@ computed(() => {})
   position: relative;
   width: 100%;
   overflow: hidden;
-  @include background-image('background-point');
+  @include background-image("background-point");
   @extend .go-point-bg;
   @include goId(chart-edit-content) {
     position: relative;
     top: 20px;
     left: 20px;
     transform-origin: left top;
+    border: 1px solid rgba(0, 0, 0, 0);
+    overflow: hidden;
     @extend .go-transition;
+    &.content-resize {
+      border-radius: 15px;
+      @include hover-border-color("hover-border-color");
+    }
   }
 }
 </style>