From e35bb5c692adddffb932217bd2bb124be2055e88 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 16 Sep 2021 18:42:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=BB=AA=E8=A1=A8=E6=9D=BF=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E6=8B=96=E6=8B=BD=E9=98=B4=E5=BD=B1=E8=B7=9F=E9=9A=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/DeDrag/index.vue      |  6 ++-
 frontend/src/components/DeDrag/shadow.vue     | 47 +++++++++++++++++++
 .../canvas/components/Editor/index.vue        |  6 +--
 frontend/src/store/index.js                   |  5 ++
 4 files changed, 60 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/DeDrag/shadow.vue

diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue
index 08b51318b8..17feeae9fd 100644
--- a/frontend/src/components/DeDrag/index.vue
+++ b/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
diff --git a/frontend/src/components/DeDrag/shadow.vue b/frontend/src/components/DeDrag/shadow.vue
new file mode 100644
index 0000000000..e35a5376ce
--- /dev/null
+++ b/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>
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index 33fc9af320..c14151c562 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/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,
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index ae045bcd1c..b11a051fd8 100644
--- a/frontend/src/store/index.js
+++ b/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