From 173e49a10f1a54113c5dfe73453154f1a56abb8a Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Tue, 25 Jun 2024 01:10:41 +0100
Subject: [PATCH] chore: ResultFooter

---
 .idea/workspace.xml                           | 28 ++++++------
 src/components/result/ResultFooter.tsx        | 34 +++++++++++++++
 src/components/result/ToolFileResult.tsx      | 43 ++++++++++++++++++-
 src/components/result/ToolTextResult.tsx      | 10 +----
 .../image/png/change-colors-in-png/index.tsx  | 14 ++++--
 5 files changed, 104 insertions(+), 25 deletions(-)
 create mode 100644 src/components/result/ResultFooter.tsx

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 2f9c07e..af41340 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,17 +4,12 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: change colors in png init">
-      <change afterPath="$PROJECT_DIR$/src/components/options/ColorSelector.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/config/uiConfig.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/.eslintrc" beforeDir="false" afterPath="$PROJECT_DIR$/.eslintrc" afterDir="false" />
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: change colors in png">
+      <change afterPath="$PROJECT_DIR$/src/components/result/ResultFooter.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/input/ToolFileInput.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/input/ToolFileInput.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/result/ToolFileResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/result/ToolFileResult.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/result/ToolTextResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/result/ToolTextResult.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -168,7 +163,8 @@
       <workItem from="1719164664347" duration="2033000" />
       <workItem from="1719166718305" duration="1783000" />
       <workItem from="1719168519203" duration="17675000" />
-      <workItem from="1719197816332" duration="27000" />
+      <workItem from="1719197816332" duration="1453000" />
+      <workItem from="1719273044735" duration="1047000" />
     </task>
     <task id="LOCAL-00001" summary="feat: use vite and ts">
       <option name="closed" value="true" />
@@ -538,7 +534,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719193884293</updated>
     </task>
-    <option name="localTasksCounter" value="47" />
+    <task id="LOCAL-00047" summary="feat: change colors in png">
+      <option name="closed" value="true" />
+      <created>1719197875189</created>
+      <option name="number" value="00047" />
+      <option name="presentableId" value="LOCAL-00047" />
+      <option name="project" value="LOCAL" />
+      <updated>1719197875189</updated>
+    </task>
+    <option name="localTasksCounter" value="48" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -559,7 +563,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="ubf jn" />
     <MESSAGE value="feat: conventional commit" />
     <MESSAGE value="test: init" />
     <MESSAGE value="chore: remove prebuild" />
@@ -584,7 +587,8 @@
     <MESSAGE value="fix: readme" />
     <MESSAGE value="fix: create-tool.mjs" />
     <MESSAGE value="feat: change colors in png init" />
-    <option name="LAST_COMMIT_MESSAGE" value="feat: change colors in png init" />
+    <MESSAGE value="feat: change colors in png" />
+    <option name="LAST_COMMIT_MESSAGE" value="feat: change colors in png" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/components/result/ResultFooter.tsx b/src/components/result/ResultFooter.tsx
new file mode 100644
index 0000000..4de3176
--- /dev/null
+++ b/src/components/result/ResultFooter.tsx
@@ -0,0 +1,34 @@
+import { Stack } from '@mui/material';
+import Button from '@mui/material/Button';
+import DownloadIcon from '@mui/icons-material/Download';
+import ContentPasteIcon from '@mui/icons-material/ContentPaste';
+import React from 'react';
+
+export default function ResultFooter({
+  handleDownload,
+  handleCopy,
+  disabled
+}: {
+  handleDownload: () => void;
+  handleCopy: () => void;
+  disabled?: boolean;
+}) {
+  return (
+    <Stack mt={1} direction={'row'} spacing={2}>
+      <Button
+        disabled={disabled}
+        onClick={handleDownload}
+        startIcon={<DownloadIcon />}
+      >
+        Save as
+      </Button>
+      <Button
+        disabled={disabled}
+        onClick={handleCopy}
+        startIcon={<ContentPasteIcon />}
+      >
+        Copy to clipboard
+      </Button>
+    </Stack>
+  );
+}
diff --git a/src/components/result/ToolFileResult.tsx b/src/components/result/ToolFileResult.tsx
index dccc060..a76a04f 100644
--- a/src/components/result/ToolFileResult.tsx
+++ b/src/components/result/ToolFileResult.tsx
@@ -1,17 +1,22 @@
 import { Box } from '@mui/material';
-import React from 'react';
+import React, { useContext } from 'react';
 import InputHeader from '../InputHeader';
 import greyPattern from '@assets/grey-pattern.png';
 import { globalInputHeight } from '../../config/uiConfig';
+import ResultFooter from './ResultFooter';
+import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 
 export default function ToolFileResult({
   title = 'Result',
-  value
+  value,
+  extension
 }: {
   title?: string;
   value: File | null;
+  extension: string;
 }) {
   const [preview, setPreview] = React.useState<string | null>(null);
+  const { showSnackBar } = useContext(CustomSnackBarContext);
 
   React.useEffect(() => {
     if (value) {
@@ -24,6 +29,35 @@ export default function ToolFileResult({
     }
   }, [value]);
 
+  const handleCopy = () => {
+    if (value) {
+      const blob = new Blob([value], { type: value.type });
+      const clipboardItem = new ClipboardItem({ [value.type]: blob });
+
+      navigator.clipboard
+        .write([clipboardItem])
+        .then(() => showSnackBar('File copied', 'success'))
+        .catch((err) => {
+          showSnackBar('Failed to copy: ' + err, 'error');
+        });
+    }
+  };
+
+  const handleDownload = () => {
+    if (value) {
+      const filename = 'output-omni-tools.' + extension;
+
+      const blob = new Blob([value], { type: value.type });
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(url);
+    }
+  };
   return (
     <Box>
       <InputHeader title={title} />
@@ -55,6 +89,11 @@ export default function ToolFileResult({
           </Box>
         )}
       </Box>
+      <ResultFooter
+        disabled={!value}
+        handleCopy={handleCopy}
+        handleDownload={handleDownload}
+      />
     </Box>
   );
 }
diff --git a/src/components/result/ToolTextResult.tsx b/src/components/result/ToolTextResult.tsx
index efaec01..e672068 100644
--- a/src/components/result/ToolTextResult.tsx
+++ b/src/components/result/ToolTextResult.tsx
@@ -6,6 +6,7 @@ import ContentPasteIcon from '@mui/icons-material/ContentPaste';
 import React, { useContext } from 'react';
 import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 import InputHeader from '../InputHeader';
+import ResultFooter from './ResultFooter';
 
 export default function ToolTextResult({
   title = 'Result',
@@ -40,14 +41,7 @@ export default function ToolTextResult({
     <Box>
       <InputHeader title={title} />
       <TextField value={value} fullWidth multiline rows={10} />
-      <Stack mt={1} direction={'row'} spacing={2}>
-        <Button onClick={handleDownload} startIcon={<DownloadIcon />}>
-          Save as
-        </Button>
-        <Button onClick={handleCopy} startIcon={<ContentPasteIcon />}>
-          Copy to clipboard
-        </Button>
-      </Stack>
+      <ResultFooter handleCopy={handleCopy} handleDownload={handleDownload} />
     </Box>
   );
 }
diff --git a/src/pages/image/png/change-colors-in-png/index.tsx b/src/pages/image/png/change-colors-in-png/index.tsx
index 62179a6..7b8a6e9 100644
--- a/src/pages/image/png/change-colors-in-png/index.tsx
+++ b/src/pages/image/png/change-colors-in-png/index.tsx
@@ -67,6 +67,10 @@ export default function ChangeColorsInPng() {
               Math.pow(c1[2] - c2[2], 2)
           );
         };
+        const maxColorDistance = Math.sqrt(
+          Math.pow(255, 2) + Math.pow(255, 2) + Math.pow(255, 2)
+        );
+        const similarityThreshold = (similarity / 100) * maxColorDistance;
 
         for (let i = 0; i < data.length; i += 4) {
           const currentColor: [number, number, number] = [
@@ -74,7 +78,7 @@ export default function ChangeColorsInPng() {
             data[i + 1],
             data[i + 2]
           ];
-          if (colorDistance(currentColor, fromColor) <= similarity) {
+          if (colorDistance(currentColor, fromColor) <= similarityThreshold) {
             data[i] = toColor[0]; // Red
             data[i + 1] = toColor[1]; // Green
             data[i + 2] = toColor[2]; // Blue
@@ -109,7 +113,11 @@ export default function ChangeColorsInPng() {
           />
         </Grid>
         <Grid item xs={6}>
-          <ToolFileResult title={'Output PNG with new colors'} value={result} />
+          <ToolFileResult
+            title={'Output PNG with new colors'}
+            value={result}
+            extension={'png'}
+          />
         </Grid>
       </Grid>
       <ToolOptions>
@@ -131,7 +139,7 @@ export default function ChangeColorsInPng() {
                 <ColorSelector
                   value={values.toColor}
                   onChange={(val) => setFieldValue('toColor', val)}
-                  description={'With this color (to color).\n'}
+                  description={'With this color (to color)'}
                 />
               </Box>
               <Box></Box>