From ed89cfd591bbe6a72aa2110d695f58c9404a7dc2 Mon Sep 17 00:00:00 2001
From: lijinke666 <a1231236677287@163.com>
Date: Thu, 12 Sep 2024 15:09:19 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=B5=8F=E8=A7=88?=
 =?UTF-8?q?=E5=99=A8=E7=AA=97=E5=8F=A3=E5=A4=9A=E6=AC=A1=E6=94=BE=E5=A4=A7?=
 =?UTF-8?q?=E5=90=8E=E8=A1=A8=E6=A0=BC=E6=B8=B2=E6=9F=93=E6=A8=A1=E7=B3=8A?=
 =?UTF-8?q?=20close=20#2884?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/s2-core/src/ui/hd-adapter/index.ts | 29 ++++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/s2-core/src/ui/hd-adapter/index.ts b/packages/s2-core/src/ui/hd-adapter/index.ts
index e2bef607cd..9d326b9bbb 100644
--- a/packages/s2-core/src/ui/hd-adapter/index.ts
+++ b/packages/s2-core/src/ui/hd-adapter/index.ts
@@ -2,6 +2,12 @@ import { debounce } from 'lodash';
 import type { SpreadSheet } from '../../sheet-type';
 import { isMobile } from '../../utils/is-mobile';
 
+/**
+ * 基于 Canvas 的高清适配方案
+ * 1. 双屏切换, devicePixelRatio 变化时
+ * 2. Mac 触控板缩放
+ * 3. 浏览器窗口缩放
+ */
 export class HdAdapter {
   private viewport = window as typeof window & {
     visualViewport: VisualViewport;
@@ -13,6 +19,8 @@ export class HdAdapter {
 
   private isDevicePixelRatioChange = false;
 
+  private zoomOffsetLeft: number | undefined;
+
   constructor(spreadsheet: SpreadSheet) {
     this.spreadsheet = spreadsheet;
   }
@@ -91,6 +99,9 @@ export class HdAdapter {
     await this.renderByZoomScale(event);
   };
 
+  /**
+   * 如果是浏览器窗口的放大缩小 (command +/-), 也会触发
+   */
   private renderByDevicePixelRatioChanged = async () => {
     this.isDevicePixelRatioChange = true;
     await this.renderByDevicePixelRatio();
@@ -104,24 +115,34 @@ export class HdAdapter {
       options: { width, height },
     } = this.spreadsheet;
     const canvas = this.spreadsheet.getCanvasElement();
+    const currentRatio = Math.ceil(ratio);
     const lastRatio = container.getConfig().devicePixelRatio ?? 1;
 
-    if (lastRatio === ratio || !canvas) {
+    if (lastRatio === currentRatio || !canvas) {
       return;
     }
 
     // https://github.com/antvis/G/issues/1143
-    container.getConfig().devicePixelRatio = ratio;
+    container.getConfig().devicePixelRatio = currentRatio;
     container.resize(width!, height!);
 
     await this.spreadsheet.render(false);
   };
 
   private renderByZoomScale = debounce(async (event: Event) => {
-    const ratio = Math.ceil((event.target as VisualViewport)?.scale);
+    const target = event.target as VisualViewport;
+    const ratio = Math.ceil(target?.scale);
+
+    /**
+     * github.com/antvis/S2/issues/2884
+     * 如果是触控板双指缩放触发的 resize 事件, offsetLeft 可以获取到值
+     * 如果是浏览器窗口的放大缩小 (command +/-), offsetLeft 始终是 0
+     */
+    const isTouchPadZoom = this.zoomOffsetLeft !== target.offsetLeft;
 
-    if (ratio >= 1 && !this.isDevicePixelRatioChange) {
+    if (ratio >= 1 && isTouchPadZoom && !this.isDevicePixelRatioChange) {
       await this.renderByDevicePixelRatio(ratio);
+      this.zoomOffsetLeft = target.offsetLeft;
     }
   }, 350);
 }