From 88f5e25e3900578a1e6c28982a4d69ccfb3eebd7 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 7 Jul 2021 19:09:28 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E7=9F=A9=E5=BD=A2=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=92=8C=E6=96=87=E6=9C=AC=E7=BB=84=E4=BB=B6=E5=9C=A8=E9=9D=9E?=
 =?UTF-8?q?=E8=87=AA=E9=80=82=E5=BA=94=E7=94=BB=E5=B8=83=E5=8C=BA=E5=9F=9F?=
 =?UTF-8?q?=E7=9A=84=E6=A8=A1=E5=BC=8F=E4=B8=8B=E5=AF=B9=E5=BA=94=E6=82=AC?=
 =?UTF-8?q?=E6=B5=AE=E7=BB=84=E4=BB=B6=E5=AE=9A=E4=BD=8D=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/RectangleAttr.vue          | 16 +++++++++++++---
 frontend/src/views/Tinymce/RectangleAttr.vue     | 16 +++++++++++++---
 frontend/src/views/Tinymce/TextAttr.vue          | 16 +++++++++++++---
 frontend/src/views/panel/edit/index.vue          | 16 +++++++++++++---
 4 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/canvas/components/RectangleAttr.vue b/frontend/src/components/canvas/components/RectangleAttr.vue
index b1eb53a695..c9ff00a741 100644
--- a/frontend/src/components/canvas/components/RectangleAttr.vue
+++ b/frontend/src/components/canvas/components/RectangleAttr.vue
@@ -58,6 +58,16 @@
 <script>
 import { mapState } from 'vuex'
 export default {
+  props: {
+    scrollLeft: {
+      type: Number,
+      default: 0
+    },
+    scrollTop: {
+      type: Number,
+      default: 0
+    }
+  },
   data() {
     return {
       lineStyle: [{
@@ -113,8 +123,8 @@ export default {
 
     mainStyle() {
       const style = {
-        left: this.getPositionX(this.curComponent.style.left) + 'px',
-        top: (this.getPositionY(this.curComponent.style.top) - 3) + 'px'
+        left: this.getPositionX(this.curComponent.style.left - this.scrollLeft) + 'px',
+        top: (this.getPositionY(this.curComponent.style.top) - this.scrollTop - 3) + 'px'
       }
       return style
     },
@@ -139,7 +149,7 @@ export default {
       if (this.canvasStyleData.selfAdaption) {
         return (x * this.curCanvasScale.scaleWidth / 100) + 60
       } else {
-        return x + 190
+        return x + 60
       }
     },
     getPositionY(y) {
diff --git a/frontend/src/views/Tinymce/RectangleAttr.vue b/frontend/src/views/Tinymce/RectangleAttr.vue
index b1eb53a695..c9ff00a741 100644
--- a/frontend/src/views/Tinymce/RectangleAttr.vue
+++ b/frontend/src/views/Tinymce/RectangleAttr.vue
@@ -58,6 +58,16 @@
 <script>
 import { mapState } from 'vuex'
 export default {
+  props: {
+    scrollLeft: {
+      type: Number,
+      default: 0
+    },
+    scrollTop: {
+      type: Number,
+      default: 0
+    }
+  },
   data() {
     return {
       lineStyle: [{
@@ -113,8 +123,8 @@ export default {
 
     mainStyle() {
       const style = {
-        left: this.getPositionX(this.curComponent.style.left) + 'px',
-        top: (this.getPositionY(this.curComponent.style.top) - 3) + 'px'
+        left: this.getPositionX(this.curComponent.style.left - this.scrollLeft) + 'px',
+        top: (this.getPositionY(this.curComponent.style.top) - this.scrollTop - 3) + 'px'
       }
       return style
     },
@@ -139,7 +149,7 @@ export default {
       if (this.canvasStyleData.selfAdaption) {
         return (x * this.curCanvasScale.scaleWidth / 100) + 60
       } else {
-        return x + 190
+        return x + 60
       }
     },
     getPositionY(y) {
diff --git a/frontend/src/views/Tinymce/TextAttr.vue b/frontend/src/views/Tinymce/TextAttr.vue
index 3e9348c853..2e883f41ad 100644
--- a/frontend/src/views/Tinymce/TextAttr.vue
+++ b/frontend/src/views/Tinymce/TextAttr.vue
@@ -67,6 +67,16 @@
 <script>
 import { mapState } from 'vuex'
 export default {
+  props: {
+    scrollLeft: {
+      type: Number,
+      default: 0
+    },
+    scrollTop: {
+      type: Number,
+      default: 0
+    }
+  },
   data() {
     return {
       textAlignOptions: [
@@ -106,8 +116,8 @@ export default {
 
     mainStyle() {
       const style = {
-        left: this.getPositionX(this.curComponent.style.left) + 'px',
-        top: (this.getPositionY(this.curComponent.style.top) - 3) + 'px'
+        left: (this.getPositionX(this.curComponent.style.left) - this.scrollLeft) + 'px',
+        top: (this.getPositionY(this.curComponent.style.top) - this.scrollTop - 3) + 'px'
       }
       return style
     },
@@ -132,7 +142,7 @@ export default {
       if (this.canvasStyleData.selfAdaption) {
         return (x * this.curCanvasScale.scaleWidth / 100) + 60
       } else {
-        return x + 190
+        return x + 60
       }
     },
     getPositionY(y) {
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 9e877fc2ed..ccabae3648 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -101,6 +101,7 @@
           @dragover="handleDragOver"
           @mousedown="handleMouseDown"
           @mouseup="deselectCurComponent"
+          @scroll="canvasScroll"
         >
           <Editor v-if="!previewVisible" :out-style="outStyle" />
         </div>
@@ -158,8 +159,8 @@
     <input id="input" ref="files" type="file" accept="image/*" hidden @change="handleFileChange">
 
     <!--矩形样式组件-->
-    <RectangleAttr v-if="curComponent&&curComponent.type==='rect-shape'" />
-    <TextAttr v-if="curComponent&&curComponent.type==='v-text'" />
+    <RectangleAttr v-if="curComponent&&curComponent.type==='rect-shape'" :scroll-left="scrollLeft" :scroll-top="scrollTop" />
+    <TextAttr v-if="curComponent&&curComponent.type==='v-text'" :scroll-left="scrollLeft" :scroll-top="scrollTop" />
 
     <!--复用ChartGroup组件 不做显示-->
     <ChartGroup
@@ -269,7 +270,9 @@ export default {
       beforeDialogValue: [],
       styleDialogVisible: false,
       currentDropElement: null,
-      adviceGroupId: null
+      adviceGroupId: null,
+      scrollLeft: 0,
+      scrollTop: 0
     }
   },
 
@@ -307,6 +310,8 @@ export default {
     // this.restore()
     // 全局监听按键事件
     listenGlobalKeyDown()
+
+    this.$store.commit('setCurComponent', { component: null, index: null })
   },
   mounted() {
     // this.insertToBody()
@@ -662,6 +667,11 @@ export default {
         this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
         bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.curComponent.propValue.viewId, 'optType': 'edit' }})
       }
+    },
+    canvasScroll(event) {
+      debugger
+      this.scrollLeft = event.target.scrollLeft
+      this.scrollTop = event.target.scrollTop
     }
   }
 }