@oneblink/apps-react 8.12.0-beta.4 → 8.12.0-beta.6

package/dist/components/ImageCropper/CropModal.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { Area } from 'react-easy-crop';
+import { PercentCrop } from 'react-image-crop';
 declare function CropModal({ imageSrc, onClose, onSave, }: {
     imageSrc: string;
     onClose: () => void;
-    onSave: (imageArea: Area) => void;
+    onSave: (imageArea: PercentCrop) => void;
 }): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof CropModal>;
 export default _default;

package/dist/components/ImageCropper/CropModal.js

@@ -1,36 +1,27 @@
 import * as React from 'react';
-import ImageCropper, { getAspectRatio } from '.';
+import ImageCropper from '.';
 import scrollingService from '../../services/scrolling-service';
-import { AspectRatioButton, availableAspectRatios, } from './resource-components';
 function CropModal({ imageSrc, onClose, onSave, }) {
-    const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);
+    const [croppedAreaPercent, setCroppedAreaPercent] = React.useState(null);
     const handleSaveCrop = React.useCallback(async () => {
-        if (!croppedAreaPixels)
+        if (!croppedAreaPercent)
             return;
-        onSave(croppedAreaPixels);
-    }, [croppedAreaPixels, onSave]);
+        onSave(croppedAreaPercent);
+    }, [croppedAreaPercent, onSave]);
     React.useEffect(() => {
         scrollingService.disableScrolling();
         return () => {
             scrollingService.enableScrolling();
         };
     }, []);
-    const [selectedAspectRatio, setSelectedAspectRatio] = React.useState(availableAspectRatios[0]);
-    const aspectRatio = React.useMemo(() => getAspectRatio({
-        width: selectedAspectRatio.width,
-        height: selectedAspectRatio.height,
-    }), [selectedAspectRatio]);
     return (React.createElement("div", { className: "modal is-active" },
         React.createElement("div", { className: "modal-background-faded" }),
         React.createElement("div", { className: "ob-crop ob-border-radius" },
-            React.createElement("div", { className: "ob-crop__content ob-border-radius", 
-                // TODO: Put in css file if Blake gives the ok for this implementation
-                style: { display: 'flex', flexDirection: 'column', gap: 8 } },
-                React.createElement(ImageCropper, { imgSrc: imageSrc, onCropComplete: setCroppedAreaPixels, outputAspectRatio: aspectRatio }),
-                React.createElement(AspectRatioButton, { onSelectAspectRatio: setSelectedAspectRatio, selectedAspectRatio: selectedAspectRatio })),
+            React.createElement("div", { className: "ob-crop__content ob-border-radius" },
+                React.createElement(ImageCropper, { imgSrc: imageSrc, onCropComplete: setCroppedAreaPercent })),
             React.createElement("div", { className: "ob-annotation__buttons ob-annotation__buttons-actions" },
                 React.createElement("button", { type: "button", className: "button is-light ob-button ob-annotation__button ob-annotation__button-action cypress-crop-cancel-button", onClick: onClose }, "Cancel"),
-                React.createElement("button", { type: "button", className: "button is-primary ob-button ob-annotation__button ob-annotation__button-action cypress-crop-save-button", disabled: !croppedAreaPixels, onClick: handleSaveCrop }, "Save")))));
+                React.createElement("button", { type: "button", className: "button is-primary ob-button ob-annotation__button ob-annotation__button-action cypress-crop-save-button", disabled: !croppedAreaPercent, onClick: handleSaveCrop }, "Save")))));
 }
 export default React.memo(CropModal);
 //# sourceMappingURL=CropModal.js.map

package/dist/components/ImageCropper/CropModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"CropModal.js","sourceRoot":"","sources":["../../../src/components/ImageCropper/CropModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,YAAY,EAAE,EAAE,cAAc,EAAE,MAAM,GAAG,CAAA;AAEhD,OAAO,gBAAgB,MAAM,kCAAkC,CAAA;AAC/D,OAAO,EACL,iBAAiB,EACjB,qBAAqB,GAEtB,MAAM,uBAAuB,CAAA;AAE9B,SAAS,SAAS,CAAC,EACjB,QAAQ,EACR,OAAO,EACP,MAAM,GAKP;IACC,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAC9D,IAAI,CACL,CAAA;IAED,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QAClD,IAAI,CAAC,iBAAiB;YAAE,OAAM;QAE9B,MAAM,CAAC,iBAAiB,CAAC,CAAA;IAC3B,CAAC,EAAE,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAA;IAE/B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,gBAAgB,CAAC,gBAAgB,EAAE,CAAA;QAEnC,OAAO,GAAG,EAAE;YACV,gBAAgB,CAAC,eAAe,EAAE,CAAA;QACpC,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GACjD,KAAK,CAAC,QAAQ,CAAc,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAA;IAEvD,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAC/B,GAAG,EAAE,CACH,cAAc,CAAC;QACb,KAAK,EAAE,mBAAmB,CAAC,KAAK;QAChC,MAAM,EAAE,mBAAmB,CAAC,MAAM;KACnC,CAAC,EACJ,CAAC,mBAAmB,CAAC,CACtB,CAAA;IACD,OAAO,CACL,6BAAK,SAAS,EAAC,iBAAiB;QAC9B,6BAAK,SAAS,EAAC,wBAAwB,GAAO;QAC9C,6BAAK,SAAS,EAAC,0BAA0B;YACvC,6BACE,SAAS,EAAC,mCAAmC;gBAC7C,sEAAsE;gBACtE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE;gBAE3D,oBAAC,YAAY,IACX,MAAM,EAAE,QAAQ,EAChB,cAAc,EAAE,oBAAoB,EACpC,iBAAiB,EAAE,WAAW,GAC9B;gBACF,oBAAC,iBAAiB,IAChB,mBAAmB,EAAE,sBAAsB,EAC3C,mBAAmB,EAAE,mBAAmB,GACxC,CACE;YACN,6BAAK,SAAS,EAAC,uDAAuD;gBACpE,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yGAAyG,EACnH,OAAO,EAAE,OAAO,aAGT;gBACT,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yGAAyG,EACnH,QAAQ,EAAE,CAAC,iBAAiB,EAC5B,OAAO,EAAE,cAAc,WAGhB,CACL,CACF,CACF,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport ImageCropper, { getAspectRatio } from '.'\nimport { Area } from 'react-easy-crop'\nimport scrollingService from '../../services/scrolling-service'\nimport {\n  AspectRatioButton,\n  availableAspectRatios,\n  AspectRatio,\n} from './resource-components'\n\nfunction CropModal({\n  imageSrc,\n  onClose,\n  onSave,\n}: {\n  imageSrc: string\n  onClose: () => void\n  onSave: (imageArea: Area) => void\n}) {\n  const [croppedAreaPixels, setCroppedAreaPixels] = React.useState<Area | null>(\n    null,\n  )\n\n  const handleSaveCrop = React.useCallback(async () => {\n    if (!croppedAreaPixels) return\n\n    onSave(croppedAreaPixels)\n  }, [croppedAreaPixels, onSave])\n\n  React.useEffect(() => {\n    scrollingService.disableScrolling()\n\n    return () => {\n      scrollingService.enableScrolling()\n    }\n  }, [])\n\n  const [selectedAspectRatio, setSelectedAspectRatio] =\n    React.useState<AspectRatio>(availableAspectRatios[0])\n\n  const aspectRatio = React.useMemo(\n    () =>\n      getAspectRatio({\n        width: selectedAspectRatio.width,\n        height: selectedAspectRatio.height,\n      }),\n    [selectedAspectRatio],\n  )\n  return (\n    <div className=\"modal is-active\">\n      <div className=\"modal-background-faded\"></div>\n      <div className=\"ob-crop ob-border-radius\">\n        <div\n          className=\"ob-crop__content ob-border-radius\"\n          // TODO: Put in css file if Blake gives the ok for this implementation\n          style={{ display: 'flex', flexDirection: 'column', gap: 8 }}\n        >\n          <ImageCropper\n            imgSrc={imageSrc}\n            onCropComplete={setCroppedAreaPixels}\n            outputAspectRatio={aspectRatio}\n          />\n          <AspectRatioButton\n            onSelectAspectRatio={setSelectedAspectRatio}\n            selectedAspectRatio={selectedAspectRatio}\n          />\n        </div>\n        <div className=\"ob-annotation__buttons ob-annotation__buttons-actions\">\n          <button\n            type=\"button\"\n            className=\"button is-light ob-button ob-annotation__button ob-annotation__button-action cypress-crop-cancel-button\"\n            onClick={onClose}\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            className=\"button is-primary ob-button ob-annotation__button ob-annotation__button-action cypress-crop-save-button\"\n            disabled={!croppedAreaPixels}\n            onClick={handleSaveCrop}\n          >\n            Save\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default React.memo(CropModal)\n"]}
+{"version":3,"file":"CropModal.js","sourceRoot":"","sources":["../../../src/components/ImageCropper/CropModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,YAAY,MAAM,GAAG,CAAA;AAC5B,OAAO,gBAAgB,MAAM,kCAAkC,CAAA;AAG/D,SAAS,SAAS,CAAC,EACjB,QAAQ,EACR,OAAO,EACP,MAAM,GAKP;IACC,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAC/C,KAAK,CAAC,QAAQ,CAAqB,IAAI,CAAC,CAAA;IAE1C,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QAClD,IAAI,CAAC,kBAAkB;YAAE,OAAM;QAE/B,MAAM,CAAC,kBAAkB,CAAC,CAAA;IAC5B,CAAC,EAAE,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC,CAAA;IAEhC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,gBAAgB,CAAC,gBAAgB,EAAE,CAAA;QAEnC,OAAO,GAAG,EAAE;YACV,gBAAgB,CAAC,eAAe,EAAE,CAAA;QACpC,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,6BAAK,SAAS,EAAC,iBAAiB;QAC9B,6BAAK,SAAS,EAAC,wBAAwB,GAAO;QAC9C,6BAAK,SAAS,EAAC,0BAA0B;YACvC,6BAAK,SAAS,EAAC,mCAAmC;gBAChD,oBAAC,YAAY,IACX,MAAM,EAAE,QAAQ,EAChB,cAAc,EAAE,qBAAqB,GACrC,CACE;YACN,6BAAK,SAAS,EAAC,uDAAuD;gBACpE,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yGAAyG,EACnH,OAAO,EAAE,OAAO,aAGT;gBACT,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yGAAyG,EACnH,QAAQ,EAAE,CAAC,kBAAkB,EAC7B,OAAO,EAAE,cAAc,WAGhB,CACL,CACF,CACF,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport ImageCropper from '.'\nimport scrollingService from '../../services/scrolling-service'\nimport { PercentCrop } from 'react-image-crop'\n\nfunction CropModal({\n  imageSrc,\n  onClose,\n  onSave,\n}: {\n  imageSrc: string\n  onClose: () => void\n  onSave: (imageArea: PercentCrop) => void\n}) {\n  const [croppedAreaPercent, setCroppedAreaPercent] =\n    React.useState<PercentCrop | null>(null)\n\n  const handleSaveCrop = React.useCallback(async () => {\n    if (!croppedAreaPercent) return\n\n    onSave(croppedAreaPercent)\n  }, [croppedAreaPercent, onSave])\n\n  React.useEffect(() => {\n    scrollingService.disableScrolling()\n\n    return () => {\n      scrollingService.enableScrolling()\n    }\n  }, [])\n\n  return (\n    <div className=\"modal is-active\">\n      <div className=\"modal-background-faded\"></div>\n      <div className=\"ob-crop ob-border-radius\">\n        <div className=\"ob-crop__content ob-border-radius\">\n          <ImageCropper\n            imgSrc={imageSrc}\n            onCropComplete={setCroppedAreaPercent}\n          />\n        </div>\n        <div className=\"ob-annotation__buttons ob-annotation__buttons-actions\">\n          <button\n            type=\"button\"\n            className=\"button is-light ob-button ob-annotation__button ob-annotation__button-action cypress-crop-cancel-button\"\n            onClick={onClose}\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            className=\"button is-primary ob-button ob-annotation__button ob-annotation__button-action cypress-crop-save-button\"\n            disabled={!croppedAreaPercent}\n            onClick={handleSaveCrop}\n          >\n            Save\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default React.memo(CropModal)\n"]}

package/dist/components/ImageCropper/index.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
-import { Area, CropperProps } from 'react-easy-crop';
-declare const _default: React.MemoExoticComponent<({ imgSrc, disabled, onCropComplete, outputAspectRatio, zoomWithScroll, cropperStyles, cropperHeight, }: {
+import { PercentCrop } from 'react-image-crop';
+import 'react-image-crop/src/ReactCrop.scss';
+export { PercentCrop };
+declare const _default: React.MemoExoticComponent<({ imgSrc, disabled, onCropComplete, outputAspectRatio, cropperHeight, }: {
     imgSrc: string;
     disabled?: boolean;
-    onCropComplete: (croppedAreaPixels: Area) => void;
+    onCropComplete: (croppedAreaPixels: PercentCrop) => void;
     outputAspectRatio?: number;
-    zoomWithScroll?: boolean;
-    cropperStyles?: CropperProps["style"];
     cropperHeight?: number;
 }) => React.JSX.Element>;
 export default _default;
@@ -14,8 +14,8 @@ export declare const getAspectRatio: ({ width, height, }: {
     width: number;
     height: number;
 }) => number;
-export declare const generateCroppedImageBlob: ({ croppedAreaPixels, imgSrc, size, fileType, }: {
-    croppedAreaPixels: Area;
+export declare const generateCroppedImageBlob: ({ croppedAreaPercent, imgSrc, size, fileType, }: {
+    croppedAreaPercent: PercentCrop;
     imgSrc: string;
     /**
      * If provided, the cropped image will be resized to the given size. If not

package/dist/components/ImageCropper/index.js

@@ -1,47 +1,94 @@
-import React, { memo, useMemo } from 'react';
-import Cropper from 'react-easy-crop';
-import { CropContainer, ZoomSlider, SLIDER_WHEEL_INTERVAL_VALUE, } from './resource-components';
-const defaultZoom = 1;
-const defaultCrop = { x: 0, y: 0 };
-const emptyFn = () => { };
-const ImageCropper = ({ imgSrc, disabled, onCropComplete, outputAspectRatio, zoomWithScroll, cropperStyles, cropperHeight, }) => {
-    const [crop, setCrop] = React.useState(defaultCrop);
-    const [zoom, setZoom] = React.useState(defaultZoom);
-    const [image, setImage] = React.useState(null);
-    React.useEffect(() => {
-        if (outputAspectRatio) {
-            // If we have a desired aspect ratio, we dont need to get it from the current image
+import React, { memo, useEffect } from 'react';
+import ReactImageCrop from 'react-image-crop';
+import { CropContainer } from './resource-components';
+import 'react-image-crop/src/ReactCrop.scss';
+import clsx from 'clsx';
+const defaultCrop = {
+    unit: '%',
+    height: 100,
+    width: 100,
+    x: 0,
+    y: 0,
+};
+const getDefaultCropFromAspectRatio = ({ outputAspectRatio, imageWidth, imageHeight, }) => {
+    const imageAspect = imageWidth / imageHeight;
+    // Compute the largest rectangle that fits within the image and matches the aspect ratio
+    let width;
+    let height;
+    if (imageAspect >= outputAspectRatio) {
+        // Image is wider than desired aspect: constrain width by the height
+        height = 100;
+        const widthInPixels = imageHeight * outputAspectRatio;
+        // as percent
+        width = (widthInPixels / imageWidth) * 100;
+    }
+    else {
+        // Image is taller/narrower than desired aspect: constrain height by the width
+        width = 100;
+        const heightInPixels = imageHeight * outputAspectRatio;
+        // as percent
+        height = (heightInPixels / imageHeight) * 100;
+    }
+    // Center the crop
+    const x = Math.round((100 - width) / 2);
+    const y = Math.round((100 - height) / 2);
+    return {
+        unit: '%',
+        width,
+        height,
+        x,
+        y,
+    };
+};
+const ImageCropper = ({ imgSrc, disabled, onCropComplete, outputAspectRatio, cropperHeight, }) => {
+    const cropperWrapperRef = React.useRef(null);
+    const imageRef = React.useRef(null);
+    const [fullHeight, setFullHeight] = React.useState(false);
+    const [crop, setCrop] = React.useState(() => outputAspectRatio ? undefined : defaultCrop);
+    const handleSetCrop = React.useCallback((_, c) => {
+        setCrop(c);
+    }, []);
+    const handleCropComplete = React.useCallback((_, c) => {
+        onCropComplete(c);
+    }, [onCropComplete]);
+    const handleLoadImage = React.useCallback(({ currentTarget }) => {
+        if (!outputAspectRatio)
             return;
-        }
-        createImage(imgSrc)
-            .then(setImage)
-            .catch((error) => {
-            console.error('Error loading image to get aspect ratio for cropping', error);
-        });
-    }, [outputAspectRatio, imgSrc]);
-    const calculatedAspectRatio = useMemo(() => {
-        if (outputAspectRatio) {
-            return outputAspectRatio;
-        }
-        if (image) {
-            return getAspectRatio({
-                width: image.width,
-                height: image.height,
+        setCrop(getDefaultCropFromAspectRatio({
+            outputAspectRatio,
+            imageWidth: currentTarget.width,
+            imageHeight: currentTarget.height,
+        }));
+    }, [outputAspectRatio]);
+    // Resize magic to account for images that are larger than the dialog can hold
+    useEffect(() => {
+        if (imageRef.current && cropperWrapperRef.current) {
+            const resizeObserver = new ResizeObserver((entries) => {
+                for (const entry of entries) {
+                    if (!cropperWrapperRef.current)
+                        continue;
+                    const imageElHeight = entry.contentRect.height;
+                    const cropperWrapperHeight = cropperWrapperRef.current.clientHeight;
+                    if (imageElHeight < cropperWrapperHeight) {
+                        setFullHeight(false);
+                    }
+                    else {
+                        setFullHeight(true);
+                    }
+                }
             });
+            resizeObserver.observe(imageRef.current);
+            return () => {
+                resizeObserver.disconnect();
+            };
         }
-    }, [outputAspectRatio, image]);
+    }, [imageRef]);
     return (React.createElement("div", { className: "ob-cropper__container" },
-        React.createElement(CropContainer, { className: "ob-cropper__cropper-wrapper", height: cropperHeight },
-            React.createElement(Cropper, { image: imgSrc, crop: crop, zoom: zoom, aspect: calculatedAspectRatio, onCropChange: disabled ? emptyFn : setCrop, onCropComplete: (...args) => {
-                    if (disabled) {
-                        return;
-                    }
-                    onCropComplete(args[1]);
-                }, onZoomChange: setZoom, zoomSpeed: SLIDER_WHEEL_INTERVAL_VALUE, zoomWithScroll: zoomWithScroll, classes: {
-                    containerClassName: 'ob-border-radius',
-                }, style: cropperStyles })),
-        React.createElement("div", { className: "ob-cropper__zoom-slider-wrapper" },
-            React.createElement(ZoomSlider, { value: zoom, setValue: setZoom, disabled: disabled }))));
+        React.createElement(CropContainer, { className: "ob-cropper__cropper-wrapper", height: cropperHeight, ref: cropperWrapperRef },
+            React.createElement(ReactImageCrop, { crop: crop, aspect: outputAspectRatio, onChange: handleSetCrop, onComplete: handleCropComplete, disabled: disabled, className: clsx('ob-cropper__cropper', {
+                    'ob-cropper__cropper-full-height': fullHeight,
+                }), ruleOfThirds: true, keepSelection: true },
+                React.createElement("img", { src: imgSrc, className: "ob-cropper__image", onLoad: handleLoadImage, ref: imageRef })))));
 };
 export default memo(ImageCropper);
 export const getAspectRatio = ({ width, height, }) => width / height;
@@ -58,9 +105,9 @@ const createImage = (url) => {
         return image;
     });
 };
-export const generateCroppedImageBlob = async ({ croppedAreaPixels, imgSrc, size, fileType, }) => {
-    var _a, _b, _c, _d;
-    if (!croppedAreaPixels || !imgSrc) {
+export const generateCroppedImageBlob = async ({ croppedAreaPercent, imgSrc, size, fileType, }) => {
+    var _a, _b;
+    if (!croppedAreaPercent || !imgSrc) {
         return null;
     }
     // Source image/canvas
@@ -79,26 +126,30 @@ export const generateCroppedImageBlob = async ({ croppedAreaPixels, imgSrc, size
     if (!croppedCtx) {
         return null;
     }
-    croppedCanvas.width = (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : croppedAreaPixels.width;
-    croppedCanvas.height = (_b = size === null || size === void 0 ? void 0 : size.height) !== null && _b !== void 0 ? _b : croppedAreaPixels.height;
+    const widthPercentAsPixels = () => (image.width / 100) * croppedAreaPercent.width;
+    const heightPercentAsPixels = () => (image.height / 100) * croppedAreaPercent.height;
+    const sourceXPercentAsPixels = () => (image.width / 100) * croppedAreaPercent.x;
+    const sourceYPercentAsPixels = () => (image.height / 100) * croppedAreaPercent.y;
+    croppedCanvas.width = (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : widthPercentAsPixels();
+    croppedCanvas.height = (_b = size === null || size === void 0 ? void 0 : size.height) !== null && _b !== void 0 ? _b : heightPercentAsPixels();
     // Draw the cropped source image onto the destination canvas
     croppedCtx.drawImage(canvas, 
     // source x
-    croppedAreaPixels.x, 
+    sourceXPercentAsPixels(), 
     // source y
-    croppedAreaPixels.y, 
+    sourceYPercentAsPixels(), 
     // source width
-    croppedAreaPixels.width, 
+    widthPercentAsPixels(), 
     // source height
-    croppedAreaPixels.height, 
+    heightPercentAsPixels(), 
     // destination x
     0, 
     // destination y
     0, 
     // destination width
-    (_c = size === null || size === void 0 ? void 0 : size.width) !== null && _c !== void 0 ? _c : croppedAreaPixels.width, 
+    croppedCanvas.width, 
     // destination height
-    (_d = size === null || size === void 0 ? void 0 : size.height) !== null && _d !== void 0 ? _d : croppedAreaPixels.height);
+    croppedCanvas.height);
     return new Promise((resolve) => {
         croppedCanvas.toBlob((file) => {
             resolve(file);

package/dist/components/ImageCropper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ImageCropper/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { memo, useMemo } from 'react'\nimport Cropper, { Area, Point, CropperProps } from 'react-easy-crop'\nimport {\n  CropContainer,\n  ZoomSlider,\n  SLIDER_WHEEL_INTERVAL_VALUE,\n} from './resource-components'\n\nconst defaultZoom = 1\nconst defaultCrop = { x: 0, y: 0 }\n\nconst emptyFn = () => {}\n\nconst ImageCropper = ({\n  imgSrc,\n  disabled,\n  onCropComplete,\n  outputAspectRatio,\n  zoomWithScroll,\n  cropperStyles,\n  cropperHeight,\n}: {\n  imgSrc: string\n  disabled?: boolean\n  onCropComplete: (croppedAreaPixels: Area) => void\n  outputAspectRatio?: number\n  zoomWithScroll?: boolean\n  cropperStyles?: CropperProps['style']\n  cropperHeight?: number\n}) => {\n  const [crop, setCrop] = React.useState<Point>(defaultCrop)\n  const [zoom, setZoom] = React.useState(defaultZoom)\n  const [image, setImage] = React.useState<HTMLImageElement | null>(null)\n\n  React.useEffect(() => {\n    if (outputAspectRatio) {\n      // If we have a desired aspect ratio, we dont need to get it from the current image\n      return\n    }\n    createImage(imgSrc)\n      .then(setImage)\n      .catch((error) => {\n        console.error(\n          'Error loading image to get aspect ratio for cropping',\n          error,\n        )\n      })\n  }, [outputAspectRatio, imgSrc])\n\n  const calculatedAspectRatio = useMemo(() => {\n    if (outputAspectRatio) {\n      return outputAspectRatio\n    }\n    if (image) {\n      return getAspectRatio({\n        width: image.width,\n        height: image.height,\n      })\n    }\n  }, [outputAspectRatio, image])\n\n  return (\n    <div className=\"ob-cropper__container\">\n      <CropContainer\n        className=\"ob-cropper__cropper-wrapper\"\n        height={cropperHeight}\n      >\n        <Cropper\n          image={imgSrc}\n          crop={crop}\n          zoom={zoom}\n          aspect={calculatedAspectRatio}\n          onCropChange={disabled ? emptyFn : setCrop}\n          onCropComplete={(...args) => {\n            if (disabled) {\n              return\n            }\n            onCropComplete(args[1])\n          }}\n          onZoomChange={setZoom}\n          zoomSpeed={SLIDER_WHEEL_INTERVAL_VALUE}\n          zoomWithScroll={zoomWithScroll}\n          classes={{\n            containerClassName: 'ob-border-radius',\n          }}\n          style={cropperStyles}\n        />\n      </CropContainer>\n      <div className=\"ob-cropper__zoom-slider-wrapper\">\n        <ZoomSlider value={zoom} setValue={setZoom} disabled={disabled} />\n      </div>\n    </div>\n  )\n}\n\nexport default memo(ImageCropper)\n\nexport const getAspectRatio = ({\n  width,\n  height,\n}: {\n  width: number\n  height: number\n}) => width / height\n\nconst createImage = (url: string): Promise<HTMLImageElement> => {\n  return new Promise((resolve, reject) => {\n    const image = new Image()\n    image.onload = () => {\n      resolve(image)\n    }\n    image.onerror = (error) => {\n      reject(error)\n    }\n    image.src = url\n    return image\n  })\n}\n\nexport const generateCroppedImageBlob = async ({\n  croppedAreaPixels,\n  imgSrc,\n  size,\n  fileType,\n}: {\n  croppedAreaPixels: Area\n  imgSrc: string\n  /**\n   * If provided, the cropped image will be resized to the given size. If not\n   * provided, the cropped image will be the same size as the cropped portion of\n   * the source image.\n   */\n  size?: {\n    width: number\n    height: number\n  }\n  fileType?: string\n}): Promise<Blob | null> => {\n  if (!croppedAreaPixels || !imgSrc) {\n    return null\n  }\n  // Source image/canvas\n  const image = await createImage(imgSrc)\n  const canvas = document.createElement('canvas')\n  const ctx = canvas.getContext('2d')\n  if (!ctx) {\n    return null\n  }\n  canvas.width = image.width\n  canvas.height = image.height\n  ctx.drawImage(image, 0, 0)\n\n  // Destination image/canvas\n  const croppedCanvas = document.createElement('canvas')\n  const croppedCtx = croppedCanvas.getContext('2d')\n  if (!croppedCtx) {\n    return null\n  }\n  croppedCanvas.width = size?.width ?? croppedAreaPixels.width\n  croppedCanvas.height = size?.height ?? croppedAreaPixels.height\n\n  // Draw the cropped source image onto the destination canvas\n  croppedCtx.drawImage(\n    canvas,\n    // source x\n    croppedAreaPixels.x,\n    // source y\n    croppedAreaPixels.y,\n    // source width\n    croppedAreaPixels.width,\n    // source height\n    croppedAreaPixels.height,\n    // destination x\n    0,\n    // destination y\n    0,\n    // destination width\n    size?.width ?? croppedAreaPixels.width,\n    // destination height\n    size?.height ?? croppedAreaPixels.height,\n  )\n\n  return new Promise((resolve) => {\n    croppedCanvas.toBlob((file) => {\n      resolve(file)\n    }, fileType)\n  })\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ImageCropper/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { memo, useEffect } from 'react'\nimport ReactImageCrop, { Crop, PercentCrop } from 'react-image-crop'\nimport { CropContainer } from './resource-components'\nimport 'react-image-crop/src/ReactCrop.scss'\nimport clsx from 'clsx'\nexport { PercentCrop }\nconst defaultCrop: PercentCrop = {\n  unit: '%',\n  height: 100,\n  width: 100,\n  x: 0,\n  y: 0,\n}\n\nconst getDefaultCropFromAspectRatio = ({\n  outputAspectRatio,\n  imageWidth,\n  imageHeight,\n}: {\n  outputAspectRatio: number\n  imageWidth: number\n  imageHeight: number\n}): PercentCrop => {\n  const imageAspect = imageWidth / imageHeight\n\n  // Compute the largest rectangle that fits within the image and matches the aspect ratio\n  let width: number\n  let height: number\n  if (imageAspect >= outputAspectRatio) {\n    // Image is wider than desired aspect: constrain width by the height\n    height = 100\n    const widthInPixels = imageHeight * outputAspectRatio\n    // as percent\n    width = (widthInPixels / imageWidth) * 100\n  } else {\n    // Image is taller/narrower than desired aspect: constrain height by the width\n    width = 100\n    const heightInPixels = imageHeight * outputAspectRatio\n    // as percent\n    height = (heightInPixels / imageHeight) * 100\n  }\n\n  // Center the crop\n  const x = Math.round((100 - width) / 2)\n  const y = Math.round((100 - height) / 2)\n\n  return {\n    unit: '%',\n    width,\n    height,\n    x,\n    y,\n  }\n}\n\nconst ImageCropper = ({\n  imgSrc,\n  disabled,\n  onCropComplete,\n  outputAspectRatio,\n  cropperHeight,\n}: {\n  imgSrc: string\n  disabled?: boolean\n  onCropComplete: (croppedAreaPixels: PercentCrop) => void\n  outputAspectRatio?: number\n  cropperHeight?: number\n}) => {\n  const cropperWrapperRef = React.useRef<HTMLDivElement>(null)\n  const imageRef = React.useRef<HTMLImageElement>(null)\n\n  const [fullHeight, setFullHeight] = React.useState(false)\n\n  const [crop, setCrop] = React.useState<Crop | undefined>(() =>\n    outputAspectRatio ? undefined : defaultCrop,\n  )\n\n  const handleSetCrop = React.useCallback((_, c: PercentCrop) => {\n    setCrop(c)\n  }, [])\n\n  const handleCropComplete = React.useCallback(\n    (_, c: PercentCrop) => {\n      onCropComplete(c)\n    },\n    [onCropComplete],\n  )\n\n  const handleLoadImage = React.useCallback(\n    ({ currentTarget }: React.SyntheticEvent<HTMLImageElement, Event>) => {\n      if (!outputAspectRatio) return\n      setCrop(\n        getDefaultCropFromAspectRatio({\n          outputAspectRatio,\n          imageWidth: currentTarget.width,\n          imageHeight: currentTarget.height,\n        }),\n      )\n    },\n    [outputAspectRatio],\n  )\n\n  // Resize magic to account for images that are larger than the dialog can hold\n  useEffect(() => {\n    if (imageRef.current && cropperWrapperRef.current) {\n      const resizeObserver = new ResizeObserver((entries) => {\n        for (const entry of entries) {\n          if (!cropperWrapperRef.current) continue\n\n          const imageElHeight = entry.contentRect.height\n          const cropperWrapperHeight = cropperWrapperRef.current.clientHeight\n\n          if (imageElHeight < cropperWrapperHeight) {\n            setFullHeight(false)\n          } else {\n            setFullHeight(true)\n          }\n        }\n      })\n      resizeObserver.observe(imageRef.current)\n\n      return () => {\n        resizeObserver.disconnect()\n      }\n    }\n  }, [imageRef])\n\n  return (\n    <div className=\"ob-cropper__container\">\n      <CropContainer\n        className=\"ob-cropper__cropper-wrapper\"\n        height={cropperHeight}\n        ref={cropperWrapperRef}\n      >\n        <ReactImageCrop\n          crop={crop}\n          aspect={outputAspectRatio}\n          onChange={handleSetCrop}\n          onComplete={handleCropComplete}\n          disabled={disabled}\n          className={clsx('ob-cropper__cropper', {\n            'ob-cropper__cropper-full-height': fullHeight,\n          })}\n          ruleOfThirds\n          keepSelection\n        >\n          <img\n            src={imgSrc}\n            className=\"ob-cropper__image\"\n            onLoad={handleLoadImage}\n            ref={imageRef}\n          />\n        </ReactImageCrop>\n      </CropContainer>\n    </div>\n  )\n}\n\nexport default memo(ImageCropper)\n\nexport const getAspectRatio = ({\n  width,\n  height,\n}: {\n  width: number\n  height: number\n}) => width / height\n\nconst createImage = (url: string): Promise<HTMLImageElement> => {\n  return new Promise((resolve, reject) => {\n    const image = new Image()\n    image.onload = () => {\n      resolve(image)\n    }\n    image.onerror = (error) => {\n      reject(error)\n    }\n    image.src = url\n    return image\n  })\n}\n\nexport const generateCroppedImageBlob = async ({\n  croppedAreaPercent,\n  imgSrc,\n  size,\n  fileType,\n}: {\n  croppedAreaPercent: PercentCrop\n  imgSrc: string\n  /**\n   * If provided, the cropped image will be resized to the given size. If not\n   * provided, the cropped image will be the same size as the cropped portion of\n   * the source image.\n   */\n  size?: {\n    width: number\n    height: number\n  }\n  fileType?: string\n}): Promise<Blob | null> => {\n  if (!croppedAreaPercent || !imgSrc) {\n    return null\n  }\n  // Source image/canvas\n  const image = await createImage(imgSrc)\n  const canvas = document.createElement('canvas')\n  const ctx = canvas.getContext('2d')\n  if (!ctx) {\n    return null\n  }\n  canvas.width = image.width\n  canvas.height = image.height\n  ctx.drawImage(image, 0, 0)\n\n  // Destination image/canvas\n  const croppedCanvas = document.createElement('canvas')\n  const croppedCtx = croppedCanvas.getContext('2d')\n  if (!croppedCtx) {\n    return null\n  }\n\n  const widthPercentAsPixels = () =>\n    (image.width / 100) * croppedAreaPercent.width\n  const heightPercentAsPixels = () =>\n    (image.height / 100) * croppedAreaPercent.height\n\n  const sourceXPercentAsPixels = () =>\n    (image.width / 100) * croppedAreaPercent.x\n  const sourceYPercentAsPixels = () =>\n    (image.height / 100) * croppedAreaPercent.y\n\n  croppedCanvas.width = size?.width ?? widthPercentAsPixels()\n  croppedCanvas.height = size?.height ?? heightPercentAsPixels()\n\n  // Draw the cropped source image onto the destination canvas\n  croppedCtx.drawImage(\n    canvas,\n    // source x\n    sourceXPercentAsPixels(),\n    // source y\n    sourceYPercentAsPixels(),\n    // source width\n    widthPercentAsPixels(),\n    // source height\n    heightPercentAsPixels(),\n    // destination x\n    0,\n    // destination y\n    0,\n    // destination width\n    croppedCanvas.width,\n    // destination height\n    croppedCanvas.height,\n  )\n\n  return new Promise((resolve) => {\n    croppedCanvas.toBlob((file) => {\n      resolve(file)\n    }, fileType)\n  })\n}\n"]}

package/dist/components/ImageCropper/resource-components.d.ts

@@ -1,19 +1,3 @@
-import * as React from 'react';
 export declare const CropContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     height?: number;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SLIDER_WHEEL_INTERVAL_VALUE: number;
-export declare const ZoomSlider: ({ value, disabled, setValue, }: {
-    value: number;
-    disabled?: boolean;
-    setValue: (value: number) => void;
-}) => React.JSX.Element;
-export interface AspectRatio {
-    width: number;
-    height: number;
-}
-export declare const availableAspectRatios: AspectRatio[];
-export declare const AspectRatioButton: ({ selectedAspectRatio, onSelectAspectRatio, }: {
-    selectedAspectRatio: AspectRatio;
-    onSelectAspectRatio: (aspectRatio: AspectRatio) => void;
-}) => React.JSX.Element;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/ImageCropper/resource-components.js

@@ -1,124 +1,15 @@
-import { styled, Stack, IconButton, Slider, Box, Menu, MenuItem, Typography, } from '@mui/material';
-import MaterialIcon from '../MaterialIcon';
-import * as React from 'react';
+import { styled } from '@mui/material';
 export const CropContainer = styled('div', {
     shouldForwardProp: (prop) => prop !== 'height',
-})(({ height }) => ({
+})(({ height, theme }) => ({
     position: 'relative',
     width: '100%',
+    display: 'flex',
+    backdropFilter: 'brightness(0.5)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: theme.shape.borderRadius,
+    maxHeight: '100%',
     ...(height ? { height } : { flex: 1 }),
 }));
-const SLIDER_STEP_INTERVAL_VALUE = 0.025;
-const SLIDER_MIN_VALUE = 1;
-const SLIDER_MAX_VALUE = 3;
-const SLIDER_BUTTON_INTERVAL_VALUE = SLIDER_STEP_INTERVAL_VALUE * 10;
-export const SLIDER_WHEEL_INTERVAL_VALUE = SLIDER_STEP_INTERVAL_VALUE * 6;
-export const ZoomSlider = ({ value, disabled = false, setValue, }) => {
-    return (React.createElement(Stack, { spacing: 2, direction: "row", alignItems: "center", justifyContent: "center", pt: 3 },
-        React.createElement(IconButton, { disabled: value === SLIDER_MIN_VALUE || disabled, onClick: () => {
-                const newValue = parseFloat((value - SLIDER_BUTTON_INTERVAL_VALUE).toFixed(3));
-                setValue(newValue < SLIDER_MIN_VALUE ? SLIDER_MIN_VALUE : newValue);
-            }, className: "ob-cropper__zoom-slider-minus-button" },
-            React.createElement(MaterialIcon, null, "remove")),
-        React.createElement(Slider, { "aria-label": "Image Zoom", value: value, min: SLIDER_MIN_VALUE, max: SLIDER_MAX_VALUE, step: SLIDER_STEP_INTERVAL_VALUE, onChange: (e, value) => typeof value === 'number' && setValue(value), disabled: disabled, className: "ob-cropper__zoom-slider" }),
-        React.createElement(IconButton, { disabled: value === SLIDER_MAX_VALUE || disabled, onClick: () => {
-                const newValue = parseFloat((value + SLIDER_BUTTON_INTERVAL_VALUE).toFixed(3));
-                setValue(newValue > SLIDER_MAX_VALUE ? SLIDER_MAX_VALUE : newValue);
-            }, className: "ob-cropper__zoom-slider-plus-button" },
-            React.createElement(MaterialIcon, null, "add"))));
-};
-export const availableAspectRatios = [
-    {
-        width: 21,
-        height: 9,
-    },
-    {
-        width: 16,
-        height: 9,
-    },
-    {
-        width: 16,
-        height: 10,
-    },
-    {
-        width: 3,
-        height: 2,
-    },
-    {
-        width: 4,
-        height: 3,
-    },
-    {
-        width: 5,
-        height: 4,
-    },
-    {
-        width: 1,
-        height: 1,
-    },
-    {
-        width: 4,
-        height: 5,
-    },
-    {
-        width: 9,
-        height: 16,
-    },
-];
-export const AspectRatioButton = ({ selectedAspectRatio, onSelectAspectRatio, }) => {
-    const [anchorEl, setAnchorEl] = React.useState(null);
-    // TODO: Don't just use MUI for everything here if Blake gives the ok for this implementation
-    // TODO: Put styling in css files if Blake gives the ok for this implementation
-    return (React.createElement(Box, { display: "flex", alignItems: "center", gap: 1 },
-        React.createElement(Typography, { variant: "body1" }, "Aspect Ratio"),
-        React.createElement("button", { type: "button", className: "button ob-button is-outlined", onClick: (e) => setAnchorEl(e.currentTarget) },
-            React.createElement("span", { style: {
-                    marginRight: 8,
-                } },
-                selectedAspectRatio.width,
-                ":",
-                selectedAspectRatio.height),
-            React.createElement(DrawAspectRatio, { ...selectedAspectRatio })),
-        React.createElement(Menu, { open: !!anchorEl, anchorEl: anchorEl, onClose: () => {
-                setAnchorEl(null);
-            } }, availableAspectRatios.map((aspectRatio) => (React.createElement(MenuItem, { key: `${aspectRatio.width}:${aspectRatio.height}`, onClick: () => {
-                onSelectAspectRatio(aspectRatio);
-                setAnchorEl(null);
-            } },
-            aspectRatio.width,
-            ":",
-            aspectRatio.height))))));
-};
-const DrawAspectRatio = ({ height, width }) => {
-    const { displayWidth, displayHeight, iconSize } = React.useMemo(() => {
-        const coefficient = 30 / height;
-        const iconSize = () => {
-            if (width === height) {
-                return 18;
-            }
-            if (width === 9 && height === 16) {
-                return 16;
-            }
-            if (width < height) {
-                return 16;
-            }
-        };
-        return {
-            displayWidth: width * coefficient,
-            displayHeight: 30,
-            iconSize: iconSize(),
-        };
-    }, [height, width]);
-    return (React.createElement(Box, { sx: (theme) => ({
-            transition: 'width 0.3s ease-in-out',
-            width: displayWidth,
-            height: displayHeight,
-            backgroundColor: theme.palette.grey[300],
-            borderRadius: 1,
-        }), display: "flex", alignItems: "center", justifyContent: "center" },
-        React.createElement(MaterialIcon, { sx: {
-                fontSize: iconSize,
-                rotate: width === 9 && height === 16 ? '90deg' : undefined,
-            } }, "aspect_ratio")));
-};
 //# sourceMappingURL=resource-components.js.map

package/dist/components/ImageCropper/resource-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"resource-components.js","sourceRoot":"","sources":["../../../src/components/ImageCropper/resource-components.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,KAAK,EACL,UAAU,EACV,MAAM,EACN,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,UAAU,GACX,MAAM,eAAe,CAAA;AACtB,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAC1C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,EAAE;IACzC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,QAAQ;CAC/C,CAAC,CAAsB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACvC,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IACb,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;CACvC,CAAC,CAAC,CAAA;AAEH,MAAM,0BAA0B,GAAG,KAAK,CAAA;AACxC,MAAM,gBAAgB,GAAG,CAAC,CAAA;AAC1B,MAAM,gBAAgB,GAAG,CAAC,CAAA;AAC1B,MAAM,4BAA4B,GAAG,0BAA0B,GAAG,EAAE,CAAA;AACpE,MAAM,CAAC,MAAM,2BAA2B,GAAG,0BAA0B,GAAG,CAAC,CAAA;AAEzE,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAKT,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,KAAK,IACJ,OAAO,EAAE,CAAC,EACV,SAAS,EAAC,KAAK,EACf,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EACvB,EAAE,EAAE,CAAC;QAEL,oBAAC,UAAU,IACT,QAAQ,EAAE,KAAK,KAAK,gBAAgB,IAAI,QAAQ,EAChD,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,QAAQ,GAAG,UAAU,CACzB,CAAC,KAAK,GAAG,4BAA4B,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAClD,CAAA;gBACD,QAAQ,CAAC,QAAQ,GAAG,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;YACrE,CAAC,EACD,SAAS,EAAC,sCAAsC;YAEhD,oBAAC,YAAY,iBAAsB,CACxB;QACb,oBAAC,MAAM,kBACM,YAAY,EACvB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,gBAAgB,EACrB,GAAG,EAAE,gBAAgB,EACrB,IAAI,EAAE,0BAA0B,EAChC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,OAAO,KAAK,KAAK,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAC,EACpE,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAC,yBAAyB,GACnC;QACF,oBAAC,UAAU,IACT,QAAQ,EAAE,KAAK,KAAK,gBAAgB,IAAI,QAAQ,EAChD,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,QAAQ,GAAG,UAAU,CACzB,CAAC,KAAK,GAAG,4BAA4B,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAClD,CAAA;gBACD,QAAQ,CAAC,QAAQ,GAAG,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;YACrE,CAAC,EACD,SAAS,EAAC,qCAAqC;YAE/C,oBAAC,YAAY,cAAmB,CACrB,CACP,CACT,CAAA;AACH,CAAC,CAAA;AAMD,MAAM,CAAC,MAAM,qBAAqB,GAAkB;IAClD;QACE,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,CAAC;KACV;IACD;QACE,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,CAAC;KACV;IACD;QACE,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;KACX;IACD;QACE,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;KACV;IACD;QACE,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;KACV;IACD;QACE,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;KACV;IACD;QACE,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;KACV;IACD;QACE,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;KACV;IACD;QACE,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,EAAE;KACX;CACF,CAAA;AACD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,mBAAmB,EACnB,mBAAmB,GAIpB,EAAE,EAAE;IACH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAqB,IAAI,CAAC,CAAA;IAExE,6FAA6F;IAC7F,+EAA+E;IAC/E,OAAO,CACL,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC;QAC5C,oBAAC,UAAU,IAAC,OAAO,EAAC,OAAO,mBAA0B;QACrD,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,8BAA8B,EACxC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC;YAE5C,8BACE,KAAK,EAAE;oBACL,WAAW,EAAE,CAAC;iBACf;gBAEA,mBAAmB,CAAC,KAAK;;gBAAG,mBAAmB,CAAC,MAAM,CAClD;YACP,oBAAC,eAAe,OAAK,mBAAmB,GAAI,CACrC;QACT,oBAAC,IAAI,IACH,IAAI,EAAE,CAAC,CAAC,QAAQ,EAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE;gBACZ,WAAW,CAAC,IAAI,CAAC,CAAA;YACnB,CAAC,IAEA,qBAAqB,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAC1C,oBAAC,QAAQ,IACP,GAAG,EAAE,GAAG,WAAW,CAAC,KAAK,IAAI,WAAW,CAAC,MAAM,EAAE,EACjD,OAAO,EAAE,GAAG,EAAE;gBACZ,mBAAmB,CAAC,WAAW,CAAC,CAAA;gBAChC,WAAW,CAAC,IAAI,CAAC,CAAA;YACnB,CAAC;YAEA,WAAW,CAAC,KAAK;;YAAG,WAAW,CAAC,MAAM,CAC9B,CACZ,CAAC,CACG,CACH,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,EAAE,MAAM,EAAE,KAAK,EAAe,EAAE,EAAE;IACzD,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACnE,MAAM,WAAW,GAAG,EAAE,GAAG,MAAM,CAAA;QAE/B,MAAM,QAAQ,GAAG,GAAG,EAAE;YACpB,IAAI,KAAK,KAAK,MAAM,EAAE,CAAC;gBACrB,OAAO,EAAE,CAAA;YACX,CAAC;YACD,IAAI,KAAK,KAAK,CAAC,IAAI,MAAM,KAAK,EAAE,EAAE,CAAC;gBACjC,OAAO,EAAE,CAAA;YACX,CAAC;YACD,IAAI,KAAK,GAAG,MAAM,EAAE,CAAC;gBACnB,OAAO,EAAE,CAAA;YACX,CAAC;QACH,CAAC,CAAA;QAED,OAAO;YACL,YAAY,EAAE,KAAK,GAAG,WAAW;YACjC,aAAa,EAAE,EAAE;YACjB,QAAQ,EAAE,QAAQ,EAAE;SACrB,CAAA;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAA;IAEnB,OAAO,CACL,oBAAC,GAAG,IACF,EAAE,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YACd,UAAU,EAAE,wBAAwB;YACpC,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,aAAa;YACrB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;YACxC,YAAY,EAAE,CAAC;SAChB,CAAC,EACF,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ;QAEvB,oBAAC,YAAY,IACX,EAAE,EAAE;gBACF,QAAQ,EAAE,QAAQ;gBAClB,MAAM,EAAE,KAAK,KAAK,CAAC,IAAI,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;aAC3D,mBAGY,CACX,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["import {\n  styled,\n  Stack,\n  IconButton,\n  Slider,\n  Box,\n  Menu,\n  MenuItem,\n  Typography,\n} from '@mui/material'\nimport MaterialIcon from '../MaterialIcon'\nimport * as React from 'react'\n\nexport const CropContainer = styled('div', {\n  shouldForwardProp: (prop) => prop !== 'height',\n})<{ height?: number }>(({ height }) => ({\n  position: 'relative',\n  width: '100%',\n  ...(height ? { height } : { flex: 1 }),\n}))\n\nconst SLIDER_STEP_INTERVAL_VALUE = 0.025\nconst SLIDER_MIN_VALUE = 1\nconst SLIDER_MAX_VALUE = 3\nconst SLIDER_BUTTON_INTERVAL_VALUE = SLIDER_STEP_INTERVAL_VALUE * 10\nexport const SLIDER_WHEEL_INTERVAL_VALUE = SLIDER_STEP_INTERVAL_VALUE * 6\n\nexport const ZoomSlider = ({\n  value,\n  disabled = false,\n  setValue,\n}: {\n  value: number\n  disabled?: boolean\n  setValue: (value: number) => void\n}) => {\n  return (\n    <Stack\n      spacing={2}\n      direction=\"row\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      pt={3}\n    >\n      <IconButton\n        disabled={value === SLIDER_MIN_VALUE || disabled}\n        onClick={() => {\n          const newValue = parseFloat(\n            (value - SLIDER_BUTTON_INTERVAL_VALUE).toFixed(3),\n          )\n          setValue(newValue < SLIDER_MIN_VALUE ? SLIDER_MIN_VALUE : newValue)\n        }}\n        className=\"ob-cropper__zoom-slider-minus-button\"\n      >\n        <MaterialIcon>remove</MaterialIcon>\n      </IconButton>\n      <Slider\n        aria-label=\"Image Zoom\"\n        value={value}\n        min={SLIDER_MIN_VALUE}\n        max={SLIDER_MAX_VALUE}\n        step={SLIDER_STEP_INTERVAL_VALUE}\n        onChange={(e, value) => typeof value === 'number' && setValue(value)}\n        disabled={disabled}\n        className=\"ob-cropper__zoom-slider\"\n      />\n      <IconButton\n        disabled={value === SLIDER_MAX_VALUE || disabled}\n        onClick={() => {\n          const newValue = parseFloat(\n            (value + SLIDER_BUTTON_INTERVAL_VALUE).toFixed(3),\n          )\n          setValue(newValue > SLIDER_MAX_VALUE ? SLIDER_MAX_VALUE : newValue)\n        }}\n        className=\"ob-cropper__zoom-slider-plus-button\"\n      >\n        <MaterialIcon>add</MaterialIcon>\n      </IconButton>\n    </Stack>\n  )\n}\n\nexport interface AspectRatio {\n  width: number\n  height: number\n}\nexport const availableAspectRatios: AspectRatio[] = [\n  {\n    width: 21,\n    height: 9,\n  },\n  {\n    width: 16,\n    height: 9,\n  },\n  {\n    width: 16,\n    height: 10,\n  },\n  {\n    width: 3,\n    height: 2,\n  },\n  {\n    width: 4,\n    height: 3,\n  },\n  {\n    width: 5,\n    height: 4,\n  },\n  {\n    width: 1,\n    height: 1,\n  },\n  {\n    width: 4,\n    height: 5,\n  },\n  {\n    width: 9,\n    height: 16,\n  },\n]\nexport const AspectRatioButton = ({\n  selectedAspectRatio,\n  onSelectAspectRatio,\n}: {\n  selectedAspectRatio: AspectRatio\n  onSelectAspectRatio: (aspectRatio: AspectRatio) => void\n}) => {\n  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)\n\n  // TODO: Don't just use MUI for everything here if Blake gives the ok for this implementation\n  // TODO: Put styling in css files if Blake gives the ok for this implementation\n  return (\n    <Box display=\"flex\" alignItems=\"center\" gap={1}>\n      <Typography variant=\"body1\">Aspect Ratio</Typography>\n      <button\n        type=\"button\"\n        className=\"button ob-button is-outlined\"\n        onClick={(e) => setAnchorEl(e.currentTarget)}\n      >\n        <span\n          style={{\n            marginRight: 8,\n          }}\n        >\n          {selectedAspectRatio.width}:{selectedAspectRatio.height}\n        </span>\n        <DrawAspectRatio {...selectedAspectRatio} />\n      </button>\n      <Menu\n        open={!!anchorEl}\n        anchorEl={anchorEl}\n        onClose={() => {\n          setAnchorEl(null)\n        }}\n      >\n        {availableAspectRatios.map((aspectRatio) => (\n          <MenuItem\n            key={`${aspectRatio.width}:${aspectRatio.height}`}\n            onClick={() => {\n              onSelectAspectRatio(aspectRatio)\n              setAnchorEl(null)\n            }}\n          >\n            {aspectRatio.width}:{aspectRatio.height}\n          </MenuItem>\n        ))}\n      </Menu>\n    </Box>\n  )\n}\n\nconst DrawAspectRatio = ({ height, width }: AspectRatio) => {\n  const { displayWidth, displayHeight, iconSize } = React.useMemo(() => {\n    const coefficient = 30 / height\n\n    const iconSize = () => {\n      if (width === height) {\n        return 18\n      }\n      if (width === 9 && height === 16) {\n        return 16\n      }\n      if (width < height) {\n        return 16\n      }\n    }\n\n    return {\n      displayWidth: width * coefficient,\n      displayHeight: 30,\n      iconSize: iconSize(),\n    }\n  }, [height, width])\n\n  return (\n    <Box\n      sx={(theme) => ({\n        transition: 'width 0.3s ease-in-out',\n        width: displayWidth,\n        height: displayHeight,\n        backgroundColor: theme.palette.grey[300],\n        borderRadius: 1,\n      })}\n      display=\"flex\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n    >\n      <MaterialIcon\n        sx={{\n          fontSize: iconSize,\n          rotate: width === 9 && height === 16 ? '90deg' : undefined,\n        }}\n      >\n        aspect_ratio\n      </MaterialIcon>\n    </Box>\n  )\n}\n"]}
+{"version":3,"file":"resource-components.js","sourceRoot":"","sources":["../../../src/components/ImageCropper/resource-components.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAEtC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,EAAE;IACzC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,QAAQ;CAC/C,CAAC,CAAsB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC9C,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IACb,OAAO,EAAE,MAAM;IACf,cAAc,EAAE,iBAAiB;IACjC,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,YAAY;IACtC,SAAS,EAAE,MAAM;IACjB,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;CACvC,CAAC,CAAC,CAAA","sourcesContent":["import { styled } from '@mui/material'\n\nexport const CropContainer = styled('div', {\n  shouldForwardProp: (prop) => prop !== 'height',\n})<{ height?: number }>(({ height, theme }) => ({\n  position: 'relative',\n  width: '100%',\n  display: 'flex',\n  backdropFilter: 'brightness(0.5)',\n  alignItems: 'center',\n  justifyContent: 'center',\n  borderRadius: theme.shape.borderRadius,\n  maxHeight: '100%',\n  ...(height ? { height } : { flex: 1 }),\n}))\n"]}

package/dist/form-elements/FormElementCamera.js

@@ -181,7 +181,7 @@ function FormElementCamera({ id, element, value, onChange, validationMessage, di
             });
         }
     }, [attachmentUrl, clearIsAnnotating, element, onChange]);
-    const handleSaveCrop = React.useCallback(async (croppedAreaPixels) => {
+    const handleSaveCrop = React.useCallback(async (croppedAreaPercent) => {
         clearIsCropping();
         if (!attachmentUrl)
             return;
@@ -190,7 +190,7 @@ function FormElementCamera({ id, element, value, onChange, validationMessage, di
         });
         try {
             const croppedImage = await generateCroppedImageBlob({
-                croppedAreaPixels,
+                croppedAreaPercent,
                 imgSrc: attachmentUrl,
                 fileType: contentType,
             });

package/dist/form-elements/FormElementCamera.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementCamera.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCamera.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,eAAe,MAAM,0BAA0B,CAAA;AACtD,OAAO,kBAAkB,EAAE,EACzB,kBAAkB,GACnB,MAAM,2BAA2B,CAAA;AAClC,OAAO,SAAS,MAAM,kCAAkC,CAAA;AAExD,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AACxF,OAAO,qBAAqB,MAAM,mCAAmC,CAAA;AAErE,OAAO,aAAa,MAAM,oCAAoC,CAAA;AAC9D,OAAO,eAAe,EAAE,EACtB,4BAA4B,GAC7B,MAAM,wCAAwC,CAAA;AAC/C,OAAO,KAAK,MAAM,8BAA8B,CAAA;AAChD,OAAO,EACL,yBAAyB,EACzB,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,yBAAyB,CAAA;AAChC,OAAO,gBAAgB,MAAM,qDAAqD,CAAA;AAClF,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACrE,OAAO,uBAAuB,MAAM,4DAA4D,CAAA;AAEhG,OAAO,WAAW,MAAM,gDAAgD,CAAA;AACxE,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAC1E,OAAO,YAAY,MAAM,4BAA4B,CAAA;AACrD,OAAO,4BAA4B,MAAM,qDAAqD,CAAA;AAC9F,OAAO,SAAS,MAAM,sCAAsC,CAAA;AAE5D,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAA;AAWrE,SAAS,iBAAiB,CAAC,EACzB,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,GACJ;IACN,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAC9D,MAAM,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAG1D;QACD,SAAS,EAAE,KAAK;KACjB,CAAC,CAAA;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,EAAE,iBAAiB,CAAC,GACtD,eAAe,CAAC,KAAK,CAAC,CAAA;IACxB,MAAM,CAAC,UAAU,EAAE,aAAa,EAAE,eAAe,CAAC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IAE3E,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAA;IAEzD,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,QAAQ,CAAC,OAAO,EAAE;YAChB,KAAK,EAAE,SAAS;SACjB,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEvB,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAClC,KAAK,EAAE,WAAgD,EAAE,EAAE;QACzD,IAAI,CAAC,WAAW,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;YACrD,OAAM;QACR,CAAC;QAED,MAAM,IAAI,GAAG,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;QACxC,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAM;QACR,CAAC;QAED,QAAQ,CAAC;YACP,SAAS,EAAE,IAAI;SAChB,CAAC,CAAA;QAEF,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,IAAI,CAAC,CAAA;QACxC,IAAI,CAAC;YACH,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;gBACf,MAAM,IAAI,KAAK,CAAC,kCAAkC,CAAC,CAAA;YACrD,CAAC;YAED,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC1C,MAAM,IAAI,KAAK,CACb,sBAAsB,IAAI,CAAC,IAAI,4BAA4B,CAC5D,CAAA;YACH,CAAC;YACD,MAAM,MAAM,GAAG,MAAM,sBAAsB,CACzC,IAAI,EACJ,OAAO,CAAC,yBAAyB,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CACtE,CAAA;YAED,IAAI,MAAM,YAAY,IAAI,EAAE,CAAC;gBAC3B,QAAQ,CAAC,OAAO,EAAE;oBAChB,KAAK,EAAE,oBAAoB,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC;iBACxD,CAAC,CAAA;YACJ,CAAC;iBAAM,CAAC;gBACN,MAAM,IAAI,GAAG,MAAM,YAAY,CAAC,MAAM,CAAC,CAAA;gBACvC,QAAQ,CAAC,OAAO,EAAE;oBAChB,KAAK,EAAE,oBAAoB,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC;iBACtD,CAAC,CAAA;YACJ,CAAC;YAED,UAAU,EAAE,CAAA;YACZ,QAAQ,CAAC;gBACP,SAAS,EAAE,KAAK;aACjB,CAAC,CAAA;QACJ,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,QAAQ,CAAC;gBACP,SAAS,EAAE,KAAK;gBAChB,WAAW,EAAE,KAAc;aAC5B,CAAC,CAAA;QACJ,CAAC;IACH,CAAC,EACD,CAAC,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC,CAChC,CAAA;IACD,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,IAAI,MAAM,CAAC,OAAO,IAAI,SAAS,CAAC,MAAM,IAAI,SAAS,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC;YACtE,QAAQ,CAAC;gBACP,SAAS,EAAE,IAAI;aAChB,CAAC,CAAA;YACF,SAAS,CAAC,MAAM,CAAC,UAAU,CACzB,CAAC,UAAkB,EAAE,EAAE;gBACrB,cAAc,CAAC,0BAA0B,UAAU,EAAE,CAAC;qBACnD,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;oBACb,QAAQ,CAAC,OAAO,EAAE;wBAChB,KAAK,EAAE,oBAAoB,CAAC,IAAI,EAAE,YAAY,EAAE,OAAO,CAAC;qBACzD,CAAC,CAAA;oBACF,QAAQ,CAAC;wBACP,SAAS,EAAE,KAAK;qBACjB,CAAC,CAAA;gBACJ,CAAC,CAAC;qBACD,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;oBACf,QAAQ,CAAC;wBACP,WAAW,EAAE,KAAK;wBAClB,SAAS,EAAE,KAAK;qBACjB,CAAC,CAAA;gBACJ,CAAC,CAAC,CAAA;YACN,CAAC,EACD,CAAC,KAAY,EAAE,EAAE;gBACf,OAAO,CAAC,IAAI,CACV,oDAAoD,EACpD,KAAK,CACN,CAAA;gBACD,QAAQ,CAAC;oBACP,SAAS,EAAE,KAAK;oBAChB,WAAW,EAAE,KAAK;iBACnB,CAAC,CAAA;YACJ,CAAC,EACD;gBACE,OAAO,EAAE,GAAG;gBACZ,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,QAAQ;gBACvD,UAAU,EAAE,MAAM,CAAC,MAAM,CAAC,iBAAiB,CAAC,MAAM;gBAClD,SAAS,EAAE,KAAK;gBAChB,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI;gBAC7C,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO;gBAC1C,kBAAkB,EAAE,IAAI;gBACxB,gBAAgB,EAAE,KAAK;gBACvB,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI;aAC9C,CACF,CAAA;QACH,CAAC;aAAM,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YAChC,mFAAmF;YACnF,YAAY,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAA;YAC/B,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;QAC9B,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,KAAK,CACX,6DAA6D,CAC9D,CAAA;QACH,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEvB,MAAM,EACJ,WAAW,EACX,kBAAkB,EAClB,sBAAsB,EACtB,aAAa,EACb,sBAAsB,EACtB,WAAW,EACX,QAAQ,EACR,WAAW,GACZ,GAAG,aAAa,CACf,KAAK,EACL,OAAO,EACP,KAAK,CAAC,WAAW,CACf,CAAC,EAAE,EAAE,UAAU,EAAE,EAAE;QACjB,QAAQ,CAAC,OAAO,EAAE;YAChB,KAAK,EAAE,UAAU;SAClB,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,OAAO,EAAE,QAAQ,CAAC,CACpB,CACF,CAAA;IAED,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACrC,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ;YAAE,OAAM;QAE/C,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;YACzC,OAAO,GAAG,EAAE;gBACV,QAAQ,CAAC,OAAO,EAAE;oBAChB,KAAK,EAAE;wBACL,IAAI,EAAE,KAAK;wBACX,GAAG,EAAE,KAAK,CAAC,GAAG;wBACd,IAAI,EAAE,KAAK,CAAC,IAAI;wBAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ;wBACxB,SAAS,EAAE,KAAK,CAAC,SAAS;qBAC3B;iBACF,CAAC,CAAA;YACJ,CAAC,CAAA;QACH,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;IAE9B,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QAClD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,MAAM,kBAAkB,CAAC,KAAK,EAAE,EAAE,CAAC,CAAA;QACrC,CAAC;aAAM,IAAI,KAAK,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YAC3C,MAAM,kBAAkB,CAAC,KAAK,CAAC,CAAA;QACjC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAA;IAEf,MAAM,oBAAoB,GAAG,KAAK,CAAC,WAAW,CAC5C,KAAK,EAAE,iBAAyB,EAAE,EAAE;QAClC,iBAAiB,EAAE,CAAA;QAEnB,IAAI,OAAO,aAAa,KAAK,QAAQ,EAAE,CAAC;YACtC,OAAM;QACR,CAAC;QAED,QAAQ,CAAC;YACP,SAAS,EAAE,IAAI;SAChB,CAAC,CAAA;QACF,IAAI,CAAC;YACH,MAAM,IAAI,GAAG,MAAM,4BAA4B,CAAC;gBAC9C,iBAAiB;gBACjB,aAAa;aACd,CAAC,CAAA;YACF,QAAQ,CAAC;gBACP,SAAS,EAAE,KAAK;aACjB,CAAC,CAAA;YACF,IAAI,IAAI,EAAE,CAAC;gBACT,MAAM,UAAU,GAAG,oBAAoB,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,CAAC,CAAA;gBACnE,QAAQ,CAAC,OAAO,EAAE;oBAChB,KAAK,EAAE,UAAU;iBAClB,CAAC,CAAA;YACJ,CAAC;QACH,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,QAAQ,CAAC;gBACP,WAAW,EAAE,GAAY;gBACzB,SAAS,EAAE,KAAK;aACjB,CAAC,CAAA;QACJ,CAAC;IACH,CAAC,EACD,CAAC,aAAa,EAAE,iBAAiB,EAAE,OAAO,EAAE,QAAQ,CAAC,CACtD,CAAA;IAED,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,KAAK,EAAE,iBAAuB,EAAE,EAAE;QAChC,eAAe,EAAE,CAAA;QACjB,IAAI,CAAC,aAAa;YAAE,OAAM;QAE1B,QAAQ,CAAC;YACP,SAAS,EAAE,IAAI;SAChB,CAAC,CAAA;QAEF,IAAI,CAAC;YACH,MAAM,YAAY,GAAG,MAAM,wBAAwB,CAAC;gBAClD,iBAAiB;gBACjB,MAAM,EAAE,aAAa;gBACrB,QAAQ,EAAE,WAAW;aACtB,CAAC,CAAA;YAEF,IAAI,CAAC,YAAY;gBAAE,MAAM,IAAI,KAAK,CAAC,uBAAuB,CAAC,CAAA;YAC3D,MAAM,UAAU,GAAG,oBAAoB,CACrC,YAAY,EACZ,WAAW,EACX,OAAO,CACR,CAAA;YACD,QAAQ,CAAC,OAAO,EAAE;gBAChB,KAAK,EAAE,UAAU;aAClB,CAAC,CAAA;YACF,QAAQ,CAAC;gBACP,SAAS,EAAE,KAAK;aACjB,CAAC,CAAA;QACJ,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,QAAQ,CAAC;gBACP,WAAW,EAAE,KAAc;gBAC3B,SAAS,EAAE,KAAK;aACjB,CAAC,CAAA;QACJ,CAAC;IACH,CAAC,EACD,CAAC,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,CAAC,CACjE,CAAA;IAED,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC7D,OAAO,CACL;QACE,oBAAC,yBAAyB,IACxB,SAAS,EAAC,WAAW,EACrB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAE1B,6BAAK,SAAS,EAAC,SAAS;gBACrB,CAAC,KAAK,IAAI,SAAS,CAAC,IAAI,CACvB;oBACE,gCAAQ,SAAS,EAAC,WAAW,EAAC,GAAG,EAAE,kBAAkB;wBACnD,oBAAC,YAAY,IACX,WAAW,EAAE,WAAW,EACxB,kBAAkB,EAAE,kBAAkB,EACtC,sBAAsB,EAAE,sBAAsB,EAC9C,aAAa,EAAE,aAAa,EAC5B,sBAAsB,EAAE,sBAAsB,EAC9C,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,eAAe,EAC3B,MAAM,EAAE,aAAa,EACrB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,GAClB;wBACF,oBAAC,WAAW,IAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,GAAI,CACpD,CACR,CACJ;gBAED,+BACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAC,yDAAyD,EACnE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,EAChB,OAAO,EAAC,aAAa,EACrB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,UAAU,mBACL,OAAO,CAAC,QAAQ,GAC/B;gBACF,6BAAK,SAAS,EAAC,oBAAoB,IAChC,KAAK,CAAC,CAAC,CAAC,CACP;oBACG,kBAAkB,IAAI,WAAW,IAAI,CACpC,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,sEAAsE,EAChF,OAAO,EAAE,WAAW,YAGb,CACV;oBACD,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,iEAAiE,EAC3E,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,OAAO,CAAC,QAAQ,IAAI,SAAS,YAGhC;oBACR,WAAW,IAAI,CACd,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,8EAA8E,EACxF,OAAO,EAAE,cAAc;wBAEvB,8BAAM,SAAS,EAAC,MAAM;4BACpB,oBAAC,YAAY,yBAA8B,CACtC;wBACP,mDAA2B,CACpB,CACV,CACA,CACJ,CAAC,CAAC,CAAC,CACF,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,iEAAiE,EAC3E,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,OAAO,CAAC,QAAQ,IAAI,SAAS,sBACrB,eAAe,EACjC,MAAM,EAAE,UAAU,kBAGX,CACV,CACG,CACF;YACL,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAC/D,oBAAC,4BAA4B,IAAC,OAAO,EAAE,iBAAiB,GAAI,CAC7D,CACyB;QAE3B,YAAY,IAAI,aAAa,IAAI,CAChC,oBAAC,eAAe,IACd,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,iBAAiB,EAC1B,MAAM,EAAE,oBAAoB,GAC5B,CACH;QAEA,UAAU,IAAI,aAAa,IAAI,CAC9B,oBAAC,SAAS,IACR,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,eAAe,EACxB,MAAM,EAAE,cAAc,GACtB,CACH;QAEA,WAAW,IAAI,CACd,oBAAC,KAAK,IACJ,MAAM,QACN,KAAK,EAAC,WAAW,EACjB,SAAS,EAAC,qBAAqB,EAC/B,cAAc,EAAC,qBAAqB,EACpC,OAAO,EACL,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,wDAAwD,EAClE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAC7C,SAAS,iBAGF;YAGX;;gBACmE,GAAG;gBACpE,sCAAW;wFAET;YAEJ,6BAAK,SAAS,EAAC,0BAA0B;gBACvC,wCAAa,WAAW,CAAC,QAAQ,EAAE,CAAc,CAC7C,CACA,CACT,CACA,CACJ,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA;AAE5C,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,YAAY,CAAC,EACpD,kBAAkB,EAClB,WAAW,EACX,sBAAsB,EACtB,aAAa,EACb,sBAAsB,EACtB,SAAS,EACT,OAAO,EACP,UAAU,EACV,MAAM,EACN,QAAQ,GAOT;IACC,IAAI,kBAAkB,EAAE,CAAC;QACvB,OAAO,CACL,6BAAK,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO;YAC1C,4BAAI,SAAS,EAAC,YAAY,oBAAmB;YAC7C;;gBAC8C,uCAAY;;gBAAI,GAAG;gBAC/D,uCAAY;kCACV,CACA,CACP,CAAA;IACH,CAAC;IAED,IAAI,sBAAsB,EAAE,CAAC;QAC3B,OAAO,CACL,6BAAK,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO;YAC1C,4BAAI,SAAS,EAAC,YAAY,qBAAoB;YAC9C,+BAAI,sBAAsB,CAAC,OAAO,CAAK,CACnC,CACP,CAAA;IACH,CAAC;IAED,IAAI,sBAAsB,IAAI,SAAS,EAAE,CAAC;QACxC,OAAO,CACL,6BAAK,SAAS,EAAC,+DAA+D;YAC5E,oBAAC,SAAS,IAAC,KAAK,SAAG,CACf,CACP,CAAA;IACH,CAAC;IAED,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,CACL;YACE,8BAAM,SAAS,EAAC,mBAAmB;gBACjC,oBAAC,gBAAgB,IACf,sBAAsB,EAAE,sBAAsB,EAC9C,sBAAsB,EAAE,sBAAsB,EAC9C,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,GAClB,CACG;YACP,6BACE,GAAG,EAAE,aAAa,EAClB,SAAS,EAAC,qCAAqC,EAC/C,WAAW,EAAC,WAAW,EACvB,GAAG,EAAE,GAAG,OAAO,CAAC,KAAK,cAAc,GACnC;YACF,6BAAK,SAAS,EAAC,wBAAwB;gBACrC,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,8DAA8D,EACxE,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,OAAO,CAAC,QAAQ;oBAE1B,8BAAM,SAAS,EAAC,MAAM;wBACpB,oBAAC,YAAY,eAAoB,CAC5B,CACA;gBACT,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,sEAAsE,EAChF,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,OAAO,CAAC,QAAQ;oBAE1B,8BAAM,SAAS,EAAC,MAAM;wBACpB,oBAAC,YAAY,gBAAqB,CAC7B,CACA,CACL,CACL,CACJ,CAAA;IACH,CAAC;IAED,OAAO,CACL,6BAAK,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO;QAC1C,oBAAC,uBAAuB,OAAG,CACvB,CACP,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import * as React from 'react'\n\nimport useBooleanState from '../hooks/useBooleanState'\nimport downloadAttachment, {\n  downloadFileLegacy,\n} from '../services/download-file'\nimport OnLoading from '../components/renderer/OnLoading'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport drawTimestampOnCanvas from '../services/drawTimestampOnCanvas'\nimport { FormElementBinaryStorageValue } from '../types/attachments'\nimport useAttachment from '../hooks/attachments/useAttachment'\nimport AnnotationModal, {\n  superimposeAnnotationOnImage,\n} from '../components/renderer/AnnotationModal'\nimport Modal from '../components/renderer/Modal'\nimport {\n  checkIfContentTypeIsImage,\n  prepareNewAttachment,\n  correctFileOrientation,\n} from '../services/attachments'\nimport AttachmentStatus from '../components/renderer/attachments/AttachmentStatus'\nimport { canvasToBlob, urlToBlobAsync } from '../services/blob-utils'\nimport ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport ProgressBar from '../components/renderer/attachments/ProgressBar'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\nimport CropModal from '../components/ImageCropper/CropModal'\nimport { Area } from 'react-easy-crop'\nimport { generateCroppedImageBlob } from '../components/ImageCropper'\n\ntype Props = {\n  id: string\n  element: FormTypes.CameraElement\n  value: FormElementBinaryStorageValue\n  onChange: FormElementValueChangeHandler<FormElementBinaryStorageValue>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementCamera({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const [{ cameraError, isLoading }, setState] = React.useState<{\n    isLoading: boolean\n    cameraError?: Error\n  }>({\n    isLoading: false,\n  })\n  const [isAnnotating, setIsAnnotating, clearIsAnnotating] =\n    useBooleanState(false)\n  const [isCropping, setIsCropping, clearIsCropping] = useBooleanState(false)\n\n  const fileInputRef = React.useRef<HTMLInputElement>(null)\n\n  const clearImage = React.useCallback(() => {\n    onChange(element, {\n      value: undefined,\n    })\n  }, [element, onChange])\n\n  const fileChange = React.useCallback(\n    async (changeEvent: React.ChangeEvent<HTMLInputElement>) => {\n      if (!changeEvent.target || !changeEvent.target.files) {\n        return\n      }\n\n      const file = changeEvent.target.files[0]\n      if (!file) {\n        return\n      }\n\n      setState({\n        isLoading: true,\n      })\n\n      console.log('File selected event', file)\n      try {\n        if (!file.size) {\n          throw new Error('You cannot upload an empty file.')\n        }\n\n        if (!checkIfContentTypeIsImage(file.type)) {\n          throw new Error(\n            `Invalid file type \"${file.type}\". Please select an image.`,\n          )\n        }\n        const result = await correctFileOrientation(\n          file,\n          element.includeTimestampWatermark ? drawTimestampOnCanvas : undefined,\n        )\n\n        if (result instanceof Blob) {\n          onChange(element, {\n            value: prepareNewAttachment(result, file.name, element),\n          })\n        } else {\n          const blob = await canvasToBlob(result)\n          onChange(element, {\n            value: prepareNewAttachment(blob, file.name, element),\n          })\n        }\n\n        setIsDirty()\n        setState({\n          isLoading: false,\n        })\n      } catch (error) {\n        setState({\n          isLoading: false,\n          cameraError: error as Error,\n        })\n      }\n    },\n    [element, onChange, setIsDirty],\n  )\n  const openCamera = React.useCallback(() => {\n    if (window.cordova && navigator.camera && navigator.camera.getPicture) {\n      setState({\n        isLoading: true,\n      })\n      navigator.camera.getPicture(\n        (base64Data: string) => {\n          urlToBlobAsync(`data:image/jpeg;base64,${base64Data}`)\n            .then((blob) => {\n              onChange(element, {\n                value: prepareNewAttachment(blob, 'photo.jpeg', element),\n              })\n              setState({\n                isLoading: false,\n              })\n            })\n            .catch((error) => {\n              setState({\n                cameraError: error,\n                isLoading: false,\n              })\n            })\n        },\n        (error: Error) => {\n          console.warn(\n            'An error occurred while attempting to take a photo',\n            error,\n          )\n          setState({\n            isLoading: false,\n            cameraError: error,\n          })\n        },\n        {\n          quality: 100,\n          destinationType: window.Camera.DestinationType.DATA_URL,\n          sourceType: window.Camera.PictureSourceType.CAMERA,\n          allowEdit: false,\n          encodingType: window.Camera.EncodingType.JPEG,\n          mediaType: window.Camera.MediaType.PICTURE,\n          correctOrientation: true,\n          saveToPhotoAlbum: false,\n          cameraDirection: window.Camera.Direction.BACK,\n        },\n      )\n    } else if (fileInputRef.current) {\n      // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNIZED\n      fileInputRef.current.value = ''\n      fileInputRef.current.click()\n    } else {\n      console.error(\n        'Could not find \"input\" element in Camera component template',\n      )\n    }\n  }, [element, onChange])\n\n  const {\n    isUploading,\n    uploadErrorMessage,\n    isLoadingAttachmentUrl,\n    attachmentUrl,\n    loadAttachmentUrlError,\n    canDownload,\n    progress,\n    contentType,\n  } = useAttachment(\n    value,\n    element,\n    React.useCallback(\n      (id, attachment) => {\n        onChange(element, {\n          value: attachment,\n        })\n      },\n      [element, onChange],\n    ),\n  )\n\n  const handleRetry = React.useMemo(() => {\n    if (!value || typeof value !== 'object') return\n\n    if (value.type === 'ERROR' && value.data) {\n      return () => {\n        onChange(element, {\n          value: {\n            type: 'NEW',\n            _id: value._id,\n            data: value.data,\n            fileName: value.fileName,\n            isPrivate: value.isPrivate,\n          },\n        })\n      }\n    }\n  }, [element, onChange, value])\n\n  const handleDownload = React.useCallback(async () => {\n    if (typeof value === 'string') {\n      await downloadFileLegacy(value, id)\n    } else if (value && value.type !== 'ERROR') {\n      await downloadAttachment(value)\n    }\n  }, [value, id])\n\n  const handleSaveAnnotation = React.useCallback(\n    async (annotationDataUri: string) => {\n      clearIsAnnotating()\n\n      if (typeof attachmentUrl !== 'string') {\n        return\n      }\n\n      setState({\n        isLoading: true,\n      })\n      try {\n        const blob = await superimposeAnnotationOnImage({\n          annotationDataUri,\n          attachmentUrl,\n        })\n        setState({\n          isLoading: false,\n        })\n        if (blob) {\n          const attachment = prepareNewAttachment(blob, 'photo.png', element)\n          onChange(element, {\n            value: attachment,\n          })\n        }\n      } catch (err) {\n        setState({\n          cameraError: err as Error,\n          isLoading: false,\n        })\n      }\n    },\n    [attachmentUrl, clearIsAnnotating, element, onChange],\n  )\n\n  const handleSaveCrop = React.useCallback(\n    async (croppedAreaPixels: Area) => {\n      clearIsCropping()\n      if (!attachmentUrl) return\n\n      setState({\n        isLoading: true,\n      })\n\n      try {\n        const croppedImage = await generateCroppedImageBlob({\n          croppedAreaPixels,\n          imgSrc: attachmentUrl,\n          fileType: contentType,\n        })\n\n        if (!croppedImage) throw new Error('Cropped image is null')\n        const attachment = prepareNewAttachment(\n          croppedImage,\n          'photo.png',\n          element,\n        )\n        onChange(element, {\n          value: attachment,\n        })\n        setState({\n          isLoading: false,\n        })\n      } catch (error) {\n        setState({\n          cameraError: error as Error,\n          isLoading: false,\n        })\n      }\n    },\n    [attachmentUrl, clearIsCropping, contentType, element, onChange],\n  )\n\n  const progressTooltipRef = React.useRef<HTMLDivElement>(null)\n  return (\n    <>\n      <FormElementLabelContainer\n        className=\"ob-camera\"\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        <div className=\"control\">\n          {(value || isLoading) && (\n            <>\n              <figure className=\"ob-figure\" ref={progressTooltipRef}>\n                <DisplayImage\n                  isUploading={isUploading}\n                  uploadErrorMessage={uploadErrorMessage}\n                  isLoadingAttachmentUrl={isLoadingAttachmentUrl}\n                  attachmentUrl={attachmentUrl}\n                  loadAttachmentUrlError={loadAttachmentUrlError}\n                  isLoading={isLoading}\n                  element={element}\n                  onAnnotate={setIsAnnotating}\n                  onCrop={setIsCropping}\n                  canDownload={canDownload}\n                  progress={progress}\n                />\n                <ProgressBar isShowing={isUploading} progress={progress} />\n              </figure>\n            </>\n          )}\n\n          <input\n            ref={fileInputRef}\n            className=\"ob-input ob-camera__input-hidden cypress-camera-control\"\n            type=\"file\"\n            accept=\"image/*\"\n            capture=\"environment\"\n            id={id}\n            name={element.name}\n            required={element.required}\n            disabled={element.readOnly}\n            onChange={fileChange}\n            aria-required={element.required}\n          />\n          <div className=\"buttons ob-buttons\">\n            {value ? (\n              <>\n                {uploadErrorMessage && handleRetry && (\n                  <button\n                    type=\"button\"\n                    className=\"button ob-button ob-button__retry is-light cypress-retry-file-button\"\n                    onClick={handleRetry}\n                  >\n                    Retry\n                  </button>\n                )}\n                <button\n                  type=\"button\"\n                  className=\"button ob-button ob-button__clear is-light cypress-clear-camera\"\n                  onClick={clearImage}\n                  disabled={element.readOnly || isLoading}\n                >\n                  Clear\n                </button>\n                {canDownload && (\n                  <button\n                    type=\"button\"\n                    className=\"button ob-button ob-button__download is-primary cypress-download-file-button\"\n                    onClick={handleDownload}\n                  >\n                    <span className=\"icon\">\n                      <MaterialIcon>cloud_download</MaterialIcon>\n                    </span>\n                    <span>&nbsp;Download</span>\n                  </button>\n                )}\n              </>\n            ) : (\n              <button\n                type=\"button\"\n                className=\"button ob-button ob-button__open is-primary cypress-open-camera\"\n                onClick={openCamera}\n                disabled={element.readOnly || isLoading}\n                aria-describedby={ariaDescribedby}\n                onBlur={setIsDirty}\n              >\n                Open Camera\n              </button>\n            )}\n          </div>\n        </div>\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n\n      {isAnnotating && attachmentUrl && (\n        <AnnotationModal\n          imageSrc={attachmentUrl}\n          onClose={clearIsAnnotating}\n          onSave={handleSaveAnnotation}\n        />\n      )}\n\n      {isCropping && attachmentUrl && (\n        <CropModal\n          imageSrc={attachmentUrl}\n          onClose={clearIsCropping}\n          onSave={handleSaveCrop}\n        />\n      )}\n\n      {cameraError && (\n        <Modal\n          isOpen\n          title=\"Whoops...\"\n          className=\"cypress-error-modal\"\n          titleClassName=\"cypress-error-title\"\n          actions={\n            <button\n              type=\"button\"\n              className=\"button ob-button is-primary cypress-close-error-button\"\n              onClick={() => setState({ isLoading: false })}\n              autoFocus\n            >\n              Okay\n            </button>\n          }\n        >\n          <p>\n            An error occurred while attempting to take a photo. Please click{' '}\n            <b>Okay</b> below to try again. If the problem persists, please\n            contact support.\n          </p>\n\n          <div className=\"content has-margin-top-6\">\n            <blockquote>{cameraError.toString()}</blockquote>\n          </div>\n        </Modal>\n      )}\n    </>\n  )\n}\n\nexport default React.memo(FormElementCamera)\n\nconst DisplayImage = React.memo(function DisplayImage({\n  uploadErrorMessage,\n  isUploading,\n  isLoadingAttachmentUrl,\n  attachmentUrl,\n  loadAttachmentUrlError,\n  isLoading,\n  element,\n  onAnnotate,\n  onCrop,\n  progress,\n}: Omit<ReturnType<typeof useAttachment>, 'contentType'> & {\n  element: FormTypes.CameraElement\n  isLoading: boolean\n  onAnnotate: () => void\n  onCrop: () => void\n  progress: number | undefined\n}) {\n  if (uploadErrorMessage) {\n    return (\n      <div className=\"figure-content\" role=\"alert\">\n        <h3 className=\"title is-3\">Upload Failed</h3>\n        <p>\n          Your photo failed to upload, please use the <b>Retry</b> or{' '}\n          <b>Clear</b> buttons below.\n        </p>\n      </div>\n    )\n  }\n\n  if (loadAttachmentUrlError) {\n    return (\n      <div className=\"figure-content\" role=\"alert\">\n        <h3 className=\"title is-3\">Preview Failed</h3>\n        <p>{loadAttachmentUrlError.message}</p>\n      </div>\n    )\n  }\n\n  if (isLoadingAttachmentUrl || isLoading) {\n    return (\n      <div className=\"figure-content has-text-centered cypress-camera-loading-image\">\n        <OnLoading small />\n      </div>\n    )\n  }\n\n  if (attachmentUrl) {\n    return (\n      <>\n        <span className=\"ob-figure__status\">\n          <AttachmentStatus\n            isLoadingAttachmentUrl={isLoadingAttachmentUrl}\n            loadAttachmentUrlError={loadAttachmentUrlError}\n            isUploading={isUploading}\n            attachmentUrl={attachmentUrl}\n            progress={progress}\n          />\n        </span>\n        <img\n          src={attachmentUrl}\n          className=\"cypress-camera-image ob-camera__img\"\n          crossOrigin=\"anonymous\"\n          alt={`${element.label}: Attachment`}\n        />\n        <div className=\"ob-image-file__actions\">\n          <button\n            type=\"button\"\n            className=\"button is-primary ob-camera__crop-button cypress-crop-button\"\n            onClick={onCrop}\n            disabled={element.readOnly}\n          >\n            <span className=\"icon\">\n              <MaterialIcon>crop</MaterialIcon>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            className=\"button is-primary ob-camera__annotate-button cypress-annotate-button\"\n            onClick={onAnnotate}\n            disabled={element.readOnly}\n          >\n            <span className=\"icon\">\n              <MaterialIcon>brush</MaterialIcon>\n            </span>\n          </button>\n        </div>\n      </>\n    )\n  }\n\n  return (\n    <div className=\"figure-content\" role=\"alert\">\n      <ImagePreviewUnavailable />\n    </div>\n  )\n})\n"]}
+{"version":3,"file":"FormElementCamera.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCamera.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport useBooleanState from '../hooks/useBooleanState'\nimport downloadAttachment, {\n  downloadFileLegacy,\n} from '../services/download-file'\nimport OnLoading from '../components/renderer/OnLoading'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport drawTimestampOnCanvas from '../services/drawTimestampOnCanvas'\nimport { FormElementBinaryStorageValue } from '../types/attachments'\nimport useAttachment from '../hooks/attachments/useAttachment'\nimport AnnotationModal, {\n  superimposeAnnotationOnImage,\n} from '../components/renderer/AnnotationModal'\nimport Modal from '../components/renderer/Modal'\nimport {\n  checkIfContentTypeIsImage,\n  prepareNewAttachment,\n  correctFileOrientation,\n} from '../services/attachments'\nimport AttachmentStatus from '../components/renderer/attachments/AttachmentStatus'\nimport { canvasToBlob, urlToBlobAsync } from '../services/blob-utils'\nimport ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport ProgressBar from '../components/renderer/attachments/ProgressBar'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\nimport CropModal from '../components/ImageCropper/CropModal'\nimport { generateCroppedImageBlob } from '../components/ImageCropper'\nimport { PercentCrop } from 'react-image-crop'\n\ntype Props = {\n  id: string\n  element: FormTypes.CameraElement\n  value: FormElementBinaryStorageValue\n  onChange: FormElementValueChangeHandler<FormElementBinaryStorageValue>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementCamera({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const [{ cameraError, isLoading }, setState] = React.useState<{\n    isLoading: boolean\n    cameraError?: Error\n  }>({\n    isLoading: false,\n  })\n  const [isAnnotating, setIsAnnotating, clearIsAnnotating] =\n    useBooleanState(false)\n  const [isCropping, setIsCropping, clearIsCropping] = useBooleanState(false)\n\n  const fileInputRef = React.useRef<HTMLInputElement>(null)\n\n  const clearImage = React.useCallback(() => {\n    onChange(element, {\n      value: undefined,\n    })\n  }, [element, onChange])\n\n  const fileChange = React.useCallback(\n    async (changeEvent: React.ChangeEvent<HTMLInputElement>) => {\n      if (!changeEvent.target || !changeEvent.target.files) {\n        return\n      }\n\n      const file = changeEvent.target.files[0]\n      if (!file) {\n        return\n      }\n\n      setState({\n        isLoading: true,\n      })\n\n      console.log('File selected event', file)\n      try {\n        if (!file.size) {\n          throw new Error('You cannot upload an empty file.')\n        }\n\n        if (!checkIfContentTypeIsImage(file.type)) {\n          throw new Error(\n            `Invalid file type \"${file.type}\". Please select an image.`,\n          )\n        }\n        const result = await correctFileOrientation(\n          file,\n          element.includeTimestampWatermark ? drawTimestampOnCanvas : undefined,\n        )\n\n        if (result instanceof Blob) {\n          onChange(element, {\n            value: prepareNewAttachment(result, file.name, element),\n          })\n        } else {\n          const blob = await canvasToBlob(result)\n          onChange(element, {\n            value: prepareNewAttachment(blob, file.name, element),\n          })\n        }\n\n        setIsDirty()\n        setState({\n          isLoading: false,\n        })\n      } catch (error) {\n        setState({\n          isLoading: false,\n          cameraError: error as Error,\n        })\n      }\n    },\n    [element, onChange, setIsDirty],\n  )\n  const openCamera = React.useCallback(() => {\n    if (window.cordova && navigator.camera && navigator.camera.getPicture) {\n      setState({\n        isLoading: true,\n      })\n      navigator.camera.getPicture(\n        (base64Data: string) => {\n          urlToBlobAsync(`data:image/jpeg;base64,${base64Data}`)\n            .then((blob) => {\n              onChange(element, {\n                value: prepareNewAttachment(blob, 'photo.jpeg', element),\n              })\n              setState({\n                isLoading: false,\n              })\n            })\n            .catch((error) => {\n              setState({\n                cameraError: error,\n                isLoading: false,\n              })\n            })\n        },\n        (error: Error) => {\n          console.warn(\n            'An error occurred while attempting to take a photo',\n            error,\n          )\n          setState({\n            isLoading: false,\n            cameraError: error,\n          })\n        },\n        {\n          quality: 100,\n          destinationType: window.Camera.DestinationType.DATA_URL,\n          sourceType: window.Camera.PictureSourceType.CAMERA,\n          allowEdit: false,\n          encodingType: window.Camera.EncodingType.JPEG,\n          mediaType: window.Camera.MediaType.PICTURE,\n          correctOrientation: true,\n          saveToPhotoAlbum: false,\n          cameraDirection: window.Camera.Direction.BACK,\n        },\n      )\n    } else if (fileInputRef.current) {\n      // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNIZED\n      fileInputRef.current.value = ''\n      fileInputRef.current.click()\n    } else {\n      console.error(\n        'Could not find \"input\" element in Camera component template',\n      )\n    }\n  }, [element, onChange])\n\n  const {\n    isUploading,\n    uploadErrorMessage,\n    isLoadingAttachmentUrl,\n    attachmentUrl,\n    loadAttachmentUrlError,\n    canDownload,\n    progress,\n    contentType,\n  } = useAttachment(\n    value,\n    element,\n    React.useCallback(\n      (id, attachment) => {\n        onChange(element, {\n          value: attachment,\n        })\n      },\n      [element, onChange],\n    ),\n  )\n\n  const handleRetry = React.useMemo(() => {\n    if (!value || typeof value !== 'object') return\n\n    if (value.type === 'ERROR' && value.data) {\n      return () => {\n        onChange(element, {\n          value: {\n            type: 'NEW',\n            _id: value._id,\n            data: value.data,\n            fileName: value.fileName,\n            isPrivate: value.isPrivate,\n          },\n        })\n      }\n    }\n  }, [element, onChange, value])\n\n  const handleDownload = React.useCallback(async () => {\n    if (typeof value === 'string') {\n      await downloadFileLegacy(value, id)\n    } else if (value && value.type !== 'ERROR') {\n      await downloadAttachment(value)\n    }\n  }, [value, id])\n\n  const handleSaveAnnotation = React.useCallback(\n    async (annotationDataUri: string) => {\n      clearIsAnnotating()\n\n      if (typeof attachmentUrl !== 'string') {\n        return\n      }\n\n      setState({\n        isLoading: true,\n      })\n      try {\n        const blob = await superimposeAnnotationOnImage({\n          annotationDataUri,\n          attachmentUrl,\n        })\n        setState({\n          isLoading: false,\n        })\n        if (blob) {\n          const attachment = prepareNewAttachment(blob, 'photo.png', element)\n          onChange(element, {\n            value: attachment,\n          })\n        }\n      } catch (err) {\n        setState({\n          cameraError: err as Error,\n          isLoading: false,\n        })\n      }\n    },\n    [attachmentUrl, clearIsAnnotating, element, onChange],\n  )\n\n  const handleSaveCrop = React.useCallback(\n    async (croppedAreaPercent: PercentCrop) => {\n      clearIsCropping()\n      if (!attachmentUrl) return\n\n      setState({\n        isLoading: true,\n      })\n\n      try {\n        const croppedImage = await generateCroppedImageBlob({\n          croppedAreaPercent,\n          imgSrc: attachmentUrl,\n          fileType: contentType,\n        })\n\n        if (!croppedImage) throw new Error('Cropped image is null')\n        const attachment = prepareNewAttachment(\n          croppedImage,\n          'photo.png',\n          element,\n        )\n        onChange(element, {\n          value: attachment,\n        })\n        setState({\n          isLoading: false,\n        })\n      } catch (error) {\n        setState({\n          cameraError: error as Error,\n          isLoading: false,\n        })\n      }\n    },\n    [attachmentUrl, clearIsCropping, contentType, element, onChange],\n  )\n\n  const progressTooltipRef = React.useRef<HTMLDivElement>(null)\n  return (\n    <>\n      <FormElementLabelContainer\n        className=\"ob-camera\"\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        <div className=\"control\">\n          {(value || isLoading) && (\n            <>\n              <figure className=\"ob-figure\" ref={progressTooltipRef}>\n                <DisplayImage\n                  isUploading={isUploading}\n                  uploadErrorMessage={uploadErrorMessage}\n                  isLoadingAttachmentUrl={isLoadingAttachmentUrl}\n                  attachmentUrl={attachmentUrl}\n                  loadAttachmentUrlError={loadAttachmentUrlError}\n                  isLoading={isLoading}\n                  element={element}\n                  onAnnotate={setIsAnnotating}\n                  onCrop={setIsCropping}\n                  canDownload={canDownload}\n                  progress={progress}\n                />\n                <ProgressBar isShowing={isUploading} progress={progress} />\n              </figure>\n            </>\n          )}\n\n          <input\n            ref={fileInputRef}\n            className=\"ob-input ob-camera__input-hidden cypress-camera-control\"\n            type=\"file\"\n            accept=\"image/*\"\n            capture=\"environment\"\n            id={id}\n            name={element.name}\n            required={element.required}\n            disabled={element.readOnly}\n            onChange={fileChange}\n            aria-required={element.required}\n          />\n          <div className=\"buttons ob-buttons\">\n            {value ? (\n              <>\n                {uploadErrorMessage && handleRetry && (\n                  <button\n                    type=\"button\"\n                    className=\"button ob-button ob-button__retry is-light cypress-retry-file-button\"\n                    onClick={handleRetry}\n                  >\n                    Retry\n                  </button>\n                )}\n                <button\n                  type=\"button\"\n                  className=\"button ob-button ob-button__clear is-light cypress-clear-camera\"\n                  onClick={clearImage}\n                  disabled={element.readOnly || isLoading}\n                >\n                  Clear\n                </button>\n                {canDownload && (\n                  <button\n                    type=\"button\"\n                    className=\"button ob-button ob-button__download is-primary cypress-download-file-button\"\n                    onClick={handleDownload}\n                  >\n                    <span className=\"icon\">\n                      <MaterialIcon>cloud_download</MaterialIcon>\n                    </span>\n                    <span>&nbsp;Download</span>\n                  </button>\n                )}\n              </>\n            ) : (\n              <button\n                type=\"button\"\n                className=\"button ob-button ob-button__open is-primary cypress-open-camera\"\n                onClick={openCamera}\n                disabled={element.readOnly || isLoading}\n                aria-describedby={ariaDescribedby}\n                onBlur={setIsDirty}\n              >\n                Open Camera\n              </button>\n            )}\n          </div>\n        </div>\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n\n      {isAnnotating && attachmentUrl && (\n        <AnnotationModal\n          imageSrc={attachmentUrl}\n          onClose={clearIsAnnotating}\n          onSave={handleSaveAnnotation}\n        />\n      )}\n\n      {isCropping && attachmentUrl && (\n        <CropModal\n          imageSrc={attachmentUrl}\n          onClose={clearIsCropping}\n          onSave={handleSaveCrop}\n        />\n      )}\n\n      {cameraError && (\n        <Modal\n          isOpen\n          title=\"Whoops...\"\n          className=\"cypress-error-modal\"\n          titleClassName=\"cypress-error-title\"\n          actions={\n            <button\n              type=\"button\"\n              className=\"button ob-button is-primary cypress-close-error-button\"\n              onClick={() => setState({ isLoading: false })}\n              autoFocus\n            >\n              Okay\n            </button>\n          }\n        >\n          <p>\n            An error occurred while attempting to take a photo. Please click{' '}\n            <b>Okay</b> below to try again. If the problem persists, please\n            contact support.\n          </p>\n\n          <div className=\"content has-margin-top-6\">\n            <blockquote>{cameraError.toString()}</blockquote>\n          </div>\n        </Modal>\n      )}\n    </>\n  )\n}\n\nexport default React.memo(FormElementCamera)\n\nconst DisplayImage = React.memo(function DisplayImage({\n  uploadErrorMessage,\n  isUploading,\n  isLoadingAttachmentUrl,\n  attachmentUrl,\n  loadAttachmentUrlError,\n  isLoading,\n  element,\n  onAnnotate,\n  onCrop,\n  progress,\n}: Omit<ReturnType<typeof useAttachment>, 'contentType'> & {\n  element: FormTypes.CameraElement\n  isLoading: boolean\n  onAnnotate: () => void\n  onCrop: () => void\n  progress: number | undefined\n}) {\n  if (uploadErrorMessage) {\n    return (\n      <div className=\"figure-content\" role=\"alert\">\n        <h3 className=\"title is-3\">Upload Failed</h3>\n        <p>\n          Your photo failed to upload, please use the <b>Retry</b> or{' '}\n          <b>Clear</b> buttons below.\n        </p>\n      </div>\n    )\n  }\n\n  if (loadAttachmentUrlError) {\n    return (\n      <div className=\"figure-content\" role=\"alert\">\n        <h3 className=\"title is-3\">Preview Failed</h3>\n        <p>{loadAttachmentUrlError.message}</p>\n      </div>\n    )\n  }\n\n  if (isLoadingAttachmentUrl || isLoading) {\n    return (\n      <div className=\"figure-content has-text-centered cypress-camera-loading-image\">\n        <OnLoading small />\n      </div>\n    )\n  }\n\n  if (attachmentUrl) {\n    return (\n      <>\n        <span className=\"ob-figure__status\">\n          <AttachmentStatus\n            isLoadingAttachmentUrl={isLoadingAttachmentUrl}\n            loadAttachmentUrlError={loadAttachmentUrlError}\n            isUploading={isUploading}\n            attachmentUrl={attachmentUrl}\n            progress={progress}\n          />\n        </span>\n        <img\n          src={attachmentUrl}\n          className=\"cypress-camera-image ob-camera__img\"\n          crossOrigin=\"anonymous\"\n          alt={`${element.label}: Attachment`}\n        />\n        <div className=\"ob-image-file__actions\">\n          <button\n            type=\"button\"\n            className=\"button is-primary ob-camera__crop-button cypress-crop-button\"\n            onClick={onCrop}\n            disabled={element.readOnly}\n          >\n            <span className=\"icon\">\n              <MaterialIcon>crop</MaterialIcon>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            className=\"button is-primary ob-camera__annotate-button cypress-annotate-button\"\n            onClick={onAnnotate}\n            disabled={element.readOnly}\n          >\n            <span className=\"icon\">\n              <MaterialIcon>brush</MaterialIcon>\n            </span>\n          </button>\n        </div>\n      </>\n    )\n  }\n\n  return (\n    <div className=\"figure-content\" role=\"alert\">\n      <ImagePreviewUnavailable />\n    </div>\n  )\n})\n"]}

package/dist/form-elements/FormElementFile.js

@@ -57,7 +57,7 @@ const FormElementFile = ({ element, onRemove, file, onChange, disableUpload, ind
             });
         }
     }, [attachmentUrl, clearIsAnnotating, element, file, onChange]);
-    const handleSaveCrop = React.useCallback(async (croppedAreaPixels) => {
+    const handleSaveCrop = React.useCallback(async (croppedAreaPercent) => {
         if (!attachmentUrl || file.type)
             return;
         clearIsCropping();
@@ -66,7 +66,7 @@ const FormElementFile = ({ element, onRemove, file, onChange, disableUpload, ind
         });
         try {
             const croppedImage = await generateCroppedImageBlob({
-                croppedAreaPixels,
+                croppedAreaPercent,
                 imgSrc: attachmentUrl,
                 fileType: contentType,
             });

package/dist/form-elements/FormElementFile.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementFile.js","sourceRoot":"","sources":["../../src/form-elements/FormElementFile.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport downloadAttachment from '../services/download-file'\nimport { FormTypes } from '@oneblink/types'\nimport useAttachment, { OnChange } from '../hooks/attachments/useAttachment'\nimport FileCard from '../components/renderer/attachments/FileCard'\nimport { attachmentsService } from '@oneblink/apps'\nimport useBooleanState from '../hooks/useBooleanState'\nimport CropModal from '../components/ImageCropper/CropModal'\nimport AnnotationModal, {\n  superimposeAnnotationOnImage,\n} from '../components/renderer/AnnotationModal'\nimport { Area } from 'react-easy-crop'\nimport { generateCroppedImageBlob } from '../components/ImageCropper'\nimport { prepareNewAttachment } from '../services/attachments'\nimport Modal from '../components/renderer/Modal'\n\ntype Props = {\n  element: FormTypes.FilesElement\n  /** If set to `undefined`, the remove button will be hidden */\n  onRemove: ((id: string) => void) | undefined\n  file: attachmentsService.Attachment\n  disableUpload: boolean\n  onChange: OnChange\n  index: number\n}\n\nconst FormElementFile = ({\n  element,\n  onRemove,\n  file,\n  onChange,\n  disableUpload,\n  index,\n}: Props) => {\n  const [isAnnotating, setIsAnnotating, clearIsAnnotating] =\n    useBooleanState(false)\n  const [isCropping, setIsCropping, clearIsCropping] = useBooleanState(false)\n  const [state, setState] = React.useState<{\n    isLoading: boolean\n    error?: Error\n  }>({\n    isLoading: false,\n    error: undefined,\n  })\n  const {\n    attachmentUrl,\n    contentType,\n    isUploading,\n    uploadErrorMessage,\n    isLoadingAttachmentUrl,\n    loadAttachmentUrlError,\n    isContentTypeImage,\n    canDownload,\n    progress,\n  } = useAttachment(file, element, onChange, disableUpload)\n\n  const handleRemove = React.useMemo(() => {\n    if (!onRemove) {\n      return\n    }\n    return () => {\n      if (!file.type) {\n        return onRemove(file.id)\n      }\n      return onRemove(file._id)\n    }\n  }, [file, onRemove])\n\n  const handleDownload = React.useCallback(async () => {\n    await downloadAttachment(file)\n  }, [file])\n\n  const handleAnnotate = React.useCallback(\n    async (annotationDataUri: string) => {\n      if (!attachmentUrl || file.type) return\n      clearIsAnnotating()\n\n      setState({\n        isLoading: true,\n      })\n\n      try {\n        const blob = await superimposeAnnotationOnImage({\n          annotationDataUri,\n          attachmentUrl,\n        })\n        setState({\n          isLoading: false,\n        })\n        if (!blob) return\n        const attachment = prepareNewAttachment(blob, file.fileName, element)\n        onChange(file.id, attachment)\n      } catch (error) {\n        setState({\n          error: error as Error,\n          isLoading: false,\n        })\n      }\n    },\n    [attachmentUrl, clearIsAnnotating, element, file, onChange],\n  )\n  const handleSaveCrop = React.useCallback(\n    async (croppedAreaPixels: Area) => {\n      if (!attachmentUrl || file.type) return\n      clearIsCropping()\n\n      setState({\n        isLoading: true,\n      })\n\n      try {\n        const croppedImage = await generateCroppedImageBlob({\n          croppedAreaPixels,\n          imgSrc: attachmentUrl,\n          fileType: contentType,\n        })\n        setState({\n          isLoading: false,\n        })\n        if (!croppedImage) return\n        const attachment = prepareNewAttachment(\n          croppedImage,\n          file.fileName,\n          element,\n        )\n        onChange(file.id, attachment)\n      } catch (error) {\n        setState({\n          error: error as Error,\n          isLoading: false,\n        })\n      }\n    },\n    [attachmentUrl, clearIsCropping, contentType, element, file, onChange],\n  )\n  const handleRetry = React.useMemo(() => {\n    if (file.type === 'ERROR' && file.data) {\n      return () => {\n        onChange(file._id, {\n          type: 'NEW',\n          _id: file._id,\n          data: file.data,\n          fileName: file.fileName,\n          isPrivate: file.isPrivate,\n        })\n      }\n    }\n  }, [file, onChange])\n\n  return (\n    <>\n      <FileCard\n        element={element}\n        isUploading={isUploading}\n        isUploadPaused={disableUpload}\n        uploadErrorMessage={uploadErrorMessage}\n        loadAttachmentUrlError={loadAttachmentUrlError}\n        isLoadingAttachmentUrl={isLoadingAttachmentUrl || state.isLoading}\n        attachmentUrl={attachmentUrl}\n        isContentTypeImage={isContentTypeImage}\n        fileName={file.fileName}\n        onDownload={canDownload ? handleDownload : undefined}\n        onRemove={handleRemove}\n        onRetry={handleRetry}\n        progress={progress}\n        index={index}\n        onAnnotate={isContentTypeImage ? setIsAnnotating : undefined}\n        onCrop={isContentTypeImage ? setIsCropping : undefined}\n      />\n      {isCropping && attachmentUrl && (\n        <CropModal\n          imageSrc={attachmentUrl}\n          onClose={clearIsCropping}\n          onSave={handleSaveCrop}\n        />\n      )}\n      {isAnnotating && attachmentUrl && (\n        <AnnotationModal\n          imageSrc={attachmentUrl}\n          onClose={clearIsAnnotating}\n          onSave={handleAnnotate}\n        />\n      )}\n      {state.error && (\n        <Modal\n          isOpen\n          title=\"Whoops...\"\n          className=\"cypress-error-modal\"\n          titleClassName=\"cypress-error-title\"\n          actions={\n            <button\n              type=\"button\"\n              className=\"button ob-button is-primary cypress-close-error-button\"\n              onClick={() => setState({ isLoading: false })}\n              autoFocus\n            >\n              Okay\n            </button>\n          }\n        >\n          <p>\n            An error occurred while attempting to edit an image. Please click{' '}\n            <b>Okay</b> below to try again. If the problem persists, please\n            contact support.\n          </p>\n\n          <div className=\"content has-margin-top-6\">\n            <blockquote>{state.error.toString()}</blockquote>\n          </div>\n        </Modal>\n      )}\n    </>\n  )\n}\n\nexport default React.memo<Props>(FormElementFile)\n"]}
+{"version":3,"file":"FormElementFile.js","sourceRoot":"","sources":["../../src/form-elements/FormElementFile.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport downloadAttachment from '../services/download-file'\nimport { FormTypes } from '@oneblink/types'\nimport useAttachment, { OnChange } from '../hooks/attachments/useAttachment'\nimport FileCard from '../components/renderer/attachments/FileCard'\nimport { attachmentsService } from '@oneblink/apps'\nimport useBooleanState from '../hooks/useBooleanState'\nimport CropModal from '../components/ImageCropper/CropModal'\nimport AnnotationModal, {\n  superimposeAnnotationOnImage,\n} from '../components/renderer/AnnotationModal'\nimport { generateCroppedImageBlob } from '../components/ImageCropper'\nimport { prepareNewAttachment } from '../services/attachments'\nimport Modal from '../components/renderer/Modal'\nimport { PercentCrop } from 'react-image-crop'\n\ntype Props = {\n  element: FormTypes.FilesElement\n  /** If set to `undefined`, the remove button will be hidden */\n  onRemove: ((id: string) => void) | undefined\n  file: attachmentsService.Attachment\n  disableUpload: boolean\n  onChange: OnChange\n  index: number\n}\n\nconst FormElementFile = ({\n  element,\n  onRemove,\n  file,\n  onChange,\n  disableUpload,\n  index,\n}: Props) => {\n  const [isAnnotating, setIsAnnotating, clearIsAnnotating] =\n    useBooleanState(false)\n  const [isCropping, setIsCropping, clearIsCropping] = useBooleanState(false)\n  const [state, setState] = React.useState<{\n    isLoading: boolean\n    error?: Error\n  }>({\n    isLoading: false,\n    error: undefined,\n  })\n  const {\n    attachmentUrl,\n    contentType,\n    isUploading,\n    uploadErrorMessage,\n    isLoadingAttachmentUrl,\n    loadAttachmentUrlError,\n    isContentTypeImage,\n    canDownload,\n    progress,\n  } = useAttachment(file, element, onChange, disableUpload)\n\n  const handleRemove = React.useMemo(() => {\n    if (!onRemove) {\n      return\n    }\n    return () => {\n      if (!file.type) {\n        return onRemove(file.id)\n      }\n      return onRemove(file._id)\n    }\n  }, [file, onRemove])\n\n  const handleDownload = React.useCallback(async () => {\n    await downloadAttachment(file)\n  }, [file])\n\n  const handleAnnotate = React.useCallback(\n    async (annotationDataUri: string) => {\n      if (!attachmentUrl || file.type) return\n      clearIsAnnotating()\n\n      setState({\n        isLoading: true,\n      })\n\n      try {\n        const blob = await superimposeAnnotationOnImage({\n          annotationDataUri,\n          attachmentUrl,\n        })\n        setState({\n          isLoading: false,\n        })\n        if (!blob) return\n        const attachment = prepareNewAttachment(blob, file.fileName, element)\n        onChange(file.id, attachment)\n      } catch (error) {\n        setState({\n          error: error as Error,\n          isLoading: false,\n        })\n      }\n    },\n    [attachmentUrl, clearIsAnnotating, element, file, onChange],\n  )\n  const handleSaveCrop = React.useCallback(\n    async (croppedAreaPercent: PercentCrop) => {\n      if (!attachmentUrl || file.type) return\n      clearIsCropping()\n\n      setState({\n        isLoading: true,\n      })\n\n      try {\n        const croppedImage = await generateCroppedImageBlob({\n          croppedAreaPercent,\n          imgSrc: attachmentUrl,\n          fileType: contentType,\n        })\n        setState({\n          isLoading: false,\n        })\n        if (!croppedImage) return\n        const attachment = prepareNewAttachment(\n          croppedImage,\n          file.fileName,\n          element,\n        )\n        onChange(file.id, attachment)\n      } catch (error) {\n        setState({\n          error: error as Error,\n          isLoading: false,\n        })\n      }\n    },\n    [attachmentUrl, clearIsCropping, contentType, element, file, onChange],\n  )\n  const handleRetry = React.useMemo(() => {\n    if (file.type === 'ERROR' && file.data) {\n      return () => {\n        onChange(file._id, {\n          type: 'NEW',\n          _id: file._id,\n          data: file.data,\n          fileName: file.fileName,\n          isPrivate: file.isPrivate,\n        })\n      }\n    }\n  }, [file, onChange])\n\n  return (\n    <>\n      <FileCard\n        element={element}\n        isUploading={isUploading}\n        isUploadPaused={disableUpload}\n        uploadErrorMessage={uploadErrorMessage}\n        loadAttachmentUrlError={loadAttachmentUrlError}\n        isLoadingAttachmentUrl={isLoadingAttachmentUrl || state.isLoading}\n        attachmentUrl={attachmentUrl}\n        isContentTypeImage={isContentTypeImage}\n        fileName={file.fileName}\n        onDownload={canDownload ? handleDownload : undefined}\n        onRemove={handleRemove}\n        onRetry={handleRetry}\n        progress={progress}\n        index={index}\n        onAnnotate={isContentTypeImage ? setIsAnnotating : undefined}\n        onCrop={isContentTypeImage ? setIsCropping : undefined}\n      />\n      {isCropping && attachmentUrl && (\n        <CropModal\n          imageSrc={attachmentUrl}\n          onClose={clearIsCropping}\n          onSave={handleSaveCrop}\n        />\n      )}\n      {isAnnotating && attachmentUrl && (\n        <AnnotationModal\n          imageSrc={attachmentUrl}\n          onClose={clearIsAnnotating}\n          onSave={handleAnnotate}\n        />\n      )}\n      {state.error && (\n        <Modal\n          isOpen\n          title=\"Whoops...\"\n          className=\"cypress-error-modal\"\n          titleClassName=\"cypress-error-title\"\n          actions={\n            <button\n              type=\"button\"\n              className=\"button ob-button is-primary cypress-close-error-button\"\n              onClick={() => setState({ isLoading: false })}\n              autoFocus\n            >\n              Okay\n            </button>\n          }\n        >\n          <p>\n            An error occurred while attempting to edit an image. Please click{' '}\n            <b>Okay</b> below to try again. If the problem persists, please\n            contact support.\n          </p>\n\n          <div className=\"content has-margin-top-6\">\n            <blockquote>{state.error.toString()}</blockquote>\n          </div>\n        </Modal>\n      )}\n    </>\n  )\n}\n\nexport default React.memo<Props>(FormElementFile)\n"]}

package/dist/index.d.ts

@@ -32,5 +32,5 @@ export { default as CalendarBookingsCancelForm } from './components/calendar-boo
 export { default as MultiFactorAuthentication } from './components/mfa/MultiFactorAuthentication';
 export { default as useMfa, MfaProvider, useUserMeetsMfaRequirement, } from './hooks/useMfa';
 export { default as DownloadableFiles } from './components/downloadable-files';
-export { default as ImageCropper, getAspectRatio, generateCroppedImageBlob, } from './components/ImageCropper';
+export { default as ImageCropper, getAspectRatio, generateCroppedImageBlob, PercentCrop, } from './components/ImageCropper';
 export * from './types/form';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["export {\n  OneBlinkFormBaseProps,\n  OneBlinkFormControlledProps,\n  OneBlinkFormUncontrolled as OneBlinkForm,\n  OneBlinkFormControlled,\n} from './OneBlinkForm'\nexport { default as OneBlinkAutoSaveForm } from './OneBlinkAutoSaveForm'\nexport { default as OneBlinkReadOnlyForm } from './OneBlinkReadOnlyForm'\nexport { OneBlinkFormStoreProvider } from './components/formStore/OneBlinkFormStoreProvider'\nexport { default as OneBlinkFormStoreClearFiltersButton } from './components/formStore/OneBlinkFormStoreClearFiltersButton'\nexport { default as OneBlinkFormStoreColumnsButton } from './components/formStore/OneBlinkFormStoreColumnsButton'\nexport { default as OneBlinkFormStoreDownloadButton } from './components/formStore/OneBlinkFormStoreDownloadButton'\nexport { default as OneBlinkFormStoreRefreshButton } from './components/formStore/OneBlinkFormStoreRefreshButton'\nexport { default as OneBlinkFormStoreTable } from './components/formStore/OneBlinkFormStoreTable'\n\nexport { default as useIsMounted } from './hooks/useIsMounted'\nexport { default as useBooleanState } from './hooks/useBooleanState'\nexport { default as useNullableState } from './hooks/useNullableState'\nexport { default as useClickOutsideElement } from './hooks/useClickOutsideElement'\nexport {\n  default as useIsOffline,\n  IsOfflineContextProvider,\n} from './hooks/useIsOffline'\nexport { default as useLogin, UseLoginValue } from './hooks/useLogin'\nexport { default as useSignUp } from './hooks/useSignUp'\nexport {\n  default as useAuth,\n  AuthContextProvider,\n  AuthContextValue,\n} from './hooks/useAuth'\nexport {\n  default as usePendingSubmissions,\n  PendingSubmissionsContextProvider,\n  PendingSubmissionsContextValue,\n} from './hooks/usePendingSubmissions'\nexport {\n  default as useDrafts,\n  DraftsContextProvider,\n  DraftsContextValue,\n} from './hooks/useDrafts'\nexport {\n  default as useLoadDataState,\n  LoadDataState,\n} from './hooks/useLoadDataState'\nexport { default as useLoadResourcesState } from './hooks/useLoadResourcesState'\nexport { default as useLoadDataEffect } from './hooks/useLoadDataEffect'\nexport { default as useFormSubmissionState } from './hooks/useFormSubmissionState'\nexport { default as useFormSubmissionAutoSaveState } from './hooks/useFormSubmissionAutoSaveState'\nexport { default as useGoogleJsApiLoader } from './hooks/useGoogleJsApiLoader'\n\nexport { default as ProgressBar } from './components/renderer/ProgressBar'\nexport { default as PaymentReceipt } from './PaymentReceipt'\nexport { default as PaymentForm } from './components/payments/PaymentForm'\n\nexport { default as CalendarBookingsForm } from './components/calendar-bookings/CalendarBookingsForm'\nexport { default as CalendarBookingsRescheduleForm } from './components/calendar-bookings/CalendarBookingsReschedulingForm'\nexport { default as CalendarBookingsCancelForm } from './components/calendar-bookings/CalendarBookingsCancelForm'\n\nexport { default as MultiFactorAuthentication } from './components/mfa/MultiFactorAuthentication'\n\nexport {\n  default as useMfa,\n  MfaProvider,\n  useUserMeetsMfaRequirement,\n} from './hooks/useMfa'\n\nexport { default as DownloadableFiles } from './components/downloadable-files'\n\nexport {\n  default as ImageCropper,\n  getAspectRatio,\n  generateCroppedImageBlob,\n} from './components/ImageCropper'\n\nexport * from './types/form'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["export {\n  OneBlinkFormBaseProps,\n  OneBlinkFormControlledProps,\n  OneBlinkFormUncontrolled as OneBlinkForm,\n  OneBlinkFormControlled,\n} from './OneBlinkForm'\nexport { default as OneBlinkAutoSaveForm } from './OneBlinkAutoSaveForm'\nexport { default as OneBlinkReadOnlyForm } from './OneBlinkReadOnlyForm'\nexport { OneBlinkFormStoreProvider } from './components/formStore/OneBlinkFormStoreProvider'\nexport { default as OneBlinkFormStoreClearFiltersButton } from './components/formStore/OneBlinkFormStoreClearFiltersButton'\nexport { default as OneBlinkFormStoreColumnsButton } from './components/formStore/OneBlinkFormStoreColumnsButton'\nexport { default as OneBlinkFormStoreDownloadButton } from './components/formStore/OneBlinkFormStoreDownloadButton'\nexport { default as OneBlinkFormStoreRefreshButton } from './components/formStore/OneBlinkFormStoreRefreshButton'\nexport { default as OneBlinkFormStoreTable } from './components/formStore/OneBlinkFormStoreTable'\n\nexport { default as useIsMounted } from './hooks/useIsMounted'\nexport { default as useBooleanState } from './hooks/useBooleanState'\nexport { default as useNullableState } from './hooks/useNullableState'\nexport { default as useClickOutsideElement } from './hooks/useClickOutsideElement'\nexport {\n  default as useIsOffline,\n  IsOfflineContextProvider,\n} from './hooks/useIsOffline'\nexport { default as useLogin, UseLoginValue } from './hooks/useLogin'\nexport { default as useSignUp } from './hooks/useSignUp'\nexport {\n  default as useAuth,\n  AuthContextProvider,\n  AuthContextValue,\n} from './hooks/useAuth'\nexport {\n  default as usePendingSubmissions,\n  PendingSubmissionsContextProvider,\n  PendingSubmissionsContextValue,\n} from './hooks/usePendingSubmissions'\nexport {\n  default as useDrafts,\n  DraftsContextProvider,\n  DraftsContextValue,\n} from './hooks/useDrafts'\nexport {\n  default as useLoadDataState,\n  LoadDataState,\n} from './hooks/useLoadDataState'\nexport { default as useLoadResourcesState } from './hooks/useLoadResourcesState'\nexport { default as useLoadDataEffect } from './hooks/useLoadDataEffect'\nexport { default as useFormSubmissionState } from './hooks/useFormSubmissionState'\nexport { default as useFormSubmissionAutoSaveState } from './hooks/useFormSubmissionAutoSaveState'\nexport { default as useGoogleJsApiLoader } from './hooks/useGoogleJsApiLoader'\n\nexport { default as ProgressBar } from './components/renderer/ProgressBar'\nexport { default as PaymentReceipt } from './PaymentReceipt'\nexport { default as PaymentForm } from './components/payments/PaymentForm'\n\nexport { default as CalendarBookingsForm } from './components/calendar-bookings/CalendarBookingsForm'\nexport { default as CalendarBookingsRescheduleForm } from './components/calendar-bookings/CalendarBookingsReschedulingForm'\nexport { default as CalendarBookingsCancelForm } from './components/calendar-bookings/CalendarBookingsCancelForm'\n\nexport { default as MultiFactorAuthentication } from './components/mfa/MultiFactorAuthentication'\n\nexport {\n  default as useMfa,\n  MfaProvider,\n  useUserMeetsMfaRequirement,\n} from './hooks/useMfa'\n\nexport { default as DownloadableFiles } from './components/downloadable-files'\n\nexport {\n  default as ImageCropper,\n  getAspectRatio,\n  generateCroppedImageBlob,\n  PercentCrop,\n} from './components/ImageCropper'\n\nexport * from './types/form'\n"]}

package/dist/styles/camera.scss

@@ -41,6 +41,7 @@
   justify-content: center;
   background: $white;
   padding: $size-4;
+  min-height: 0%;
 }
 
 .ob-annotation__content {
@@ -112,4 +113,17 @@
   height: 100%;
   display: flex;
   flex-direction: column;
+
+  .ob-cropper__cropper-full-height {
+    height: 100%;
+  }
+  .ob-cropper__cropper {
+    .ReactCrop__child-wrapper {
+      height: 100%;
+
+      .ob-cropper__image {
+        max-height: 100%;
+      }
+    }
+  }
 }

package/dist/styles.css

@@ -8148,6 +8148,7 @@ button on-loading {
   justify-content: center;
   background: hsl(0, 0%, 100%);
   padding: 1.5rem;
+  min-height: 0%;
 }
 
 .ob-annotation__content {
@@ -8208,6 +8209,15 @@ button on-loading {
   display: flex;
   flex-direction: column;
 }
+.ob-cropper__container .ob-cropper__cropper-full-height {
+  height: 100%;
+}
+.ob-cropper__container .ob-cropper__cropper .ReactCrop__child-wrapper {
+  height: 100%;
+}
+.ob-cropper__container .ob-cropper__cropper .ReactCrop__child-wrapper .ob-cropper__image {
+  max-height: 100%;
+}
 
 .ob-quill-content > * {
   cursor: text;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oneblink/apps-react",
   "description": "Helper functions for OneBlink apps in ReactJS.",
-  "version": "8.12.0-beta.4",
+  "version": "8.12.0-beta.6",
   "author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
   "bugs": {
     "url": "https://github.com/oneblink/apps-react/issues"
@@ -11,7 +11,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@nylas/react": "^1.3.1",
-    "@oneblink/sdk-core": "^8.9.0-beta.1",
+    "@oneblink/sdk-core": "^8.9.0-beta.2",
     "@react-google-maps/api": "2.19.2",
     "blueimp-load-image": "^5.16.0",
     "bulma": "^0.9.4",
@@ -32,8 +32,8 @@
     "morph-expressions": "^1.1.1",
     "qrcode.react": "^4.1.0",
     "query-string": "^8.1.0",
-    "react-easy-crop": "^5.5.0",
     "react-google-recaptcha": "^3.1.0",
+    "react-image-crop": "^11.0.10",
     "react-input-mask": "^2.0.4",
     "react-signature-canvas": "^1.0.6",
     "react-table": "^7.8.0",