nzk-react-components 0.4.1 → 0.4.2-0

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

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export interface Props {
+    prompt: string;
+    showHeader: boolean;
+    onBack: () => void;
+    onSave: () => void;
+    showPaperBackground?: boolean;
+    disableCameraUpload?: boolean;
+    minImageUploadSize?: number;
+    disableAutoCache?: boolean;
+    openUploadPopupOnStart?: boolean;
+    cacheKey?: string;
+}
+export declare type Orientation = 'LANDSCAPE' | 'PORTRAIT';
+declare const Drawing: {
+    (props: Props): JSX.Element;
+    defaultProps: {
+        prompt: string;
+        showHeader: boolean;
+        onBack: () => void;
+        onSave: () => void;
+        showPaperBackground: boolean;
+        disableCameraUpload: boolean;
+        disableAutoCache: boolean;
+        cacheKey: string;
+        openUploadPopupOnStart: boolean;
+    };
+};
+export default Drawing;

package/dist/components/DrawingTool/DrawingTool.js

@@ -0,0 +1,277 @@
+'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 FileInput = require('./components/FileInput/FileInput.js');
+var index = require('./components/Placeable/index.js');
+var OpacityToggle = require('./components/OpacityToggle/OpacityToggle.js');
+var Header = require('./components/Header/Header.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), showRestartConfirmModal = _k[0], setShowRestartConfirmModal = _k[1];
+    var _l = React.useState(props.openUploadPopupOnStart), showFileInput = _l[0], setShowFileInput = _l[1];
+    var _m = React.useState(), imageToCut = _m[0], setImageToCut = _m[1];
+    var _o = React.useState(true), showCutTutorial = _o[0], setShowCutTutorial = _o[1];
+    var _p = React.useState(false), showSaveCutAction = _p[0], setShowSaveCutAction = _p[1];
+    var _q = React.useState(), imageToPlace = _q[0], setImageToPlace = _q[1];
+    var _r = DrawingToolProvider.useDrawingTool(), initSketch = _r.initSketch, initSketchCut = _r.initSketchCut, exportSketchCut = _r.exportSketchCut, currentColour = _r.currentColour, brushSize = _r.brushSize, setBrushSize = _r.setBrushSize, brushType = _r.brushType, setBrushType = _r.setBrushType, undo = _r.undo, redo = _r.redo, restart = _r.restart, setCacheKey = _r.setCacheKey, setAutoCache = _r.setAutoCache, resetCut = _r.resetCut, mergeImage = _r.mergeImage, setToolMode = _r.setToolMode;
+    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 (!imageToCut && !resizing && sketchInnerRef.current) {
+            initSketch(sketchInnerRef.current);
+        }
+    }, [resizing, sketchInnerRef, imageToCut]);
+    React.useEffect(function () {
+        if (!resizing && sketchCutInnerRef.current && imageToCut) {
+            initSketchCut(sketchCutInnerRef.current, imageToCut, function () {
+                setShowSaveCutAction(true);
+            });
+        }
+    }, [resizing, sketchCutInnerRef, imageToCut]);
+    var onClickRestart = function () {
+        setShowRestartConfirmModal(true);
+    };
+    var onClickCamera = function () {
+        setShowFileInput(true);
+    };
+    var onImageUploaded = function (image) {
+        setShowFileInput(false);
+        setImageToCut(image);
+        setToolMode("CUT");
+    };
+    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 = (showFileInput || showRestartConfirmModal || imageToCut || imageToPlace);
+    var inSketchActions = [];
+    if (showSaveCutAction) {
+        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 () {
+                    setShowSaveCutAction(false);
+                    setShowCutTutorial(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 () {
+                    setShowSaveCutAction(false);
+                    setImageToCut(undefined);
+                    var newImage = new Image;
+                    newImage.onload = function () {
+                        setImageToPlace(newImage);
+                        setToolMode('PLACE');
+                    };
+                    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);
+                    setToolMode('DRAW');
+                } }, "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
+                        });
+                        setToolMode('DRAW');
+                        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: imageToCut && true }),
+                !imageToCut && sketchStyles && React__default['default'].createElement("div", { style: sketchStyles, ref: sketchInnerRef }),
+                imageToCut && 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, { 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 }))),
+                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)); }))),
+                imageToCut && showCutTutorial && React__default['default'].createElement(DrawingTool_styles.CutImageTutorial, { onClick: function () { return setShowCutTutorial(false); } },
+                    React__default['default'].createElement("div", null, "Now cut out your animal: Click, hold and make sure you draw around it."),
+                    React__default['default'].createElement("img", { alt: "crop example", src: "https://cdn.nightzookeeper.com/nzk-assets/crop-tutorial.png" }),
+                    React__default['default'].createElement("div", null,
+                        React__default['default'].createElement(Button, { size: isMobile ? "small" : "regular", theme: "primary" }, "Ok")))),
+            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 }))),
+        showRestartConfirmModal && 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 () {
+                            setShowRestartConfirmModal(false);
+                        } }, "No"),
+                    React__default['default'].createElement(Button, { key: 'confirm', size: isMobile ? "small" : "regular", theme: "confirm", onClick: function () {
+                            restart();
+                            setShowRestartConfirmModal(false);
+                        } }, "Yes"),
+                ] })),
+        showFileInput && React__default['default'].createElement(DrawingTool_styles.ModalOverlay, null,
+            React__default['default'].createElement(FileInput, { isMobile: isMobile, dismiss: function () { return setShowFileInput(false); }, onImageUploaded: onImageUploaded, minImageSize: props.minImageUploadSize })));
+};
+Drawing.defaultProps = {
+    prompt: 'Draw your Animal',
+    showHeader: true,
+    onBack: function () { },
+    onSave: function () { },
+    showPaperBackground: true,
+    disableCameraUpload: false,
+    disableAutoCache: false,
+    cacheKey: 'nzk-sketch-cache',
+    openUploadPopupOnStart: false
+};
+
+module.exports = Drawing;
+//# sourceMappingURL=DrawingTool.js.map

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

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

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

@@ -0,0 +1,6 @@
+import { Story } from "@storybook/react";
+import { Meta } from "@storybook/react/types-6-0";
+import { Props as DrawingToolProps } from "./DrawingTool";
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<DrawingToolProps>;

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

@@ -0,0 +1,41 @@
+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, {}, never>;
+export declare const CutImageTutorial: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,54 @@
+'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: absolute;\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: absolute;\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: 80%;\n  max-width: 400px;\n  @media (max-width: 768px) {\n    max-width: 200px;\n  }\n  @media (max-height: 600px) {\n    width: auto;\n    height: 80%;\n    max-width: none;\n    max-height: 200px;\n  }\n}\n"], ["\n  position: absolute;\n  width: 80%;\n  max-width: 400px;\n  @media (max-width: 768px) {\n    max-width: 200px;\n  }\n  @media (max-height: 600px) {\n    width: auto;\n    height: 80%;\n    max-width: none;\n    max-height: 200px;\n  }\n}\n"])));
+var CutImageTutorial = 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"], ["\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"])));
+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;
+
+exports.ButtonGroup = ButtonGroup;
+exports.Container = Container;
+exports.CutImageTutorial = CutImageTutorial;
+exports.ImageToPlace = ImageToPlace;
+exports.ImageToPlaceContainer = ImageToPlaceContainer;
+exports.InSketchAction = InSketchAction;
+exports.InSketchActions = InSketchActions;
+exports.LeftToolbarContainer = LeftToolbarContainer;
+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

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

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

@@ -0,0 +1,56 @@
+/// <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;
+}
+declare type ToolMode = 'LOADING' | 'DRAW' | 'CUT' | 'PLACE';
+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;
+    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;
+    setToolMode: import("react").Dispatch<import("react").SetStateAction<ToolMode>>;
+    toolMode: ToolMode;
+    exportCache: () => string | null;
+};
+export {};