Merge pull request #178 from dataease/pr@dev@panel

fix:矩形组件和文本组件在非自适应画布区域的模式下对应悬浮组件定位问题

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) {

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) {

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) {

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
     }
   }
 }