From 39e4751a9d4bf116b9a5cae6ca7c2de00cd30cdf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Fri, 10 Mar 2023 16:57:00 +0800
Subject: [PATCH] =?UTF-8?q?enhance(view):=E8=BF=9E=E7=BB=AD=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E4=B8=AD=E7=9A=84key=E6=94=B9=E4=B8=BA=E8=87=AA?=
 =?UTF-8?q?=E5=8A=A8=E7=94=9F=E6=88=90=E7=9A=84=E6=96=87=E4=BB=B6id?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src-tauri/Cargo.lock                | 1 +
 src-tauri/Cargo.toml                | 1 +
 src-tauri/src/commands/files.rs     | 2 ++
 src/components/ContinuationView.tsx | 4 +++-
 src/models.ts                       | 1 +
 5 files changed, 8 insertions(+), 1 deletion(-)

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<Vec<FileItem>, 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 = () => {
         <VariableSizeList
           itemData={files}
           itemCount={fileCount}
-          itemSize={index => 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;