From d3ed5ca66b809cf6f4b756b3a687b9cb529015af Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 11 Nov 2021 18:23:53 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=E4=BB=AA=E8=A1=A8=E6=9D=BF=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E6=9C=89=E9=97=B4=E9=9A=99=E6=97=B6=EF=BC=8C=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E7=A7=BB=E5=8A=A8=E8=A7=A6=E5=8F=91=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E5=92=8C=E8=BE=B9=E7=95=8C=E7=BA=BF=E9=9D=A0=E8=BF=91=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E6=8E=92=E5=88=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/DeDrag/index.vue | 52 ++++++++++++++++--------
 1 file changed, 34 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue
index c0277b3f58..5c2f32078b 100644
--- a/frontend/src/components/DeDrag/index.vue
+++ b/frontend/src/components/DeDrag/index.vue
@@ -3,14 +3,12 @@
     :style="style"
     :class="[
       {
-        [classNameActive]: enabled ,
         [classNameDragging]: dragging,
         [classNameResizing]: resizing,
         [classNameDraggable]: draggable,
         [classNameResizable]: resizable,
         [classNameRotating]: rotating,
         [classNameRotatable]: rotatable,
-        [classNameMouseOn]: mouseOn || active,
         ['linkageSetting']:linkageActive,
         ['positionChange']:!(dragging || resizing||rotating)
       },
@@ -21,19 +19,28 @@
     @mouseenter="enter"
     @mouseleave="leave"
   >
-    <edit-bar v-if="curComponent&&(active||linkageSettingStatus)" style="transform: translateZ(10px)" :active-model="'edit'" :element="element" @showViewDetails="showViewDetails" @amRemoveItem="amRemoveItem" @amAddItem="amAddItem" @resizeView="resizeView" @linkJumpSet="linkJumpSet" />
-    <div v-if="resizing" style="transform: translateZ(11px);position: absolute; z-index: 3" :style="resizeShadowStyle" />
     <div
-      v-for="(handlei, indexi) in actualHandles"
-      :key="indexi"
-      :class="[classNameHandle, classNameHandle + '-' + handlei]"
-      :style="handleStyle(handlei, indexi)"
-      @mousedown.stop.prevent="handleDown(handlei, $event)"
-      @touchstart.stop.prevent="handleTouchDown(handlei, $event)"
+      :class="[
+        {
+          [classNameActive]: enabled ,
+          [classNameMouseOn]: mouseOn || active
+        },
+        className
+      ]"
+      :style="mainSlotStyle"
     >
-      <slot :name="handlei" />
-    </div>
-    <div :style="mainSlotStyle" :class="{'gap_class':canvasStyleData.panel.gap==='yes'}">
+      <edit-bar v-if="curComponent&&(active||linkageSettingStatus)" style="transform: translateZ(10px)" :active-model="'edit'" :element="element" @showViewDetails="showViewDetails" @amRemoveItem="amRemoveItem" @amAddItem="amAddItem" @resizeView="resizeView" @linkJumpSet="linkJumpSet" />
+      <div v-if="resizing" style="transform: translateZ(11px);position: absolute; z-index: 3" :style="resizeShadowStyle" />
+      <div
+        v-for="(handlei, indexi) in actualHandles"
+        :key="indexi"
+        :class="[classNameHandle, classNameHandle + '-' + handlei]"
+        :style="handleStyle(handlei, indexi)"
+        @mousedown.stop.prevent="handleDown(handlei, $event)"
+        @touchstart.stop.prevent="handleTouchDown(handlei, $event)"
+      >
+        <slot :name="handlei" />
+      </div>
       <slot />
     </div>
   </div>
@@ -437,6 +444,7 @@ export default {
     style() {
       // console.log('style-top:' + this.y + '--' + this.top)
       return {
+        padding: (this.canvasStyleData.panel.gap === 'yes' ? this.componentGap : 0) + 'px',
         transform: `translate(${this.left}px, ${this.top}px) rotate(${this.rotate}deg)`,
         width: this.computedWidth,
         height: this.computedHeight,
@@ -479,6 +487,7 @@ export default {
 
     //  根据left right 算出元素的宽度
     computedMainSlotWidth() {
+      const gap = (this.canvasStyleData.panel.gap === 'yes' ? this.componentGap : 0) * 2
       if (this.w === 'auto') {
         if (!this.widthTouched) {
           return 'auto'
@@ -486,13 +495,14 @@ export default {
       }
       if (this.element.auxiliaryMatrix) {
         const width = Math.round(this.width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
-        return width + 'px'
+        return (width - gap) + 'px'
       } else {
-        return this.width + 'px'
+        return (this.width - gap) + 'px'
       }
     },
     // 根据top bottom 算出元素的宽度
     computedMainSlotHeight() {
+      const gap = (this.canvasStyleData.panel.gap === 'yes' ? this.componentGap : 0) * 2
       if (this.h === 'auto') {
         if (!this.heightTouched) {
           return 'auto'
@@ -500,9 +510,9 @@ export default {
       }
       if (this.element.auxiliaryMatrix) {
         const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
-        return height + 'px'
+        return (height - gap) + 'px'
       } else {
-        return this.height + 'px'
+        return (this.height - gap) + 'px'
       }
     },
 
@@ -522,7 +532,8 @@ export default {
       'editor',
       'curCanvasScale',
       'canvasStyleData',
-      'linkageSettingStatus'
+      'linkageSettingStatus',
+      'componentGap'
     ])
   },
   watch: {
@@ -1792,6 +1803,11 @@ export default {
   padding:5px;
 }
 
+.de-drag-active{
+  outline: 1px solid #70c0ff;
+  user-select: none;
+}
+
 /*.mouseOn >>> .icon-shezhi{*/
 /*  z-index: 2;*/
 /*  display:block!important;*/