Merge pull request #698 from dataease/pr@dev@refactor_panel-edit-bar

refactor:仪表板编辑时，文字组件、矩形组件、过滤组件样式设置面板强制在画布区域内

frontend/src/components/canvas/components/FilterTextAttr.vue

@@ -109,6 +109,13 @@ export default {
     styleInfo() {
       return this.$store.state.curComponent.style
     },
+    canvasWidth() {
+      let scaleWidth = 1
+      if (this.canvasStyleData.selfAdaption) {
+        scaleWidth = this.curCanvasScale.scaleWidth / 100
+      }
+      return this.canvasStyleData.width * scaleWidth
+    },
     ...mapState([
       'curComponent',
       'curCanvasScale',
@@ -124,10 +131,19 @@ export default {
       this.$refs.backgroundColorPicker.handleTrigger()
     },
     getPositionX(x) {
+      let ps = 0
       if (this.canvasStyleData.selfAdaption) {
-        return (x * this.curCanvasScale.scaleWidth / 100) + 60
+        ps = (x * this.curCanvasScale.scaleWidth / 100) + 60
       } else {
-        return x + 60
+        ps = x + 60
+      }
+      // 防止toolbar超出边界
+      const xGap = ps + 295 - this.canvasWidth
+      // console.log('canvasWidth:' + this.canvasWidth + ';xGap:' + xGap)
+      if (xGap > 0) {
+        return ps - xGap
+      } else {
+        return ps
       }
     },
     getPositionY(y) {

frontend/src/components/canvas/components/RectangleAttr.vue

@@ -161,6 +161,13 @@ export default {
     styleInfo() {
       return this.$store.state.curComponent.style
     },
+    canvasWidth() {
+      let scaleWidth = 1
+      if (this.canvasStyleData.selfAdaption) {
+        scaleWidth = this.curCanvasScale.scaleWidth / 100
+      }
+      return this.canvasStyleData.width * scaleWidth
+    },
     ...mapState([
       'curComponent',
       'curCanvasScale',
@@ -176,10 +183,19 @@ export default {
       this.$refs.backgroundColorPicker.handleTrigger()
     },
     getPositionX(x) {
+      let ps = 0
       if (this.canvasStyleData.selfAdaption) {
-        return (x * this.curCanvasScale.scaleWidth / 100) + 60
+        ps = (x * this.curCanvasScale.scaleWidth / 100) + 60
       } else {
-        return x + 60
+        ps = x + 60
+      }
+      // 防止toolbar超出边界
+      const xGap = ps + 345 - this.canvasWidth
+      // console.log('canvasWidth:' + this.canvasWidth + ';xGap:' + xGap)
+      if (xGap > 0) {
+        return ps - xGap
+      } else {
+        return ps
       }
     },
     getPositionY(y) {

frontend/src/components/canvas/components/TextAttr.vue

@@ -124,6 +124,13 @@ export default {
     styleInfo() {
       return this.$store.state.curComponent.style
     },
+    canvasWidth() {
+      let scaleWidth = 1
+      if (this.canvasStyleData.selfAdaption) {
+        scaleWidth = this.curCanvasScale.scaleWidth / 100
+      }
+      return this.canvasStyleData.width * scaleWidth
+    },
     ...mapState([
       'curComponent',
       'curCanvasScale',
@@ -139,10 +146,19 @@ export default {
       this.$refs.backgroundColorPicker.handleTrigger()
     },
     getPositionX(x) {
+      let ps = 0
       if (this.canvasStyleData.selfAdaption) {
-        return (x * this.curCanvasScale.scaleWidth / 100) + 60
+        ps = (x * this.curCanvasScale.scaleWidth / 100) + 60
       } else {
-        return x + 60
+        ps = x + 60
+      }
+      // 防止toolbar超出边界
+      const xGap = ps + 395 - this.canvasWidth
+      // console.log('canvasWidth:' + this.canvasWidth + ';xGap:' + xGap)
+      if (xGap > 0) {
+        return ps - xGap
+      } else {
+        return ps
       }
     },
     getPositionY(y) {

frontend/src/views/panel/edit/index.vue

@@ -214,8 +214,8 @@ import toast from '@/components/canvas/utils/toast'
 import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
 import generateID from '@/components/canvas/utils/generateID'
 import RectangleAttr from '@/components/canvas/components/RectangleAttr'
-import TextAttr from '@/views/Tinymce/TextAttr'
+import TextAttr from '@/components/canvas/components/TextAttr'
-import FilterTextAttr from '@/views/Tinymce/FilterTextAttr'
+import FilterTextAttr from '@/components/canvas/components/FilterTextAttr'
 
 export default {
   name: 'PanelEdit',