@payloadcms/ui 3.0.0-canary.f6e77b8 → 3.0.0-canary.f83d96a

package/dist/elements/EditUpload/index.js

@@ -1,49 +1,69 @@
 'use client';
-import * as facelessUIImport from '@faceless-ui/modal';
-import React, { useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useModal } from '@faceless-ui/modal';
+import React, { forwardRef, useRef, useState } from 'react';
 import ReactCrop from 'react-image-crop';
+import 'react-image-crop/dist/ReactCrop.css';
 import { editDrawerSlug } from '../../elements/Upload/index.js';
-import { Plus } from '../../icons/Plus/index.js';
+import { PlusIcon } from '../../icons/Plus/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Button } from '../Button/index.js';
+import './index.scss';
 const baseClass = 'edit-upload';
-const Input = ({ name, onChange, value })=>/*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__input`
-    }, name, /*#__PURE__*/ React.createElement("input", {
-        name: name,
-        onChange: (e)=>onChange(e.target.value),
-        type: "number",
-        value: value
-    }));
+const Input = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { name, onChange, value } = props;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: `${baseClass}__input`,
+        children: [
+            name,
+            /*#__PURE__*/ _jsx("input", {
+                name: name,
+                onChange: (e)=>onChange(e.target.value),
+                ref: ref,
+                type: "number",
+                value: value
+            })
+        ]
+    });
+});
 const defaultCrop = {
     height: 100,
+    heightPixels: 0,
     unit: '%',
     width: 100,
+    widthPixels: 0,
     x: 0,
     y: 0
 };
-const defaultPointPosition = {
-    x: 50,
-    y: 50
-};
 export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, initialFocalPoint, onSave, showCrop, showFocalPoint })=>{
-    const { useModal } = facelessUIImport;
     const { closeModal } = useModal();
     const { t } = useTranslation();
     const [crop, setCrop] = useState(()=>({
             ...defaultCrop,
             ...initialCrop
         }));
-    const [pointPosition, setPointPosition] = useState(()=>({
-            ...defaultPointPosition,
+    const defaultFocalPosition = {
+        x: 50,
+        y: 50
+    };
+    const [focalPosition, setFocalPosition] = useState(()=>({
+            ...defaultFocalPosition,
             ...initialFocalPoint
         }));
     const [checkBounds, setCheckBounds] = useState(false);
     const [originalHeight, setOriginalHeight] = useState(0);
     const [originalWidth, setOriginalWidth] = useState(0);
-    const focalWrapRef = useRef();
-    const imageRef = useRef();
-    const cropRef = useRef();
+    const focalWrapRef = useRef(undefined);
+    const imageRef = useRef(undefined);
+    const cropRef = useRef(undefined);
+    const heightRef = useRef(null);
+    const widthRef = useRef(null);
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const onImageLoad = (e)=>{
+        setOriginalHeight(e.currentTarget.naturalHeight);
+        setOriginalWidth(e.currentTarget.naturalWidth);
+        setImageLoaded(true);
+    };
     const fineTuneCrop = ({ dimension, value })=>{
         const intValue = parseInt(value);
         if (dimension === 'width' && intValue >= originalWidth) return null;
@@ -55,10 +75,10 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
             [dimension]: percentage
         });
     };
-    const fineTuneFocalPoint = ({ coordinate, value })=>{
+    const fineTuneFocalPosition = ({ coordinate, value })=>{
         const intValue = parseInt(value);
         if (intValue >= 0 && intValue <= 100) {
-            setPointPosition((prevPosition)=>({
+            setFocalPosition((prevPosition)=>({
                     ...prevPosition,
                     [coordinate]: intValue
                 }));
@@ -66,13 +86,17 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
     };
     const saveEdits = ()=>{
         if (typeof onSave === 'function') onSave({
-            crop,
-            pointPosition
+            crop: crop ? {
+                ...crop,
+                heightPixels: Number(heightRef.current?.value ?? crop.heightPixels),
+                widthPixels: Number(widthRef.current?.value ?? crop.widthPixels)
+            } : undefined,
+            focalPosition
         });
         closeModal(editDrawerSlug);
     };
     const onDragEnd = React.useCallback(({ x, y })=>{
-        setPointPosition({
+        setFocalPosition({
             x,
             y
         });
@@ -83,136 +107,207 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
         const boundsRect = showCrop ? cropRef.current.getBoundingClientRect() : imageRef.current.getBoundingClientRect();
         const xCenter = (boundsRect.left - containerRect.left + boundsRect.width / 2) / containerRect.width * 100;
         const yCenter = (boundsRect.top - containerRect.top + boundsRect.height / 2) / containerRect.height * 100;
-        setPointPosition({
+        setFocalPosition({
             x: xCenter,
             y: yCenter
         });
     };
     const fileSrcToUse = imageCacheTag ? `${fileSrc}?${imageCacheTag}` : fileSrc;
-    return /*#__PURE__*/ React.createElement("div", {
-        className: baseClass
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__header`
-    }, /*#__PURE__*/ React.createElement("h2", {
-        title: `${t('general:editing')} ${fileName}`
-    }, t('general:editing'), " ", fileName), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__actions`
-    }, /*#__PURE__*/ React.createElement(Button, {
-        "aria-label": t('general:cancel'),
-        buttonStyle: "secondary",
-        className: `${baseClass}__cancel`,
-        onClick: ()=>closeModal(editDrawerSlug)
-    }, t('general:cancel')), /*#__PURE__*/ React.createElement(Button, {
-        "aria-label": t('general:applyChanges'),
-        buttonStyle: "primary",
-        className: `${baseClass}__save`,
-        onClick: saveEdits
-    }, t('general:applyChanges')))), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__toolWrap`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__crop`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__focal-wrapper`,
-        ref: focalWrapRef,
-        style: {
-            aspectRatio: `${originalWidth / originalHeight}`
-        }
-    }, showCrop ? /*#__PURE__*/ React.createElement(ReactCrop, {
-        className: `${baseClass}__reactCrop`,
-        crop: crop,
-        onChange: (_, c)=>setCrop(c),
-        onComplete: ()=>setCheckBounds(true),
-        renderSelectionAddon: ()=>{
-            return /*#__PURE__*/ React.createElement("div", {
-                className: `${baseClass}__crop-window`,
-                ref: cropRef
-            });
-        }
-    }, /*#__PURE__*/ React.createElement("img", {
-        alt: t('upload:setCropArea'),
-        onLoad: (e)=>{
-            setOriginalHeight(e.currentTarget.naturalHeight);
-            setOriginalWidth(e.currentTarget.naturalWidth);
-        },
-        ref: imageRef,
-        src: fileSrcToUse
-    })) : /*#__PURE__*/ React.createElement("img", {
-        alt: t('upload:setFocalPoint'),
-        onLoad: (e)=>{
-            setOriginalHeight(e.currentTarget.naturalHeight);
-            setOriginalWidth(e.currentTarget.naturalWidth);
-        },
-        ref: imageRef,
-        src: fileSrcToUse
-    }), showFocalPoint && /*#__PURE__*/ React.createElement(DraggableElement, {
-        boundsRef: showCrop ? cropRef : imageRef,
-        checkBounds: showCrop ? checkBounds : false,
-        className: `${baseClass}__focalPoint`,
-        containerRef: focalWrapRef,
-        initialPosition: pointPosition,
-        onDragEnd: onDragEnd,
-        setCheckBounds: showCrop ? setCheckBounds : false
-    }, /*#__PURE__*/ React.createElement(Plus, null)))), (showCrop || showFocalPoint) && /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__sidebar`
-    }, showCrop && /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__groupWrap`
-    }, /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__titleWrap`
-    }, /*#__PURE__*/ React.createElement("h3", null, t('upload:crop')), /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "none",
-        className: `${baseClass}__reset`,
-        onClick: ()=>setCrop({
-                height: 100,
-                unit: '%',
-                width: 100,
-                x: 0,
-                y: 0
-            })
-    }, t('general:reset')))), /*#__PURE__*/ React.createElement("span", {
-        className: `${baseClass}__description`
-    }, t('upload:cropToolDescription')), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__inputsWrap`
-    }, /*#__PURE__*/ React.createElement(Input, {
-        name: `${t('upload:width')} (px)`,
-        onChange: (value)=>fineTuneCrop({
-                dimension: 'width',
-                value
-            }),
-        value: (crop.width / 100 * originalWidth).toFixed(0)
-    }), /*#__PURE__*/ React.createElement(Input, {
-        name: `${t('upload:height')} (px)`,
-        onChange: (value)=>fineTuneCrop({
-                dimension: 'height',
-                value
-            }),
-        value: (crop.height / 100 * originalHeight).toFixed(0)
-    }))), showFocalPoint && /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__groupWrap`
-    }, /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__titleWrap`
-    }, /*#__PURE__*/ React.createElement("h3", null, t('upload:focalPoint')), /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "none",
-        className: `${baseClass}__reset`,
-        onClick: centerFocalPoint
-    }, t('general:reset')))), /*#__PURE__*/ React.createElement("span", {
-        className: `${baseClass}__description`
-    }, t('upload:focalPointDescription')), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__inputsWrap`
-    }, /*#__PURE__*/ React.createElement(Input, {
-        name: "X %",
-        onChange: (value)=>fineTuneFocalPoint({
-                coordinate: 'x',
-                value
+    return /*#__PURE__*/ _jsxs("div", {
+        className: baseClass,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__header`,
+                children: [
+                    /*#__PURE__*/ _jsxs("h2", {
+                        title: `${t('general:editing')} ${fileName}`,
+                        children: [
+                            t('general:editing'),
+                            " ",
+                            fileName
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: `${baseClass}__actions`,
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                "aria-label": t('general:cancel'),
+                                buttonStyle: "secondary",
+                                className: `${baseClass}__cancel`,
+                                onClick: ()=>closeModal(editDrawerSlug),
+                                children: t('general:cancel')
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                "aria-label": t('general:applyChanges'),
+                                buttonStyle: "primary",
+                                className: `${baseClass}__save`,
+                                disabled: !imageLoaded,
+                                onClick: saveEdits,
+                                children: t('general:applyChanges')
+                            })
+                        ]
+                    })
+                ]
             }),
-        value: pointPosition.x.toFixed(0)
-    }), /*#__PURE__*/ React.createElement(Input, {
-        name: "Y %",
-        onChange: (value)=>fineTuneFocalPoint({
-                coordinate: 'y',
-                value
-            }),
-        value: pointPosition.y.toFixed(0)
-    }))))));
+            /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__toolWrap`,
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: `${baseClass}__crop`,
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            className: `${baseClass}__focal-wrapper`,
+                            ref: focalWrapRef,
+                            style: {
+                                aspectRatio: `${originalWidth / originalHeight}`
+                            },
+                            children: [
+                                showCrop ? /*#__PURE__*/ _jsx(ReactCrop, {
+                                    className: `${baseClass}__reactCrop`,
+                                    crop: crop,
+                                    onChange: (_, c)=>setCrop(c),
+                                    onComplete: ()=>setCheckBounds(true),
+                                    renderSelectionAddon: ()=>{
+                                        return /*#__PURE__*/ _jsx("div", {
+                                            className: `${baseClass}__crop-window`,
+                                            ref: cropRef
+                                        });
+                                    },
+                                    children: /*#__PURE__*/ _jsx("img", {
+                                        alt: t('upload:setCropArea'),
+                                        onLoad: onImageLoad,
+                                        ref: imageRef,
+                                        src: fileSrcToUse
+                                    })
+                                }) : /*#__PURE__*/ _jsx("img", {
+                                    alt: t('upload:setFocalPoint'),
+                                    onLoad: onImageLoad,
+                                    ref: imageRef,
+                                    src: fileSrcToUse
+                                }),
+                                showFocalPoint && /*#__PURE__*/ _jsx(DraggableElement, {
+                                    boundsRef: showCrop ? cropRef : imageRef,
+                                    checkBounds: showCrop ? checkBounds : false,
+                                    className: `${baseClass}__focalPoint`,
+                                    containerRef: focalWrapRef,
+                                    initialPosition: focalPosition,
+                                    onDragEnd: onDragEnd,
+                                    setCheckBounds: showCrop ? setCheckBounds : false,
+                                    children: /*#__PURE__*/ _jsx(PlusIcon, {})
+                                })
+                            ]
+                        })
+                    }),
+                    (showCrop || showFocalPoint) && /*#__PURE__*/ _jsxs("div", {
+                        className: `${baseClass}__sidebar`,
+                        children: [
+                            showCrop && /*#__PURE__*/ _jsxs("div", {
+                                className: `${baseClass}__groupWrap`,
+                                children: [
+                                    /*#__PURE__*/ _jsx("div", {
+                                        children: /*#__PURE__*/ _jsxs("div", {
+                                            className: `${baseClass}__titleWrap`,
+                                            children: [
+                                                /*#__PURE__*/ _jsx("h3", {
+                                                    children: t('upload:crop')
+                                                }),
+                                                /*#__PURE__*/ _jsx(Button, {
+                                                    buttonStyle: "none",
+                                                    className: `${baseClass}__reset`,
+                                                    onClick: ()=>setCrop({
+                                                            height: 100,
+                                                            heightPixels: originalHeight,
+                                                            unit: '%',
+                                                            width: 100,
+                                                            widthPixels: originalWidth,
+                                                            x: 0,
+                                                            y: 0
+                                                        }),
+                                                    children: t('general:reset')
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: `${baseClass}__description`,
+                                        children: t('upload:cropToolDescription')
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: `${baseClass}__inputsWrap`,
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Input, {
+                                                name: `${t('upload:width')} (px)`,
+                                                onChange: (value)=>fineTuneCrop({
+                                                        dimension: 'width',
+                                                        value
+                                                    }),
+                                                ref: widthRef,
+                                                value: (crop.width / 100 * originalWidth).toFixed(0)
+                                            }),
+                                            /*#__PURE__*/ _jsx(Input, {
+                                                name: `${t('upload:height')} (px)`,
+                                                onChange: (value)=>fineTuneCrop({
+                                                        dimension: 'height',
+                                                        value
+                                                    }),
+                                                ref: heightRef,
+                                                value: (crop.height / 100 * originalHeight).toFixed(0)
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            showFocalPoint && /*#__PURE__*/ _jsxs("div", {
+                                className: `${baseClass}__groupWrap`,
+                                children: [
+                                    /*#__PURE__*/ _jsx("div", {
+                                        children: /*#__PURE__*/ _jsxs("div", {
+                                            className: `${baseClass}__titleWrap`,
+                                            children: [
+                                                /*#__PURE__*/ _jsx("h3", {
+                                                    children: t('upload:focalPoint')
+                                                }),
+                                                /*#__PURE__*/ _jsx(Button, {
+                                                    buttonStyle: "none",
+                                                    className: `${baseClass}__reset`,
+                                                    onClick: centerFocalPoint,
+                                                    children: t('general:reset')
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: `${baseClass}__description`,
+                                        children: t('upload:focalPointDescription')
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: `${baseClass}__inputsWrap`,
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Input, {
+                                                name: "X %",
+                                                onChange: (value)=>fineTuneFocalPosition({
+                                                        coordinate: 'x',
+                                                        value
+                                                    }),
+                                                value: focalPosition.x.toFixed(0)
+                                            }),
+                                            /*#__PURE__*/ _jsx(Input, {
+                                                name: "Y %",
+                                                onChange: (value)=>fineTuneFocalPosition({
+                                                        coordinate: 'y',
+                                                        value
+                                                    }),
+                                                value: focalPosition.y.toFixed(0)
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
 };
 const DraggableElement = ({ boundsRef, checkBounds, children, className, containerRef, initialPosition = {
     x: 50,
@@ -223,7 +318,7 @@ const DraggableElement = ({ boundsRef, checkBounds, children, className, contain
         y: initialPosition.y
     });
     const [isDragging, setIsDragging] = useState(false);
-    const dragRef = useRef();
+    const dragRef = useRef(undefined);
     const getCoordinates = React.useCallback((mouseXArg, mouseYArg, recenter)=>{
         const containerRect = containerRef.current.getBoundingClientRect();
         const boundsRect = boundsRef.current.getBoundingClientRect();
@@ -310,26 +405,31 @@ const DraggableElement = ({ boundsRef, checkBounds, children, className, contain
         initialPosition.x,
         initialPosition.y
     ]);
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ _jsxs("div", {
         className: [
             `${baseClass}__draggable-container`,
             isDragging && `${baseClass}__draggable-container--dragging`
         ].filter(Boolean).join(' '),
-        onMouseMove: handleMouseMove
-    }, /*#__PURE__*/ React.createElement("button", {
-        className: [
-            `${baseClass}__draggable`,
-            className
-        ].filter(Boolean).join(' '),
-        onMouseDown: handleMouseDown,
-        onMouseUp: onDrop,
-        ref: dragRef,
-        style: {
-            left: `${position.x}%`,
-            top: `${position.y}%`
-        },
-        type: "button"
-    }, children), /*#__PURE__*/ React.createElement("div", null));
+        onMouseMove: handleMouseMove,
+        children: [
+            /*#__PURE__*/ _jsx("button", {
+                className: [
+                    `${baseClass}__draggable`,
+                    className
+                ].filter(Boolean).join(' '),
+                onMouseDown: handleMouseDown,
+                onMouseUp: onDrop,
+                ref: dragRef,
+                style: {
+                    left: `${position.x}%`,
+                    top: `${position.y}%`
+                },
+                type: "button",
+                children: children
+            }),
+            /*#__PURE__*/ _jsx("div", {})
+        ]
+    });
 };
 
 //# sourceMappingURL=index.js.map

package/dist/elements/EditUpload/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/EditUpload/index.tsx"],"sourcesContent":["'use client'\nimport type { Data } from 'payload/types'\nimport type CropType from 'react-image-crop'\n\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport React, { useRef, useState } from 'react'\nimport ReactCrop from 'react-image-crop'\nimport 'react-image-crop/dist/ReactCrop.css'\n\nimport { editDrawerSlug } from '../../elements/Upload/index.js'\nimport { Plus } from '../../icons/Plus/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst baseClass = 'edit-upload'\n\nconst Input: React.FC<{ name: string; onChange: (value: string) => void; value: string }> = ({\n  name,\n  onChange,\n  value,\n}) => (\n  <div className={`${baseClass}__input`}>\n    {name}\n    <input name={name} onChange={(e) => onChange(e.target.value)} type=\"number\" value={value} />\n  </div>\n)\n\ntype FocalPosition = {\n  x: number\n  y: number\n}\n\nexport type EditUploadProps = {\n  doc?: Data\n  fileName: string\n  fileSrc: string\n  imageCacheTag?: string\n  initialCrop?: CropType\n  initialFocalPoint?: FocalPosition\n  onSave?: ({ crop, pointPosition }: { crop: CropType; pointPosition: FocalPosition }) => void\n  showCrop?: boolean\n  showFocalPoint?: boolean\n}\n\nconst defaultCrop: CropType = {\n  height: 100,\n  unit: '%',\n  width: 100,\n  x: 0,\n  y: 0,\n}\n\nconst defaultPointPosition: FocalPosition = {\n  x: 50,\n  y: 50,\n}\n\nexport const EditUpload: React.FC<EditUploadProps> = ({\n  fileName,\n  fileSrc,\n  imageCacheTag,\n  initialCrop,\n  initialFocalPoint,\n  onSave,\n  showCrop,\n  showFocalPoint,\n}) => {\n  const { useModal } = facelessUIImport\n\n  const { closeModal } = useModal()\n  const { t } = useTranslation()\n\n  const [crop, setCrop] = useState<CropType>(() => ({\n    ...defaultCrop,\n    ...initialCrop,\n  }))\n\n  const [pointPosition, setPointPosition] = useState<FocalPosition>(() => ({\n    ...defaultPointPosition,\n    ...initialFocalPoint,\n  }))\n  const [checkBounds, setCheckBounds] = useState<boolean>(false)\n  const [originalHeight, setOriginalHeight] = useState<number>(0)\n  const [originalWidth, setOriginalWidth] = useState<number>(0)\n\n  const focalWrapRef = useRef<HTMLDivElement | undefined>()\n  const imageRef = useRef<HTMLImageElement | undefined>()\n  const cropRef = useRef<HTMLDivElement | undefined>()\n\n  const fineTuneCrop = ({ dimension, value }: { dimension: 'height' | 'width'; value: string }) => {\n    const intValue = parseInt(value)\n    if (dimension === 'width' && intValue >= originalWidth) return null\n    if (dimension === 'height' && intValue >= originalHeight) return null\n\n    const percentage = 100 * (intValue / (dimension === 'width' ? originalWidth : originalHeight))\n\n    if (percentage === 100 || percentage === 0) return null\n\n    setCrop({\n      ...crop,\n      [dimension]: percentage,\n    })\n  }\n\n  const fineTuneFocalPoint = ({ coordinate, value }: { coordinate: 'x' | 'y'; value: string }) => {\n    const intValue = parseInt(value)\n    if (intValue >= 0 && intValue <= 100) {\n      setPointPosition((prevPosition) => ({ ...prevPosition, [coordinate]: intValue }))\n    }\n  }\n\n  const saveEdits = () => {\n    if (typeof onSave === 'function')\n      onSave({\n        crop,\n        pointPosition,\n      })\n    closeModal(editDrawerSlug)\n  }\n\n  const onDragEnd = React.useCallback(({ x, y }) => {\n    setPointPosition({ x, y })\n    setCheckBounds(false)\n  }, [])\n\n  const centerFocalPoint = () => {\n    const containerRect = focalWrapRef.current.getBoundingClientRect()\n    const boundsRect = showCrop\n      ? cropRef.current.getBoundingClientRect()\n      : imageRef.current.getBoundingClientRect()\n    const xCenter =\n      ((boundsRect.left - containerRect.left + boundsRect.width / 2) / containerRect.width) * 100\n    const yCenter =\n      ((boundsRect.top - containerRect.top + boundsRect.height / 2) / containerRect.height) * 100\n    setPointPosition({ x: xCenter, y: yCenter })\n  }\n\n  const fileSrcToUse = imageCacheTag ? `${fileSrc}?${imageCacheTag}` : fileSrc\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__header`}>\n        <h2 title={`${t('general:editing')} ${fileName}`}>\n          {t('general:editing')} {fileName}\n        </h2>\n        <div className={`${baseClass}__actions`}>\n          <Button\n            aria-label={t('general:cancel')}\n            buttonStyle=\"secondary\"\n            className={`${baseClass}__cancel`}\n            onClick={() => closeModal(editDrawerSlug)}\n          >\n            {t('general:cancel')}\n          </Button>\n          <Button\n            aria-label={t('general:applyChanges')}\n            buttonStyle=\"primary\"\n            className={`${baseClass}__save`}\n            onClick={saveEdits}\n          >\n            {t('general:applyChanges')}\n          </Button>\n        </div>\n      </div>\n      <div className={`${baseClass}__toolWrap`}>\n        <div className={`${baseClass}__crop`}>\n          <div\n            className={`${baseClass}__focal-wrapper`}\n            ref={focalWrapRef}\n            style={{\n              aspectRatio: `${originalWidth / originalHeight}`,\n            }}\n          >\n            {showCrop ? (\n              <ReactCrop\n                className={`${baseClass}__reactCrop`}\n                crop={crop}\n                onChange={(_, c) => setCrop(c)}\n                onComplete={() => setCheckBounds(true)}\n                renderSelectionAddon={() => {\n                  return <div className={`${baseClass}__crop-window`} ref={cropRef} />\n                }}\n              >\n                <img\n                  alt={t('upload:setCropArea')}\n                  onLoad={(e) => {\n                    setOriginalHeight(e.currentTarget.naturalHeight)\n                    setOriginalWidth(e.currentTarget.naturalWidth)\n                  }}\n                  ref={imageRef}\n                  src={fileSrcToUse}\n                />\n              </ReactCrop>\n            ) : (\n              <img\n                alt={t('upload:setFocalPoint')}\n                onLoad={(e) => {\n                  setOriginalHeight(e.currentTarget.naturalHeight)\n                  setOriginalWidth(e.currentTarget.naturalWidth)\n                }}\n                ref={imageRef}\n                src={fileSrcToUse}\n              />\n            )}\n            {showFocalPoint && (\n              <DraggableElement\n                boundsRef={showCrop ? cropRef : imageRef}\n                checkBounds={showCrop ? checkBounds : false}\n                className={`${baseClass}__focalPoint`}\n                containerRef={focalWrapRef}\n                initialPosition={pointPosition}\n                onDragEnd={onDragEnd}\n                setCheckBounds={showCrop ? setCheckBounds : false}\n              >\n                <Plus />\n              </DraggableElement>\n            )}\n          </div>\n        </div>\n        {(showCrop || showFocalPoint) && (\n          <div className={`${baseClass}__sidebar`}>\n            {showCrop && (\n              <div className={`${baseClass}__groupWrap`}>\n                <div>\n                  <div className={`${baseClass}__titleWrap`}>\n                    <h3>{t('upload:crop')}</h3>\n                    <Button\n                      buttonStyle=\"none\"\n                      className={`${baseClass}__reset`}\n                      onClick={() =>\n                        setCrop({\n                          height: 100,\n                          unit: '%',\n                          width: 100,\n                          x: 0,\n                          y: 0,\n                        })\n                      }\n                    >\n                      {t('general:reset')}\n                    </Button>\n                  </div>\n                </div>\n                <span className={`${baseClass}__description`}>\n                  {t('upload:cropToolDescription')}\n                </span>\n                <div className={`${baseClass}__inputsWrap`}>\n                  <Input\n                    name={`${t('upload:width')} (px)`}\n                    onChange={(value) => fineTuneCrop({ dimension: 'width', value })}\n                    value={((crop.width / 100) * originalWidth).toFixed(0)}\n                  />\n                  <Input\n                    name={`${t('upload:height')} (px)`}\n                    onChange={(value) => fineTuneCrop({ dimension: 'height', value })}\n                    value={((crop.height / 100) * originalHeight).toFixed(0)}\n                  />\n                </div>\n              </div>\n            )}\n\n            {showFocalPoint && (\n              <div className={`${baseClass}__groupWrap`}>\n                <div>\n                  <div className={`${baseClass}__titleWrap`}>\n                    <h3>{t('upload:focalPoint')}</h3>\n                    <Button\n                      buttonStyle=\"none\"\n                      className={`${baseClass}__reset`}\n                      onClick={centerFocalPoint}\n                    >\n                      {t('general:reset')}\n                    </Button>\n                  </div>\n                </div>\n                <span className={`${baseClass}__description`}>\n                  {t('upload:focalPointDescription')}\n                </span>\n                <div className={`${baseClass}__inputsWrap`}>\n                  <Input\n                    name=\"X %\"\n                    onChange={(value) => fineTuneFocalPoint({ coordinate: 'x', value })}\n                    value={pointPosition.x.toFixed(0)}\n                  />\n                  <Input\n                    name=\"Y %\"\n                    onChange={(value) => fineTuneFocalPoint({ coordinate: 'y', value })}\n                    value={pointPosition.y.toFixed(0)}\n                  />\n                </div>\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst DraggableElement = ({\n  boundsRef,\n  checkBounds,\n  children,\n  className,\n  containerRef,\n  initialPosition = { x: 50, y: 50 },\n  onDragEnd,\n  setCheckBounds,\n}) => {\n  const [position, setPosition] = useState({ x: initialPosition.x, y: initialPosition.y })\n  const [isDragging, setIsDragging] = useState(false)\n  const dragRef = useRef<HTMLButtonElement | undefined>()\n\n  const getCoordinates = React.useCallback(\n    (mouseXArg?: number, mouseYArg?: number, recenter?: boolean) => {\n      const containerRect = containerRef.current.getBoundingClientRect()\n      const boundsRect = boundsRef.current.getBoundingClientRect()\n      const mouseX = mouseXArg ?? boundsRect.left\n      const mouseY = mouseYArg ?? boundsRect.top\n\n      const xOutOfBounds = mouseX < boundsRect.left || mouseX > boundsRect.right\n      const yOutOfBounds = mouseY < boundsRect.top || mouseY > boundsRect.bottom\n\n      let x = ((mouseX - containerRect.left) / containerRect.width) * 100\n      let y = ((mouseY - containerRect.top) / containerRect.height) * 100\n      const xCenter =\n        ((boundsRect.left - containerRect.left + boundsRect.width / 2) / containerRect.width) * 100\n      const yCenter =\n        ((boundsRect.top - containerRect.top + boundsRect.height / 2) / containerRect.height) * 100\n      if (xOutOfBounds || yOutOfBounds) {\n        setIsDragging(false)\n        if (mouseX < boundsRect.left) {\n          x = ((boundsRect.left - containerRect.left) / containerRect.width) * 100\n        } else if (mouseX > boundsRect.right) {\n          x =\n            ((containerRect.width - (containerRect.right - boundsRect.right)) /\n              containerRect.width) *\n            100\n        }\n\n        if (mouseY < boundsRect.top) {\n          y = ((boundsRect.top - containerRect.top) / containerRect.height) * 100\n        } else if (mouseY > boundsRect.bottom) {\n          y =\n            ((containerRect.height - (containerRect.bottom - boundsRect.bottom)) /\n              containerRect.height) *\n            100\n        }\n\n        if (recenter) {\n          x = xOutOfBounds ? xCenter : x\n          y = yOutOfBounds ? yCenter : y\n        }\n      }\n\n      return { x, y }\n    },\n    [boundsRef, containerRef],\n  )\n\n  const handleMouseDown = (event) => {\n    event.preventDefault()\n    setIsDragging(true)\n  }\n\n  const handleMouseMove = (event) => {\n    if (!isDragging) return null\n    const { x, y } = getCoordinates(event.clientX, event.clientY)\n\n    setPosition({ x, y })\n  }\n\n  const onDrop = () => {\n    setIsDragging(false)\n    onDragEnd(position)\n  }\n\n  React.useEffect(() => {\n    if (isDragging || !dragRef.current) return\n    if (checkBounds) {\n      const { height, left, top, width } = dragRef.current.getBoundingClientRect()\n      const { x, y } = getCoordinates(left + width / 2, top + height / 2, true)\n      onDragEnd({ x, y })\n      setPosition({ x, y })\n      setCheckBounds(false)\n      return\n    }\n  }, [getCoordinates, isDragging, checkBounds, setCheckBounds, position.x, position.y, onDragEnd])\n\n  React.useEffect(() => {\n    setPosition({ x: initialPosition.x, y: initialPosition.y })\n  }, [initialPosition.x, initialPosition.y])\n\n  return (\n    <div\n      className={[\n        `${baseClass}__draggable-container`,\n        isDragging && `${baseClass}__draggable-container--dragging`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onMouseMove={handleMouseMove}\n    >\n      <button\n        className={[`${baseClass}__draggable`, className].filter(Boolean).join(' ')}\n        onMouseDown={handleMouseDown}\n        onMouseUp={onDrop}\n        ref={dragRef}\n        style={{ left: `${position.x}%`, top: `${position.y}%` }}\n        type=\"button\"\n      >\n        {children}\n      </button>\n      <div />\n    </div>\n  )\n}\n"],"names":["facelessUIImport","React","useRef","useState","ReactCrop","editDrawerSlug","Plus","useTranslation","Button","baseClass","Input","name","onChange","value","div","className","input","e","target","type","defaultCrop","height","unit","width","x","y","defaultPointPosition","EditUpload","fileName","fileSrc","imageCacheTag","initialCrop","initialFocalPoint","onSave","showCrop","showFocalPoint","useModal","closeModal","t","crop","setCrop","pointPosition","setPointPosition","checkBounds","setCheckBounds","originalHeight","setOriginalHeight","originalWidth","setOriginalWidth","focalWrapRef","imageRef","cropRef","fineTuneCrop","dimension","intValue","parseInt","percentage","fineTuneFocalPoint","coordinate","prevPosition","saveEdits","onDragEnd","useCallback","centerFocalPoint","containerRect","current","getBoundingClientRect","boundsRect","xCenter","left","yCenter","top","fileSrcToUse","h2","title","aria-label","buttonStyle","onClick","ref","style","aspectRatio","_","c","onComplete","renderSelectionAddon","img","alt","onLoad","currentTarget","naturalHeight","naturalWidth","src","DraggableElement","boundsRef","containerRef","initialPosition","h3","span","toFixed","children","position","setPosition","isDragging","setIsDragging","dragRef","getCoordinates","mouseXArg","mouseYArg","recenter","mouseX","mouseY","xOutOfBounds","right","yOutOfBounds","bottom","handleMouseDown","event","preventDefault","handleMouseMove","clientX","clientY","onDrop","useEffect","filter","Boolean","join","onMouseMove","button","onMouseDown","onMouseUp"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAIA,YAAYA,sBAAsB,qBAAoB;AACtD,OAAOC,SAASC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAC/C,OAAOC,eAAe,mBAAkB;AAGxC,SAASC,cAAc,QAAQ,iCAAgC;AAC/D,SAASC,IAAI,QAAQ,4BAA2B;AAChD,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,MAAM,QAAQ,qBAAoB;AAG3C,MAAMC,YAAY;AAElB,MAAMC,QAAsF,CAAC,EAC3FC,IAAI,EACJC,QAAQ,EACRC,KAAK,EACN,iBACC,oBAACC;QAAIC,WAAW,CAAC,EAAEN,UAAU,OAAO,CAAC;OAClCE,oBACD,oBAACK;QAAML,MAAMA;QAAMC,UAAU,CAACK,IAAML,SAASK,EAAEC,MAAM,CAACL,KAAK;QAAGM,MAAK;QAASN,OAAOA;;AAqBvF,MAAMO,cAAwB;IAC5BC,QAAQ;IACRC,MAAM;IACNC,OAAO;IACPC,GAAG;IACHC,GAAG;AACL;AAEA,MAAMC,uBAAsC;IAC1CF,GAAG;IACHC,GAAG;AACL;AAEA,OAAO,MAAME,aAAwC,CAAC,EACpDC,QAAQ,EACRC,OAAO,EACPC,aAAa,EACbC,WAAW,EACXC,iBAAiB,EACjBC,MAAM,EACNC,QAAQ,EACRC,cAAc,EACf;IACC,MAAM,EAAEC,QAAQ,EAAE,GAAGpC;IAErB,MAAM,EAAEqC,UAAU,EAAE,GAAGD;IACvB,MAAM,EAAEE,CAAC,EAAE,GAAG/B;IAEd,MAAM,CAACgC,MAAMC,QAAQ,GAAGrC,SAAmB,IAAO,CAAA;YAChD,GAAGiB,WAAW;YACd,GAAGW,WAAW;QAChB,CAAA;IAEA,MAAM,CAACU,eAAeC,iBAAiB,GAAGvC,SAAwB,IAAO,CAAA;YACvE,GAAGuB,oBAAoB;YACvB,GAAGM,iBAAiB;QACtB,CAAA;IACA,MAAM,CAACW,aAAaC,eAAe,GAAGzC,SAAkB;IACxD,MAAM,CAAC0C,gBAAgBC,kBAAkB,GAAG3C,SAAiB;IAC7D,MAAM,CAAC4C,eAAeC,iBAAiB,GAAG7C,SAAiB;IAE3D,MAAM8C,eAAe/C;IACrB,MAAMgD,WAAWhD;IACjB,MAAMiD,UAAUjD;IAEhB,MAAMkD,eAAe,CAAC,EAAEC,SAAS,EAAExC,KAAK,EAAoD;QAC1F,MAAMyC,WAAWC,SAAS1C;QAC1B,IAAIwC,cAAc,WAAWC,YAAYP,eAAe,OAAO;QAC/D,IAAIM,cAAc,YAAYC,YAAYT,gBAAgB,OAAO;QAEjE,MAAMW,aAAa,MAAOF,CAAAA,WAAYD,CAAAA,cAAc,UAAUN,gBAAgBF,cAAa,CAAC;QAE5F,IAAIW,eAAe,OAAOA,eAAe,GAAG,OAAO;QAEnDhB,QAAQ;YACN,GAAGD,IAAI;YACP,CAACc,UAAU,EAAEG;QACf;IACF;IAEA,MAAMC,qBAAqB,CAAC,EAAEC,UAAU,EAAE7C,KAAK,EAA4C;QACzF,MAAMyC,WAAWC,SAAS1C;QAC1B,IAAIyC,YAAY,KAAKA,YAAY,KAAK;YACpCZ,iBAAiB,CAACiB,eAAkB,CAAA;oBAAE,GAAGA,YAAY;oBAAE,CAACD,WAAW,EAAEJ;gBAAS,CAAA;QAChF;IACF;IAEA,MAAMM,YAAY;QAChB,IAAI,OAAO3B,WAAW,YACpBA,OAAO;YACLM;YACAE;QACF;QACFJ,WAAWhC;IACb;IAEA,MAAMwD,YAAY5D,MAAM6D,WAAW,CAAC,CAAC,EAAEtC,CAAC,EAAEC,CAAC,EAAE;QAC3CiB,iBAAiB;YAAElB;YAAGC;QAAE;QACxBmB,eAAe;IACjB,GAAG,EAAE;IAEL,MAAMmB,mBAAmB;QACvB,MAAMC,gBAAgBf,aAAagB,OAAO,CAACC,qBAAqB;QAChE,MAAMC,aAAajC,WACfiB,QAAQc,OAAO,CAACC,qBAAqB,KACrChB,SAASe,OAAO,CAACC,qBAAqB;QAC1C,MAAME,UACJ,AAAED,CAAAA,WAAWE,IAAI,GAAGL,cAAcK,IAAI,GAAGF,WAAW5C,KAAK,GAAG,CAAA,IAAKyC,cAAczC,KAAK,GAAI;QAC1F,MAAM+C,UACJ,AAAEH,CAAAA,WAAWI,GAAG,GAAGP,cAAcO,GAAG,GAAGJ,WAAW9C,MAAM,GAAG,CAAA,IAAK2C,cAAc3C,MAAM,GAAI;QAC1FqB,iBAAiB;YAAElB,GAAG4C;YAAS3C,GAAG6C;QAAQ;IAC5C;IAEA,MAAME,eAAe1C,gBAAgB,CAAC,EAAED,QAAQ,CAAC,EAAEC,cAAc,CAAC,GAAGD;IAErE,qBACE,oBAACf;QAAIC,WAAWN;qBACd,oBAACK;QAAIC,WAAW,CAAC,EAAEN,UAAU,QAAQ,CAAC;qBACpC,oBAACgE;QAAGC,OAAO,CAAC,EAAEpC,EAAE,mBAAmB,CAAC,EAAEV,SAAS,CAAC;OAC7CU,EAAE,oBAAmB,KAAEV,yBAE1B,oBAACd;QAAIC,WAAW,CAAC,EAAEN,UAAU,SAAS,CAAC;qBACrC,oBAACD;QACCmE,cAAYrC,EAAE;QACdsC,aAAY;QACZ7D,WAAW,CAAC,EAAEN,UAAU,QAAQ,CAAC;QACjCoE,SAAS,IAAMxC,WAAWhC;OAEzBiC,EAAE,kCAEL,oBAAC9B;QACCmE,cAAYrC,EAAE;QACdsC,aAAY;QACZ7D,WAAW,CAAC,EAAEN,UAAU,MAAM,CAAC;QAC/BoE,SAASjB;OAERtB,EAAE,0CAIT,oBAACxB;QAAIC,WAAW,CAAC,EAAEN,UAAU,UAAU,CAAC;qBACtC,oBAACK;QAAIC,WAAW,CAAC,EAAEN,UAAU,MAAM,CAAC;qBAClC,oBAACK;QACCC,WAAW,CAAC,EAAEN,UAAU,eAAe,CAAC;QACxCqE,KAAK7B;QACL8B,OAAO;YACLC,aAAa,CAAC,EAAEjC,gBAAgBF,eAAe,CAAC;QAClD;OAECX,yBACC,oBAAC9B;QACCW,WAAW,CAAC,EAAEN,UAAU,WAAW,CAAC;QACpC8B,MAAMA;QACN3B,UAAU,CAACqE,GAAGC,IAAM1C,QAAQ0C;QAC5BC,YAAY,IAAMvC,eAAe;QACjCwC,sBAAsB;YACpB,qBAAO,oBAACtE;gBAAIC,WAAW,CAAC,EAAEN,UAAU,aAAa,CAAC;gBAAEqE,KAAK3B;;QAC3D;qBAEA,oBAACkC;QACCC,KAAKhD,EAAE;QACPiD,QAAQ,CAACtE;YACP6B,kBAAkB7B,EAAEuE,aAAa,CAACC,aAAa;YAC/CzC,iBAAiB/B,EAAEuE,aAAa,CAACE,YAAY;QAC/C;QACAZ,KAAK5B;QACLyC,KAAKnB;wBAIT,oBAACa;QACCC,KAAKhD,EAAE;QACPiD,QAAQ,CAACtE;YACP6B,kBAAkB7B,EAAEuE,aAAa,CAACC,aAAa;YAC/CzC,iBAAiB/B,EAAEuE,aAAa,CAACE,YAAY;QAC/C;QACAZ,KAAK5B;QACLyC,KAAKnB;QAGRrC,gCACC,oBAACyD;QACCC,WAAW3D,WAAWiB,UAAUD;QAChCP,aAAaT,WAAWS,cAAc;QACtC5B,WAAW,CAAC,EAAEN,UAAU,YAAY,CAAC;QACrCqF,cAAc7C;QACd8C,iBAAiBtD;QACjBoB,WAAWA;QACXjB,gBAAgBV,WAAWU,iBAAiB;qBAE5C,oBAACtC,gBAKR,AAAC4B,CAAAA,YAAYC,cAAa,mBACzB,oBAACrB;QAAIC,WAAW,CAAC,EAAEN,UAAU,SAAS,CAAC;OACpCyB,0BACC,oBAACpB;QAAIC,WAAW,CAAC,EAAEN,UAAU,WAAW,CAAC;qBACvC,oBAACK,2BACC,oBAACA;QAAIC,WAAW,CAAC,EAAEN,UAAU,WAAW,CAAC;qBACvC,oBAACuF,YAAI1D,EAAE,+BACP,oBAAC9B;QACCoE,aAAY;QACZ7D,WAAW,CAAC,EAAEN,UAAU,OAAO,CAAC;QAChCoE,SAAS,IACPrC,QAAQ;gBACNnB,QAAQ;gBACRC,MAAM;gBACNC,OAAO;gBACPC,GAAG;gBACHC,GAAG;YACL;OAGDa,EAAE,mCAIT,oBAAC2D;QAAKlF,WAAW,CAAC,EAAEN,UAAU,aAAa,CAAC;OACzC6B,EAAE,8CAEL,oBAACxB;QAAIC,WAAW,CAAC,EAAEN,UAAU,YAAY,CAAC;qBACxC,oBAACC;QACCC,MAAM,CAAC,EAAE2B,EAAE,gBAAgB,KAAK,CAAC;QACjC1B,UAAU,CAACC,QAAUuC,aAAa;gBAAEC,WAAW;gBAASxC;YAAM;QAC9DA,OAAO,AAAC,CAAA,AAAC0B,KAAKhB,KAAK,GAAG,MAAOwB,aAAY,EAAGmD,OAAO,CAAC;sBAEtD,oBAACxF;QACCC,MAAM,CAAC,EAAE2B,EAAE,iBAAiB,KAAK,CAAC;QAClC1B,UAAU,CAACC,QAAUuC,aAAa;gBAAEC,WAAW;gBAAUxC;YAAM;QAC/DA,OAAO,AAAC,CAAA,AAAC0B,KAAKlB,MAAM,GAAG,MAAOwB,cAAa,EAAGqD,OAAO,CAAC;UAM7D/D,gCACC,oBAACrB;QAAIC,WAAW,CAAC,EAAEN,UAAU,WAAW,CAAC;qBACvC,oBAACK,2BACC,oBAACA;QAAIC,WAAW,CAAC,EAAEN,UAAU,WAAW,CAAC;qBACvC,oBAACuF,YAAI1D,EAAE,qCACP,oBAAC9B;QACCoE,aAAY;QACZ7D,WAAW,CAAC,EAAEN,UAAU,OAAO,CAAC;QAChCoE,SAASd;OAERzB,EAAE,mCAIT,oBAAC2D;QAAKlF,WAAW,CAAC,EAAEN,UAAU,aAAa,CAAC;OACzC6B,EAAE,gDAEL,oBAACxB;QAAIC,WAAW,CAAC,EAAEN,UAAU,YAAY,CAAC;qBACxC,oBAACC;QACCC,MAAK;QACLC,UAAU,CAACC,QAAU4C,mBAAmB;gBAAEC,YAAY;gBAAK7C;YAAM;QACjEA,OAAO4B,cAAcjB,CAAC,CAAC0E,OAAO,CAAC;sBAEjC,oBAACxF;QACCC,MAAK;QACLC,UAAU,CAACC,QAAU4C,mBAAmB;gBAAEC,YAAY;gBAAK7C;YAAM;QACjEA,OAAO4B,cAAchB,CAAC,CAACyE,OAAO,CAAC;;AAUnD,EAAC;AAED,MAAMN,mBAAmB,CAAC,EACxBC,SAAS,EACTlD,WAAW,EACXwD,QAAQ,EACRpF,SAAS,EACT+E,YAAY,EACZC,kBAAkB;IAAEvE,GAAG;IAAIC,GAAG;AAAG,CAAC,EAClCoC,SAAS,EACTjB,cAAc,EACf;IACC,MAAM,CAACwD,UAAUC,YAAY,GAAGlG,SAAS;QAAEqB,GAAGuE,gBAAgBvE,CAAC;QAAEC,GAAGsE,gBAAgBtE,CAAC;IAAC;IACtF,MAAM,CAAC6E,YAAYC,cAAc,GAAGpG,SAAS;IAC7C,MAAMqG,UAAUtG;IAEhB,MAAMuG,iBAAiBxG,MAAM6D,WAAW,CACtC,CAAC4C,WAAoBC,WAAoBC;QACvC,MAAM5C,gBAAgB8B,aAAa7B,OAAO,CAACC,qBAAqB;QAChE,MAAMC,aAAa0B,UAAU5B,OAAO,CAACC,qBAAqB;QAC1D,MAAM2C,SAASH,aAAavC,WAAWE,IAAI;QAC3C,MAAMyC,SAASH,aAAaxC,WAAWI,GAAG;QAE1C,MAAMwC,eAAeF,SAAS1C,WAAWE,IAAI,IAAIwC,SAAS1C,WAAW6C,KAAK;QAC1E,MAAMC,eAAeH,SAAS3C,WAAWI,GAAG,IAAIuC,SAAS3C,WAAW+C,MAAM;QAE1E,IAAI1F,IAAI,AAAEqF,CAAAA,SAAS7C,cAAcK,IAAI,AAAD,IAAKL,cAAczC,KAAK,GAAI;QAChE,IAAIE,IAAI,AAAEqF,CAAAA,SAAS9C,cAAcO,GAAG,AAAD,IAAKP,cAAc3C,MAAM,GAAI;QAChE,MAAM+C,UACJ,AAAED,CAAAA,WAAWE,IAAI,GAAGL,cAAcK,IAAI,GAAGF,WAAW5C,KAAK,GAAG,CAAA,IAAKyC,cAAczC,KAAK,GAAI;QAC1F,MAAM+C,UACJ,AAAEH,CAAAA,WAAWI,GAAG,GAAGP,cAAcO,GAAG,GAAGJ,WAAW9C,MAAM,GAAG,CAAA,IAAK2C,cAAc3C,MAAM,GAAI;QAC1F,IAAI0F,gBAAgBE,cAAc;YAChCV,cAAc;YACd,IAAIM,SAAS1C,WAAWE,IAAI,EAAE;gBAC5B7C,IAAI,AAAE2C,CAAAA,WAAWE,IAAI,GAAGL,cAAcK,IAAI,AAAD,IAAKL,cAAczC,KAAK,GAAI;YACvE,OAAO,IAAIsF,SAAS1C,WAAW6C,KAAK,EAAE;gBACpCxF,IACE,AAAEwC,CAAAA,cAAczC,KAAK,GAAIyC,CAAAA,cAAcgD,KAAK,GAAG7C,WAAW6C,KAAK,AAAD,CAAC,IAC7DhD,cAAczC,KAAK,GACrB;YACJ;YAEA,IAAIuF,SAAS3C,WAAWI,GAAG,EAAE;gBAC3B9C,IAAI,AAAE0C,CAAAA,WAAWI,GAAG,GAAGP,cAAcO,GAAG,AAAD,IAAKP,cAAc3C,MAAM,GAAI;YACtE,OAAO,IAAIyF,SAAS3C,WAAW+C,MAAM,EAAE;gBACrCzF,IACE,AAAEuC,CAAAA,cAAc3C,MAAM,GAAI2C,CAAAA,cAAckD,MAAM,GAAG/C,WAAW+C,MAAM,AAAD,CAAC,IAChElD,cAAc3C,MAAM,GACtB;YACJ;YAEA,IAAIuF,UAAU;gBACZpF,IAAIuF,eAAe3C,UAAU5C;gBAC7BC,IAAIwF,eAAe3C,UAAU7C;YAC/B;QACF;QAEA,OAAO;YAAED;YAAGC;QAAE;IAChB,GACA;QAACoE;QAAWC;KAAa;IAG3B,MAAMqB,kBAAkB,CAACC;QACvBA,MAAMC,cAAc;QACpBd,cAAc;IAChB;IAEA,MAAMe,kBAAkB,CAACF;QACvB,IAAI,CAACd,YAAY,OAAO;QACxB,MAAM,EAAE9E,CAAC,EAAEC,CAAC,EAAE,GAAGgF,eAAeW,MAAMG,OAAO,EAAEH,MAAMI,OAAO;QAE5DnB,YAAY;YAAE7E;YAAGC;QAAE;IACrB;IAEA,MAAMgG,SAAS;QACblB,cAAc;QACd1C,UAAUuC;IACZ;IAEAnG,MAAMyH,SAAS,CAAC;QACd,IAAIpB,cAAc,CAACE,QAAQvC,OAAO,EAAE;QACpC,IAAItB,aAAa;YACf,MAAM,EAAEtB,MAAM,EAAEgD,IAAI,EAAEE,GAAG,EAAEhD,KAAK,EAAE,GAAGiF,QAAQvC,OAAO,CAACC,qBAAqB;YAC1E,MAAM,EAAE1C,CAAC,EAAEC,CAAC,EAAE,GAAGgF,eAAepC,OAAO9C,QAAQ,GAAGgD,MAAMlD,SAAS,GAAG;YACpEwC,UAAU;gBAAErC;gBAAGC;YAAE;YACjB4E,YAAY;gBAAE7E;gBAAGC;YAAE;YACnBmB,eAAe;YACf;QACF;IACF,GAAG;QAAC6D;QAAgBH;QAAY3D;QAAaC;QAAgBwD,SAAS5E,CAAC;QAAE4E,SAAS3E,CAAC;QAAEoC;KAAU;IAE/F5D,MAAMyH,SAAS,CAAC;QACdrB,YAAY;YAAE7E,GAAGuE,gBAAgBvE,CAAC;YAAEC,GAAGsE,gBAAgBtE,CAAC;QAAC;IAC3D,GAAG;QAACsE,gBAAgBvE,CAAC;QAAEuE,gBAAgBtE,CAAC;KAAC;IAEzC,qBACE,oBAACX;QACCC,WAAW;YACT,CAAC,EAAEN,UAAU,qBAAqB,CAAC;YACnC6F,cAAc,CAAC,EAAE7F,UAAU,+BAA+B,CAAC;SAC5D,CACEkH,MAAM,CAACC,SACPC,IAAI,CAAC;QACRC,aAAaR;qBAEb,oBAACS;QACChH,WAAW;YAAC,CAAC,EAAEN,UAAU,WAAW,CAAC;YAAEM;SAAU,CAAC4G,MAAM,CAACC,SAASC,IAAI,CAAC;QACvEG,aAAab;QACbc,WAAWR;QACX3C,KAAK0B;QACLzB,OAAO;YAAEV,MAAM,CAAC,EAAE+B,SAAS5E,CAAC,CAAC,CAAC,CAAC;YAAE+C,KAAK,CAAC,EAAE6B,SAAS3E,CAAC,CAAC,CAAC,CAAC;QAAC;QACvDN,MAAK;OAEJgF,yBAEH,oBAACrF;AAGP"}
+{"version":3,"sources":["../../../src/elements/EditUpload/index.tsx"],"sourcesContent":["'use client'\nimport type CropType from 'react-image-crop'\n\nimport { useModal } from '@faceless-ui/modal'\nimport React, { forwardRef, useRef, useState } from 'react'\nimport ReactCrop from 'react-image-crop'\nimport 'react-image-crop/dist/ReactCrop.css'\n\nimport { editDrawerSlug } from '../../elements/Upload/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst baseClass = 'edit-upload'\n\ntype Props = {\n  name: string\n  onChange: (value: string) => void\n  value: string\n}\n\nconst Input = forwardRef<HTMLInputElement, Props>((props, ref) => {\n  const { name, onChange, value } = props\n\n  return (\n    <div className={`${baseClass}__input`}>\n      {name}\n      <input\n        name={name}\n        onChange={(e) => onChange(e.target.value)}\n        ref={ref}\n        type=\"number\"\n        value={value}\n      />\n    </div>\n  )\n})\n\ntype FocalPosition = {\n  x: number\n  y: number\n}\n\nexport type EditUploadProps = {\n  fileName: string\n  fileSrc: string\n  imageCacheTag?: string\n  initialCrop?: CropType\n  initialFocalPoint?: FocalPosition\n  onSave?: ({ crop, focalPosition }: { crop: CropType; focalPosition: FocalPosition }) => void\n  showCrop?: boolean\n  showFocalPoint?: boolean\n}\n\nconst defaultCrop: CropType = {\n  height: 100,\n  heightPixels: 0,\n  unit: '%',\n  width: 100,\n  widthPixels: 0,\n  x: 0,\n  y: 0,\n}\n\nexport const EditUpload: React.FC<EditUploadProps> = ({\n  fileName,\n  fileSrc,\n  imageCacheTag,\n  initialCrop,\n  initialFocalPoint,\n  onSave,\n  showCrop,\n  showFocalPoint,\n}) => {\n  const { closeModal } = useModal()\n  const { t } = useTranslation()\n\n  const [crop, setCrop] = useState<CropType>(() => ({\n    ...defaultCrop,\n    ...initialCrop,\n  }))\n\n  const defaultFocalPosition: FocalPosition = {\n    x: 50,\n    y: 50,\n  }\n\n  const [focalPosition, setFocalPosition] = useState<FocalPosition>(() => ({\n    ...defaultFocalPosition,\n    ...initialFocalPoint,\n  }))\n  const [checkBounds, setCheckBounds] = useState<boolean>(false)\n  const [originalHeight, setOriginalHeight] = useState<number>(0)\n  const [originalWidth, setOriginalWidth] = useState<number>(0)\n\n  const focalWrapRef = useRef<HTMLDivElement | undefined>(undefined)\n  const imageRef = useRef<HTMLImageElement | undefined>(undefined)\n  const cropRef = useRef<HTMLDivElement | undefined>(undefined)\n\n  const heightRef = useRef<HTMLInputElement | null>(null)\n  const widthRef = useRef<HTMLInputElement | null>(null)\n\n  const [imageLoaded, setImageLoaded] = useState<boolean>(false)\n\n  const onImageLoad = (e) => {\n    setOriginalHeight(e.currentTarget.naturalHeight)\n    setOriginalWidth(e.currentTarget.naturalWidth)\n    setImageLoaded(true)\n  }\n\n  const fineTuneCrop = ({ dimension, value }: { dimension: 'height' | 'width'; value: string }) => {\n    const intValue = parseInt(value)\n    if (dimension === 'width' && intValue >= originalWidth) return null\n    if (dimension === 'height' && intValue >= originalHeight) return null\n\n    const percentage = 100 * (intValue / (dimension === 'width' ? originalWidth : originalHeight))\n\n    if (percentage === 100 || percentage === 0) return null\n\n    setCrop({\n      ...crop,\n      [dimension]: percentage,\n    })\n  }\n\n  const fineTuneFocalPosition = ({\n    coordinate,\n    value,\n  }: {\n    coordinate: 'x' | 'y'\n    value: string\n  }) => {\n    const intValue = parseInt(value)\n    if (intValue >= 0 && intValue <= 100) {\n      setFocalPosition((prevPosition) => ({ ...prevPosition, [coordinate]: intValue }))\n    }\n  }\n\n  const saveEdits = () => {\n    if (typeof onSave === 'function')\n      onSave({\n        crop: crop\n          ? {\n              ...crop,\n              heightPixels: Number(heightRef.current?.value ?? crop.heightPixels),\n              widthPixels: Number(widthRef.current?.value ?? crop.widthPixels),\n            }\n          : undefined,\n        focalPosition,\n      })\n    closeModal(editDrawerSlug)\n  }\n\n  const onDragEnd = React.useCallback(({ x, y }) => {\n    setFocalPosition({ x, y })\n    setCheckBounds(false)\n  }, [])\n\n  const centerFocalPoint = () => {\n    const containerRect = focalWrapRef.current.getBoundingClientRect()\n    const boundsRect = showCrop\n      ? cropRef.current.getBoundingClientRect()\n      : imageRef.current.getBoundingClientRect()\n    const xCenter =\n      ((boundsRect.left - containerRect.left + boundsRect.width / 2) / containerRect.width) * 100\n    const yCenter =\n      ((boundsRect.top - containerRect.top + boundsRect.height / 2) / containerRect.height) * 100\n    setFocalPosition({ x: xCenter, y: yCenter })\n  }\n\n  const fileSrcToUse = imageCacheTag ? `${fileSrc}?${imageCacheTag}` : fileSrc\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__header`}>\n        <h2 title={`${t('general:editing')} ${fileName}`}>\n          {t('general:editing')} {fileName}\n        </h2>\n        <div className={`${baseClass}__actions`}>\n          <Button\n            aria-label={t('general:cancel')}\n            buttonStyle=\"secondary\"\n            className={`${baseClass}__cancel`}\n            onClick={() => closeModal(editDrawerSlug)}\n          >\n            {t('general:cancel')}\n          </Button>\n          <Button\n            aria-label={t('general:applyChanges')}\n            buttonStyle=\"primary\"\n            className={`${baseClass}__save`}\n            disabled={!imageLoaded}\n            onClick={saveEdits}\n          >\n            {t('general:applyChanges')}\n          </Button>\n        </div>\n      </div>\n      <div className={`${baseClass}__toolWrap`}>\n        <div className={`${baseClass}__crop`}>\n          <div\n            className={`${baseClass}__focal-wrapper`}\n            ref={focalWrapRef}\n            style={{\n              aspectRatio: `${originalWidth / originalHeight}`,\n            }}\n          >\n            {showCrop ? (\n              <ReactCrop\n                className={`${baseClass}__reactCrop`}\n                crop={crop}\n                onChange={(_, c) => setCrop(c)}\n                onComplete={() => setCheckBounds(true)}\n                renderSelectionAddon={() => {\n                  return <div className={`${baseClass}__crop-window`} ref={cropRef} />\n                }}\n              >\n                <img\n                  alt={t('upload:setCropArea')}\n                  onLoad={onImageLoad}\n                  ref={imageRef}\n                  src={fileSrcToUse}\n                />\n              </ReactCrop>\n            ) : (\n              <img\n                alt={t('upload:setFocalPoint')}\n                onLoad={onImageLoad}\n                ref={imageRef}\n                src={fileSrcToUse}\n              />\n            )}\n            {showFocalPoint && (\n              <DraggableElement\n                boundsRef={showCrop ? cropRef : imageRef}\n                checkBounds={showCrop ? checkBounds : false}\n                className={`${baseClass}__focalPoint`}\n                containerRef={focalWrapRef}\n                initialPosition={focalPosition}\n                onDragEnd={onDragEnd}\n                setCheckBounds={showCrop ? setCheckBounds : false}\n              >\n                <PlusIcon />\n              </DraggableElement>\n            )}\n          </div>\n        </div>\n        {(showCrop || showFocalPoint) && (\n          <div className={`${baseClass}__sidebar`}>\n            {showCrop && (\n              <div className={`${baseClass}__groupWrap`}>\n                <div>\n                  <div className={`${baseClass}__titleWrap`}>\n                    <h3>{t('upload:crop')}</h3>\n                    <Button\n                      buttonStyle=\"none\"\n                      className={`${baseClass}__reset`}\n                      onClick={() =>\n                        setCrop({\n                          height: 100,\n                          heightPixels: originalHeight,\n                          unit: '%',\n                          width: 100,\n                          widthPixels: originalWidth,\n                          x: 0,\n                          y: 0,\n                        })\n                      }\n                    >\n                      {t('general:reset')}\n                    </Button>\n                  </div>\n                </div>\n                <span className={`${baseClass}__description`}>\n                  {t('upload:cropToolDescription')}\n                </span>\n                <div className={`${baseClass}__inputsWrap`}>\n                  <Input\n                    name={`${t('upload:width')} (px)`}\n                    onChange={(value) => fineTuneCrop({ dimension: 'width', value })}\n                    ref={widthRef}\n                    value={((crop.width / 100) * originalWidth).toFixed(0)}\n                  />\n                  <Input\n                    name={`${t('upload:height')} (px)`}\n                    onChange={(value) => fineTuneCrop({ dimension: 'height', value })}\n                    ref={heightRef}\n                    value={((crop.height / 100) * originalHeight).toFixed(0)}\n                  />\n                </div>\n              </div>\n            )}\n\n            {showFocalPoint && (\n              <div className={`${baseClass}__groupWrap`}>\n                <div>\n                  <div className={`${baseClass}__titleWrap`}>\n                    <h3>{t('upload:focalPoint')}</h3>\n                    <Button\n                      buttonStyle=\"none\"\n                      className={`${baseClass}__reset`}\n                      onClick={centerFocalPoint}\n                    >\n                      {t('general:reset')}\n                    </Button>\n                  </div>\n                </div>\n                <span className={`${baseClass}__description`}>\n                  {t('upload:focalPointDescription')}\n                </span>\n                <div className={`${baseClass}__inputsWrap`}>\n                  <Input\n                    name=\"X %\"\n                    onChange={(value) => fineTuneFocalPosition({ coordinate: 'x', value })}\n                    value={focalPosition.x.toFixed(0)}\n                  />\n                  <Input\n                    name=\"Y %\"\n                    onChange={(value) => fineTuneFocalPosition({ coordinate: 'y', value })}\n                    value={focalPosition.y.toFixed(0)}\n                  />\n                </div>\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst DraggableElement = ({\n  boundsRef,\n  checkBounds,\n  children,\n  className,\n  containerRef,\n  initialPosition = { x: 50, y: 50 },\n  onDragEnd,\n  setCheckBounds,\n}) => {\n  const [position, setPosition] = useState({ x: initialPosition.x, y: initialPosition.y })\n  const [isDragging, setIsDragging] = useState(false)\n  const dragRef = useRef<HTMLButtonElement | undefined>(undefined)\n\n  const getCoordinates = React.useCallback(\n    (mouseXArg?: number, mouseYArg?: number, recenter?: boolean) => {\n      const containerRect = containerRef.current.getBoundingClientRect()\n      const boundsRect = boundsRef.current.getBoundingClientRect()\n      const mouseX = mouseXArg ?? boundsRect.left\n      const mouseY = mouseYArg ?? boundsRect.top\n\n      const xOutOfBounds = mouseX < boundsRect.left || mouseX > boundsRect.right\n      const yOutOfBounds = mouseY < boundsRect.top || mouseY > boundsRect.bottom\n\n      let x = ((mouseX - containerRect.left) / containerRect.width) * 100\n      let y = ((mouseY - containerRect.top) / containerRect.height) * 100\n      const xCenter =\n        ((boundsRect.left - containerRect.left + boundsRect.width / 2) / containerRect.width) * 100\n      const yCenter =\n        ((boundsRect.top - containerRect.top + boundsRect.height / 2) / containerRect.height) * 100\n      if (xOutOfBounds || yOutOfBounds) {\n        setIsDragging(false)\n        if (mouseX < boundsRect.left) {\n          x = ((boundsRect.left - containerRect.left) / containerRect.width) * 100\n        } else if (mouseX > boundsRect.right) {\n          x =\n            ((containerRect.width - (containerRect.right - boundsRect.right)) /\n              containerRect.width) *\n            100\n        }\n\n        if (mouseY < boundsRect.top) {\n          y = ((boundsRect.top - containerRect.top) / containerRect.height) * 100\n        } else if (mouseY > boundsRect.bottom) {\n          y =\n            ((containerRect.height - (containerRect.bottom - boundsRect.bottom)) /\n              containerRect.height) *\n            100\n        }\n\n        if (recenter) {\n          x = xOutOfBounds ? xCenter : x\n          y = yOutOfBounds ? yCenter : y\n        }\n      }\n\n      return { x, y }\n    },\n    [boundsRef, containerRef],\n  )\n\n  const handleMouseDown = (event) => {\n    event.preventDefault()\n    setIsDragging(true)\n  }\n\n  const handleMouseMove = (event) => {\n    if (!isDragging) return null\n    const { x, y } = getCoordinates(event.clientX, event.clientY)\n\n    setPosition({ x, y })\n  }\n\n  const onDrop = () => {\n    setIsDragging(false)\n    onDragEnd(position)\n  }\n\n  React.useEffect(() => {\n    if (isDragging || !dragRef.current) return\n    if (checkBounds) {\n      const { height, left, top, width } = dragRef.current.getBoundingClientRect()\n      const { x, y } = getCoordinates(left + width / 2, top + height / 2, true)\n      onDragEnd({ x, y })\n      setPosition({ x, y })\n      setCheckBounds(false)\n      return\n    }\n  }, [getCoordinates, isDragging, checkBounds, setCheckBounds, position.x, position.y, onDragEnd])\n\n  React.useEffect(() => {\n    setPosition({ x: initialPosition.x, y: initialPosition.y })\n  }, [initialPosition.x, initialPosition.y])\n\n  return (\n    <div\n      className={[\n        `${baseClass}__draggable-container`,\n        isDragging && `${baseClass}__draggable-container--dragging`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onMouseMove={handleMouseMove}\n    >\n      <button\n        className={[`${baseClass}__draggable`, className].filter(Boolean).join(' ')}\n        onMouseDown={handleMouseDown}\n        onMouseUp={onDrop}\n        ref={dragRef}\n        style={{ left: `${position.x}%`, top: `${position.y}%` }}\n        type=\"button\"\n      >\n        {children}\n      </button>\n      <div />\n    </div>\n  )\n}\n"],"names":["useModal","React","forwardRef","useRef","useState","ReactCrop","editDrawerSlug","PlusIcon","useTranslation","Button","baseClass","Input","props","ref","name","onChange","value","div","className","input","e","target","type","defaultCrop","height","heightPixels","unit","width","widthPixels","x","y","EditUpload","fileName","fileSrc","imageCacheTag","initialCrop","initialFocalPoint","onSave","showCrop","showFocalPoint","closeModal","t","crop","setCrop","defaultFocalPosition","focalPosition","setFocalPosition","checkBounds","setCheckBounds","originalHeight","setOriginalHeight","originalWidth","setOriginalWidth","focalWrapRef","undefined","imageRef","cropRef","heightRef","widthRef","imageLoaded","setImageLoaded","onImageLoad","currentTarget","naturalHeight","naturalWidth","fineTuneCrop","dimension","intValue","parseInt","percentage","fineTuneFocalPosition","coordinate","prevPosition","saveEdits","Number","current","onDragEnd","useCallback","centerFocalPoint","containerRect","getBoundingClientRect","boundsRect","xCenter","left","yCenter","top","fileSrcToUse","h2","title","aria-label","buttonStyle","onClick","disabled","style","aspectRatio","_","c","onComplete","renderSelectionAddon","img","alt","onLoad","src","DraggableElement","boundsRef","containerRef","initialPosition","h3","span","toFixed","children","position","setPosition","isDragging","setIsDragging","dragRef","getCoordinates","mouseXArg","mouseYArg","recenter","mouseX","mouseY","xOutOfBounds","right","yOutOfBounds","bottom","handleMouseDown","event","preventDefault","handleMouseMove","clientX","clientY","onDrop","useEffect","filter","Boolean","join","onMouseMove","button","onMouseDown","onMouseUp"],"mappings":"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"}