From 6358aa9b3ca8b30b44d9245bbc70d7b11c45248d Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sun, 27 Jun 2021 18:40:55 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=97=8B=E8=BD=AC=E5=90=8E=E5=85=83?=
 =?UTF-8?q?=E7=B4=A0=E7=BC=A9=E6=94=BE=E6=8E=A7=E5=88=B6=E7=82=B9=E9=BC=A0?=
 =?UTF-8?q?=E6=A0=87=E6=8C=87=E9=92=88=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Canvas/Operate/ImageElementOperate.vue    |  1 +
 .../Editor/Canvas/Operate/ResizeHandler.vue   | 79 ++++++++++++++-----
 .../Canvas/Operate/ShapeElementOperate.vue    |  1 +
 .../Canvas/Operate/TextElementOperate.vue     |  1 +
 4 files changed, 62 insertions(+), 20 deletions(-)

diff --git a/src/views/Editor/Canvas/Operate/ImageElementOperate.vue b/src/views/Editor/Canvas/Operate/ImageElementOperate.vue
index 71198ae9..9c550ed4 100644
--- a/src/views/Editor/Canvas/Operate/ImageElementOperate.vue
+++ b/src/views/Editor/Canvas/Operate/ImageElementOperate.vue
@@ -13,6 +13,7 @@
         v-for="point in resizeHandlers"
         :key="point.direction"
         :type="point.direction"
+        :rotate="elementInfo.rotate"
         :style="point.style"
         @mousedown.stop="$event => scaleElement($event, elementInfo, point.direction)"
       />
diff --git a/src/views/Editor/Canvas/Operate/ResizeHandler.vue b/src/views/Editor/Canvas/Operate/ResizeHandler.vue
index d665df34..d93a084b 100644
--- a/src/views/Editor/Canvas/Operate/ResizeHandler.vue
+++ b/src/views/Editor/Canvas/Operate/ResizeHandler.vue
@@ -1,20 +1,43 @@
 <template>
-  <div :class="['resize-handler', type]"></div>
+  <div :class="['resize-handler', rotateClassName, type]"></div>
 </template>
 
 <script lang="ts">
-import { PropType } from 'vue'
+import { computed, defineComponent, PropType } from 'vue'
 import { OperateResizeHandler } from '@/types/edit'
 
-export default {
+export default defineComponent({
   name: 'resize-handler',
   props: {
     type: {
       type: String as PropType<OperateResizeHandler>,
       default: '',
     },
+    rotate: {
+      type: Number,
+      default: 0,
+    },
   },
-}
+  setup(props) {
+    const rotateClassName = computed(() => {
+      const prefix = 'rotate-'
+      const rotate = props.rotate
+      if (rotate > -22.5 && rotate <= 22.5) return prefix + 0
+      else if (rotate > 22.5 && rotate <= 67.5) return prefix + 45
+      else if (rotate > 67.5 && rotate <= 112.5) return prefix + 90
+      else if (rotate > 112.5 && rotate <= 157.5) return prefix + 135
+      else if (rotate > 157.5 || rotate <= -157.5) return prefix + 0
+      else if (rotate > -157.5 && rotate <= -112.5) return prefix + 45
+      else if (rotate > -112.5 && rotate <= -67.5) return prefix + 90
+      else if (rotate > -67.5 && rotate <= -22.5) return prefix + 135
+      return prefix + 0
+    })
+
+    return {
+      rotateClassName,
+    }
+  },
+})
 </script>
 
 <style lang="scss" scoped>
@@ -29,29 +52,45 @@ export default {
   background-color: #fff;
   border-radius: 1px;
 
-  &.left-top {
+  &.left-top.rotate-0,
+  &.right-bottom.rotate-0,
+  &.left.rotate-45,
+  &.right.rotate-45,
+  &.left-bottom.rotate-90,
+  &.right-top.rotate-90,
+  &.top.rotate-135,
+  &.bottom.rotate-135 {
     cursor: nwse-resize;
   }
-  &.top {
+  &.top.rotate-0,
+  &.bottom.rotate-0,
+  &.left-top.rotate-45,
+  &.right-bottom.rotate-45,
+  &.left.rotate-90,
+  &.right.rotate-90,
+  &.left-bottom.rotate-135,
+  &.right-top.rotate-135 {
     cursor: ns-resize;
   }
-  &.right-top {
+  &.left-bottom.rotate-0,
+  &.right-top.rotate-0,
+  &.top.rotate-45,
+  &.bottom.rotate-45,
+  &.left-top.rotate-90,
+  &.right-bottom.rotate-90,
+  &.left.rotate-135,
+  &.right.rotate-135 {
     cursor: nesw-resize;
   }
-  &.left {
+  &.left.rotate-0,
+  &.right.rotate-0,
+  &.left-bottom.rotate-45,
+  &.right-top.rotate-45,
+  &.top.rotate-90,
+  &.bottom.rotate-90,
+  &.left-top.rotate-135,
+  &.right-bottom.rotate-135 {
     cursor: ew-resize;
   }
-  &.right {
-    cursor: ew-resize;
-  }
-  &.left-bottom {
-    cursor: nesw-resize;
-  }
-  &.bottom {
-    cursor: ns-resize;
-  }
-  &.right-bottom {
-    cursor: nwse-resize;
-  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/Editor/Canvas/Operate/ShapeElementOperate.vue b/src/views/Editor/Canvas/Operate/ShapeElementOperate.vue
index efe93d5d..ffb56c10 100644
--- a/src/views/Editor/Canvas/Operate/ShapeElementOperate.vue
+++ b/src/views/Editor/Canvas/Operate/ShapeElementOperate.vue
@@ -13,6 +13,7 @@
         v-for="point in resizeHandlers"
         :key="point.direction"
         :type="point.direction"
+        :rotate="elementInfo.rotate"
         :style="point.style"
         @mousedown.stop="$event => scaleElement($event, elementInfo, point.direction)"
       />
diff --git a/src/views/Editor/Canvas/Operate/TextElementOperate.vue b/src/views/Editor/Canvas/Operate/TextElementOperate.vue
index 3518ec46..80414b0f 100644
--- a/src/views/Editor/Canvas/Operate/TextElementOperate.vue
+++ b/src/views/Editor/Canvas/Operate/TextElementOperate.vue
@@ -13,6 +13,7 @@
         v-for="point in textElementResizeHandlers"
         :key="point.direction"
         :type="point.direction"
+        :rotate="elementInfo.rotate"
         :style="point.style"
         @mousedown.stop="$event => scaleElement($event, elementInfo, point.direction)"
       />