react-lasso-select 1.2.2 → 2.0.0

package/lib/index.esm.js

@@ -1,881 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise */
-
-var extendStatics = function(d, b) {
-    extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-    return extendStatics(d, b);
-};
-
-function __extends(d, b) {
-    if (typeof b !== "function" && b !== null)
-        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-    extendStatics(d, b);
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(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);
-};
-
-function __rest(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;
-}
-
-function __spreadArray(to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
-}
-
-var objectToClassName = function (obj) {
-    return Object.keys(obj)
-        .filter(function (key) { return obj[key]; })
-        .join(' ');
-};
-var arePointsEqual = function (p1, p2) { return p1.x === p2.x && p1.y === p2.y; };
-var arePointListEqual = function (arr1, arr2) {
-    if ((!arr1 && arr2) || (arr1 && !arr2) || arr1.length !== arr2.length)
-        return false;
-    return arr1.every(function (point, i) { return arePointsEqual(point, arr2[i]); });
-};
-var roundPointCoordinates = function (_a, p) {
-    var x = _a.x, y = _a.y;
-    if (p === void 0) { p = 1; }
-    return ({
-        x: Math.round((x + Number.EPSILON) * p) / p,
-        y: Math.round((y + Number.EPSILON) * p) / p
-    });
-};
-var findPointByPosition = function (points, position, r) {
-    if (r === void 0) { r = 0; }
-    var index = points.findIndex(function (point) { return Math.max(Math.abs(point.x - position.x), Math.abs(point.y - position.y)) <= r; });
-    return { point: __assign({}, (points[index] || { x: NaN, y: NaN })), index: index };
-};
-var getDistance = function (p1, p2) {
-    return Math.hypot(p2.x - p1.x, p2.y - p1.y);
-};
-var getAngle = function (p1, p2) {
-    return Math.atan2(p2.y - p1.y, p2.x - p1.x);
-};
-var approximateToAnAngleMultiplicity = function (startPoint, endPoint, minAngle) {
-    var r = getDistance(startPoint, endPoint);
-    var angle = getAngle(startPoint, endPoint);
-    var newAngle = Math.round(angle / minAngle) * minAngle;
-    return {
-        x: startPoint.x + r * Math.cos(newAngle),
-        y: startPoint.y + r * Math.sin(newAngle)
-    };
-};
-var approximateToAngles = function (startPoint, endPoint, angles) {
-    var r = getDistance(startPoint, endPoint);
-    var angle = getAngle(startPoint, endPoint);
-    var nearestAngle = angles.reduce(function (prev, now) { return (Math.abs(now - angle) < Math.abs(prev - angle) ? now : prev); }, Infinity);
-    if (nearestAngle !== Infinity) {
-        endPoint.x = startPoint.x + r * Math.cos(nearestAngle);
-        endPoint.y = startPoint.y + r * Math.sin(nearestAngle);
-    }
-    return endPoint;
-};
-var calculateAnglesBeetwenPoints = function (points) {
-    var angles = [];
-    for (var i = 1; i < points.length; i++) {
-        var alpha = Math.atan2(points[i].y - points[i - 1].y, points[i].x - points[i - 1].x);
-        var alpha2 = alpha + Math.PI;
-        angles.push(alpha, alpha2 > Math.PI ? alpha2 - 2 * Math.PI : alpha2);
-    }
-    return angles.filter(function (val, idx, arr) { return arr.indexOf(val) === idx; });
-};
-function getClippedImageCanvas(src, path, callback, crop) {
-    if (crop === void 0) { crop = true; }
-    var image = new Image();
-    image.crossOrigin = 'Anonymous';
-    var canvas = document.createElement('canvas');
-    var ctx = canvas.getContext('2d');
-    if (!ctx) {
-        return callback(new Error('CTX is null'), canvas);
-    }
-    image.onerror = function () {
-        callback(new Error('Failed to load image'), canvas);
-    };
-    image.onload = function () {
-        try {
-            canvas.width = image.naturalWidth + 2;
-            canvas.height = image.naturalHeight + 2;
-            ctx.drawImage(image, 0, 0);
-            if (path.length < 3) {
-                callback(null, canvas);
-                return;
-            }
-            ctx.beginPath();
-            ctx.moveTo(0, 0);
-            ctx.lineTo(canvas.width, 0);
-            ctx.lineTo(canvas.width, canvas.height);
-            ctx.lineTo(0, canvas.height);
-            ctx.lineTo(0, 0);
-            ctx.lineTo(path[0].x + 1, path[0].y + 1);
-            path.slice(1).forEach(function (_a) {
-                var x = _a.x, y = _a.y;
-                return ctx.lineTo(x + 1, y + 1);
-            });
-            ctx.lineTo(path[0].x + 1, path[0].y + 1);
-            ctx.lineTo(0, 0);
-            ctx.closePath();
-            ctx.clip('evenodd');
-            ctx.globalCompositeOperation = 'destination-out';
-            ctx.fill();
-            if (crop) {
-                var xAxis = path.map(function (_a) {
-                    var x = _a.x;
-                    return x + 1;
-                });
-                var yAxis = path.map(function (_a) {
-                    var y = _a.y;
-                    return y + 1;
-                });
-                var _a = [Math.min.apply(null, xAxis), Math.min.apply(null, yAxis)], minX = _a[0], minY = _a[1];
-                var _b = [Math.max.apply(null, xAxis), Math.max.apply(null, yAxis)], maxX = _b[0], maxY = _b[1];
-                var _c = [maxX - minX, maxY - minY], width = _c[0], height = _c[1];
-                var imageData = ctx.getImageData(minX, minY, width, height);
-                canvas.width = width;
-                canvas.height = height;
-                ctx.putImageData(imageData, 0, 0);
-            }
-            callback(null, canvas);
-        }
-        catch (err) {
-            callback(err instanceof Error ? err : new Error(String(err)), canvas);
-        }
-    };
-    image.src = src;
-}
-
-var SVGHelper = /** @class */ (function () {
-    function SVGHelper(getSvgElement) {
-        this.getSvgElement = getSvgElement;
-    }
-    SVGHelper.prototype.getSvg = function () {
-        var svg = this.getSvgElement();
-        if (!svg)
-            throw new Error('SVG is null');
-        return svg;
-    };
-    SVGHelper.prototype.getCTM = function () {
-        var svg = this.getSvg();
-        var ctm = svg.getCTM();
-        if (ctm === null) {
-            // https://www.w3.org/TR/SVGTiny12/coords.html#TransformMatrixDefined
-            var svgChild = svg.querySelector('rect[visibility="hidden"]');
-            ctm = svgChild.getCTM();
-        }
-        if (!ctm)
-            throw new Error('CTM is null');
-        return ctm;
-    };
-    SVGHelper.prototype.getViewboxSize = function () {
-        return this.getSvg().viewBox.baseVal;
-    };
-    SVGHelper.prototype.getRealSize = function () {
-        var svg = this.getSvg();
-        // Firefox have problems with SVGSVGElement.width.baseVal.value
-        return {
-            width: svg.clientWidth,
-            height: svg.clientHeight
-        };
-    };
-    SVGHelper.prototype.getViewboxOffset = function () {
-        var svg = this.getSvg();
-        var _a = this.getRealSize(), rWidth = _a.width, rHeight = _a.height;
-        var _b = this.getViewboxSize(), vWidth = _b.width, vHeight = _b.height;
-        var point = Object.assign(svg.createSVGPoint(), {
-            x: rWidth,
-            y: rHeight
-        });
-        var ctm = this.getCTM();
-        var _c = point.matrixTransform(ctm.inverse()), x = _c.x, y = _c.y;
-        // only for preserveAspectRatio="xMidYMid meet" !!!
-        return {
-            x: x - vWidth,
-            y: y - vHeight
-        };
-    };
-    SVGHelper.prototype.convertViewboxPointsToReal = function (points) {
-        var svg = this.getSvg();
-        var ctm = this.getCTM();
-        return points.map(function (_a) {
-            var x = _a.x, y = _a.y;
-            var p = Object.assign(svg.createSVGPoint(), { x: x, y: y }).matrixTransform(ctm);
-            return roundPointCoordinates(p);
-        });
-    };
-    SVGHelper.prototype.convertRealPointsToViewbox = function (points) {
-        var svg = this.getSvg();
-        var ctm = this.getCTM().inverse();
-        return points.map(function (_a) {
-            var x = _a.x, y = _a.y;
-            var p = Object.assign(svg.createSVGPoint(), { x: x, y: y }).matrixTransform(ctm);
-            return roundPointCoordinates(p, 1e3);
-        });
-    };
-    SVGHelper.prototype.getBorderPoints = function (repeatFirst) {
-        if (repeatFirst === void 0) { repeatFirst = true; }
-        var _a = this.getViewboxSize(), width = _a.width, height = _a.height;
-        var _b = this.getViewboxOffset(), offsetX = _b.x, offsetY = _b.y;
-        var arr = [
-            { x: -offsetX, y: -offsetY },
-            { x: width + offsetX, y: -offsetY },
-            { x: width + offsetX, y: height + offsetY },
-            { x: -offsetX, y: height + offsetY }
-        ];
-        if (repeatFirst) {
-            arr.push({ x: -offsetX, y: -offsetY });
-        }
-        return arr;
-    };
-    SVGHelper.prototype.isAboveTheBorder = function (_a) {
-        var x = _a.x, y = _a.y;
-        var _b = this.getViewboxSize(), width = _b.width, height = _b.height;
-        var _c = this.getViewboxOffset(), offsetX = _c.x, offsetY = _c.y;
-        return x < -offsetX || x > width + offsetX || y < -offsetY || y > height + offsetY;
-    };
-    SVGHelper.prototype.getMouseCoordinates = function (event) {
-        var e = event;
-        var _a = e.changedTouches && e.touches ? e.changedTouches[0] || e.touches[0] : e, clientX = _a.clientX, clientY = _a.clientY;
-        var svg = this.getSvg();
-        var ctm = svg.getScreenCTM();
-        if (!ctm)
-            throw new Error('ScreenCTM is null');
-        var point = svg.createSVGPoint();
-        point.x = clientX;
-        point.y = clientY;
-        var _b = point.matrixTransform(ctm.inverse()), x = _b.x, y = _b.y;
-        return { x: x, y: y };
-    };
-    return SVGHelper;
-}());
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-var withDraggable = function (Component) {
-    return /** @class */ (function (_super) {
-        __extends(DraggableHOC, _super);
-        function DraggableHOC() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.ref = React.createRef();
-            _this.svg = new SVGHelper(function () { var _a, _b; return (_b = (_a = _this.ref) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.ownerSVGElement; });
-            _this.dragLastPosition = null;
-            _this.wasMoved = false;
-            _this.onMouseTouchDown = function (e) {
-                if (e.target === _this.ref.current && _this.props.draggable) {
-                    e.stopImmediatePropagation();
-                    e.preventDefault();
-                    var target = e.target;
-                    _this.dragLastPosition = _this.getMousePosition(e);
-                    if (target.ownerSVGElement) {
-                        target.ownerSVGElement.focus({ preventScroll: true });
-                    }
-                }
-            };
-            _this.onMouseTouchMove = function (e) {
-                if (_this.dragLastPosition) {
-                    e.stopImmediatePropagation();
-                    e.preventDefault();
-                    var _a = _this.getMousePosition(e), x = _a.x, y = _a.y;
-                    var dx = x - _this.dragLastPosition.x;
-                    var dy = y - _this.dragLastPosition.y;
-                    if (!_this.wasMoved && _this.props.onDragStart) {
-                        _this.props.onDragStart({
-                            x: _this.dragLastPosition.x,
-                            y: _this.dragLastPosition.y,
-                            dx: dx,
-                            dy: dy
-                        });
-                    }
-                    if (_this.props.onDrag) {
-                        _this.props.onDrag({ dx: dx, dy: dy });
-                    }
-                    _this.dragLastPosition = { x: x, y: y };
-                    _this.wasMoved = true;
-                }
-            };
-            _this.onMouseTouchUp = function (e) {
-                if (_this.dragLastPosition && _this.wasMoved) {
-                    e.stopImmediatePropagation();
-                    e.preventDefault();
-                    if (e instanceof MouseEvent || !e.touches) {
-                        window.addEventListener('click', function (e) { return e.stopPropagation(); }, {
-                            capture: true,
-                            once: true
-                        });
-                    }
-                    if (_this.props.onDragEnd) {
-                        _this.props.onDragEnd({
-                            x: _this.dragLastPosition.x,
-                            y: _this.dragLastPosition.y
-                        });
-                    }
-                }
-                _this.dragLastPosition = null;
-                _this.wasMoved = false;
-            };
-            return _this;
-        }
-        DraggableHOC.prototype.render = function () {
-            var _a = this.props, draggable = _a.draggable; _a.onDrag; _a.onDragStart; _a.onDragEnd; var rest = __rest(_a, ["draggable", "onDrag", "onDragStart", "onDragEnd"]);
-            return React.createElement(Component, __assign({ ref: this.ref }, rest, { draggable: draggable }));
-        };
-        DraggableHOC.prototype.componentDidUpdate = function (prevProps) {
-            if (prevProps.draggable && !this.props.draggable) {
-                // cleanup after props.draggable changed to false
-                if (this.dragLastPosition && this.wasMoved) {
-                    if (this.props.onDragEnd) {
-                        this.props.onDragEnd({
-                            x: this.dragLastPosition.x,
-                            y: this.dragLastPosition.y
-                        });
-                    }
-                    this.dragLastPosition = null;
-                    this.wasMoved = false;
-                }
-            }
-        };
-        DraggableHOC.prototype.componentDidMount = function () {
-            window.addEventListener('mousedown', this.onMouseTouchDown, true);
-            window.addEventListener('mousemove', this.onMouseTouchMove, true);
-            window.addEventListener('mouseup', this.onMouseTouchUp, true);
-            window.addEventListener('touchstart', this.onMouseTouchDown, true);
-            window.addEventListener('touchmove', this.onMouseTouchMove, true);
-            window.addEventListener('touchend', this.onMouseTouchUp, true);
-        };
-        DraggableHOC.prototype.componentWillUnmount = function () {
-            window.removeEventListener('mousedown', this.onMouseTouchDown);
-            window.removeEventListener('mousemove', this.onMouseTouchMove);
-            window.removeEventListener('mouseup', this.onMouseTouchUp);
-            window.removeEventListener('touchstart', this.onMouseTouchDown);
-            window.removeEventListener('touchmove', this.onMouseTouchMove);
-            window.removeEventListener('touchend', this.onMouseTouchUp);
-        };
-        DraggableHOC.prototype.getMousePosition = function (ev) {
-            var e = ev;
-            return this.svg.getMouseCoordinates(e);
-        };
-        return DraggableHOC;
-    }(React.Component));
-};
-
-var SVGPolyline = withDraggable(React.forwardRef(function SVGPolyline(_a, ref) {
-    var path = _a.path, animate = _a.animate, draggable = _a.draggable;
-    return (React.createElement("polyline", { ref: ref, style: { cursor: draggable ? 'move' : '' }, points: path.map(function (_a) {
-            var x = _a.x, y = _a.y;
-            return x + "," + y;
-        }).join(' '), fill: "rgba(0,0,0,0)", stroke: "white", strokeWidth: "1.5", shapeRendering: "geometricPrecision", strokeDasharray: "3", strokeDashoffset: "0", vectorEffect: "non-scaling-stroke" }, animate && (React.createElement("animate", { attributeName: "stroke-dashoffset", values: "0;1000;0", dur: "100s", repeatCount: "indefinite" }))));
-}));
-
-function SVGPolygon(_a) {
-    var path = _a.path;
-    return (React.createElement("polygon", { style: {
-            pointerEvents: 'none',
-            transform: 'translate(-1px, -1px)'
-        }, points: path.map(function (_a) {
-            var x = _a.x, y = _a.y;
-            return x + "," + y;
-        }).join(' '), fill: "rgba(0, 0, 0, 0.5)", fillRule: "evenodd", stroke: "null", shapeRendering: "geometricPrecision" }));
-}
-
-var SVGPoint = withDraggable(React.forwardRef(function SVGPoint(_a, ref) {
-    var x = _a.x, y = _a.y, onClickTouchEvent = _a.onClickTouchEvent, draggable = _a.draggable, style = _a.style;
-    var _b = style.cursor, cursor = _b === void 0 ? draggable ? 'move' : 'default' : _b, rest = __rest(style, ["cursor"]);
-    return (React.createElement("rect", { style: __assign({ cursor: cursor }, rest), ref: ref, x: x - 10, y: y - 10, onClick: function (e) {
-            e.stopPropagation();
-            e.preventDefault();
-            onClickTouchEvent(e);
-        }, onTouchEnd: function (e) {
-            e.stopPropagation();
-            e.preventDefault();
-            onClickTouchEvent(e);
-        }, width: "20px", height: "20", fill: "rgba(0, 0, 0, 0)", stroke: "white", strokeWidth: "1.25", vectorEffect: "non-scaling-stroke" }));
-}));
-
-var pathActions;
-(function (pathActions) {
-    pathActions["ADD"] = "ADD";
-    pathActions["DELETE"] = "DELETE";
-    pathActions["MODIFY"] = "MODIFY";
-    pathActions["MOVE"] = "MOVE";
-    pathActions["RESET"] = "RESET";
-    pathActions["CHANGE"] = "CHANGE";
-})(pathActions || (pathActions = {}));
-function pathReducer(state, action) {
-    var length = state.points.length;
-    switch (action.type) {
-        case pathActions.ADD: {
-            if (state.closed)
-                return [state, false];
-            if ((length > 0 && arePointsEqual(state.points[length - 1], action.payload)) ||
-                (length > 1 && arePointsEqual(state.points[length - 2], action.payload))) {
-                return [state, false];
-            }
-            var needToBeClosed = length > 2 && arePointsEqual(state.points[0], action.payload);
-            if (needToBeClosed)
-                return [{ points: __spreadArray([], state.points), closed: true }, true];
-            return [{ points: __spreadArray(__spreadArray([], state.points, true), [action.payload]), closed: false }, true];
-        }
-        case pathActions.DELETE: {
-            return [
-                {
-                    points: __spreadArray([], state.points.filter(function (_, idx) { return action.payload !== idx; })),
-                    closed: length > 4 && state.closed
-                },
-                true
-            ];
-        }
-        case pathActions.MODIFY: {
-            var _a = state.points[action.payload.index], sx_1 = _a.x, sy_1 = _a.y;
-            var newPoints = state.points.map(function (_a) {
-                var x = _a.x, y = _a.y;
-                if (x === sx_1 && y === sy_1) {
-                    return {
-                        x: action.payload.x,
-                        y: action.payload.y
-                    };
-                }
-                return { x: x, y: y };
-            });
-            return [
-                { points: newPoints, closed: state.closed },
-                !!(action.payload.x || action.payload.y)
-            ];
-        }
-        case pathActions.MOVE: {
-            return [
-                {
-                    points: state.points.map(function (_a) {
-                        var x = _a.x, y = _a.y;
-                        return ({
-                            x: x + action.payload.x,
-                            y: y + action.payload.y
-                        });
-                    }),
-                    closed: state.closed
-                },
-                !!(action.payload.x || action.payload.y)
-            ];
-        }
-        case pathActions.CHANGE: {
-            var wasModified = !arePointListEqual(action.payload, state.points);
-            return [
-                {
-                    points: action.payload,
-                    closed: wasModified ? action.payload.length > 2 : state.closed
-                },
-                wasModified
-            ];
-        }
-        case pathActions.RESET:
-            return [{ points: [], closed: false }, !!state.points.length];
-        default:
-            return [state, false];
-    }
-}
-
-var ReactLasso = /** @class */ (function (_super) {
-    __extends(ReactLasso, _super);
-    function ReactLasso(props) {
-        var _this = _super.call(this, props) || this;
-        _this.imageRef = React.createRef();
-        _this.svgRef = React.createRef();
-        _this.svg = new SVGHelper(function () { var _a; return (_a = _this.svgRef) === null || _a === void 0 ? void 0 : _a.current; });
-        _this.angles = [];
-        _this.path = {
-            points: [],
-            closed: false
-        };
-        _this.lastEmittedPoints = [];
-        _this.lastUpdatedPoints = [];
-        _this.imgError = false;
-        _this.setPathFromPropsOnMediaLoad = true;
-        _this.hidePointer = function () {
-            var lastPoint = _this.path.points[_this.path.points.length - 1] || {
-                x: 0,
-                y: 0
-            };
-            _this.setPointer(__assign({}, lastPoint), true); // tricky way to hide pointer line
-        };
-        // Events
-        _this.onShapeDrag = function (_a) {
-            var dx = _a.dx, dy = _a.dy;
-            var newPath = _this.path.points.map(function (_a) {
-                var x = _a.x, y = _a.y;
-                return ({
-                    x: x + dx,
-                    y: y + dy
-                });
-            });
-            if (!newPath.some(function (point) { return _this.svg.isAboveTheBorder(point); })) {
-                _this.dispatchPathAction({
-                    type: pathActions.MOVE,
-                    payload: { x: dx, y: dy }
-                });
-            }
-        };
-        _this.onPointDrag = function (idx, _a) {
-            var dx = _a.dx, dy = _a.dy;
-            var point = __assign({}, _this.path.points[idx]);
-            point.x += dx;
-            point.y += dy;
-            if (!_this.svg.isAboveTheBorder(point)) {
-                _this.dispatchPathAction({
-                    type: pathActions.MODIFY,
-                    payload: __assign(__assign({}, point), { index: idx })
-                });
-            }
-        };
-        _this.onPointClick = function (idx) {
-            if (_this.isLoaded() && !_this.props.disabled && !_this.path.closed) {
-                _this.dispatchPathAction({
-                    type: pathActions.ADD,
-                    payload: _this.path.points[idx]
-                });
-            }
-        };
-        _this.onDragEnd = function () {
-            _this.checkIfPathUpdated(false);
-        };
-        _this.onMediaLoaded = function (e) {
-            if (_this.setPathFromPropsOnMediaLoad) {
-                _this.setPathStateFromProps();
-                _this.setPathFromPropsOnMediaLoad = false;
-            }
-            _this.imgError = false;
-            _this.props.onImageLoad(e);
-        };
-        _this.onMediaError = function (e) {
-            _this.dispatchPathAction({ type: pathActions.RESET });
-            _this.imgError = true;
-            _this.props.onImageError(e);
-        };
-        _this.onClickTouchEvent = function (e) {
-            if (_this.isLoaded() && !_this.props.disabled) {
-                if (_this.path.closed) {
-                    if (e.target === _this.svgRef.current) {
-                        _this.dispatchPathAction({
-                            type: pathActions.RESET
-                        });
-                    }
-                    return;
-                }
-                var pointer = _this.getMousePosition(e)[0];
-                if (!_this.svg.isAboveTheBorder(pointer)) {
-                    _this.dispatchPathAction({
-                        type: pathActions.ADD,
-                        payload: roundPointCoordinates(pointer, 1e3),
-                        pointer: pointer
-                    });
-                }
-                else {
-                    _this.hidePointer();
-                }
-            }
-        };
-        _this.onClick = function (e) {
-            _this.onClickTouchEvent(e);
-        };
-        _this.onTouchEnd = function (e) {
-            if (e.cancelable) {
-                e.preventDefault();
-                _this.onClickTouchEvent(e);
-            }
-            _this.hidePointer();
-        };
-        _this.onMouseTouchMove = function (e) {
-            if (_this.isLoaded()) {
-                var pointer = _this.getMousePosition(e)[0];
-                _this.setPointer(pointer);
-            }
-        };
-        _this.onContextMenu = function (e) {
-            if (_this.isLoaded()) {
-                e.preventDefault();
-                if (!_this.props.disabled && !_this.path.closed) {
-                    var _a = _this.getMousePosition(e), pointer = _a[0], index = _a[1].index;
-                    if (index > -1) {
-                        _this.dispatchPathAction({
-                            type: pathActions.DELETE,
-                            payload: index,
-                            pointer: pointer
-                        });
-                    }
-                    else {
-                        _this.setPointer(pointer);
-                    }
-                }
-            }
-        };
-        _this.state = {
-            path: {
-                points: [],
-                closed: false
-            },
-            pointer: {
-                x: props.viewBox.width / 2,
-                y: props.viewBox.width / 2
-            }
-        };
-        return _this;
-    }
-    ReactLasso.prototype.render = function () {
-        var _this = this;
-        return (React.createElement("div", { className: objectToClassName({
-                ReactFreeSelect__Component: true,
-                ReactFreeSelect__Closed: this.state.path.closed,
-                ReactFreeSelect__Disabled: this.props.disabled
-            }), style: __assign({ display: 'inline-block', position: 'relative', margin: '0', padding: '0', fontSize: '0', cursor: this.props.disabled ? 'not-allowed' : 'default' }, this.props.style) },
-            React.createElement("img", { ref: this.imageRef, src: this.props.src, alt: this.props.imageAlt, crossOrigin: this.props.crossOrigin, style: this.props.imageStyle, onLoad: this.onMediaLoaded, onError: this.onMediaError }),
-            React.createElement("svg", { ref: this.svgRef, style: {
-                    position: 'absolute',
-                    top: '0',
-                    left: '0',
-                    width: '100%',
-                    height: '100%',
-                    overflow: 'hidden',
-                    userSelect: 'none',
-                    touchAction: 'none'
-                }, viewBox: "0 0 " + this.props.viewBox.width + " " + this.props.viewBox.height, onMouseMove: this.onMouseTouchMove, onTouchMove: this.onMouseTouchMove, onClick: this.onClick, onTouchEnd: this.onTouchEnd, onContextMenu: this.onContextMenu, onMouseLeave: this.hidePointer },
-                React.createElement("rect", { visibility: "hidden" }),
-                !!this.state.path.points.length && React.createElement(SVGPolygon, { path: this.getPolygonPoints() }),
-                React.createElement(SVGPolyline, { draggable: this.state.path.closed && !this.props.disabled, onDrag: this.onShapeDrag, onDragEnd: this.onDragEnd, animate: !this.props.disabled, path: this.getPolylinePoints() }),
-                this.getRoundedPoints().map(function (_a, idx) {
-                    var x = _a.x, y = _a.y;
-                    return (React.createElement(SVGPoint, { key: idx, x: x, y: y, draggable: !_this.props.disabled, style: {
-                            cursor: !idx && _this.state.path.points.length > 2 && !_this.state.path.closed
-                                ? 'pointer'
-                                : undefined
-                        }, onDrag: function (_a) {
-                            var dx = _a.dx, dy = _a.dy;
-                            return _this.onPointDrag(idx, { dx: dx, dy: dy });
-                        }, onDragEnd: _this.onDragEnd, onClickTouchEvent: function () { return _this.onPointClick(idx); } }));
-                }))));
-    };
-    ReactLasso.prototype.componentDidUpdate = function (prevProps) {
-        if (!prevProps.disabled && this.props.disabled && !this.path.closed) {
-            this.hidePointer();
-        }
-        if (prevProps.src && prevProps.src !== this.props.src) {
-            this.dispatchPathAction({ type: pathActions.RESET });
-        }
-        else if (!arePointListEqual(prevProps.value, this.props.value)) {
-            if (this.isLoaded()) {
-                this.setPathStateFromProps();
-            }
-            else {
-                this.setPathFromPropsOnMediaLoad = true;
-            }
-        }
-    };
-    ReactLasso.prototype.convertPoints = function (points) {
-        var aspectRatio = this.getAspectRatio();
-        return this.svg.convertViewboxPointsToReal(points).map(function (_a) {
-            var x = _a.x, y = _a.y;
-            return ({
-                x: Math.round(x / aspectRatio.x),
-                y: Math.round(y / aspectRatio.y)
-            });
-        });
-    };
-    ReactLasso.prototype.checkIfPathUpdated = function (wasClosedBefore) {
-        if (this.path.closed || wasClosedBefore) {
-            var convertedPoints = this.convertPoints(this.path.points);
-            if (!arePointListEqual(convertedPoints, this.lastUpdatedPoints)) {
-                this.emitOnComplete(convertedPoints);
-                this.lastUpdatedPoints = convertedPoints.map(function (_a) {
-                    var x = _a.x, y = _a.y;
-                    return ({ x: x, y: y });
-                });
-            }
-        }
-    };
-    ReactLasso.prototype.emitOnChange = function (_a) {
-        var points = _a.points;
-        if (this.props.onChange) {
-            var convertedPoints = this.convertPoints(points);
-            this.lastEmittedPoints = convertedPoints;
-            this.props.onChange(convertedPoints);
-        }
-    };
-    ReactLasso.prototype.emitOnComplete = function (convertedPoints) {
-        if (this.props.onComplete) {
-            this.props.onComplete(convertedPoints);
-        }
-    };
-    ReactLasso.prototype.setPointer = function (_a, force) {
-        var x = _a.x, y = _a.y;
-        if (force === void 0) { force = false; }
-        if (force || !this.props.disabled) {
-            this.setState({
-                path: this.path,
-                pointer: { x: x, y: y }
-            });
-        }
-    };
-    ReactLasso.prototype.dispatchPathAction = function (action) {
-        var wasClosedBefore = this.path.closed;
-        var _a = pathReducer(this.path, action), newPathState = _a[0], wasModified = _a[1];
-        newPathState.points = newPathState.points.map(function (point) { return roundPointCoordinates(point, 1e3); });
-        if (wasModified) {
-            this.path = newPathState;
-            this.setState({
-                pointer: action.pointer || this.path.points[this.path.points.length - 1] || { x: 0, y: 0 },
-                path: newPathState
-            });
-            this.angles = calculateAnglesBeetwenPoints(newPathState.points);
-            this.emitOnChange(newPathState);
-            if (![pathActions.MODIFY, pathActions.MOVE].includes(action.type)) {
-                this.checkIfPathUpdated(wasClosedBefore); // optimized version of onChange
-            }
-        }
-    };
-    ReactLasso.prototype.isLoaded = function () {
-        if (this.imgError || !this.svgRef.current)
-            return false;
-        var svg = this.svgRef.current;
-        return !!(svg.width.baseVal.value && svg.height.baseVal.value);
-    };
-    ReactLasso.prototype.getAspectRatio = function () {
-        if (!this.imageRef.current) {
-            return { x: NaN, y: NaN };
-        }
-        // original * aspectRatio = size
-        return {
-            x: this.imageRef.current.clientWidth / this.imageRef.current.naturalWidth,
-            y: this.imageRef.current.clientHeight / this.imageRef.current.naturalHeight
-        };
-    };
-    ReactLasso.prototype.setPathStateFromProps = function () {
-        if (arePointListEqual(this.lastEmittedPoints, this.props.value))
-            return;
-        var aspectRatio = this.getAspectRatio();
-        var value = this.svg.convertRealPointsToViewbox(this.props.value.map(function (_a) {
-            var x = _a.x, y = _a.y;
-            return ({
-                x: x * aspectRatio.x,
-                y: y * aspectRatio.y
-            });
-        }));
-        this.dispatchPathAction({
-            type: pathActions.CHANGE,
-            payload: value
-        });
-    };
-    ReactLasso.prototype.getRoundedPoints = function () {
-        return this.state.path.points.map(function (point) { return roundPointCoordinates(point); });
-    };
-    ReactLasso.prototype.getBorder = function () {
-        return this.svg
-            .getBorderPoints()
-            .map(function (point) { return roundPointCoordinates(point); })
-            .map(function (_a) {
-            var x = _a.x, y = _a.y;
-            return ({ x: x - 1, y: y + 1 });
-        }); // fishy bug here so i have to margin area
-    };
-    ReactLasso.prototype.getPolygonPoints = function () {
-        var roundedPoints = this.getRoundedPoints();
-        var border = this.getBorder();
-        return this.state.path.closed
-            ? __spreadArray(__spreadArray(__spreadArray([], border, true), roundedPoints, true), [roundedPoints[0], border[0]]) : border;
-    };
-    ReactLasso.prototype.getPolylinePoints = function () {
-        var roundedPoints = this.getRoundedPoints();
-        return roundedPoints.concat(this.state.path.closed ? roundedPoints[0] : roundPointCoordinates(this.state.pointer));
-    };
-    ReactLasso.prototype.getMousePosition = function (e, lookupForNearlyPoints, lookupForApproximation) {
-        if (lookupForNearlyPoints === void 0) { lookupForNearlyPoints = true; }
-        if (lookupForApproximation === void 0) { lookupForApproximation = true; }
-        var pointer = this.svg.getMouseCoordinates(e);
-        if (lookupForApproximation) {
-            var ctrlCmdPressed = navigator.platform.includes('Mac') ? e.metaKey : e.ctrlKey;
-            var lastPoint = this.path.points[this.path.points.length - 1];
-            // straighten path from last point
-            if (ctrlCmdPressed && lastPoint) {
-                if (e.shiftKey) {
-                    // lookup for parallel lines
-                    pointer = approximateToAngles(lastPoint, pointer, this.angles);
-                }
-                else {
-                    // angle approximation to 15 deg
-                    pointer = approximateToAnAngleMultiplicity(lastPoint, pointer, Math.PI / 12);
-                }
-            }
-        }
-        var _a = findPointByPosition(this.path.points, pointer, 10), point = _a.point, index = _a.index;
-        if (lookupForNearlyPoints && index > -1) {
-            pointer = __assign({}, point);
-        }
-        return [pointer, { point: point, index: index }];
-    };
-    ReactLasso.propTypes = {
-        value: PropTypes.arrayOf(PropTypes.exact({
-            x: PropTypes.number.isRequired,
-            y: PropTypes.number.isRequired
-        })),
-        style: PropTypes.shape({}),
-        viewBox: PropTypes.exact({
-            width: PropTypes.number.isRequired,
-            height: PropTypes.number.isRequired
-        }),
-        disabled: PropTypes.bool,
-        onChange: PropTypes.func,
-        onComplete: PropTypes.func,
-        src: PropTypes.string.isRequired,
-        imageAlt: PropTypes.string,
-        crossOrigin: PropTypes.string,
-        imageStyle: PropTypes.shape({}),
-        onImageLoad: PropTypes.func,
-        onImageError: PropTypes.func
-    };
-    ReactLasso.defaultProps = {
-        value: [],
-        style: {},
-        imageStyle: {},
-        viewBox: { width: 1e3, height: 1e3 },
-        disabled: false,
-        onImageError: Function.prototype,
-        onImageLoad: Function.prototype
-    };
-    return ReactLasso;
-}(React.Component));
-
-export { ReactLasso as Component, ReactLasso, ReactLasso as default, getClippedImageCanvas as getCanvas };
-//# sourceMappingURL=index.esm.js.map