From 78c5be1bb19b2e605cdb40d82c5771125f023c42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Thu, 9 Mar 2023 14:22:47 +0800
Subject: [PATCH] =?UTF-8?q?feat(view):=E5=9F=BA=E6=9C=AC=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E5=8D=95=E9=A1=B5=E6=B5=8F=E8=A7=88=E7=9A=84=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SingleView.tsx | 68 +++++++++++++++++++++++++++++++++--
 1 file changed, 66 insertions(+), 2 deletions(-)

diff --git a/src/components/SingleView.tsx b/src/components/SingleView.tsx
index c38daa1..f38cc81 100644
--- a/src/components/SingleView.tsx
+++ b/src/components/SingleView.tsx
@@ -1,5 +1,69 @@
-import { FC } from 'react';
+import EventEmitter from 'events';
+import { find, gt, head, indexOf, isNil, lt, max, pluck, propEq } from 'ramda';
+import { BaseSyntheticEvent, FC, useCallback, useContext, useMemo } from 'react';
+import { useLifecycles, useMeasure } from 'react-use';
+import { EventBusContext } from '../EventBus';
+import { useFileListStore } from '../states/files';
+import { useZoomState } from '../states/zoom';
 
 export const SingleView: FC = () => {
-  return <div></div>;
+  const files = useFileListStore.use.files();
+  const actives = useFileListStore.use.actives();
+  const zoom = useZoomState.use.currentZoom();
+  const viewHeight = useZoomState.use.viewHeight();
+  const updateActives = useFileListStore.use.updateActiveFiles();
+  const ebus = useContext<EventEmitter>(EventBusContext);
+  const [pageConRef, { width: pageConWidth }] = useMeasure();
+  const activeFile = useMemo(() => {
+    let firstFile = head(actives);
+    return find(propEq('filename', firstFile), files);
+  }, [files, actives]);
+  const largerThanView = useMemo(() => {
+    if (isNil(activeFile)) return false;
+    let imageHeightAfterZoom = activeFile?.height * (zoom / 100);
+    return gt(imageHeightAfterZoom, viewHeight);
+  }, [activeFile, viewHeight, zoom]);
+  const handlePaginationAction = useCallback(
+    (event: BaseSyntheticEvent) => {
+      let middle = pageConWidth / 2;
+      let pagingDirection = lt(event.nativeEvent.offsetX, middle) ? -1 : 1;
+      let targetIndex = indexOf(activeFile?.filename, pluck('filename', files)) + pagingDirection;
+      updateActives([files[max(0, targetIndex)].filename]);
+    },
+    [files, activeFile, pageConWidth]
+  );
+
+  useLifecycles(
+    () => {
+      ebus?.addListener('navigate_offset', ({ filename }) => {
+        updateActives([filename]);
+      });
+    },
+    () => {
+      ebus?.removeAllListeners('navigate_offset');
+    }
+  );
+
+  return (
+    <div
+      style={{ position: 'relative', overflow: 'auto', contain: 'strict', height: '100%' }}
+      onClick={handlePaginationAction}
+      ref={pageConRef}
+    >
+      {!isNil(activeFile) && (
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: largerThanView ? 'flex-start' : 'center',
+            alignItems: 'center',
+            width: '100%',
+            height: largerThanView ? '100%' : viewHeight
+          }}
+        >
+          <img src={activeFile.path} style={{ width: `${zoom}%` }} />
+        </div>
+      )}
+    </div>
+  );
 };