@rolster/react-components 19.6.3 → 19.6.4

package/dist/cjs/index.cjs

@@ -414,13 +414,21 @@ function requireReactJsxRuntime_development () {
 	return reactJsxRuntime_development;
 }
 
-if (process.env.NODE_ENV === 'production') {
-  jsxRuntime.exports = requireReactJsxRuntime_production();
-} else {
-  jsxRuntime.exports = requireReactJsxRuntime_development();
+var hasRequiredJsxRuntime;
+
+function requireJsxRuntime () {
+	if (hasRequiredJsxRuntime) return jsxRuntime.exports;
+	hasRequiredJsxRuntime = 1;
+
+	if (process.env.NODE_ENV === 'production') {
+	  jsxRuntime.exports = requireReactJsxRuntime_production();
+	} else {
+	  jsxRuntime.exports = requireReactJsxRuntime_development();
+	}
+	return jsxRuntime.exports;
 }
 
-var jsxRuntimeExports = jsxRuntime.exports;
+var jsxRuntimeExports = requireJsxRuntime();
 
 function renderClassStatus(base, status = {}, additionals) {
     const _classElement = [base];
@@ -1139,13 +1147,8 @@ function oklabToLinearRgb(l, a, b) {
 }
 const inGamut = ([r, g, b]) => {
     const e = 1e-4;
-    return r >= -e && r <= 1 + e && g >= -e && g <= 1 + e && b >= -e && b <= 1 + e;
+    return (r >= -e && r <= 1 + e && g >= -e && g <= 1 + e && b >= -e && b <= 1 + e);
 };
-/**
- * Converts an OKLCH color to sRGB. If the requested chroma falls outside the
- * sRGB gamut, chroma is reduced (binary search) while keeping lightness and
- * hue fixed — this preserves the intended tone instead of clipping channels.
- */
 function oklchToRgb({ l, c, h }) {
     const a = Math.cos(h);
     const b = Math.sin(h);
@@ -1167,10 +1170,6 @@ function oklchToRgb({ l, c, h }) {
     const [lr, lg, lb] = linearAt(c);
     return { r: linearToSrgb(lr), g: linearToSrgb(lg), b: linearToSrgb(lb) };
 }
-/**
- * Scales chroma down toward the lightness extremes (very light / very dark) so
- * shades do not look oversaturated at the ends. Peaks at L=0.5 (factor 1).
- */
 const chromaFactor = (lightness) => 0.4 + 0.6 * (1 - Math.abs(lightness - 0.5) * 2);
 function detectShadeLevel(lightness) {
     let bestLevel = '500';
@@ -3979,8 +3978,8 @@ function useResize(props) {
     }, []);
 }
 
-const minValueSlider = 50;
-const maxValueSlider = 100;
+const MIN_SLIDER_VALUE = 50;
+const MAX_SLIDER_VALUE = 100;
 function getRatioFactor(ratio) {
     switch (ratio) {
         case '16:9':
@@ -4028,6 +4027,7 @@ function RlsImageEditor(props) {
     const refPicture = require$$0.useRef(null);
     const image = require$$0.useRef(new Image());
     const originalImage = require$$0.useRef(undefined);
+    const hasInteracted = require$$0.useRef(false);
     const ratio = require$$0.useMemo(() => {
         return props.ratio || '1:1';
     }, [props.ratio]);
@@ -4086,18 +4086,22 @@ function RlsImageEditor(props) {
             image.current.width > 0 &&
             image.current.height > 0) {
             const { height, width } = image.current.width >= image.current.height
-                ? refreshSelectionFromHeight(rateSelection)
-                : refreshSelectionFromWidth(rateSelection);
+                ? refreshSelectionFromWidth(rateSelection)
+                : refreshSelectionFromHeight(rateSelection);
             refSelection.current.style.width = `${width}px`;
             refSelection.current.style.height = `${height}px`;
+            const left = refImage.current.offsetWidth - width;
+            const top = refImage.current.offsetHeight - height;
+            if (!hasInteracted.current) {
+                refSelection.current.style.left = `${left / 2}px`;
+                refSelection.current.style.top = `${top / 2}px`;
+            }
             if (refSelection.current.offsetLeft + width >
                 refImage.current.offsetWidth) {
-                const left = refImage.current.offsetWidth - width;
                 refSelection.current.style.left = `${left < 0 ? 0 : left}px`;
             }
             if (refSelection.current.offsetTop + height >
                 refImage.current.offsetHeight) {
-                const top = refImage.current.offsetHeight - height;
                 refSelection.current.style.top = `${top < 0 ? 0 : top}px`;
             }
             refreshOverlaysStyle();
@@ -4121,7 +4125,7 @@ function RlsImageEditor(props) {
         const width = (refBody.current.offsetHeight * image.current.width) /
             image.current.height;
         return setImageStyle(`${width}px`, '100%');
-    }, [ratio]);
+    }, []);
     require$$0.useEffect(() => {
         image.current.onload = () => {
             const context = refCanvas.current.getContext('2d', {
@@ -4160,7 +4164,10 @@ function RlsImageEditor(props) {
     useRelocationOnComponent({
         container: refImage,
         element: refSelection,
-        onDrag: refreshOverlaysStyle
+        onDrag: () => {
+            hasInteracted.current = true;
+            refreshOverlaysStyle();
+        }
     });
     useResize({ refElement: refImage, onResize: onResizeElement });
     const onCropImage = require$$0.useCallback(() => {
@@ -4199,7 +4206,7 @@ function RlsImageEditor(props) {
             context?.putImageData(originalImage.current, 0, 0);
         }
     }, []);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-image-editor", children: [jsxRuntimeExports.jsx("div", { ref: refBody, className: "rls-image-editor__body", children: jsxRuntimeExports.jsxs("div", { ref: refImage, className: "rls-image-editor__body__image", children: [jsxRuntimeExports.jsx("div", { ref: refSelection, className: "rls-image-editor__body__selection" }), jsxRuntimeExports.jsx("div", { ref: refOverlayTop, className: "rls-image-editor__body__overlay--top" }), jsxRuntimeExports.jsx("div", { ref: refOverlayRight, className: "rls-image-editor__body__overlay--right" }), jsxRuntimeExports.jsx("div", { ref: refOverlayBottom, className: "rls-image-editor__body__overlay--bottom" }), jsxRuntimeExports.jsx("div", { ref: refOverlayLeft, className: "rls-image-editor__body__overlay--left" }), jsxRuntimeExports.jsx("canvas", { ref: refCanvas })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__footer", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-editor__sliders", children: jsxRuntimeExports.jsx(RlsSlider, { prefixIcon: "external-link", value: selection, minValue: minValueSlider, maxValue: maxValueSlider, onValue: setSelection, disabled: props.disabled }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__actions", children: [props.children, jsxRuntimeExports.jsx(RlsButton, { type: "classic", prefixIcon: "refresh", onClick: onRestore, disabled: props.disabled, children: labels.actionRestore }), jsxRuntimeExports.jsx(RlsButton, { type: "raised", prefixIcon: "crop", onClick: onCropImage, disabled: props.disabled, children: labels.actionSelect })] })] }), jsxRuntimeExports.jsx("canvas", { ref: refPicture })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-image-editor", children: [jsxRuntimeExports.jsx("div", { ref: refBody, className: "rls-image-editor__body", children: jsxRuntimeExports.jsxs("div", { ref: refImage, className: "rls-image-editor__body__image", children: [jsxRuntimeExports.jsx("div", { ref: refSelection, className: "rls-image-editor__body__selection" }), jsxRuntimeExports.jsx("div", { ref: refOverlayTop, className: "rls-image-editor__body__overlay--top" }), jsxRuntimeExports.jsx("div", { ref: refOverlayRight, className: "rls-image-editor__body__overlay--right" }), jsxRuntimeExports.jsx("div", { ref: refOverlayBottom, className: "rls-image-editor__body__overlay--bottom" }), jsxRuntimeExports.jsx("div", { ref: refOverlayLeft, className: "rls-image-editor__body__overlay--left" }), jsxRuntimeExports.jsx("canvas", { ref: refCanvas })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__footer", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-editor__sliders", children: jsxRuntimeExports.jsx(RlsSlider, { prefixIcon: "external-link", value: selection, minValue: MIN_SLIDER_VALUE, maxValue: MAX_SLIDER_VALUE, onValue: setSelection, disabled: props.disabled }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__actions", children: [props.children, jsxRuntimeExports.jsx(RlsButton, { type: "flat", rlsTheme: "standard", prefixIcon: "refresh", onClick: onRestore, disabled: props.disabled, children: labels.actionRestore }), jsxRuntimeExports.jsx(RlsButton, { type: "raised", rlsTheme: "primary", prefixIcon: "crop", onClick: onCropImage, disabled: props.disabled, children: labels.actionSelect })] })] }), jsxRuntimeExports.jsx("canvas", { ref: refPicture })] }));
 }
 
 function RlsImageEditorModal(props) {