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

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

* fix(plugin): 解决resize插件拖拽控制条存在滞后感

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,24 +153,24 @@ 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);
             workspace.set('width', this.minSize.width);
           }
           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,18 +179,18 @@ 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);
             workspace.set('height', this.minSize.height);
           }
           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);
     }
   }