Add: 背景画像の設定変更機能

shm11C3 · Nov 2, 2024 · 150b1ab · 150b1ab
1 parent a4fc10f
commit 150b1ab
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 28 deletions.
diff --git a/src-tauri/src/commands/background_image.rs b/src-tauri/src/commands/background_image.rs
@@ -29,6 +29,10 @@ pub fn get_background_image(file_id: String) -> Result<String, String> {
   }
 }
 
+///
+/// - `file_id` : 画像ファイルID
+/// - `image_data` : 画像データのBase64文字列
+///
 #[derive(Debug, Serialize, Deserialize, Clone)]
 #[serde(rename_all = "camelCase")]
 pub struct BackgroundImage {

diff --git a/src-tauri/src/commands/config.rs b/src-tauri/src/commands/config.rs
@@ -308,8 +308,11 @@ impl Settings {
     self.write_file()
   }
 
-  pub fn set_selected_background_img(&mut self, new_value: String) -> Result<(), String> {
-    self.selected_background_img = Some(new_value);
+  pub fn set_selected_background_img(
+    &mut self,
+    new_value: Option<String>,
+  ) -> Result<(), String> {
+    self.selected_background_img = new_value;
     self.write_file()
   }
 
@@ -588,7 +591,7 @@ pub mod commands {
   pub async fn set_selected_background_img(
     window: Window,
     state: tauri::State<'_, AppState>,
-    file_id: String,
+    file_id: Option<String>,
   ) -> Result<(), String> {
     let mut settings = state.settings.lock().unwrap();
 

diff --git a/src/components/forms/SelectBackgroundImage/SelectBackgroundImage.tsx b/src/components/forms/SelectBackgroundImage/SelectBackgroundImage.tsx
@@ -0,0 +1,65 @@
+import { useSettingsAtom } from "@/atom/useSettingsAtom";
+import { Button } from "@/components/ui/button";
+import { useBackgroundImageList } from "@/hooks/useBgImage";
+import { twMerge } from "tailwind-merge";
+import { tv } from "tailwind-variants";
+
+export const BackgroundImageList = () => {
+  const { settings, updateSettingAtom } = useSettingsAtom();
+  const { backgroundImageList } = useBackgroundImageList();
+
+  const selectImageVariants = tv({
+    base: "relative w-20 h-20 mx-2 rounded-2xl",
+    variants: {
+      selected: {
+        true: "border-2 border-white",
+        false: "border border-gray-500",
+      },
+    },
+  });
+
+  return (
+    <div className="flex py-3">
+      {backgroundImageList.length > 0 && (
+        <Button
+          className={twMerge(
+            selectImageVariants({
+              selected: !settings.selectedBackgroundImg,
+            }),
+            "flex items-center justify-center bg-zinc-300 dark:bg-gray-800 hover:bg-zinc-200 dark:hover:bg-gray-900",
+          )}
+          onClick={() => {
+            updateSettingAtom("selectedBackgroundImg", null);
+          }}
+        >
+          {}
+        </Button>
+      )}
+
+      {backgroundImageList
+        .slice()
+        .reverse()
+        .map((image) => (
+          <button
+            key={image.fileId}
+            type="button"
+            className={twMerge(
+              selectImageVariants({
+                selected: settings.selectedBackgroundImg === image.fileId,
+              }),
+              "overflow-hidden",
+            )}
+            onClick={() =>
+              updateSettingAtom("selectedBackgroundImg", image.fileId)
+            }
+          >
+            <img
+              src={image.imageData}
+              alt={`background image: ${image.fileId}`}
+              className="object-cover w-full h-full"
+            />
+          </button>
+        ))}
+    </div>
+  );
+};
diff --git a/src/components/forms/SelectBackgroundImage/useSelectBackgroundImage.ts b/src/components/forms/SelectBackgroundImage/useSelectBackgroundImage.ts
diff --git a/src/hooks/useBgImage.ts b/src/hooks/useBgImage.ts
@@ -14,6 +14,7 @@ const uploadedBackgroundImagesAtom = atom<Array<BackgroundImage>>([]);
 
 export const useBackgroundImage = () => {
   const [backgroundImage, setBackgroundImage] = useAtom(backgroundImageAtom);
+  const { initBackgroundImages } = useBackgroundImageList();
 
   const { settings, updateSettingAtom } = useSettingsAtom();
 
@@ -29,6 +30,8 @@ export const useBackgroundImage = () => {
 
     if (settings.selectedBackgroundImg) {
       fetchBackgroundImage(settings.selectedBackgroundImg);
+    } else {
+      setBackgroundImage(null);
     }
   }, [setBackgroundImage, settings.selectedBackgroundImg]);
 
@@ -42,6 +45,7 @@ export const useBackgroundImage = () => {
 
     const fileId = await saveBgImage(base64Image);
     updateSettingAtom("selectedBackgroundImg", fileId);
+    initBackgroundImages();
   };
 
   return { backgroundImage, saveBackgroundImage };
@@ -52,26 +56,25 @@ export const useBackgroundImageList = () => {
     uploadedBackgroundImagesAtom,
   );
 
-  useEffect(() => {
-    const initBackgroundImages = async () => {
-      try {
-        const uploadedBackgroundImages = await fetchBackgroundImages();
+  const initBackgroundImages = async () => {
+    try {
+      const uploadedBackgroundImages = await fetchBackgroundImages();
 
-        const backgroundImagesWithUrl = uploadedBackgroundImages.map(
-          (image) => ({
-            fileId: image.fileId,
-            imageData: `data:image/png;base64,${image.imageData}`,
-          }),
-        );
+      const backgroundImagesWithUrl = uploadedBackgroundImages.map((image) => ({
+        fileId: image.fileId,
+        imageData: `data:image/png;base64,${image.imageData}`,
+      }));
 
-        setBackgroundImageList(backgroundImagesWithUrl);
-      } catch (error) {
-        console.error("Failed to load background images:", error);
-      }
-    };
+      setBackgroundImageList(backgroundImagesWithUrl);
+    } catch (error) {
+      console.error("Failed to load background images:", error);
+    }
+  };
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
     initBackgroundImages();
-  }, [setBackgroundImageList]);
+  }, []);
 
-  return { backgroundImageList };
+  return { backgroundImageList, initBackgroundImages };
 };
diff --git a/src/template/Settings.tsx b/src/template/Settings.tsx
@@ -1,5 +1,6 @@
 import { useSettingsAtom } from "@/atom/useSettingsAtom";
 import { PreviewChart } from "@/components/charts/Preview";
+import { BackgroundImageList } from "@/components/forms/SelectBackgroundImage/SelectBackgroundImage";
 import { UploadImage } from "@/components/forms/UploadImage/UploadImage";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
@@ -282,14 +283,13 @@ const Settings = () => {
       </div>
       <div className="py-6">
         <h3 className="text-2xl font-bold py-3">Background Image</h3>
-        <div className="xl:grid xl:grid-cols-6 gap-12 p-4">
-          <div className="col-span-2">
-            <div className="py-3">
-              <UploadImage />
-            </div>
-            <div className="py-3">
-              <SettingBackGroundOpacity />
-            </div>
+        <div className="p-4">
+          <div className="py-3">
+            <UploadImage />
+            <BackgroundImageList />
+          </div>
+          <div className="py-3 max-w-96">
+            <SettingBackGroundOpacity />
           </div>
         </div>
       </div>