diff --git a/apps/web/src/components/tools/content-aware-resize-settings.tsx b/apps/web/src/components/tools/content-aware-resize-settings.tsx new file mode 100644 index 00000000..4f8cf6b8 --- /dev/null +++ b/apps/web/src/components/tools/content-aware-resize-settings.tsx @@ -0,0 +1,232 @@ +import { Download, Info } from "lucide-react"; +import { useCallback, useEffect, useRef, useState } from "react"; +import { ProgressCard } from "@/components/common/progress-card"; +import { useToolProcessor } from "@/hooks/use-tool-processor"; +import { useFileStore } from "@/stores/file-store"; + +function HintIcon({ text }: { text: string }) { + return ( + + + + {text} + + + ); +} + +export interface ContentAwareResizeControlsProps { + settings?: Record; + onChange?: (settings: Record) => void; +} + +export function ContentAwareResizeControls({ + settings: initialSettings, + onChange, +}: ContentAwareResizeControlsProps) { + const [width, setWidth] = useState(""); + const [height, setHeight] = useState(""); + const [protectFaces, setProtectFaces] = useState(false); + const [blurRadius, setBlurRadius] = useState(4); + const [sobelThreshold, setSobelThreshold] = useState(2); + const [squareMode, setSquareMode] = useState(false); + + const initializedRef = useRef(false); + useEffect(() => { + if (!initialSettings || initializedRef.current) return; + initializedRef.current = true; + if (initialSettings.width != null) setWidth(String(initialSettings.width)); + if (initialSettings.height != null) setHeight(String(initialSettings.height)); + if (initialSettings.protectFaces != null) + setProtectFaces(Boolean(initialSettings.protectFaces)); + if (initialSettings.blurRadius != null) setBlurRadius(Number(initialSettings.blurRadius)); + if (initialSettings.sobelThreshold != null) + setSobelThreshold(Number(initialSettings.sobelThreshold)); + if (initialSettings.square != null) setSquareMode(Boolean(initialSettings.square)); + }, [initialSettings]); + + const onChangeRef = useRef(onChange); + useEffect(() => { + onChangeRef.current = onChange; + }); + + useEffect(() => { + const settings: Record = {}; + if (!squareMode) { + if (width) settings.width = Number(width); + if (height) settings.height = Number(height); + } + settings.protectFaces = protectFaces; + settings.blurRadius = blurRadius; + settings.sobelThreshold = sobelThreshold; + settings.square = squareMode; + onChangeRef.current?.(settings); + }, [width, height, protectFaces, blurRadius, sobelThreshold, squareMode]); + + return ( +
+ {/* Dimensions */} +
+
+ + setWidth(e.target.value)} + placeholder="Auto" + disabled={squareMode} + className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground disabled:opacity-50" + /> +
+
+ + setHeight(e.target.value)} + placeholder="Auto" + disabled={squareMode} + className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground disabled:opacity-50" + /> +
+
+ + {/* Square mode */} + + + {/* Face protection */} + + + {/* Blur radius */} +
+
+ + {blurRadius} +
+ setBlurRadius(Number(e.target.value))} + className="w-full mt-1 h-1.5 rounded-full appearance-none bg-muted accent-primary" + /> +
+ + {/* Sobel threshold */} +
+
+ + {sobelThreshold} +
+ setSobelThreshold(Number(e.target.value))} + className="w-full mt-1 h-1.5 rounded-full appearance-none bg-muted accent-primary" + /> +
+
+ ); +} + +export function ContentAwareResizeSettings() { + const { files } = useFileStore(); + const { processFiles, processAllFiles, processing, error, downloadUrl, progress } = + useToolProcessor("content-aware-resize"); + const [settings, setSettings] = useState>({}); + + const handleSettingsChange = useCallback((newSettings: Record) => { + setSettings(newSettings); + }, []); + + const handleProcess = () => { + if (files.length > 1) { + processAllFiles(files, settings); + } else { + processFiles(files, settings); + } + }; + + const hasFile = files.length > 0; + const canProcess = + hasFile && + !processing && + (Boolean(settings.width) || Boolean(settings.height) || Boolean(settings.square)); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + if (canProcess) handleProcess(); + }; + + return ( +
+ + + {error &&

{error}

} + + {processing ? ( + + ) : ( + + )} + + {downloadUrl && ( + + + Download + + )} + + ); +} diff --git a/apps/web/src/lib/tool-registry.tsx b/apps/web/src/lib/tool-registry.tsx index ddcb8c14..5962107d 100644 --- a/apps/web/src/lib/tool-registry.tsx +++ b/apps/web/src/lib/tool-registry.tsx @@ -72,6 +72,11 @@ export interface ToolRegistryEntry { const ResizeSettings = lazy(() => import("@/components/tools/resize-settings").then((m) => ({ default: m.ResizeSettings })), ); +const ContentAwareResizeSettings = lazy(() => + import("@/components/tools/content-aware-resize-settings").then((m) => ({ + default: m.ContentAwareResizeSettings, + })), +); const CropSettings = lazy(() => import("@/components/tools/crop-settings").then((m) => ({ default: m.CropSettings })), ); @@ -457,6 +462,7 @@ export const toolRegistry = new Map([ ["red-eye-removal", { displayMode: "before-after", Settings: RedEyeRemovalSettings }], ["restore-photo", { displayMode: "before-after", Settings: RestorePhotoSettings }], ["transparency-fixer", { displayMode: "before-after", Settings: TransparencyFixerSettings }], + ["content-aware-resize", { displayMode: "side-by-side", Settings: ContentAwareResizeSettings }], ]); export function getToolRegistryEntry(toolId: string): ToolRegistryEntry | undefined { diff --git a/tests/e2e/content-aware-resize.spec.ts b/tests/e2e/content-aware-resize.spec.ts index d59691cb..6d07713b 100644 --- a/tests/e2e/content-aware-resize.spec.ts +++ b/tests/e2e/content-aware-resize.spec.ts @@ -33,6 +33,37 @@ async function enableContentAware(page: import("@playwright/test").Page) { } test.describe("Content-Aware Resize", () => { + test("direct /content-aware-resize route loads tool page (regression #131)", async ({ + loggedInPage: page, + }) => { + await page.goto("/content-aware-resize"); + + // Must NOT show "Tool not found" + await expect(page.getByText("Tool not found")).not.toBeVisible(); + + // Must show the tool name and content-aware controls + await expect(page.getByText("Content-Aware Resize")).toBeVisible(); + await expect(page.getByText("Resize to square")).toBeVisible(); + await expect(page.getByText("Protect faces")).toBeVisible(); + await expect(page.getByText("Smoothing")).toBeVisible(); + await expect(page.getByText("Edge sensitivity")).toBeVisible(); + }); + + test("direct route submit disabled without file", async ({ loggedInPage: page }) => { + await page.goto("/content-aware-resize"); + await expect(page.getByTestId("content-aware-resize-submit")).toBeDisabled(); + }); + + test("direct route submit enables with width and file", async ({ loggedInPage: page }) => { + await page.goto("/content-aware-resize"); + await uploadFile(page, fixturePath("test-200x150.png")); + + const widthInput = page.locator("input[placeholder='Auto']").first(); + await widthInput.fill("150"); + + await expect(page.getByTestId("content-aware-resize-submit")).toBeEnabled(); + }); + test("content-aware toggle reveals seam carving controls", async ({ loggedInPage: page }) => { await page.goto("/resize"); diff --git a/tests/unit/web/tool-registry.test.ts b/tests/unit/web/tool-registry.test.ts index daa1eaf5..f9c2060c 100644 --- a/tests/unit/web/tool-registry.test.ts +++ b/tests/unit/web/tool-registry.test.ts @@ -163,11 +163,18 @@ vi.mock("@/components/tools/red-eye-removal-settings", () => ({ vi.mock("@/components/tools/restore-photo-settings", () => ({ RestorePhotoSettings: () => null, })); +vi.mock("@/components/tools/transparency-fixer-settings", () => ({ + TransparencyFixerSettings: () => null, +})); +vi.mock("@/components/tools/content-aware-resize-settings", () => ({ + ContentAwareResizeSettings: () => null, +})); // --------------------------------------------------------------------------- // Import after mocks // --------------------------------------------------------------------------- +import { TOOLS } from "@snapotter/shared"; import type { DisplayMode } from "@/lib/tool-registry"; import { getToolRegistryEntry, toolRegistry } from "@/lib/tool-registry"; @@ -211,6 +218,7 @@ describe("toolRegistry", () => { "passport-photo", "red-eye-removal", "restore-photo", + "content-aware-resize", ]; for (const id of aiTools) { expect(toolRegistry.has(id), `missing AI tool: ${id}`).toBe(true); @@ -324,6 +332,19 @@ describe("toolRegistry", () => { const split = toolRegistry.get("split"); expect(split?.displayMode).toBe("interactive-split"); }); + + it("every tool in shared TOOLS[] has a matching registry entry", () => { + const missing: string[] = []; + for (const tool of TOOLS) { + if (!toolRegistry.has(tool.id)) { + missing.push(tool.id); + } + } + expect( + missing, + `Tools defined in TOOLS[] but missing from toolRegistry: ${missing.join(", ")}`, + ).toEqual([]); + }); }); // ========================================================================== @@ -360,6 +381,13 @@ describe("getToolRegistryEntry", () => { expect(entry?.displayMode).toBe("no-dropzone"); expect(entry?.ResultsPanel).toBeDefined(); }); + + it("returns entry for content-aware-resize with side-by-side display (regression #131)", () => { + const entry = getToolRegistryEntry("content-aware-resize"); + expect(entry).toBeDefined(); + expect(entry?.displayMode).toBe("side-by-side"); + expect(entry?.Settings).toBeDefined(); + }); }); // ==========================================================================