@georeferencing/react 0.0.0-stage → 0.2.0

package/dist/panels/ImagePanel.js

@@ -0,0 +1,279 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { useGeoreferencer } from "../hooks/useGeoreferencer.js";
+import { identity } from "../localization.js";
+/**
+ * Image selection/drop, independent image navigation and source GCP picking. Display stretch affects the image panel only; it does not change export pixels.
+ *
+ * This composable panel subscribes to the controller but does not attach the reference map or install an unsaved-work guard; manage those in the host when composing panels yourself.
+ */
+export function ImagePanel({ 
+/** Shared authoritative editor controller; the panel does not own its lifecycle. */
+controller, 
+/** Optional translation function; defaults to returning English messages unchanged. */
+t = identity, 
+/** Show previous/next view history and linked image/map navigation. */
+navigation = true, 
+/** Show brightness, contrast and histogram display adjustment. */
+displayAdjustment = true, 
+/** Extra actions inside the empty drop zone, such as a sample image button. */
+emptyActions, }) {
+    const s = useGeoreferencer(controller), image = s.document.sourceImage, svg = useRef(null);
+    const view = s.imageView ?? [
+        0, 0, 100, 100,
+    ];
+    const setView = (next) => controller.setImageView(typeof next === "function" ? next(view) : next);
+    const [brightness, setBrightness] = useState(1), [contrast, setContrast] = useState(1), [histogram, setHistogram] = useState([]), [stretch, setStretch] = useState([
+        [0, 255],
+        [0, 255],
+        [0, 255],
+    ]);
+    const filterId = `rg-stretch-${useId().replace(/:/g, "")}`;
+    const displayPixels = useRef(null);
+    const stretchHistogram = (local) => {
+        const pixels = displayPixels.current;
+        if (!pixels || !image)
+            return;
+        const x0 = local
+            ? Math.max(0, Math.floor((view[0] * pixels.width) / image.width))
+            : 0, y0 = local
+            ? Math.max(0, Math.floor((view[1] * pixels.height) / image.height))
+            : 0, x1 = local
+            ? Math.min(pixels.width, Math.ceil(((view[0] + view[2]) * pixels.width) / image.width))
+            : pixels.width, y1 = local
+            ? Math.min(pixels.height, Math.ceil(((view[1] + view[3]) * pixels.height) / image.height))
+            : pixels.height;
+        const ranges = [
+            [255, 0],
+            [255, 0],
+            [255, 0],
+        ], bins = Array(32).fill(0);
+        for (let y = y0; y < y1; y++)
+            for (let x = x0; x < x1; x++) {
+                const i = (y * pixels.width + x) * 4;
+                if (!pixels.data[i + 3])
+                    continue;
+                for (let c = 0; c < 3; c++) {
+                    ranges[c][0] = Math.min(ranges[c][0], pixels.data[i + c]);
+                    ranges[c][1] = Math.max(ranges[c][1], pixels.data[i + c]);
+                }
+                bins[Math.min(31, Math.floor((pixels.data[i] + pixels.data[i + 1] + pixels.data[i + 2]) / 24))]++;
+            }
+        setStretch(ranges.map(([lo, hi]) => (hi > lo ? [lo, hi] : [0, 255])));
+        setHistogram(bins);
+    };
+    const drag = useRef(null);
+    const [dragPoint, setDragPoint] = useState(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Reset only when the immutable source image ID changes, not on document clones during edits.
+    useEffect(() => {
+        if (image)
+            controller.setImageView([
+                -image.width * 0.04,
+                -image.height * 0.06,
+                image.width * 1.08,
+                image.height * 1.12,
+            ]);
+        setBrightness(1);
+        setContrast(1);
+        setStretch([
+            [0, 255],
+            [0, 255],
+            [0, 255],
+        ]);
+    }, [image?.id, controller]);
+    useEffect(() => {
+        if (!s.imageUrl) {
+            setHistogram([]);
+            return;
+        }
+        let disposed = false;
+        const img = new Image();
+        img.onload = () => {
+            if (disposed)
+                return;
+            const canvas = document.createElement("canvas");
+            canvas.width = img.width;
+            canvas.height = img.height;
+            const ctx = canvas.getContext("2d");
+            ctx.drawImage(img, 0, 0);
+            displayPixels.current = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            const data = displayPixels.current.data, bins = Array(32).fill(0);
+            for (let i = 0; i < data.length; i += 4)
+                if (data[i + 3])
+                    bins[Math.min(31, Math.floor((data[i] + data[i + 1] + data[i + 2]) / 24))]++;
+            setHistogram(bins);
+            canvas.width = 0;
+        };
+        img.src = s.imageUrl;
+        return () => {
+            disposed = true;
+            displayPixels.current = null;
+            img.onload = null;
+            img.src = "";
+        };
+    }, [s.imageUrl]);
+    const point = (e) => {
+        const matrix = svg.current?.getScreenCTM();
+        if (!matrix)
+            return [0, 0];
+        const p = new DOMPoint(e.clientX, e.clientY).matrixTransform(matrix.inverse());
+        return [p.x, p.y];
+    };
+    // Read the latest view from the controller so rapid wheel events never use a stale render.
+    const zoom = (factor, center) => {
+        const v = controller.getSnapshot().imageView ?? view;
+        const c = center ?? [v[0] + v[2] / 2, v[1] + v[3] / 2];
+        controller.setImageView([
+            c[0] + (v[0] - c[0]) * factor,
+            c[1] + (v[1] - c[1]) * factor,
+            Math.max(1, v[2] * factor),
+            Math.max(1, v[3] * factor),
+        ]);
+    };
+    const zoomRef = useRef(zoom);
+    zoomRef.current = zoom;
+    const hasImage = Boolean(image);
+    // React registers wheel listeners as passive; a native one can stop the page scrolling.
+    useEffect(() => {
+        const element = svg.current;
+        if (!hasImage || !element)
+            return;
+        const wheel = (e) => {
+            e.preventDefault();
+            const matrix = element.getScreenCTM();
+            const center = matrix
+                ? new DOMPoint(e.clientX, e.clientY).matrixTransform(matrix.inverse())
+                : undefined;
+            zoomRef.current(e.deltaY > 0 ? 1.15 : 1 / 1.15, center ? [center.x, center.y] : undefined);
+        };
+        element.addEventListener("wheel", wheel, { passive: false });
+        return () => element.removeEventListener("wheel", wheel);
+    }, [hasImage]);
+    const down = (e) => {
+        if (!image)
+            return;
+        e.preventDefault();
+        e.currentTarget.focus({ preventScroll: true });
+        const p = point(e);
+        const inside = p[0] >= 0 && p[1] >= 0 && p[0] <= image.width && p[1] <= image.height;
+        // Dragging always pans; a click without movement places a point while matching.
+        drag.current = {
+            start: [e.clientX, e.clientY],
+            view,
+            pointerId: e.pointerId,
+            click: s.tool === "gcp" && e.button === 0 && !e.shiftKey && inside
+                ? p
+                : undefined,
+        };
+        e.currentTarget.setPointerCapture(e.pointerId);
+    };
+    return (_jsxs("section", { className: "rg-image-panel", "data-empty": image ? undefined : "", "aria-label": t("Source image"), onDragOver: (e) => e.preventDefault(), onDrop: (e) => {
+            e.preventDefault();
+            const file = e.dataTransfer.files[0];
+            if (file)
+                void controller.loadImage(file);
+        }, children: [_jsxs("div", { className: "rg-panel-heading", children: [_jsx("h2", { children: t("Source image") }), _jsxs("label", { className: "rg-file", children: [t(image ? "Replace image" : "Choose image"), _jsx("input", { "aria-label": t("Choose image"), type: "file", accept: "image/png,image/jpeg,image/webp,image/tiff,.tif,.tiff", onChange: (e) => {
+                                    const file = e.target.files?.[0];
+                                    if (file)
+                                        void controller.loadImage(file);
+                                    e.target.value = "";
+                                } })] })] }), image ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "rg-image-meta", children: [image.name, " \u00B7 ", image.width, " \u00D7 ", image.height, " px", image.georeferenced && (_jsxs("span", { children: [" ", "\u00B7 ", t("Existing georeferencing detected; not adopted")] }))] }), _jsxs("svg", { ref: svg, className: "rg-image-view", role: "img", 
+                        // biome-ignore lint/a11y/noNoninteractiveTabindex: This image viewer supports focused arrow-key panning and +/- zoom; numeric inputs provide GCP editing.
+                        tabIndex: 0, onKeyDown: (e) => {
+                            const steps = {
+                                ArrowLeft: [-0.1, 0],
+                                ArrowRight: [0.1, 0],
+                                ArrowUp: [0, -0.1],
+                                ArrowDown: [0, 0.1],
+                            };
+                            if (steps[e.key]) {
+                                e.preventDefault();
+                                const [x, y] = steps[e.key];
+                                setView([
+                                    view[0] + x * view[2],
+                                    view[1] + y * view[3],
+                                    view[2],
+                                    view[3],
+                                ]);
+                            }
+                            if (e.key === "+" || e.key === "=") {
+                                e.preventDefault();
+                                zoom(0.8);
+                            }
+                            if (e.key === "-") {
+                                e.preventDefault();
+                                zoom(1.25);
+                            }
+                        }, "aria-label": t("Image control point viewer; use numeric table for keyboard placement"), viewBox: view.join(" "), onPointerDown: down, onPointerMove: (e) => {
+                            const d = drag.current;
+                            if (!d)
+                                return;
+                            if (d.id) {
+                                d.point = point(e);
+                                setDragPoint({ id: d.id, point: d.point });
+                            }
+                            else {
+                                if (!d.moved &&
+                                    Math.hypot(e.clientX - d.start[0], e.clientY - d.start[1]) < 4)
+                                    return;
+                                d.moved = true;
+                                const scale = Math.max(view[2] / e.currentTarget.clientWidth, view[3] / e.currentTarget.clientHeight);
+                                setView([
+                                    d.view[0] - (e.clientX - d.start[0]) * scale,
+                                    d.view[1] - (e.clientY - d.start[1]) * scale,
+                                    d.view[2],
+                                    d.view[3],
+                                ]);
+                            }
+                        }, onPointerUp: (e) => {
+                            const d = drag.current;
+                            drag.current = null;
+                            if (d?.id && d.point)
+                                controller.updateGcp(d.id, { image: d.point });
+                            else if (d?.click && !d.moved)
+                                controller.setPendingPoint(d.click);
+                            setDragPoint(null);
+                            if (e.currentTarget.hasPointerCapture(e.pointerId))
+                                e.currentTarget.releasePointerCapture(e.pointerId);
+                        }, onPointerCancel: () => {
+                            drag.current = null;
+                            setDragPoint(null);
+                        }, children: [_jsx("defs", { children: _jsx("filter", { id: filterId, colorInterpolationFilters: "sRGB", children: _jsxs("feComponentTransfer", { children: [_jsx("feFuncR", { type: "linear", slope: 255 / (stretch[0][1] - stretch[0][0]), intercept: -stretch[0][0] / (stretch[0][1] - stretch[0][0]) }), _jsx("feFuncG", { type: "linear", slope: 255 / (stretch[1][1] - stretch[1][0]), intercept: -stretch[1][0] / (stretch[1][1] - stretch[1][0]) }), _jsx("feFuncB", { type: "linear", slope: 255 / (stretch[2][1] - stretch[2][0]), intercept: -stretch[2][0] / (stretch[2][1] - stretch[2][0]) })] }) }) }), s.imageUrl && (_jsx("image", { href: s.imageUrl, width: image.width, height: image.height, style: {
+                                    filter: `url(#${filterId}) brightness(${brightness}) contrast(${contrast})`,
+                                } })), s.document.gcps.map((gcp) => {
+                                const p = dragPoint?.id === gcp.id ? dragPoint.point : gcp.image;
+                                return (_jsxs("g", { transform: `translate(${p[0]} ${p[1]})`, onPointerDown: (e) => {
+                                        if (s.mode !== "align")
+                                            return;
+                                        e.stopPropagation();
+                                        e.preventDefault();
+                                        svg.current?.focus({ preventScroll: true });
+                                        drag.current = {
+                                            id: gcp.id,
+                                            start: p,
+                                            point: p,
+                                            view,
+                                            pointerId: e.pointerId,
+                                        };
+                                        svg.current.setPointerCapture(e.pointerId);
+                                    }, children: [_jsx("circle", { r: view[2] / 90, fill: gcp.enabled ? "#c95722" : "#666", stroke: "white", strokeWidth: view[2] / 450 }), _jsx("text", { y: -view[2] / 55, textAnchor: "middle", fill: "#132f29", stroke: "white", paintOrder: "stroke", strokeWidth: view[2] / 400, fontSize: view[2] / 35, children: gcp.label })] }, gcp.id));
+                            }), s.pendingImagePoint && (_jsx("circle", { cx: s.pendingImagePoint[0], cy: s.pendingImagePoint[1], r: view[2] / 70, fill: "none", stroke: "#12695b", strokeWidth: view[2] / 300 }))] }), _jsxs("div", { className: "rg-toolbar", children: [_jsx("button", { type: "button", onClick: () => zoom(0.8), "aria-label": t("Zoom image in"), children: "+" }), _jsx("button", { type: "button", onClick: () => zoom(1.25), "aria-label": t("Zoom image out"), children: "\u2212" }), _jsx("button", { type: "button", onClick: () => setView([
+                                    -image.width * 0.04,
+                                    -image.height * 0.06,
+                                    image.width * 1.08,
+                                    image.height * 1.12,
+                                ]), children: t("Fit image") }), navigation && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => controller.navigateImageHistory(-1), children: t("Previous image view") }), _jsx("button", { type: "button", onClick: () => controller.navigateImageHistory(1), children: t("Next image view") })] })), _jsx("button", { type: "button", onClick: () => void controller.removeImage(), children: t("Remove image") })] }), navigation && (_jsxs("label", { children: [t("Linked navigation"), _jsxs("select", { disabled: !s.fit, value: s.linkedNavigation, onChange: (e) => controller.setLinkedNavigation(e.target.value), children: [_jsx("option", { value: "off", children: t("Independent views") }), _jsx("option", { value: "image-to-map", children: t("Map follows image") }), _jsx("option", { value: "map-to-image", children: t("Image follows map") })] })] })), displayAdjustment && (_jsxs("details", { children: [_jsx("summary", { children: t("Display adjustment & histogram") }), _jsxs("div", { className: "rg-toolbar", children: [_jsx("button", { type: "button", onClick: () => stretchHistogram(false), children: t("Full histogram stretch") }), _jsx("button", { type: "button", onClick: () => stretchHistogram(true), children: t("Local histogram stretch") }), _jsx("button", { type: "button", onClick: () => {
+                                            setStretch([
+                                                [0, 255],
+                                                [0, 255],
+                                                [0, 255],
+                                            ]);
+                                            setBrightness(1);
+                                            setContrast(1);
+                                        }, children: t("Reset display") })] }), _jsxs("label", { children: [t("Brightness"), _jsx("input", { type: "range", min: "0.25", max: "2", step: "0.05", value: brightness, onChange: (e) => setBrightness(Number(e.target.value)) })] }), _jsxs("label", { children: [t("Contrast"), _jsx("input", { type: "range", min: "0.25", max: "2", step: "0.05", value: contrast, onChange: (e) => setContrast(Number(e.target.value)) })] }), _jsx("svg", { viewBox: "0 0 320 50", "aria-label": t("RGB intensity histogram of preview"), className: "rg-histogram", children: histogram.map((v, i) => (_jsx("rect", { x: i * 10, y: 50 - (50 * v) / Math.max(1, ...histogram), width: "9", height: (50 * v) / Math.max(1, ...histogram), fill: "currentColor" }, i))) }), _jsx("small", { children: t("Display only. Original samples are preserved for export.") })] }))] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "rg-image-meta", children: t("No image selected") }), _jsxs("div", { className: "rg-empty", children: [_jsx("span", { className: "rg-cross", children: "\uFF0B" }), _jsx("p", { children: t("Drop a map, plan, or photograph here.") }), _jsx("small", { children: t("PNG, JPEG, WebP, ordinary TIFF · up to 25 MiB · stays on this device") }), _jsxs("div", { className: "rg-toolbar rg-empty-actions", children: [_jsxs("label", { className: "rg-file rg-primary", children: [t("Choose image"), _jsx("input", { "aria-label": t("Choose image file"), type: "file", accept: "image/png,image/jpeg,image/webp,image/tiff,.tif,.tiff", onChange: (e) => {
+                                                    const file = e.target.files?.[0];
+                                                    if (file)
+                                                        void controller.loadImage(file);
+                                                    e.target.value = "";
+                                                } })] }), emptyActions] })] })] }))] }));
+}

package/dist/panels/PreviewControls.d.ts

@@ -0,0 +1,17 @@
+import type { GeoreferencerController } from "@georeferencing/core";
+import type { Translate } from "../localization.js";
+/**
+ * Explicit manual/automatic preview policy and run action. Automatic mode waits for
+ * enough complete, enabled pairs; the worker validates rank and domain. `onReview`
+ * fires only for a successful preview of the same document/alignment revision.
+ */
+export declare function PreviewControls({ controller, t, onReview, modeSelector, }: {
+    /** Shared authoritative controller. */
+    controller: GeoreferencerController;
+    /** Translate default English labels. */
+    t?: Translate;
+    /** Optional transition from matching into review after a current preview is ready. */
+    onReview?: () => void;
+    /** Show the manual/automatic preview selector. Defaults to true. */
+    modeSelector?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/panels/PreviewControls.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MODELS } from "@georeferencing/core";
+import { useGeoreferencer } from "../hooks/useGeoreferencer.js";
+import { identity } from "../localization.js";
+/**
+ * Explicit manual/automatic preview policy and run action. Automatic mode waits for
+ * enough complete, enabled pairs; the worker validates rank and domain. `onReview`
+ * fires only for a successful preview of the same document/alignment revision.
+ */
+export function PreviewControls({ controller, t = identity, onReview, modeSelector = true, }) {
+    const s = useGeoreferencer(controller), d = s.document;
+    const count = d.gcps.filter((p) => p.enabled).length;
+    const minimum = MODELS[d.model].minimum;
+    const missing = Math.max(0, minimum - count);
+    return (_jsxs("div", { className: "rg-preview-controls", children: [modeSelector && (_jsxs("label", { children: [t("Preview updates"), _jsxs("select", { value: s.previewMode, onChange: (e) => controller.setPreviewMode(e.target.value), children: [_jsx("option", { value: "manual", children: t("Manual") }), _jsx("option", { value: "automatic", children: t("Automatic") })] })] })), _jsxs("div", { children: [_jsx("button", { type: "button", className: "rg-primary", disabled: !s.imageUrl ||
+                            !!s.pendingImagePoint ||
+                            missing > 0 ||
+                            s.fitting === "running" ||
+                            s.mode === "draw", onClick: async () => {
+                            const id = d.id, revision = d.alignmentRevision;
+                            if (!s.fit || s.previewMode === "manual")
+                                await controller.refit();
+                            const current = controller.getSnapshot();
+                            if (current.document.id === id &&
+                                current.fitRevision === revision &&
+                                current.fit) {
+                                controller.setTool("navigate");
+                                onReview?.();
+                            }
+                        }, children: t(s.fitting === "running"
+                            ? "Running alignment…"
+                            : s.fit && s.previewMode === "automatic"
+                                ? "Review alignment"
+                                : "Run alignment") }), _jsx("small", { className: "rg-readiness", "aria-live": "polite", children: missing > 0
+                            ? `${count} ${t("of")} ${minimum} ${t("points matched")}`
+                            : `${count} ${t(count === 1 ? "point matched" : "points matched")} · ${t("more points improve accuracy")}` })] })] }));
+}

package/dist/panels/ReferencePanel.d.ts

@@ -0,0 +1,17 @@
+import type { GeoreferencerController } from "@georeferencing/core";
+import type { Translate } from "../localization.js";
+/**
+ * Accessible loading/error/partial-result feedback for configured references; returns null when no provider statuses exist.
+ *
+ * This composable panel subscribes to the controller but does not attach the reference map or install an unsaved-work guard; manage those in the host when composing panels yourself.
+ */
+export declare function ReferencePanel({ 
+/** Shared authoritative editor controller; the panel does not own its lifecycle. */
+controller, 
+/** Optional translation function; defaults to returning English messages unchanged. */
+t, }: {
+    /** Shared authoritative editor controller; the panel does not own its lifecycle. */
+    controller: GeoreferencerController;
+    /** Optional translation function; defaults to returning English messages unchanged. */
+    t?: Translate;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/panels/ReferencePanel.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useGeoreferencer } from "../hooks/useGeoreferencer.js";
+import { identity } from "../localization.js";
+/**
+ * Accessible loading/error/partial-result feedback for configured references; returns null when no provider statuses exist.
+ *
+ * This composable panel subscribes to the controller but does not attach the reference map or install an unsaved-work guard; manage those in the host when composing panels yourself.
+ */
+export function ReferencePanel({ 
+/** Shared authoritative editor controller; the panel does not own its lifecycle. */
+controller, 
+/** Optional translation function; defaults to returning English messages unchanged. */
+t = identity, }) {
+    const { references } = useGeoreferencer(controller);
+    if (!Object.keys(references).length)
+        return null;
+    return (_jsx("section", { className: "rg-references", "aria-label": t("Reference sources"), "aria-live": "polite", children: Object.entries(references).map(([id, status]) => (_jsxs("p", { className: status.state === "error" ? "rg-error" : "", children: [_jsx("strong", { children: status.label }), " · ", t(status.state === "loading"
+                    ? "Loading reference"
+                    : status.state === "error"
+                        ? "Reference unavailable"
+                        : status.partial
+                            ? "Incomplete reference results"
+                            : "Reference ready"), status.message && _jsxs(_Fragment, { children: [" \u00B7 ", t(status.message)] })] }, id))) }));
+}