@alpaca-editor/core 1.0.0 → 1.0.3764-editor-mono

package/dist/editor/PictureCropper.js

@@ -0,0 +1,332 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PictureCropper = PictureCropper;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dialog_1 = require("primereact/dialog");
+const editContext_1 = require("./client/editContext");
+const react_1 = require("react");
+const button_1 = require("primereact/button");
+const DialogButtons_1 = __importDefault(require("./ui/DialogButtons"));
+const utils_1 = require("primereact/utils");
+function PictureCropper({ field, onClose, variantName: selectedVariantName, }) {
+    const [pictureValue, setPictureValue] = (0, react_1.useState)();
+    const [isValid, setIsValid] = (0, react_1.useState)(true);
+    const [rawValue, setRawValue] = (0, react_1.useState)();
+    const imageRef = (0, react_1.useRef)(null);
+    const [rect, setRect] = (0, react_1.useState)();
+    const rectRef = (0, react_1.useRef)(rect);
+    const movingRef = (0, react_1.useRef)(false);
+    const [startPos, setStartPos] = (0, react_1.useState)({
+        x: 0,
+        y: 0,
+    });
+    const offset = (0, react_1.useRef)({ x: 0, y: 0 });
+    const editContext = (0, editContext_1.useEditContext)();
+    const EDGE_THRESHOLD = 10; // pixels from edge to detect resize
+    const [resizeEdge, setResizeEdge] = (0, react_1.useState)(null);
+    const resizeEdgeRef = (0, react_1.useRef)(null);
+    const getResizeEdge = (pos, rect, bounds) => {
+        if (!rect || !bounds)
+            return null;
+        const x = pos.x * bounds.width;
+        const y = pos.y * bounds.height;
+        const rectX = rect.x * bounds.width;
+        const rectY = rect.y * bounds.height;
+        const rectWidth = rect.width * bounds.width;
+        const rectHeight = rect.height * bounds.height;
+        const isNearLeft = Math.abs(x - rectX) < EDGE_THRESHOLD;
+        const isNearRight = Math.abs(x - (rectX + rectWidth)) < EDGE_THRESHOLD;
+        const isNearTop = Math.abs(y - rectY) < EDGE_THRESHOLD;
+        const isNearBottom = Math.abs(y - (rectY + rectHeight)) < EDGE_THRESHOLD;
+        if (isNearLeft && isNearTop)
+            return "nw";
+        if (isNearRight && isNearTop)
+            return "ne";
+        if (isNearLeft && isNearBottom)
+            return "sw";
+        if (isNearRight && isNearBottom)
+            return "se";
+        if (isNearLeft)
+            return "w";
+        if (isNearRight)
+            return "e";
+        if (isNearTop)
+            return "n";
+        if (isNearBottom)
+            return "s";
+        return null;
+    };
+    (0, react_1.useEffect)(() => {
+        const deepCopy = JSON.parse(JSON.stringify(field.value));
+        setPictureValue(deepCopy);
+        const raw = field?.rawValue
+            ? JSON.parse(field?.rawValue)
+            : { Variants: [] };
+        setRawValue(raw);
+    }, [field]);
+    const selectedVariant = pictureValue && pictureValue.variants
+        ? pictureValue.variants?.find((x) => x.name == selectedVariantName)
+        : null;
+    (0, react_1.useEffect)(() => {
+        if (selectedVariant?.region &&
+            (!selectedVariant.aspectRatioLock ||
+                Math.abs(selectedVariant.aspectRatioLock -
+                    (selectedVariant.region.width * selectedVariant.width) /
+                        (selectedVariant.region.height * selectedVariant.height)) < 0.1) &&
+            selectedVariant.region.width > 0 &&
+            selectedVariant.region.height > 0) {
+            setRect({
+                width: selectedVariant.region.width,
+                height: selectedVariant.region.height,
+                y: selectedVariant.region.y,
+                x: selectedVariant.region.x,
+            });
+        }
+        else {
+            setRect(undefined);
+        }
+    }, [selectedVariant]);
+    (0, react_1.useEffect)(() => {
+        if (!rect)
+            return;
+        if ((selectedVariant?.minWidth && selectedVariant.minWidth > widthPx) ||
+            (selectedVariant?.minHeight && selectedVariant?.minHeight > heightPx)) {
+            setIsValid(false);
+        }
+        else
+            setIsValid(true);
+        rectRef.current = rect;
+    }, [rect]);
+    (0, react_1.useEffect)(() => {
+        if (!rawValue)
+            return;
+        if (!selectedVariantName)
+            return;
+        if (selectedVariant) {
+            let selected = rawValue.Variants?.find((x) => x.Name == selectedVariantName);
+            if (!selected) {
+                selected = {
+                    Name: selectedVariantName,
+                    MediaId: selectedVariant.mediaId,
+                };
+                rawValue.Variants?.push(selected);
+            }
+            if (selected) {
+                if (rect)
+                    selected.Region = {
+                        X: rect.x,
+                        Y: rect.y,
+                        Width: rect.width,
+                        Height: rect.height,
+                    };
+                else
+                    selected.Region = undefined;
+                setRawValue(rawValue);
+            }
+        }
+    }, [rect]);
+    const handleMouseMove = (ev) => {
+        if (!selectedVariant)
+            return null;
+        const bounds = imageRef.current?.getBoundingClientRect();
+        if (!bounds)
+            return;
+        const pos = {
+            x: (ev.clientX - bounds.left) / bounds.width,
+            y: (ev.clientY - bounds.top) / bounds.height,
+        };
+        // Update cursor on hover (when not dragging)
+        if (ev.buttons !== 1) {
+            const edge = getResizeEdge(pos, rect, bounds);
+            setResizeEdge(edge);
+            return;
+        }
+        if (ev.buttons === 1) {
+            if (!rectRef.current || !imageRef.current)
+                return;
+            const rect = rectRef.current;
+            const bounds = imageRef.current.getBoundingClientRect();
+            const deltaX = ev.clientX - startPos.x;
+            const deltaY = ev.clientY - startPos.y;
+            if (resizeEdgeRef.current) {
+                const pos = {
+                    x: (ev.clientX - bounds.left) / bounds.width,
+                    y: (ev.clientY - bounds.top) / bounds.height,
+                };
+                let newRect = { ...rect };
+                const aspectRatio = selectedVariant.aspectRatioLock;
+                const originalAspectRatio = selectedVariant.width / selectedVariant.height;
+                if (resizeEdgeRef.current.includes("w")) {
+                    const newWidth = rect.width + rect.x - pos.x;
+                    if (newWidth > 0) {
+                        newRect.width = newWidth;
+                        newRect.x = pos.x;
+                        if (aspectRatio) {
+                            newRect.height =
+                                (newRect.width / aspectRatio) * originalAspectRatio;
+                        }
+                    }
+                }
+                if (resizeEdgeRef.current.includes("e")) {
+                    newRect.width = pos.x - rect.x;
+                    if (aspectRatio) {
+                        newRect.height =
+                            (newRect.width / aspectRatio) * originalAspectRatio;
+                    }
+                }
+                if (resizeEdgeRef.current.includes("n")) {
+                    const newHeight = rect.height + rect.y - pos.y;
+                    if (newHeight > 0) {
+                        newRect.height = newHeight;
+                        newRect.y = pos.y;
+                        if (aspectRatio) {
+                            newRect.width =
+                                (newRect.height * aspectRatio) / originalAspectRatio;
+                        }
+                    }
+                }
+                if (resizeEdgeRef.current.includes("s")) {
+                    newRect.height = pos.y - rect.y;
+                    if (aspectRatio) {
+                        newRect.width =
+                            (newRect.height * aspectRatio) / originalAspectRatio;
+                    }
+                }
+                // Constrain to bounds
+                if (newRect.x < 0)
+                    newRect.x = 0;
+                if (newRect.y < 0)
+                    newRect.y = 0;
+                if (newRect.x + newRect.width > 1)
+                    newRect.width = 1 - newRect.x;
+                if (newRect.y + newRect.height > 1)
+                    newRect.height = 1 - newRect.y;
+                setRect(newRect);
+            }
+            else if (movingRef.current) {
+                setRect({
+                    ...rect,
+                    x: Math.max(0, Math.min(1 - rectRef.current.width, (ev.clientX - bounds.left) / bounds.width - offset.current.x)),
+                    y: Math.max(0, Math.min(1 - rectRef.current.height, (ev.clientY - bounds.top) / bounds.height - offset.current.y)),
+                });
+            }
+            else {
+                const originalAspectRatio = selectedVariant.width / selectedVariant.height;
+                const aspectRatio = selectedVariant.aspectRatioLock;
+                let width = (ev.clientX - bounds.left) / bounds.width - rect.x;
+                let height = (ev.clientY - bounds.top) / bounds.height - rect.y;
+                if (aspectRatio) {
+                    if (Math.abs(deltaX) > Math.abs(deltaY)) {
+                        height = (width / aspectRatio) * originalAspectRatio;
+                    }
+                    else {
+                        width = (height * aspectRatio) / originalAspectRatio;
+                    }
+                }
+                if (width + rect.x > 1) {
+                    width = 1 - rect.x;
+                    if (aspectRatio)
+                        height = (width / aspectRatio) * originalAspectRatio;
+                }
+                if (height + rect.y > 1) {
+                    height = 1 - rect.y;
+                    if (aspectRatio)
+                        width = (height * aspectRatio) / originalAspectRatio;
+                }
+                const newRect = { ...rect, width, height };
+                setRect(newRect);
+            }
+            ev.preventDefault();
+            ev.stopPropagation();
+        }
+    };
+    const handleMouseUp = () => {
+        if (!rectRef.current || !rectRef.current.width || !rectRef.current.height) {
+            setRect(undefined);
+        }
+        movingRef.current = false;
+        resizeEdgeRef.current = null;
+        setResizeEdge(null);
+        // window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", handleMouseUp);
+    };
+    const isInRect = (pos, rect) => {
+        if (!rect || !selectedVariant)
+            return false;
+        return (pos.x >= rect.x &&
+            pos.x <= rect.x + rect.width &&
+            pos.y >= rect.y &&
+            pos.y <= rect.y + rect.height);
+    };
+    const handleMouseDown = (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        const bounds = ev.currentTarget.getBoundingClientRect();
+        const pos = {
+            x: (ev.clientX - bounds.left) / bounds.width,
+            y: (ev.clientY - bounds.top) / bounds.height,
+        };
+        const edge = getResizeEdge(pos, rect, bounds);
+        if (edge) {
+            resizeEdgeRef.current = edge;
+            setResizeEdge(edge);
+        }
+        else if (isInRect(pos, rect)) {
+            movingRef.current = true;
+            offset.current = {
+                x: pos.x - rect.x,
+                y: pos.y - rect.y,
+            };
+        }
+        else {
+            setRect({
+                x: (ev.clientX - bounds.left) / bounds.width,
+                y: (ev.clientY - bounds.top) / bounds.height,
+                width: 0,
+                height: 0,
+            });
+        }
+        setStartPos({ x: ev.clientX, y: ev.clientY });
+        window.addEventListener("mouseup", handleMouseUp);
+    };
+    if (!selectedVariant)
+        return null;
+    const imageBounds = imageRef.current?.getBoundingClientRect();
+    const scale = imageBounds ? selectedVariant.width / imageBounds.width : 0;
+    const widthPx = rect ? Math.round(rect.width * selectedVariant.width) : 0;
+    const heightPx = rect ? Math.round(rect.height * selectedVariant.height) : 0;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(dialog_1.Dialog, { header: "Crop " + field.name + " - " + selectedVariantName, pt: { content: { style: { paddingLeft: "0" } } }, visible: true, style: { width: "75vw", height: "75vh" }, onHide: onClose, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1 flex-col justify h-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "w-56 text-sm p-4 bg-gray-100 flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)(LabelAndValue, { label: "Variant:", value: selectedVariantName }), (0, jsx_runtime_1.jsx)(LabelAndValue, { label: "Image Dimensions:", value: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedVariant.width, " x ", selectedVariant.height] }) }), selectedVariant.aspectRatioLock && ((0, jsx_runtime_1.jsx)(LabelAndValue, { label: "Required Aspect Ratio:", value: selectedVariant.aspectRatioLockText })), selectedVariant.minWidth && ((0, jsx_runtime_1.jsx)(LabelAndValue, { label: "Minimum Width:", value: selectedVariant.minWidth })), selectedVariant.minHeight && ((0, jsx_runtime_1.jsx)(LabelAndValue, { label: "Minimum Height:", value: selectedVariant.minHeight })), rect && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(LabelAndValue, { label: "Selection:", value: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [widthPx, " x ", heightPx] }) }), selectedVariant.minWidth &&
+                                                widthPx < selectedVariant.minWidth && ((0, jsx_runtime_1.jsx)("div", { className: "text-red-500", children: "Minimum width not met!" })), selectedVariant.minHeight &&
+                                                heightPx < selectedVariant.minHeight && ((0, jsx_runtime_1.jsx)("div", { className: "text-red-500", children: "Minimum height not met!" }))] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 relative p-3", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 top-3 select-none flex items-center justify-center", children: (0, jsx_runtime_1.jsxs)("div", { ref: imageRef, className: "relative cursor-crosshair max-h-full", style: {
+                                            aspectRatio: `${selectedVariant.width}/${selectedVariant.height}`,
+                                        }, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, children: [(0, jsx_runtime_1.jsx)("img", { className: "object-scale-down", src: selectedVariant.originalSrc ?? selectedVariant.src }), rect && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.classNames)("absolute bg-opacity-70 border text-xs cursor-move", isValid
+                                                    ? "bg-blue-200 border-blue-400 text-blue-500"
+                                                    : "bg-red-200 border-red-400 text-red-500"), style: {
+                                                    left: rect.x * 100 + "%",
+                                                    top: rect.y * 100 + "%",
+                                                    width: widthPx / scale + "px",
+                                                    height: heightPx / scale + "px",
+                                                    cursor: resizeEdge
+                                                        ? resizeEdge.length === 1
+                                                            ? `${resizeEdge}-resize`
+                                                            : `${resizeEdge}-resize`
+                                                        : "move",
+                                                }, children: widthPx / scale > 50 && ((0, jsx_runtime_1.jsxs)("div", { className: "absolute bottom-1 right-2 text-nowrap", style: { textShadow: "white 1px 1px" }, children: [widthPx, " x ", heightPx] })) }))] }) }) })] }), (0, jsx_runtime_1.jsxs)(DialogButtons_1.default, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => setRect(undefined), children: "Reset" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "small", disabled: !isValid, onClick: () => {
+                                    if (pictureValue) {
+                                        if (field) {
+                                            editContext?.operations.editField({
+                                                field: field.descriptor,
+                                                rawValue: JSON.stringify(rawValue),
+                                                refresh: "immediate",
+                                            });
+                                        }
+                                    }
+                                    onClose();
+                                }, children: "Ok" }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onClose, size: "small", children: "Cancel" })] })] }) }) }));
+}
+function LabelAndValue({ label, value, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "font-bold", children: label }), (0, jsx_runtime_1.jsx)("div", { children: value })] }));
+}

package/dist/editor/PictureEditor.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PictureEditor = PictureEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editContext_1 = require("./client/editContext");
+const PictureCropper_1 = require("./PictureCropper");
+function PictureEditor({ field, variantName, style, forwardScrollevents, isPageEditor, }) {
+    const [showMenu, setShowMenu] = (0, react_1.useState)(false);
+    const [showCropper, setShowCropper] = (0, react_1.useState)(false);
+    const editContext = (0, editContext_1.useEditContext)();
+    const variant = field.value?.variants?.find((v) => v.name === variantName);
+    const raw = field?.rawValue && field?.rawValue[0] === "{"
+        ? JSON.parse(field?.rawValue)
+        : { Variants: [] };
+    const rawVariant = raw.Variants?.find((x) => x.Name == variantName);
+    const reset = (0, react_1.useCallback)(() => {
+        raw.Variants = raw.Variants.filter((x) => x.Name !== variantName);
+        editContext.operations.editField({
+            field: field.descriptor,
+            rawValue: JSON.stringify(raw),
+            refresh: "immediate",
+        });
+    }, [field, variant]);
+    const imageSelected = (0, react_1.useCallback)(async (imageId) => {
+        const selected = raw.Variants?.find((x) => x.Name == variantName);
+        if (!selected) {
+            if (!raw.Variants)
+                raw.Variants = [];
+            raw.Variants.push({
+                Name: variantName,
+                MediaId: imageId,
+            });
+        }
+        else {
+            selected.MediaId = imageId;
+        }
+        editContext.operations.editField({
+            field: field.descriptor,
+            rawValue: JSON.stringify(raw),
+            refresh: "immediate",
+        });
+    }, [field, variant]);
+    const videoSelected = (0, react_1.useCallback)(async (videoId) => {
+        const selected = raw.Variants?.find((x) => x.Name == variantName);
+        if (!selected) {
+            if (!raw.Variants)
+                raw.Variants = [];
+            raw.Variants.push({
+                Name: variantName,
+                VideoId: videoId,
+            });
+        }
+        else {
+            selected.VideoId = videoId;
+        }
+        editContext.operations.editField({
+            field: field.descriptor,
+            rawValue: JSON.stringify(raw),
+            refresh: "immediate",
+        });
+    }, [field, variant]);
+    async function selectMedia(mode) {
+        const selectedImageId = await editContext?.selectMedia({
+            selectedIdPath: variant?.idPath || "",
+            mode: mode,
+        });
+        if (selectedImageId)
+            imageSelected(selectedImageId);
+    }
+    async function selectVideo() {
+        const selectedVideoId = await editContext?.selectMedia({
+            selectedIdPath: variant?.idPath || "",
+            mode: "video",
+        });
+        if (selectedVideoId)
+            videoSelected(selectedVideoId);
+    }
+    const notEmpty = variant?.mediaId;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 flex items-center justify-center", onMouseEnter: () => setShowMenu(true), onMouseLeave: () => setShowMenu(false), onClick: () => {
+            if (!isPageEditor)
+                return;
+            const itemId = field.descriptor.item?.id;
+            if (itemId)
+                editContext?.select([itemId]);
+        }, onWheel: (e) => {
+            if (forwardScrollevents)
+                editContext?.pageView.editorIframeRef.current?.contentWindow?.document.documentElement?.scrollBy({
+                    behavior: "instant",
+                    left: 0,
+                    top: e.deltaY,
+                });
+            editContext?.pageView.editorIframeRef.current?.contentWindow?.document.body?.scrollBy({
+                behavior: "instant",
+                left: 0,
+                top: e.deltaY,
+            });
+        }, style: style, "data-testid": "select-media", children: [showMenu && ((0, jsx_runtime_1.jsxs)("div", { className: "p-3 grid grid-cols-2 gap-1.5 items-stretch justify-center text-sm min-w-48", children: [(0, jsx_runtime_1.jsx)(Btn, { label: "Select", icon: "pi pi-image", onClick: () => selectMedia("images"), testId: "select-media-button", className: "min-w-[80px]" }), field.value?.allowVideos && ((0, jsx_runtime_1.jsx)(Btn, { label: "Video", icon: "pi pi-video", onClick: () => selectVideo(), testId: "video-media-button", className: "min-w-[80px]" })), notEmpty && ((0, jsx_runtime_1.jsx)(Btn, { label: "Crop", icon: "pi pi-expand", onClick: () => {
+                            setShowCropper(true);
+                        }, testId: "crop-media-button", className: "min-w-[80px]" })), rawVariant && ((0, jsx_runtime_1.jsx)(Btn, { label: "Reset", icon: "pi pi-times", onClick: () => reset(), testId: "reset-media-button", className: "min-w-[80px]" }))] })), showCropper && ((0, jsx_runtime_1.jsx)(PictureCropper_1.PictureCropper, { field: field, onClose: () => setShowCropper(false), variantName: variantName }))] }));
+}
+function Btn({ label, icon, onClick, testId, className, }) {
+    return ((0, jsx_runtime_1.jsxs)("button", { className: `btn bg-gray-500 text-white p-1.5 rounded-lg opacity-70 border hover:opacity-85 gap-1.5 flex items-center cursor-pointer ${className}`, onClick: onClick, "data-testid": testId, children: [(0, jsx_runtime_1.jsx)("i", { className: icon }), " ", label] }));
+}

package/dist/editor/PictureEditorDialog.js

@@ -0,0 +1,194 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PictureEditorDialog = PictureEditorDialog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dialog_1 = require("primereact/dialog");
+const editContext_1 = require("./client/editContext");
+const react_1 = require("react");
+const button_1 = require("primereact/button");
+const DialogButtons_1 = __importDefault(require("./ui/DialogButtons"));
+const editService_1 = require("./services/editService");
+const picture_shared_1 = require("./picture-shared");
+function PictureEditorDialog({ field, onCancel, onOk, params, }) {
+    const [selectedVariantName, setSelectedVariantName] = (0, react_1.useState)();
+    const [pictureValue, setPictureValue] = (0, react_1.useState)();
+    const [rawValue, setRawValue] = (0, react_1.useState)();
+    const emptyRect = () => ({
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+    });
+    const [rect, setRect] = (0, react_1.useState)(emptyRect());
+    const editContext = (0, editContext_1.useEditContext)();
+    (0, react_1.useEffect)(() => {
+        setSelectedVariantName(field?.value?.variants[0].name);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const deepCopy = JSON.parse(JSON.stringify(field.value));
+        setPictureValue(deepCopy);
+        const raw = field?.rawValue
+            ? JSON.parse(field?.rawValue)
+            : { Variants: [] };
+        setRawValue(raw);
+        if (!field?.value?.variants[0].src)
+            selectMedia(field?.value?.variants[0].name, raw);
+    }, [field]);
+    async function selectMedia(variantName, raw) {
+        const chosenImage = await editContext?.selectMedia({
+            selectedIdPath: selectedVariant?.idPath || "",
+            mode: "images",
+        });
+        if (chosenImage)
+            imageSelected(chosenImage, variantName ?? selectedVariantName, raw ?? rawValue);
+    }
+    const selectedVariant = pictureValue && pictureValue.variants
+        ? pictureValue.variants?.find((x) => x.name == selectedVariantName)
+        : null;
+    (0, react_1.useEffect)(() => {
+        if (selectedVariant?.region &&
+            (!selectedVariant.aspectRatioLock ||
+                Math.abs(selectedVariant.aspectRatioLock -
+                    selectedVariant.region.width / selectedVariant.region.height) < 0.1))
+            setRect({
+                width: selectedVariant.region.width,
+                height: selectedVariant.region.height,
+                top: selectedVariant.region.y,
+                left: selectedVariant.region.x,
+            });
+        else {
+            setRect(emptyRect());
+        }
+    }, [selectedVariantName]);
+    const getPictureFieldValue = async (field, rawValue) => {
+        if (!editContext?.pageView.site)
+            return null;
+        return (0, editService_1.getPictureValue)(field, rawValue, editContext.pageView.site?.name, editContext.sessionId);
+    };
+    const imageSelected = (0, react_1.useCallback)(async (imageId, variantName, rawValue) => {
+        if (!variantName || !rawValue)
+            return;
+        const selected = rawValue.Variants?.find((x) => x.Name == variantName);
+        if (!selected) {
+            if (!rawValue.Variants)
+                rawValue.Variants = [];
+            rawValue.Variants.push({
+                Name: variantName,
+                MediaId: imageId,
+            });
+        }
+        else {
+            selected.MediaId = imageId;
+        }
+        setRawValue(rawValue);
+        const newValue = await getPictureFieldValue(field, rawValue);
+        if (newValue) {
+            setPictureValue(newValue);
+        }
+    }, []);
+    const updateRawValue = async (rawValue) => {
+        setRawValue(rawValue);
+        const newValue = await getPictureFieldValue(field, rawValue);
+        if (newValue) {
+            setPictureValue(newValue);
+        }
+    };
+    const setVariantCrop = async () => {
+        if (!rawValue)
+            return;
+        if (!selectedVariantName)
+            return;
+        if (selectedVariant) {
+            let selected = rawValue.Variants?.find((x) => x.Name == selectedVariantName);
+            if (!selected) {
+                selected = {
+                    Name: selectedVariantName,
+                    MediaId: selectedVariant.mediaId,
+                };
+                rawValue.Variants?.push(selected);
+            }
+            if (selected) {
+                selected.Region = {
+                    X: rect.left,
+                    Y: rect.top,
+                    Width: rect.width,
+                    Height: rect.height,
+                };
+                await updateRawValue(rawValue);
+            }
+        }
+    };
+    const usage = getUsage(pictureValue, params);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(dialog_1.Dialog, { header: "Edit " + field.name, visible: true, style: { width: "70vw", height: "70vh" }, onHide: onCancel, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1 flex-col justify h-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: " h-full border-r pt-3 w-48 relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 overflow-y-auto flex flex-col gap-6", children: pictureValue &&
+                                            pictureValue.variants?.map((variant) => ((0, jsx_runtime_1.jsxs)("div", { onClick: () => setSelectedVariantName(variant.name), className: "text-xs flex flex-col items-center justify-center gap-1 cursor-pointer", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex justify-center items-center h-40 w-40 border relative" +
+                                                            (selectedVariantName == variant.name
+                                                                ? " shadow-xl "
+                                                                : ""), children: variant.src && (0, jsx_runtime_1.jsx)("img", { src: variant.thumbSrc }) }), (0, jsx_runtime_1.jsxs)("div", { className: "w-40", children: [(0, jsx_runtime_1.jsx)("div", { children: variant.name }), (0, jsx_runtime_1.jsx)("div", { children: variant.aspectRatioLockText }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "break-all", children: ["Name: ", variant.mediaItemName] }), (0, jsx_runtime_1.jsxs)("div", { children: ["Orig. size: ", variant.width, " x ", variant.height] }), (variant.width < 1 || variant.height < 1) && ((0, jsx_runtime_1.jsxs)("span", { children: [" ", (0, jsx_runtime_1.jsx)("i", { className: "pi pi-exclamation-triangle text-red-600 " })] }))] })] })] }, variant.name))) }), usage && (0, jsx_runtime_1.jsx)("div", { className: "text-xs", children: usage })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 relative p-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 top-3 overflow-auto select-none flex align-center justify-center", children: [selectedVariant && ((0, jsx_runtime_1.jsxs)("div", { className: "relative", onDoubleClick: () => selectMedia(), onMouseDown: (ev) => {
+                                                ev.preventDefault();
+                                                ev.stopPropagation();
+                                                const bounds = ev.currentTarget.getBoundingClientRect();
+                                                setRect({
+                                                    left: (ev.clientX - bounds.left) / bounds.width,
+                                                    top: (ev.clientY - bounds.top) / bounds.height,
+                                                    width: 0,
+                                                    height: 0,
+                                                });
+                                            }, onMouseMoveCapture: (ev) => {
+                                                if (ev.buttons === 1) {
+                                                    const bounds = ev.currentTarget.getBoundingClientRect();
+                                                    const width = (ev.clientX - bounds.left) / bounds.width - rect.left;
+                                                    const newRect = {
+                                                        ...rect,
+                                                        width,
+                                                        height: selectedVariant.aspectRatioLock
+                                                            ? width / selectedVariant.aspectRatioLock
+                                                            : (ev.clientY - bounds.top) / bounds.height -
+                                                                rect.top,
+                                                    };
+                                                    setRect(newRect);
+                                                    ev.preventDefault();
+                                                    ev.stopPropagation();
+                                                }
+                                            }, onMouseUp: () => setVariantCrop(), children: [(0, jsx_runtime_1.jsx)("img", { src: selectedVariant.originalSrc ?? selectedVariant.src, className: "object-contain h-full w-full" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute bg-opacity-70 bg-gray-300", style: {
+                                                        left: rect.left * 100 + "%",
+                                                        top: rect.top * 100 + "%",
+                                                        width: rect.width * 100 + "%",
+                                                        height: rect.height * 100 + "%",
+                                                    } })] })), selectedVariant && ((0, jsx_runtime_1.jsxs)("div", { className: "absolute top-0 right-0 cursor-pointer text-sm flex flex-col gap-1 items-center p-2 bg-gray-100 bg-opacity-70", onClick: () => selectMedia(), children: [(0, jsx_runtime_1.jsx)("i", { className: "pi pi-pencil text-xl" }), "Choose"] }))] }) })] }), (0, jsx_runtime_1.jsxs)(DialogButtons_1.default, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { size: "small", onClick: () => {
+                                    if (pictureValue) {
+                                        if (field) {
+                                            editContext?.operations.editField({
+                                                field: field.descriptor,
+                                                rawValue: JSON.stringify(rawValue),
+                                                refresh: "immediate",
+                                            });
+                                        }
+                                        onOk(pictureValue);
+                                    }
+                                }, children: "Ok" }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => {
+                                    onCancel();
+                                }, size: "small", children: "Cancel" })] })] }) }) }));
+}
+function getUsage(pictureValue, params) {
+    if (!params)
+        return;
+    if (!pictureValue)
+        return;
+    if (pictureValue.variants.length <= 1)
+        return;
+    const mediaParams = typeof params === "object" && "default" in params ? params : undefined;
+    if (mediaParams) {
+        const sources = Object.keys(mediaParams ?? {});
+        const variants = sources
+            .map((source) => ({
+            source,
+            variant: (0, picture_shared_1.getRenderedPictureVariant)(mediaParams[source], pictureValue.variants),
+        }))
+            .filter((x) => x.variant);
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["This field rendering is using these variants:", (0, jsx_runtime_1.jsx)("table", { children: variants.map((v) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: v.source }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("b", { children: v.variant.name }) })] }))) })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["This field rendering is using the variant", " ", (0, jsx_runtime_1.jsxs)("b", { children: [(0, picture_shared_1.getRenderedPictureVariant)(params, pictureValue.variants)?.name, "."] })] }));
+}

package/dist/editor/ScrollingContentTree.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollingContentTree = ScrollingContentTree;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ContentTree_1 = __importDefault(require("./ContentTree"));
+const config_1 = require("../config/config");
+const editContext_1 = require("./client/editContext");
+function ScrollingContentTree({ selectedItemId, onSelectionChange, rootItemId, }) {
+    const [selectedItem, setSelectdItem] = (0, react_1.useState)(null);
+    const editContext = (0, editContext_1.useEditContext)();
+    (0, react_1.useEffect)(() => {
+        const loadItem = async () => {
+            if (!selectedItemId)
+                return;
+            const item = await editContext.itemsRepository.getItem({
+                id: selectedItemId,
+                language: editContext.currentItemDescriptor?.language ?? "en",
+                version: 0,
+            });
+            if (item)
+                setSelectdItem(item);
+        };
+        loadItem();
+    }, [selectedItemId]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 overflow-auto", children: (0, jsx_runtime_1.jsx)(ContentTree_1.default, { language: editContext.currentItemDescriptor?.language ?? "en", rootItemId: rootItemId ?? config_1.contentItemId, expandIdPath: selectedItem?.idPath, selectedItemIds: selectedItemId ? [selectedItemId] : [], selectionMode: "single", className: "h-full p-1", onSelectionChange: onSelectionChange }) }));
+}