enhance(scroll):尝试调整和修复滚动。

This commit is contained in:
徐涛 2023-03-08 17:32:30 +08:00
parent cd077b5d29
commit 89f4917bdf
3 changed files with 19 additions and 3 deletions

View File

@ -3,12 +3,14 @@ import { useVirtualizer } from '@tanstack/react-virtual';
import EventEmitter from 'events'; import EventEmitter from 'events';
import { filter, indexOf, isEmpty, length, map, pluck } from 'ramda'; import { filter, indexOf, isEmpty, length, map, pluck } from 'ramda';
import { FC, useContext, useEffect, useLayoutEffect, useMemo, useRef } from 'react'; import { FC, useContext, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
import { useUpdate } from 'react-use';
import { EventBusContext } from '../EventBus'; import { EventBusContext } from '../EventBus';
import { useFileListStore } from '../states/files'; import { useFileListStore } from '../states/files';
import { useZoomState } from '../states/zoom'; import { useZoomState } from '../states/zoom';
import { withinRange } from '../utils/offset_func'; import { withinRange } from '../utils/offset_func';
export const ContinuationView: FC = () => { export const ContinuationView: FC = () => {
const forceRerender = useUpdate();
const files = useFileListStore.use.files(); const files = useFileListStore.use.files();
const zoom = useZoomState.use.currentZoom(); const zoom = useZoomState.use.currentZoom();
const viewHeight = useZoomState.use.viewHeight(); const viewHeight = useZoomState.use.viewHeight();
@ -19,7 +21,7 @@ export const ContinuationView: FC = () => {
const virtualizer = useVirtualizer({ const virtualizer = useVirtualizer({
count: fileCount, count: fileCount,
getScrollElement: () => parentRef.current, getScrollElement: () => parentRef.current,
estimateSize: () => zoom * 10 estimateSize: () => 100
}); });
const items = virtualizer.getVirtualItems(); const items = virtualizer.getVirtualItems();
@ -28,12 +30,20 @@ export const ContinuationView: FC = () => {
let index = indexOf(filename, pluck('filename', files)); let index = indexOf(filename, pluck('filename', files));
virtualizer.scrollToIndex(index); virtualizer.scrollToIndex(index);
}); });
ebus?.addListener('reset_views', () => {
virtualizer.scrollToOffset(0);
});
return () => { return () => {
ebus?.removeAllListeners('navigate_offset'); ebus?.removeAllListeners('navigate_offset');
ebus?.removeAllListeners('reset_views');
}; };
}, [ebus, files, virtualizer]); }, [ebus, files, virtualizer]);
useEffect(() => {
forceRerender();
}, [files]);
useLayoutEffect(() => { useLayoutEffect(() => {
let rangeStart = virtualizer.scrollOffset; let rangeStart = virtualizer.scrollOffset;
let rangeEnd = virtualizer.scrollOffset + viewHeight; let rangeEnd = virtualizer.scrollOffset + viewHeight;

View File

@ -3,11 +3,15 @@ import { notifications } from '@mantine/notifications';
import { IconFolder } from '@tabler/icons-react'; import { IconFolder } from '@tabler/icons-react';
import { invoke } from '@tauri-apps/api'; import { invoke } from '@tauri-apps/api';
import { open } from '@tauri-apps/api/dialog'; 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'; import { useFileListStore } from '../states/files';
export const FileToolbar: FC = () => { export const FileToolbar: FC = () => {
const storeFiles = useFileListStore.use.updateFiles(); const storeFiles = useFileListStore.use.updateFiles();
const ebus = useContext<EventEmitter>(EventBusContext);
const handleOpenAction = useCallback(async () => { const handleOpenAction = useCallback(async () => {
try { try {
const directory = await open({ const directory = await open({
@ -15,9 +19,10 @@ export const FileToolbar: FC = () => {
directory: true, directory: true,
multiple: false multiple: false
}); });
storeFiles([]);
const files = await invoke('scan_directory', { target: directory }); const files = await invoke('scan_directory', { target: directory });
console.log('[debug]获取到文件个数:', length(files));
storeFiles(files); storeFiles(files);
ebus.emit('reset_views');
} catch (e) { } catch (e) {
console.error('[error]打开文件夹', e); console.error('[error]打开文件夹', e);
notifications.show({ title: '未能成功打开指定文件夹,请重试。', color: 'red' }); notifications.show({ title: '未能成功打开指定文件夹,请重试。', color: 'red' });

View File

@ -27,6 +27,7 @@ export const useFileListStore = createStoreHook<FileListState & FileListActions>
(item, index) => mergeLeft({ sort: index * 10, path: convertFileSrc(item.path) }, item), (item, index) => mergeLeft({ sort: index * 10, path: convertFileSrc(item.path) }, item),
files files
); );
df.actives = [];
}); });
}, },
updateActiveFiles(filenames) { updateActiveFiles(filenames) {