From 062a8e1cff0c4b55295eb927aee0f9e3871706d5 Mon Sep 17 00:00:00 2001
From: wuchenguang1998 <63847336+wuchenguang1998@users.noreply.github.com>
Date: Mon, 1 Jul 2024 08:51:42 +0800
Subject: [PATCH] =?UTF-8?q?fix(plugin):=20resize=E6=8F=92=E4=BB=B6?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD=E9=80=82=E9=85=8D=E7=94=BB=E5=B8=83=E5=B1=85?=
 =?UTF-8?q?=E4=B8=AD=20(#454)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(plugin): resize插件拖拽适配画布居中

* fix(plugin): 解决resize插件拖拽控制条存在滞后感
---
 packages/core/plugin/ResizePlugin.ts | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/core/plugin/ResizePlugin.ts b/packages/core/plugin/ResizePlugin.ts
index d23f4816..e2be85eb 100644
--- a/packages/core/plugin/ResizePlugin.ts
+++ b/packages/core/plugin/ResizePlugin.ts
@@ -140,6 +140,7 @@ class ResizePlugin implements IPluginTempl {
         this.isDragging = false;
         this.dragEl.classList.remove('active');
         this.dragEl = null;
+        this.canvas.defaultCursor = 'default';
       }
     });
   }
@@ -152,16 +153,16 @@ class ResizePlugin implements IPluginTempl {
       const [scaleX, , , scaleY] = viewportTransform || [];
       const deltaX = e.clientX - this.startPoints.x;
       const deltaY = e.clientY - this.startPoints.y;
-      const deltaViewX = (e.clientX - this.startPoints.x) / scaleX;
-      const deltaViewY = (e.clientY - this.startPoints.y) / scaleY;
+      const deltaViewX = deltaX / scaleX;
+      const deltaViewY = deltaY / scaleY;
       const type = this.dragEl.id.split('-')[1];
       let tempLength = 0;
       switch (type) {
         case 'left':
-          tempLength = Math.round(this.wsOffset.width - deltaViewX);
+          tempLength = Math.round(this.wsOffset.width - deltaViewX * 2);
           if (tempLength >= this.minSize.width) {
             this.dragEl.style.left = `${this.barOffset.x + deltaX}px`;
-            workspace.set('left', this.wsOffset.left + deltaViewX);
+            workspace.set('left', this.wsOffset.left + deltaViewX * 2);
             workspace.set('width', tempLength);
           } else {
             workspace.set('left', this.wsOffset.left + this.wsOffset.width - this.minSize.width);
@@ -169,7 +170,7 @@ class ResizePlugin implements IPluginTempl {
           }
           break;
         case 'right':
-          tempLength = Math.round(this.wsOffset.width + deltaViewX);
+          tempLength = Math.round(this.wsOffset.width + deltaViewX * 2);
           if (tempLength >= this.minSize.width) {
             this.dragEl.style.left = `${this.barOffset.x + deltaX}px`;
             workspace.set('width', tempLength);
@@ -178,10 +179,10 @@ class ResizePlugin implements IPluginTempl {
           }
           break;
         case 'top':
-          tempLength = Math.round(this.wsOffset.height - deltaViewY);
+          tempLength = Math.round(this.wsOffset.height - deltaViewY * 2);
           if (tempLength >= this.minSize.height) {
             this.dragEl.style.top = `${this.barOffset.y + deltaY}px`;
-            workspace.set('top', this.wsOffset.top + deltaViewY);
+            workspace.set('top', this.wsOffset.top + deltaViewY * 2);
             workspace.set('height', tempLength);
           } else {
             workspace.set('top', this.wsOffset.top + this.wsOffset.height - this.minSize.height);
@@ -189,7 +190,7 @@ class ResizePlugin implements IPluginTempl {
           }
           break;
         case 'bottom':
-          tempLength = Math.round(this.wsOffset.height + deltaViewY);
+          tempLength = Math.round(this.wsOffset.height + deltaViewY * 2);
           if (tempLength >= this.minSize.height) {
             this.dragEl.style.top = `${this.barOffset.y + deltaY}px`;
             workspace.set('height', tempLength);
@@ -206,6 +207,11 @@ class ResizePlugin implements IPluginTempl {
         this.canvas.clipPath = cloned;
         this.canvas.requestRenderAll();
       });
+      if (['left', 'right'].includes(type)) {
+        this.canvas.defaultCursor = 'ew-resize';
+      } else {
+        this.canvas.defaultCursor = 'ns-resize';
+      }
       this.editor.emit('sizeChange', workspace.width, workspace.height);
     }
   }