fix: canvas drag

F-star · Mar 1, 2024 · 475042e · 475042e
1 parent c3be659
commit 475042e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/packages/core/src/canvas_dragger.ts b/packages/core/src/canvas_dragger.ts
@@ -11,11 +11,15 @@ export class CanvasDragger {
   private inactiveAfterPointerUp = false;
   private isEnableDragCanvasBySpace = true;
 
-  private isPressing = false;
+  private _isPressing = false;
   private isDragging = false;
   private startPoint: IPoint = { x: 0, y: 0 };
   private startViewportPos: IPoint = { x: 0, y: 0 };
 
+  isPressing() {
+    return this._isPressing;
+  }
+
   private handleSpaceToggle = (isSpacePressing: boolean) => {
     if (!this.isEnableDragCanvasBySpace) return;
     if (isSpacePressing) {
@@ -72,7 +76,7 @@ export class CanvasDragger {
   }
 
   inactive() {
-    if (this.isPressing) {
+    if (this._isPressing) {
       this.inactiveAfterPointerUp = true;
     } else {
       if (!this._active) {
@@ -103,13 +107,13 @@ export class CanvasDragger {
     if (!(e.button === 0 || e.button === 1)) return;
     this.editor.cursorManager.setCursor('grabbing');
 
-    this.isPressing = true;
+    this._isPressing = true;
     this.startPoint = this.editor.getCursorXY(e);
     this.startViewportPos = this.editor.viewportManager.getViewport();
   };
 
   private handlePointerMove = (e: PointerEvent) => {
-    if (!this.isPressing) return;
+    if (!this._isPressing) return;
     const point: IPoint = this.editor.getCursorXY(e);
     const dx = point.x - this.startPoint.x;
     const dy = point.y - this.startPoint.y;
@@ -134,7 +138,7 @@ export class CanvasDragger {
   private handlePointerUp = () => {
     this.editor.cursorManager.setCursor('grab');
     this.isDragging = false;
-    this.isPressing = false;
+    this._isPressing = false;
     if (this.inactiveAfterPointerUp) {
       this.inactiveAfterPointerUp = false;
       this.inactive();

diff --git a/packages/core/src/host_event_manager/host_event_manager.ts b/packages/core/src/host_event_manager/host_event_manager.ts
@@ -120,7 +120,7 @@ export class HostEventManager {
    */
   private bindWheelEvent() {
     const editor = this.editor;
-    const handler = (event: WheelEvent) => {
+    const onWheel = (event: WheelEvent) => {
       if (event.ctrlKey || event.metaKey) {
         event.preventDefault();
         const point = this.editor.getCursorXY(event);
@@ -139,7 +139,10 @@ export class HostEventManager {
         }
         editor.sceneGraph.render();
       } else {
-        if (this.editor.canvasDragger.isActive()) {
+        if (
+          this.editor.canvasDragger.isActive() &&
+          this.editor.canvasDragger.isPressing()
+        ) {
           return;
         }
         const zoom = editor.zoomManager.getZoom();
@@ -158,12 +161,12 @@ export class HostEventManager {
       }
     };
 
-    editor.canvasElement.addEventListener('wheel', handler);
+    editor.canvasElement.addEventListener('wheel', onWheel);
     window.addEventListener('wheel', preventDefaultScalePage, {
       passive: false,
     });
     this.unbindHandlers.push(() => {
-      editor.canvasElement.removeEventListener('wheel', handler);
+      editor.canvasElement.removeEventListener('wheel', onWheel);
       window.removeEventListener('wheel', preventDefaultScalePage);
     });
   }