refactor: 修复画板部分拖拽问题，增加位置交换动画效果等

frontend/src/components/DeDrag/index.vue

@@ -11,7 +11,8 @@
         [classNameRotating]: rotating,
         [classNameRotatable]: rotatable,
         [classNameMouseOn]: mouseOn || active,
-        ['linkageSetting']:linkageActive
+        ['linkageSetting']:linkageActive,
+        ['positionChange']:!(dragging || resizing||rotating)
       },
       className
     ]"
@@ -595,7 +596,7 @@ export default {
       this.maxH = val
     },
     w(val) {
-      // console.log('changeWidthCK：' + this.resizing)
+      console.log('changeWidthCK：' + this.resizing)
 
       if (this.resizing || this.dragging) {
         return
@@ -1576,12 +1577,17 @@ export default {
     },
     // 记录当前样式 跟随阴影位置 矩阵处理
     recordMatrixCurShadowStyle() {
-      // console.log('recordMatrixCurShadowStyle')
       // debugger
       const left = (this.element.x - 1) * this.curCanvasScale.matrixStyleWidth
       const top = (this.element.y - 1) * this.curCanvasScale.matrixStyleHeight
       const width = this.element.sizex * this.curCanvasScale.matrixStyleWidth
       const height = this.element.sizey * this.curCanvasScale.matrixStyleHeight
+      // const t1 = Math.round(this.width / this.curCanvasScale.matrixStyleWidth)
+      // const left = Math.round(this.left / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
+      // const top = Math.round(this.top / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
+      // const width = t1 * this.curCanvasScale.matrixStyleWidth
+      // const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
+
       const style = {
         ...this.defaultStyle
       }
@@ -1591,6 +1597,8 @@ export default {
       style.height = height
       style.rotate = this.rotate
       // this.hasMove = true
+      // console.log('recordMatrixCurShadowStyle:t1:' + t1 + ';mw:' + this.curCanvasScale.matrixStyleWidth + ';width:' + width)
+
       this.$store.commit('setShapeStyle', style)
 
       // resize
@@ -1757,6 +1765,10 @@ export default {
   opacity: 0.5;
 }
 
+.positionChange{
+  transition: 0.2s
+}
+
 .gap_class{
   padding:5px;
 }

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

@@ -26,6 +26,9 @@
       <span :title="$t('panel.cancel_linkage')">
         <i v-if="curComponent.type==='view'&&existLinkage" class="icon iconfont icon-quxiaoliandong" @click.stop="clearLinkage" />
       </span>
+<!--      <spa>-->
+<!--        {{ curComponent.x }}-{{ curComponent.y }}&#45;&#45;{{ curComponent.sizex }}-{{ curComponent.sizey }}-->
+<!--      </spa>-->
     </div>
 
   </div>
@@ -69,7 +72,7 @@ export default {
     }
   },
   mounted() {
-    this.createTimer()
+    // this.createTimer()
   },
   computed: {
     existLinkage() {
@@ -102,7 +105,7 @@ export default {
     ])
   },
   beforeDestroy() {
-    this.destroyTimer()
+    // this.destroyTimer()
   },
   methods: {
     createTimer() {

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

@@ -4,6 +4,7 @@
     <!--    <div v-for="(yItem, index) in positionBox" v-if="index<positionBox.length-5" :key="index+'y'" style="float: left; width: 105%">-->
     <div v-for="(yItem, index) in positionBox" :key="index+'y'" style="float: left; width: 105%">
       <div v-for="(xItem, index) in yItem" :key="index+'x'" :style="classInfo" style="float: left; border: 0.2px solid #b3d4fc ;color: #00feff">
+<!--      <div v-for="(xItem, index) in yItem" :key="index+'x'" :style="classInfo" style="float: left; border: 0.2px solid #b3d4fc ;">-->
         {{ xItem.el?1:0 }}
       </div>
     </div>

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

@@ -13,9 +13,9 @@
     @scroll="canvasScroll"
   >
     <!-- 网格线 -->
-<!--        <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />-->
+<!--    <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 />

frontend/src/components/canvas/store/copy.js

@@ -27,8 +27,10 @@ export default {
       }
 
       const data = state.copyData.data
-      data.style.top += 20
+      if (!state.curComponent.auxiliaryMatrix) {
-      data.style.left += 20
+        data.style.top += 20
+        data.style.left += 20
+      }
 
       // if (isMouse) {
       //   data.style.top = state.menuTop

frontend/src/store/index.js

@@ -98,7 +98,7 @@ const data = {
       state.styleChangeTimes = 0
       state.curComponent = component
       state.curComponentIndex = index
-      console.log('setCurComponent:' + JSON.stringify(component))
+      // console.log('setCurComponent:' + JSON.stringify(component))
     },
 
     setCurCanvasScale(state, curCanvasScale) {
@@ -115,13 +115,15 @@ const data = {
     // },
 
     setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) {
-      // console.log('setShapeStyle:width=' + width + ';height=' + height)
+      console.log('cw:' + curComponent.style.width + ';w:' + width + ';sp:' + curCanvasScale.scalePointWidth)
-      if (top || top === 0) curComponent.style.top = top / curCanvasScale.scalePointHeight
+      const ow = curComponent.style.width
-      if (left || left === 0) curComponent.style.left = left / curCanvasScale.scalePointWidth
+      if (top || top === 0) curComponent.style.top = (top / curCanvasScale.scalePointHeight) + 0.0000001
-      if (width || width === 0) curComponent.style.width = width / curCanvasScale.scalePointWidth
+      if (left || left === 0) curComponent.style.left = (left / curCanvasScale.scalePointWidth) + 0.0000001
-      if (height || height === 0) curComponent.style.height = height / curCanvasScale.scalePointHeight
+      if (width || width === 0) curComponent.style.width = (width / curCanvasScale.scalePointWidth + 0.0000001)
+      if (height || height === 0) curComponent.style.height = (height / curCanvasScale.scalePointHeight) + 0.0000001
       if (rotate || rotate === 0) curComponent.style.rotate = rotate
       // console.log('setShapeStyle:curComponent' + 'top:' + top + ';left:' + left + '====' + JSON.stringify(curComponent))
+      console.log('setShapeStyle:curComponent' + 'w:' + curComponent.style.width + ';ow:' + ow)
     },
 
     setShapeSingleStyle({ curComponent }, { key, value }) {

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

@@ -387,6 +387,10 @@ export default {
           item.filters = (item.filters || [])
           item.linkageFilters = (item.linkageFilters || [])
           item.auxiliaryMatrix = (item.auxiliaryMatrix || false)
+          item.x = (item.x || 1)
+          item.y = (item.y || 1)
+          item.sizex = (item.sizex || 5)
+          item.sizey = (item.sizey || 5)
         })
         this.$store.commit('setComponentData', this.resetID(componentDatas))
         // this.$store.commit('setComponentData', this.resetID(JSON.parse(componentDataTemp)))
@@ -401,6 +405,10 @@ export default {
             item.filters = (item.filters || [])
             item.linkageFilters = (item.linkageFilters || [])
             item.auxiliaryMatrix = (item.auxiliaryMatrix || false)
+            item.x = (item.x || 1)
+            item.y = (item.y || 1)
+            item.sizex = (item.sizex || 5)
+            item.sizey = (item.sizey || 5)
           })
           this.$store.commit('setComponentData', this.resetID(componentDatas))
           //   this.$store.commit('setComponentData', this.resetID(JSON.parse(response.data.panelData)))

frontend/src/views/panel/list/PanelList.vue

@@ -622,6 +622,10 @@ export default {
             item.filters = (item.filters || [])
             item.linkageFilters = (item.linkageFilters || [])
             item.auxiliaryMatrix = (item.auxiliaryMatrix || false)
+            item.x = (item.x || 1)
+            item.y = (item.y || 1)
+            item.sizex = (item.sizex || 5)
+            item.sizey = (item.sizey || 5)
           })
           this.$store.commit('setComponentData', this.resetID(componentDatas))
           //   this.$store.commit('setComponentData', sourceInfo.type === 'custom' ? sourceInfo : this.resetID(sourceInfo))