From 89f4917bdfbecb8ffcfd58fb6998cedbbfb52a01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Wed, 8 Mar 2023 17:32:30 +0800
Subject: [PATCH] =?UTF-8?q?enhance(scroll):=E5=B0=9D=E8=AF=95=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E5=92=8C=E4=BF=AE=E5=A4=8D=E6=BB=9A=E5=8A=A8=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ContinuationView.tsx | 12 +++++++++++-
 src/components/FileTools.tsx        |  9 +++++++--
 src/states/files.ts                 |  1 +
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/ContinuationView.tsx b/src/components/ContinuationView.tsx
index ca43196..1ead6e2 100644
--- a/src/components/ContinuationView.tsx
+++ b/src/components/ContinuationView.tsx
@@ -3,12 +3,14 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import EventEmitter from 'events';
 import { filter, indexOf, isEmpty, length, map, pluck } from 'ramda';
 import { FC, useContext, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import { useUpdate } from 'react-use';
 import { EventBusContext } from '../EventBus';
 import { useFileListStore } from '../states/files';
 import { useZoomState } from '../states/zoom';
 import { withinRange } from '../utils/offset_func';
 
 export const ContinuationView: FC = () => {
+  const forceRerender = useUpdate();
   const files = useFileListStore.use.files();
   const zoom = useZoomState.use.currentZoom();
   const viewHeight = useZoomState.use.viewHeight();
@@ -19,7 +21,7 @@ export const ContinuationView: FC = () => {
   const virtualizer = useVirtualizer({
     count: fileCount,
     getScrollElement: () => parentRef.current,
-    estimateSize: () => zoom * 10
+    estimateSize: () => 100
   });
   const items = virtualizer.getVirtualItems();
 
@@ -28,12 +30,20 @@ export const ContinuationView: FC = () => {
       let index = indexOf(filename, pluck('filename', files));
       virtualizer.scrollToIndex(index);
     });
+    ebus?.addListener('reset_views', () => {
+      virtualizer.scrollToOffset(0);
+    });
 
     return () => {
       ebus?.removeAllListeners('navigate_offset');
+      ebus?.removeAllListeners('reset_views');
     };
   }, [ebus, files, virtualizer]);
 
+  useEffect(() => {
+    forceRerender();
+  }, [files]);
+
   useLayoutEffect(() => {
     let rangeStart = virtualizer.scrollOffset;
     let rangeEnd = virtualizer.scrollOffset + viewHeight;
diff --git a/src/components/FileTools.tsx b/src/components/FileTools.tsx
index e60a559..4a82fdf 100644
--- a/src/components/FileTools.tsx
+++ b/src/components/FileTools.tsx
@@ -3,11 +3,15 @@ import { notifications } from '@mantine/notifications';
 import { IconFolder } from '@tabler/icons-react';
 import { invoke } from '@tauri-apps/api';
 import { open } from '@tauri-apps/api/dialog';
-import { FC, useCallback } from 'react';
+import EventEmitter from 'events';
+import { length } from 'ramda';
+import { FC, useCallback, useContext } from 'react';
+import { EventBusContext } from '../EventBus';
 import { useFileListStore } from '../states/files';
 
 export const FileToolbar: FC = () => {
   const storeFiles = useFileListStore.use.updateFiles();
+  const ebus = useContext<EventEmitter>(EventBusContext);
   const handleOpenAction = useCallback(async () => {
     try {
       const directory = await open({
@@ -15,9 +19,10 @@ export const FileToolbar: FC = () => {
         directory: true,
         multiple: false
       });
-      storeFiles([]);
       const files = await invoke('scan_directory', { target: directory });
+      console.log('[debug]获取到文件个数：', length(files));
       storeFiles(files);
+      ebus.emit('reset_views');
     } catch (e) {
       console.error('[error]打开文件夹', e);
       notifications.show({ title: '未能成功打开指定文件夹，请重试。', color: 'red' });
diff --git a/src/states/files.ts b/src/states/files.ts
index 715ecf3..0092f22 100644
--- a/src/states/files.ts
+++ b/src/states/files.ts
@@ -27,6 +27,7 @@ export const useFileListStore = createStoreHook<FileListState & FileListActions>
         (item, index) => mergeLeft({ sort: index * 10, path: convertFileSrc(item.path) }, item),
         files
       );
+      df.actives = [];
     });
   },
   updateActiveFiles(filenames) {