feat(shortcut): add ctrl + mouse wheel to zoom in/out, closes #2011 (#2533)

apps/readest-app/src/app/reader/utils/iframeEventHandlers.ts

@@ -4,7 +4,41 @@ import { eventDispatcher } from '@/utils/event';
 let lastClickTime = 0;
 let longHoldTimeout: ReturnType<typeof setTimeout> | null = null;
 
+let keyboardState = {
+  key: '',
+  code: '',
+  ctrlKey: false,
+  shiftKey: false,
+  altKey: false,
+  metaKey: false,
+};
+
+const getKeyStatus = (event?: MouseEvent | WheelEvent | TouchEvent) => {
+  if (event && 'ctrlKey' in event) {
+    return {
+      key: keyboardState.key,
+      code: keyboardState.code,
+      ctrlKey: event.ctrlKey,
+      shiftKey: event.shiftKey,
+      altKey: event.altKey,
+      metaKey: event.metaKey,
+    };
+  }
+  return {
+    ...keyboardState,
+  };
+};
+
 export const handleKeydown = (bookKey: string, event: KeyboardEvent) => {
+  keyboardState = {
+    key: event.key,
+    code: event.code,
+    ctrlKey: event.ctrlKey,
+    shiftKey: event.shiftKey,
+    altKey: event.altKey,
+    metaKey: event.metaKey,
+  };
+
   if (['Backspace'].includes(event.key)) {
     event.preventDefault();
   }
@@ -23,6 +57,31 @@ export const handleKeydown = (bookKey: string, event: KeyboardEvent) => {
   );
 };
 
+export const handleKeyup = (bookKey: string, event: KeyboardEvent) => {
+  keyboardState = {
+    key: '',
+    code: '',
+    ctrlKey: event.ctrlKey,
+    shiftKey: event.shiftKey,
+    altKey: event.altKey,
+    metaKey: event.metaKey,
+  };
+
+  window.postMessage(
+    {
+      type: 'iframe-keyup',
+      bookKey,
+      key: event.key,
+      code: event.code,
+      ctrlKey: event.ctrlKey,
+      shiftKey: event.shiftKey,
+      altKey: event.altKey,
+      metaKey: event.metaKey,
+    },
+    '*',
+  );
+};
+
 export const handleMousedown = (bookKey: string, event: MouseEvent) => {
   longHoldTimeout = setTimeout(() => {
     longHoldTimeout = null;
@@ -39,6 +98,7 @@ export const handleMousedown = (bookKey: string, event: MouseEvent) => {
       clientY: event.clientY,
       offsetX: event.offsetX,
       offsetY: event.offsetY,
+      ...getKeyStatus(event),
     },
     '*',
   );
@@ -60,6 +120,7 @@ export const handleMouseup = (bookKey: string, event: MouseEvent) => {
       clientY: event.clientY,
       offsetX: event.offsetX,
       offsetY: event.offsetY,
+      ...getKeyStatus(event),
     },
     '*',
   );
@@ -80,6 +141,7 @@ export const handleWheel = (bookKey: string, event: WheelEvent) => {
       clientY: event.clientY,
       offsetX: event.offsetX,
       offsetY: event.offsetY,
+      ...getKeyStatus(event),
     },
     '*',
   );
@@ -104,6 +166,7 @@ export const handleClick = (
         clientY: event.clientY,
         offsetX: event.offsetX,
         offsetY: event.offsetY,
+        ...getKeyStatus(event),
       },
       '*',
     );
@@ -151,6 +214,7 @@ export const handleClick = (
         clientY: event.clientY,
         offsetX: event.offsetX,
         offsetY: event.offsetY,
+        ...getKeyStatus(event),
       },
       '*',
     );
@@ -183,6 +247,7 @@ const handleTouchEv = (bookKey: string, event: TouchEvent, type: string) => {
       bookKey,
       timeStamp: Date.now(),
       targetTouches: touches,
+      ...getKeyStatus(event),
     },
     '*',
   );