fix(view):更换虚拟列表支持库，以解决缩放存在的问题。

package.json

@@ -29,7 +29,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-use": "^17.4.0",
-    "react-window": "^1.8.8",
+    "react-virtuoso": "^4.1.0",
     "use-immer": "^0.8.1",
     "zustand": "^4.2.0"
   },

pnpm-lock.yaml

@@ -28,7 +28,7 @@ specifiers:
   react: ^18.2.0
   react-dom: ^18.2.0
   react-use: ^17.4.0
-  react-window: ^1.8.8
+  react-virtuoso: ^4.1.0
   typescript: ^4.6.4
   use-immer: ^0.8.1
   vite: ^4.0.0
@@ -53,7 +53,7 @@ dependencies:
   react: 18.2.0
   react-dom: 18.2.0_react@18.2.0
   react-use: 17.4.0_biqbaboplfbrettd7655fr4n2y
-  react-window: 1.8.8_biqbaboplfbrettd7655fr4n2y
+  react-virtuoso: 4.1.0_biqbaboplfbrettd7655fr4n2y
   use-immer: 0.8.1_immer@9.0.19+react@18.2.0
   zustand: 4.3.6_immer@9.0.19+react@18.2.0
 
@@ -1526,10 +1526,6 @@ packages:
     resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
     dev: false
 
-  /memoize-one/5.2.1:
-    resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
-    dev: false
-
   /ms/2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
     dev: true
@@ -1750,15 +1746,13 @@ packages:
       tslib: 2.5.0
     dev: false
 
-  /react-window/1.8.8_biqbaboplfbrettd7655fr4n2y:
+  /react-virtuoso/4.1.0_biqbaboplfbrettd7655fr4n2y:
-    resolution: {integrity: sha512-D4IiBeRtGXziZ1n0XklnFGu7h9gU684zepqyKzgPNzrsrk7xOCxni+TCckjg2Nr/DiaEEGVVmnhYSlT2rB47dQ==}
+    resolution: {integrity: sha512-Vcq5WXn18PvPT55kdeGQ8BN3K95XyPe7hum8zG6Tx7g1CtUYVsQKN7fouMxBSy+XymEDB5ynGy8JWhuqyLLtPw==}
-    engines: {node: '>8.0.0'}
+    engines: {node: '>=10'}
     peerDependencies:
-      react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+      react: '>=16 || >=17 || >= 18'
-      react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+      react-dom: '>=16 || >=17 || >= 18'
     dependencies:
-      '@babel/runtime': 7.21.0
-      memoize-one: 5.2.1
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
     dev: false

src/components/ContinuationView.tsx

@@ -1,35 +1,34 @@
 //@ts-nocheck
 import EventEmitter from 'events';
-import { indexOf, isEmpty, length, map, mergeLeft, pluck, range } from 'ramda';
+import { indexOf, isEmpty, length, map, pluck, range } from 'ramda';
 import { FC, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
-import { VariableSizeList } from 'react-window';
+import { ListRange, Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 import { EventBusContext } from '../EventBus';
 import { sortedFilesSelector, useFileListStore } from '../states/files';
 import { useZoomState } from '../states/zoom';
 
 export const ContinuationView: FC = () => {
   const files = useFileListStore(sortedFilesSelector());
-  const zoom = useZoomState.use.currentZoom();
+  const { currentZoom: zoom, viewWidth, viewHeight } = useZoomState();
-  const viewHeight = useZoomState.use.viewHeight();
   const updateActives = useFileListStore.use.updateActiveFiles();
   const fileCount = useMemo(() => length(files), [files]);
   const ebus = useContext<EventEmitter>(EventBusContext);
-  const virtualListRef = useRef<VariableSizeList | null>();
+  const virtualListRef = useRef<VirtuosoHandle | null>(null);
   const handleOnRenderAction = useCallback(
-    ({ visibleStartIndex, visibleStopIndex }) => {
+    ({ startIndex, endIndex }: ListRange) => {
-      updateActives(map(i => files[i].filename, range(visibleStartIndex, visibleStopIndex + 1)));
+      updateActives(map(i => files[i].filename, range(startIndex, endIndex + 1)));
     },
     [files]
   );
-  const fileHeights = useMemo(() => map(item => item.height * (zoom / 100), files), [files, zoom]);
+  const maxImageWidth = useMemo(() => viewWidth * (zoom / 100), [viewWidth, zoom]);
 
   useEffect(() => {
     ebus?.addListener('navigate_offset', ({ filename }) => {
       let index = indexOf(filename, pluck('filename', files));
-      virtualListRef.current?.scrollToItem(index);
+      virtualListRef.current?.scrollToIndex({ index, align: 'start', behavior: 'smooth' });
     });
     ebus?.addListener('reset_views', () => {
-      virtualListRef.current?.scrollTo(0);
+      virtualListRef.current?.scrollTo({ top: 0 });
     });
     return () => {
       ebus?.removeAllListeners('navigate_offset');
@@ -46,29 +45,27 @@ export const ContinuationView: FC = () => {
       }}
     >
       {!isEmpty(files) && (
-        <VariableSizeList
+        <Virtuoso
-          itemData={files}
+          style={{ height: viewHeight }}
-          itemCount={fileCount}
-          itemSize={index => fileHeights[index]}
-          itemKey={index => files[index].id}
-          height={viewHeight}
-          width="100%"
           ref={virtualListRef}
-          onItemsRendered={handleOnRenderAction}
+          totalCount={fileCount}
-        >
+          computeItemKey={index => files[index].id}
-          {({ index, style, data }) => (
+          rangeChanged={handleOnRenderAction}
+          itemContent={index => (
             <div
-              style={mergeLeft(style, {
+              style={{
                 display: 'flex',
                 flexDirection: 'row',
                 justifyContent: 'center',
-                alignItems: 'flex-start'
+                alignItems: 'flex-start',
-              })}
+                width: '100%',
+                height: files[index].height * (maxImageWidth / files[index].width)
+              }}
             >
-              <img src={data[index].path} style={{ width: data[index].width * (zoom / 100) }} />
+              <img src={files[index].path} style={{ width: maxImageWidth }} />
             </div>
           )}
-        </VariableSizeList>
+        />
       )}
     </div>
   );

src/components/FileList.tsx

@@ -1,10 +1,10 @@
 //@ts-nocheck
 import { Box, Center, Text, Tooltip } from '@mantine/core';
 import EventEmitter from 'events';
-import { head, includes, indexOf, isEmpty, length, mergeLeft, not, pluck } from 'ramda';
+import { head, includes, indexOf, isEmpty, length, not, pluck } from 'ramda';
 import { FC, useCallback, useContext, useLayoutEffect, useMemo, useRef } from 'react';
 import { useMeasure } from 'react-use';
-import { FixedSizeList } from 'react-window';
+import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 import { EventBusContext } from '../EventBus';
 import { sortedFilesSelector, useFileListStore } from '../states/files';
 
@@ -14,7 +14,7 @@ export const FileList: FC = () => {
   const ebus = useContext<EventEmitter>(EventBusContext);
   const filesCount = useMemo(() => length(files), [files]);
   const [parentRef, { height: parentHeight }] = useMeasure();
-  const listRef = useRef<FixedSizeList | null>();
+  const listRef = useRef<VirtuosoHandle | null>(null);
   const handleFileSelectAction = useCallback(
     (filename: string) => {
       ebus.emit('navigate_offset', { filename });
@@ -25,7 +25,11 @@ export const FileList: FC = () => {
   useLayoutEffect(() => {
     let firstActived = head(activeFiles);
     let firstActivedIndex = indexOf(firstActived, pluck('filename', files));
-    listRef.current?.scrollToItem(firstActivedIndex, 'smart');
+    listRef.current?.scrollToIndex({
+      index: firstActivedIndex,
+      align: 'center',
+      behavior: 'auto'
+    });
   }, [activeFiles]);
 
   return (
@@ -37,29 +41,30 @@ export const FileList: FC = () => {
       ref={parentRef}
     >
       {!isEmpty(files) && (
-        <FixedSizeList itemCount={filesCount} itemSize={35} height={parentHeight} ref={listRef}>
+        <Virtuoso
-          {({ index, style }) => (
+          style={{ height: parentHeight }}
+          totalCount={filesCount}
+          ref={listRef}
+          itemContent={index => (
             <Box
               bg={includes(files[index].filename, activeFiles) && 'grape'}
               key={index}
               px={4}
               py={2}
               onClick={() => handleFileSelectAction(files[index].filename)}
-              sx={theme =>
+              sx={theme => ({
-                mergeLeft(style, {
+                cursor: 'pointer',
-                  cursor: 'pointer',
+                '&:hover': {
-                  '&:hover': {
+                  color: not(includes(files[index].filename, activeFiles)) && theme.colors.red
-                    color: not(includes(files[index].filename, activeFiles)) && theme.colors.red
+                }
-                  }
+              })}
-                })
-              }
             >
-              <Tooltip label={files[index].filename}>
+              <Tooltip label={files[index].filename} zIndex={999}>
                 <Text truncate>{files[index].filename}</Text>
               </Tooltip>
             </Box>
           )}
-        </FixedSizeList>
+        />
       )}
       {isEmpty(files) && (
         <Center h="100%">