refactor(仪表板): 文本矩形等悬浮工具栏适配新画布

frontend/src/components/canvas/DeCanvas.vue

@@ -88,13 +88,6 @@
         </span>
       </div>
     </el-dialog>
-    <!--矩形样式组件-->
-    <TextAttr
-      v-if="showAttr"
-      :canvas-id="canvasId"
-      :scroll-left="scrollLeft"
-      :scroll-top="scrollTop"
-    />
   </div>
 </template>
 
@@ -239,13 +232,6 @@ export default {
     mobileLayoutStatus() {
       this.restore()
     }
-    // //监控当前组件移动 检查是否靠近tab
-    // curComponent: {
-    //   handler(newVal, oldVla) {
-    //     // this.restore()
-    //   },
-    //   deep: true
-    // },
   },
   created() {
   },
@@ -301,8 +287,7 @@ export default {
       }
     },
     canvasScroll(e) {
-      this.scrollLeft = e.target.scrollLeft
+      this.$emit('canvasScroll', { scrollLeft: e.target.scrollLeft, scrollTop: e.target.scrollTop })
-      this.scrollTop = e.target.scrollTop
       bus.$emit('onScroll')
     },
     // handleDrop(e) {

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

@@ -588,7 +588,7 @@ export default {
     mainStyle() {
       const style = {
         left: (this.getPositionX(this.curComponent.style.left) - this.scrollLeft) + 'px',
-        top: (this.getPositionY(this.curComponent.style.top) - this.scrollTop + 25) + 'px'
+        top: (this.getPositionY(this.curComponent.style.top) - this.scrollTop + 20) + 'px'
       }
       return style
     },

frontend/src/components/widget/DeWidget/DeTabs.vue

@@ -64,6 +64,7 @@
           :canvas-id="element.id+'-'+item.name"
           class="tab_canvas"
           :class="moveActive ? 'canvas_move_in':''"
+          @canvasScroll="canvasScroll"
         />
         <div style="width: 100%;height:100%">
           <Preview
@@ -193,6 +194,13 @@
       </span>
     </el-dialog>
 
+    <text-attr
+      v-if="showAttr && curComponent.canvasId !== 'canvas-main'"
+      :canvas-id="curComponent.canvasId"
+      :scroll-left="scrollLeft"
+      :scroll-top="scrollTop"
+    />
+
   </div>
 
 </template>
@@ -211,11 +219,16 @@ import { findPanelElementInfo } from '@/api/panel/panel'
 import { getNowCanvasComponentData } from '@/components/canvas/utils/utils'
 import DeCanvasTab from '@/components/canvas/DeCanvas'
 import Preview from '@/components/canvas/components/Editor/Preview'
+import TextAttr from '@/components/canvas/components/TextAttr'
 
 export default {
   name: 'DeTabs',
-  components: { Preview, DeCanvasTab, TabUseList, ViewSelect, DataeaseTabs },
+  components: { TextAttr, Preview, DeCanvasTab, TabUseList, ViewSelect, DataeaseTabs },
   props: {
+    canvasId: {
+      type: String,
+      default: 'canvas-main'
+    },
     element: {
       type: Object,
       default: null
@@ -252,6 +265,20 @@ export default {
   },
   data() {
     return {
+      scrollLeft: 50,
+      scrollTop: 10,
+      // 需要展示属性设置的组件类型
+      showAttrComponent: [
+        'custom',
+        'v-text',
+        'picture-add',
+        'de-tabs',
+        'rect-shape',
+        'de-show-date',
+        'de-video',
+        'de-stream-media',
+        'de-frame'
+      ],
       activeTabName: null,
       tabIndex: 1,
       dialogVisible: false,
@@ -264,6 +291,23 @@ export default {
     }
   },
   computed: {
+    curCanvasScaleSelf() {
+      return this.curCanvasScaleMap[this.canvasId]
+    },
+    showAttr() {
+      if (this.mobileLayoutStatus) {
+        return false
+      } else if (this.curComponent && this.showAttrComponent.includes(this.curComponent.type)) {
+        // 过滤组件有标题才显示
+        if (this.curComponent.type === 'custom' && (!this.curComponent.options.attrs.showTitle || !this.curComponent.options.attrs.title)) {
+          return false
+        } else {
+          return true
+        }
+      } else {
+        return false
+      }
+    },
     moveActive() {
       return this.tabMoveInActiveId && this.tabMoveInActiveId === this.element.id
     },
@@ -285,7 +329,8 @@ export default {
       'curComponent',
       'mobileLayoutStatus',
       'canvasStyleData',
-      'tabMoveInActiveId'
+      'tabMoveInActiveId',
+      'curCanvasScaleMap'
     ]),
     fontColor() {
       return this.element && this.element.style && this.element.style.headFontColor || 'none'
@@ -360,6 +405,16 @@ export default {
     bus.$off('add-new-tab', this.addNewTab)
   },
   methods: {
+    initScroll() {
+      this.scrollLeft = 50
+      this.scrollTop = 10
+    },
+    canvasScroll(scrollInfo) {
+      this.scrollLeft = scrollInfo.scrollLeft + 50
+      this.scrollTop = scrollInfo.scrollTop + 10
+      console.log('scrollInfo=' + JSON.stringify(scrollInfo))
+      bus.$emit('onScroll')
+    },
     tabCanvasComponentData(tabName) {
       const result = getNowCanvasComponentData(this.element.id + '-' + tabName)
       return result

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

@@ -178,6 +178,7 @@
           :component-data="mainCanvasComponentData"
           :canvas-id="canvasId"
           :canvas-pid="'0'"
+          @canvasScroll="canvasScroll"
         >
           <canvas-opt-bar slot="optBar" />
         </de-canvas>
@@ -466,6 +467,13 @@
       </div>
     </el-dialog>
 
+    <!--放在这个位置防止遮挡-->
+    <text-attr
+      v-if="showAttr && curComponent.canvasId === 'canvas-main'"
+      :canvas-id="canvasId"
+      :scroll-left="scrollLeft"
+      :scroll-top="scrollTop"
+    />
   </el-row>
 </template>
 
@@ -519,10 +527,12 @@ import { listenGlobalKeyDown } from '@/components/canvas/utils/shortcutKey'
 import { adaptCurThemeCommonStyle } from '@/components/canvas/utils/style'
 import eventBus from '@/components/canvas/utils/eventBus'
 import DeCanvas from '@/components/canvas/DeCanvas'
+import TextAttr from '@/components/canvas/components/TextAttr'
 
 export default {
   name: 'PanelEdit',
   components: {
+    TextAttr,
     DeCanvas,
     Multiplexing,
     ChartStyleBatchSet,
@@ -1309,9 +1319,9 @@ export default {
       // 打开属性栏
       bus.$emit('change_panel_right_draw', true)
     },
-    canvasScroll(event) {
+    canvasScroll(scrollInfo) {
-      this.scrollLeft = event.target.scrollLeft
+      this.scrollLeft = scrollInfo.scrollLeft
-      this.scrollTop = event.target.scrollTop
+      this.scrollTop = scrollInfo.scrollTop
       bus.$emit('onScroll')
     },
     destroyTimeMachine() {