nzk-react-components 0.3.6 → 0.4.1

package/dist/components/DrawingTool/DrawingTool.js

@@ -1,315 +0,0 @@
-'use strict';
-
-var tslib = require('tslib');
-var React = require('react');
-var polished = require('polished');
-var Moveable = require('react-moveable');
-var MoveableHelper = require('moveable-helper');
-var ReactTooltip = require('react-tooltip');
-var DrawingTool_styles = require('./DrawingTool.styles.js');
-var useDebounce = require('../../hooks/useDebounce.js');
-var useElementSize = require('../../hooks/useElementSize.js');
-var Button = require('../Button/Button.js');
-var Icon = require('../Icon/Icon.js');
-var IconButton = require('../IconButton/IconButton.js');
-var ColourToolbar = require('./components/ColourToolbar/ColourToolbar.js');
-var Modal = require('../Modal/Modal.js');
-var DrawingToolProvider = require('./DrawingToolProvider.js');
-var ImageInputPopup = require('./components/ImageInputPopup/ImageInputPopup.js');
-var index = require('./components/Placeable/index.js');
-var OpacityToggle = require('./components/OpacityToggle/OpacityToggle.js');
-var Header = require('./components/Header/Header.js');
-var CropChoicePopup = require('./components/CropChoicePopup/CropChoicePopup.js');
-var ManualCropPopup = require('./components/ManualCropPopup/ManualCropPopup.js');
-var MagicCropPopup = require('./components/MagicCropPopup/MagicCropPopup.js');
-var Loader = require('./components/Loader.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var Moveable__default = /*#__PURE__*/_interopDefaultLegacy(Moveable);
-var MoveableHelper__default = /*#__PURE__*/_interopDefaultLegacy(MoveableHelper);
-var ReactTooltip__default = /*#__PURE__*/_interopDefaultLegacy(ReactTooltip);
-
-var Drawing = function (props) {
-    var _a, _b;
-    var containerRef = React.useRef(null);
-    var sketchOuterRef = React.useRef(null);
-    var sketchInnerRef = React.useRef(null);
-    var sketchCutInnerRef = React.useRef(null);
-    var imageToPlaceContainerRef = React.useRef(null);
-    var moveableRef = React.useRef(null);
-    var helper = React.useState(function () {
-        return new MoveableHelper__default['default']();
-    })[0];
-    var _c = useElementSize(containerRef), containerWidth = _c.width, containerHeight = _c.height;
-    var debouncedContainerWidth = useDebounce(containerWidth, 1000);
-    var debouncedContainerHeight = useDebounce(containerHeight, 1000);
-    var _d = React.useState('LANDSCAPE'), orientation = _d[0], setOrientation = _d[1];
-    var _e = React.useState(1280), maxContainerWidth = _e[0], setMaxContainerWidth = _e[1];
-    var _f = React.useState(960), maxContainerHeight = _f[0], setMaxContainerHeight = _f[1];
-    var _g = React.useState(50), buttonSize = _g[0], setButtonSize = _g[1];
-    var _h = React.useState(false), isMobile = _h[0], setIsMobile = _h[1];
-    var _j = React.useState(true), resizing = _j[0], setResizing = _j[1];
-    var _k = React.useState(false), showRestartConfirmPopup = _k[0], setShowRestartConfirmPopup = _k[1];
-    var _l = React.useState(props.openUploadPopupOnStart), showImageInputPopup = _l[0], setShowImageInputPopup = _l[1];
-    var _m = React.useState(false), showCropChoicePopup = _m[0], setShowCropChoicePopup = _m[1];
-    var _o = React.useState(false), showMagicCropPopup = _o[0], setShowMagicCropPopup = _o[1];
-    var _p = React.useState(false), showManualCropPopup = _p[0], setShowManualCropPopup = _p[1];
-    var _q = React.useState(false), showManualCropTool = _q[0], setShowManualCropTool = _q[1];
-    var _r = React.useState(false), showSaveCropAction = _r[0], setShowSaveCropAction = _r[1];
-    var _s = DrawingToolProvider.useDrawingTool(), initSketch = _s.initSketch, initSketchCut = _s.initSketchCut, sketchLoading = _s.sketchLoading, exportSketchCut = _s.exportSketchCut, currentColour = _s.currentColour, brushSize = _s.brushSize, setBrushSize = _s.setBrushSize, brushType = _s.brushType, setBrushType = _s.setBrushType, undo = _s.undo, redo = _s.redo, restart = _s.restart, setCacheKey = _s.setCacheKey, setAutoCache = _s.setAutoCache, resetCut = _s.resetCut, mergeImage = _s.mergeImage, imageToCrop = _s.imageToCrop, setImageToCrop = _s.setImageToCrop, imageToPlace = _s.imageToPlace, setImageToPlace = _s.setImageToPlace;
-    React.useEffect(function () {
-        if (typeof props.disableAutoCache === 'boolean') {
-            setAutoCache(!props.disableAutoCache);
-        }
-        if (props.cacheKey)
-            setCacheKey(props.cacheKey);
-    }, []);
-    React.useLayoutEffect(function () {
-        if (debouncedContainerHeight !== containerHeight || debouncedContainerWidth !== containerWidth) {
-            setResizing(true);
-        }
-        else if (containerWidth > 0 && containerHeight > 0) {
-            setResizing(false);
-            if (containerWidth < 768) {
-                setIsMobile(true);
-            }
-            else {
-                setIsMobile(false);
-            }
-        }
-    }, [debouncedContainerWidth, debouncedContainerHeight, containerWidth, containerHeight]);
-    React.useLayoutEffect(function () {
-        setMaxContainerHeight(containerWidth * 1.4);
-        setMaxContainerWidth(containerHeight * 1.4);
-        if (containerWidth < containerHeight && containerWidth < 1024) {
-            setButtonSize(Math.floor(containerWidth / 11) * 0.85);
-            setOrientation('PORTRAIT');
-        }
-        else {
-            if (containerHeight < 420) {
-                setButtonSize(Math.floor(containerHeight / 13) * 0.85);
-            }
-            else if (containerHeight < 1024) {
-                setButtonSize(Math.floor(containerHeight / 12) * 0.85);
-            }
-            else {
-                setButtonSize(Math.floor(containerHeight / 11) * 0.85);
-            }
-            setOrientation('LANDSCAPE');
-        }
-    }, [containerWidth, containerHeight]);
-    React.useEffect(function () {
-        if (!showManualCropTool && !resizing && sketchInnerRef.current) {
-            initSketch(sketchInnerRef.current);
-        }
-    }, [resizing, sketchInnerRef, imageToCrop, showManualCropTool]);
-    React.useEffect(function () {
-        if (!resizing && sketchCutInnerRef.current && imageToCrop && showManualCropTool) {
-            initSketchCut(sketchCutInnerRef.current, imageToCrop, function () {
-                setShowSaveCropAction(true);
-            });
-        }
-    }, [resizing, sketchCutInnerRef, imageToCrop, showManualCropTool]);
-    var onClickRestart = function () {
-        setShowRestartConfirmPopup(true);
-    };
-    var onClickCamera = function () {
-        setShowImageInputPopup(true);
-    };
-    var getImageToPlaceSize = function (img) {
-        var ratio = 0.8;
-        if (img.width <= containerWidth * ratio && img.height <= containerHeight * ratio) {
-            return { width: img.width, height: img.height };
-        }
-        var scale = Math.min(1, Math.min(containerWidth / img.width, containerHeight / img.height)) * ratio;
-        return {
-            width: img.width * scale,
-            height: img.height * scale
-        };
-    };
-    var strokeBrushColour = polished.getLuminance(currentColour.hex) > 0.05 ? polished.darken(0.15, currentColour.hex) : polished.lighten(0.1, currentColour.hex);
-    var deselectedButtonColourProps = {
-        theme: 'white'
-    };
-    var selectedButtonColourProps = {
-        backgroundColor: currentColour.hex,
-        strokeColor: strokeBrushColour,
-        dropShadowColor: 'rgba(0,0,0,.3)',
-        shadowColor: 'rgba(0,0,0,.5)'
-    };
-    var eraserBrushColourProps = (brushType === 'eraser' ? selectedButtonColourProps : deselectedButtonColourProps);
-    var fillBrushColourProps = (brushType === 'fill' ? selectedButtonColourProps : deselectedButtonColourProps);
-    var lineBrushColourProps = (brushType === 'line' ? selectedButtonColourProps : deselectedButtonColourProps);
-    var smallLineColourProps = (brushSize === DrawingToolProvider.BrushSize.small ? selectedButtonColourProps : deselectedButtonColourProps);
-    var mediumLineColourProps = (brushSize === DrawingToolProvider.BrushSize.medium ? selectedButtonColourProps : deselectedButtonColourProps);
-    var largeLineColourProps = (brushSize === DrawingToolProvider.BrushSize.large ? selectedButtonColourProps : deselectedButtonColourProps);
-    var sketchStyles;
-    if (!resizing && sketchOuterRef && sketchOuterRef.current) {
-        sketchStyles = {
-            width: sketchOuterRef.current.offsetWidth + "px",
-            height: sketchOuterRef.current.offsetHeight + "px",
-            position: 'absolute',
-            top: '0px',
-            left: '0px'
-        };
-    }
-    var disableToolbars = (showImageInputPopup || showRestartConfirmPopup || imageToCrop || imageToPlace);
-    var inSketchActions = [];
-    if (showSaveCropAction) {
-        inSketchActions.push({
-            key: 'retry-cut',
-            component: React__default['default'].createElement(IconButton, { icon: React__default['default'].createElement(Icon, { name: "drawing-tool-undo", fill: "white" }), theme: 'orange', size: isMobile ? "small" : "regular", onClick: function () {
-                    setShowSaveCropAction(false);
-                    setShowManualCropPopup(true);
-                    resetCut();
-                } }, "Retry")
-        }, {
-            key: 'save-cut',
-            component: React__default['default'].createElement(IconButton, { icon: React__default['default'].createElement(Icon, { name: "tick" }), theme: 'confirm', size: isMobile ? "small" : "regular", onClick: function () {
-                    setShowSaveCropAction(false);
-                    setShowManualCropTool(false);
-                    setImageToCrop(undefined);
-                    var newImage = new Image;
-                    newImage.onload = function () {
-                        setImageToPlace(newImage);
-                    };
-                    newImage.src = exportSketchCut();
-                } }, "Save")
-        });
-    }
-    else if (imageToPlace) {
-        inSketchActions.push({
-            key: 'cancel-place',
-            component: React__default['default'].createElement(IconButton, { icon: React__default['default'].createElement(Icon, { name: "close" }), theme: 'red', size: isMobile ? "small" : "regular", onClick: function () {
-                    setImageToPlace(undefined);
-                } }, "Cancel")
-        }, {
-            key: 'save-place',
-            component: React__default['default'].createElement(IconButton, { icon: React__default['default'].createElement(Icon, { name: "tick" }), theme: 'confirm', size: isMobile ? "small" : "regular", onClick: function () {
-                    if (moveableRef.current) {
-                        var rect = moveableRef.current.getRect();
-                        mergeImage({
-                            image: imageToPlace,
-                            x: rect.left,
-                            y: rect.top,
-                            origin: rect.origin,
-                            width: Math.hypot(rect.pos2[0] - rect.pos1[0], rect.pos2[1] - rect.pos1[1]),
-                            height: Math.hypot(rect.pos3[0] - rect.pos2[0], rect.pos3[1] - rect.pos2[1]),
-                            rotation: rect.rotation
-                        });
-                        setImageToPlace(undefined);
-                    }
-                } }, "Save")
-        });
-    }
-    var headerHeight = 90;
-    if (containerHeight < 800 || containerWidth < 728)
-        headerHeight = 70;
-    if (containerHeight < 500 || containerWidth < 500)
-        headerHeight = 50;
-    return React__default['default'].createElement(DrawingTool_styles.Container, { ref: containerRef, maxWidth: maxContainerWidth, maxHeight: maxContainerHeight },
-        props.showHeader && React__default['default'].createElement(Header, { height: headerHeight, prompt: props.prompt, onBack: props.onBack, onSave: props.onSave }),
-        React__default['default'].createElement(DrawingTool_styles.Tool, { hasHeader: props.showHeader, headerHeight: headerHeight, orientation: orientation },
-            React__default['default'].createElement(ReactTooltip__default['default'], { effect: "solid", delayShow: 750, multiline: true }),
-            React__default['default'].createElement(DrawingTool_styles.LeftToolbarContainer, { orientation: orientation, buttonSize: buttonSize, disabled: disableToolbars },
-                React__default['default'].createElement(DrawingTool_styles.ButtonGroup, { orientation: orientation, buttonSize: buttonSize },
-                    React__default['default'].createElement(Button, { "data-tip": "Start again?", height: buttonSize, round: true, theme: 'red', onClick: onClickRestart },
-                        React__default['default'].createElement(Icon, { name: 'trash-white' }))),
-                React__default['default'].createElement(DrawingTool_styles.ButtonGroup, { orientation: orientation, buttonSize: buttonSize },
-                    React__default['default'].createElement(Button, { height: buttonSize, round: true, theme: "white", onClick: undo },
-                        React__default['default'].createElement(Icon, { fill: currentColour.hex, name: 'drawing-tool-undo' })),
-                    React__default['default'].createElement(Button, { height: buttonSize, round: true, theme: "white", onClick: redo },
-                        React__default['default'].createElement(Icon, { fill: currentColour.hex, name: 'drawing-tool-redo' }))),
-                !props.disableCameraUpload && React__default['default'].createElement(DrawingTool_styles.ButtonGroup, { orientation: orientation, buttonSize: buttonSize },
-                    React__default['default'].createElement(Button, { "data-tip": "Upload a drawing", height: buttonSize, round: true, theme: 'purple', onClick: onClickCamera },
-                        React__default['default'].createElement(Icon, { name: 'drawing-tool-camera' }))),
-                React__default['default'].createElement(DrawingTool_styles.ButtonGroup, { orientation: orientation, buttonSize: buttonSize },
-                    React__default['default'].createElement(Button, tslib.__assign({ height: buttonSize, round: true }, eraserBrushColourProps, { onClick: function () { return setBrushType('eraser'); } }),
-                        React__default['default'].createElement(Icon, { "data-tip": "Eraser", fill: brushType === 'eraser' ? 'white' : currentColour.hex, name: 'drawing-tool-eraser' })),
-                    React__default['default'].createElement(Button, tslib.__assign({ "data-tip": "Fill brush", height: buttonSize, round: true }, fillBrushColourProps, { onClick: function () { return setBrushType('fill'); } }),
-                        React__default['default'].createElement(Icon, { fill: brushType === 'fill' ? 'white' : currentColour.hex, name: 'drawing-tool-fill-brush' })),
-                    React__default['default'].createElement(Button, tslib.__assign({ "data-tip": "Line brush", height: buttonSize, round: true }, lineBrushColourProps, { onClick: function () { return setBrushType('line'); } }),
-                        React__default['default'].createElement(Icon, { fill: brushType === 'line' ? 'white' : currentColour.hex, name: 'drawing-tool-line-brush' })),
-                    React__default['default'].createElement(Button, tslib.__assign({ height: buttonSize, round: true }, smallLineColourProps, { onClick: function () { return setBrushSize(DrawingToolProvider.BrushSize.small); } }),
-                        React__default['default'].createElement(Icon, { fill: brushSize === DrawingToolProvider.BrushSize.small ? 'white' : currentColour.hex, name: 'drawing-tool-small-line' })),
-                    React__default['default'].createElement(Button, tslib.__assign({ height: buttonSize, round: true }, mediumLineColourProps, { onClick: function () { return setBrushSize(DrawingToolProvider.BrushSize.medium); } }),
-                        React__default['default'].createElement(Icon, { fill: brushSize === DrawingToolProvider.BrushSize.medium ? 'white' : currentColour.hex, name: 'drawing-tool-medium-line' })),
-                    React__default['default'].createElement(Button, tslib.__assign({ height: buttonSize, round: true }, largeLineColourProps, { onClick: function () { return setBrushSize(DrawingToolProvider.BrushSize.large); } }),
-                        React__default['default'].createElement(Icon, { fill: brushSize === DrawingToolProvider.BrushSize.large ? 'white' : currentColour.hex, name: 'drawing-tool-large-line' })))),
-            React__default['default'].createElement(DrawingTool_styles.SketchContainer, { orientation: orientation, ref: sketchOuterRef },
-                props.showPaperBackground && React__default['default'].createElement(DrawingTool_styles.PaperBackground, { cutMode: imageToCrop && true }),
-                !showManualCropTool && sketchStyles && React__default['default'].createElement("div", { style: sketchStyles, ref: sketchInnerRef }),
-                showManualCropTool && imageToCrop && sketchStyles && React__default['default'].createElement("div", { style: sketchStyles, ref: sketchCutInnerRef }),
-                imageToPlace && sketchStyles && (React__default['default'].createElement("div", { style: tslib.__assign(tslib.__assign({}, sketchStyles), { zIndex: '101' }) },
-                    React__default['default'].createElement(DrawingTool_styles.ImageToPlaceContainer, null,
-                        React__default['default'].createElement(DrawingTool_styles.ImageToPlace, { size: getImageToPlaceSize(imageToPlace), ref: imageToPlaceContainerRef, src: imageToPlace.src })),
-                    React__default['default'].createElement(Moveable__default['default'], { ref: moveableRef, target: imageToPlaceContainerRef, ables: [index], props: {
-                            placeable: true,
-                        }, snappable: true, bounds: { left: 0, top: 0, bottom: (_a = sketchOuterRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight, right: (_b = sketchOuterRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth }, draggable: true, scalable: true, keepRatio: true, rotatable: true, onDragStart: helper.onDragStart, onDrag: helper.onDrag, onScaleStart: helper.onScaleStart, onScale: helper.onScale, onRotateStart: helper.onRotateStart, onRotate: helper.onRotate }))),
-                sketchLoading && React__default['default'].createElement(DrawingTool_styles.LoaderOverlay, null,
-                    React__default['default'].createElement(Loader, { placeholder: "Loading drawing...", color: 'white' })),
-                inSketchActions.length && (React__default['default'].createElement(DrawingTool_styles.InSketchActions, null, inSketchActions.map(function (action) { return (React__default['default'].createElement(DrawingTool_styles.InSketchAction, { key: action.key }, action.component)); })))),
-            React__default['default'].createElement(DrawingTool_styles.RightToolbarContainer, { orientation: orientation, buttonSize: buttonSize, disabled: disableToolbars },
-                React__default['default'].createElement(ColourToolbar, { orientation: orientation, size: buttonSize, currentColour: currentColour }),
-                React__default['default'].createElement(OpacityToggle, { orientation: orientation, buttonSize: buttonSize }))),
-        showRestartConfirmPopup && React__default['default'].createElement(DrawingTool_styles.ModalOverlay, null,
-            React__default['default'].createElement(Modal, { title: "Are you sure?", actions: [
-                    React__default['default'].createElement(Button, { key: 'cancel', size: isMobile ? "small" : "regular", theme: "red", onClick: function () {
-                            setShowRestartConfirmPopup(false);
-                        } }, "No"),
-                    React__default['default'].createElement(Button, { key: 'confirm', size: isMobile ? "small" : "regular", theme: "confirm", onClick: function () {
-                            restart();
-                            setShowRestartConfirmPopup(false);
-                        } }, "Yes"),
-                ] })),
-        showImageInputPopup && React__default['default'].createElement(ImageInputPopup, { isMobile: isMobile, onDismiss: function () { return setShowImageInputPopup(false); }, minImageSize: props.minImageUploadSize, onImageSelected: function () {
-                setShowImageInputPopup(false);
-                if (props.enableMagicCrop) {
-                    setShowCropChoicePopup(true);
-                }
-                else {
-                    setShowManualCropTool(true);
-                    setShowManualCropPopup(true);
-                }
-            } }),
-        showCropChoicePopup && React__default['default'].createElement(CropChoicePopup, { onDismiss: function () {
-                setShowCropChoicePopup(false);
-                setImageToCrop(undefined);
-            }, onMagicCrop: function () {
-                setShowCropChoicePopup(false);
-                setShowMagicCropPopup(true);
-            }, onManualCrop: function () {
-                setShowCropChoicePopup(false);
-                setShowManualCropPopup(true);
-                setShowManualCropTool(true);
-            } }),
-        showMagicCropPopup && props.magicCropUploadPreset && React__default['default'].createElement(MagicCropPopup, { cloudinaryUploadPreset: props.magicCropUploadPreset, onManual: function () {
-                setShowMagicCropPopup(false);
-                setShowManualCropPopup(true);
-                setShowManualCropTool(true);
-            }, onDismiss: function () {
-                setImageToCrop(undefined);
-                setShowMagicCropPopup(false);
-            } }),
-        showManualCropPopup && React__default['default'].createElement(ManualCropPopup, { onNext: function () { return setShowManualCropPopup(false); }, onDismiss: function () {
-                setShowManualCropPopup(false);
-                setImageToCrop(undefined);
-            } }));
-};
-Drawing.defaultProps = {
-    prompt: 'Draw your Animal',
-    showHeader: true,
-    onBack: function () { },
-    onSave: function () { },
-    showPaperBackground: true,
-    disableCameraUpload: false,
-    disableAutoCache: false,
-    cacheKey: 'nzk-sketch-cache',
-    openUploadPopupOnStart: false,
-    enableMagicCrop: false
-};
-
-module.exports = Drawing;
-//# sourceMappingURL=DrawingTool.js.map

package/dist/components/DrawingTool/DrawingTool.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DrawingTool.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/DrawingTool/DrawingTool.styles.d.ts

@@ -1,47 +0,0 @@
-import { Orientation } from './DrawingTool';
-export declare const Container: import("styled-components").StyledComponent<"div", any, {
-    maxWidth: number;
-    maxHeight: number;
-}, never>;
-export declare const Tool: import("styled-components").StyledComponent<"div", any, {
-    orientation: Orientation;
-    hasHeader: boolean;
-    headerHeight: number;
-}, never>;
-export declare const ButtonGroup: import("styled-components").StyledComponent<"div", any, {
-    orientation: Orientation;
-    buttonSize: number;
-}, never>;
-export declare const ColourButtonGroup: import("styled-components").StyledComponent<"div", any, {
-    orientation: Orientation;
-    buttonSize: number;
-}, never>;
-export declare const ScrollableColours: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LeftToolbarContainer: import("styled-components").StyledComponent<"div", any, {
-    orientation: Orientation;
-    buttonSize: number;
-    disabled: boolean;
-}, never>;
-export declare const RightToolbarContainer: import("styled-components").StyledComponent<"div", any, {
-    orientation: Orientation;
-    buttonSize: number;
-    disabled: boolean;
-}, never>;
-export declare const SketchContainer: import("styled-components").StyledComponent<"div", any, {
-    orientation: Orientation;
-}, never>;
-export declare const PaperBackground: import("styled-components").StyledComponent<"div", any, {
-    cutMode?: boolean | undefined;
-}, never>;
-export declare const InSketchActions: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InSketchAction: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ModalOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ImageToPlaceContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ImageToPlace: import("styled-components").StyledComponent<"img", any, {
-    size: {
-        width: number;
-        height: number;
-    };
-}, never>;
-export declare const CutImageTutorial: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LoaderOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/DrawingTool/DrawingTool.styles.js

@@ -1,55 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var styled = require('styled-components');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var getToolbarWidth = function (props) {
-    if (props.orientation === 'PORTRAIT')
-        return '100%';
-    return props.buttonSize + 10 + "px";
-};
-var getToolbarHeight = function (props) {
-    if (props.orientation === 'LANDSCAPE')
-        return '100%';
-    return props.buttonSize + 10 + "px";
-};
-var Container = styled__default['default'].div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  position: relative;\n  width: calc(100% - 40px);\n  height: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: ", "px;\n  max-height: ", "px;\n  * {\n    box-sizing: border-box;\n  }\n"], ["\n  position: relative;\n  width: calc(100% - 40px);\n  height: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: ", "px;\n  max-height: ", "px;\n  * {\n    box-sizing: border-box;\n  }\n"])), function (props) { return props.maxWidth; }, function (props) { return props.maxHeight; });
-var Tool = styled__default['default'].div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: ", "px;\n  height: ", ";\n  width: 100%;\n  display: flex;\n  flex-shrink: none;\n  flex-direction: ", ";\n"], ["\n  position: absolute;\n  top: ", "px;\n  height: ", ";\n  width: 100%;\n  display: flex;\n  flex-shrink: none;\n  flex-direction: ", ";\n"])), function (props) { return props.hasHeader ? props.headerHeight : 0; }, function (props) { return props.hasHeader ? "calc(100% - " + (props.headerHeight + 20) + "px)" : 'calc(100% - 20px)'; }, function (props) { return props.orientation === 'LANDSCAPE' ? 'row' : 'column'; });
-var ButtonGroup = styled__default['default'].div(templateObject_3 || (templateObject_3 = tslib.__makeTemplateObject(["\n  display: flex;\n  flex-shrink: none;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  > div {\n    user-select: none;\n    margin-bottom: ", ";\n    margin-right: ", ";\n  }\n"], ["\n  display: flex;\n  flex-shrink: none;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  > div {\n    user-select: none;\n    margin-bottom: ", ";\n    margin-right: ", ";\n  }\n"])), function (props) { return props.orientation === 'LANDSCAPE' ? Math.floor(props.buttonSize / 5) + "px" : 0; }, function (props) { return props.orientation === 'PORTRAIT' ? Math.floor(props.buttonSize / 5) + "px" : 0; });
-styled__default['default'].div(templateObject_4 || (templateObject_4 = tslib.__makeTemplateObject(["\n  background-color: rgba(255, 255, 255, .5);\n  border-radius: ", "px;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  padding-left: ", ";\n  padding-right: ", ";\n  display: flex;\n  height: 70%;\n  flex-wrap: ", ";\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  > div {\n    margin-bottom: ", ";\n    margin-right: ", ";\n  }\n"], ["\n  background-color: rgba(255, 255, 255, .5);\n  border-radius: ", "px;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  padding-left: ", ";\n  padding-right: ", ";\n  display: flex;\n  height: 70%;\n  flex-wrap: ", ";\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  > div {\n    margin-bottom: ", ";\n    margin-right: ", ";\n  }\n"])), function (props) { return props.buttonSize; }, function (props) { return props.orientation === 'PORTRAIT' ? '8px' : 0; }, function (props) { return props.orientation === 'PORTRAIT' ? '8px' : 0; }, function (props) { return props.orientation === 'LANDSCAPE' ? 'wrap' : 'no-wrap'; }, function (props) { return props.orientation === 'LANDSCAPE' ? Math.floor(props.buttonSize / 5) + "px" : 0; }, function (props) { return props.orientation === 'PORTRAIT' ? Math.floor(props.buttonSize / 5) + "px" : 0; });
-styled__default['default'].div(templateObject_5 || (templateObject_5 = tslib.__makeTemplateObject(["\n  overflow: hidden;\n"], ["\n  overflow: hidden;\n"])));
-var LeftToolbarContainer = styled__default['default'].div(templateObject_6 || (templateObject_6 = tslib.__makeTemplateObject(["\n  position: relative;\n  pointer-events: ", ";\n  opacity: ", ";\n  filter: ", ";\n  width: ", ";\n  height: ", ";\n  order: ", ";\n  display: flex;\n  flex-direction: ", ";\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  position: relative;\n  pointer-events: ", ";\n  opacity: ", ";\n  filter: ", ";\n  width: ", ";\n  height: ", ";\n  order: ", ";\n  display: flex;\n  flex-direction: ", ";\n  justify-content: space-between;\n  align-items: center;\n"])), function (props) { return props.disabled ? 'none' : 'all'; }, function (props) { return props.disabled ? 0.5 : 1; }, function (props) { return props.disabled ? 'grayscale(100%)' : 'none'; }, function (props) { return getToolbarWidth(props); }, function (props) { return getToolbarHeight(props); }, function (props) { return props.orientation === 'LANDSCAPE' ? 1 : 2; }, function (props) { return props.orientation === 'LANDSCAPE' ? 'column' : 'row'; });
-var RightToolbarContainer = styled__default['default'].div(templateObject_7 || (templateObject_7 = tslib.__makeTemplateObject(["\n  position: relative;\n  width: ", ";\n  max-height: ", ";\n  opacity: ", ";\n  pointer-events: ", ";\n  filter: ", ";\n  order: 3;\n  justify-content: space-between;\n  display: flex;\n  flex-direction: ", ";\n  margin-top: ", ";\n  align-items: center;\n"], ["\n  position: relative;\n  width: ", ";\n  max-height: ", ";\n  opacity: ", ";\n  pointer-events: ", ";\n  filter: ", ";\n  order: 3;\n  justify-content: space-between;\n  display: flex;\n  flex-direction: ", ";\n  margin-top: ", ";\n  align-items: center;\n"])), function (props) { return getToolbarWidth(props); }, function (props) { return getToolbarHeight(props); }, function (props) { return props.disabled ? 0.5 : 1; }, function (props) { return props.disabled ? 'none' : 'all'; }, function (props) { return props.disabled ? 'grayscale(100%)' : 'none'; }, function (props) { return props.orientation === 'LANDSCAPE' ? 'column' : 'row'; }, function (props) { return props.orientation === 'PORTRAIT' ? '10px' : '0px'; });
-var SketchContainer = styled__default['default'].div(templateObject_8 || (templateObject_8 = tslib.__makeTemplateObject(["\n  position: relative;\n  flex: 1 1 auto;\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  order: ", ";\n\n  .moveable-rotation .moveable-control.moveable-rotation-control {\n    border: none !important;\n    width: 24px !important;\n    height: 24px !important;\n    margin-top: -12px !important;\n    margin-left: -12px !important;\n    cursor: alias;\n    opacity: 0;\n  }\n\n  .moveable-control {\n    width: 24px !important;\n    height: 24px !important;\n    margin-top: -12px !important;\n    margin-left: -12px !important;\n    border: none !important;\n  }\n\n  .moveable-line.moveable-rotation-line {\n    width: 4px !important;\n    height: 40px !important;\n    margin-left: -1px;\n  }\n\n  .moveable-line {\n    height: 4px !important;\n  }\n\n  .moveable-origin {\n    display: none !important;\n  }\n}"], ["\n  position: relative;\n  flex: 1 1 auto;\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  order: ", ";\n\n  .moveable-rotation .moveable-control.moveable-rotation-control {\n    border: none !important;\n    width: 24px !important;\n    height: 24px !important;\n    margin-top: -12px !important;\n    margin-left: -12px !important;\n    cursor: alias;\n    opacity: 0;\n  }\n\n  .moveable-control {\n    width: 24px !important;\n    height: 24px !important;\n    margin-top: -12px !important;\n    margin-left: -12px !important;\n    border: none !important;\n  }\n\n  .moveable-line.moveable-rotation-line {\n    width: 4px !important;\n    height: 40px !important;\n    margin-left: -1px;\n  }\n\n  .moveable-line {\n    height: 4px !important;\n  }\n\n  .moveable-origin {\n    display: none !important;\n  }\n}"])), function (props) { return props.orientation === 'LANDSCAPE' ? '10px' : '0px'; }, function (props) { return props.orientation === 'LANDSCAPE' ? '20px' : '0px'; }, function (props) { return props.orientation === 'LANDSCAPE' ? '0px' : '10px'; }, function (props) { return props.orientation === 'LANDSCAPE' ? 2 : 1; });
-var PaperBackground = styled__default['default'].div(templateObject_9 || (templateObject_9 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  box-shadow: 0px 4px 0px #C7C7C6;\n  background: ", ";\n\n  &:before, &:after {\n    z-index: -1;\n    position: absolute;\n    content: \"\";\n    bottom: 7px;\n    left: 10px;\n    width: 50%;\n    top: 80%;\n    max-width: 300px;\n    background: rgba(0,0,0,.3);\n    box-shadow: 0 15px 0px rgba(0,0,0,.3);\n    transform: rotate(-3deg);\n  }\n  &:after {\n    transform: rotate(3deg);\n    right: 10px;\n    left: auto;\n  }\n"], ["\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  box-shadow: 0px 4px 0px #C7C7C6;\n  background: ", ";\n\n  &:before, &:after {\n    z-index: -1;\n    position: absolute;\n    content: \"\";\n    bottom: 7px;\n    left: 10px;\n    width: 50%;\n    top: 80%;\n    max-width: 300px;\n    background: rgba(0,0,0,.3);\n    box-shadow: 0 15px 0px rgba(0,0,0,.3);\n    transform: rotate(-3deg);\n  }\n  &:after {\n    transform: rotate(3deg);\n    right: 10px;\n    left: auto;\n  }\n"])), function (props) { return props.cutMode
-    ? 'repeating-linear-gradient(-45deg, #ebebeb, #ebebeb 20px, #dfdfdf 20px, #dfdfdf 40px)'
-    : '#ebebeb'; });
-var InSketchActions = styled__default['default'].div(templateObject_10 || (templateObject_10 = tslib.__makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  bottom: 20px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 102;\n  @media (max-width: 768px) {\n    bottom: 10px;\n  }\n  @media (max-height: 500px) {\n    bottom: 10px;\n  }\n"], ["\n  position: absolute;\n  width: 100%;\n  bottom: 20px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 102;\n  @media (max-width: 768px) {\n    bottom: 10px;\n  }\n  @media (max-height: 500px) {\n    bottom: 10px;\n  }\n"])));
-var InSketchAction = styled__default['default'].div(templateObject_11 || (templateObject_11 = tslib.__makeTemplateObject(["\n  position: relative;\n  margin-right: 20px;\n"], ["\n  position: relative;\n  margin-right: 20px;\n"])));
-var ModalOverlay = styled__default['default'].div(templateObject_12 || (templateObject_12 = tslib.__makeTemplateObject(["\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  z-index: 100;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  z-index: 100;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
-var ImageToPlaceContainer = styled__default['default'].div(templateObject_13 || (templateObject_13 = tslib.__makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 101;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 101;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}"])));
-var ImageToPlace = styled__default['default'].img(templateObject_14 || (templateObject_14 = tslib.__makeTemplateObject(["\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n}\n"], ["\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n}\n"])), function (props) { return props.size.width; }, function (props) { return props.size.height; });
-styled__default['default'].div(templateObject_15 || (templateObject_15 = tslib.__makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  left: 50%;\n  top: 50%;\n  width: 90%;\n  height: 90%;\n  transform: translate(-50%, -50%);\n  max-width: 800px;\n  max-height: 600px;\n  background-color: white;\n  z-index: 101;\n  border-radius: 50px;\n  padding: 40px;\n  background-color: #341644;\n  box-shadow: 0 -5px 0 #531D75, 0 10px 0 #1C042B, 0 14px 0 rgba(0,0,0,0.3);\n  box-sizing: border-box;\n  color: white;\n  font-size: 30px;\n  text-align: center;\n\n  @media (max-width: 960px) {\n    font-size: 24px;\n  }\n\n  @media (max-width: 760px), (max-height: 600px) {\n    font-size: 16px;\n    width: 95%;\n    padding: 30px;\n  }\n\n  img {\n    width: 100%;\n    max-width: 350px;\n    @media (max-width: 960px) {\n      max-width: 250px;\n    }\n    @media (max-width: 760px), (max-height: 600px) {\n      max-width: 120px;\n    }\n  }\n  > :last-child {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n"], ["\n  position: absolute;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  left: 50%;\n  top: 50%;\n  width: 90%;\n  height: 90%;\n  transform: translate(-50%, -50%);\n  max-width: 800px;\n  max-height: 600px;\n  background-color: white;\n  z-index: 101;\n  border-radius: 50px;\n  padding: 40px;\n  background-color: #341644;\n  box-shadow: 0 -5px 0 #531D75, 0 10px 0 #1C042B, 0 14px 0 rgba(0,0,0,0.3);\n  box-sizing: border-box;\n  color: white;\n  font-size: 30px;\n  text-align: center;\n\n  @media (max-width: 960px) {\n    font-size: 24px;\n  }\n\n  @media (max-width: 760px), (max-height: 600px) {\n    font-size: 16px;\n    width: 95%;\n    padding: 30px;\n  }\n\n  img {\n    width: 100%;\n    max-width: 350px;\n    @media (max-width: 960px) {\n      max-width: 250px;\n    }\n    @media (max-width: 760px), (max-height: 600px) {\n      max-width: 120px;\n    }\n  }\n  > :last-child {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n"])));
-var LoaderOverlay = styled__default['default'].div(templateObject_16 || (templateObject_16 = tslib.__makeTemplateObject(["\n  background-color: rgba(0,0,0,.5);\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  z-index: 10;\n  font-size: 24px;\n"], ["\n  background-color: rgba(0,0,0,.5);\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  z-index: 10;\n  font-size: 24px;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
-
-exports.ButtonGroup = ButtonGroup;
-exports.Container = Container;
-exports.ImageToPlace = ImageToPlace;
-exports.ImageToPlaceContainer = ImageToPlaceContainer;
-exports.InSketchAction = InSketchAction;
-exports.InSketchActions = InSketchActions;
-exports.LeftToolbarContainer = LeftToolbarContainer;
-exports.LoaderOverlay = LoaderOverlay;
-exports.ModalOverlay = ModalOverlay;
-exports.PaperBackground = PaperBackground;
-exports.RightToolbarContainer = RightToolbarContainer;
-exports.SketchContainer = SketchContainer;
-exports.Tool = Tool;
-//# sourceMappingURL=DrawingTool.styles.js.map

package/dist/components/DrawingTool/DrawingTool.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DrawingTool.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/DrawingTool/DrawingToolProvider.d.ts

@@ -1,57 +0,0 @@
-/// <reference types="react" />
-import { SketchActionMergeData } from './lib/SketchModel';
-export declare const BrushSize: {
-    small: number;
-    medium: number;
-    large: number;
-};
-export declare type BrushType = 'fill' | 'line' | 'eraser';
-export declare const Colours: {
-    rgb: number[];
-    hex: string;
-}[];
-export interface Colour {
-    rgb: number[];
-    hex: string;
-}
-export interface Props {
-    cache?: string;
-}
-export declare const DrawingToolProvider: import("react").ComponentType<import("unstated-next").ContainerProviderProps<Props>>;
-export declare const useDrawingTool: () => {
-    initSketch: (containerEl: any) => void;
-    initSketchCut: (containerEl: any, imageToCut: HTMLImageElement, onImageCut: () => void) => void;
-    sketchLoading: boolean;
-    exportSketch: (options?: {
-        crop: boolean;
-    }) => string;
-    exportSketchCut: () => string;
-    currentColour: {
-        rgb: number[];
-        hex: string;
-    };
-    setCurrentColour: import("react").Dispatch<import("react").SetStateAction<{
-        rgb: number[];
-        hex: string;
-    }>>;
-    brushOpacity: number;
-    setBruchOpacity: import("react").Dispatch<import("react").SetStateAction<number>>;
-    brushSize: number;
-    setBrushSize: import("react").Dispatch<import("react").SetStateAction<number>>;
-    brushType: string;
-    setBrushType: import("react").Dispatch<import("react").SetStateAction<string>>;
-    undo: () => void;
-    redo: () => void;
-    restart: () => void;
-    onSketchChange: () => void;
-    setCacheKey: import("react").Dispatch<import("react").SetStateAction<string>>;
-    setAutoCache: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    clearCache: () => void;
-    resetCut: () => void;
-    mergeImage: (data: SketchActionMergeData) => void | null;
-    exportCache: () => string | null;
-    imageToCrop: HTMLImageElement | undefined;
-    setImageToCrop: import("react").Dispatch<import("react").SetStateAction<HTMLImageElement | undefined>>;
-    imageToPlace: HTMLImageElement | undefined;
-    setImageToPlace: import("react").Dispatch<import("react").SetStateAction<HTMLImageElement | undefined>>;
-};