chore: ResultFooter

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>
+  );
+}

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>
   );
 }

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>
   );
 }

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>