From 92858f2e241e7d26d69946b01451c8ee5dd939bb Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Wed, 2 Apr 2025 19:53:33 +0000
Subject: [PATCH] feat: svg change colors

---
 .idea/workspace.xml                           |  37 ++--
 .../change-colors}/index.tsx                  |  69 +------
 .../tools/image/generic/change-colors/meta.ts |  13 ++
 .../image/generic/change-colors/service.ts    | 169 ++++++++++++++++++
 src/pages/tools/image/generic/index.ts        |   3 +-
 .../change-colors-in-png.e2e.spec.ts          |  43 -----
 .../image/png/change-colors-in-png/meta.ts    |  13 --
 .../image/png/change-colors-in-png/test.png   | Bin 3649 -> 0 bytes
 src/pages/tools/image/png/index.ts            |   2 -
 9 files changed, 213 insertions(+), 136 deletions(-)
 rename src/pages/tools/image/{png/change-colors-in-png => generic/change-colors}/index.tsx (57%)
 create mode 100644 src/pages/tools/image/generic/change-colors/meta.ts
 create mode 100644 src/pages/tools/image/generic/change-colors/service.ts
 delete mode 100644 src/pages/tools/image/png/change-colors-in-png/change-colors-in-png.e2e.spec.ts
 delete mode 100644 src/pages/tools/image/png/change-colors-in-png/meta.ts
 delete mode 100644 src/pages/tools/image/png/change-colors-in-png/test.png

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index f0965e2..0e6a02e 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,8 +4,15 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: compress image">
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/image/generic/compress/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/generic/compress/index.tsx" afterDir="false" />
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: remove labels">
+      <change afterPath="$PROJECT_DIR$/src/pages/tools/image/generic/change-colors/service.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/image/generic/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/generic/index.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/change-colors-in-png/change-colors-in-png.e2e.spec.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/change-colors-in-png/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/generic/change-colors/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/change-colors-in-png/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/generic/change-colors/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/change-colors-in-png/test.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/index.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -218,11 +225,11 @@
       <recent name="C:\Users\Ibrahima\IdeaProjects\omni-tools\src\assets" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
+      <recent name="C:\Users\Ibrahima\IdeaProjects\omni-tools\src\pages\tools\image\generic" />
       <recent name="C:\Users\Ibrahima\IdeaProjects\omni-tools\@types" />
       <recent name="C:\Users\Ibrahima\IdeaProjects\omni-tools\public\assets" />
       <recent name="C:\Users\Ibrahima\IdeaProjects\omni-tools\src\pages\tools" />
       <recent name="C:\Users\Ibrahima\IdeaProjects\omni-tools\src\pages\categories" />
-      <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\components" />
     </key>
   </component>
   <component name="RunManager" selected="npm.dev">
@@ -400,15 +407,7 @@
       <workItem from="1743569964813" duration="352000" />
       <workItem from="1743570403937" duration="109000" />
       <workItem from="1743607343305" duration="20000" />
-      <workItem from="1743619618671" duration="1888000" />
-    </task>
-    <task id="LOCAL-00134" summary="chore: prettify json in home">
-      <option name="closed" value="true" />
-      <created>1740662154978</created>
-      <option name="number" value="00134" />
-      <option name="presentableId" value="LOCAL-00134" />
-      <option name="project" value="LOCAL" />
-      <updated>1740662154978</updated>
+      <workItem from="1743619618671" duration="3827000" />
     </task>
     <task id="LOCAL-00135" summary="feat: jakarta font">
       <option name="closed" value="true" />
@@ -794,7 +793,15 @@
       <option name="project" value="LOCAL" />
       <updated>1743621506634</updated>
     </task>
-    <option name="localTasksCounter" value="183" />
+    <task id="LOCAL-00183" summary="chore: remove labels">
+      <option name="closed" value="true" />
+      <created>1743621602590</created>
+      <option name="number" value="00183" />
+      <option name="presentableId" value="LOCAL-00183" />
+      <option name="project" value="LOCAL" />
+      <updated>1743621602590</updated>
+    </task>
+    <option name="localTasksCounter" value="184" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -841,7 +848,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="refactor: use ToolContent" />
     <MESSAGE value="fix: prettify json" />
     <MESSAGE value="refactor: sum" />
     <MESSAGE value="fix: tools by category scroll" />
@@ -866,7 +872,8 @@
     <MESSAGE value="chore: add color" />
     <MESSAGE value="docs: readme" />
     <MESSAGE value="feat: compress image" />
-    <option name="LAST_COMMIT_MESSAGE" value="feat: compress image" />
+    <MESSAGE value="chore: remove labels" />
+    <option name="LAST_COMMIT_MESSAGE" value="chore: remove labels" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/pages/tools/image/png/change-colors-in-png/index.tsx b/src/pages/tools/image/generic/change-colors/index.tsx
similarity index 57%
rename from src/pages/tools/image/png/change-colors-in-png/index.tsx
rename to src/pages/tools/image/generic/change-colors/index.tsx
index 2916e1d..1eb5745 100644
--- a/src/pages/tools/image/png/change-colors-in-png/index.tsx
+++ b/src/pages/tools/image/generic/change-colors/index.tsx
@@ -6,10 +6,10 @@ import { GetGroupsType } from '@components/options/ToolOptions';
 import ColorSelector from '@components/options/ColorSelector';
 import Color from 'color';
 import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
-import { areColorsSimilar } from 'utils/color';
 import ToolContent from '@components/ToolContent';
 import { ToolComponentProps } from '@tools/defineTool';
 import ToolImageInput from '@components/input/ToolImageInput';
+import { processImage } from './service';
 
 const initialValues = {
   fromColor: 'white',
@@ -19,7 +19,7 @@ const initialValues = {
 const validationSchema = Yup.object({
   // splitSeparator: Yup.string().required('The separator is required')
 });
-export default function ChangeColorsInPng({ title }: ToolComponentProps) {
+export default function ChangeColorsInImage({ title }: ToolComponentProps) {
   const [input, setInput] = useState<File | null>(null);
   const [result, setResult] = useState<File | null>(null);
 
@@ -36,54 +36,10 @@ export default function ChangeColorsInPng({ title }: ToolComponentProps) {
     } 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();
 
-      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;
-
-      for (let i = 0; i < data.length; i += 4) {
-        const currentColor: [number, number, number] = [
-          data[i],
-          data[i + 1],
-          data[i + 2]
-        ];
-        if (areColorsSimilar(currentColor, fromColor, similarity)) {
-          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');
-    };
-
-    processImage(input, fromRgb, toRgb, Number(similarity));
+    processImage(input, fromRgb, toRgb, Number(similarity), setResult);
   };
+
   const getGroups: GetGroupsType<typeof initialValues> = ({
     values,
     updateField
@@ -127,22 +83,11 @@ export default function ChangeColorsInPng({ title }: ToolComponentProps) {
         <ToolImageInput
           value={input}
           onChange={setInput}
-          accept={['image/png']}
-          title={'Input PNG'}
+          accept={['image/*']}
+          title={'Input image'}
         />
       }
-      resultComponent={
-        <ToolFileResult
-          title={'Transparent PNG'}
-          value={result}
-          extension={'png'}
-        />
-      }
-      toolInfo={{
-        title: 'Make Colors Transparent',
-        description:
-          'This tool allows you to make specific colors in a PNG image transparent. You can select the color to replace and adjust the similarity threshold to include similar colors.'
-      }}
+      resultComponent={<ToolFileResult title={'Result image'} value={result} />}
     />
   );
 }
diff --git a/src/pages/tools/image/generic/change-colors/meta.ts b/src/pages/tools/image/generic/change-colors/meta.ts
new file mode 100644
index 0000000..287a327
--- /dev/null
+++ b/src/pages/tools/image/generic/change-colors/meta.ts
@@ -0,0 +1,13 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+
+export const tool = defineTool('image-generic', {
+  name: 'Change colors in image',
+  path: 'change-colors',
+  icon: 'cil:color-fill',
+  description:
+    "World's simplest online Image color changer. Just import your image (JPG, PNG, SVG) in the editor on the left, select which colors to change, and you'll instantly get a new image with the new colors on the right. Free, quick, and very powerful. Import an image – replace its colors.",
+  shortDescription: 'Quickly swap colors in a image',
+  keywords: ['change', 'colors', 'in', 'png', 'image', 'jpg'],
+  component: lazy(() => import('./index'))
+});
diff --git a/src/pages/tools/image/generic/change-colors/service.ts b/src/pages/tools/image/generic/change-colors/service.ts
new file mode 100644
index 0000000..a35ed1d
--- /dev/null
+++ b/src/pages/tools/image/generic/change-colors/service.ts
@@ -0,0 +1,169 @@
+import { areColorsSimilar } from '@utils/color';
+
+export const processImage = async (
+  file: File,
+  fromColor: [number, number, number],
+  toColor: [number, number, number],
+  similarity: number,
+  setResult: (result: File | null) => void
+): Promise<void> => {
+  if (file.type === 'image/svg+xml') {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      if (!e.target?.result) return;
+
+      let svgContent = e.target.result as string;
+      const toColorHex = rgbToHex(toColor[0], toColor[1], toColor[2]);
+
+      // Replace hex colors with various formats (#fff, #ffffff)
+      const hexRegexShort = new RegExp(`#[0-9a-f]{3}\\b`, 'gi');
+      const hexRegexLong = new RegExp(`#[0-9a-f]{6}\\b`, 'gi');
+
+      svgContent = svgContent.replace(hexRegexShort, (match) => {
+        // Expand short hex to full form for comparison
+        const expanded =
+          '#' + match[1] + match[1] + match[2] + match[2] + match[3] + match[3];
+        const matchRgb = hexToRgb(expanded);
+        if (matchRgb && areColorsSimilar(matchRgb, fromColor, similarity)) {
+          return toColorHex;
+        }
+        return match;
+      });
+
+      svgContent = svgContent.replace(hexRegexLong, (match) => {
+        const matchRgb = hexToRgb(match);
+        if (matchRgb && areColorsSimilar(matchRgb, fromColor, similarity)) {
+          return toColorHex;
+        }
+        return match;
+      });
+
+      // Replace RGB colors
+      const rgbRegex = new RegExp(
+        `rgb\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*\\)`,
+        'gi'
+      );
+      svgContent = svgContent.replace(rgbRegex, (match, r, g, b) => {
+        const matchRgb: [number, number, number] = [
+          parseInt(r),
+          parseInt(g),
+          parseInt(b)
+        ];
+        if (areColorsSimilar(matchRgb, fromColor, similarity)) {
+          return `rgb(${toColor[0]}, ${toColor[1]}, ${toColor[2]})`;
+        }
+        return match;
+      });
+
+      // Replace RGBA colors (preserving alpha)
+      const rgbaRegex = new RegExp(
+        `rgba\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*([\\d.]+)\\s*\\)`,
+        'gi'
+      );
+      svgContent = svgContent.replace(rgbaRegex, (match, r, g, b, a) => {
+        const matchRgb: [number, number, number] = [
+          parseInt(r),
+          parseInt(g),
+          parseInt(b)
+        ];
+        if (areColorsSimilar(matchRgb, fromColor, similarity)) {
+          return `rgba(${toColor[0]}, ${toColor[1]}, ${toColor[2]}, ${a})`;
+        }
+        return match;
+      });
+
+      // Replace named SVG colors if they match our target color
+      const namedColors = {
+        red: [255, 0, 0],
+        green: [0, 128, 0],
+        blue: [0, 0, 255],
+        black: [0, 0, 0],
+        white: [255, 255, 255]
+        // Add more named colors as needed
+      };
+
+      Object.entries(namedColors).forEach(([name, rgb]) => {
+        if (
+          areColorsSimilar(
+            rgb as [number, number, number],
+            fromColor,
+            similarity
+          )
+        ) {
+          const colorRegex = new RegExp(`\\b${name}\\b`, 'gi');
+          svgContent = svgContent.replace(colorRegex, toColorHex);
+        }
+      });
+
+      // Create new file with modified content
+      const newFile = new File([svgContent], file.name, {
+        type: 'image/svg+xml'
+      });
+      setResult(newFile);
+    };
+    reader.readAsText(file);
+    return;
+  }
+  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;
+
+  for (let i = 0; i < data.length; i += 4) {
+    const currentColor: [number, number, number] = [
+      data[i],
+      data[i + 1],
+      data[i + 2]
+    ];
+    if (areColorsSimilar(currentColor, fromColor, similarity)) {
+      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: file.type
+      });
+      setResult(newFile);
+    }
+  }, file.type);
+};
+
+const rgbToHex = (r: number, g: number, b: number): string => {
+  return (
+    '#' +
+    [r, g, b]
+      .map((x) => {
+        const hex = x.toString(16);
+        return hex.length === 1 ? '0' + hex : hex;
+      })
+      .join('')
+  );
+};
+
+// Helper function to parse hex to RGB
+const hexToRgb = (hex: string): [number, number, number] | null => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? [
+        parseInt(result[1], 16),
+        parseInt(result[2], 16),
+        parseInt(result[3], 16)
+      ]
+    : null;
+};
diff --git a/src/pages/tools/image/generic/index.ts b/src/pages/tools/image/generic/index.ts
index 07c41cc..d40fefa 100644
--- a/src/pages/tools/image/generic/index.ts
+++ b/src/pages/tools/image/generic/index.ts
@@ -1,4 +1,5 @@
 import { tool as resizeImage } from './resize/meta';
 import { tool as compressImage } from './compress/meta';
+import { tool as changeColors } from './change-colors/meta';
 
-export const imageGenericTools = [resizeImage, compressImage];
+export const imageGenericTools = [resizeImage, compressImage, changeColors];
diff --git a/src/pages/tools/image/png/change-colors-in-png/change-colors-in-png.e2e.spec.ts b/src/pages/tools/image/png/change-colors-in-png/change-colors-in-png.e2e.spec.ts
deleted file mode 100644
index 2fb228a..0000000
--- a/src/pages/tools/image/png/change-colors-in-png/change-colors-in-png.e2e.spec.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { expect, test } from '@playwright/test';
-import { Buffer } from 'buffer';
-import path from 'path';
-import Jimp from 'jimp';
-import { convertHexToRGBA } from '@utils/color';
-
-test.describe('Change colors in png', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/png/change-colors-in-png');
-  });
-
-  // test('should change pixel color', async ({ page }) => {
-  //   // Upload image
-  //   const fileInput = page.locator('input[type="file"]');
-  //   const imagePath = path.join(__dirname, 'test.png');
-  //   await fileInput?.setInputFiles(imagePath);
-  //
-  //   await page.getByTestId('from-color-input').fill('#FF0000');
-  //   const toColor = '#0000FF';
-  //   await page.getByTestId('to-color-input').fill(toColor);
-  //
-  //   // Click on download
-  //   const downloadPromise = page.waitForEvent('download');
-  //   await page.getByText('Save as').click();
-  //
-  //   // Intercept and read downloaded PNG
-  //   const download = await downloadPromise;
-  //   const downloadStream = await download.createReadStream();
-  //
-  //   const chunks = [];
-  //   for await (const chunk of downloadStream) {
-  //     chunks.push(chunk);
-  //   }
-  //   const fileContent = Buffer.concat(chunks);
-  //
-  //   expect(fileContent.length).toBeGreaterThan(0);
-  //
-  //   // Check that the first pixel is transparent
-  //   const image = await Jimp.read(fileContent);
-  //   const color = image.getPixelColor(0, 0);
-  //   expect(color).toBe(convertHexToRGBA(toColor));
-  // });
-});
diff --git a/src/pages/tools/image/png/change-colors-in-png/meta.ts b/src/pages/tools/image/png/change-colors-in-png/meta.ts
deleted file mode 100644
index d2e92ef..0000000
--- a/src/pages/tools/image/png/change-colors-in-png/meta.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { defineTool } from '@tools/defineTool';
-import { lazy } from 'react';
-
-export const tool = defineTool('png', {
-  name: 'Change colors in png',
-  path: 'change-colors-in-png',
-  icon: 'cil:color-fill',
-  description:
-    "World's simplest online Portable Network Graphics (PNG) color changer. Just import your PNG image in the editor on the left, select which colors to change, and you'll instantly get a new PNG with the new colors on the right. Free, quick, and very powerful. Import a PNG – replace its colors.",
-  shortDescription: 'Quickly swap colors in a PNG image',
-  keywords: ['change', 'colors', 'in', 'png'],
-  component: lazy(() => import('./index'))
-});
diff --git a/src/pages/tools/image/png/change-colors-in-png/test.png b/src/pages/tools/image/png/change-colors-in-png/test.png
deleted file mode 100644
index e08bfeff58e6a47aee7bd3c05a40a6ca41654b3e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3649
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
E6Ia~NmH+?%

diff --git a/src/pages/tools/image/png/index.ts b/src/pages/tools/image/png/index.ts
index f248619..e4c4433 100644
--- a/src/pages/tools/image/png/index.ts
+++ b/src/pages/tools/image/png/index.ts
@@ -2,14 +2,12 @@ import { tool as pngCrop } from './crop/meta';
 import { tool as pngCompressPng } from './compress-png/meta';
 import { tool as convertJgpToPng } from './convert-jgp-to-png/meta';
 import { tool as pngCreateTransparent } from './create-transparent/meta';
-import { tool as changeColorsInPng } from './change-colors-in-png/meta';
 import { tool as changeOpacity } from './change-opacity/meta';
 import { tool as removeBackground } from './remove-background/meta';
 
 export const pngTools = [
   pngCompressPng,
   pngCreateTransparent,
-  changeColorsInPng,
   convertJgpToPng,
   changeOpacity,
   pngCrop,