@olenbetong/synergi-react 2.3.8 → 2.3.9

package/src/components/ImageEditor/plugins/cropPlugin/CropOverlay.tsx

@@ -0,0 +1,119 @@
+import { Alert, CircularProgress, Typography } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+
+import { CropCanvas } from "../../CropCanvas.js";
+import { DragHandle } from "../../DragHandle.js";
+import { EdgeHandle } from "../../EdgeHandle.js";
+import { useCropContext } from "./CropContext.js";
+
+/** Canvas-area overlay for the crop tool. Reads all state from CropContext. */
+export function CropOverlay() {
+	let {
+		imageUrl,
+		activeCorners,
+		scale,
+		displaySize,
+		canvasRef,
+		cvReady,
+		cvError,
+		cropping,
+		error,
+		handleCanvasReady,
+		updateCorner,
+	} = useCropContext();
+
+	return (
+		<div className="crop-root">
+			<div className="crop-inner">
+				<CropCanvas ref={canvasRef} imageUrl={imageUrl} corners={activeCorners} onReady={handleCanvasReady} />
+
+				{displaySize.width > 0 &&
+					activeCorners.map((corner, i) => (
+						<DragHandle
+							key={i}
+							x={corner.x * scale}
+							y={corner.y * scale}
+							onChange={(x, y) => updateCorner(i, x, y)}
+							containerWidth={displaySize.width}
+							containerHeight={displaySize.height}
+						/>
+					))}
+
+				{displaySize.width > 0 &&
+					(() => {
+						let [tl, tr, br, bl] = activeCorners;
+						let s = scale;
+						return (
+							<>
+								{/* Top edge — moves TL (0) and TR (1) */}
+								<EdgeHandle
+									x={((tl.x + tr.x) / 2) * s}
+									y={((tl.y + tr.y) / 2) * s}
+									axis="y"
+									onChange={(dx, dy) => {
+										updateCorner(0, tl.x * s + dx, tl.y * s + dy);
+										updateCorner(1, tr.x * s + dx, tr.y * s + dy);
+									}}
+								/>
+								{/* Right edge — moves TR (1) and BR (2) */}
+								<EdgeHandle
+									x={((tr.x + br.x) / 2) * s}
+									y={((tr.y + br.y) / 2) * s}
+									axis="x"
+									onChange={(dx, dy) => {
+										updateCorner(1, tr.x * s + dx, tr.y * s + dy);
+										updateCorner(2, br.x * s + dx, br.y * s + dy);
+									}}
+								/>
+								{/* Bottom edge — moves BR (2) and BL (3) */}
+								<EdgeHandle
+									x={((br.x + bl.x) / 2) * s}
+									y={((br.y + bl.y) / 2) * s}
+									axis="y"
+									onChange={(dx, dy) => {
+										updateCorner(2, br.x * s + dx, br.y * s + dy);
+										updateCorner(3, bl.x * s + dx, bl.y * s + dy);
+									}}
+								/>
+								{/* Left edge — moves BL (3) and TL (0) */}
+								<EdgeHandle
+									x={((bl.x + tl.x) / 2) * s}
+									y={((bl.y + tl.y) / 2) * s}
+									axis="x"
+									onChange={(dx, dy) => {
+										updateCorner(3, bl.x * s + dx, bl.y * s + dy);
+										updateCorner(0, tl.x * s + dx, tl.y * s + dy);
+									}}
+								/>
+							</>
+						);
+					})()}
+			</div>
+
+			{!cvReady && !cvError && (
+				<div className="crop-loading">
+					<CircularProgress size={18} color="inherit" />
+					<Typography variant="body2">{getLocalizedString("Loading OpenCV…")}</Typography>
+				</div>
+			)}
+			{cvError && (
+				<div className="crop-loading">
+					<Alert severity="error" sx={{ fontSize: "0.8rem" }}>
+						{getLocalizedString("Crop tool failed to load")}
+					</Alert>
+				</div>
+			)}
+			{(error || cropping) && (
+				<div className="crop-loading">
+					{cropping ? (
+						<CircularProgress size={18} color="inherit" />
+					) : (
+						<Alert severity="error" sx={{ fontSize: "0.8rem" }}>
+							{error}
+						</Alert>
+					)}
+				</div>
+			)}
+		</div>
+	);
+}

package/src/components/ImageEditor/plugins/cropPlugin/CropToolbar.tsx

@@ -0,0 +1,36 @@
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+import { Button, CircularProgress } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+
+import { useCropContext } from "./CropContext.js";
+
+/** Toolbar shown while the crop tool is active. Reads state from CropContext. */
+export function CropToolbar() {
+	let { applyCrop, cropping, cvReady, cvError, onApply, onCancel } = useCropContext();
+
+	async function handleApply() {
+		let result = await applyCrop();
+		if (result) onApply(result.blob, result.actions);
+	}
+
+	return (
+		<>
+			<div className="image-editor__toolbar-group">
+				<Button startIcon={<CloseIcon />} onClick={onCancel} color="inherit" disabled={cropping}>
+					{getLocalizedString("Cancel")}
+				</Button>
+			</div>
+			<div className="image-editor__toolbar-group">
+				<Button
+					variant="contained"
+					startIcon={cropping ? <CircularProgress size={18} color="inherit" /> : <CheckIcon />}
+					onClick={handleApply}
+					disabled={cropping || !cvReady || !!cvError}
+				>
+					{getLocalizedString("Apply crop")}
+				</Button>
+			</div>
+		</>
+	);
+}

package/src/components/ImageEditor/plugins/cropPlugin/index.ts

@@ -0,0 +1,20 @@
+import CropIcon from "@mui/icons-material/Crop";
+
+import type { ToolPlugin } from "../../types.js";
+import { CropProvider } from "./CropContext.js";
+import { CropOverlay } from "./CropOverlay.js";
+import { CropToolbar } from "./CropToolbar.js";
+import { replayCrop } from "./useCropTool.js";
+
+export { CropOverlay, CropProvider, CropToolbar };
+
+export const cropPlugin: ToolPlugin = {
+	type: "tool",
+	id: "crop",
+	label: "Crop",
+	Icon: CropIcon,
+	Provider: CropProvider,
+	Overlay: CropOverlay,
+	Toolbar: CropToolbar,
+	actions: [{ type: "crop", apply: replayCrop }],
+};

package/src/components/ImageEditor/plugins/cropPlugin/useCropTool.ts

@@ -0,0 +1,176 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import type { CropCanvasHandle } from "../../CropCanvas.js";
+import type { EditAction } from "../../types.js";
+import { fullImageQuad, type Point, type Quad, useEdgeDetection } from "../../useEdgeDetection.js";
+import { loadOpenCV, useOpenCV } from "../../useOpenCV.js";
+
+export interface ApplyCropResult {
+	blob: Blob;
+	actions: EditAction[];
+}
+
+export interface CropToolState {
+	activeCorners: Quad;
+	scale: number;
+	displaySize: { width: number; height: number };
+	canvasRef: React.RefObject<CropCanvasHandle | null>;
+	cvReady: boolean;
+	cvError: Error | null;
+	cropping: boolean;
+	error: string | null;
+	debugImageUrl: string | null;
+	handleCanvasReady: (canvas: HTMLCanvasElement, w: number, h: number) => void;
+	updateCorner: (index: number, screenX: number, screenY: number) => void;
+	applyCrop: () => Promise<ApplyCropResult | null>;
+}
+
+/**
+ * Manages all state and logic for the perspective crop tool.
+ * Loads OpenCV lazily, runs edge detection, and performs the warp.
+ */
+export function useCropTool(imageUrl: string, enabled: boolean): CropToolState {
+	let { cv, ready: cvReady, error: cvError } = useOpenCV(enabled);
+	let [corners, setCorners] = useState<Quad | null>(null);
+	let [canvasPixelSize, setCanvasPixelSize] = useState({ width: 1, height: 1 });
+	let [displaySize, setDisplaySize] = useState({ width: 0, height: 0 });
+	let [canvasEl, setCanvasEl] = useState<HTMLCanvasElement | null>(null);
+	let [cropping, setCropping] = useState(false);
+	let [error, setError] = useState<string | null>(null);
+	let canvasRef = useRef<CropCanvasHandle>(null);
+	let prevSuggested = useRef<Quad | null>(null);
+
+	let { corners: suggestedCorners, debugImageUrl } = useEdgeDetection(
+		cvReady ? cv : null,
+		canvasEl,
+		cvReady && enabled,
+	);
+
+	useEffect(() => {
+		if (suggestedCorners && suggestedCorners !== prevSuggested.current) {
+			prevSuggested.current = suggestedCorners;
+			setCorners(suggestedCorners);
+		}
+	}, [suggestedCorners]);
+
+	// Reset when the source image changes (e.g. after a previous crop or rotate)
+	useEffect(() => {
+		prevSuggested.current = null;
+		setCorners(null);
+		setCanvasEl(null);
+	}, [imageUrl]);
+
+	let activeCorners: Quad = corners ?? fullImageQuad(canvasPixelSize.width, canvasPixelSize.height);
+	let scale = displaySize.width > 0 ? displaySize.width / canvasPixelSize.width : 1;
+
+	let handleCanvasReady = useCallback((canvas: HTMLCanvasElement, w: number, h: number) => {
+		setCanvasEl(canvas);
+		setCanvasPixelSize({ width: w, height: h });
+		setDisplaySize({ width: canvas.clientWidth, height: canvas.clientHeight });
+	}, []);
+
+	function updateCorner(index: number, screenX: number, screenY: number) {
+		let pixelX = screenX / scale;
+		let pixelY = screenY / scale;
+		setCorners((prev) => {
+			let next = [...(prev ?? activeCorners)] as Quad;
+			next[index] = { x: pixelX, y: pixelY } as Point;
+			return next;
+		});
+	}
+
+	async function applyCrop(): Promise<ApplyCropResult | null> {
+		if (!cv) return null;
+		setCropping(true);
+		setError(null);
+		try {
+			// Store corners as relative (0–1) coords so replay is resolution-independent.
+			// The display canvas may be downscaled (MAX_DISPLAY_WIDTH), so we must map
+			// corners back to relative coords and then re-apply at full resolution.
+			let relCorners = activeCorners.map((c) => ({
+				x: c.x / canvasPixelSize.width,
+				y: c.y / canvasPixelSize.height,
+			}));
+			// Warp the original image at its native resolution to avoid quality loss.
+			let blob = await cropImageAtFullResolution(cv, imageUrl, relCorners as Quad);
+			let actions: EditAction[] = [{ type: "crop", params: { corners: relCorners } }];
+			return { blob, actions };
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "Crop failed");
+			return null;
+		} finally {
+			setCropping(false);
+		}
+	}
+
+	return {
+		activeCorners,
+		scale,
+		displaySize,
+		canvasRef,
+		cvReady,
+		cvError,
+		cropping,
+		error,
+		debugImageUrl,
+		handleCanvasReady,
+		updateCorner,
+		applyCrop,
+	};
+}
+
+/** Loads the image at native resolution, maps relative corners, and warps. */
+// biome-ignore lint/suspicious/noExplicitAny: OpenCV.js types
+function cropImageAtFullResolution(cv: any, imageUrl: string, relCorners: Quad): Promise<Blob> {
+	return new Promise((resolve, reject) => {
+		let img = new Image();
+		img.onload = () => {
+			let canvas = document.createElement("canvas");
+			canvas.width = img.naturalWidth;
+			canvas.height = img.naturalHeight;
+			canvas.getContext("2d")!.drawImage(img, 0, 0);
+			let absCorners = relCorners.map((c) => ({
+				x: c.x * img.naturalWidth,
+				y: c.y * img.naturalHeight,
+			})) as Quad;
+			perspectiveCrop(cv, canvas, absCorners).then(resolve, reject);
+		};
+		img.onerror = () => reject(new Error("Failed to load image for crop"));
+		img.src = imageUrl;
+	});
+}
+
+/** Performs a perspective warp using OpenCV.js. */
+// biome-ignore lint/suspicious/noExplicitAny: OpenCV.js types
+function perspectiveCrop(cv: any, srcCanvas: HTMLCanvasElement, corners: Quad): Promise<Blob> {
+	let [tl, tr, br, bl] = corners;
+	let outW = Math.round(Math.max(Math.hypot(tr.x - tl.x, tr.y - tl.y), Math.hypot(br.x - bl.x, br.y - bl.y)));
+	let outH = Math.round(Math.max(Math.hypot(bl.x - tl.x, bl.y - tl.y), Math.hypot(br.x - tr.x, br.y - tr.y)));
+
+	let src = cv.imread(srcCanvas);
+	let dst = new cv.Mat();
+	let srcPts = cv.matFromArray(4, 1, cv.CV_32FC2, [tl.x, tl.y, tr.x, tr.y, br.x, br.y, bl.x, bl.y]);
+	let dstPts = cv.matFromArray(4, 1, cv.CV_32FC2, [0, 0, outW, 0, outW, outH, 0, outH]);
+	let M = cv.getPerspectiveTransform(srcPts, dstPts);
+	cv.warpPerspective(src, dst, M, new cv.Size(outW, outH));
+
+	let outCanvas = document.createElement("canvas");
+	cv.imshow(outCanvas, dst);
+	for (let m of [src, dst, srcPts, dstPts, M]) m.delete();
+
+	return new Promise<Blob>((resolve, reject) => {
+		// PNG is lossless — critical for receipts and screenshots where JPEG
+		// compression would make text unreadable.
+		outCanvas.toBlob((b) => (b ? resolve(b) : reject(new Error("toBlob failed"))), "image/png");
+	});
+}
+
+/**
+ * Standalone replay handler for the "crop" action type.
+ * Corners are stored as relative (0–1) values so they work at any resolution.
+ */
+export async function replayCrop(imageUrl: string, params: Record<string, unknown>): Promise<Blob> {
+	await loadOpenCV();
+	let relCorners = params.corners as Quad;
+	return cropImageAtFullResolution(window.cv, imageUrl, relCorners);
+}

package/src/components/ImageEditor/plugins/redactPlugin/RedactContext.tsx

@@ -0,0 +1,23 @@
+import { createContext, useContext } from "react";
+
+import type { EditAction, ToolProviderProps } from "../../types.js";
+import { type RedactToolState, useRedactTool } from "./useRedactTool.js";
+
+interface RedactContextValue extends RedactToolState {
+	imageUrl: string;
+	onApply: (blob: Blob, actions: EditAction[]) => void;
+	onCancel: () => void;
+}
+
+let RedactContext = createContext<RedactContextValue | null>(null);
+
+export function RedactProvider({ imageUrl, onApply, onCancel, children }: ToolProviderProps) {
+	let state = useRedactTool(imageUrl);
+	return <RedactContext.Provider value={{ ...state, imageUrl, onApply, onCancel }}>{children}</RedactContext.Provider>;
+}
+
+export function useRedactContext(): RedactContextValue {
+	let ctx = useContext(RedactContext);
+	if (!ctx) throw new Error("useRedactContext must be used within RedactProvider");
+	return ctx;
+}

package/src/components/ImageEditor/plugins/redactPlugin/RedactOverlay.tsx

@@ -0,0 +1,144 @@
+import { useZoom } from "../zoomPlugin/ZoomContext.js";
+import { useRedactContext } from "./RedactContext.js";
+import { normRect } from "./useRedactTool.js";
+
+/**
+ * Canvas-area overlay for the redact tool.
+ * Uses an SVG layer over the image for drawing; blur preview uses SVG feGaussianBlur
+ * so the live preview matches the final applied output.
+ */
+export function RedactOverlay() {
+	let {
+		imageUrl,
+		rects,
+		drawing,
+		displaySize,
+		handleImageLoad,
+		startDrawing,
+		updateDrawing,
+		finishDrawing,
+		deleteRect,
+	} = useRedactContext();
+
+	let { zoom } = useZoom();
+	let inProgress = drawing ? normRect(drawing) : null;
+
+	function onPointerDown(e: React.PointerEvent<SVGSVGElement>) {
+		e.currentTarget.setPointerCapture(e.pointerId);
+		let b = e.currentTarget.getBoundingClientRect();
+		startDrawing((e.clientX - b.left) / zoom, (e.clientY - b.top) / zoom);
+	}
+
+	function onPointerMove(e: React.PointerEvent<SVGSVGElement>) {
+		if (!(e.buttons & 1)) return;
+		let b = e.currentTarget.getBoundingClientRect();
+		updateDrawing((e.clientX - b.left) / zoom, (e.clientY - b.top) / zoom);
+	}
+
+	return (
+		<div className="redact-root">
+			<div className="redact-inner">
+				<img src={imageUrl} alt="" className="redact-image" onLoad={handleImageLoad} draggable={false} />
+
+				{displaySize.width > 0 && (
+					<svg
+						className="redact-svg"
+						width={displaySize.width}
+						height={displaySize.height}
+						onPointerDown={onPointerDown}
+						onPointerMove={onPointerMove}
+						onPointerUp={finishDrawing}
+					>
+						<defs>
+							<filter id="redact-blur" x="-50%" y="-50%" width="200%" height="200%">
+								<feGaussianBlur stdDeviation="20" />
+							</filter>
+							{rects.map((_, i) => (
+								<clipPath key={i} id={`redact-clip-${i}`}>
+									<rect x={rects[i].x} y={rects[i].y} width={rects[i].w} height={rects[i].h} />
+								</clipPath>
+							))}
+							{inProgress && (
+								<clipPath id="redact-clip-inprogress">
+									<rect x={inProgress.x} y={inProgress.y} width={inProgress.w} height={inProgress.h} />
+								</clipPath>
+							)}
+						</defs>
+
+						{/* Blur each confirmed rect using the real image, clipped to the rect */}
+						{rects.map((r, i) => (
+							<g key={i}>
+								<image
+									href={imageUrl}
+									width={displaySize.width}
+									height={displaySize.height}
+									filter="url(#redact-blur)"
+									clipPath={`url(#redact-clip-${i})`}
+									style={{ pointerEvents: "none" }}
+								/>
+								{/* Semi-opaque overlay to prevent text from being readable through the blur */}
+								<rect
+									x={r.x}
+									y={r.y}
+									width={r.w}
+									height={r.h}
+									fill="rgba(128,128,128,0.85)"
+									style={{ pointerEvents: "none" }}
+								/>
+								{/* Dashed border + invisible hit area for deletion */}
+								<rect
+									x={r.x}
+									y={r.y}
+									width={r.w}
+									height={r.h}
+									fill="transparent"
+									stroke="rgba(255,255,255,0.6)"
+									strokeWidth={1.5}
+									strokeDasharray="5 3"
+									style={{ cursor: "pointer" }}
+									onClick={(e) => {
+										e.stopPropagation();
+										deleteRect(i);
+									}}
+								/>
+							</g>
+						))}
+
+						{/* In-progress rect */}
+						{inProgress && (
+							<>
+								<image
+									href={imageUrl}
+									width={displaySize.width}
+									height={displaySize.height}
+									filter="url(#redact-blur)"
+									clipPath="url(#redact-clip-inprogress)"
+									style={{ pointerEvents: "none" }}
+								/>
+								<rect
+									x={inProgress.x}
+									y={inProgress.y}
+									width={inProgress.w}
+									height={inProgress.h}
+									fill="rgba(128,128,128,0.85)"
+									style={{ pointerEvents: "none" }}
+								/>
+								<rect
+									x={inProgress.x}
+									y={inProgress.y}
+									width={inProgress.w}
+									height={inProgress.h}
+									fill="transparent"
+									stroke="rgba(255,255,255,0.6)"
+									strokeWidth={1.5}
+									strokeDasharray="5 3"
+									style={{ pointerEvents: "none" }}
+								/>
+							</>
+						)}
+					</svg>
+				)}
+			</div>
+		</div>
+	);
+}

package/src/components/ImageEditor/plugins/redactPlugin/RedactToolbar.tsx

@@ -0,0 +1,56 @@
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+import DeleteSweepIcon from "@mui/icons-material/DeleteSweep";
+import { Button, CircularProgress } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useState } from "react";
+
+import { useRedactContext } from "./RedactContext.js";
+
+/** Toolbar shown while the redact tool is active. Reads state from RedactContext. */
+export function RedactToolbar() {
+	let { rects, clearAll, applyRedact, onApply, onCancel } = useRedactContext();
+	let [applying, setApplying] = useState(false);
+
+	async function handleApply() {
+		if (rects.length === 0) {
+			onCancel();
+			return;
+		}
+		setApplying(true);
+		try {
+			let result = await applyRedact();
+			if (result) onApply(result.blob, result.actions);
+		} finally {
+			setApplying(false);
+		}
+	}
+
+	return (
+		<>
+			<div className="image-editor__toolbar-group">
+				<Button startIcon={<CloseIcon />} onClick={onCancel} color="inherit" disabled={applying}>
+					{getLocalizedString("Cancel")}
+				</Button>
+				<Button
+					startIcon={<DeleteSweepIcon />}
+					onClick={clearAll}
+					color="inherit"
+					disabled={applying || rects.length === 0}
+				>
+					{getLocalizedString("Clear all")}
+				</Button>
+			</div>
+			<div className="image-editor__toolbar-group">
+				<Button
+					variant="contained"
+					startIcon={applying ? <CircularProgress size={18} color="inherit" /> : <CheckIcon />}
+					onClick={handleApply}
+					disabled={applying}
+				>
+					{rects.length === 0 ? getLocalizedString("Done") : getLocalizedString("Apply redact")}
+				</Button>
+			</div>
+		</>
+	);
+}

package/src/components/ImageEditor/plugins/redactPlugin/index.ts

@@ -0,0 +1,20 @@
+import HideSourceIcon from "@mui/icons-material/HideSource";
+
+import type { ToolPlugin } from "../../types.js";
+import { RedactProvider } from "./RedactContext.js";
+import { RedactOverlay } from "./RedactOverlay.js";
+import { RedactToolbar } from "./RedactToolbar.js";
+import { replayRedactBlur } from "./useRedactTool.js";
+
+export { RedactOverlay, RedactProvider, RedactToolbar };
+
+export const redactPlugin: ToolPlugin = {
+	type: "tool",
+	id: "redact",
+	label: "Redact",
+	Icon: HideSourceIcon,
+	Provider: RedactProvider,
+	Overlay: RedactOverlay,
+	Toolbar: RedactToolbar,
+	actions: [{ type: "redact-blur", apply: replayRedactBlur }],
+};