@olenbetong/synergi-react 2.3.8 → 2.4.0

package/src/components/ImageEditor/useImageHistory.ts

@@ -0,0 +1,189 @@
+import { useEffect, useRef, useState } from "react";
+
+import type { ActionRegistry, EditAction } from "./types.js";
+
+interface HistoryState {
+	past: EditAction[][];
+	future: EditAction[][];
+}
+
+interface CurrentState {
+	url: string;
+	blob: Blob | null;
+	/** True if `url` is an object URL we created and must eventually revoke. */
+	generated: boolean;
+}
+
+export interface UseImageHistoryResult {
+	currentImageUrl: string;
+	currentBlob: Blob | null;
+	canUndo: boolean;
+	canRedo: boolean;
+	/** True while an async replay (undo/redo) is in progress. */
+	replaying: boolean;
+	applyActions: (blob: Blob, actions: EditAction[]) => void;
+	undo: () => void;
+	redo: () => void;
+	reset: () => void;
+}
+
+/**
+ * Manages undo/redo history for the image editor using action replay.
+ *
+ * Only action lists are stored — no intermediate blobs. Undo/redo replays
+ * all remaining actions from the source image, keeping memory usage minimal
+ * regardless of history depth. Only one blob is in memory at a time.
+ */
+export function useImageHistory(sourceUrl: string, registry: ActionRegistry): UseImageHistoryResult {
+	let [history, setHistory] = useState<HistoryState>({ past: [], future: [] });
+	let [current, setCurrent] = useState<CurrentState>({ url: sourceUrl, blob: null, generated: false });
+	let [replaying, setReplaying] = useState(false);
+
+	let historyRef = useRef(history);
+	historyRef.current = history;
+	let currentRef = useRef(current);
+	currentRef.current = current;
+	let isReplaying = useRef(false);
+	let replayAbort = useRef<AbortController | null>(null);
+
+	// When source changes (e.g. component remount with new image), reset fully.
+	useEffect(() => {
+		replayAbort.current?.abort();
+		isReplaying.current = false;
+		setReplaying(false);
+		setCurrent((prev) => {
+			if (prev.generated) URL.revokeObjectURL(prev.url);
+			return { url: sourceUrl, blob: null, generated: false };
+		});
+		setHistory({ past: [], future: [] });
+	}, [sourceUrl]);
+
+	useEffect(() => {
+		return () => {
+			if (currentRef.current.generated) URL.revokeObjectURL(currentRef.current.url);
+			replayAbort.current?.abort();
+		};
+	}, []);
+
+	function applyActions(blob: Blob, actions: EditAction[]) {
+		// A direct apply always takes priority — abort any in-flight replay.
+		replayAbort.current?.abort();
+		isReplaying.current = false;
+		setReplaying(false);
+
+		let newUrl = URL.createObjectURL(blob);
+		setCurrent((prev) => {
+			if (prev.generated) URL.revokeObjectURL(prev.url);
+			return { url: newUrl, blob, generated: true };
+		});
+		setHistory((prev) => ({ past: [...prev.past, actions], future: [] }));
+	}
+
+	async function doReplay(newPast: EditAction[][], newFuture: EditAction[][]) {
+		replayAbort.current?.abort();
+		let abort = new AbortController();
+		replayAbort.current = abort;
+		isReplaying.current = true;
+		setReplaying(true);
+
+		try {
+			let result = await replayAll(sourceUrl, newPast, registry, abort.signal);
+			if (abort.signal.aborted) return;
+
+			setCurrent((prev) => {
+				if (prev.generated) URL.revokeObjectURL(prev.url);
+				if (result) return { url: result.url, blob: result.blob, generated: true };
+				return { url: sourceUrl, blob: null, generated: false };
+			});
+			setHistory({ past: newPast, future: newFuture });
+		} finally {
+			if (!abort.signal.aborted) {
+				isReplaying.current = false;
+				setReplaying(false);
+			}
+		}
+	}
+
+	function undo() {
+		if (isReplaying.current) return;
+		let { past, future } = historyRef.current;
+		if (past.length === 0) return;
+		doReplay(past.slice(0, -1), [past.at(-1)!, ...future]);
+	}
+
+	function redo() {
+		if (isReplaying.current) return;
+		let { past, future } = historyRef.current;
+		if (future.length === 0) return;
+		doReplay([...past, future[0]], future.slice(1));
+	}
+
+	function reset() {
+		replayAbort.current?.abort();
+		isReplaying.current = false;
+		setReplaying(false);
+		setCurrent((prev) => {
+			if (prev.generated) URL.revokeObjectURL(prev.url);
+			return { url: sourceUrl, blob: null, generated: false };
+		});
+		setHistory({ past: [], future: [] });
+	}
+
+	return {
+		currentImageUrl: current.url,
+		currentBlob: current.blob,
+		canUndo: history.past.length > 0,
+		canRedo: history.future.length > 0,
+		replaying,
+		applyActions,
+		undo,
+		redo,
+		reset,
+	};
+}
+
+/**
+ * Replays a sequence of action groups from a source URL.
+ * Intermediate object URLs are revoked as soon as a new step succeeds.
+ * Returns the final `{ url, blob }` or `null` if there were no actions.
+ */
+async function replayAll(
+	sourceUrl: string,
+	actionGroups: EditAction[][],
+	registry: ActionRegistry,
+	signal: AbortSignal,
+): Promise<{ url: string; blob: Blob } | null> {
+	let prevUrl = sourceUrl;
+	let prevGenerated = false;
+	let lastBlob: Blob | null = null;
+
+	for (let group of actionGroups) {
+		for (let action of group) {
+			if (signal.aborted) {
+				if (prevGenerated) URL.revokeObjectURL(prevUrl);
+				return null;
+			}
+
+			let apply = registry.get(action.type);
+			if (!apply) {
+				console.warn(`[ImageHistory] No replay handler for action type "${action.type}" — skipping`);
+				continue;
+			}
+
+			let blob = await apply(prevUrl, action.params);
+
+			if (signal.aborted) {
+				if (prevGenerated) URL.revokeObjectURL(prevUrl);
+				return null;
+			}
+
+			if (prevGenerated) URL.revokeObjectURL(prevUrl);
+			lastBlob = blob;
+			prevUrl = URL.createObjectURL(blob);
+			prevGenerated = true;
+		}
+	}
+
+	if (!lastBlob || !prevGenerated) return null;
+	return { url: prevUrl, blob: lastBlob };
+}

package/src/components/ImageEditor/useOpenCV.ts

@@ -0,0 +1,134 @@
+import { useEffect, useState } from "react";
+
+let loadPromise: Promise<unknown> | null = null;
+
+declare global {
+	interface Window {
+		cv: any;
+	}
+}
+
+function waitForCvMat(timeoutMs = 30_000): Promise<void> {
+	return new Promise((resolve, reject) => {
+		let elapsed = 0;
+		let interval = setInterval(() => {
+			console.log("[OpenCV] polling... cv=", typeof window.cv, "cv.Mat=", typeof window.cv?.Mat);
+			// cv.Mat signals that the WASM runtime has fully initialised
+			if (window.cv?.Mat) {
+				clearInterval(interval);
+				console.log("[OpenCV] cv.Mat found — ready!");
+				resolve(); // callers read window.cv directly
+				return;
+			}
+			elapsed += 100;
+			if (elapsed >= timeoutMs) {
+				clearInterval(interval);
+				reject(new Error("OpenCV.js initialisation timed out"));
+			}
+		}, 100);
+	});
+}
+
+export function loadOpenCV(): Promise<unknown> {
+	if (loadPromise) {
+		console.log("[OpenCV] loadOpenCV() — reusing existing promise");
+		return loadPromise;
+	}
+
+	// Already initialised (e.g. hot-reload)
+	if (window.cv?.Mat) {
+		console.log("[OpenCV] already initialised on window.cv");
+		loadPromise = Promise.resolve(window.cv);
+		return loadPromise;
+	}
+
+	console.log("[OpenCV] injecting script tag...");
+	loadPromise = new Promise<unknown>((resolve, reject) => {
+		let script = document.createElement("script");
+		script.src = "https://docs.opencv.org/4.10.0/opencv.js";
+		script.async = true;
+
+		script.onload = () => {
+			console.log(
+				"[OpenCV] script onload fired. typeof window.cv=",
+				typeof window.cv,
+				"cv?.then=",
+				typeof window.cv?.then,
+				"cv?.Mat=",
+				typeof window.cv?.Mat,
+			);
+			if (typeof window.cv?.then === "function") {
+				console.log("[OpenCV] promise-based build detected, awaiting cv...");
+				// Emscripten promise-based build: cv itself is the promise.
+				// IMPORTANT: we must NOT pass `instance` into resolve() — if the resolved
+				// value is itself thenable, Promise will follow it forever and never settle.
+				// Instead we mutate window.cv and signal readiness with undefined.
+				(window.cv as Promise<unknown>).then(
+					(instance) => {
+						console.log(
+							"[OpenCV] promise resolved, instance=",
+							typeof instance,
+							"hasReadMethod=",
+							typeof (instance as any)?.imread,
+						);
+						window.cv = instance;
+						resolve(undefined); // signal only; callers read window.cv
+					},
+					(err) => {
+						console.error("[OpenCV] promise rejected", err);
+						reject(err);
+					},
+				);
+			} else {
+				console.log("[OpenCV] polling-based build, starting waitForCvMat...");
+				// Polling build: WASM initialises asynchronously after script loads
+				waitForCvMat().then(() => resolve(undefined), reject);
+			}
+		};
+
+		script.onerror = (err) => {
+			console.error("[OpenCV] script load error", err);
+			loadPromise = null;
+			reject(new Error("Failed to load OpenCV.js"));
+		};
+
+		document.head.appendChild(script);
+	});
+
+	return loadPromise;
+}
+
+interface UseOpenCVResult {
+	cv: any | null;
+	ready: boolean;
+	error: Error | null;
+}
+
+/** Lazily loads OpenCV.js from CDN. Starts loading only when `enabled` is true. */
+export function useOpenCV(enabled = true): UseOpenCVResult {
+	let [cv, setCv] = useState<any | null>(null);
+	let [ready, setReady] = useState(false);
+	let [error, setError] = useState<Error | null>(null);
+
+	useEffect(() => {
+		if (!enabled) return;
+		console.log("[useOpenCV] enabled=true, calling loadOpenCV()");
+		loadOpenCV()
+			.then(() => {
+				console.log(
+					"[useOpenCV] loadOpenCV resolved. window.cv=",
+					typeof window.cv,
+					"imread=",
+					typeof window.cv?.imread,
+				);
+				setCv(window.cv);
+				setReady(true);
+			})
+			.catch((err: Error) => {
+				console.error("[useOpenCV] loadOpenCV rejected:", err);
+				setError(err);
+			});
+	}, [enabled]);
+
+	return { cv, ready, error };
+}

package/src/components/MergeProgressDialog/index.tsx

@@ -0,0 +1,249 @@
+import { Box, Button, DialogActions, LinearProgress, Link, Typography } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { ResponsiveDialog } from "@olenbetong/appframe-mui";
+import { useEffect, useRef, useState } from "react";
+
+export type MergeProgressDialogProps = {
+	open: boolean;
+	onClose: () => void;
+	/** Called once when the dialog opens; should return the merger ID for the start route */
+	getMergerId: () => Promise<string | number>;
+	mergeType?: "pdf" | "zip";
+};
+
+type MergePhase =
+	| { kind: "preparing" }
+	| { kind: "processing"; completed: number; total: number; currentFile: string; startedAt: number }
+	| { kind: "completed"; jobId: string; fileName: string }
+	| { kind: "failed"; error: string };
+
+function formatRemaining(ms: number) {
+	if (ms < 60_000) return `~${Math.ceil(ms / 1000)}s`;
+	let mins = Math.floor(ms / 60_000);
+	let secs = Math.ceil((ms % 60_000) / 1000);
+	return secs > 0 ? `~${mins}m ${secs}s` : `~${mins}m`;
+}
+
+export function MergeProgressDialog({ open, onClose, getMergerId, mergeType = "pdf" }: MergeProgressDialogProps) {
+	let [phase, setPhase] = useState<MergePhase>({ kind: "preparing" });
+	let [now, setNow] = useState(Date.now);
+	let esRef = useRef<EventSource | null>(null);
+	let doneRef = useRef(false);
+
+	// Tick every second while processing to recompute the time estimate
+	useEffect(() => {
+		if (phase.kind !== "processing") return;
+		let timer = setInterval(() => setNow(Date.now()), 1000);
+		return () => clearInterval(timer);
+	}, [phase.kind]);
+
+	// Start the merge job each time the dialog opens
+	// biome-ignore lint/correctness/useExhaustiveDependencies: intentionally only re-runs on open change
+	useEffect(() => {
+		if (!open) return;
+
+		setPhase({ kind: "preparing" });
+		doneRef.current = false;
+
+		let cancelled = false;
+		let es: EventSource | null = null;
+
+		async function start() {
+			try {
+				let mergerId = await getMergerId();
+				if (cancelled) return;
+
+				let response = await fetch(`/api/ob/merger/start/${mergerId}/${mergeType}`, { method: "POST" });
+				if (!response.ok) throw new Error(`${response.status} ${response.statusText}`);
+				let { jobId } = await response.json();
+				if (cancelled) return;
+
+				es = new EventSource(`/api/ob/merger/events/${jobId}`);
+				esRef.current = es;
+
+				es.addEventListener("progress", (e) => {
+					let d = JSON.parse((e as MessageEvent).data);
+					setPhase((prev) => ({
+						kind: "processing",
+						completed: d.completed,
+						total: d.total,
+						currentFile: d.currentFile ?? "",
+						startedAt: prev.kind === "processing" ? prev.startedAt : Date.now(),
+					}));
+					setNow(Date.now());
+				});
+
+				es.addEventListener("done", (e) => {
+					doneRef.current = true;
+					es?.close();
+					let d = JSON.parse((e as MessageEvent).data);
+					setPhase({ kind: "completed", jobId, fileName: d.fileName ?? "" });
+					window.open(`/api/ob/merger/download/${jobId}`);
+				});
+
+				// Catches both server-sent "event: error" and connection errors.
+				// After a "done" event the server closes the stream, which also fires error —
+				// doneRef guards against treating that as a failure.
+				es.addEventListener("error", (e) => {
+					if (doneRef.current) return;
+					es?.close();
+					let message = getLocalizedString("Unknown error");
+					let data = (e as MessageEvent).data;
+					if (data) {
+						try {
+							message = JSON.parse(data).message ?? message;
+						} catch {}
+					}
+					setPhase({ kind: "failed", error: message });
+				});
+			} catch (err: unknown) {
+				if (!cancelled) {
+					setPhase({ kind: "failed", error: (err as Error)?.message ?? String(err) });
+				}
+			}
+		}
+
+		start();
+
+		return () => {
+			cancelled = true;
+			es?.close();
+			esRef.current = null;
+		};
+	}, [open]);
+
+	function handleClose() {
+		esRef.current?.close();
+		esRef.current = null;
+		onClose();
+	}
+
+	let pct = 0;
+	let remaining: string | null = null;
+
+	if (phase.kind === "processing" && phase.total > 0) {
+		pct = Math.round((phase.completed / phase.total) * 100);
+		if (phase.completed > 0) {
+			let elapsed = now - phase.startedAt;
+			let msPerFile = elapsed / phase.completed;
+			let remainingMs = msPerFile * (phase.total - phase.completed);
+			remaining = formatRemaining(remainingMs);
+		}
+	}
+
+	let title =
+		phase.kind === "completed"
+			? getLocalizedString("Merge complete")
+			: phase.kind === "failed"
+				? getLocalizedString("Merge failed")
+				: getLocalizedString("Merging drawings");
+
+	let canClose = phase.kind === "completed" || phase.kind === "failed";
+
+	return (
+		<ResponsiveDialog
+			open={open}
+			onClose={canClose ? handleClose : undefined}
+			title={title}
+			maxWidth="sm"
+			fullWidth
+			slotProps={{
+				transition: {
+					mountOnEnter: true,
+					unmountOnExit: true,
+				},
+			}}
+		>
+			<Box sx={{ px: 3, pb: 1 }}>
+				{(phase.kind === "preparing" || phase.kind === "processing") && (
+					<LinearProgress
+						variant={phase.kind === "preparing" || phase.total === 0 ? "indeterminate" : "determinate"}
+						value={pct}
+						sx={{ mb: 1.5 }}
+					/>
+				)}
+
+				{phase.kind === "preparing" && (
+					<Typography
+						variant="body2"
+						sx={{
+							color: "text.secondary",
+						}}
+					>
+						{getLocalizedString("Starting merge job…")}
+					</Typography>
+				)}
+
+				{phase.kind === "processing" && (
+					<>
+						<Typography variant="body2">
+							{phase.completed} / {phase.total} {getLocalizedString("files")}
+							{remaining && (
+								<Typography
+									component="span"
+									variant="body2"
+									sx={{
+										color: "text.secondary",
+									}}
+								>
+									{" "}
+									— {remaining}
+								</Typography>
+							)}
+						</Typography>
+						{phase.currentFile && (
+							<Typography
+								variant="body2"
+								noWrap
+								title={phase.currentFile}
+								sx={{
+									color: "text.secondary",
+									mt: 0.5,
+								}}
+							>
+								{phase.currentFile}
+							</Typography>
+						)}
+					</>
+				)}
+
+				{phase.kind === "completed" && (
+					<>
+						<Typography
+							variant="body2"
+							sx={{
+								color: "success.main",
+							}}
+						>
+							{getLocalizedString("Download started. You can close this dialog.")}
+						</Typography>
+						<Typography
+							variant="body2"
+							sx={{
+								color: "text.secondary",
+								mt: 1,
+							}}
+						>
+							{getLocalizedString("If the file did not open automatically, ")}{" "}
+							<Link href={`/api/ob/merger/download/${phase.jobId}`} target="_blank" rel="noopener noreferrer">
+								{getLocalizedString("click here to open it")}
+							</Link>
+							.
+						</Typography>
+					</>
+				)}
+
+				{phase.kind === "failed" && (
+					<Typography variant="body2" color="error">
+						{phase.error}
+					</Typography>
+				)}
+			</Box>
+			<DialogActions>
+				<Button onClick={handleClose} disabled={!canClose}>
+					{getLocalizedString("Close")}
+				</Button>
+			</DialogActions>
+		</ResponsiveDialog>
+	);
+}

package/src/components/PdfViewer/PdfViewer.css

@@ -0,0 +1,12 @@
+.pdfViewerContainer {
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+}
+
+.pdfViewerContent {
+	width: max-content;
+	/* Center the PDF horizontally within the scroll container */
+	margin-left: auto;
+	margin-right: auto;
+}