From 2e55ebe6d754f761b39cf3768c635b331960b4ed Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 22 Jul 2022 16:13:54 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=AA=E8=A1=A8=E6=9D=BF=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=98=BE=E7=A4=BA=E4=BD=8D=E7=BD=AE=EF=BC=8C?=
 =?UTF-8?q?=E4=BC=98=E5=85=88=E5=9C=A8=E8=A7=86=E5=9B=BE=E5=A4=96=E6=B5=8B?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E4=B8=94=E5=8F=AF=E4=BB=A5=E5=B7=A6=E5=8F=B3?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE=E8=87=AA=E9=80=82=E5=BA=94=E6=94=B9=E5=8F=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/Editor/EditBar.vue      | 37 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/canvas/components/Editor/EditBar.vue b/frontend/src/components/canvas/components/Editor/EditBar.vue
index 099dcb5491..09880601cc 100644
--- a/frontend/src/components/canvas/components/Editor/EditBar.vue
+++ b/frontend/src/components/canvas/components/Editor/EditBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bar-main">
+  <div class="bar-main" :class="showEditPosition">
     <input id="input" ref="files" type="file" accept="image/*" hidden @click="e => {e.target.value = '';}" @change="handleFileChange">
     <div v-if="linkageAreaShow" style="margin-right: -1px;width: 20px">
       <el-checkbox v-model="linkageInfo.linkageActive" size="medium" />
@@ -77,6 +77,7 @@ export default {
   },
   data() {
     return {
+      barWidth: 24,
       componentType: null,
       linkageActiveStatus: false,
       editFilter: [
@@ -89,6 +90,22 @@ export default {
   mounted() {
   },
   computed: {
+    showEditPosition() {
+      if (this.activeModel === 'edit') {
+        const toRight = (this.canvasStyleData.width - this.element.style.left - this.element.style.width) * this.curCanvasScale.scalePointWidth
+        const toLeft = this.element.style.left * this.curCanvasScale.scalePointWidth
+        if (this.barWidth < toRight) {
+          return 'bar-main-right'
+        } else if (this.barWidth > toRight && this.barWidth > toLeft) {
+          return 'bar-main-left-inner'
+        } else {
+          return 'bar-main-left-outer'
+        }
+      } else {
+        return 'bar-main-preview'
+      }
+    },
+
     showJumpFlag() {
       return this.curComponent && this.curComponent.hyperlinks && this.curComponent.hyperlinks.enable
     },
@@ -265,7 +282,6 @@ export default {
 <style lang="scss" scoped>
   .bar-main{
     position: absolute;
-    right: 0px;
     float:right;
     z-index: 2;
     border-radius:2px;
@@ -288,5 +304,22 @@ export default {
   .bar-main ::v-deep .el-checkbox__inner::after{
     width: 4.5px;
   }
+  .bar-main-right{
+    width: 22px;
+    right: -25px;
+  }
+  .bar-main-left-inner{
+    width: 22px;
+    left: 0px;
+  }
+
+  .bar-main-left-outer{
+    width: 22px;
+    left: -25px;
+  }
+
+  .bar-main-preview{
+    right: 0px;
+  }
 
 </style>