pixedi 1.0.0

package/src/shared/components/ImageEditor/hooks/useImageLoader.tsx

@@ -0,0 +1,110 @@
+import { useEffect, useState } from "react";
+
+const mimeToExt: Record<string, string> = {
+  "image/jpeg": "jpg",
+  "image/jpg": "jpg",
+  "image/png": "png",
+  "image/gif": "gif",
+  "image/webp": "webp",
+};
+
+type UseImageResult = {
+  loading: boolean;
+  error: string | null;
+  width: number;
+  height: number;
+  extension: string | null;
+  base64: string | null;
+};
+
+export const useImageLoader = (src: string): UseImageResult => {
+  const [state, setState] = useState<UseImageResult>({
+    loading: true,
+    error: null,
+    width: 0,
+    height: 0,
+    extension: null,
+    base64: null,
+  });
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const processImage = async () => {
+      try {
+        const response = await fetch(src);
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+
+        const mimeType = response.headers.get("content-type") || "";
+        const cleanMime = mimeType.split(";")[0].toLowerCase().trim();
+        const isImg = cleanMime.startsWith("image/");
+
+        const extension = mimeToExt[cleanMime] || "unknown";
+
+        if (!isImg) {
+          if (isMounted) {
+            setState((prev) => ({
+              ...prev,
+              loading: false,
+              error: "The requested resource is not a valid image.",
+              extension,
+            }));
+          }
+          return;
+        }
+
+        const blob = await response.blob();
+        const base64String = await new Promise<string>((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onloadend = () => resolve(reader.result as string);
+          reader.onerror = () =>
+            reject(new Error("Failed to read image data stream"));
+          reader.readAsDataURL(blob);
+        });
+
+        const dimensions = await new Promise<{ width: number; height: number }>(
+          (resolve, reject) => {
+            const img = new Image();
+            img.src = base64String;
+            img.onload = () =>
+              resolve({ width: img.naturalWidth, height: img.naturalHeight });
+            img.onerror = () =>
+              reject(new Error("Failed to parse image dimensions"));
+          },
+        );
+
+        if (isMounted) {
+          setState({
+            loading: false,
+            error: null,
+            width: dimensions.width,
+            height: dimensions.height,
+            extension,
+            base64: base64String,
+          });
+        }
+      } catch (err: unknown) {
+        if (isMounted) {
+          setState((prev) => ({
+            ...prev,
+            loading: false,
+            error:
+              err instanceof Error
+                ? err.message
+                : "An error occurred during extraction.",
+          }));
+        }
+      }
+    };
+
+    processImage();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [src]);
+
+  return state;
+};

package/src/shared/components/ImageEditor/hooks/useImageProcessor.test.tsx

@@ -0,0 +1,147 @@
+import { renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useImageProcessor } from "./useImageProcessor";
+
+const bitmap = {
+  width: 120,
+  height: 80,
+  close: vi.fn(),
+};
+
+const context = {
+  clearRect: vi.fn(),
+  drawImage: vi.fn(),
+  filter: "",
+  restore: vi.fn(),
+  rotate: vi.fn(),
+  save: vi.fn(),
+  scale: vi.fn(),
+  translate: vi.fn(),
+};
+
+const validPng = "data:image/png;base64,aGVsbG8=";
+const validJpeg = "data:image/jpeg;base64,aGVsbG8=";
+
+describe("useImageProcessor", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.stubGlobal("createImageBitmap", vi.fn().mockResolvedValue(bitmap));
+    vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue(
+      context as unknown as CanvasRenderingContext2D,
+    );
+    vi.spyOn(HTMLCanvasElement.prototype, "toDataURL").mockReturnValue(
+      "data:image/png;base64,processed",
+    );
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("rejects malformed Base64 before attempting to decode an image", async () => {
+    const { result } = renderHook(() => useImageProcessor());
+
+    await expect(result.current.resize("invalid", 10, 10)).rejects.toThrow(
+      "Invalid Base64 image format",
+    );
+    expect(createImageBitmap).not.toHaveBeenCalled();
+  });
+
+  it("resizes an image and serializes PNG output without a quality argument", async () => {
+    const { result } = renderHook(() => useImageProcessor());
+
+    await expect(result.current.resize(validPng, 60, 40)).resolves.toBe(
+      "data:image/png;base64,processed",
+    );
+
+    expect(createImageBitmap).toHaveBeenCalledTimes(1);
+    expect(context.clearRect).toHaveBeenCalledWith(0, 0, 60, 40);
+    expect(context.drawImage).toHaveBeenCalledWith(bitmap, 0, 0, 60, 40);
+    expect(bitmap.close).toHaveBeenCalledTimes(1);
+    expect(HTMLCanvasElement.prototype.toDataURL).toHaveBeenCalledWith(
+      "image/png",
+    );
+  });
+
+  it("crops an image with source and destination rectangles", async () => {
+    const { result } = renderHook(() => useImageProcessor());
+
+    await result.current.crop(validPng, 5, 6, 50, 40);
+
+    expect(context.drawImage).toHaveBeenCalledWith(
+      bitmap,
+      5,
+      6,
+      50,
+      40,
+      0,
+      0,
+      50,
+      40,
+    );
+    expect(bitmap.close).toHaveBeenCalledTimes(1);
+  });
+
+  it("flips an image using the expected canvas transforms", async () => {
+    const { result } = renderHook(() => useImageProcessor());
+
+    await result.current.flip(validPng, true, false);
+
+    expect(context.translate).toHaveBeenCalledWith(120, 0);
+    expect(context.scale).toHaveBeenCalledWith(-1, 1);
+    expect(context.drawImage).toHaveBeenCalledWith(bitmap, 0, 0);
+    expect(context.restore).toHaveBeenCalledTimes(1);
+    expect(bitmap.close).toHaveBeenCalledTimes(1);
+  });
+
+  it("rotates an image around its center", async () => {
+    const { result } = renderHook(() => useImageProcessor());
+
+    await result.current.rotate(validPng, 90);
+
+    expect(context.translate).toHaveBeenCalledWith(60, 40);
+    expect(context.rotate).toHaveBeenCalledWith(Math.PI / 2);
+    expect(context.drawImage).toHaveBeenCalledWith(bitmap, -60, -40);
+    expect(context.restore).toHaveBeenCalledTimes(1);
+  });
+
+  it("applies filters and uses quality for JPEG output", async () => {
+    const { result } = renderHook(() => useImageProcessor());
+
+    await result.current.filter(validJpeg, { brightness: 120, contrast: 90 });
+
+    expect(context.filter).toBe("brightness(120%) contrast(90%)");
+    expect(context.drawImage).toHaveBeenCalledWith(bitmap, 0, 0);
+    expect(HTMLCanvasElement.prototype.toDataURL).toHaveBeenCalledWith(
+      "image/jpeg",
+      0.85,
+    );
+  });
+
+  it("uses quality for WebP output", async () => {
+    const { result } = renderHook(() => useImageProcessor());
+    const webp = "data:image/webp;base64,aGVsbG8=";
+
+    await result.current.resize(webp, 60, 40);
+
+    expect(HTMLCanvasElement.prototype.toDataURL).toHaveBeenCalledWith(
+      "image/webp",
+      0.85,
+    );
+  });
+
+  it("processes GIF input as PNG", async () => {
+    const { result } = renderHook(() => useImageProcessor());
+    const gif = "data:image/gif;base64,aGVsbG8=";
+
+    await result.current.resize(gif, 60, 40);
+
+    expect(createImageBitmap).toHaveBeenCalledWith(
+      expect.objectContaining({ type: "image/png" }),
+    );
+    expect(HTMLCanvasElement.prototype.toDataURL).toHaveBeenCalledWith(
+      "image/png",
+    );
+  });
+});

package/src/shared/components/ImageEditor/hooks/useImageProcessor.ts

@@ -0,0 +1,225 @@
+import { useCallback, useRef } from "react";
+
+export interface ImageProcessor {
+  resize: (base64Str: string, width: number, height: number) => Promise<string>;
+  crop: (
+    base64Str: string,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+  ) => Promise<string>;
+  flip: (
+    base64Str: string,
+    horizontal: boolean,
+    vertical: boolean,
+  ) => Promise<string>;
+  rotate: (base64Str: string, angle: number) => Promise<string>;
+  filter: (
+    base64Str: string,
+    filters: Record<string, number>,
+  ) => Promise<string>;
+}
+
+export const useImageProcessor = (): ImageProcessor => {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+
+  const parseBase64 = useCallback((base64Str: string) => {
+    const match = base64Str.match(/^data:(image\/[a-zA-Z+.-]+);base64,(.+)$/);
+    if (!match) {
+      throw new Error("Invalid Base64 image format");
+    }
+
+    let mimeType = match[1];
+    const rawData = match[2];
+
+    if (mimeType === "image/gif") {
+      mimeType = "image/png";
+    }
+
+    return { mimeType, rawData };
+  }, []);
+
+  const getBitmap = useCallback(
+    async (
+      base64Str: string,
+    ): Promise<{ bitmap: ImageBitmap; mimeType: string }> => {
+      const { mimeType, rawData } = parseBase64(base64Str);
+
+      const binaryStr = atob(rawData);
+      const bytes = new Uint8Array(binaryStr.length);
+      for (let i = 0; i < binaryStr.length; i++) {
+        bytes[i] = binaryStr.charCodeAt(i);
+      }
+
+      const blob = new Blob([bytes], { type: mimeType });
+      const bitmap = await createImageBitmap(blob);
+
+      return { bitmap, mimeType };
+    },
+    [parseBase64],
+  );
+
+  const getContext = useCallback((mimeType: string) => {
+    if (!canvasRef.current) {
+      canvasRef.current = document.createElement("canvas");
+    }
+    const canvas = canvasRef.current;
+
+    // Enable alpha channel for formats that support transparency
+    const requiresAlpha = mimeType === "image/png" || mimeType === "image/webp";
+    const ctx = canvas.getContext("2d", { alpha: requiresAlpha });
+
+    return { canvas, ctx };
+  }, []);
+
+  const finalizeCanvas = useCallback(
+    (canvas: HTMLCanvasElement, mimeType: string): string => {
+      // PNG format does not support quality parameter
+      if (mimeType === "image/jpeg" || mimeType === "image/webp") {
+        return canvas.toDataURL(mimeType, 0.85);
+      }
+      return canvas.toDataURL(mimeType); // for PNG
+    },
+    [],
+  );
+
+  // 1. RESIZE
+  const resize = useCallback(
+    async (
+      base64Str: string,
+      width: number,
+      height: number,
+    ): Promise<string> => {
+      const { bitmap, mimeType } = await getBitmap(base64Str);
+      const { canvas, ctx } = getContext(mimeType);
+
+      canvas.width = width;
+      canvas.height = height;
+
+      if (ctx) {
+        ctx.clearRect(0, 0, width, height);
+        ctx.drawImage(bitmap, 0, 0, width, height);
+      }
+
+      bitmap.close();
+      return finalizeCanvas(canvas, mimeType);
+    },
+    [getBitmap, getContext, finalizeCanvas],
+  );
+
+  // 2. CROP
+  const crop = useCallback(
+    async (
+      base64Str: string,
+      x: number,
+      y: number,
+      width: number,
+      height: number,
+    ): Promise<string> => {
+      const { bitmap, mimeType } = await getBitmap(base64Str);
+      const { canvas, ctx } = getContext(mimeType);
+
+      canvas.width = width;
+      canvas.height = height;
+
+      if (ctx) {
+        ctx.clearRect(0, 0, width, height);
+        ctx.drawImage(bitmap, x, y, width, height, 0, 0, width, height);
+      }
+
+      bitmap.close();
+      return finalizeCanvas(canvas, mimeType);
+    },
+    [getBitmap, getContext, finalizeCanvas],
+  );
+
+  // 3. FLIP
+  const flip = useCallback(
+    async (
+      base64Str: string,
+      horizontal: boolean,
+      vertical: boolean,
+    ): Promise<string> => {
+      const { bitmap, mimeType } = await getBitmap(base64Str);
+      const { canvas, ctx } = getContext(mimeType);
+
+      canvas.width = bitmap.width;
+      canvas.height = bitmap.height;
+
+      if (ctx) {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.save();
+        ctx.translate(
+          horizontal ? bitmap.width : 0,
+          vertical ? bitmap.height : 0,
+        );
+        ctx.scale(horizontal ? -1 : 1, vertical ? -1 : 1);
+        ctx.drawImage(bitmap, 0, 0);
+        ctx.restore();
+      }
+
+      bitmap.close();
+      return finalizeCanvas(canvas, mimeType);
+    },
+    [getBitmap, getContext, finalizeCanvas],
+  );
+
+  // 4. Rotate
+  const rotate = useCallback(
+    async (base64Str: string, angle: number): Promise<string> => {
+      const { bitmap, mimeType } = await getBitmap(base64Str);
+      const { canvas, ctx } = getContext(mimeType);
+
+      canvas.width = bitmap.width;
+      canvas.height = bitmap.height;
+
+      if (ctx) {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.save();
+        ctx.translate(bitmap.width / 2, bitmap.height / 2);
+        ctx.rotate((angle * Math.PI) / 180);
+        ctx.drawImage(bitmap, -bitmap.width / 2, -bitmap.height / 2);
+        ctx.restore();
+      }
+
+      bitmap.close();
+      return finalizeCanvas(canvas, mimeType);
+    },
+    [getBitmap, getContext, finalizeCanvas],
+  );
+
+  // 5. Filter
+  const filter = useCallback(
+    async (
+      base64Str: string,
+      filters: Record<string, number>,
+    ): Promise<string> => {
+      const { bitmap, mimeType } = await getBitmap(base64Str);
+      const { canvas, ctx } = getContext(mimeType);
+
+      canvas.width = bitmap.width;
+      canvas.height = bitmap.height;
+
+      if (ctx) {
+        const filterString = Object.entries(filters)
+          .map(([name, value]) => `${name}(${value}%)`)
+          .join(" ");
+        ctx.filter = filterString;
+        ctx.drawImage(bitmap, 0, 0);
+      }
+
+      bitmap.close();
+      return finalizeCanvas(canvas, mimeType);
+    },
+    [getBitmap, getContext, finalizeCanvas],
+  );
+
+  return {
+    resize,
+    crop,
+    flip,
+    rotate,
+    filter,
+  };
+};

package/src/shared/components/ImageEditor/hooks/useMobile.tsx

@@ -0,0 +1,33 @@
+import { useState } from "react";
+
+type MobileDevice =
+  | "android"
+  | "ios"
+  | "windows-phone"
+  | "blackberry"
+  | "opera-mini"
+  | "mobile"
+  | null;
+
+const detectMobileDevice = (): MobileDevice => {
+  if (typeof window === "undefined" || !window.navigator) {
+    return null;
+  }
+
+  const ua = window.navigator.userAgent.toLowerCase();
+
+  if (/android/.test(ua)) return "android";
+  if (/iphone|ipad|ipod/.test(ua)) return "ios";
+  if (/windows phone/.test(ua)) return "windows-phone";
+  if (/blackberry|bb10/.test(ua)) return "blackberry";
+  if (/opera mini/.test(ua)) return "opera-mini";
+  if (/mobile/.test(ua)) return "mobile";
+
+  return null;
+};
+
+export const useMobile = (): MobileDevice => {
+  const [mobile] = useState<MobileDevice>(() => detectMobileDevice());
+
+  return mobile;
+};

package/src/shared/components/ImageEditor/index.css

@@ -0,0 +1,145 @@
+.picedi {
+  font-size: 16px;
+  font-family: var(--font-sans);
+
+  --font-sans:
+    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Tahoma,
+    Helvetica, Arial, sans-serif;
+
+  --color-white: #fff;
+  --color-black: #000;
+  --color-transparent: transparent;
+  --color-red: oklch(0.637 0.237 25.331);
+  --color-green: oklch(0.768 0.188 151.716);
+
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --accent-blue: oklch(0.609 0.221 251.687);
+  --accent-blue-light: oklch(0.96 0.02 250);
+  --destructive: oklch(0.577 0.245 27.325);
+  --success: oklch(0.768 0.188 151.716);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --radius: 4px;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+  --overlay-bg: color-mix(in srgb, var(--color-black) 50%, transparent);
+  --overlay-bg-white: color-mix(in srgb, var(--color-white) 80%, transparent);
+}
+
+:host([data-theme="dark"]) .picedi,
+[data-theme="dark"] .picedi,
+[data-theme="dark"].picedi {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --accent-blue-light: oklch(0.25 0.06 250);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+  --overlay-bg: color-mix(in srgb, var(--color-black) 75%, transparent);
+}
+
+.picedi h1,
+.picedi h2,
+.picedi h3,
+.picedi h4,
+.picedi h5,
+.picedi h6 {
+  margin: 0;
+  font-weight: 600;
+}
+
+.text-red {
+  color: var(--color-red);
+}
+
+.bg-red {
+  background-color: var(--color-red);
+}
+
+.bg-green {
+  background-color: var(--color-green);
+}
+
+.text-green {
+  color: var(--color-green);
+}
+
+.mask {
+  background-color: var(--overlay-bg);
+}
+
+.semibold {
+  font-weight: 600;
+  letter-spacing: 0.4px;
+}
+
+.bold {
+  font-weight: bold;
+  letter-spacing: 0.4px;
+}
+
+.sys {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--muted-foreground);
+}
+
+.main {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--background);
+}
+
+.grid {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  min-height: 0;
+  overflow: hidden;
+}

package/src/shared/components/ImageEditor/index.ts

@@ -0,0 +1 @@
+export { ImageEditor } from "./ImageEditor";