update

src/views/Editor/Canvas/index.vue

@@ -45,8 +45,8 @@
         :key="element.id"
         :elementInfo="element"
         :elementIndex="index + 1"
-        :isActive="activeElementIdList.includes(element.id)"
-        :isHandleEl="element.id === handleElementId"
+        :isSelected="activeElementIdList.includes(element.id)"
+        :isActive="element.id === handleElementId"
         :isActiveGroupElement="activeGroupElementId === element.id"
         :isMultiSelect="activeElementIdList.length > 1"
         :selectElement="selectElement"

src/views/_common/_element/EditableElement.vue

@@ -9,8 +9,8 @@
       :is="currentElementComponent"
       :canvasScale="canvasScale"
       :elementInfo="elementInfo"
+      :isSelected="isSelected"
       :isActive="isActive"
-      :isHandleEl="isHandleEl"
       :isActiveGroupElement="isActiveGroupElement"
       :isMultiSelect="isMultiSelect"
       :animationIndex="animationIndex"
@@ -52,11 +52,11 @@ export default defineComponent({
       type: Number,
       required: true,
     },
-    isActive: {
+    isSelected: {
       type: Boolean,
       required: true,
     },
-    isHandleEl: {
+    isActive: {
       type: Boolean,
       required: true,
     },

src/views/_common/_element/ImageElement/index.vue

@@ -73,9 +73,9 @@
     <div 
       class="operate"
       :class="{
+        'selected': isSelected,
+        'multi-select': isMultiSelect && isSelected,
         'active': isActive,
-        'multi-select': isMultiSelect && isActive,
-        'selected': isHandleEl,
       }" 
       :style="{ transform: `scale(${1 / canvasScale})` }"
       v-if="!isCliping"
@@ -150,11 +150,11 @@ export default defineComponent({
       type: Number,
       required: true,
     },
-    isActive: {
+    isSelected: {
       type: Boolean,
       required: true,
     },
-    isHandleEl: {
+    isActive: {
       type: Boolean,
       required: true,
     },
@@ -332,7 +332,7 @@ export default defineComponent({
   z-index: 100;
   user-select: none;
 
-  &.active {
+  &.selected {
     .operate-border-line,
     .operate-resize-handler,
     .operate-rotate-handler {

src/views/_common/_element/TextElement/index.vue

@@ -32,9 +32,9 @@
     <div 
       class="operate" 
       :class="{
+        'selected': isSelected,
+        'multi-select': isMultiSelect && isSelected,
         'active': isActive,
-        'multi-select': isMultiSelect && isActive,
-        'selected': isHandleEl
       }" 
       :style="{ transform: `scale(${1 / canvasScale})` }"
       v-contextmenu="contextmenus"
@@ -49,7 +49,8 @@
         @mousedown="handleSelectElement($event)"
       />
       <template v-if="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)">
-        <ResizeHandler class="operate-resize-handler" 
+        <ResizeHandler
+          class="operate-resize-handler" 
           v-for="point in resizeHandlers"
           :key="point.direction"
           :type="point.direction"
@@ -101,11 +102,11 @@ export default defineComponent({
       type: Number,
       required: true,
     },
-    isActive: {
+    isSelected: {
       type: Boolean,
       required: true,
     },
-    isHandleEl: {
+    isActive: {
       type: Boolean,
       required: true,
     },
@@ -210,10 +211,10 @@ export default defineComponent({
   z-index: 100;
   user-select: none;
 
-  &.active {
+  &.selected {
     .operate-border-line,
     .operate-resize-handler,
-    .operate-rotate-handles {
+    .operate-rotate-handler {
       display: block;
     }
   }
@@ -224,7 +225,7 @@ export default defineComponent({
 
   .operate-border-line,
   .operate-resize-handler,
-  .operate-rotate-handles {
+  .operate-rotate-handler {
     display: none;
   }
 }

src/views/_common/_operate/ResizeHandler.vue

@@ -25,9 +25,9 @@ export default {
   left: 0;
   top: 0;
   margin: -5px 0 0 -5px;
-  border: 1px solid #666;
+  border: 1px solid $themeColor;
   background-color: #fff;
-  border-radius: 50%;
+  border-radius: 1px;
 
   &.left-top {
     cursor: nwse-resize;

src/views/_common/_operate/RotateHandler.vue

@@ -14,16 +14,18 @@ export default {
 .rotate-handler {
   position: absolute;
   top: -24px;
-  margin: -12px 0 0 -12px;
-  width: 24px;
-  height: 24px;
-  background-color: #333;
+  margin: -10px 0 0 -10px;
+  width: 20px;
+  height: 20px;
   border-radius: 50%;
-  color: #fff;
+  background-color: #fff;
+  box-shadow: 1px 1px 2px #888;
 
   .rotate-icon {
     width: 100%;
     height: 100%;
+    font-size: 12px;
+    color: #666;
     display: flex;
     justify-content: center;
     align-items: center;