fix(edgeless): horizontal pan with mouse under the windows system (#6507

)
toeverything · Mar 19, 2024 · b2d3991 · b2d3991
1 parent b5a0430
commit b2d3991
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 33 deletions.
diff --git a/packages/blocks/src/root-block/edgeless/edgeless-root-block.ts b/packages/blocks/src/root-block/edgeless/edgeless-root-block.ts
@@ -3,6 +3,7 @@ import '../../surface-block/surface-block.js';
 import './components/block-portal/frame/edgeless-frame.js';
 
 import type { SurfaceSelection } from '@blocksuite/block-std';
+import { IS_WINDOWS } from '@blocksuite/global/env';
 import { assertExists, throttle } from '@blocksuite/global/utils';
 import { BlockElement } from '@blocksuite/lit';
 import { type BlockModel } from '@blocksuite/store';
@@ -19,6 +20,7 @@ import {
 import { listenToThemeChange } from '../../_common/theme/utils.js';
 import {
   type EdgelessTool,
+  isPinchEvent,
   NoteDisplayMode,
   Point,
   requestConnectedFrame,
@@ -47,6 +49,7 @@ import {
   Bound,
   type IBound,
   type IVec,
+  normalizeWheelDeltaY,
   serializeXYWH,
   Vec,
 } from '../../surface-block/index.js';
@@ -663,6 +666,7 @@ export class EdgelessRootBlockComponent extends BlockElement<
     this._initSurface();
 
     this._initViewport();
+    this._initWheelEvent();
 
     if (this.doc.readonly) {
       this.tools.setEdgelessTool({ type: 'pan', panning: true });
@@ -721,6 +725,43 @@ export class EdgelessRootBlockComponent extends BlockElement<
     this.service.tool.mount(this);
   }
 
+  private _initWheelEvent() {
+    this._disposables.add(
+      this.dispatcher.add('wheel', ctx => {
+        const state = ctx.get('defaultState');
+        const e = state.event as WheelEvent;
+
+        e.preventDefault();
+
+        const { viewport } = this.service;
+        // zoom
+        if (isPinchEvent(e)) {
+          const rect = this.getBoundingClientRect();
+          // Perform zooming relative to the mouse position
+          const [baseX, baseY] = this.service.viewport.toModelCoord(
+            e.clientX - rect.x,
+            e.clientY - rect.y
+          );
+
+          const zoom = normalizeWheelDeltaY(e.deltaY, viewport.zoom);
+          viewport.setZoom(zoom, new Point(baseX, baseY));
+          e.stopPropagation();
+        }
+        // pan
+        else {
+          const simulateHorizontalScroll = IS_WINDOWS && e.shiftKey;
+          const dx = simulateHorizontalScroll
+            ? e.deltaY / viewport.zoom
+            : e.deltaX / viewport.zoom;
+          const dy = simulateHorizontalScroll ? 0 : e.deltaY / viewport.zoom;
+
+          viewport.applyDeltaCenter(dx, dy);
+          e.stopPropagation();
+        }
+      })
+    );
+  }
+
   override connectedCallback() {
     super.connectedCallback();
     this.clipboardController.hostConnected();

diff --git a/packages/blocks/src/root-block/edgeless/services/tools-manager.ts b/packages/blocks/src/root-block/edgeless/services/tools-manager.ts
@@ -10,11 +10,8 @@ import { DisposableGroup } from '@blocksuite/global/utils';
 import {
   type EdgelessTool,
   isMiddleButtonPressed,
-  isPinchEvent,
   NoteDisplayMode,
-  Point,
 } from '../../../_common/utils/index.js';
-import { normalizeWheelDeltaY } from '../../../surface-block/index.js';
 import type { Bound } from '../../../surface-block/utils/bound.js';
 import type { EdgelessToolController } from '../controllers/tools/index.js';
 import type { EdgelessRootBlockComponent } from '../edgeless-root-block.js';
@@ -234,36 +231,6 @@ export class EdgelessToolsManager {
       const event = ctx.get('defaultState');
       this._onContainerContextMenu(event);
     });
-    this._add('wheel', ctx => {
-      const state = ctx.get('defaultState');
-      const e = state.event;
-      if (!(e instanceof WheelEvent)) return;
-
-      e.preventDefault();
-
-      const container = this.container;
-      const { viewport } = this.service;
-      // pan
-      if (!isPinchEvent(e)) {
-        const dx = e.deltaX / viewport.zoom;
-        const dy = e.deltaY / viewport.zoom;
-        viewport.applyDeltaCenter(dx, dy);
-        e.stopPropagation();
-      }
-      // zoom
-      else {
-        const rect = container.getBoundingClientRect();
-        // Perform zooming relative to the mouse position
-        const [baseX, baseY] = this.service.viewport.toModelCoord(
-          e.clientX - rect.x,
-          e.clientY - rect.y
-        );
-
-        const zoom = normalizeWheelDeltaY(e.deltaY, viewport.zoom);
-        viewport.setZoom(zoom, new Point(baseX, baseY));
-        e.stopPropagation();
-      }
-    });
   }
 
   private _add = (name: EventName, fn: UIEventHandler) => {