From 5b9b117fcb62312001395cc49dfd7c7bafd42029 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Fri, 9 Apr 2021 12:44:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=97=8B=E8=BD=AC=E5=90=8E=E7=9A=84?=
 =?UTF-8?q?=E5=85=83=E7=B4=A0=E6=89=A7=E8=A1=8C=E5=8A=A8=E7=94=BB=E5=BC=82?=
 =?UTF-8?q?=E5=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../element/ImageElement/BaseImageElement.vue | 50 ++++++-----
 .../components/element/ImageElement/index.vue | 79 ++++++++++--------
 .../element/ShapeElement/BaseShapeElement.vue | 81 +++++++++---------
 .../components/element/ShapeElement/index.vue | 83 ++++++++++---------
 .../element/TextElement/BaseTextElement.vue   | 41 +++++----
 .../components/element/TextElement/index.vue  | 49 ++++++-----
 6 files changed, 213 insertions(+), 170 deletions(-)

diff --git a/src/views/components/element/ImageElement/BaseImageElement.vue b/src/views/components/element/ImageElement/BaseImageElement.vue
index c6b807a8..706c4830 100644
--- a/src/views/components/element/ImageElement/BaseImageElement.vue
+++ b/src/views/components/element/ImageElement/BaseImageElement.vue
@@ -9,28 +9,33 @@
       transform: `rotate(${elementInfo.rotate}deg)`,
     }"
   >
-    <div 
-      class="element-content"
-      :style="{
-        filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '',
-        transform: flipStyle,
-      }"
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
     >
-      <ImageOutline :elementInfo="elementInfo" />
+      <div 
+        class="element-content"
+        :style="{
+          filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '',
+          transform: flipStyle,
+        }"
+      >
+        <ImageOutline :elementInfo="elementInfo" />
 
-      <div class="image-content" :style="{ clipPath: clipShape.style }">
-        <img 
-          :src="elementInfo.src" 
-          :draggable="false" 
-          :style="{
-            top: imgPosition.top,
-            left: imgPosition.left,
-            width: imgPosition.width,
-            height: imgPosition.height,
-            filter: filter,
-          }" 
-          alt=""
-        />
+        <div class="image-content" :style="{ clipPath: clipShape.style }">
+          <img 
+            :src="elementInfo.src" 
+            :draggable="false" 
+            :style="{
+              top: imgPosition.top,
+              left: imgPosition.left,
+              width: imgPosition.width,
+              height: imgPosition.height,
+              filter: filter,
+            }" 
+            alt=""
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -85,7 +90,10 @@ export default defineComponent({
 .base-element-image {
   position: absolute;
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
   width: 100%;
   height: 100%;
diff --git a/src/views/components/element/ImageElement/index.vue b/src/views/components/element/ImageElement/index.vue
index 8d0d5084..72b4abb9 100644
--- a/src/views/components/element/ImageElement/index.vue
+++ b/src/views/components/element/ImageElement/index.vue
@@ -7,46 +7,50 @@
       left: elementInfo.left + 'px',
       width: elementInfo.width + 'px',
       height: elementInfo.height + 'px',
-      transform: `rotate(${elementInfo.rotate}deg)`,
     }"
     @mousedown="$event => handleSelectElement($event)" 
   >
-    <ImageClipHandler
-      v-if="isCliping"
-      :src="elementInfo.src"
-      :clipData="elementInfo.clip"
-      :width="elementInfo.width"
-      :height="elementInfo.height"
-      :top="elementInfo.top"
-      :left="elementInfo.left"
-      :clipPath="clipShape.style"
-      @clip="range => handleClip(range)"
-    />
-    <div 
-      class="element-content"
-      v-else
-      v-contextmenu="contextmenus"
-      :style="{
-        filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '',
-        transform: flipStyle,
-      }"
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
     >
-      <ImageOutline :elementInfo="elementInfo" />
+      <ImageClipHandler
+        v-if="isCliping"
+        :src="elementInfo.src"
+        :clipData="elementInfo.clip"
+        :width="elementInfo.width"
+        :height="elementInfo.height"
+        :top="elementInfo.top"
+        :left="elementInfo.left"
+        :clipPath="clipShape.style"
+        @clip="range => handleClip(range)"
+      />
+      <div 
+        class="element-content"
+        v-else
+        v-contextmenu="contextmenus"
+        :style="{
+          filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '',
+          transform: flipStyle,
+        }"
+      >
+        <ImageOutline :elementInfo="elementInfo" />
 
-      <div class="image-content" :style="{ clipPath: clipShape.style }">
-        <img 
-          :src="elementInfo.src" 
-          :draggable="false" 
-          :style="{
-            top: imgPosition.top,
-            left: imgPosition.left,
-            width: imgPosition.width,
-            height: imgPosition.height,
-            filter: filter,
-          }" 
-          @dragstart.prevent
-          alt=""
-        />
+        <div class="image-content" :style="{ clipPath: clipShape.style }">
+          <img 
+            :src="elementInfo.src" 
+            :draggable="false" 
+            :style="{
+              top: imgPosition.top,
+              left: imgPosition.left,
+              width: imgPosition.width,
+              height: imgPosition.height,
+              filter: filter,
+            }" 
+            @dragstart.prevent
+            alt=""
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -149,7 +153,10 @@ export default defineComponent({
     cursor: default;
   }
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
   width: 100%;
   height: 100%;
diff --git a/src/views/components/element/ShapeElement/BaseShapeElement.vue b/src/views/components/element/ShapeElement/BaseShapeElement.vue
index f6fb3c31..01375c8a 100644
--- a/src/views/components/element/ShapeElement/BaseShapeElement.vue
+++ b/src/views/components/element/ShapeElement/BaseShapeElement.vue
@@ -6,47 +6,51 @@
       left: elementInfo.left + 'px',
       width: elementInfo.width + 'px',
       height: elementInfo.height + 'px',
-      transform: `rotate(${elementInfo.rotate}deg)`,
     }"
   >
-    <div 
-      class="element-content"
-      :style="{
-        opacity: elementInfo.opacity,
-        filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '',
-        transform: flipStyle,
-      }"
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
     >
-      <SvgWrapper 
-        overflow="visible" 
-        :width="elementInfo.width"
-        :height="elementInfo.height"
+      <div 
+        class="element-content"
+        :style="{
+          opacity: elementInfo.opacity,
+          filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '',
+          transform: flipStyle,
+        }"
       >
-        <defs v-if="elementInfo.gradient">
-          <GradientDefs
-            :id="`base-gradient-${elementInfo.id}`" 
-            :type="elementInfo.gradient.type"
-            :color1="elementInfo.gradient.color[0]"
-            :color2="elementInfo.gradient.color[1]"
-            :rotate="elementInfo.gradient.rotate"
-          />
-        </defs>
-        <g 
-          :transform="`scale(${elementInfo.width / elementInfo.viewBox}, ${elementInfo.height / elementInfo.viewBox}) translate(0,0) matrix(1,0,0,1,0,0)`"
+        <SvgWrapper 
+          overflow="visible" 
+          :width="elementInfo.width"
+          :height="elementInfo.height"
         >
-          <path 
-            vector-effect="non-scaling-stroke" 
-            stroke-linecap="butt" 
-            stroke-miterlimit="8"
-            stroke-linejoin="" 
-            :d="elementInfo.path" 
-            :fill="elementInfo.gradient ? `url(#base-gradient-${elementInfo.id})` : elementInfo.fill"
-            :stroke="outlineColor"
-            :stroke-width="outlineWidth" 
-            :stroke-dasharray="outlineStyle === 'dashed' ? '10 5' : '0 0'" 
-          ></path>
-        </g>
-			</SvgWrapper>
+          <defs v-if="elementInfo.gradient">
+            <GradientDefs
+              :id="`base-gradient-${elementInfo.id}`" 
+              :type="elementInfo.gradient.type"
+              :color1="elementInfo.gradient.color[0]"
+              :color2="elementInfo.gradient.color[1]"
+              :rotate="elementInfo.gradient.rotate"
+            />
+          </defs>
+          <g 
+            :transform="`scale(${elementInfo.width / elementInfo.viewBox}, ${elementInfo.height / elementInfo.viewBox}) translate(0,0) matrix(1,0,0,1,0,0)`"
+          >
+            <path 
+              vector-effect="non-scaling-stroke" 
+              stroke-linecap="butt" 
+              stroke-miterlimit="8"
+              stroke-linejoin="" 
+              :d="elementInfo.path" 
+              :fill="elementInfo.gradient ? `url(#base-gradient-${elementInfo.id})` : elementInfo.fill"
+              :stroke="outlineColor"
+              :stroke-width="outlineWidth" 
+              :stroke-dasharray="outlineStyle === 'dashed' ? '10 5' : '0 0'" 
+            ></path>
+          </g>
+        </SvgWrapper>
+      </div>
     </div>
   </div>
 </template>
@@ -96,7 +100,10 @@ export default defineComponent({
 .base-element-shape {
   position: absolute;
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
   width: 100%;
   height: 100%;
diff --git a/src/views/components/element/ShapeElement/index.vue b/src/views/components/element/ShapeElement/index.vue
index 7bf47581..993cc38d 100644
--- a/src/views/components/element/ShapeElement/index.vue
+++ b/src/views/components/element/ShapeElement/index.vue
@@ -7,49 +7,53 @@
       left: elementInfo.left + 'px',
       width: elementInfo.width + 'px',
       height: elementInfo.height + 'px',
-      transform: `rotate(${elementInfo.rotate}deg)`,
     }"
     @mousedown="$event => handleSelectElement($event)"
   >
-    <div 
-      class="element-content" 
-      v-contextmenu="contextmenus"
-      :style="{
-        opacity: elementInfo.opacity,
-        filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '',
-        transform: flipStyle,
-      }"
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
     >
-      <SvgWrapper 
-        overflow="visible" 
-        :width="elementInfo.width"
-        :height="elementInfo.height"
+      <div 
+        class="element-content" 
+        v-contextmenu="contextmenus"
+        :style="{
+          opacity: elementInfo.opacity,
+          filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '',
+          transform: flipStyle,
+        }"
       >
-        <defs v-if="elementInfo.gradient">
-          <GradientDefs
-            :id="`editabel-gradient-${elementInfo.id}`" 
-            :type="elementInfo.gradient.type"
-            :color1="elementInfo.gradient.color[0]"
-            :color2="elementInfo.gradient.color[1]"
-            :rotate="elementInfo.gradient.rotate"
-          />
-        </defs>
-        <g 
-          :transform="`scale(${elementInfo.width / elementInfo.viewBox}, ${elementInfo.height / elementInfo.viewBox}) translate(0,0) matrix(1,0,0,1,0,0)`"
+        <SvgWrapper 
+          overflow="visible" 
+          :width="elementInfo.width"
+          :height="elementInfo.height"
         >
-          <path 
-            vector-effect="non-scaling-stroke" 
-            stroke-linecap="butt" 
-            stroke-miterlimit="8"
-            stroke-linejoin="" 
-            :d="elementInfo.path" 
-            :fill="elementInfo.gradient ? `url(#editabel-gradient-${elementInfo.id})` : elementInfo.fill"
-            :stroke="outlineColor"
-            :stroke-width="outlineWidth" 
-            :stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'" 
-          ></path>
-        </g>
-			</SvgWrapper>
+          <defs v-if="elementInfo.gradient">
+            <GradientDefs
+              :id="`editabel-gradient-${elementInfo.id}`" 
+              :type="elementInfo.gradient.type"
+              :color1="elementInfo.gradient.color[0]"
+              :color2="elementInfo.gradient.color[1]"
+              :rotate="elementInfo.gradient.rotate"
+            />
+          </defs>
+          <g 
+            :transform="`scale(${elementInfo.width / elementInfo.viewBox}, ${elementInfo.height / elementInfo.viewBox}) translate(0,0) matrix(1,0,0,1,0,0)`"
+          >
+            <path 
+              vector-effect="non-scaling-stroke" 
+              stroke-linecap="butt" 
+              stroke-miterlimit="8"
+              stroke-linejoin="" 
+              :d="elementInfo.path" 
+              :fill="elementInfo.gradient ? `url(#editabel-gradient-${elementInfo.id})` : elementInfo.fill"
+              :stroke="outlineColor"
+              :stroke-width="outlineWidth" 
+              :stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'" 
+            ></path>
+          </g>
+        </SvgWrapper>
+      </div>
     </div>
   </div>
 </template>
@@ -120,7 +124,10 @@ export default defineComponent({
     cursor: default;
   }
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
   width: 100%;
   height: 100%;
diff --git a/src/views/components/element/TextElement/BaseTextElement.vue b/src/views/components/element/TextElement/BaseTextElement.vue
index bdb4876c..158b36d6 100644
--- a/src/views/components/element/TextElement/BaseTextElement.vue
+++ b/src/views/components/element/TextElement/BaseTextElement.vue
@@ -5,25 +5,29 @@
       top: elementInfo.top + 'px',
       left: elementInfo.left + 'px',
       width: elementInfo.width + 'px',
-      transform: `rotate(${elementInfo.rotate}deg)`,
     }"
   >
-    <div 
-      class="element-content"
-      :style="{
-        backgroundColor: elementInfo.fill,
-        opacity: elementInfo.opacity,
-        textShadow: shadowStyle,
-        lineHeight: elementInfo.lineHeight,
-        letterSpacing: (elementInfo.wordSpace || 0) + 'px',
-      }"
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
     >
-      <ElementOutline
-        :width="elementInfo.width"
-        :height="elementInfo.height"
-        :outline="elementInfo.outline"
-      />
-      <div class="text ProseMirror-static" v-html="elementInfo.content"></div>
+      <div 
+        class="element-content"
+        :style="{
+          backgroundColor: elementInfo.fill,
+          opacity: elementInfo.opacity,
+          textShadow: shadowStyle,
+          lineHeight: elementInfo.lineHeight,
+          letterSpacing: (elementInfo.wordSpace || 0) + 'px',
+        }"
+      >
+        <ElementOutline
+          :width="elementInfo.width"
+          :height="elementInfo.height"
+          :outline="elementInfo.outline"
+        />
+        <div class="text ProseMirror-static" v-html="elementInfo.content"></div>
+      </div>
     </div>
   </div>
 </template>
@@ -61,7 +65,10 @@ export default defineComponent({
 .base-element-text {
   position: absolute;
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
   position: relative;
   padding: 10px;
diff --git a/src/views/components/element/TextElement/index.vue b/src/views/components/element/TextElement/index.vue
index da74c4d2..f1b27a0f 100644
--- a/src/views/components/element/TextElement/index.vue
+++ b/src/views/components/element/TextElement/index.vue
@@ -7,31 +7,35 @@
       top: elementInfo.top + 'px',
       left: elementInfo.left + 'px',
       width: elementInfo.width + 'px',
-      transform: `rotate(${elementInfo.rotate}deg)`,
     }"
     @mousedown="$event => handleSelectElement($event)"
   >
-    <div 
-      class="element-content"
-      :style="{
-        backgroundColor: elementInfo.fill,
-        opacity: elementInfo.opacity,
-        textShadow: shadowStyle,
-        lineHeight: elementInfo.lineHeight,
-        letterSpacing: (elementInfo.wordSpace || 0) + 'px',
-      }"
-      v-contextmenu="contextmenus"
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
     >
-      <ElementOutline
-        :width="elementInfo.width"
-        :height="elementInfo.height"
-        :outline="elementInfo.outline"
-      />
       <div 
-        class="text"
-        ref="editorViewRef"
-        @mousedown="$event => handleSelectElement($event, false)"
-      ></div>
+        class="element-content"
+        :style="{
+          backgroundColor: elementInfo.fill,
+          opacity: elementInfo.opacity,
+          textShadow: shadowStyle,
+          lineHeight: elementInfo.lineHeight,
+          letterSpacing: (elementInfo.wordSpace || 0) + 'px',
+        }"
+        v-contextmenu="contextmenus"
+      >
+        <ElementOutline
+          :width="elementInfo.width"
+          :height="elementInfo.height"
+          :outline="elementInfo.outline"
+        />
+        <div 
+          class="text"
+          ref="editorViewRef"
+          @mousedown="$event => handleSelectElement($event, false)"
+        ></div>
+      </div>
     </div>
   </div>
 </template>
@@ -325,7 +329,10 @@ export default defineComponent({
     cursor: default;
   }
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
   position: relative;
   padding: 10px;