diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock index 95375ac..1601ae8 100644 --- a/src-tauri/Cargo.lock +++ b/src-tauri/Cargo.lock @@ -339,6 +339,7 @@ dependencies = [ "tauri-build", "thiserror", "tokio", + "uuid 1.3.0", "walkdir", ] diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml index 3e6e18d..9497a07 100644 --- a/src-tauri/Cargo.toml +++ b/src-tauri/Cargo.toml @@ -24,6 +24,7 @@ walkdir = "2.3.2" serde_repr = "0.1.10" tokio = { version = "1.23.1", features = ["full"] } image = "0.24.5" +uuid = "1.3.0" [features] # this feature is used for production builds or when `devPath` points to the filesystem diff --git a/src-tauri/src/commands/files.rs b/src-tauri/src/commands/files.rs index 4444fc5..449e729 100644 --- a/src-tauri/src/commands/files.rs +++ b/src-tauri/src/commands/files.rs @@ -4,6 +4,7 @@ use walkdir::WalkDir; #[derive(Debug, Clone, Serialize)] pub struct FileItem { + pub id: String, pub filename: String, pub path: String, pub height: u32, @@ -19,6 +20,7 @@ pub fn scan_directory(target: String) -> Result, String> { .map(|f| { let (width, height) = image::image_dimensions(f.path())?; Ok(FileItem { + id: uuid::Uuid::new_v4().to_string(), filename: f .path() .file_name() diff --git a/src/components/ContinuationView.tsx b/src/components/ContinuationView.tsx index ec5955c..669e143 100644 --- a/src/components/ContinuationView.tsx +++ b/src/components/ContinuationView.tsx @@ -21,6 +21,7 @@ export const ContinuationView: FC = () => { }, [files] ); + const fileHeights = useMemo(() => map(item => item.height * (zoom / 100), files), [files, zoom]); useEffect(() => { ebus?.addListener('navigate_offset', ({ filename }) => { @@ -48,7 +49,8 @@ export const ContinuationView: FC = () => { files[index].height * (zoom / 100)} + itemSize={index => fileHeights[index]} + itemKey={index => files[index].id} height={viewHeight} width="100%" ref={virtualListRef} diff --git a/src/models.ts b/src/models.ts index 36acf13..850443e 100644 --- a/src/models.ts +++ b/src/models.ts @@ -1,5 +1,6 @@ export type FileItem = { sort: number; + id: string; filename: string; path: string; width: number;