From 1a87b3aeecafd4423b4e683752c130a4c308a8ae Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <1171051090@qq.com>
Date: Thu, 24 Dec 2020 17:09:37 +0800
Subject: [PATCH] =?UTF-8?q?class=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Editor/Canvas/MultiSelectOperate.vue      |  1 +
 src/views/_common/_element/ElementOutline.vue |  1 +
 .../ImageElement/BaseImageElement.vue         |  4 +--
 .../ImageElement/ImageEllipseOutline.vue      |  3 +-
 .../ImageElement/ImagePolygonOutline.vue      |  1 +
 .../ImageElement/ImageRectOutline.vue         |  1 +
 .../_common/_element/ImageElement/index.vue   | 28 +++++++--------
 .../_element/TextElement/BaseTextElement.vue  | 12 +++----
 .../_common/_element/TextElement/index.vue    | 34 +++++++++----------
 9 files changed, 44 insertions(+), 41 deletions(-)

diff --git a/src/views/Editor/Canvas/MultiSelectOperate.vue b/src/views/Editor/Canvas/MultiSelectOperate.vue
index 5c7a2774..c00e881a 100644
--- a/src/views/Editor/Canvas/MultiSelectOperate.vue
+++ b/src/views/Editor/Canvas/MultiSelectOperate.vue
@@ -108,6 +108,7 @@ export default defineComponent({
 
     return {
       ...toRefs(range),
+      canvasScale,
       borderLines,
       disableResizablePoint,
       resizablePoints,
diff --git a/src/views/_common/_element/ElementOutline.vue b/src/views/_common/_element/ElementOutline.vue
index 139c5151..04ab42d8 100644
--- a/src/views/_common/_element/ElementOutline.vue
+++ b/src/views/_common/_element/ElementOutline.vue
@@ -1,6 +1,7 @@
 <template>
   <SvgWrapper 
     class="element-outline"
+    v-if="outline"
     overflow="visible" 
     :width="width"
     :height="height"
diff --git a/src/views/_common/_element/ImageElement/BaseImageElement.vue b/src/views/_common/_element/ImageElement/BaseImageElement.vue
index 04e622dc..0bbb3e46 100644
--- a/src/views/_common/_element/ImageElement/BaseImageElement.vue
+++ b/src/views/_common/_element/ImageElement/BaseImageElement.vue
@@ -1,6 +1,6 @@
 <template>
   <div 
-    class="base-element image"
+    class="base-element-image"
     :style="{
       top: elementInfo.top + 'px',
       left: elementInfo.left + 'px',
@@ -146,7 +146,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.base-element {
+.base-element-image {
   position: absolute;
 }
 
diff --git a/src/views/_common/_element/ImageElement/ImageEllipseOutline.vue b/src/views/_common/_element/ImageElement/ImageEllipseOutline.vue
index 9056379c..a1ec2c59 100644
--- a/src/views/_common/_element/ImageElement/ImageEllipseOutline.vue
+++ b/src/views/_common/_element/ImageElement/ImageEllipseOutline.vue
@@ -1,6 +1,7 @@
 <template>
   <SvgWrapper 
-    class="image-ellipse-outline" 
+    class="image-ellipse-outline"
+    v-if="outline"
     overflow="visible" 
     :width="width"
     :height="height"
diff --git a/src/views/_common/_element/ImageElement/ImagePolygonOutline.vue b/src/views/_common/_element/ImageElement/ImagePolygonOutline.vue
index 589e98e7..916afae9 100644
--- a/src/views/_common/_element/ImageElement/ImagePolygonOutline.vue
+++ b/src/views/_common/_element/ImageElement/ImagePolygonOutline.vue
@@ -1,6 +1,7 @@
 <template>
   <SvgWrapper 
     class="image-polygon-outline" 
+    v-if="outline"
     overflow="visible" 
     :width="width"
     :height="height"
diff --git a/src/views/_common/_element/ImageElement/ImageRectOutline.vue b/src/views/_common/_element/ImageElement/ImageRectOutline.vue
index 9b7fd0d0..757ba841 100644
--- a/src/views/_common/_element/ImageElement/ImageRectOutline.vue
+++ b/src/views/_common/_element/ImageElement/ImageRectOutline.vue
@@ -1,6 +1,7 @@
 <template>
   <SvgWrapper 
     class="image-rect-outline" 
+    v-if="outline"
     overflow="visible" 
     :width="width"
     :height="height"
diff --git a/src/views/_common/_element/ImageElement/index.vue b/src/views/_common/_element/ImageElement/index.vue
index 704e14f1..16f652dc 100644
--- a/src/views/_common/_element/ImageElement/index.vue
+++ b/src/views/_common/_element/ImageElement/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div 
-    class="editable-element image"
+    class="editable-element-image"
     :class="{ 'lock': elementInfo.lock }"
     :style="{
       top: elementInfo.top + 'px',
@@ -81,7 +81,7 @@
       v-if="!isCliping"
     >
       <BorderLine 
-        class="el-border-line" 
+        class="operate-border-line" 
         v-for="line in borderLines" 
         :key="line.type" 
         :type="line.type" 
@@ -89,7 +89,7 @@
       />
       <template v-if="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)">
         <ResizablePoint 
-          class="el-resizable-point" 
+          class="operate-resizable-point" 
           v-for="point in resizablePoints"
           :key="point.type"
           :type="point.type"
@@ -97,7 +97,7 @@
           @mousedown.stop="scaleElement($event, elementInfo, point.direction)"
         />
         <RotateHandler
-          class="el-rotate-handle" 
+          class="operate-rotate-handle" 
           :style="{left: scaleWidth / 2 + 'px'}"
           @mousedown.stop="rotateElement(elementInfo)"
         />
@@ -291,14 +291,14 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.editable-element {
+.editable-element-image {
   position: absolute;
 
-  &.lock .el-border-line {
+  &.lock .operate-border-line {
     border-color: #888;
   }
 
-  &:hover .el-border-line {
+  &:hover .operate-border-line {
     display: block;
   }
 
@@ -333,20 +333,20 @@ export default defineComponent({
   user-select: none;
 
   &.active {
-    .el-border-line,
-    .el-resizable-point,
-    .el-rotate-handle {
+    .operate-border-line,
+    .operate-resizable-point,
+    .operate-rotate-handle {
       display: block;
     }
   }
 
-  &.multi-select:not(.selected) .el-border-line {
+  &.multi-select:not(.selected) .operate-border-line {
     border-color: rgba($color: $themeColor, $alpha: .3);
   }
 
-  .el-border-line,
-  .el-resizable-point,
-  .el-rotate-handle {
+  .operate-border-line,
+  .operate-resizable-point,
+  .operate-rotate-handle {
     display: none;
   }
 }
diff --git a/src/views/_common/_element/TextElement/BaseTextElement.vue b/src/views/_common/_element/TextElement/BaseTextElement.vue
index 2bd4b389..4b5ed023 100644
--- a/src/views/_common/_element/TextElement/BaseTextElement.vue
+++ b/src/views/_common/_element/TextElement/BaseTextElement.vue
@@ -1,6 +1,6 @@
 <template>
   <div 
-    class="base-element text"
+    class="base-element-text"
     :style="{
       top: elementInfo.top + 'px',
       left: elementInfo.left + 'px',
@@ -20,9 +20,7 @@
         :height="elementInfo.height"
         :outline="elementInfo.outline"
       />
-      <div class="text-content"
-        v-html="elementInfo.content" 
-      ></div>
+      <div class="text" v-html="elementInfo.content"></div>
     </div>
   </div>
 </template>
@@ -57,7 +55,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.base-element {
+.base-element-text {
   position: absolute;
 }
 
@@ -66,12 +64,12 @@ export default defineComponent({
   padding: 10px;
   line-height: 1.5;
 
-  .text-content {
+  .text {
     position: relative;
   }
 }
 
-::v-deep(.text-content) {
+::v-deep(.text) {
   word-break: break-word;
   font-family: '微软雅黑';
   outline: 0;
diff --git a/src/views/_common/_element/TextElement/index.vue b/src/views/_common/_element/TextElement/index.vue
index 95ae0b50..7931d6e8 100644
--- a/src/views/_common/_element/TextElement/index.vue
+++ b/src/views/_common/_element/TextElement/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div 
-    class="editable-element text" 
+    class="editable-element-text" 
     :class="{ 'lock': elementInfo.lock }"
     :style="{
       top: elementInfo.top + 'px',
@@ -23,7 +23,7 @@
         :height="elementInfo.height"
         :outline="elementInfo.outline"
       />
-      <div class="text-content"
+      <div class="text"
         v-html="elementInfo.content" 
         :contenteditable="isActive && !elementInfo.lock"
       ></div>
@@ -40,7 +40,7 @@
       v-contextmenu="contextmenus"
     >
       <BorderLine 
-        class="el-border-line"
+        class="operate-border-line"
         v-for="line in borderLines" 
         :key="line.type" 
         :type="line.type" 
@@ -49,7 +49,7 @@
         @mousedown="handleSelectElement($event)"
       />
       <template v-if="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)">
-        <ResizablePoint class="el-resizable-point" 
+        <ResizablePoint class="operate-resizable-point" 
           v-for="point in resizablePoints"
           :key="point.type"
           :type="point.type"
@@ -57,7 +57,7 @@
           @mousedown.stop="scaleElement($event, elementInfo, point.direction)"
         />
         <RotateHandler
-          class="el-rotate-handle" 
+          class="operate-rotate-handle" 
           :style="{ left: scaleWidth / 2 + 'px' }"
           @mousedown.stop="rotateElement(elementInfo)"
         />
@@ -165,14 +165,14 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.editable-element {
+.editable-element-text {
   position: absolute;
 
-  &.lock .el-border-line {
+  &.lock .operate-border-line {
     border-color: #888;
   }
 
-  &:hover .el-border-line {
+  &:hover .operate-border-line {
     display: block;
   }
 
@@ -186,13 +186,13 @@ export default defineComponent({
   padding: 10px;
   line-height: 1.5;
 
-  .text-content {
+  .text {
     position: relative;
     cursor: text;
   }
 }
 
-::v-deep(.text-content) {
+::v-deep(.text) {
   word-break: break-word;
   font-family: '微软雅黑';
   outline: 0;
@@ -211,20 +211,20 @@ export default defineComponent({
   user-select: none;
 
   &.active {
-    .el-border-line,
-    .el-resizable-point,
-    .el-rotate-handle {
+    .operate-border-line,
+    .operate-resizable-point,
+    .operate-rotate-handle {
       display: block;
     }
   }
 
-  &.multi-select:not(.selected) .el-border-line {
+  &.multi-select:not(.selected) .operate-border-line {
     border-color: rgba($color: $themeColor, $alpha: .3);
   }
 
-  .el-border-line,
-  .el-resizable-point,
-  .el-rotate-handle {
+  .operate-border-line,
+  .operate-resizable-point,
+  .operate-rotate-handle {
     display: none;
   }
 }