From 26e2110434fea42148d176b0ce36bb436131306f Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 17 Sep 2021 17:48:58 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=E4=BB=AA=E8=A1=A8=E6=9D=BF=E7=9F=A9?=
 =?UTF-8?q?=E5=BD=A2=EF=BC=8C=E6=96=87=E5=AD=97=E7=BB=84=E4=BB=B6=EF=BC=8C?=
 =?UTF-8?q?=E9=97=B4=E9=9A=99=E7=AD=89=E9=BB=98=E8=AE=A4=E6=A0=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/DeDrag/MoveInShadow.vue    | 69 +++++++++++++++++++
 frontend/src/components/DeDrag/shadow.vue     |  2 +-
 .../canvas/components/Editor/index.vue        |  2 +-
 frontend/src/store/index.js                   | 10 ++-
 frontend/src/views/panel/ViewSelect/index.vue |  2 +
 frontend/src/views/panel/edit/index.vue       |  2 +
 6 files changed, 84 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/DeDrag/MoveInShadow.vue

diff --git a/frontend/src/components/DeDrag/MoveInShadow.vue b/frontend/src/components/DeDrag/MoveInShadow.vue
new file mode 100644
index 0000000000..366436c3aa
--- /dev/null
+++ b/frontend/src/components/DeDrag/MoveInShadow.vue
@@ -0,0 +1,69 @@
+<template>
+  <div style="z-index:-1" :style="style" />
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  replace: true,
+  name: 'MoveInShadow',
+  props: {
+    w: {
+      type: Number,
+      required: true
+    },
+    h: {
+      type: Number,
+      required: true
+    },
+    x: {
+      type: Number,
+      required: true
+    },
+    y: {
+      type: Number,
+      required: true
+    },
+    z: {
+      type: Number,
+      required: true
+    }
+  },
+  computed: {
+    style() {
+      // 当前默认为自适应
+      let left = this.x
+      let top = this.y
+      let width = this.w
+      let height = this.h
+      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>
diff --git a/frontend/src/components/DeDrag/shadow.vue b/frontend/src/components/DeDrag/shadow.vue
index e0a1d9993a..f4c7796496 100644
--- a/frontend/src/components/DeDrag/shadow.vue
+++ b/frontend/src/components/DeDrag/shadow.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="z-index:-1" :style="style" />
+  <div style="z-index:1" :style="style" />
 </template>
 
 <script>
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index eb7655680a..2c95f1da12 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -670,7 +670,7 @@ export default {
 }
 
 .gap_class{
-   padding:5px;
+   padding:3px;
 }
 
 // 拖拽组件样式
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 4fa489018c..850cbfe545 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -58,7 +58,9 @@ const data = {
     // 和当前组件联动的目标组件
     targetLinkageInfo: [],
     // 当前仪表板联动 下钻 上卷等信息
-    nowPanelTrackInfo: {}
+    nowPanelTrackInfo: {},
+    // 拖拽的组件信息
+    dragComponentInfo: null
   },
   mutations: {
     ...animation.mutations,
@@ -254,6 +256,12 @@ const data = {
         }
       })
       // state.styleChangeTimes++
+    },
+    setDragComponentInfo(state, dragComponentInfo) {
+      state.dragComponentInfo = dragComponentInfo
+    },
+    clearDragComponentInfo(state) {
+      state.dragComponentInfo = null
     }
   },
   modules: {
diff --git a/frontend/src/views/panel/ViewSelect/index.vue b/frontend/src/views/panel/ViewSelect/index.vue
index 696f36b242..d12896fd44 100644
--- a/frontend/src/views/panel/ViewSelect/index.vue
+++ b/frontend/src/views/panel/ViewSelect/index.vue
@@ -105,11 +105,13 @@ export default {
       })
     },
     handleDragStart(node, ev) {
+      this.$store.commit('setDragComponentInfo', node)
       ev.dataTransfer.effectAllowed = 'copy'
       const dataTrans = {
         type: 'view',
         id: node.data.id
       }
+
       ev.dataTransfer.setData('componentInfo', JSON.stringify(dataTrans))
     },
 
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 8575355a59..4812dda47d 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -440,6 +440,7 @@ export default {
       return data
     },
     handleDrop(e) {
+      this.$store.commit('clearDragComponentInfo')
       this.currentDropElement = e
       e.preventDefault()
       e.stopPropagation()
@@ -509,6 +510,7 @@ export default {
     },
 
     handleDragOver(e) {
+      console.log('handleDragOver=>x:' + this.getPositionX(e.layerX) + ';y=' + this.getPositionY(e.layerY) + e.dataTransfer.getData('componentInfo'))
       e.preventDefault()
       e.dataTransfer.dropEffect = 'copy'
     },