feat: Add background color (#253)

yurucam · May 3, 2024 · 03da8bc · 03da8bc
2 parents 41eb24a + 28bfadc
commit 03da8bc
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 8 deletions.
diff --git a/web/package.json b/web/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.4.78",
+  "version": "0.4.79",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/web/src/pages/lab/collage/components/added-photo.list-item.tsx b/web/src/pages/lab/collage/components/added-photo.list-item.tsx
@@ -10,7 +10,7 @@ const AddedPhotoListItem = () => {
       {photos.map((photo, index) => (
         <ListItem
           key={index}
-          media={<img src={photo.thumbnail} alt={photo.file.name} style={{ width: '8rem', height: '6rem', objectFit: 'cover', borderRadius: '0.5rem' }} />}
+          media={<img src={photo.thumbnail} alt={photo.file.name} style={{ width: '8rem', height: '5rem', objectFit: 'cover', borderRadius: '0.5rem' }} />}
           title={photo.file.name}
           text={`${photo.takenAt}`}
           footer={

diff --git a/web/src/pages/lab/collage/components/download-photo.button.tsx b/web/src/pages/lab/collage/components/download-photo.button.tsx
@@ -14,7 +14,7 @@ import Photo from '../../../../core/photo';
 const DownloadPhotoButton = () => {
   const { t } = useTranslation();
   const { exportToJpeg, quality } = Root.useStore();
-  const { ratio, numberOfRow, numberOfColumn, photos, setLoading, paddingTop, paddingBottom, paddingLeft, paddingRight, marginEach } = useStore();
+  const { backgroundColor, ratio, numberOfRow, numberOfColumn, photos, setLoading, paddingTop, paddingBottom, paddingLeft, paddingRight, marginEach } = useStore();
 
   return (
     <ListButton
@@ -30,14 +30,14 @@ const DownloadPhotoButton = () => {
 
         if (Capacitor.isNativePlatform()) {
           for (const group of groups) {
-            const canvas = SIMPLE_FUNC(group, { ratio, numberOfRow, numberOfColumn, paddingTop, paddingBottom, paddingLeft, paddingRight, marginEach });
+            const canvas = SIMPLE_FUNC(group, { backgroundColor, ratio, numberOfRow, numberOfColumn, paddingTop, paddingBottom, paddingLeft, paddingRight, marginEach });
             const filename = exportToJpeg ? 'collage.jpg' : 'collage.webp';
             const data = await convert(canvas, { type: exportToJpeg ? 'image/jpeg' : 'image/webp', quality });
             free(canvas);
             await download(filename, data);
           }
         } else if (groups.length === 1) {
-          const canvas = SIMPLE_FUNC(groups[0], { ratio, numberOfRow, numberOfColumn, paddingTop, paddingBottom, paddingLeft, paddingRight, marginEach });
+          const canvas = SIMPLE_FUNC(groups[0], { backgroundColor, ratio, numberOfRow, numberOfColumn, paddingTop, paddingBottom, paddingLeft, paddingRight, marginEach });
           const filename = exportToJpeg ? 'collage.jpg' : 'collage.webp';
           const data = await convert(canvas, { type: exportToJpeg ? 'image/jpeg' : 'image/webp', quality });
           free(canvas);
@@ -46,7 +46,7 @@ const DownloadPhotoButton = () => {
           const files: { filename: string; data: string }[] = [];
           await Promise.all(
             groups.map(async (group, index) => {
-              const canvas = SIMPLE_FUNC(group, { ratio, numberOfRow, numberOfColumn, paddingTop, paddingBottom, paddingLeft, paddingRight, marginEach });
+              const canvas = SIMPLE_FUNC(group, { backgroundColor, ratio, numberOfRow, numberOfColumn, paddingTop, paddingBottom, paddingLeft, paddingRight, marginEach });
               const filename = exportToJpeg ? `collage-${index}.jpg` : `collage-${index}.webp`;
               const data = await convert(canvas, { type: exportToJpeg ? 'image/jpeg' : 'image/webp', quality });
               free(canvas);

diff --git a/web/src/pages/lab/collage/main.tsx b/web/src/pages/lab/collage/main.tsx
@@ -5,10 +5,13 @@ import AddedPhotoListItem from './components/added-photo.list-item';
 import DownloadPhotoButton from './components/download-photo.button';
 import Loading from './components/loading';
 import { useStore } from './store';
+import * as Root from '../../../store';
 
 const Collage = () => {
   const { t } = useTranslation();
+  const { darkMode } = Root.useStore();
   const {
+    backgroundColor,
     ratio,
     numberOfRow,
     numberOfColumn,
@@ -17,6 +20,7 @@ const Collage = () => {
     paddingLeft,
     paddingRight,
     marginEach,
+    setBackgroundColor,
     setRatio,
     setNumberOfRow,
     setNumberOfColumn,
@@ -43,6 +47,12 @@ const Collage = () => {
       </Block>
 
       <List strong inset>
+        <ListInput
+          title="BACKGROUND_COLOR"
+          media={<div className="w-5 h-5" style={{ backgroundColor: backgroundColor as string, outline: `1px solid ${darkMode ? '#fff' : '#000'}` }} />}
+          value={backgroundColor}
+          onChange={(e) => setBackgroundColor(e.target.value)}
+        />
         <ListInput title="RATIO" info="width:height" value={ratio} onChange={(e) => setRatio(e.target.value)} />
         <ListInput title="NUMBER_OF_ROW" info="count" value={numberOfRow} onChange={(e) => setNumberOfRow(Number(e.target.value))} />
         <ListInput title="NUMBER_OF_COLUMN" info="count" value={numberOfColumn} onChange={(e) => setNumberOfColumn(Number(e.target.value))} />

diff --git a/web/src/pages/lab/collage/store.tsx b/web/src/pages/lab/collage/store.tsx
@@ -8,6 +8,9 @@ type Store = {
   loading: boolean;
   setLoading: (loading: boolean) => void;
 
+  backgroundColor: string;
+  setBackgroundColor: (backgroundColor: string) => void;
+
   ratio: string;
   setRatio: (ratio: string) => void;
 
@@ -40,6 +43,12 @@ export const useStore = create<Store>((set) => ({
   loading: false,
   setLoading: (loading) => set({ loading }),
 
+  backgroundColor: localStorage.getItem('lab:backgroundColor') || '#ffffff',
+  setBackgroundColor: (backgroundColor) => {
+    localStorage.setItem('lab:backgroundColor', backgroundColor);
+    set({ backgroundColor });
+  },
+
   ratio: localStorage.getItem('lab:ratio') || '4:5',
   setRatio: (ratio) => {
     localStorage.setItem('lab:ratio', ratio);

diff --git a/web/src/pages/lab/collage/theme/SIMPLE.ts b/web/src/pages/lab/collage/theme/SIMPLE.ts
@@ -3,6 +3,7 @@ import Photo from '../../../../core/photo';
 const SIMPLE_FUNC = (
   photos: Photo[],
   options: {
+    backgroundColor: string;
     ratio: string;
     numberOfRow: number;
     numberOfColumn: number;
@@ -13,7 +14,7 @@ const SIMPLE_FUNC = (
     marginEach: number;
   }
 ): HTMLCanvasElement => {
-  const { ratio, numberOfRow, numberOfColumn, paddingTop, paddingBottom, paddingLeft, paddingRight, marginEach } = options;
+  const { backgroundColor, ratio, numberOfRow, numberOfColumn, paddingTop, paddingBottom, paddingLeft, paddingRight, marginEach } = options;
 
   const canvas = document.createElement('canvas');
 
@@ -30,7 +31,7 @@ const SIMPLE_FUNC = (
   }
 
   const context = canvas.getContext('2d')!;
-  context.fillStyle = '#ffffff';
+  context.fillStyle = backgroundColor;
   context.fillRect(0, 0, canvas.width, canvas.height);
 
   const width = (canvas.width - paddingLeft - paddingRight - marginEach * (numberOfColumn - 1)) / numberOfColumn;