refactor: 视图矩阵和悬浮相互切换显示优化

frontend/src/components/DeDrag/index.vue

@@ -21,7 +21,7 @@
     @mouseenter="enter"
     @mouseleave="leave"
   >
-    <edit-bar v-if="active||linkageSettingStatus" style="transform: translateZ(10px)" :active-model="'edit'" :element="element" @showViewDetails="showViewDetails" @amRemoveItem="amRemoveItem" @amAddItem="amAddItem" />
+    <edit-bar v-if="active||linkageSettingStatus" style="transform: translateZ(10px)" :active-model="'edit'" :element="element" @showViewDetails="showViewDetails" @amRemoveItem="amRemoveItem" @amAddItem="amAddItem" @resizeView="resizeView" />
     <div v-if="resizing" style="transform: translateZ(11px);position: absolute; z-index: 3" :style="resizeShadowStyle" />
     <div
       v-for="(handlei, indexi) in actualHandles"
@@ -1680,6 +1680,9 @@ export default {
     },
     amRemoveItem() {
       this.$emit('amRemoveItem')
+    },
+    resizeView() {
+      this.$emit('resizeView')
     }
   }
 

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

@@ -39,6 +39,7 @@ import { mapState } from 'vuex'
 import bus from '@/utils/bus'
 import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
 import LinkageField from '@/components/canvas/components/Editor/LinkageField'
+import { deepCopy } from '@/components/canvas/utils/utils'
 
 export default {
   components: { SettingMenu, LinkageField },
@@ -126,10 +127,6 @@ export default {
     },
     auxiliaryMatrixChange() {
       if (this.curComponent.auxiliaryMatrix) {
-        this.curComponent.style.left = (this.curComponent.x - 1) * this.curCanvasScale.matrixStyleOriginWidth
-        this.curComponent.style.top = (this.curComponent.y - 1) * this.curCanvasScale.matrixStyleOriginHeight
-        this.curComponent.style.width = this.curComponent.sizex * this.curCanvasScale.matrixStyleOriginWidth
-        this.curComponent.style.height = this.curComponent.sizey * this.curCanvasScale.matrixStyleOriginHeight
         this.curComponent.auxiliaryMatrix = false
         this.$emit('amRemoveItem')
       } else {
@@ -140,9 +137,29 @@ export default {
         this.curComponent.auxiliaryMatrix = true
         this.$emit('amAddItem')
       }
+      setTimeout(() => {
+        this.recordMatrixCurShadowStyle()
+      }, 50)
       this.$store.state.styleChangeTimes++
       bus.$emit('auxiliaryMatrixChange')
     },
+    // 记录当前样式 跟随阴影位置 矩阵处理
+    recordMatrixCurShadowStyle() {
+      // debugger
+      const left = (this.curComponent.x - 1) * this.curCanvasScale.matrixStyleWidth
+      const top = (this.curComponent.y - 1) * this.curCanvasScale.matrixStyleHeight
+      const width = this.curComponent.sizex * this.curCanvasScale.matrixStyleWidth
+      const height = this.curComponent.sizey * this.curCanvasScale.matrixStyleHeight
+      const style = {
+        left: left,
+        top: top,
+        width: width,
+        height: height
+      }
+      this.$store.commit('setShapeStyle', style)
+      // resize
+      this.$emit('resizeView')
+    },
     edit() {
       // 编辑时临时保存 当前修改的画布
       this.$store.dispatch('panel/setComponentDataTemp', JSON.stringify(this.componentData))

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

@@ -15,7 +15,7 @@
     <!-- 网格线 -->
     <!--    <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />-->
     <!--    positionBox:{{positionBoxInfo}}-->
-<!--    <PGrid :position-box="positionBoxInfoArray" :matrix-style="matrixStyle" />-->
+    <PGrid :position-box="positionBoxInfoArray" :matrix-style="matrixStyle" />
 
     <!-- 仪表板联动清除按钮-->
     <canvas-opt-bar />