@payloadcms/ui 4.0.0-canary.3 → 4.0.0-canary.5

package/dist/elements/EditUpload/index.js

@@ -5,32 +5,16 @@ import { useModal } from '@faceless-ui/modal';
 import React, { useRef, useState } from 'react';
 import ReactCrop from 'react-image-crop';
 import { editDrawerSlug } from '../../elements/Upload/index.js';
+import { NumberInput } from '../../fields/Number/index.js';
 import { PlusIcon } from '../../icons/Plus/index.js';
+import { ResetIcon } from '../../icons/Reset/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { appendCacheTag } from '../../utilities/appendCacheTag.js';
 import { Button } from '../Button/index.js';
+import { DialogFooter, DialogHeader, DialogModal } from '../Dialog/index.js';
 import './index.css';
+import './library.css';
 const baseClass = 'edit-upload';
-const Input = props => {
-  const {
-    name,
-    disabled,
-    onChange,
-    ref,
-    value
-  } = props;
-  return /*#__PURE__*/_jsxs("div", {
-    className: `${baseClass}__input`,
-    children: [name, /*#__PURE__*/_jsx("input", {
-      disabled: disabled,
-      name: name,
-      onChange: e => onChange(e.target.value),
-      ref: ref,
-      type: "number",
-      value: value
-    })]
-  });
-};
 const defaultCrop = {
   height: 100,
   unit: '%',
@@ -72,11 +56,8 @@ export const EditUpload = ({
   const focalWrapRef = useRef(undefined);
   const imageRef = useRef(undefined);
   const cropRef = useRef(undefined);
-  const heightInputRef = useRef(null);
-  const widthInputRef = useRef(null);
   const [imageLoaded, setImageLoaded] = useState(false);
   const onImageLoad = e => {
-    // set the default image height/width on load
     setUncroppedPixelHeight(e.currentTarget.naturalHeight);
     setUncroppedPixelWidth(e.currentTarget.naturalWidth);
     setImageLoaded(true);
@@ -86,6 +67,9 @@ export const EditUpload = ({
     value
   }) => {
     const intValue = parseInt(value);
+    if (Number.isNaN(intValue)) {
+      return null;
+    }
     const percentage = 100 * (intValue / (dimension === 'width' ? uncroppedPixelWidth : uncroppedPixelHeight));
     if (percentage <= 0 || percentage > 100) {
       return null;
@@ -112,8 +96,8 @@ export const EditUpload = ({
       onSave({
         crop: crop ? crop : undefined,
         focalPoint: focalPosition,
-        heightInPixels: Number(heightInputRef?.current?.value ?? uncroppedPixelHeight),
-        widthInPixels: Number(widthInputRef?.current?.value ?? uncroppedPixelWidth)
+        heightInPixels: Math.round(crop.height / 100 * uncroppedPixelHeight),
+        widthInPixels: Math.round(crop.width / 100 * uncroppedPixelWidth)
       });
     }
     closeModal(editDrawerSlug);
@@ -129,94 +113,76 @@ export const EditUpload = ({
     setCheckBounds(false);
   }, []);
   const centerFocalPoint = () => {
-    const containerRect = focalWrapRef.current.getBoundingClientRect();
-    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;
     setFocalPosition({
-      x: xCenter,
-      y: yCenter
+      x: 50,
+      y: 50
     });
   };
-  const fileSrcToUse = fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : fileSrc;
-  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')
-        })]
-      })]
-    }), /*#__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: `${uncroppedPixelWidth / uncroppedPixelHeight}`
-          },
-          children: [showCrop ? /*#__PURE__*/_jsx(ReactCrop, {
-            className: `${baseClass}__reactCrop`,
-            crop: crop,
-            onChange: (_, c) => setCrop(c),
-            onComplete: () => setCheckBounds(true),
-            renderSelectionAddon: () => {
-              return /*#__PURE__*/_jsx("div", {
+  const fileSrcToUse = fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : undefined;
+  const cropWidthPx = (crop.width / 100 * uncroppedPixelWidth).toFixed(0);
+  const cropHeightPx = (crop.height / 100 * uncroppedPixelHeight).toFixed(0);
+  return /*#__PURE__*/_jsxs(DialogModal, {
+    className: `${baseClass}__dialog`,
+    closeOnBlur: false,
+    size: "large",
+    slug: editDrawerSlug,
+    children: [/*#__PURE__*/_jsx(DialogHeader, {
+      showClose: true,
+      title: `${t('general:editing')} ${fileName}`
+    }), /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__body`,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__content`,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: `${baseClass}__crop`,
+          children: /*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__focal-wrapper`,
+            ref: focalWrapRef,
+            style: {
+              aspectRatio: `${uncroppedPixelWidth / uncroppedPixelHeight}`
+            },
+            children: [showCrop ? /*#__PURE__*/_jsx(ReactCrop, {
+              className: `${baseClass}__reactCrop`,
+              crop: crop,
+              onChange: (_, c) => setCrop(c),
+              onComplete: () => setCheckBounds(true),
+              renderSelectionAddon: () => /*#__PURE__*/_jsx("div", {
                 className: `${baseClass}__crop-window`,
                 ref: cropRef
-              });
-            },
-            children: /*#__PURE__*/_jsx("img", {
-              alt: t('upload:setCropArea'),
+              }),
+              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
-            })
-          }) : /*#__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", {
+            }), 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}__section`,
+            children: [/*#__PURE__*/_jsxs("div", {
+              className: `${baseClass}__section-header`,
+              children: [/*#__PURE__*/_jsx("span", {
+                className: `${baseClass}__section-title`,
                 children: t('upload:crop')
-              }), /*#__PURE__*/_jsx(Button, {
-                buttonStyle: "ghost",
+              }), /*#__PURE__*/_jsx("button", {
+                "aria-label": t('general:reset'),
                 className: `${baseClass}__reset`,
                 onClick: () => setCrop({
                   height: 100,
@@ -225,70 +191,90 @@ export const EditUpload = ({
                   x: 0,
                   y: 0
                 }),
-                children: t('general:reset')
+                type: "button",
+                children: /*#__PURE__*/_jsx(ResetIcon, {})
+              })]
+            }), /*#__PURE__*/_jsxs("div", {
+              className: `${baseClass}__fieldset`,
+              children: [/*#__PURE__*/_jsx(NumberInput, {
+                ariaLabel: t('upload:width'),
+                onChange: e_0 => fineTuneCrop({
+                  dimension: 'width',
+                  value: e_0.target.value
+                }),
+                path: "cropWidth",
+                prefix: "W",
+                readOnly: !imageLoaded,
+                value: Number(cropWidthPx)
+              }), /*#__PURE__*/_jsx(NumberInput, {
+                ariaLabel: t('upload:height'),
+                onChange: e_1 => fineTuneCrop({
+                  dimension: 'height',
+                  value: e_1.target.value
+                }),
+                path: "cropHeight",
+                prefix: "H",
+                readOnly: !imageLoaded,
+                value: Number(cropHeightPx)
               })]
-            })
-          }), /*#__PURE__*/_jsx("span", {
-            className: `${baseClass}__description`,
-            children: t('upload:cropToolDescription')
-          }), /*#__PURE__*/_jsxs("div", {
-            className: `${baseClass}__inputsWrap`,
-            children: [/*#__PURE__*/_jsx(Input, {
-              disabled: !imageLoaded,
-              name: `${t('upload:width')} (px)`,
-              onChange: value_1 => fineTuneCrop({
-                dimension: 'width',
-                value: value_1
-              }),
-              ref: widthInputRef,
-              value: (crop.width / 100 * uncroppedPixelWidth).toFixed(0)
-            }), /*#__PURE__*/_jsx(Input, {
-              disabled: !imageLoaded,
-              name: `${t('upload:height')} (px)`,
-              onChange: value_2 => fineTuneCrop({
-                dimension: 'height',
-                value: value_2
-              }),
-              ref: heightInputRef,
-              value: (crop.height / 100 * uncroppedPixelHeight).toFixed(0)
             })]
-          })]
-        }), showFocalPoint && /*#__PURE__*/_jsxs("div", {
-          className: `${baseClass}__groupWrap`,
-          children: [/*#__PURE__*/_jsx("div", {
-            children: /*#__PURE__*/_jsxs("div", {
-              className: `${baseClass}__titleWrap`,
-              children: [/*#__PURE__*/_jsx("h3", {
+          }), showFocalPoint && /*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__section`,
+            children: [/*#__PURE__*/_jsxs("div", {
+              className: `${baseClass}__section-header`,
+              children: [/*#__PURE__*/_jsx("span", {
+                className: `${baseClass}__section-title`,
                 children: t('upload:focalPoint')
-              }), /*#__PURE__*/_jsx(Button, {
-                buttonStyle: "ghost",
+              }), /*#__PURE__*/_jsx("button", {
+                "aria-label": t('general:reset'),
                 className: `${baseClass}__reset`,
                 onClick: centerFocalPoint,
-                children: t('general:reset')
+                type: "button",
+                children: /*#__PURE__*/_jsx(ResetIcon, {})
+              })]
+            }), /*#__PURE__*/_jsxs("div", {
+              className: `${baseClass}__fieldset`,
+              children: [/*#__PURE__*/_jsx(NumberInput, {
+                ariaLabel: `${t('upload:focalPoint')} X`,
+                max: 100,
+                min: 0,
+                onChange: e_2 => fineTuneFocalPosition({
+                  coordinate: 'x',
+                  value: e_2.target.value
+                }),
+                path: "focalX",
+                prefix: "X",
+                suffix: "%",
+                value: Math.round(focalPosition.x)
+              }), /*#__PURE__*/_jsx(NumberInput, {
+                ariaLabel: `${t('upload:focalPoint')} Y`,
+                max: 100,
+                min: 0,
+                onChange: e_3 => fineTuneFocalPosition({
+                  coordinate: 'y',
+                  value: e_3.target.value
+                }),
+                path: "focalY",
+                prefix: "Y",
+                suffix: "%",
+                value: Math.round(focalPosition.y)
               })]
-            })
-          }), /*#__PURE__*/_jsx("span", {
-            className: `${baseClass}__description`,
-            children: t('upload:focalPointDescription')
-          }), /*#__PURE__*/_jsxs("div", {
-            className: `${baseClass}__inputsWrap`,
-            children: [/*#__PURE__*/_jsx(Input, {
-              name: "X %",
-              onChange: value_3 => fineTuneFocalPosition({
-                coordinate: 'x',
-                value: value_3
-              }),
-              value: focalPosition.x.toFixed(0)
-            }), /*#__PURE__*/_jsx(Input, {
-              name: "Y %",
-              onChange: value_4 => fineTuneFocalPosition({
-                coordinate: 'y',
-                value: value_4
-              }),
-              value: focalPosition.y.toFixed(0)
             })]
           })]
         })]
+      })
+    }), /*#__PURE__*/_jsxs(DialogFooter, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        "aria-label": t('general:cancel'),
+        buttonStyle: "secondary",
+        onClick: () => closeModal(editDrawerSlug),
+        children: t('general:cancel')
+      }), /*#__PURE__*/_jsx(Button, {
+        "aria-label": t('general:applyChanges'),
+        buttonStyle: "primary",
+        disabled: !imageLoaded,
+        onClick: saveEdits,
+        children: t('general:applyChanges')
       })]
     })]
   });
@@ -312,100 +298,88 @@ const DraggableElement = ({
   });
   const [isDragging, setIsDragging] = useState(false);
   const dragRef = useRef(undefined);
-  const getCoordinates = React.useCallback((mouseXArg, mouseYArg, recenter) => {
+  // Keep a ref to the latest position so global mouseup handler can read it without a stale closure
+  const positionRef = useRef(position);
+  positionRef.current = position;
+  const getCoordinates = React.useCallback((mouseX, mouseY) => {
     const containerRect = containerRef.current.getBoundingClientRect();
-    const boundsRect = boundsRef.current.getBoundingClientRect();
-    const mouseX = mouseXArg ?? boundsRect.left;
-    const mouseY = mouseYArg ?? boundsRect.top;
-    const xOutOfBounds = mouseX < boundsRect.left || mouseX > boundsRect.right;
-    const yOutOfBounds = mouseY < boundsRect.top || mouseY > boundsRect.bottom;
-    let x = (mouseX - containerRect.left) / containerRect.width * 100;
-    let y = (mouseY - containerRect.top) / containerRect.height * 100;
-    const xCenter = (boundsRect.left - containerRect.left + boundsRect.width / 2) / containerRect.width * 100;
-    const yCenter = (boundsRect.top - containerRect.top + boundsRect.height / 2) / containerRect.height * 100;
-    if (xOutOfBounds || yOutOfBounds) {
-      setIsDragging(false);
-      if (mouseX < boundsRect.left) {
-        x = (boundsRect.left - containerRect.left) / containerRect.width * 100;
-      } else if (mouseX > boundsRect.right) {
-        x = (containerRect.width - (containerRect.right - boundsRect.right)) / containerRect.width * 100;
-      }
-      if (mouseY < boundsRect.top) {
-        y = (boundsRect.top - containerRect.top) / containerRect.height * 100;
-      } else if (mouseY > boundsRect.bottom) {
-        y = (containerRect.height - (containerRect.bottom - boundsRect.bottom)) / containerRect.height * 100;
-      }
-      if (recenter) {
-        x = xOutOfBounds ? xCenter : x;
-        y = yOutOfBounds ? yCenter : y;
-      }
-    }
+    const x = (mouseX - containerRect.left) / containerRect.width * 100;
+    const y = (mouseY - containerRect.top) / containerRect.height * 100;
     return {
-      x,
-      y
+      x: Math.max(0, Math.min(100, x)),
+      y: Math.max(0, Math.min(100, y))
     };
-  }, [boundsRef, containerRef]);
+  }, [containerRef]);
   const handleMouseDown = event => {
     event.preventDefault();
     setIsDragging(true);
   };
-  const handleMouseMove = event_0 => {
-    if (!isDragging) {
-      return null;
-    }
-    const {
-      x: x_0,
-      y: y_0
-    } = getCoordinates(event_0.clientX, event_0.clientY);
-    setPosition({
-      x: x_0,
-      y: y_0
-    });
-  };
-  const onDrop = () => {
-    setIsDragging(false);
-    onDragEnd(position);
-  };
+  // Attach global listeners while dragging — this ensures events fire even when
+  // the cursor leaves the focal wrapper area during a fast drag
   React.useEffect(() => {
-    if (isDragging || !dragRef.current) {
+    if (!isDragging) {
       return;
     }
-    if (checkBounds) {
-      const {
-        height,
-        left,
-        top,
-        width
-      } = dragRef.current.getBoundingClientRect();
+    const handleMove = e => {
+      if (!containerRef.current) {
+        return;
+      }
       const {
-        x: x_1,
-        y: y_1
-      } = getCoordinates(left + width / 2, top + height / 2, true);
-      onDragEnd({
-        x: x_1,
-        y: y_1
-      });
+        x: x_0,
+        y: y_0
+      } = getCoordinates(e.clientX, e.clientY);
       setPosition({
-        x: x_1,
-        y: y_1
+        x: x_0,
+        y: y_0
       });
-      setCheckBounds(false);
+    };
+    const handleUp = () => {
+      setIsDragging(false);
+      onDragEnd(positionRef.current);
+    };
+    document.addEventListener('mousemove', handleMove);
+    document.addEventListener('mouseup', handleUp);
+    return () => {
+      document.removeEventListener('mousemove', handleMove);
+      document.removeEventListener('mouseup', handleUp);
+    };
+  }, [isDragging, getCoordinates, onDragEnd, containerRef]);
+  // Re-check position when crop changes (the crop window may have moved)
+  React.useEffect(() => {
+    if (isDragging || !checkBounds || !dragRef.current) {
       return;
     }
-  }, [getCoordinates, isDragging, checkBounds, setCheckBounds, position.x, position.y, onDragEnd]);
+    const {
+      height,
+      left,
+      top,
+      width
+    } = dragRef.current.getBoundingClientRect();
+    const {
+      x: x_1,
+      y: y_1
+    } = getCoordinates(left + width / 2, top + height / 2);
+    onDragEnd({
+      x: x_1,
+      y: y_1
+    });
+    setPosition({
+      x: x_1,
+      y: y_1
+    });
+    setCheckBounds(false);
+  }, [getCoordinates, isDragging, checkBounds, setCheckBounds, onDragEnd]);
   React.useEffect(() => {
     setPosition({
       x: initialPosition.x,
       y: initialPosition.y
     });
   }, [initialPosition.x, initialPosition.y]);
-  return /*#__PURE__*/_jsxs("div", {
-    className: [`${baseClass}__draggable-container`, isDragging && `${baseClass}__draggable-container--dragging`].filter(Boolean).join(' '),
-    onMouseMove: handleMouseMove,
-    children: [/*#__PURE__*/_jsx("button", {
+  return /*#__PURE__*/_jsx("div", {
+    className: `${baseClass}__draggable-container`,
+    children: /*#__PURE__*/_jsx("button", {
       className: [`${baseClass}__draggable`, className].filter(Boolean).join(' '),
       onMouseDown: handleMouseDown,
-      onMouseUp: onDrop,
       ref: dragRef,
       style: {
         left: `${position.x}%`,
@@ -413,7 +387,7 @@ const DraggableElement = ({
       },
       type: "button",
       children: children
-    }), /*#__PURE__*/_jsx("div", {})]
+    })
   });
 };
 //# sourceMappingURL=index.js.map