@webiny/admin-ui 6.4.11 → 6.6.0-alpha.1

package/ImageEditor/CropHotspotEditor.js

@@ -0,0 +1,402 @@
+import react, { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Select } from "../Select/index.js";
+import { Text } from "../Text/index.js";
+import { SectionLabel } from "./SectionLabel.js";
+import { DEFAULT_ASPECT_RATIOS } from "./types.js";
+const MIN = 0.05;
+const FREE = "free";
+const inferAspectId = (crop, width, height)=>{
+    if (!crop || !width || !height) return FREE;
+    const cropWidth = Math.max(0, 1 - (crop.left ?? 0) - (crop.right ?? 0));
+    const cropHeight = Math.max(0, 1 - (crop.top ?? 0) - (crop.bottom ?? 0));
+    if (cropWidth <= 0 || cropHeight <= 0) return FREE;
+    const displayRatio = cropWidth * width / (cropHeight * height);
+    const match = DEFAULT_ASPECT_RATIOS.find((ar)=>Math.abs(ar.ratio - displayRatio) < 0.02);
+    return match?.id ?? FREE;
+};
+const MAX_CANVAS_WIDTH = 640;
+const MAX_CANVAS_HEIGHT = 460;
+const clamp01 = (n)=>Math.min(1, Math.max(0, n));
+const cropToEdges = (crop)=>({
+        left: clamp01(crop?.left ?? 0),
+        top: clamp01(crop?.top ?? 0),
+        right: 1 - clamp01(crop?.right ?? 0),
+        bottom: 1 - clamp01(crop?.bottom ?? 0)
+    });
+const edgesToCrop = (e)=>({
+        top: e.top,
+        left: e.left,
+        bottom: 1 - e.bottom,
+        right: 1 - e.right
+    });
+const HANDLE_EDGES = {
+    nw: [
+        "top",
+        "left"
+    ],
+    n: [
+        "top"
+    ],
+    ne: [
+        "top",
+        "right"
+    ],
+    e: [
+        "right"
+    ],
+    se: [
+        "bottom",
+        "right"
+    ],
+    s: [
+        "bottom"
+    ],
+    sw: [
+        "bottom",
+        "left"
+    ],
+    w: [
+        "left"
+    ]
+};
+const CORNER_HANDLES = [
+    "nw",
+    "ne",
+    "se",
+    "sw"
+];
+const EDGE_HANDLES = [
+    "n",
+    "e",
+    "s",
+    "w"
+];
+const clampHotspot = (h, e)=>({
+        x: Math.min(e.right, Math.max(e.left, h?.x ?? (e.left + e.right) / 2)),
+        y: Math.min(e.bottom, Math.max(e.top, h?.y ?? (e.top + e.bottom) / 2)),
+        width: h?.width ?? 1,
+        height: h?.height ?? 1
+    });
+const CropHotspotEditor = ({ image, crop, hotspot, aspectId, onChangeAspect, onChangeCrop, onChangeHotspot })=>{
+    const surfaceRef = useRef(null);
+    const dragRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const [availWidth, setAvailWidth] = useState(0);
+    useLayoutEffect(()=>{
+        const el = wrapperRef.current;
+        if (!el) return;
+        const measure = ()=>setAvailWidth(el.getBoundingClientRect().width);
+        measure();
+        if ("u" < typeof ResizeObserver) return;
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        return ()=>ro.disconnect();
+    }, []);
+    const imageRatio = (image.width || 1) / (image.height || 1);
+    const surfaceStyle = useMemo(()=>{
+        if (availWidth <= 0) return {
+            width: "100%",
+            aspectRatio: `${image.width || 1} / ${image.height || 1}`,
+            maxHeight: `${MAX_CANVAS_HEIGHT}px`
+        };
+        let width = Math.min(availWidth, MAX_CANVAS_WIDTH);
+        let height = width / imageRatio;
+        if (height > MAX_CANVAS_HEIGHT) {
+            height = MAX_CANVAS_HEIGHT;
+            width = height * imageRatio;
+        }
+        return {
+            width: `${width}px`,
+            height: `${height}px`
+        };
+    }, [
+        availWidth,
+        imageRatio,
+        image.width,
+        image.height
+    ]);
+    const edges = useMemo(()=>cropToEdges(crop), [
+        crop
+    ]);
+    const ratio = DEFAULT_ASPECT_RATIOS.find((ar)=>ar.id === aspectId)?.ratio ?? null;
+    const aspectOptions = useMemo(()=>[
+            {
+                label: "Free",
+                value: FREE
+            },
+            ...DEFAULT_ASPECT_RATIOS.map((ar)=>({
+                    label: ar.label,
+                    value: ar.id
+                }))
+        ], []);
+    const toNorm = useCallback((clientX, clientY)=>{
+        const rect = surfaceRef.current.getBoundingClientRect();
+        return {
+            x: clamp01((clientX - rect.left) / rect.width),
+            y: clamp01((clientY - rect.top) / rect.height)
+        };
+    }, []);
+    const commitEdges = useCallback((next)=>{
+        onChangeCrop(edgesToCrop(next));
+        onChangeHotspot(clampHotspot(hotspot, next));
+    }, [
+        onChangeCrop,
+        onChangeHotspot,
+        hotspot
+    ]);
+    const resizeFree = (handle, p)=>{
+        const moves = HANDLE_EDGES[handle];
+        const next = {
+            ...edges
+        };
+        if (moves.includes("left")) next.left = Math.min(p.x, next.right - MIN);
+        if (moves.includes("right")) next.right = Math.max(p.x, next.left + MIN);
+        if (moves.includes("top")) next.top = Math.min(p.y, next.bottom - MIN);
+        if (moves.includes("bottom")) next.bottom = Math.max(p.y, next.top + MIN);
+        return next;
+    };
+    const resizeLocked = (handle, p, r)=>{
+        const moves = HANDLE_EDGES[handle];
+        const rNorm = r / imageRatio;
+        const anchorX = moves.includes("left") ? edges.right : edges.left;
+        const anchorY = moves.includes("top") ? edges.bottom : edges.top;
+        const dirX = moves.includes("left") ? -1 : 1;
+        const dirY = moves.includes("top") ? -1 : 1;
+        const maxW = dirX > 0 ? 1 - anchorX : anchorX;
+        const maxH = dirY > 0 ? 1 - anchorY : anchorY;
+        let w = Math.abs(p.x - anchorX);
+        let h = w / rNorm;
+        if (h > Math.abs(p.y - anchorY)) {
+            h = Math.abs(p.y - anchorY);
+            w = h * rNorm;
+        }
+        w = Math.min(w, maxW);
+        h = w / rNorm;
+        if (h > maxH) {
+            h = maxH;
+            w = h * rNorm;
+        }
+        w = Math.max(w, MIN);
+        h = Math.max(h, MIN);
+        const next = {
+            ...edges
+        };
+        if (dirX > 0) {
+            next.left = anchorX;
+            next.right = anchorX + w;
+        } else {
+            next.right = anchorX;
+            next.left = anchorX - w;
+        }
+        if (dirY > 0) {
+            next.top = anchorY;
+            next.bottom = anchorY + h;
+        } else {
+            next.bottom = anchorY;
+            next.top = anchorY - h;
+        }
+        return next;
+    };
+    const moveCrop = (startEdges, dx, dy)=>{
+        const w = startEdges.right - startEdges.left;
+        const h = startEdges.bottom - startEdges.top;
+        const left = Math.min(Math.max(startEdges.left + dx, 0), 1 - w);
+        const top = Math.min(Math.max(startEdges.top + dy, 0), 1 - h);
+        return {
+            left,
+            top,
+            right: left + w,
+            bottom: top + h
+        };
+    };
+    const onPointerMove = useCallback((e)=>{
+        const drag = dragRef.current;
+        if (!drag) return;
+        const p = toNorm(e.clientX, e.clientY);
+        if ("focal" === drag.mode) return void onChangeHotspot(clampHotspot({
+            x: p.x,
+            y: p.y,
+            width: 1,
+            height: 1
+        }, edges));
+        if ("move" === drag.mode) {
+            const dx = p.x - drag.startPointer.x;
+            const dy = p.y - drag.startPointer.y;
+            commitEdges(moveCrop(drag.startEdges, dx, dy));
+            return;
+        }
+        const handle = drag.mode.slice(7);
+        commitEdges(null === ratio ? resizeFree(handle, p) : resizeLocked(handle, p, ratio));
+    }, [
+        toNorm,
+        onChangeHotspot,
+        edges,
+        commitEdges,
+        ratio
+    ]);
+    const startMoveCrop = useCallback((e)=>{
+        dragRef.current = {
+            mode: "move",
+            startPointer: toNorm(e.clientX, e.clientY),
+            startEdges: edges
+        };
+        surfaceRef.current?.setPointerCapture(e.pointerId);
+    }, [
+        toNorm,
+        edges
+    ]);
+    const startFocal = useCallback((e)=>{
+        e.stopPropagation();
+        dragRef.current = {
+            mode: "focal"
+        };
+        surfaceRef.current?.setPointerCapture(e.pointerId);
+    }, []);
+    const startResize = useCallback((handle)=>(e)=>{
+            e.stopPropagation();
+            dragRef.current = {
+                mode: `resize:${handle}`
+            };
+            surfaceRef.current?.setPointerCapture(e.pointerId);
+        }, []);
+    const endDrag = useCallback((e)=>{
+        dragRef.current = null;
+        surfaceRef.current?.releasePointerCapture(e.pointerId);
+    }, []);
+    const onSelectAspect = useCallback((value)=>{
+        onChangeAspect(value);
+        const r = DEFAULT_ASPECT_RATIOS.find((ar)=>ar.id === value)?.ratio;
+        if (value === FREE || !r) return;
+        const rNorm = r / imageRatio;
+        const cw = edges.right - edges.left;
+        const ch = edges.bottom - edges.top;
+        let w = cw;
+        let h = w / rNorm;
+        if (h > ch) {
+            h = ch;
+            w = h * rNorm;
+        }
+        const cx = (edges.left + edges.right) / 2;
+        const cy = (edges.top + edges.bottom) / 2;
+        commitEdges({
+            left: clamp01(cx - w / 2),
+            right: clamp01(cx + w / 2),
+            top: clamp01(cy - h / 2),
+            bottom: clamp01(cy + h / 2)
+        });
+    }, [
+        edges,
+        commitEdges,
+        imageRatio,
+        onChangeAspect
+    ]);
+    const activeHotspot = clampHotspot(hotspot, edges);
+    const handles = null === ratio ? [
+        ...CORNER_HANDLES,
+        ...EDGE_HANDLES
+    ] : CORNER_HANDLES;
+    const handlePosition = (handle)=>{
+        const cx = (edges.left + edges.right) / 2;
+        const cy = (edges.top + edges.bottom) / 2;
+        const x = handle.includes("w") ? edges.left : handle.includes("e") ? edges.right : cx;
+        const y = handle.includes("n") ? edges.top : handle.includes("s") ? edges.bottom : cy;
+        return {
+            left: `${100 * x}%`,
+            top: `${100 * y}%`
+        };
+    };
+    const cursorFor = (handle)=>{
+        const map = {
+            nw: "nwse-resize",
+            se: "nwse-resize",
+            ne: "nesw-resize",
+            sw: "nesw-resize",
+            n: "ns-resize",
+            s: "ns-resize",
+            e: "ew-resize",
+            w: "ew-resize"
+        };
+        return map[handle];
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-end justify-between gap-md"
+    }, /*#__PURE__*/ react.createElement(SectionLabel, null, "Crop & focal point"), /*#__PURE__*/ react.createElement("div", {
+        className: "w-[200px] shrink-0"
+    }, /*#__PURE__*/ react.createElement(Select, {
+        label: "Crop shape",
+        value: aspectId,
+        options: aspectOptions,
+        onChange: onSelectAspect,
+        displayResetAction: false
+    }))), /*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-center rounded-md bg-neutral-dark p-lg"
+    }, /*#__PURE__*/ react.createElement("div", {
+        ref: wrapperRef,
+        className: "w-full"
+    }, /*#__PURE__*/ react.createElement("div", {
+        ref: surfaceRef,
+        onPointerMove: onPointerMove,
+        onPointerUp: endDrag,
+        className: "relative mx-auto touch-none select-none overflow-hidden rounded-sm",
+        style: surfaceStyle
+    }, /*#__PURE__*/ react.createElement("img", {
+        src: image.src,
+        alt: "",
+        draggable: false,
+        className: "pointer-events-none absolute inset-0 h-full w-full object-cover"
+    }), /*#__PURE__*/ react.createElement("div", {
+        onPointerDown: startMoveCrop,
+        className: "absolute cursor-move border border-white/90",
+        style: {
+            left: `${100 * edges.left}%`,
+            top: `${100 * edges.top}%`,
+            width: `${(edges.right - edges.left) * 100}%`,
+            height: `${(edges.bottom - edges.top) * 100}%`,
+            boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 0 9999px rgba(0, 0, 0, 0.45)"
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "pointer-events-none absolute inset-0"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "absolute inset-y-0 left-1/3 w-px bg-white/30"
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "absolute inset-y-0 left-2/3 w-px bg-white/30"
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "absolute inset-x-0 top-1/3 h-px bg-white/30"
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "absolute inset-x-0 top-2/3 h-px bg-white/30"
+    })), /*#__PURE__*/ react.createElement("div", {
+        onPointerDown: startFocal,
+        className: "absolute flex h-8 w-8 -translate-x-1/2 -translate-y-1/2 cursor-grab touch-none items-center justify-center active:cursor-grabbing",
+        style: {
+            left: `${(activeHotspot.x - edges.left) / Math.max(MIN, edges.right - edges.left) * 100}%`,
+            top: `${(activeHotspot.y - edges.top) / Math.max(MIN, edges.bottom - edges.top) * 100}%`
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "pointer-events-none relative h-6 w-6 rounded-full border-2 border-white bg-white/25 shadow-lg"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "absolute left-1/2 top-1/2 h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white"
+    })))), handles.map((handle)=>{
+        const pos = handlePosition(handle);
+        return /*#__PURE__*/ react.createElement("div", {
+            key: handle,
+            onPointerDown: startResize(handle),
+            className: "absolute flex h-6 w-6 -translate-x-1/2 -translate-y-1/2 touch-none items-center justify-center",
+            style: {
+                left: pos.left,
+                top: pos.top,
+                cursor: cursorFor(handle)
+            }
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: "pointer-events-none h-3 w-3 rounded-sm border border-neutral-dark bg-white shadow"
+        }));
+    })))), /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        size: "sm",
+        className: "text-neutral-strong"
+    }, "Drag the handles to crop, drag inside to reposition, and drag the circle to set the focal point."));
+};
+export { CropHotspotEditor, FREE, inferAspectId };
+
+//# sourceMappingURL=CropHotspotEditor.js.map

package/ImageEditor/CropHotspotEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEditor/CropHotspotEditor.js","sources":["../../src/ImageEditor/CropHotspotEditor.tsx"],"sourcesContent":["import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport { Select } from \"~/Select/index.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { SectionLabel } from \"./SectionLabel.js\";\nimport { DEFAULT_ASPECT_RATIOS } from \"./types.js\";\nimport type { ImageEditorCrop, ImageEditorHotspot, ImageEditorImage } from \"./types.js\";\n\ninterface CropHotspotEditorProps {\n    image: ImageEditorImage;\n    crop: ImageEditorCrop | undefined;\n    hotspot: ImageEditorHotspot | undefined;\n    /** Currently selected crop shape id (\"free\" or a preset id). Controlled by the parent. */\n    aspectId: string;\n    onChangeAspect: (id: string) => void;\n    onChangeCrop: (crop: ImageEditorCrop) => void;\n    onChangeHotspot: (hotspot: ImageEditorHotspot) => void;\n}\n\n/** Crop rectangle in edge positions (0..1): left/top/right/bottom, left<right, top<bottom. */\ninterface Edges {\n    left: number;\n    top: number;\n    right: number;\n    bottom: number;\n}\n\ntype Handle = \"nw\" | \"n\" | \"ne\" | \"e\" | \"se\" | \"s\" | \"sw\" | \"w\";\n\nconst MIN = 0.05;\nexport const FREE = \"free\";\n\n/**\n * Infer which crop-shape preset a saved crop corresponds to, by comparing the\n * crop's on-screen (pixel) aspect ratio against the presets. The crop stores only\n * edge insets — not the shape used to draw it — so on reopen we recover the shape\n * here; a crop drawn with a preset matches it closely, while a free crop won't.\n */\nexport const inferAspectId = (\n    crop: ImageEditorCrop | undefined,\n    width: number,\n    height: number\n): string => {\n    if (!crop || !width || !height) {\n        return FREE;\n    }\n    const cropWidth = Math.max(0, 1 - (crop.left ?? 0) - (crop.right ?? 0));\n    const cropHeight = Math.max(0, 1 - (crop.top ?? 0) - (crop.bottom ?? 0));\n    if (cropWidth <= 0 || cropHeight <= 0) {\n        return FREE;\n    }\n    const displayRatio = (cropWidth * width) / (cropHeight * height);\n    const match = DEFAULT_ASPECT_RATIOS.find(ar => Math.abs(ar.ratio - displayRatio) < 0.02);\n    return match?.id ?? FREE;\n};\n\n// Canvas fits within this box (px), preserving the image aspect ratio, so tall\n// images don't take up the full screen height.\nconst MAX_CANVAS_WIDTH = 640;\nconst MAX_CANVAS_HEIGHT = 460;\n\nconst clamp01 = (n: number) => Math.min(1, Math.max(0, n));\n\nconst cropToEdges = (crop: ImageEditorCrop | undefined): Edges => ({\n    left: clamp01(crop?.left ?? 0),\n    top: clamp01(crop?.top ?? 0),\n    right: 1 - clamp01(crop?.right ?? 0),\n    bottom: 1 - clamp01(crop?.bottom ?? 0)\n});\n\nconst edgesToCrop = (e: Edges): ImageEditorCrop => ({\n    top: e.top,\n    left: e.left,\n    bottom: 1 - e.bottom,\n    right: 1 - e.right\n});\n\n// Which edges each handle moves.\nconst HANDLE_EDGES: Record<Handle, Array<keyof Edges>> = {\n    nw: [\"top\", \"left\"],\n    n: [\"top\"],\n    ne: [\"top\", \"right\"],\n    e: [\"right\"],\n    se: [\"bottom\", \"right\"],\n    s: [\"bottom\"],\n    sw: [\"bottom\", \"left\"],\n    w: [\"left\"]\n};\n\nconst CORNER_HANDLES: Handle[] = [\"nw\", \"ne\", \"se\", \"sw\"];\nconst EDGE_HANDLES: Handle[] = [\"n\", \"e\", \"s\", \"w\"];\n\nconst clampHotspot = (h: ImageEditorHotspot | undefined, e: Edges): ImageEditorHotspot => ({\n    x: Math.min(e.right, Math.max(e.left, h?.x ?? (e.left + e.right) / 2)),\n    y: Math.min(e.bottom, Math.max(e.top, h?.y ?? (e.top + e.bottom) / 2)),\n    width: h?.width ?? 1,\n    height: h?.height ?? 1\n});\n\nexport const CropHotspotEditor = ({\n    image,\n    crop,\n    hotspot,\n    aspectId,\n    onChangeAspect,\n    onChangeCrop,\n    onChangeHotspot\n}: CropHotspotEditorProps) => {\n    const surfaceRef = useRef<HTMLDivElement>(null);\n    const dragRef = useRef<\n        | { mode: \"focal\" }\n        | { mode: `resize:${Handle}` }\n        | { mode: \"move\"; startPointer: { x: number; y: number }; startEdges: Edges }\n        | null\n    >(null);\n\n    // Measure the available width so we can fit the canvas into a max box while\n    // preserving the image aspect ratio (keeps the box == image aspect, which the\n    // pointer coordinate mapping relies on).\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const [availWidth, setAvailWidth] = useState(0);\n\n    useLayoutEffect(() => {\n        const el = wrapperRef.current;\n        if (!el) {\n            return;\n        }\n        const measure = () => setAvailWidth(el.getBoundingClientRect().width);\n        measure();\n        if (typeof ResizeObserver === \"undefined\") {\n            return;\n        }\n        const ro = new ResizeObserver(measure);\n        ro.observe(el);\n        return () => ro.disconnect();\n    }, []);\n\n    const imageRatio = (image.width || 1) / (image.height || 1);\n    const surfaceStyle = useMemo<React.CSSProperties>(() => {\n        if (availWidth <= 0) {\n            return {\n                width: \"100%\",\n                aspectRatio: `${image.width || 1} / ${image.height || 1}`,\n                maxHeight: `${MAX_CANVAS_HEIGHT}px`\n            };\n        }\n        let width = Math.min(availWidth, MAX_CANVAS_WIDTH);\n        let height = width / imageRatio;\n        if (height > MAX_CANVAS_HEIGHT) {\n            height = MAX_CANVAS_HEIGHT;\n            width = height * imageRatio;\n        }\n        return { width: `${width}px`, height: `${height}px` };\n    }, [availWidth, imageRatio, image.width, image.height]);\n\n    const edges = useMemo(() => cropToEdges(crop), [crop]);\n    const ratio = DEFAULT_ASPECT_RATIOS.find(ar => ar.id === aspectId)?.ratio ?? null;\n\n    const aspectOptions = useMemo(\n        () => [\n            { label: \"Free\", value: FREE },\n            ...DEFAULT_ASPECT_RATIOS.map(ar => ({ label: ar.label, value: ar.id }))\n        ],\n        []\n    );\n\n    const toNorm = useCallback((clientX: number, clientY: number) => {\n        const rect = surfaceRef.current!.getBoundingClientRect();\n        return {\n            x: clamp01((clientX - rect.left) / rect.width),\n            y: clamp01((clientY - rect.top) / rect.height)\n        };\n    }, []);\n\n    const commitEdges = useCallback(\n        (next: Edges) => {\n            onChangeCrop(edgesToCrop(next));\n            // Keep the focal point inside the (new) crop.\n            onChangeHotspot(clampHotspot(hotspot, next));\n        },\n        [onChangeCrop, onChangeHotspot, hotspot]\n    );\n\n    const resizeFree = (handle: Handle, p: { x: number; y: number }): Edges => {\n        const moves = HANDLE_EDGES[handle];\n        const next = { ...edges };\n        if (moves.includes(\"left\")) {\n            next.left = Math.min(p.x, next.right - MIN);\n        }\n        if (moves.includes(\"right\")) {\n            next.right = Math.max(p.x, next.left + MIN);\n        }\n        if (moves.includes(\"top\")) {\n            next.top = Math.min(p.y, next.bottom - MIN);\n        }\n        if (moves.includes(\"bottom\")) {\n            next.bottom = Math.max(p.y, next.top + MIN);\n        }\n        return next;\n    };\n\n    const resizeLocked = (handle: Handle, p: { x: number; y: number }, r: number): Edges => {\n        const moves = HANDLE_EDGES[handle];\n        // `r` is a display (pixel) aspect ratio, but the crop is stored in normalized\n        // image coordinates. Convert so the on-screen crop actually has ratio `r`.\n        const rNorm = r / imageRatio;\n        // Anchor is the opposite corner (fixed).\n        const anchorX = moves.includes(\"left\") ? edges.right : edges.left;\n        const anchorY = moves.includes(\"top\") ? edges.bottom : edges.top;\n        const dirX = moves.includes(\"left\") ? -1 : 1;\n        const dirY = moves.includes(\"top\") ? -1 : 1;\n\n        const maxW = dirX > 0 ? 1 - anchorX : anchorX;\n        const maxH = dirY > 0 ? 1 - anchorY : anchorY;\n\n        let w = Math.abs(p.x - anchorX);\n        let h = w / rNorm;\n        if (h > Math.abs(p.y - anchorY)) {\n            // The vertical drag is the limiting axis.\n            h = Math.abs(p.y - anchorY);\n            w = h * rNorm;\n        }\n        // Fit inside the image while keeping the ratio.\n        w = Math.min(w, maxW);\n        h = w / rNorm;\n        if (h > maxH) {\n            h = maxH;\n            w = h * rNorm;\n        }\n        w = Math.max(w, MIN);\n        h = Math.max(h, MIN);\n\n        const next = { ...edges };\n        if (dirX > 0) {\n            next.left = anchorX;\n            next.right = anchorX + w;\n        } else {\n            next.right = anchorX;\n            next.left = anchorX - w;\n        }\n        if (dirY > 0) {\n            next.top = anchorY;\n            next.bottom = anchorY + h;\n        } else {\n            next.bottom = anchorY;\n            next.top = anchorY - h;\n        }\n        return next;\n    };\n\n    const moveCrop = (startEdges: Edges, dx: number, dy: number): Edges => {\n        const w = startEdges.right - startEdges.left;\n        const h = startEdges.bottom - startEdges.top;\n        const left = Math.min(Math.max(startEdges.left + dx, 0), 1 - w);\n        const top = Math.min(Math.max(startEdges.top + dy, 0), 1 - h);\n        return { left, top, right: left + w, bottom: top + h };\n    };\n\n    const onPointerMove = useCallback(\n        (e: React.PointerEvent<HTMLDivElement>) => {\n            const drag = dragRef.current;\n            if (!drag) {\n                return;\n            }\n            const p = toNorm(e.clientX, e.clientY);\n            if (drag.mode === \"focal\") {\n                onChangeHotspot(clampHotspot({ x: p.x, y: p.y, width: 1, height: 1 }, edges));\n                return;\n            }\n            if (drag.mode === \"move\") {\n                const dx = p.x - drag.startPointer.x;\n                const dy = p.y - drag.startPointer.y;\n                commitEdges(moveCrop(drag.startEdges, dx, dy));\n                return;\n            }\n            const handle = drag.mode.slice(\"resize:\".length) as Handle;\n            commitEdges(ratio === null ? resizeFree(handle, p) : resizeLocked(handle, p, ratio));\n        },\n        [toNorm, onChangeHotspot, edges, commitEdges, ratio]\n    );\n\n    // Drag inside the crop rectangle repositions the whole crop window.\n    const startMoveCrop = useCallback(\n        (e: React.PointerEvent<HTMLDivElement>) => {\n            dragRef.current = {\n                mode: \"move\",\n                startPointer: toNorm(e.clientX, e.clientY),\n                startEdges: edges\n            };\n            surfaceRef.current?.setPointerCapture(e.pointerId);\n        },\n        [toNorm, edges]\n    );\n\n    // Dragging the marker itself moves the focal point (and only that).\n    const startFocal = useCallback((e: React.PointerEvent<HTMLDivElement>) => {\n        e.stopPropagation();\n        dragRef.current = { mode: \"focal\" };\n        surfaceRef.current?.setPointerCapture(e.pointerId);\n    }, []);\n\n    const startResize = useCallback(\n        (handle: Handle) => (e: React.PointerEvent<HTMLDivElement>) => {\n            e.stopPropagation();\n            dragRef.current = { mode: `resize:${handle}` };\n            surfaceRef.current?.setPointerCapture(e.pointerId);\n        },\n        []\n    );\n\n    const endDrag = useCallback((e: React.PointerEvent<HTMLDivElement>) => {\n        dragRef.current = null;\n        surfaceRef.current?.releasePointerCapture(e.pointerId);\n    }, []);\n\n    const onSelectAspect = useCallback(\n        (value: string) => {\n            onChangeAspect(value);\n            const r = DEFAULT_ASPECT_RATIOS.find(ar => ar.id === value)?.ratio;\n            if (value === FREE || !r) {\n                return;\n            }\n            // `r` is a display (pixel) aspect ratio; convert to a normalized ratio\n            // so the crop, stored in normalized image coordinates, renders as `r`.\n            const rNorm = r / imageRatio;\n            // Re-fit the current crop to the chosen ratio, centered within it.\n            const cw = edges.right - edges.left;\n            const ch = edges.bottom - edges.top;\n            let w = cw;\n            let h = w / rNorm;\n            if (h > ch) {\n                h = ch;\n                w = h * rNorm;\n            }\n            const cx = (edges.left + edges.right) / 2;\n            const cy = (edges.top + edges.bottom) / 2;\n            commitEdges({\n                left: clamp01(cx - w / 2),\n                right: clamp01(cx + w / 2),\n                top: clamp01(cy - h / 2),\n                bottom: clamp01(cy + h / 2)\n            });\n        },\n        [edges, commitEdges, imageRatio, onChangeAspect]\n    );\n\n    const activeHotspot = clampHotspot(hotspot, edges);\n    const handles = ratio === null ? [...CORNER_HANDLES, ...EDGE_HANDLES] : CORNER_HANDLES;\n\n    const handlePosition = (handle: Handle): { left: string; top: string } => {\n        const cx = (edges.left + edges.right) / 2;\n        const cy = (edges.top + edges.bottom) / 2;\n        const x = handle.includes(\"w\") ? edges.left : handle.includes(\"e\") ? edges.right : cx;\n        const y = handle.includes(\"n\") ? edges.top : handle.includes(\"s\") ? edges.bottom : cy;\n        return { left: `${x * 100}%`, top: `${y * 100}%` };\n    };\n\n    const cursorFor = (handle: Handle): string => {\n        const map: Record<Handle, string> = {\n            nw: \"nwse-resize\",\n            se: \"nwse-resize\",\n            ne: \"nesw-resize\",\n            sw: \"nesw-resize\",\n            n: \"ns-resize\",\n            s: \"ns-resize\",\n            e: \"ew-resize\",\n            w: \"ew-resize\"\n        };\n        return map[handle];\n    };\n\n    return (\n        <div className={\"flex flex-col gap-sm\"}>\n            <div className={\"flex items-end justify-between gap-md\"}>\n                <SectionLabel>Crop &amp; focal point</SectionLabel>\n                <div className={\"w-[200px] shrink-0\"}>\n                    <Select\n                        label={\"Crop shape\"}\n                        value={aspectId}\n                        options={aspectOptions}\n                        onChange={onSelectAspect}\n                        displayResetAction={false}\n                    />\n                </div>\n            </div>\n\n            {/* Dark editing stage: the image sits centered on a near-black backdrop\n                (like a pro image editor), so letterboxing around portrait images\n                reads as intentional and the image stays the focal element. */}\n            <div className={\"flex justify-center rounded-md bg-neutral-dark p-lg\"}>\n                <div ref={wrapperRef} className={\"w-full\"}>\n                    <div\n                        ref={surfaceRef}\n                        onPointerMove={onPointerMove}\n                        onPointerUp={endDrag}\n                        className={\n                            \"relative mx-auto touch-none select-none overflow-hidden rounded-sm\"\n                        }\n                        style={surfaceStyle}\n                    >\n                        <img\n                            src={image.src}\n                            alt={\"\"}\n                            draggable={false}\n                            className={\n                                \"pointer-events-none absolute inset-0 h-full w-full object-cover\"\n                            }\n                        />\n\n                        {/* Crop rectangle: dims outside via box-shadow; interior drag moves the\n                            crop. The border is two-tone (white edge + a 1px dark ring) so it stays\n                            visible over both light and dark image areas. */}\n                        <div\n                            onPointerDown={startMoveCrop}\n                            className={\"absolute cursor-move border border-white/90\"}\n                            style={{\n                                left: `${edges.left * 100}%`,\n                                top: `${edges.top * 100}%`,\n                                width: `${(edges.right - edges.left) * 100}%`,\n                                height: `${(edges.bottom - edges.top) * 100}%`,\n                                boxShadow:\n                                    \"0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 0 9999px rgba(0, 0, 0, 0.45)\"\n                            }}\n                        >\n                            {/* Rule-of-thirds guides — a compositional aid and a cue for placing\n                                the focal point. */}\n                            <div className={\"pointer-events-none absolute inset-0\"}>\n                                <div className={\"absolute inset-y-0 left-1/3 w-px bg-white/30\"} />\n                                <div className={\"absolute inset-y-0 left-2/3 w-px bg-white/30\"} />\n                                <div className={\"absolute inset-x-0 top-1/3 h-px bg-white/30\"} />\n                                <div className={\"absolute inset-x-0 top-2/3 h-px bg-white/30\"} />\n                            </div>\n\n                            {/* Focal marker — the visible ring is small, but the draggable hit\n                                area around it is larger for easier grabbing. */}\n                            <div\n                                onPointerDown={startFocal}\n                                className={\n                                    \"absolute flex h-8 w-8 -translate-x-1/2 -translate-y-1/2 cursor-grab touch-none items-center justify-center active:cursor-grabbing\"\n                                }\n                                style={{\n                                    left: `${((activeHotspot.x - edges.left) / Math.max(MIN, edges.right - edges.left)) * 100}%`,\n                                    top: `${((activeHotspot.y - edges.top) / Math.max(MIN, edges.bottom - edges.top)) * 100}%`\n                                }}\n                            >\n                                <div\n                                    className={\n                                        \"pointer-events-none relative h-6 w-6 rounded-full border-2 border-white bg-white/25 shadow-lg\"\n                                    }\n                                >\n                                    <div\n                                        className={\n                                            \"absolute left-1/2 top-1/2 h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white\"\n                                        }\n                                    />\n                                </div>\n                            </div>\n                        </div>\n\n                        {/* Resize handles — small visible dot inside a larger transparent hit\n                            area so the corners/edges are easy to grab. */}\n                        {handles.map(handle => {\n                            const pos = handlePosition(handle);\n                            return (\n                                <div\n                                    key={handle}\n                                    onPointerDown={startResize(handle)}\n                                    className={\n                                        \"absolute flex h-6 w-6 -translate-x-1/2 -translate-y-1/2 touch-none items-center justify-center\"\n                                    }\n                                    style={{\n                                        left: pos.left,\n                                        top: pos.top,\n                                        cursor: cursorFor(handle)\n                                    }}\n                                >\n                                    <div\n                                        className={\n                                            \"pointer-events-none h-3 w-3 rounded-sm border border-neutral-dark bg-white shadow\"\n                                        }\n                                    />\n                                </div>\n                            );\n                        })}\n                    </div>\n                </div>\n            </div>\n\n            <Text as={\"div\"} size={\"sm\"} className={\"text-neutral-strong\"}>\n                Drag the handles to crop, drag inside to reposition, and drag the circle to set the\n                focal point.\n            </Text>\n        </div>\n    );\n};\n"],"names":["MIN","FREE","inferAspectId","crop","width","height","cropWidth","Math","cropHeight","displayRatio","match","DEFAULT_ASPECT_RATIOS","ar","MAX_CANVAS_WIDTH","MAX_CANVAS_HEIGHT","clamp01","n","cropToEdges","edgesToCrop","e","HANDLE_EDGES","CORNER_HANDLES","EDGE_HANDLES","clampHotspot","h","CropHotspotEditor","image","hotspot","aspectId","onChangeAspect","onChangeCrop","onChangeHotspot","surfaceRef","useRef","dragRef","wrapperRef","availWidth","setAvailWidth","useState","useLayoutEffect","el","measure","ResizeObserver","ro","imageRatio","surfaceStyle","useMemo","edges","ratio","aspectOptions","toNorm","useCallback","clientX","clientY","rect","commitEdges","next","resizeFree","handle","p","moves","resizeLocked","r","rNorm","anchorX","anchorY","dirX","dirY","maxW","maxH","w","moveCrop","startEdges","dx","dy","left","top","onPointerMove","drag","startMoveCrop","startFocal","startResize","endDrag","onSelectAspect","value","cw","ch","cx","cy","activeHotspot","handles","handlePosition","x","y","cursorFor","map","SectionLabel","Select","pos","Text"],"mappings":"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"}

package/ImageEditor/ImageEditor.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { type ImageEditorAspectRatio, type ImageEditorImage, type ImageEditorValue } from "./types.js";
+export interface ImageEditorProps {
+    open: boolean;
+    onClose: () => void;
+    /** The source image to edit. */
+    image: ImageEditorImage;
+    /** The current edit (crop/hotspot/alt/caption), if any. */
+    value?: ImageEditorValue;
+    /** Called with the new edit when the user saves. */
+    onSave: (value: ImageEditorValue) => void;
+    /** Preview ratios shown in the strip. Defaults to square / 4:3 / 16:9. */
+    aspectRatios?: ImageEditorAspectRatio[];
+    showAlt?: boolean;
+    showCaption?: boolean;
+    title?: React.ReactNode;
+}
+export declare const ImageEditor: ({ open, onClose, image, value, onSave, aspectRatios, showAlt, showCaption, title }: ImageEditorProps) => React.JSX.Element;

package/ImageEditor/ImageEditor.js

@@ -0,0 +1,151 @@
+import react, { useEffect, useState } from "react";
+import { ReactComponent } from "@webiny/icons/arrow_drop_down.svg";
+import { Dialog } from "../Dialog/index.js";
+import { Button } from "../Button/index.js";
+import { DropdownMenu } from "../DropdownMenu/index.js";
+import { CropHotspotEditor, FREE, inferAspectId } from "./CropHotspotEditor.js";
+import { AspectRatioPreview } from "./AspectRatioPreview.js";
+import { MetaFields } from "./MetaFields.js";
+import { SectionLabel } from "./SectionLabel.js";
+import { DEFAULT_ASPECT_RATIOS, DEFAULT_PREVIEW_RATIO_IDS } from "./types.js";
+const isFullCrop = (crop)=>{
+    if (!crop) return true;
+    return 0 === crop.top && 0 === crop.left && 0 === crop.bottom && 0 === crop.right;
+};
+const isCenteredHotspot = (hotspot)=>!hotspot || 0.5 === hotspot.x && 0.5 === hotspot.y;
+const ImageEditor = ({ open, onClose, image, value, onSave, aspectRatios = DEFAULT_ASPECT_RATIOS, showAlt = true, showCaption = true, title = "Edit image" })=>{
+    const [crop, setCrop] = useState(value?.crop);
+    const [hotspot, setHotspot] = useState(value?.hotspot);
+    const [alt, setAlt] = useState(value?.alt ?? "");
+    const [caption, setCaption] = useState(value?.caption ?? "");
+    const [aspectId, setAspectId] = useState(FREE);
+    const [selectedRatioIds, setSelectedRatioIds] = useState(()=>{
+        const defaults = aspectRatios.filter((ar)=>DEFAULT_PREVIEW_RATIO_IDS.includes(ar.id)).map((ar)=>ar.id);
+        return defaults.length > 0 ? defaults : aspectRatios.map((ar)=>ar.id);
+    });
+    const toggleRatio = (id)=>setSelectedRatioIds((prev)=>prev.includes(id) ? prev.filter((x)=>x !== id) : [
+                ...prev,
+                id
+            ]);
+    const visibleRatios = aspectRatios.filter((ar)=>selectedRatioIds.includes(ar.id));
+    const [naturalSize, setNaturalSize] = useState(null);
+    useEffect(()=>{
+        if (!open || !image.src || image.width > 0 && image.height > 0) return;
+        if ("u" < typeof document) return;
+        const probe = document.createElement("img");
+        probe.onload = ()=>setNaturalSize({
+                width: probe.naturalWidth,
+                height: probe.naturalHeight
+            });
+        probe.src = image.src;
+        return ()=>{
+            probe.onload = null;
+        };
+    }, [
+        open,
+        image.src,
+        image.width,
+        image.height
+    ]);
+    const effectiveImage = {
+        src: image.src,
+        width: image.width > 0 ? image.width : naturalSize?.width ?? 0,
+        height: image.height > 0 ? image.height : naturalSize?.height ?? 0
+    };
+    useEffect(()=>{
+        if (open) {
+            setCrop(value?.crop);
+            setHotspot(value?.hotspot);
+            setAlt(value?.alt ?? "");
+            setCaption(value?.caption ?? "");
+        }
+    }, [
+        open,
+        value
+    ]);
+    useEffect(()=>{
+        if (open) setAspectId(inferAspectId(value?.crop, effectiveImage.width, effectiveImage.height));
+    }, [
+        open,
+        value,
+        effectiveImage.width,
+        effectiveImage.height
+    ]);
+    const handleSave = ()=>{
+        const next = {};
+        if (!isFullCrop(crop)) next.crop = crop;
+        if (!isCenteredHotspot(hotspot)) next.hotspot = hotspot;
+        if (showAlt && alt.trim()) next.alt = alt.trim();
+        if (showCaption && caption.trim()) next.caption = caption.trim();
+        onSave(next);
+        onClose();
+    };
+    return /*#__PURE__*/ react.createElement(Dialog, {
+        open: open,
+        onClose: onClose,
+        title: title,
+        size: "lg",
+        actions: /*#__PURE__*/ react.createElement("div", {
+            className: "flex w-full items-center justify-end gap-sm"
+        }, /*#__PURE__*/ react.createElement(Button, {
+            variant: "secondary",
+            text: "Cancel",
+            onClick: onClose
+        }), /*#__PURE__*/ react.createElement(Button, {
+            variant: "primary",
+            text: "Save",
+            onClick: handleSave
+        }))
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-lg"
+    }, /*#__PURE__*/ react.createElement(CropHotspotEditor, {
+        image: effectiveImage,
+        crop: crop,
+        hotspot: hotspot,
+        aspectId: aspectId,
+        onChangeAspect: setAspectId,
+        onChangeCrop: setCrop,
+        onChangeHotspot: setHotspot
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center justify-between"
+    }, /*#__PURE__*/ react.createElement(SectionLabel, null, "Preview"), /*#__PURE__*/ react.createElement(DropdownMenu, {
+        trigger: /*#__PURE__*/ react.createElement(Button, {
+            variant: "secondary",
+            text: `Preview at (${visibleRatios.length})`,
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            iconPosition: "end"
+        })
+    }, aspectRatios.map((ar)=>/*#__PURE__*/ react.createElement(DropdownMenu.CheckboxItem, {
+            key: ar.id,
+            text: ar.label,
+            checked: selectedRatioIds.includes(ar.id),
+            onCheckedChange: ()=>toggleRatio(ar.id),
+            onSelect: (e)=>e.preventDefault()
+        })))), visibleRatios.length > 0 ? /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-wrap items-start gap-md"
+    }, visibleRatios.map((ar)=>/*#__PURE__*/ react.createElement(AspectRatioPreview, {
+            key: ar.id,
+            src: effectiveImage.src,
+            imageWidth: effectiveImage.width,
+            imageHeight: effectiveImage.height,
+            crop: crop,
+            hotspot: hotspot,
+            aspectRatio: ar
+        }))) : /*#__PURE__*/ react.createElement("div", {
+        className: "text-sm text-neutral-strong"
+    }, "Select at least one shape to preview.")), showAlt || showCaption ? /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm"
+    }, /*#__PURE__*/ react.createElement(SectionLabel, null, "Details"), /*#__PURE__*/ react.createElement(MetaFields, {
+        alt: alt,
+        caption: caption,
+        showAlt: showAlt,
+        showCaption: showCaption,
+        onChangeAlt: setAlt,
+        onChangeCaption: setCaption
+    })) : null));
+};
+export { ImageEditor };
+
+//# sourceMappingURL=ImageEditor.js.map