@olenbetong/synergi-react 2.3.8 → 2.4.0

package/src/components/ImageEditor/CropCanvas.tsx

@@ -0,0 +1,100 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+
+import type { Quad } from "./useEdgeDetection.js";
+
+const MAX_DISPLAY_WIDTH = 1600;
+
+export interface CropCanvasHandle {
+	/** Returns a canvas with the clean image (no overlay) for use with cv.imread. */
+	getCleanCanvas(): HTMLCanvasElement | null;
+}
+
+interface Props {
+	imageUrl: string;
+	corners: Quad;
+	onReady?: (canvas: HTMLCanvasElement, width: number, height: number) => void;
+}
+
+function drawOverlay(ctx: CanvasRenderingContext2D, width: number, height: number, corners: Quad) {
+	let [tl, tr, br, bl] = corners;
+
+	ctx.save();
+
+	// Dark overlay with polygon cutout (even-odd fill rule creates a "window")
+	ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
+	ctx.beginPath();
+	ctx.rect(0, 0, width, height);
+	ctx.moveTo(tl.x, tl.y);
+	ctx.lineTo(tr.x, tr.y);
+	ctx.lineTo(br.x, br.y);
+	ctx.lineTo(bl.x, bl.y);
+	ctx.closePath();
+	ctx.fill("evenodd");
+
+	// Selection border
+	ctx.strokeStyle = "#2196f3";
+	ctx.lineWidth = Math.max(2, width * 0.003);
+	ctx.beginPath();
+	ctx.moveTo(tl.x, tl.y);
+	ctx.lineTo(tr.x, tr.y);
+	ctx.lineTo(br.x, br.y);
+	ctx.lineTo(bl.x, bl.y);
+	ctx.closePath();
+	ctx.stroke();
+
+	ctx.restore();
+}
+
+/**
+ * Renders the image on a canvas with a perspective-crop overlay.
+ * Exposes `getImageData()` so callers can extract pixels for off-thread processing.
+ */
+export let CropCanvas = forwardRef<CropCanvasHandle, Props>(function CropCanvas({ imageUrl, corners, onReady }, ref) {
+	let canvasRef = useRef<HTMLCanvasElement>(null);
+	let imageRef = useRef<HTMLImageElement | null>(null);
+
+	useEffect(() => {
+		let img = new Image();
+		img.onload = () => {
+			imageRef.current = img;
+			let canvas = canvasRef.current;
+			if (!canvas) return;
+
+			let scale = Math.min(1, MAX_DISPLAY_WIDTH / img.naturalWidth);
+			canvas.width = Math.round(img.naturalWidth * scale);
+			canvas.height = Math.round(img.naturalHeight * scale);
+
+			let ctx = canvas.getContext("2d");
+			ctx?.drawImage(img, 0, 0, canvas.width, canvas.height);
+			drawOverlay(ctx!, canvas.width, canvas.height, corners);
+			onReady?.(canvas, canvas.width, canvas.height);
+		};
+		img.src = imageUrl;
+	}, [imageUrl]); // eslint-disable-line react-hooks/exhaustive-deps
+
+	// Redraw overlay whenever corners change
+	useEffect(() => {
+		let canvas = canvasRef.current;
+		let img = imageRef.current;
+		if (!canvas || !img) return;
+		let ctx = canvas.getContext("2d");
+		if (!ctx) return;
+		ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+		drawOverlay(ctx, canvas.width, canvas.height, corners);
+	}, [corners]);
+
+	useImperativeHandle(ref, () => ({
+		getCleanCanvas(): HTMLCanvasElement | null {
+			let canvas = canvasRef.current;
+			let img = imageRef.current;
+			if (!canvas || !img) return null;
+			let clean = document.createElement("canvas");
+			clean.width = canvas.width;
+			clean.height = canvas.height;
+			clean.getContext("2d")?.drawImage(img, 0, 0, canvas.width, canvas.height);
+			return clean;
+		},
+	}));
+
+	return <canvas ref={canvasRef} style={{ display: "block", maxWidth: "100%", height: "auto" }} />;
+});

package/src/components/ImageEditor/DragHandle.tsx

@@ -0,0 +1,65 @@
+import { useZoom } from "./plugins/zoomPlugin/ZoomContext.js";
+
+interface Props {
+	x: number;
+	y: number;
+	/** Called with new position in pixels (relative to container). */
+	onChange: (x: number, y: number) => void;
+	containerWidth: number;
+	containerHeight: number;
+}
+
+/**
+ * Absolutely-positioned draggable corner handle.
+ * Position is in CSS pixels relative to the nearest `position: relative` ancestor.
+ */
+export function DragHandle({ x, y, onChange, containerWidth, containerHeight }: Props) {
+	let { zoom } = useZoom();
+
+	function onPointerDown(e: React.PointerEvent<HTMLDivElement>) {
+		e.currentTarget.setPointerCapture(e.pointerId);
+	}
+
+	function onPointerMove(e: React.PointerEvent<HTMLDivElement>) {
+		if (!(e.buttons & 1)) return;
+
+		let container = e.currentTarget.parentElement;
+		if (!container) return;
+
+		// getBoundingClientRect() returns screen-space coords (affected by CSS transform/zoom).
+		// Divide by zoom to convert back to CSS-pixel space (the space onChange expects).
+		let rect = container.getBoundingClientRect();
+		let newX = Math.max(0, Math.min(containerWidth, (e.clientX - rect.left) / zoom));
+		let newY = Math.max(0, Math.min(containerHeight, (e.clientY - rect.top) / zoom));
+		onChange(newX, newY);
+	}
+
+	return (
+		<div
+			tabIndex={0}
+			role="slider"
+			aria-label="Corner handle"
+			aria-valuenow={Math.round(x)}
+			aria-valuemin={0}
+			aria-valuemax={containerWidth}
+			className="drag-handle"
+			style={{
+				position: "absolute",
+				left: x,
+				top: y,
+				transform: "translate(-50%, -50%)",
+				width: 28,
+				height: 28,
+				borderRadius: "50%",
+				background: "rgba(33, 150, 243, 0.9)",
+				border: "3px solid white",
+				boxShadow: "0 2px 8px rgba(0,0,0,0.4)",
+				cursor: "grab",
+				touchAction: "none",
+				zIndex: 10,
+			}}
+			onPointerDown={onPointerDown}
+			onPointerMove={onPointerMove}
+		/>
+	);
+}

package/src/components/ImageEditor/EdgeHandle.tsx

@@ -0,0 +1,65 @@
+import { useRef } from "react";
+import { useZoom } from "./plugins/zoomPlugin/ZoomContext.js";
+
+interface Props {
+	/** CSS-pixel position of the handle center, relative to the crop-inner container. */
+	x: number;
+	y: number;
+	/** Controls cursor style and handle orientation only — movement is unconstrained (delta-based). */
+	axis: "x" | "y";
+	/** Called with the pointer delta in CSS pixels so both corners can be shifted equally. */
+	onChange: (dx: number, dy: number) => void;
+}
+
+/**
+ * Absolutely-positioned draggable edge handle.
+ * Tracks the pointer delta so both corners on this edge move by the same amount,
+ * preserving the edge angle.
+ */
+export function EdgeHandle({ x, y, axis, onChange }: Props) {
+	let { zoom } = useZoom();
+	let lastPos = useRef<{ x: number; y: number } | null>(null);
+
+	function onPointerDown(e: React.PointerEvent<HTMLDivElement>) {
+		e.currentTarget.setPointerCapture(e.pointerId);
+		lastPos.current = { x: e.clientX, y: e.clientY };
+	}
+
+	function onPointerMove(e: React.PointerEvent<HTMLDivElement>) {
+		if (!(e.buttons & 1) || !lastPos.current) return;
+
+		// Convert screen-space delta to CSS-pixel delta by dividing by zoom.
+		let dx = (e.clientX - lastPos.current.x) / zoom;
+		let dy = (e.clientY - lastPos.current.y) / zoom;
+		lastPos.current = { x: e.clientX, y: e.clientY };
+		onChange(dx, dy);
+	}
+
+	function onPointerUp() {
+		lastPos.current = null;
+	}
+
+	return (
+		<div
+			className="edge-handle"
+			style={{
+				position: "absolute",
+				left: x,
+				top: y,
+				transform: "translate(-50%, -50%)",
+				width: axis === "x" ? 6 : 32,
+				height: axis === "x" ? 32 : 6,
+				borderRadius: 3,
+				background: "rgba(33, 150, 243, 0.85)",
+				border: "2px solid white",
+				boxShadow: "0 2px 6px rgba(0,0,0,0.35)",
+				cursor: axis === "x" ? "ew-resize" : "ns-resize",
+				touchAction: "none",
+				zIndex: 9,
+			}}
+			onPointerDown={onPointerDown}
+			onPointerMove={onPointerMove}
+			onPointerUp={onPointerUp}
+		/>
+	);
+}

package/src/components/ImageEditor/ImageEditor.css

@@ -0,0 +1,224 @@
+.image-editor {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	background: #111;
+	color: white;
+}
+
+.image-editor__topbar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 1rem;
+	padding: 0.5rem 1rem;
+	background: rgba(0, 0, 0, 0.4);
+	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.image-editor__canvas {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	overflow: hidden;
+}
+
+.image-editor__replay-overlay {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgba(0, 0, 0, 0.4);
+	color: white;
+	z-index: 10;
+	border-radius: 4px;
+}
+
+.image-editor__img {
+	max-width: 100%;
+	max-height: calc(100dvh - 160px); /* fallback when not inside zoom-canvas */
+	object-fit: contain;
+	border-radius: 4px;
+	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
+	pointer-events: none;
+	user-select: none;
+}
+
+.image-editor__toolbar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0.75rem 1rem;
+	background: #1a1a1a;
+	border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.image-editor__toolbar-group {
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+	flex-wrap: wrap;
+}
+
+.image-editor__topbar-divider {
+	width: 1px;
+	height: 1.5rem;
+	background: rgba(255, 255, 255, 0.15);
+	flex-shrink: 0;
+}
+
+.image-editor__zoom-level {
+	font-size: 0.8125rem;
+	color: rgba(255, 255, 255, 0.6);
+	min-width: 3.25ch;
+	text-align: center;
+	font-variant-numeric: tabular-nums;
+}
+
+/* ── Zoom canvas ─────────────────────────────────────────────── */
+
+.zoom-canvas-root {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+	touch-action: none;
+	cursor: grab;
+	user-select: none;
+	/* Named size container so descendants can use cqh/cqw units. */
+	container-type: size;
+	container-name: zoom-canvas;
+}
+
+.zoom-canvas-root:active {
+	cursor: grabbing;
+}
+
+.zoom-canvas-inner {
+	transform-origin: center;
+	padding: 1rem;
+}
+
+/*
+ * Size all editor content relative to the canvas container rather than the
+ * viewport. cqh/cqw refer to zoom-canvas-root which has known dimensions
+ * (position: absolute; inset: 0), bypassing the percentage-height chain problem.
+ *
+ * Subtract padding so the element fits within its visual parent:
+ *   • 2rem  = zoom-canvas-inner top + bottom padding (1rem each)
+ *   • 32px  = crop-root top + bottom padding (16px each)
+ *   • 4rem  = zoom-canvas-inner + redact-root padding (2 × 2rem)
+ */
+@container zoom-canvas (min-height: 1px) {
+	.image-editor__img {
+		max-height: calc(100cqh - 2rem);
+	}
+
+	.crop-root {
+		max-height: calc(100cqh - 2rem);
+	}
+
+	/* Canvas has an intrinsic aspect ratio from its width/height attrs,
+	   so both max constraints scale it to fit like an <img>. */
+	.crop-inner canvas {
+		max-height: calc(100cqh - 2rem - 32px);
+		width: auto;
+	}
+
+	.redact-image {
+		max-height: calc(100cqh - 4rem);
+	}
+}
+
+/* ── Crop plugin ─────────────────────────────────────────────── */
+
+.crop-root {
+	position: relative;
+	width: 100%;
+	max-width: 900px;
+	max-height: calc(100dvh - 160px); /* fallback when not inside zoom-canvas */
+	/* Handles at the image corners are 28px circles — reserve half their size as padding
+	   so they're never clipped at the edges. */
+	padding: 16px;
+	box-sizing: border-box;
+	background: #111;
+	touch-action: none;
+}
+
+.crop-inner {
+	position: relative;
+	display: inline-block;
+	line-height: 0; /* remove gap under canvas */
+}
+
+/* ── Redact plugin ───────────────────────────────────────────── */
+
+.redact-root {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	padding: 1rem;
+}
+
+.redact-inner {
+	position: relative;
+	display: inline-block;
+	line-height: 0;
+}
+
+.redact-image {
+	max-width: 100%;
+	max-height: calc(100dvh - 160px); /* fallback when not inside zoom-canvas */
+	display: block;
+	user-select: none;
+}
+
+.redact-svg {
+	position: absolute;
+	inset: 0;
+	cursor: crosshair;
+	touch-action: none;
+}
+
+/* ── Handle hit-area expansion ───────────────────────────────── */
+/* Invisible ::before expands the touch target without affecting layout */
+
+.drag-handle::before {
+	content: "";
+	position: absolute;
+	inset: -12px; /* 28px visual → 52px hit area */
+}
+
+.edge-handle::before {
+	content: "";
+	position: absolute;
+	/* Expand whichever dimension is thin (6px) to ≥44px hit area */
+	inset: -19px;
+}
+
+.crop-loading {
+	align-items: center;
+	justify-content: center;
+	gap: 0.75rem;
+	padding: 0.75rem 1rem;
+	color: rgba(255, 255, 255, 0.7);
+	position: absolute;
+	inset: auto 0 0 0;
+	background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
+}
+
+.LayoutSmall-root {
+	height: 100dvh;
+	overflow: hidden;
+}
+
+.LayoutSmall-root {
+	display: grid;
+	grid-template-rows: auto 1fr;
+}