@rolster/react-components 18.23.7 → 18.23.8

package/dist/es/index.js

@@ -3310,6 +3310,8 @@ function useResize(props) {
     }, []);
 }
 
+const minValueSlider = 50;
+const maxValueSlider = 100;
 function getRatioFactor(ratio) {
     switch (ratio) {
         case '16:9':
@@ -3326,8 +3328,19 @@ function getRatioFactor(ratio) {
             return 1;
     }
 }
-function simpleThreeRule(value1, value2, proportion) {
-    return (value2 * proportion) / value1;
+function simpleThreeRule(a1, b1, a2) {
+    return (b1 * a2) / a1;
+}
+function calculateImgDimension(image, dimension) {
+    let { height, width } = image;
+    if (height > width) {
+        height = height > dimension ? dimension : height;
+        width = simpleThreeRule(image.height, height, width);
+        return { height, width };
+    }
+    width = width > dimension ? dimension : width;
+    height = simpleThreeRule(image.width, width, height);
+    return { height, width };
 }
 function RlsImageEditor(props) {
     const [selection, setSelection] = useState(props.selection ?? 60);
@@ -3395,12 +3408,14 @@ function RlsImageEditor(props) {
         let width = (offsetHeight * _ratio) / 100;
         if (width > offsetWidth) {
             width = offsetWidth;
-            height = width / ratioFactor;
+            height = width * ratioFactor;
         }
         return { height, width };
     }, [ratio]);
     const refreshSelectionStyle = useCallback((rateSelection) => {
-        if (image.current.width > 0 && image.current.height > 0) {
+        if (refSelection.current &&
+            image.current.width > 0 &&
+            image.current.height > 0) {
             const { height, width } = image.current.width >= image.current.height
                 ? refreshSelectionFromHeight(rateSelection)
                 : refreshSelectionFromWidth(rateSelection);
@@ -3408,13 +3423,13 @@ function RlsImageEditor(props) {
             refSelection.current.style.height = `${height}px`;
             if (refSelection.current.offsetLeft + width >
                 refImage.current.offsetWidth) {
-                const selectionLeft = refImage.current.offsetWidth - width;
-                refSelection.current.style.left = `${selectionLeft}px`;
+                const left = refImage.current.offsetWidth - width;
+                refSelection.current.style.left = `${left < 0 ? 0 : left}px`;
             }
             if (refSelection.current.offsetTop + height >
                 refImage.current.offsetHeight) {
-                const selectionTop = refImage.current.offsetHeight - height;
-                refSelection.current.style.top = `${selectionTop}px`;
+                const top = refImage.current.offsetHeight - height;
+                refSelection.current.style.top = `${top < 0 ? 0 : top}px`;
             }
             refreshOverlaysStyle();
         }
@@ -3427,7 +3442,7 @@ function RlsImageEditor(props) {
     }, []);
     const refreshImageStyle = useCallback(() => {
         if (image.current.width <= 0 || image.current.height <= 0) {
-            return setImageStyle('0%', '0%');
+            return setImageStyle('0px', '0px');
         }
         const height = (refBody.current.offsetWidth * image.current.height) /
             image.current.width;
@@ -3437,16 +3452,17 @@ function RlsImageEditor(props) {
         const width = (refBody.current.offsetHeight * image.current.width) /
             image.current.height;
         return setImageStyle(`${width}px`, '100%');
-    }, []);
+    }, [ratio]);
     useEffect(() => {
         image.current.onload = () => {
             const context = refCanvas.current.getContext('2d', {
                 willReadFrequently: true
             });
-            refCanvas.current.width = image.current.width;
-            refCanvas.current.height = image.current.height;
-            context?.drawImage(image.current, 0, 0, image.current.width, image.current.height);
-            originalImage.current = context?.getImageData(0, 0, refCanvas.current.width, refCanvas.current.height);
+            const { height, width } = calculateImgDimension(image.current, props.maxDimension || 500);
+            refCanvas.current.width = width;
+            refCanvas.current.height = height;
+            context?.drawImage(image.current, 0, 0, width, height);
+            originalImage.current = context?.getImageData(0, 0, width, height);
             refreshImageStyle();
             refreshSelectionStyle(selection);
         };
@@ -3467,7 +3483,7 @@ function RlsImageEditor(props) {
     }, [props.src]);
     useEffect(() => {
         refreshSelectionStyle(selection);
-    }, [selection]);
+    }, [ratio, selection]);
     const onResizeElement = useCallback(() => {
         refreshSelectionStyle(selection);
     }, [selection]);
@@ -3513,7 +3529,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: 50, maxValue: 100, 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: 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 })] }));
 }
 
 function RlsImageEditorModal(props) {