@rolster/react-components 18.23.6 → 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,11 +3328,22 @@ 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.rateSelection ?? 60);
+    const [selection, setSelection] = useState(props.selection ?? 60);
     const [labels, setLabels] = useState({
         actionRestore: reactI18n('editorImageActionRestore'),
         actionSelect: reactI18n('editorImageActionSelect')
@@ -3346,6 +3359,9 @@ function RlsImageEditor(props) {
     const refPicture = useRef(null);
     const image = useRef(new Image());
     const originalImage = useRef();
+    const ratio = useMemo(() => {
+        return props.ratio || '1:1';
+    }, [props.ratio]);
     const getCropProperties = useCallback(() => {
         return {
             height: simpleThreeRule(refImage.current.offsetHeight, image.current.height, refSelection.current.offsetHeight),
@@ -3371,7 +3387,7 @@ function RlsImageEditor(props) {
         refOverlayLeft.current.style.width = `calc(${left}px)`;
     }, []);
     const refreshSelectionFromWidth = useCallback((rateSelection) => {
-        const ratioFactor = getRatioFactor(props.ratio || '1:1');
+        const ratioFactor = getRatioFactor(ratio);
         const _ratio = rateSelection * ratioFactor;
         const offsetWidth = refImage.current?.offsetWidth || 0;
         const offsetHeight = refImage.current?.offsetHeight || 0;
@@ -3382,22 +3398,24 @@ function RlsImageEditor(props) {
             width = height / ratioFactor;
         }
         return { height, width };
-    }, [props.ratio]);
+    }, [ratio]);
     const refreshSelectionFromHeight = useCallback((rateSelection) => {
-        const ratioFactor = getRatioFactor(props.ratio || '1:1');
-        const _ratio = rateSelection * ratioFactor;
+        const ratioFactor = getRatioFactor(ratio);
+        const _ratio = rateSelection / ratioFactor;
         const offsetWidth = refImage.current?.offsetWidth || 0;
         const offsetHeight = refImage.current?.offsetHeight || 0;
         let height = (offsetHeight * rateSelection) / 100;
         let width = (offsetHeight * _ratio) / 100;
         if (width > offsetWidth) {
             width = offsetWidth;
-            height = width / ratioFactor;
+            height = width * ratioFactor;
         }
         return { height, width };
-    }, [props.ratio]);
+    }, [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);
@@ -3405,17 +3423,17 @@ 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();
         }
-    }, [props.ratio]);
+    }, [ratio]);
     const setImageStyle = useCallback((width, height) => {
         refImage.current.style.width = width;
         refImage.current.style.height = height;
@@ -3424,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;
@@ -3434,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);
         };
@@ -3464,7 +3483,7 @@ function RlsImageEditor(props) {
     }, [props.src]);
     useEffect(() => {
         refreshSelectionStyle(selection);
-    }, [selection]);
+    }, [ratio, selection]);
     const onResizeElement = useCallback(() => {
         refreshSelectionStyle(selection);
     }, [selection]);
@@ -3477,7 +3496,7 @@ function RlsImageEditor(props) {
     const onCropImage = useCallback(() => {
         const cropProps = getCropProperties();
         const width = props.maxWidth || cropProps.width;
-        const height = width * getRatioFactor(props.ratio || '1:1');
+        const height = width * getRatioFactor(ratio);
         refPicture.current.width = width;
         refPicture.current.height = height;
         const context = refPicture.current.getContext('2d');
@@ -3497,7 +3516,7 @@ function RlsImageEditor(props) {
             }
         }, props.mimeType || 'image/jpeg', props.quality || 1);
     }, [
-        props.ratio,
+        ratio,
         props.mimeType,
         props.onValue,
         props.formControl,
@@ -3510,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) {
@@ -3564,7 +3583,7 @@ function useImageEditorController(options) {
         setSrcEditor(undefined);
     }, []);
     const RlsImageEditorChooser = useMemo(() => {
-        return (srcEditor && (jsxRuntimeExports.jsx(RlsImageEditorModal, { visible: true, src: srcEditor, formControl: options.formControl, maxWidth: options.maxWidth, quality: options.quality, ratio: options.ratio, onValue: onEditorValue, children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", rlsTheme: "danger", onClick: onCancel, disabled: options.disabled, children: labels.actionCancel }) })));
+        return (srcEditor && (jsxRuntimeExports.jsx(RlsImageEditorModal, { visible: true, src: srcEditor, formControl: options.formControl, maxWidth: options.maxWidth, quality: options.quality, ratio: options.ratio, selection: options.selection, onValue: onEditorValue, children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", rlsTheme: "danger", onClick: onCancel, disabled: options.disabled, children: labels.actionCancel }) })));
     }, [
         srcEditor,
         labels,