refactor: toolOptions

src/pages/image/png/change-colors-in-png/index.tsx

@@ -1,15 +1,13 @@
 import { Box } from '@mui/material';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import * as Yup from 'yup';
 import ToolFileInput from '../../../../components/input/ToolFileInput';
 import ToolFileResult from '../../../../components/result/ToolFileResult';
 import ToolOptions from '../../../../components/options/ToolOptions';
-import { Formik, useFormikContext } from 'formik';
 import ColorSelector from '../../../../components/options/ColorSelector';
 import Color from 'color';
 import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
 import ToolInputAndResult from '../../../../components/ToolInputAndResult';
-import ToolOptionGroups from '../../../../components/options/ToolOptionGroups';
 
 const initialValues = {
   fromColor: 'white',
@@ -23,86 +21,81 @@ export default function ChangeColorsInPng() {
   const [input, setInput] = useState<File | null>(null);
   const [result, setResult] = useState<File | null>(null);
 
-  const FormikListenerComponent = ({ input }: { input: File }) => {
-    const { values } = useFormikContext<typeof initialValues>();
-    const { fromColor, toColor, similarity } = values;
+  const compute = (optionsValues: typeof initialValues, input: any) => {
+    const { fromColor, toColor, similarity } = optionsValues;
+    let fromRgb: [number, number, number];
+    let toRgb: [number, number, number];
+    try {
+      //@ts-ignore
+      fromRgb = Color(fromColor).rgb().array();
+      //@ts-ignore
+      toRgb = Color(toColor).rgb().array();
+    } catch (err) {
+      return;
+    }
+    const processImage = async (
+      file: File,
+      fromColor: [number, number, number],
+      toColor: [number, number, number],
+      similarity: number
+    ) => {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      if (ctx == null) return;
+      const img = new Image();
 
-    useEffect(() => {
-      let fromRgb: [number, number, number];
-      let toRgb: [number, number, number];
-      try {
-        //@ts-ignore
-        fromRgb = Color(fromColor).rgb().array();
-        //@ts-ignore
-        toRgb = Color(toColor).rgb().array();
-      } catch (err) {
-        return;
-      }
-      const processImage = async (
-        file: File,
-        fromColor: [number, number, number],
-        toColor: [number, number, number],
-        similarity: number
+      img.src = URL.createObjectURL(file);
+      await img.decode();
+
+      canvas.width = img.width;
+      canvas.height = img.height;
+      ctx.drawImage(img, 0, 0);
+
+      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      const data: Uint8ClampedArray = imageData.data;
+
+      const colorDistance = (
+        c1: [number, number, number],
+        c2: [number, number, number]
       ) => {
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d');
-        if (ctx == null) return;
-        const img = new Image();
-
-        img.src = URL.createObjectURL(file);
-        await img.decode();
-
-        canvas.width = img.width;
-        canvas.height = img.height;
-        ctx.drawImage(img, 0, 0);
-
-        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-        const data: Uint8ClampedArray = imageData.data;
-
-        const colorDistance = (
-          c1: [number, number, number],
-          c2: [number, number, number]
-        ) => {
-          return Math.sqrt(
-            Math.pow(c1[0] - c2[0], 2) +
-              Math.pow(c1[1] - c2[1], 2) +
-              Math.pow(c1[2] - c2[2], 2)
-          );
-        };
-        const maxColorDistance = Math.sqrt(
-          Math.pow(255, 2) + Math.pow(255, 2) + Math.pow(255, 2)
+        return Math.sqrt(
+          Math.pow(c1[0] - c2[0], 2) +
+            Math.pow(c1[1] - c2[1], 2) +
+            Math.pow(c1[2] - c2[2], 2)
         );
-        const similarityThreshold = (similarity / 100) * maxColorDistance;
-
-        for (let i = 0; i < data.length; i += 4) {
-          const currentColor: [number, number, number] = [
-            data[i],
-            data[i + 1],
-            data[i + 2]
-          ];
-          if (colorDistance(currentColor, fromColor) <= similarityThreshold) {
-            data[i] = toColor[0]; // Red
-            data[i + 1] = toColor[1]; // Green
-            data[i + 2] = toColor[2]; // Blue
-          }
-        }
-
-        ctx.putImageData(imageData, 0, 0);
-
-        canvas.toBlob((blob) => {
-          if (blob) {
-            const newFile = new File([blob], file.name, { type: 'image/png' });
-            setResult(newFile);
-          }
-        }, 'image/png');
       };
+      const maxColorDistance = Math.sqrt(
+        Math.pow(255, 2) + Math.pow(255, 2) + Math.pow(255, 2)
+      );
+      const similarityThreshold = (similarity / 100) * maxColorDistance;
 
-      processImage(input, fromRgb, toRgb, Number(similarity));
-    }, [input, fromColor, toColor]);
+      for (let i = 0; i < data.length; i += 4) {
+        const currentColor: [number, number, number] = [
+          data[i],
+          data[i + 1],
+          data[i + 2]
+        ];
+        if (colorDistance(currentColor, fromColor) <= similarityThreshold) {
+          data[i] = toColor[0]; // Red
+          data[i + 1] = toColor[1]; // Green
+          data[i + 2] = toColor[2]; // Blue
+        }
+      }
 
-    return null;
+      ctx.putImageData(imageData, 0, 0);
+
+      canvas.toBlob((blob) => {
+        if (blob) {
+          const newFile = new File([blob], file.name, {
+            type: 'image/png'
+          });
+          setResult(newFile);
+        }
+      }, 'image/png');
+    };
+
+    processImage(input, fromRgb, toRgb, Number(similarity));
   };
-
   return (
     <Box>
       <ToolInputAndResult
@@ -122,47 +115,38 @@ export default function ChangeColorsInPng() {
           />
         }
       />
-      <ToolOptions>
-        <Formik
-          initialValues={initialValues}
-          validationSchema={validationSchema}
-          onSubmit={() => {}}
-        >
-          {({ setFieldValue, values }) => (
-            <Box>
-              {input && <FormikListenerComponent input={input} />}
-              <ToolOptionGroups
-                groups={[
-                  {
-                    title: 'From color and to color',
-                    component: (
-                      <Box>
-                        <ColorSelector
-                          value={values.fromColor}
-                          onChange={(val) => setFieldValue('fromColor', val)}
-                          description={'Replace this color (from color)'}
-                        />
-                        <ColorSelector
-                          value={values.toColor}
-                          onChange={(val) => setFieldValue('toColor', val)}
-                          description={'With this color (to color)'}
-                        />
-                        <TextFieldWithDesc
-                          value={values.similarity}
-                          onChange={(val) => setFieldValue('similarity', val)}
-                          description={
-                            'Match this % of similar colors of the from color. For example, 10% white will match white and a little bit of gray.'
-                          }
-                        />
-                      </Box>
-                    )
+      <ToolOptions
+        compute={compute}
+        getGroups={({ values, setFieldValue }) => [
+          {
+            title: 'From color and to color',
+            component: (
+              <Box>
+                <ColorSelector
+                  value={values.fromColor}
+                  onChange={(val) => setFieldValue('fromColor', val)}
+                  description={'Replace this color (from color)'}
+                />
+                <ColorSelector
+                  value={values.toColor}
+                  onChange={(val) => setFieldValue('toColor', val)}
+                  description={'With this color (to color)'}
+                />
+                <TextFieldWithDesc
+                  value={values.similarity}
+                  onChange={(val) => setFieldValue('similarity', val)}
+                  description={
+                    'Match this % of similar colors of the from color. For example, 10% white will match white and a little bit of gray.'
                   }
-                ]}
-              />
-            </Box>
-          )}
-        </Formik>
-      </ToolOptions>
+                />
+              </Box>
+            )
+          }
+        ]}
+        initialValues={initialValues}
+        input={input}
+        validationSchema={validationSchema}
+      />
     </Box>
   );
 }

src/pages/image/png/create-transparent/index.tsx

@@ -1,15 +1,13 @@
 import { Box } from '@mui/material';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import * as Yup from 'yup';
 import ToolFileInput from '../../../../components/input/ToolFileInput';
 import ToolFileResult from '../../../../components/result/ToolFileResult';
 import ToolOptions from '../../../../components/options/ToolOptions';
-import { Formik, useFormikContext } from 'formik';
 import ColorSelector from '../../../../components/options/ColorSelector';
 import Color from 'color';
 import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
 import ToolInputAndResult from '../../../../components/ToolInputAndResult';
-import ToolOptionGroups from '../../../../components/options/ToolOptionGroups';
 
 const initialValues = {
   fromColor: 'white',
@@ -22,78 +20,73 @@ export default function ChangeColorsInPng() {
   const [input, setInput] = useState<File | null>(null);
   const [result, setResult] = useState<File | null>(null);
 
-  const FormikListenerComponent = ({ input }: { input: File }) => {
-    const { values } = useFormikContext<typeof initialValues>();
-    const { fromColor, similarity } = values;
+  const compute = (optionsValues: typeof initialValues, input: any) => {
+    const { fromColor, similarity } = optionsValues;
 
-    useEffect(() => {
-      let fromRgb: [number, number, number];
-      try {
-        //@ts-ignore
-        fromRgb = Color(fromColor).rgb().array();
-      } catch (err) {
-        return;
-      }
-      const processImage = async (
-        file: File,
-        fromColor: [number, number, number],
-        similarity: number
+    let fromRgb: [number, number, number];
+    try {
+      //@ts-ignore
+      fromRgb = Color(fromColor).rgb().array();
+    } catch (err) {
+      return;
+    }
+    const processImage = async (
+      file: File,
+      fromColor: [number, number, number],
+      similarity: number
+    ) => {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      if (ctx == null) return;
+      const img = new Image();
+
+      img.src = URL.createObjectURL(file);
+      await img.decode();
+
+      canvas.width = img.width;
+      canvas.height = img.height;
+      ctx.drawImage(img, 0, 0);
+
+      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      const data: Uint8ClampedArray = imageData.data;
+
+      const colorDistance = (
+        c1: [number, number, number],
+        c2: [number, number, number]
       ) => {
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d');
-        if (ctx == null) return;
-        const img = new Image();
-
-        img.src = URL.createObjectURL(file);
-        await img.decode();
-
-        canvas.width = img.width;
-        canvas.height = img.height;
-        ctx.drawImage(img, 0, 0);
-
-        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-        const data: Uint8ClampedArray = imageData.data;
-
-        const colorDistance = (
-          c1: [number, number, number],
-          c2: [number, number, number]
-        ) => {
-          return Math.sqrt(
-            Math.pow(c1[0] - c2[0], 2) +
-              Math.pow(c1[1] - c2[1], 2) +
-              Math.pow(c1[2] - c2[2], 2)
-          );
-        };
-        const maxColorDistance = Math.sqrt(
-          Math.pow(255, 2) + Math.pow(255, 2) + Math.pow(255, 2)
+        return Math.sqrt(
+          Math.pow(c1[0] - c2[0], 2) +
+            Math.pow(c1[1] - c2[1], 2) +
+            Math.pow(c1[2] - c2[2], 2)
         );
-        const similarityThreshold = (similarity / 100) * maxColorDistance;
-
-        for (let i = 0; i < data.length; i += 4) {
-          const currentColor: [number, number, number] = [
-            data[i],
-            data[i + 1],
-            data[i + 2]
-          ];
-          if (colorDistance(currentColor, fromColor) <= similarityThreshold) {
-            data[i + 3] = 0; // Set alpha to 0 (transparent)
-          }
-        }
-
-        ctx.putImageData(imageData, 0, 0);
-
-        canvas.toBlob((blob) => {
-          if (blob) {
-            const newFile = new File([blob], file.name, { type: 'image/png' });
-            setResult(newFile);
-          }
-        }, 'image/png');
       };
+      const maxColorDistance = Math.sqrt(
+        Math.pow(255, 2) + Math.pow(255, 2) + Math.pow(255, 2)
+      );
+      const similarityThreshold = (similarity / 100) * maxColorDistance;
 
-      processImage(input, fromRgb, Number(similarity));
-    }, [input, fromColor]);
+      for (let i = 0; i < data.length; i += 4) {
+        const currentColor: [number, number, number] = [
+          data[i],
+          data[i + 1],
+          data[i + 2]
+        ];
+        if (colorDistance(currentColor, fromColor) <= similarityThreshold) {
+          data[i + 3] = 0; // Set alpha to 0 (transparent)
+        }
+      }
 
-    return null;
+      ctx.putImageData(imageData, 0, 0);
+
+      canvas.toBlob((blob) => {
+        if (blob) {
+          const newFile = new File([blob], file.name, { type: 'image/png' });
+          setResult(newFile);
+        }
+      }, 'image/png');
+    };
+
+    processImage(input, fromRgb, Number(similarity));
   };
 
   return (
@@ -115,42 +108,33 @@ export default function ChangeColorsInPng() {
           />
         }
       />
-      <ToolOptions>
-        <Formik
-          initialValues={initialValues}
-          validationSchema={validationSchema}
-          onSubmit={() => {}}
-        >
-          {({ setFieldValue, values }) => (
-            <Box>
-              {input && <FormikListenerComponent input={input} />}
-              <ToolOptionGroups
-                groups={[
-                  {
-                    title: 'From color and similarity',
-                    component: (
-                      <Box>
-                        <ColorSelector
-                          value={values.fromColor}
-                          onChange={(val) => setFieldValue('fromColor', val)}
-                          description={'Replace this color (from color)'}
-                        />
-                        <TextFieldWithDesc
-                          value={values.similarity}
-                          onChange={(val) => setFieldValue('similarity', val)}
-                          description={
-                            'Match this % of similar colors of the from color. For example, 10% white will match white and a little bit of gray.'
-                          }
-                        />
-                      </Box>
-                    )
+      <ToolOptions
+        compute={compute}
+        getGroups={({ values, setFieldValue }) => [
+          {
+            title: 'From color and similarity',
+            component: (
+              <Box>
+                <ColorSelector
+                  value={values.fromColor}
+                  onChange={(val) => setFieldValue('fromColor', val)}
+                  description={'Replace this color (from color)'}
+                />
+                <TextFieldWithDesc
+                  value={values.similarity}
+                  onChange={(val) => setFieldValue('similarity', val)}
+                  description={
+                    'Match this % of similar colors of the from color. For example, 10% white will match white and a little bit of gray.'
                   }
-                ]}
-              />
-            </Box>
-          )}
-        </Formik>
-      </ToolOptions>
+                />
+              </Box>
+            )
+          }
+        ]}
+        initialValues={initialValues}
+        input={input}
+        validationSchema={validationSchema}
+      />
     </Box>
   );
 }