feat: 监听系统 Ctrl + +/-/0/wheel 的缩放，同步到表格

liaoOyao · Nov 1, 2021 · a5978c0 · a5978c0
1 parent 7b31b4e
commit a5978c0
Showing 1 changed file with 81 additions and 14 deletions.
diff --git a/src/controllers/zoom.js b/src/controllers/zoom.js
@@ -27,7 +27,7 @@ export function zoomChange(ratio){
                 "sheetIndex": Store.currentSheetIndex, 
             });
         }
-
+        currentWheelZoom = null;
         Store.zoomRatio = ratio;
 
         let currentSheet = sheetmanage.getSheetByIndex();
@@ -77,9 +77,17 @@ export function zoomRefreshView(){
     // $scrollTop.scrollTop(st+hc-hp);
 }
 
-
+let currentWheelZoom = null;
 export function zoomInitial(){
 
+    // 缩放步长
+    const ZOOM_WHEEL_STEP = 0.02; // ctrl + 鼠标滚轮
+    const ZOOM_STEP = 0.1; // 点击以及 Ctrl + +-
+
+    // 缩放最大最小比例
+    const MAX_ZOOM_RATIO = 4;
+    const MIN_ZOOM_RATIO = .1;
+
     $("#luckysheet-zoom-minus").click(function(){
         let currentRatio;
         if(Store.zoomRatio==null){
@@ -89,14 +97,14 @@ export function zoomInitial(){
             currentRatio = Math.ceil(Store.zoomRatio*10)/10;
         }
 
-        currentRatio = currentRatio-0.1;
+        currentRatio = currentRatio-ZOOM_STEP;
 
         if(currentRatio==Store.zoomRatio){
-            currentRatio = currentRatio-0.1;
+            currentRatio = currentRatio-ZOOM_STEP;
         }
 
-        if(currentRatio<=0.1){
-            currentRatio = 0.1;
+        if(currentRatio<=MIN_ZOOM_RATIO){
+            currentRatio = MIN_ZOOM_RATIO;
         }
 
         // Store.zoomRatio = currentRatio;
@@ -113,14 +121,14 @@ export function zoomInitial(){
             currentRatio = Math.floor(Store.zoomRatio*10)/10;
         }
 
-        currentRatio = currentRatio+0.1;
+        currentRatio = currentRatio+ZOOM_STEP;
 
         if(currentRatio==Store.zoomRatio){
-            currentRatio = currentRatio+0.1;
+            currentRatio = currentRatio+ZOOM_STEP;
         }
 
-        if(currentRatio>=4){
-            currentRatio = 4;
+        if(currentRatio>=MAX_ZOOM_RATIO){
+            currentRatio = MAX_ZOOM_RATIO;
         }
 
         // Store.zoomRatio = currentRatio;
@@ -149,13 +157,13 @@ export function zoomInitial(){
             let pos = cursorLeft + offsetX; 
             let currentRatio = positionToRatio(pos);
 
-            if(currentRatio>4){
-                currentRatio =4;
+            if(currentRatio>MAX_ZOOM_RATIO){
+                currentRatio = MAX_ZOOM_RATIO;
                 pos = 100;
             }
 
-            if(currentRatio<0.1){
-                currentRatio =0.1;
+            if(currentRatio<MIN_ZOOM_RATIO){
+                currentRatio = MIN_ZOOM_RATIO;
                 pos = 0;
             }
 
@@ -183,6 +191,65 @@ export function zoomInitial(){
     });
 
     zoomNumberDomBind(Store.zoomRatio);
+
+    currentWheelZoom = null;
+    // 拦截系统缩放快捷键 Ctrl + wheel
+    document.addEventListener(
+        'wheel',
+        function (ev) {
+            if (!ev.ctrlKey || !ev.deltaY) {
+                return;
+            }
+            if (currentWheelZoom === null) {
+                currentWheelZoom = Store.zoomRatio || 1;
+            }
+            currentWheelZoom += ev.deltaY < 0 ? ZOOM_WHEEL_STEP : -ZOOM_WHEEL_STEP;
+            if (currentWheelZoom >= MAX_ZOOM_RATIO) {
+                currentWheelZoom = MAX_ZOOM_RATIO;
+            } else if (currentWheelZoom < MIN_ZOOM_RATIO) {
+                currentWheelZoom = MIN_ZOOM_RATIO;
+            }
+            zoomChange(currentWheelZoom);
+            zoomNumberDomBind(currentWheelZoom);
+            ev.preventDefault();
+            ev.stopPropagation();
+        },
+        { capture: true, passive: false }
+    );
+
+    // 拦截系统缩放快捷键 Ctrl + +/- 0
+    document.addEventListener(
+        'keydown',
+        function (ev) {
+            if (!ev.ctrlKey) {
+                return;
+            }
+            let handled = false;
+            let zoom = Store.zoomRatio || 1;
+            if (ev.key === '-' || ev.which === 189) {
+                zoom -= ZOOM_STEP;
+                handled = true;
+            } else if (ev.key === '+' || ev.which === 187) {
+                zoom += ZOOM_STEP;
+                handled = true;
+            } else if (ev.key === '0' || ev.which === 48) {
+                zoom = 1;
+                handled = true;
+            }
+
+            if (handled) {
+                ev.preventDefault();
+                if (zoom >= MAX_ZOOM_RATIO) {
+                    zoom = MAX_ZOOM_RATIO;
+                } else if (zoom < MIN_ZOOM_RATIO) {
+                    zoom = MIN_ZOOM_RATIO;
+                }
+                zoomChange(zoom);
+                zoomNumberDomBind(zoom);
+            }
+        },
+        { capture: true }
+    );
 }