Merge pull request #831 from dataease/pr@dev@refactor_panel-text

feat:仪表板视图拖拽阴影跟随

frontend/src/components/DeDrag/index.vue

@@ -52,7 +52,7 @@ import EditBar from '@/components/canvas/components/Editor/EditBar'
 
 export default {
   replace: true,
-  name: 'VueDragResizeRotate',
+  name: 'Dedrag',
   components: { EditBar },
   props: {
     className: {
@@ -1572,6 +1572,10 @@ export default {
       addEvent(document.documentElement, 'touchend touchcancel', this.deselect)
       //  窗口变化时，检查容器大小
       addEvent(window, 'resize', this.checkParentSize)
+
+      // private 记录当前组件的操作状态
+      this.curComponent.optStatus.resizing = this.resizing
+      this.curComponent.optStatus.dragging = this.dragging
     },
     createdFunction() {
       // minWidth不能大于maxWidth

frontend/src/components/DeDrag/shadow.vue

@@ -0,0 +1,47 @@
+<template>
+  <div style="z-index:-1" :style="style" />
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  replace: true,
+  name: 'Shadow',
+  computed: {
+    style() {
+      // 当前默认为自适应
+      let left = this.curComponent.style.left * this.curCanvasScale.scaleWidth / 100
+      let top = this.curComponent.style.top * this.curCanvasScale.scaleHeight / 100
+      let width = this.curComponent.style.width * this.curCanvasScale.scaleWidth / 100
+      let height = this.curComponent.style.height * this.curCanvasScale.scaleHeight / 100
+      if (this.canvasStyleData.auxiliaryMatrix) {
+        left = Math.round(left / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
+        width = Math.round(width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
+        top = Math.round(top / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
+        height = Math.round(height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
+      }
+      const style = {
+        transform: `translate(${left}px, ${top}px) rotate(0deg)`,
+        width: width + 'px',
+        height: height + 'px',
+        opacity: 0.4,
+        background: 'gray',
+        position: 'absolute'
+      }
+      console.log('style=>' + JSON.stringify(style))
+      return style
+    },
+    ...mapState([
+      'curComponent',
+      'editor',
+      'curCanvasScale',
+      'canvasStyleData',
+      'linkageSettingStatus'
+    ])
+  }
+
+}
+</script>
+<style scoped>
+
+</style>

frontend/src/components/canvas/components/Editor/index.vue

@@ -104,9 +104,8 @@
         :active="item === curComponent"
       />
     </de-drag>
-
     <!--拖拽阴影部分-->
-
+    <drag-shadow v-if="curComponent&&this.curComponent.optStatus.dragging" />
     <!-- 右击菜单 -->
     <ContextMenu />
     <!-- 标线 (临时去掉标线 吸附等功能)-->
@@ -169,9 +168,10 @@ import { deepCopy } from '@/components/canvas/utils/utils'
 import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
 import DeOutWidget from '@/components/dataease/DeOutWidget'
 import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar'
+import DragShadow from '@/components/DeDrag/shadow'
 
 export default {
-  components: { Shape, ContextMenu, MarkLine, Area, Grid, DeDrag, UserViewDialog, DeOutWidget, CanvasOptBar },
+  components: { Shape, ContextMenu, MarkLine, Area, Grid, DeDrag, UserViewDialog, DeOutWidget, CanvasOptBar, DragShadow },
   props: {
     isEdit: {
       type: Boolean,

frontend/src/store/index.js

@@ -86,6 +86,11 @@ const data = {
     },
 
     setCurComponent(state, { component, index }) {
+      // 当前视图操作状态置空
+      component['optStatus'] = {
+        dragging: false,
+        resizing: false
+      }
       state.styleChangeTimes = 0
       state.curComponent = component
       state.curComponentIndex = index