From 952ffb2206606be127f4e11ffd3b84ae80c4d09a Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <1171051090@qq.com>
Date: Tue, 19 Jan 2021 23:51:09 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=9B=BE=E8=A1=A8=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=99=A8=E5=92=8C=E5=9B=BE=E7=89=87=E8=A3=81=E5=89=AA?=
 =?UTF-8?q?=E5=B7=A5=E5=85=B7=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChartStylePanel/ChartDataEditor.vue       | 33 ++++++++++++++++---
 .../element/ImageElement/ImageClipHandler.vue | 12 ++++---
 2 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue
index 0b8b0c7..6753774 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue
@@ -162,11 +162,16 @@ export default defineComponent({
         tempRangeSize.value = { width, height }
       }
 
-      document.onmouseup = () => {
+      document.onmouseup = e => {
         isMouseDown = false
         document.onmousemove = null
         document.onmouseup = null
 
+        const endPageX = e.pageX
+        const endPageY = e.pageY
+
+        if(startPageX === endPageX && startPageY === endPageY) return
+
         let width = tempRangeSize.value.width
         let height = tempRangeSize.value.height
         if(width % CELL_WIDTH > CELL_WIDTH * 0.5) width = width + (CELL_WIDTH - width % CELL_WIDTH)
@@ -247,13 +252,31 @@ export default defineComponent({
 }
 .resizable {
   position: absolute;
-  width: 8px;
-  height: 8px;
+  width: 12px;
+  height: 12px;
   left: 0;
   top: 0;
-  margin: -4px 0 0 -4px;
-  background-color: $themeColor;
+  margin: -9px 0 0 -9px;
   cursor: nwse-resize;
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: 4px;
+    height: 12px;
+    right: 0;
+    top: 0;
+    background-color: $themeColor;
+  }
+  &::before {
+    content: '';
+    position: absolute;
+    width: 12px;
+    height: 4px;
+    right: 0;
+    bottom: 0;
+    background-color: $themeColor;
+  }
 }
 table {
   width: 100%;
diff --git a/src/views/components/element/ImageElement/ImageClipHandler.vue b/src/views/components/element/ImageElement/ImageClipHandler.vue
index 82a882d..0865443 100644
--- a/src/views/components/element/ImageElement/ImageClipHandler.vue
+++ b/src/views/components/element/ImageElement/ImageClipHandler.vue
@@ -39,8 +39,12 @@
         :key="point" 
         @mousedown.stop="$event => scaleClipRange($event, point)"
       >
-        <SvgWrapper width="12" height="12" fill="#fff" stroke="#666">
-          <path d="M 12 0 L 0 0 L 0 12 L 3 12 L 3 3 L 12 3 L 12 0 Z"></path>
+        <SvgWrapper width="12" height="12" fill="#fff" stroke="#333">
+          <path
+            stroke-width="0.3" 
+            shape-rendering="crispEdges"
+            d="M 16 0 L 0 0 L 0 16 L 4 16 L 4 4 L 16 4 L 16 0 Z"
+          ></path>
         </SvgWrapper>
       </div>
     </div>
@@ -288,8 +292,8 @@ export default defineComponent({
       isSettingClipRange.value = true
       let isMouseDown = true
 
-      const minWidth = 32 / props.width * 100
-      const minHeight = 32 / props.height * 100
+      const minWidth = 50 / props.width * 100
+      const minHeight = 50 / props.height * 100
       
       const startPageX = e.pageX
       const startPageY = e.pageY