@payloadcms/ui 3.0.0-beta.9 → 3.0.0-canary.03427d3

package/dist/elements/EditUpload/index.js

@@ -1,44 +1,55 @@
 'use client';
-import * as facelessUIImport from '@faceless-ui/modal';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useModal } from '@faceless-ui/modal';
 import React, { 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 { useFormQueryParams } from '../../providers/FormQueryParams/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
-    }));
-export const EditUpload = ({ fileName, fileSrc, imageCacheTag, showCrop, showFocalPoint })=>{
-    const { Modal, useModal } = facelessUIImport;
+const Input = ({ name, onChange, value })=>/*#__PURE__*/ _jsxs("div", {
+        className: `${baseClass}__input`,
+        children: [
+            name,
+            /*#__PURE__*/ _jsx("input", {
+                name: name,
+                onChange: (e)=>onChange(e.target.value),
+                type: "number",
+                value: value
+            })
+        ]
+    });
+const defaultCrop = {
+    height: 100,
+    unit: '%',
+    width: 100,
+    x: 0,
+    y: 0
+};
+export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, initialFocalPoint, onSave, showCrop, showFocalPoint })=>{
     const { closeModal } = useModal();
     const { t } = useTranslation();
-    const { dispatchFormQueryParams, formQueryParams } = useFormQueryParams();
-    const { uploadEdits } = formQueryParams || {};
-    const [crop, setCrop] = useState({
-        height: uploadEdits?.crop?.height || 100,
-        unit: '%',
-        width: uploadEdits?.crop?.width || 100,
-        x: uploadEdits?.crop?.x || 0,
-        y: uploadEdits?.crop?.y || 0
-    });
-    const [pointPosition, setPointPosition] = useState({
-        x: uploadEdits?.focalPoint?.x || 50,
-        y: uploadEdits?.focalPoint?.y || 50
-    });
+    const [crop, setCrop] = useState(()=>({
+            ...defaultCrop,
+            ...initialCrop
+        }));
+    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 fineTuneCrop = ({ dimension, value })=>{
         const intValue = parseInt(value);
         if (dimension === 'width' && intValue >= originalWidth) return null;
@@ -50,29 +61,24 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, showCrop, showFoc
             [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
                 }));
         }
     };
     const saveEdits = ()=>{
-        dispatchFormQueryParams({
-            type: 'SET',
-            params: {
-                uploadEdits: crop || pointPosition ? {
-                    crop: crop || null,
-                    focalPoint: pointPosition ? pointPosition : null
-                } : null
-            }
+        if (typeof onSave === 'function') onSave({
+            crop,
+            focalPosition
         });
         closeModal(editDrawerSlug);
     };
     const onDragEnd = React.useCallback(({ x, y })=>{
-        setPointPosition({
+        setFocalPosition({
             x,
             y
         });
@@ -83,136 +89,208 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, showCrop, showFoc
         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`,
+                                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: (e)=>{
+                                            setOriginalHeight(e.currentTarget.naturalHeight);
+                                            setOriginalWidth(e.currentTarget.naturalWidth);
+                                        },
+                                        ref: imageRef,
+                                        src: fileSrcToUse
+                                    })
+                                }) : /*#__PURE__*/ _jsx("img", {
+                                    alt: t('upload:setFocalPoint'),
+                                    onLoad: (e)=>{
+                                        setOriginalHeight(e.currentTarget.naturalHeight);
+                                        setOriginalWidth(e.currentTarget.naturalWidth);
+                                    },
+                                    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,
+                                                            unit: '%',
+                                                            width: 100,
+                                                            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
+                                                    }),
+                                                value: (crop.width / 100 * originalWidth).toFixed(0)
+                                            }),
+                                            /*#__PURE__*/ _jsx(Input, {
+                                                name: `${t('upload:height')} (px)`,
+                                                onChange: (value)=>fineTuneCrop({
+                                                        dimension: 'height',
+                                                        value
+                                                    }),
+                                                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 +301,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 +388,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 { useFormQueryParams } from '../../providers/FormQueryParams/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\nexport type EditUploadProps = {\n  doc?: Data\n  fileName: string\n  fileSrc: string\n  imageCacheTag?: string\n  showCrop?: boolean\n  showFocalPoint?: boolean\n}\n\nexport const EditUpload: React.FC<EditUploadProps> = ({\n  fileName,\n  fileSrc,\n  imageCacheTag,\n  showCrop,\n  showFocalPoint,\n}) => {\n  const { Modal, useModal } = facelessUIImport\n\n  const { closeModal } = useModal()\n  const { t } = useTranslation()\n  const { dispatchFormQueryParams, formQueryParams } = useFormQueryParams()\n  const { uploadEdits } = formQueryParams || {}\n  const [crop, setCrop] = useState<CropType>({\n    height: uploadEdits?.crop?.height || 100,\n    unit: '%',\n    width: uploadEdits?.crop?.width || 100,\n    x: uploadEdits?.crop?.x || 0,\n    y: uploadEdits?.crop?.y || 0,\n  })\n\n  const [pointPosition, setPointPosition] = useState<{ x: number; y: number }>({\n    x: uploadEdits?.focalPoint?.x || 50,\n    y: uploadEdits?.focalPoint?.y || 50,\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    dispatchFormQueryParams({\n      type: 'SET',\n      params: {\n        uploadEdits:\n          crop || pointPosition\n            ? {\n                crop: crop || null,\n                focalPoint: pointPosition ? pointPosition : null,\n              }\n            : null,\n      },\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","useFormQueryParams","useTranslation","Button","baseClass","Input","name","onChange","value","div","className","input","e","target","type","EditUpload","fileName","fileSrc","imageCacheTag","showCrop","showFocalPoint","Modal","useModal","closeModal","t","dispatchFormQueryParams","formQueryParams","uploadEdits","crop","setCrop","height","unit","width","x","y","pointPosition","setPointPosition","focalPoint","checkBounds","setCheckBounds","originalHeight","setOriginalHeight","originalWidth","setOriginalWidth","focalWrapRef","imageRef","cropRef","fineTuneCrop","dimension","intValue","parseInt","percentage","fineTuneFocalPoint","coordinate","prevPosition","saveEdits","params","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":"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"}
+{"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, { 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\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  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  unit: '%',\n  width: 100,\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 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,\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            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={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                          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) => 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","useRef","useState","ReactCrop","editDrawerSlug","PlusIcon","useTranslation","Button","baseClass","Input","name","onChange","value","div","className","input","e","target","type","defaultCrop","height","unit","width","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","fineTuneCrop","dimension","intValue","parseInt","percentage","fineTuneFocalPosition","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":"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"}