From a80e8eb74fbbc335e033e1edb8a75829c0ccdaf6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Tue, 21 Mar 2023 10:49:02 +0800
Subject: [PATCH] =?UTF-8?q?fix(view):=E4=BF=AE=E5=A4=8D=E5=8D=95=E9=A1=B5?=
 =?UTF-8?q?=E6=B5=8F=E8=A7=88=E6=97=B6=E7=BC=A9=E6=94=BE=E8=AE=A1=E7=AE=97?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E9=94=99=E8=AF=AF=E7=9A=84=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ComicView.tsx  |  6 +++++-
 src/components/SingleView.tsx | 10 +++++-----
 src/states/zoom.ts            | 10 +++++++++-
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/ComicView.tsx b/src/components/ComicView.tsx
index d55d874..66f260a 100644
--- a/src/components/ComicView.tsx
+++ b/src/components/ComicView.tsx
@@ -13,12 +13,16 @@ export const ComicView: FC = () => {
   const files = useFileListStore(sortedFilesSelector());
   const viewMode = useZoomState.use.viewMode();
   const updateViewHeight = useZoomState.use.updateViewHeight();
-  const [containerRef, { height }] = useMeasure();
+  const updateViewWidth = useZoomState.use.updateViewWidth();
+  const [containerRef, { height, width }] = useMeasure();
   const firstFileId = useMemo(() => head(files)?.id ?? '', [files, files.length]);
 
   useLayoutEffect(() => {
     updateViewHeight(height);
   }, [height]);
+  useLayoutEffect(() => {
+    updateViewWidth(width);
+  }, [width]);
 
   return (
     <Box w="100%" h="100%" sx={{ overflow: 'hidden' }} ref={containerRef}>
diff --git a/src/components/SingleView.tsx b/src/components/SingleView.tsx
index 5df794f..8ffc9d8 100644
--- a/src/components/SingleView.tsx
+++ b/src/components/SingleView.tsx
@@ -10,8 +10,8 @@ import { useZoomState } from '../states/zoom';
 export const SingleView: FC = () => {
   const files = useFileListStore.use.files();
   const actives = useFileListStore.use.actives();
-  const zoom = useZoomState.use.currentZoom();
-  const viewHeight = useZoomState.use.viewHeight();
+  const { currentZoom: zoom, viewHeight, viewWidth } = useZoomState();
+  const maxImageWidth = useMemo(() => viewWidth * (zoom / 100), [viewWidth, zoom]);
   const updateActives = useFileListStore.use.updateActiveFiles();
   const ebus = useContext<EventEmitter>(EventBusContext);
   const [pageConRef, { width: pageConWidth }] = useMeasure();
@@ -21,9 +21,9 @@ export const SingleView: FC = () => {
   }, [files, actives]);
   const largerThanView = useMemo(() => {
     if (isNil(activeFile)) return false;
-    let imageHeightAfterZoom = activeFile?.height * (zoom / 100);
+    let imageHeightAfterZoom = activeFile?.height * (maxImageWidth / activeFile?.width);
     return gt(imageHeightAfterZoom, viewHeight);
-  }, [activeFile, viewHeight, zoom]);
+  }, [activeFile, viewHeight, maxImageWidth]);
   const handlePaginationAction = useCallback(
     (event: BaseSyntheticEvent) => {
       let middle = pageConWidth / 2;
@@ -62,7 +62,7 @@ export const SingleView: FC = () => {
             height: largerThanView ? '100%' : viewHeight
           }}
         >
-          <img src={activeFile.path} style={{ width: `${zoom}%` }} />
+          <img src={activeFile.path} style={{ width: maxImageWidth }} />
         </div>
       )}
     </div>
diff --git a/src/states/zoom.ts b/src/states/zoom.ts
index ab4d97f..39f0afc 100644
--- a/src/states/zoom.ts
+++ b/src/states/zoom.ts
@@ -6,11 +6,13 @@ interface ZoomState {
   currentZoom: number;
   viewMode: 'single' | 'continuation';
   viewHeight: number;
+  viewWidth: number;
 }
 
 type ZoomActions = {
   zoom: SyncObjectCallback<number>;
   updateViewHeight: SyncObjectCallback<number>;
+  updateViewWidth: SyncObjectCallback<number>;
   switchViewMode: SyncObjectCallback<'single' | 'continuation'>;
 };
 
@@ -18,7 +20,8 @@ const initialState: ZoomState = {
   autoFit: false,
   currentZoom: 80,
   viewMode: 'continuation',
-  viewHeight: 0
+  viewHeight: 0,
+  viewWidth: 0
 };
 
 export const useZoomState = createStoreHook<ZoomState & ZoomActions>(set => ({
@@ -33,6 +36,11 @@ export const useZoomState = createStoreHook<ZoomState & ZoomActions>(set => ({
       df.viewHeight = height;
     });
   },
+  updateViewWidth(width) {
+    set(df => {
+      df.viewWidth = width;
+    });
+  },
   switchViewMode(mode) {
     set(df => {
       df.viewMode = mode;