argous 1.2.131 → 1.2.135

package/dist/components/ImageResize/ImageResize.js

@@ -1,472 +1,472 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var utils_1 = require("../../utils");
-var core_1 = require("@material-ui/core");
-var clsx_1 = __importDefault(require("clsx"));
-var jquery_1 = __importDefault(require("jquery"));
-var react_1 = __importStar(require("react"));
-var md_1 = require("react-icons/md");
-var useStyles = core_1.makeStyles(({
-    component: {
-        position: 'relative',
-        background: 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAAHmWi9wAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMBJREFUeNpinDFjemBgIAMaePv2zX8MwMSADdBKFCCAGF++fIEuBHQEYb3UFAIIIOwBQWzQEOvVwaMOIICwBDoWRZjRQKaNo4rorQgggBiBCVpISJiBGoCJgXpg1KxRs0aiWQABxPj79+93795SbhAwUxNVLo+G/ahZo2aNmjVq1qhZI8wsgADt1zERADAMAsD6t5B4bRHRgeGj4I8FctKPM3ObLp6fk7w1eSwsLCwsLCwsLCwsrE5WvrHdrTLF8wBDaPAHu14WwgAAAABJRU5ErkJggg==") repeat center center',
-        padding: '4em',
-        height: function (_a) {
-            var _b = _a.height, height = _b === void 0 ? 300 : _b;
-            return "calc(" + height + "px + 200px)";
-        },
-        border: '3px solid #49708A',
-        maxWidth: function (_a) {
-            var _b = _a.width, width = _b === void 0 ? 300 : _b;
-            return "calc(" + width + "px + 600px)";
-        },
-        overflow: 'hidden',
-        margin: '0 auto',
-    },
-    overlay: {
-        position: 'absolute',
-        left: function (_a) {
-            var _b = _a.width, width = _b === void 0 ? 300 : _b;
-            return "calc(50% - " + (width - 300) / 2 + "px)";
-        },
-        top: function (_a) {
-            var _b = _a.height, height = _b === void 0 ? 300 : _b;
-            return "calc(50% - " + (height - 300) / 2 + "px)";
-        },
-        marginLeft: '-150px',
-        marginTop: '-150px',
-        zIndex: 999,
-        width: function (_a) {
-            var width = _a.width;
-            return width !== null && width !== void 0 ? width : '300px';
-        },
-        height: function (_a) {
-            var height = _a.height;
-            return height !== null && height !== void 0 ? height : '300px';
-        },
-        border: 'solid 2px rgba(222,60,80,.9)',
-        borderRadius: function (_a) {
-            var borderRadius = _a.borderRadius;
-            return borderRadius !== null && borderRadius !== void 0 ? borderRadius : '50%';
-        },
-        boxSizing: 'content-box',
-        pointerEvents: 'none',
-    },
-    resizeContainer: {
-        position: 'relative',
-        display: 'inline-block',
-        cursor: 'move',
-        margin: '0 auto',
-        '&:hover, &:active': {
-            outline: '2px dashed rgba(222,60,80,.9)'
-        }
-    },
-    resizeHandle: {
-        position: 'absolute',
-        display: 'block',
-        width: '10px',
-        height: '10px',
-        background: 'rgba(222,60,80,.9)',
-        zIndex: 999,
-    },
-    resizeHandleNw: {
-        top: '-5px',
-        left: '-5px',
-        cursor: 'nw-resize',
-    },
-    resizeHandleSw: {
-        bottom: '-5px',
-        left: '-5px',
-        cursor: 'sw-resize',
-    },
-    resizeHandleNe: {
-        top: '-5px',
-        right: '-5px',
-        cursor: 'ne-resize',
-    },
-    resizeHandleSe: {
-        bottom: '-5px',
-        right: '-5px',
-        cursor: 'se-resize',
-    }
-}));
-var DEFAULT_OPTIONS = [
-    {
-        name: 'Brilho',
-        property: 'brightness',
-        value: 100,
-        range: {
-            min: 0,
-            max: 200
-        },
-        unit: '%'
-    },
-    {
-        name: 'Contraste',
-        property: 'contrast',
-        value: 100,
-        range: {
-            min: 0,
-            max: 200
-        },
-        unit: '%'
-    },
-    {
-        name: 'Saturação',
-        property: 'saturate',
-        value: 100,
-        range: {
-            min: 0,
-            max: 200
-        },
-        unit: '%'
-    },
-    {
-        name: 'Escala de Cinza',
-        property: 'grayscale',
-        value: 0,
-        range: {
-            min: 0,
-            max: 100
-        },
-        unit: '%'
-    },
-    {
-        name: 'Sépia',
-        property: 'sepia',
-        value: 0,
-        range: {
-            min: 0,
-            max: 100
-        },
-        unit: '%'
-    },
-    {
-        name: 'Rotacionar Tonalidade',
-        property: 'hue-rotate',
-        value: 0,
-        range: {
-            min: 0,
-            max: 360
-        },
-        unit: 'deg'
-    },
-    {
-        name: 'Embaçar',
-        property: 'blur',
-        value: 0,
-        range: {
-            min: 0,
-            max: 20
-        },
-        unit: 'px',
-        step: 0.1
-    },
-    {
-        name: 'Inverter',
-        property: 'invert',
-        value: 0,
-        range: {
-            min: 0,
-            max: 100
-        },
-        unit: '%',
-        step: 100
-    },
-];
-var ImageResize = function (_a) {
-    var imagem = _a.imagem, onImage = _a.onImage, _b = _a.finalImageProperties, finalImageProperties = _b === void 0 ? {} : _b, props = __rest(_a, ["imagem", "onImage", "finalImageProperties"]);
-    var classes = useStyles(finalImageProperties);
-    var _c = react_1.useState(undefined), urlImagem = _c[0], setUrlImagem = _c[1];
-    var _d = react_1.useState(undefined), key = _d[0], setKey = _d[1];
-    var image = react_1.useRef();
-    var button = react_1.useRef();
-    react_1.useEffect(function () {
-        setKey(Math.floor((Math.random() * 10000) + 1));
-    }, []);
-    utils_1.useUpdateEffect(function () {
-        if (!imagem || !key)
-            return;
-        var src = window.URL.createObjectURL(imagem);
-        setUrlImagem(src);
-        resizeableImage(image.current, src);
-    }, [imagem, key]);
-    var resizeableImage = function (imageTarget, src) {
-        // Some variable and settings
-        var $container, eventState = {}, constrain = false, minWidth = jquery_1.default("#overlay_" + key).width(), minHeight = jquery_1.default("#overlay_" + key).height(), origSrc = new Image(), resizeCanvas = document.createElement('canvas'), resized = false;
-        var init = function () {
-            // When resizing, we will always use this copy of the original as the base
-            origSrc.src = src;
-            // Assign the container to a variable
-            $container = jquery_1.default(imageTarget).parent("#container_" + key);
-            // Add events
-            $container.on('mousedown touchstart', ".resize-handle_" + key, startResize);
-            $container.on('mousedown touchstart', "#resizeImage_" + key, startMoving);
-            jquery_1.default("#js-crop_" + key).on('click', crop);
-            // button.addEventListener('click', crop)
-            // button.onclick = crop
-        };
-        var startResize = function (e) {
-            e.preventDefault();
-            e.stopPropagation();
-            saveEventState(e);
-            jquery_1.default(document).on('mousemove touchmove', resizing);
-            jquery_1.default(document).on('mouseup touchend', endResize);
-        };
-        var endResize = function (e) {
-            e.preventDefault();
-            jquery_1.default(document).off('mouseup touchend', endResize);
-            jquery_1.default(document).off('mousemove touchmove', resizing);
-        };
-        var saveEventState = function (e) {
-            var _a, _b;
-            // Save the initial event details and container state
-            eventState.container_width = $container.width();
-            eventState.container_height = $container.height();
-            eventState.container_left = $container.offset().left;
-            eventState.container_top = $container.offset().top;
-            eventState.mouse_x = (e.clientX || e.pageX || ((_a = e.originalEvent.touches) === null || _a === void 0 ? void 0 : _a.at(0).clientX)) + jquery_1.default(window).scrollLeft();
-            eventState.mouse_y = (e.clientY || e.pageY || ((_b = e.originalEvent.touches) === null || _b === void 0 ? void 0 : _b.at(0).clientY)) + jquery_1.default(window).scrollTop();
-            // This is a fix for mobile safari
-            // For some reason it does not allow a direct copy of the touches property
-            if (typeof e.originalEvent.touches !== 'undefined') {
-                eventState.touches = [];
-                jquery_1.default.each(e.originalEvent.touches, function (i, ob) {
-                    eventState.touches[i] = {};
-                    eventState.touches[i].clientX = 0 + ob.clientX;
-                    eventState.touches[i].clientY = 0 + ob.clientY;
-                });
-            }
-            eventState.evnt = e;
-        };
-        var resizing = function (e) {
-            var _a, _b;
-            var mouse = {}, width, height, left, top;
-            mouse.x = (e.clientX || e.pageX || ((_a = e.originalEvent.touches) === null || _a === void 0 ? void 0 : _a.at(0).clientX)) + jquery_1.default(window).scrollLeft();
-            mouse.y = (e.clientY || e.pageY || ((_b = e.originalEvent.touches) === null || _b === void 0 ? void 0 : _b.at(0).clientY)) + jquery_1.default(window).scrollTop();
-            // Position image differently depending on the corner dragged and constraints
-            if (eventState.evnt.target.id === "resizeHandleSe_" + key) {
-                width = mouse.x - eventState.container_left;
-                height = mouse.y - eventState.container_top;
-                left = eventState.container_left;
-                top = eventState.container_top;
-            }
-            else if (eventState.evnt.target.id === "resizeHandleSw_" + key) {
-                width = eventState.container_width - (mouse.x - eventState.container_left);
-                height = mouse.y - eventState.container_top;
-                left = mouse.x;
-                top = eventState.container_top;
-            }
-            else if (eventState.evnt.target.id === "resizeHandleNw_" + key) {
-                width = eventState.container_width - (mouse.x - eventState.container_left);
-                height = eventState.container_height - (mouse.y - eventState.container_top);
-                left = mouse.x;
-                top = mouse.y;
-                if (constrain || !e.shiftKey) {
-                    top = mouse.y - ((width / origSrc.width * origSrc.height) - height);
-                }
-            }
-            else if (eventState.evnt.target.id === "resizeHandleNe_" + key) {
-                width = mouse.x - eventState.container_left;
-                height = eventState.container_height - (mouse.y - eventState.container_top);
-                left = eventState.container_left;
-                top = mouse.y;
-                if (constrain || !e.shiftKey) {
-                    top = mouse.y - ((width / origSrc.width * origSrc.height) - height);
-                }
-            }
-            // Optionally maintain aspect ratio
-            if (constrain || !e.shiftKey) {
-                height = width / origSrc.width * origSrc.height;
-            }
-            if (width > minWidth && height > minHeight) {
-                // To improve performance you might limit how often resizeImage() is called
-                resizeImage(width, height);
-                //detecção de colisao para impedir q imagem saia do quadro
-                var wantedLeft = left;
-                var wantedTop = top;
-                var wantedMinLeft = wantedLeft + $container.width();
-                var wantedMinTop = wantedTop + $container.height();
-                var maxLeft = jquery_1.default("#overlay_" + key).offset().left;
-                var maxTop = jquery_1.default("#overlay_" + key).offset().top;
-                var minLeft = maxLeft + jquery_1.default("#overlay_" + key).width();
-                var minTop = maxTop + jquery_1.default("#overlay_" + key).height();
-                var finalLeft = wantedLeft > maxLeft ? maxLeft : wantedMinLeft < minLeft ? minLeft - $container.width() : wantedLeft;
-                var finalTop = wantedTop > maxTop ? maxTop : wantedMinTop < minTop ? minTop - $container.height() : wantedTop;
-                $container.offset({
-                    'left': finalLeft,
-                    'top': finalTop
-                });
-            }
-        };
-        var resizeImage = function (width, height) {
-            resizeCanvas.width = width;
-            resizeCanvas.height = height;
-            resizeCanvas.getContext('2d').drawImage(origSrc, 0, 0, width, height);
-            // setUrlImagem(resizeCanvas.toDataURL('image/png'))
-            jquery_1.default(imageTarget).attr('src', resizeCanvas.toDataURL('image/png'));
-            resized = true;
-        };
-        var startMoving = function (e) {
-            e.preventDefault();
-            e.stopPropagation();
-            saveEventState(e);
-            jquery_1.default(document).on('mousemove touchmove', moving);
-            jquery_1.default(document).on('mouseup touchend', endMoving);
-        };
-        var endMoving = function (e) {
-            e.preventDefault();
-            jquery_1.default(document).off('mouseup touchend', endMoving);
-            jquery_1.default(document).off('mousemove touchmove', moving);
-        };
-        var moving = function (e) {
-            var _a, _b, _c, _d, _e, _f;
-            var mouse = {}, touches;
-            e.preventDefault();
-            e.stopPropagation();
-            touches = e.originalEvent.touches;
-            mouse.x = (e.clientX || e.pageX || (touches === null || touches === void 0 ? void 0 : touches.at(0).clientX)) + jquery_1.default(window).scrollLeft();
-            mouse.y = (e.clientY || e.pageY || (touches === null || touches === void 0 ? void 0 : touches.at(0).clientY)) + jquery_1.default(window).scrollTop();
-            //detecção de colisao para impedir q imagem saia do quadro
-            var wantedLeft = mouse.x - (eventState.mouse_x - eventState.container_left);
-            var wantedTop = mouse.y - (eventState.mouse_y - eventState.container_top);
-            var wantedMinLeft = wantedLeft + $container.width();
-            var wantedMinTop = wantedTop + $container.height();
-            var maxLeft = jquery_1.default("#overlay_" + key).offset().left;
-            var maxTop = jquery_1.default("#overlay_" + key).offset().top;
-            var minLeft = maxLeft + jquery_1.default("#overlay_" + key).width();
-            var minTop = maxTop + jquery_1.default("#overlay_" + key).height();
-            var finalLeft = wantedLeft > maxLeft ? maxLeft : wantedMinLeft < minLeft ? minLeft - $container.width() : wantedLeft;
-            var finalTop = wantedTop > maxTop ? maxTop : wantedMinTop < minTop ? minTop - $container.height() : wantedTop;
-            $container.offset({
-                'left': finalLeft,
-                'top': finalTop
-            });
-            // Watch for pinch zoom gesture while moving
-            if (eventState.touches && eventState.touches.length > 1 && touches.length > 1) {
-                var width = eventState.container_width, height = eventState.container_height;
-                var a = ((_a = eventState.touches) === null || _a === void 0 ? void 0 : _a.at(0).clientX) - ((_b = eventState.touches) === null || _b === void 0 ? void 0 : _b.at(1).clientX);
-                a = a * a;
-                var b = ((_c = eventState.touches) === null || _c === void 0 ? void 0 : _c.at(0).clientY) - ((_d = eventState.touches) === null || _d === void 0 ? void 0 : _d.at(1).clientY);
-                b = b * b;
-                var dist1 = Math.sqrt(a + b);
-                a = ((_e = e.originalEvent.touches) === null || _e === void 0 ? void 0 : _e.at(0).clientX) - (touches === null || touches === void 0 ? void 0 : touches.at(1).clientX);
-                a = a * a;
-                b = ((_f = e.originalEvent.touches) === null || _f === void 0 ? void 0 : _f.at(0).clientY) - (touches === null || touches === void 0 ? void 0 : touches.at(1).clientY);
-                b = b * b;
-                var dist2 = Math.sqrt(a + b);
-                var ratio = dist2 / dist1;
-                width = width * ratio;
-                height = height * ratio;
-                // To improve performance you might limit how often resizeImage() is called
-                resizeImage(width, height);
-            }
-        };
-        var crop = function () {
-            //hack para a imagem ficar certa no caso de nao ter sido redimensionada
-            if (!resized) {
-                var _a = imageTarget.getBoundingClientRect(), width = _a.width, height = _a.height;
-                resizeImage(width, height);
-            }
-            setTimeout(function () {
-                //Find the part of the image that is inside the crop box
-                var cropCanvas, left = jquery_1.default("#overlay_" + key).offset().left - $container.offset().left, top = jquery_1.default("#overlay_" + key).offset().top - $container.offset().top, width = jquery_1.default("#overlay_" + key).width(), height = jquery_1.default("#overlay_" + key).height();
-                cropCanvas = document.createElement('canvas');
-                cropCanvas.width = width;
-                cropCanvas.height = height;
-                var ctx = cropCanvas.getContext('2d');
-                ctx.filter = jquery_1.default("#resizeImage_" + key).css('filter');
-                ctx.drawImage(imageTarget, left, top, width, height, 0, 0, width, height);
-                // window.open(cropCanvas.toDataURL('image/png'));
-                onImage(cropCanvas.toDataURL('image/png'));
-            }, 0);
-        };
-        init();
-    };
-    var _e = react_1.useState(0), selectedOptionIndex = _e[0], setSelectedOptionIndex = _e[1];
-    var _f = react_1.useState(DEFAULT_OPTIONS), options = _f[0], setOptions = _f[1];
-    var selectedOption = options[selectedOptionIndex];
-    function handleSliderChange(_, value) {
-        setOptions(function (prevOptions) {
-            return prevOptions.map(function (option, index) {
-                if (index !== selectedOptionIndex)
-                    return option;
-                return __assign(__assign({}, option), { value: value });
-            });
-        });
-    }
-    var getImageStyle = function (onlyFilters) {
-        if (onlyFilters === void 0) { onlyFilters = false; }
-        var filters = options.map(function (option) { return option.property + "(" + option.value + option.unit + ")"; }).join(' ');
-        return onlyFilters ? filters : { filter: filters };
-    };
-    return react_1.default.createElement(core_1.Dialog, __assign({}, props, { maxWidth: 'lg', fullWidth: true, keepMounted: true }),
-        react_1.default.createElement(core_1.DialogTitle, null, "Ajustar Imagem"),
-        react_1.default.createElement(core_1.DialogContent, { style: { display: 'block', position: 'relative' } },
-            react_1.default.createElement(core_1.Grid, { container: true, spacing: 2 },
-                react_1.default.createElement(core_1.Grid, { item: true, xs: 8 },
-                    react_1.default.createElement("div", { className: classes.component },
-                        react_1.default.createElement("div", { id: "overlay_" + key, className: classes.overlay }),
-                        react_1.default.createElement("div", { id: "container_" + key, className: classes.resizeContainer },
-                            react_1.default.createElement("span", { id: "resizeHandleNw_" + key, className: clsx_1.default("resize-handle_" + key, classes.resizeHandle, classes.resizeHandleNw) }),
-                            react_1.default.createElement("span", { id: "resizeHandleNe_" + key, className: clsx_1.default("resize-handle_" + key, classes.resizeHandle, classes.resizeHandleNe) }),
-                            react_1.default.createElement("img", { ref: image, id: "resizeImage_" + key, style: __assign({ display: 'block', minWidth: jquery_1.default("#overlay_" + key).width(), minHeight: jquery_1.default("#overlay_" + key).height() }, getImageStyle()), src: urlImagem, alt: 'Imagem a ser Redimensionada' }),
-                            react_1.default.createElement("span", { id: "resizeHandleSw_" + key, className: clsx_1.default("resize-handle_" + key, classes.resizeHandle, classes.resizeHandleSw) }),
-                            react_1.default.createElement("span", { id: "resizeHandleSe_" + key, className: clsx_1.default("resize-handle_" + key, classes.resizeHandle, classes.resizeHandleSe) })))),
-                react_1.default.createElement(core_1.Grid, { item: true, xs: 2, style: { display: 'flex', alignItems: 'center' } },
-                    react_1.default.createElement(core_1.Slider, { style: { height: 'calc(100% - 30px)' }, orientation: 'vertical', 
-                        // getAriaValueText={valuetext}
-                        step: selectedOption.step, min: selectedOption.range.min, max: selectedOption.range.max, value: selectedOption.value, onChange: handleSliderChange })),
-                react_1.default.createElement(core_1.Grid, { item: true, xs: 2 },
-                    react_1.default.createElement(core_1.List, null, options.map(function (option, index) { return (react_1.default.createElement(core_1.ListItem, { button: true, onClick: function () { return setSelectedOptionIndex(index); }, key: index, selected: index === selectedOptionIndex },
-                        react_1.default.createElement(core_1.ListItemText, { primary: option.name }))); }))))),
-        react_1.default.createElement(core_1.DialogActions, null,
-            react_1.default.createElement(core_1.Button, { ref: button, id: "js-crop_" + key, color: 'primary', variant: 'contained' },
-                "Recortar",
-                react_1.default.createElement(md_1.MdCrop, { style: { marginLeft: 5 } }))));
-};
-exports.default = ImageResize;
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var utils_1 = require("../../utils");
+var core_1 = require("@material-ui/core");
+var clsx_1 = __importDefault(require("clsx"));
+var jquery_1 = __importDefault(require("jquery"));
+var react_1 = __importStar(require("react"));
+var md_1 = require("react-icons/md");
+var useStyles = core_1.makeStyles(({
+    component: {
+        position: 'relative',
+        background: 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAAHmWi9wAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMBJREFUeNpinDFjemBgIAMaePv2zX8MwMSADdBKFCCAGF++fIEuBHQEYb3UFAIIIOwBQWzQEOvVwaMOIICwBDoWRZjRQKaNo4rorQgggBiBCVpISJiBGoCJgXpg1KxRs0aiWQABxPj79+93795SbhAwUxNVLo+G/ahZo2aNmjVq1qhZI8wsgADt1zERADAMAsD6t5B4bRHRgeGj4I8FctKPM3ObLp6fk7w1eSwsLCwsLCwsLCwsrE5WvrHdrTLF8wBDaPAHu14WwgAAAABJRU5ErkJggg==") repeat center center',
+        padding: '4em',
+        height: function (_a) {
+            var _b = _a.height, height = _b === void 0 ? 300 : _b;
+            return "calc(" + height + "px + 200px)";
+        },
+        border: '3px solid #49708A',
+        maxWidth: function (_a) {
+            var _b = _a.width, width = _b === void 0 ? 300 : _b;
+            return "calc(" + width + "px + 600px)";
+        },
+        overflow: 'hidden',
+        margin: '0 auto',
+    },
+    overlay: {
+        position: 'absolute',
+        left: function (_a) {
+            var _b = _a.width, width = _b === void 0 ? 300 : _b;
+            return "calc(50% - " + (width - 300) / 2 + "px)";
+        },
+        top: function (_a) {
+            var _b = _a.height, height = _b === void 0 ? 300 : _b;
+            return "calc(50% - " + (height - 300) / 2 + "px)";
+        },
+        marginLeft: '-150px',
+        marginTop: '-150px',
+        zIndex: 999,
+        width: function (_a) {
+            var width = _a.width;
+            return width !== null && width !== void 0 ? width : '300px';
+        },
+        height: function (_a) {
+            var height = _a.height;
+            return height !== null && height !== void 0 ? height : '300px';
+        },
+        border: 'solid 2px rgba(222,60,80,.9)',
+        borderRadius: function (_a) {
+            var borderRadius = _a.borderRadius;
+            return borderRadius !== null && borderRadius !== void 0 ? borderRadius : '50%';
+        },
+        boxSizing: 'content-box',
+        pointerEvents: 'none',
+    },
+    resizeContainer: {
+        position: 'relative',
+        display: 'inline-block',
+        cursor: 'move',
+        margin: '0 auto',
+        '&:hover, &:active': {
+            outline: '2px dashed rgba(222,60,80,.9)'
+        }
+    },
+    resizeHandle: {
+        position: 'absolute',
+        display: 'block',
+        width: '10px',
+        height: '10px',
+        background: 'rgba(222,60,80,.9)',
+        zIndex: 999,
+    },
+    resizeHandleNw: {
+        top: '-5px',
+        left: '-5px',
+        cursor: 'nw-resize',
+    },
+    resizeHandleSw: {
+        bottom: '-5px',
+        left: '-5px',
+        cursor: 'sw-resize',
+    },
+    resizeHandleNe: {
+        top: '-5px',
+        right: '-5px',
+        cursor: 'ne-resize',
+    },
+    resizeHandleSe: {
+        bottom: '-5px',
+        right: '-5px',
+        cursor: 'se-resize',
+    }
+}));
+var DEFAULT_OPTIONS = [
+    {
+        name: 'Brilho',
+        property: 'brightness',
+        value: 100,
+        range: {
+            min: 0,
+            max: 200
+        },
+        unit: '%'
+    },
+    {
+        name: 'Contraste',
+        property: 'contrast',
+        value: 100,
+        range: {
+            min: 0,
+            max: 200
+        },
+        unit: '%'
+    },
+    {
+        name: 'Saturação',
+        property: 'saturate',
+        value: 100,
+        range: {
+            min: 0,
+            max: 200
+        },
+        unit: '%'
+    },
+    {
+        name: 'Escala de Cinza',
+        property: 'grayscale',
+        value: 0,
+        range: {
+            min: 0,
+            max: 100
+        },
+        unit: '%'
+    },
+    {
+        name: 'Sépia',
+        property: 'sepia',
+        value: 0,
+        range: {
+            min: 0,
+            max: 100
+        },
+        unit: '%'
+    },
+    {
+        name: 'Rotacionar Tonalidade',
+        property: 'hue-rotate',
+        value: 0,
+        range: {
+            min: 0,
+            max: 360
+        },
+        unit: 'deg'
+    },
+    {
+        name: 'Embaçar',
+        property: 'blur',
+        value: 0,
+        range: {
+            min: 0,
+            max: 20
+        },
+        unit: 'px',
+        step: 0.1
+    },
+    {
+        name: 'Inverter',
+        property: 'invert',
+        value: 0,
+        range: {
+            min: 0,
+            max: 100
+        },
+        unit: '%',
+        step: 100
+    },
+];
+var ImageResize = function (_a) {
+    var imagem = _a.imagem, onImage = _a.onImage, _b = _a.finalImageProperties, finalImageProperties = _b === void 0 ? {} : _b, props = __rest(_a, ["imagem", "onImage", "finalImageProperties"]);
+    var classes = useStyles(finalImageProperties);
+    var _c = react_1.useState(undefined), urlImagem = _c[0], setUrlImagem = _c[1];
+    var _d = react_1.useState(undefined), key = _d[0], setKey = _d[1];
+    var image = react_1.useRef();
+    var button = react_1.useRef();
+    react_1.useEffect(function () {
+        setKey(Math.floor((Math.random() * 10000) + 1));
+    }, []);
+    utils_1.useUpdateEffect(function () {
+        if (!imagem || !key)
+            return;
+        var src = window.URL.createObjectURL(imagem);
+        setUrlImagem(src);
+        resizeableImage(image.current, src);
+    }, [imagem, key]);
+    var resizeableImage = function (imageTarget, src) {
+        // Some variable and settings
+        var $container, eventState = {}, constrain = false, minWidth = jquery_1.default("#overlay_" + key).width(), minHeight = jquery_1.default("#overlay_" + key).height(), origSrc = new Image(), resizeCanvas = document.createElement('canvas'), resized = false;
+        var init = function () {
+            // When resizing, we will always use this copy of the original as the base
+            origSrc.src = src;
+            // Assign the container to a variable
+            $container = jquery_1.default(imageTarget).parent("#container_" + key);
+            // Add events
+            $container.on('mousedown touchstart', ".resize-handle_" + key, startResize);
+            $container.on('mousedown touchstart', "#resizeImage_" + key, startMoving);
+            jquery_1.default("#js-crop_" + key).on('click', crop);
+            // button.addEventListener('click', crop)
+            // button.onclick = crop
+        };
+        var startResize = function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            saveEventState(e);
+            jquery_1.default(document).on('mousemove touchmove', resizing);
+            jquery_1.default(document).on('mouseup touchend', endResize);
+        };
+        var endResize = function (e) {
+            e.preventDefault();
+            jquery_1.default(document).off('mouseup touchend', endResize);
+            jquery_1.default(document).off('mousemove touchmove', resizing);
+        };
+        var saveEventState = function (e) {
+            var _a, _b;
+            // Save the initial event details and container state
+            eventState.container_width = $container.width();
+            eventState.container_height = $container.height();
+            eventState.container_left = $container.offset().left;
+            eventState.container_top = $container.offset().top;
+            eventState.mouse_x = (e.clientX || e.pageX || ((_a = e.originalEvent.touches) === null || _a === void 0 ? void 0 : _a.at(0).clientX)) + jquery_1.default(window).scrollLeft();
+            eventState.mouse_y = (e.clientY || e.pageY || ((_b = e.originalEvent.touches) === null || _b === void 0 ? void 0 : _b.at(0).clientY)) + jquery_1.default(window).scrollTop();
+            // This is a fix for mobile safari
+            // For some reason it does not allow a direct copy of the touches property
+            if (typeof e.originalEvent.touches !== 'undefined') {
+                eventState.touches = [];
+                jquery_1.default.each(e.originalEvent.touches, function (i, ob) {
+                    eventState.touches[i] = {};
+                    eventState.touches[i].clientX = 0 + ob.clientX;
+                    eventState.touches[i].clientY = 0 + ob.clientY;
+                });
+            }
+            eventState.evnt = e;
+        };
+        var resizing = function (e) {
+            var _a, _b;
+            var mouse = {}, width, height, left, top;
+            mouse.x = (e.clientX || e.pageX || ((_a = e.originalEvent.touches) === null || _a === void 0 ? void 0 : _a.at(0).clientX)) + jquery_1.default(window).scrollLeft();
+            mouse.y = (e.clientY || e.pageY || ((_b = e.originalEvent.touches) === null || _b === void 0 ? void 0 : _b.at(0).clientY)) + jquery_1.default(window).scrollTop();
+            // Position image differently depending on the corner dragged and constraints
+            if (eventState.evnt.target.id === "resizeHandleSe_" + key) {
+                width = mouse.x - eventState.container_left;
+                height = mouse.y - eventState.container_top;
+                left = eventState.container_left;
+                top = eventState.container_top;
+            }
+            else if (eventState.evnt.target.id === "resizeHandleSw_" + key) {
+                width = eventState.container_width - (mouse.x - eventState.container_left);
+                height = mouse.y - eventState.container_top;
+                left = mouse.x;
+                top = eventState.container_top;
+            }
+            else if (eventState.evnt.target.id === "resizeHandleNw_" + key) {
+                width = eventState.container_width - (mouse.x - eventState.container_left);
+                height = eventState.container_height - (mouse.y - eventState.container_top);
+                left = mouse.x;
+                top = mouse.y;
+                if (constrain || !e.shiftKey) {
+                    top = mouse.y - ((width / origSrc.width * origSrc.height) - height);
+                }
+            }
+            else if (eventState.evnt.target.id === "resizeHandleNe_" + key) {
+                width = mouse.x - eventState.container_left;
+                height = eventState.container_height - (mouse.y - eventState.container_top);
+                left = eventState.container_left;
+                top = mouse.y;
+                if (constrain || !e.shiftKey) {
+                    top = mouse.y - ((width / origSrc.width * origSrc.height) - height);
+                }
+            }
+            // Optionally maintain aspect ratio
+            if (constrain || !e.shiftKey) {
+                height = width / origSrc.width * origSrc.height;
+            }
+            if (width > minWidth && height > minHeight) {
+                // To improve performance you might limit how often resizeImage() is called
+                resizeImage(width, height);
+                //detecção de colisao para impedir q imagem saia do quadro
+                var wantedLeft = left;
+                var wantedTop = top;
+                var wantedMinLeft = wantedLeft + $container.width();
+                var wantedMinTop = wantedTop + $container.height();
+                var maxLeft = jquery_1.default("#overlay_" + key).offset().left;
+                var maxTop = jquery_1.default("#overlay_" + key).offset().top;
+                var minLeft = maxLeft + jquery_1.default("#overlay_" + key).width();
+                var minTop = maxTop + jquery_1.default("#overlay_" + key).height();
+                var finalLeft = wantedLeft > maxLeft ? maxLeft : wantedMinLeft < minLeft ? minLeft - $container.width() : wantedLeft;
+                var finalTop = wantedTop > maxTop ? maxTop : wantedMinTop < minTop ? minTop - $container.height() : wantedTop;
+                $container.offset({
+                    'left': finalLeft,
+                    'top': finalTop
+                });
+            }
+        };
+        var resizeImage = function (width, height) {
+            resizeCanvas.width = width;
+            resizeCanvas.height = height;
+            resizeCanvas.getContext('2d').drawImage(origSrc, 0, 0, width, height);
+            // setUrlImagem(resizeCanvas.toDataURL('image/png'))
+            jquery_1.default(imageTarget).attr('src', resizeCanvas.toDataURL('image/png'));
+            resized = true;
+        };
+        var startMoving = function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            saveEventState(e);
+            jquery_1.default(document).on('mousemove touchmove', moving);
+            jquery_1.default(document).on('mouseup touchend', endMoving);
+        };
+        var endMoving = function (e) {
+            e.preventDefault();
+            jquery_1.default(document).off('mouseup touchend', endMoving);
+            jquery_1.default(document).off('mousemove touchmove', moving);
+        };
+        var moving = function (e) {
+            var _a, _b, _c, _d, _e, _f;
+            var mouse = {}, touches;
+            e.preventDefault();
+            e.stopPropagation();
+            touches = e.originalEvent.touches;
+            mouse.x = (e.clientX || e.pageX || (touches === null || touches === void 0 ? void 0 : touches.at(0).clientX)) + jquery_1.default(window).scrollLeft();
+            mouse.y = (e.clientY || e.pageY || (touches === null || touches === void 0 ? void 0 : touches.at(0).clientY)) + jquery_1.default(window).scrollTop();
+            //detecção de colisao para impedir q imagem saia do quadro
+            var wantedLeft = mouse.x - (eventState.mouse_x - eventState.container_left);
+            var wantedTop = mouse.y - (eventState.mouse_y - eventState.container_top);
+            var wantedMinLeft = wantedLeft + $container.width();
+            var wantedMinTop = wantedTop + $container.height();
+            var maxLeft = jquery_1.default("#overlay_" + key).offset().left;
+            var maxTop = jquery_1.default("#overlay_" + key).offset().top;
+            var minLeft = maxLeft + jquery_1.default("#overlay_" + key).width();
+            var minTop = maxTop + jquery_1.default("#overlay_" + key).height();
+            var finalLeft = wantedLeft > maxLeft ? maxLeft : wantedMinLeft < minLeft ? minLeft - $container.width() : wantedLeft;
+            var finalTop = wantedTop > maxTop ? maxTop : wantedMinTop < minTop ? minTop - $container.height() : wantedTop;
+            $container.offset({
+                'left': finalLeft,
+                'top': finalTop
+            });
+            // Watch for pinch zoom gesture while moving
+            if (eventState.touches && eventState.touches.length > 1 && touches.length > 1) {
+                var width = eventState.container_width, height = eventState.container_height;
+                var a = ((_a = eventState.touches) === null || _a === void 0 ? void 0 : _a.at(0).clientX) - ((_b = eventState.touches) === null || _b === void 0 ? void 0 : _b.at(1).clientX);
+                a = a * a;
+                var b = ((_c = eventState.touches) === null || _c === void 0 ? void 0 : _c.at(0).clientY) - ((_d = eventState.touches) === null || _d === void 0 ? void 0 : _d.at(1).clientY);
+                b = b * b;
+                var dist1 = Math.sqrt(a + b);
+                a = ((_e = e.originalEvent.touches) === null || _e === void 0 ? void 0 : _e.at(0).clientX) - (touches === null || touches === void 0 ? void 0 : touches.at(1).clientX);
+                a = a * a;
+                b = ((_f = e.originalEvent.touches) === null || _f === void 0 ? void 0 : _f.at(0).clientY) - (touches === null || touches === void 0 ? void 0 : touches.at(1).clientY);
+                b = b * b;
+                var dist2 = Math.sqrt(a + b);
+                var ratio = dist2 / dist1;
+                width = width * ratio;
+                height = height * ratio;
+                // To improve performance you might limit how often resizeImage() is called
+                resizeImage(width, height);
+            }
+        };
+        var crop = function () {
+            //hack para a imagem ficar certa no caso de nao ter sido redimensionada
+            if (!resized) {
+                var _a = imageTarget.getBoundingClientRect(), width = _a.width, height = _a.height;
+                resizeImage(width, height);
+            }
+            setTimeout(function () {
+                //Find the part of the image that is inside the crop box
+                var cropCanvas, left = jquery_1.default("#overlay_" + key).offset().left - $container.offset().left, top = jquery_1.default("#overlay_" + key).offset().top - $container.offset().top, width = jquery_1.default("#overlay_" + key).width(), height = jquery_1.default("#overlay_" + key).height();
+                cropCanvas = document.createElement('canvas');
+                cropCanvas.width = width;
+                cropCanvas.height = height;
+                var ctx = cropCanvas.getContext('2d');
+                ctx.filter = jquery_1.default("#resizeImage_" + key).css('filter');
+                ctx.drawImage(imageTarget, left, top, width, height, 0, 0, width, height);
+                // window.open(cropCanvas.toDataURL('image/png'));
+                onImage(cropCanvas.toDataURL('image/png'));
+            }, 0);
+        };
+        init();
+    };
+    var _e = react_1.useState(0), selectedOptionIndex = _e[0], setSelectedOptionIndex = _e[1];
+    var _f = react_1.useState(DEFAULT_OPTIONS), options = _f[0], setOptions = _f[1];
+    var selectedOption = options[selectedOptionIndex];
+    function handleSliderChange(_, value) {
+        setOptions(function (prevOptions) {
+            return prevOptions.map(function (option, index) {
+                if (index !== selectedOptionIndex)
+                    return option;
+                return __assign(__assign({}, option), { value: value });
+            });
+        });
+    }
+    var getImageStyle = function (onlyFilters) {
+        if (onlyFilters === void 0) { onlyFilters = false; }
+        var filters = options.map(function (option) { return option.property + "(" + option.value + option.unit + ")"; }).join(' ');
+        return onlyFilters ? filters : { filter: filters };
+    };
+    return react_1.default.createElement(core_1.Dialog, __assign({}, props, { maxWidth: 'lg', fullWidth: true, keepMounted: true }),
+        react_1.default.createElement(core_1.DialogTitle, null, "Ajustar Imagem"),
+        react_1.default.createElement(core_1.DialogContent, { style: { display: 'block', position: 'relative' } },
+            react_1.default.createElement(core_1.Grid, { container: true, spacing: 2 },
+                react_1.default.createElement(core_1.Grid, { item: true, xs: 8 },
+                    react_1.default.createElement("div", { className: classes.component },
+                        react_1.default.createElement("div", { id: "overlay_" + key, className: classes.overlay }),
+                        react_1.default.createElement("div", { id: "container_" + key, className: classes.resizeContainer },
+                            react_1.default.createElement("span", { id: "resizeHandleNw_" + key, className: clsx_1.default("resize-handle_" + key, classes.resizeHandle, classes.resizeHandleNw) }),
+                            react_1.default.createElement("span", { id: "resizeHandleNe_" + key, className: clsx_1.default("resize-handle_" + key, classes.resizeHandle, classes.resizeHandleNe) }),
+                            react_1.default.createElement("img", { ref: image, id: "resizeImage_" + key, style: __assign({ display: 'block', minWidth: jquery_1.default("#overlay_" + key).width(), minHeight: jquery_1.default("#overlay_" + key).height() }, getImageStyle()), src: urlImagem, alt: 'Imagem a ser Redimensionada' }),
+                            react_1.default.createElement("span", { id: "resizeHandleSw_" + key, className: clsx_1.default("resize-handle_" + key, classes.resizeHandle, classes.resizeHandleSw) }),
+                            react_1.default.createElement("span", { id: "resizeHandleSe_" + key, className: clsx_1.default("resize-handle_" + key, classes.resizeHandle, classes.resizeHandleSe) })))),
+                react_1.default.createElement(core_1.Grid, { item: true, xs: 2, style: { display: 'flex', alignItems: 'center' } },
+                    react_1.default.createElement(core_1.Slider, { style: { height: 'calc(100% - 30px)' }, orientation: 'vertical', 
+                        // getAriaValueText={valuetext}
+                        step: selectedOption.step, min: selectedOption.range.min, max: selectedOption.range.max, value: selectedOption.value, onChange: handleSliderChange })),
+                react_1.default.createElement(core_1.Grid, { item: true, xs: 2 },
+                    react_1.default.createElement(core_1.List, null, options.map(function (option, index) { return (react_1.default.createElement(core_1.ListItem, { button: true, onClick: function () { return setSelectedOptionIndex(index); }, key: index, selected: index === selectedOptionIndex },
+                        react_1.default.createElement(core_1.ListItemText, { primary: option.name }))); }))))),
+        react_1.default.createElement(core_1.DialogActions, null,
+            react_1.default.createElement(core_1.Button, { ref: button, id: "js-crop_" + key, color: 'primary', variant: 'contained' },
+                "Recortar",
+                react_1.default.createElement(md_1.MdCrop, { style: { marginLeft: 5 } }))));
+};
+exports.default = ImageResize;