canvas2d-wrapper 1.14.1 → 2.0.0

package/dist/index.js

@@ -1,1088 +0,0 @@
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var React = require('react');
-var React__default = _interopDefault(React);
-
-function _arrayLikeToArray(r, a) {
-  (null == a || a > r.length) && (a = r.length);
-  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
-  return n;
-}
-function _defineProperties(e, r) {
-  for (var t = 0; t < r.length; t++) {
-    var o = r[t];
-    o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o);
-  }
-}
-function _createClass(e, r, t) {
-  return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
-    writable: !1
-  }), e;
-}
-function _createForOfIteratorHelperLoose(r, e) {
-  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (t) return (t = t.call(r)).next.bind(t);
-  if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
-    t && (r = t);
-    var o = 0;
-    return function () {
-      return o >= r.length ? {
-        done: !0
-      } : {
-        done: !1,
-        value: r[o++]
-      };
-    };
-  }
-  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-function _inheritsLoose(t, o) {
-  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-function _setPrototypeOf(t, e) {
-  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
-    return t.__proto__ = e, t;
-  }, _setPrototypeOf(t, e);
-}
-function _toPrimitive(t, r) {
-  if ("object" != typeof t || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r || "default");
-    if ("object" != typeof i) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r ? String : Number)(t);
-}
-function _toPropertyKey(t) {
-  var i = _toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : i + "";
-}
-function _unsupportedIterableToArray(r, a) {
-  if (r) {
-    if ("string" == typeof r) return _arrayLikeToArray(r, a);
-    var t = {}.toString.call(r).slice(8, -1);
-    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
-  }
-}
-
-function calcTileSize(tileSize, zoom) {
-  return tileSize * zoom;
-}
-
-function inCircle(element, x, y, left, top, localTileSize) {
-  var distance = (x - left) * (x - left) + (y - top) * (y - top);
-  return distance <= element.radius * localTileSize * (element.radius * localTileSize);
-}
-
-function inPoly(element, x, y, mouseX, mouseY, localTileSize) {
-  var j = element.points.length - 1;
-  var counter = false;
-  for (var i = 0; i < element.points.length; i++) {
-    var iX = element.points[i].x * localTileSize;
-    var iY = element.points[i].y * localTileSize;
-    if (mouseX === iX && mouseY === iY) {
-      return true;
-    }
-    var jX = element.points[j].x * localTileSize;
-    var jY = element.points[j].y * localTileSize;
-    if (iY > y !== jY > y) {
-      var slope = (mouseX - iX) * (jY - iY) - (jX - iX) * (mouseY - iY);
-      if (slope === 0) {
-        return true;
-      }
-      if (slope < 0 !== jY < iY) {
-        counter = !counter;
-      }
-    }
-  }
-  return counter;
-}
-
-function inRect(element, x, y, left, top, localTileSize, rotation) {
-  var width = element.width * localTileSize;
-  var height = element.height * localTileSize;
-  var rotatedLeft = left;
-  var rotatedTop = top;
-  if (rotation) {
-    var centerX = x + width / 2;
-    var centerY = y + height / 2;
-    rotatedLeft = centerX + (left - centerX) * Math.cos(-rotation) - (top - centerY) * Math.sin(-rotation);
-    rotatedTop = centerY + (top - centerY) * Math.cos(-rotation) + (left - centerX) * Math.sin(-rotation);
-  }
-  return x <= rotatedLeft && rotatedLeft <= x + width && y <= rotatedTop && rotatedTop <= y + height;
-}
-
-function onLinePath(element, left, top, localTileSize) {
-  var radius = element.lineWidth;
-  if (inCircle({
-    radius: radius
-  }, element.points[0].x * localTileSize, element.points[0].y * localTileSize, left, top, localTileSize)) {
-    return true;
-  }
-  if (inCircle({
-    radius: radius
-  }, element.points[element.points.length - 1].x * localTileSize, element.points[element.points.length - 1].y * localTileSize, left, top, localTileSize)) {
-    return true;
-  }
-  for (var i = 1; i < element.points.length; i++) {
-    var from = {
-      x: element.points[i - 1].x * localTileSize,
-      y: element.points[i - 1].y * localTileSize
-    };
-    var to = {
-      x: element.points[i].x * localTileSize,
-      y: element.points[i].y * localTileSize
-    };
-    var diffX = from.x - to.x;
-    var diffY = from.y - to.y;
-    var length = Math.sqrt(diffX * diffX + diffY * diffY);
-    var dot = ((left - from.x) * (to.x - from.x) + (top - from.y) * (to.y - from.y)) / Math.pow(length, 2);
-    var point = {
-      x: from.x + dot * (to.x - from.x),
-      y: from.y + dot * (to.y - from.y)
-    };
-    if (inCircle({
-      radius: radius
-    }, point.x, point.y, left, top, localTileSize)) {
-      return true;
-    }
-  }
-  return false;
-}
-
-function collideElement(e, elements, left, top, tileSize, zoom) {
-  var localTileSize = calcTileSize(tileSize, zoom);
-  var validElements = [];
-  for (var _iterator = _createForOfIteratorHelperLoose(elements), _step; !(_step = _iterator()).done;) {
-    var element = _step.value;
-    if (!element.hasCollisions) {
-      continue;
-    }
-    var x = element.x * localTileSize;
-    var y = element.y * localTileSize;
-    switch (element.constructorName) {
-      case 'Rect':
-      case 'CanvasImage':
-        if (inRect(element, x, y, left, top, localTileSize, element.rotation)) {
-          validElements.push({
-            id: element.id,
-            element: element,
-            originalEvent: e,
-            posOnMap: {
-              x: element.x,
-              y: element.y
-            }
-          });
-        }
-        break;
-      case 'Circle':
-        if (inCircle(element, x, y, left, top, localTileSize)) {
-          validElements.push({
-            id: element.id,
-            element: element,
-            originalEvent: e,
-            posOnMap: {
-              x: element.x,
-              y: element.y
-            }
-          });
-        }
-        break;
-      case 'Polygon':
-        if (inPoly(element, x, y, left, top, localTileSize)) {
-          validElements.push({
-            id: element.id,
-            element: element,
-            originalEvent: e,
-            posOnMap: {
-              x: element.x,
-              y: element.y
-            }
-          });
-        }
-        break;
-      case 'LinePath':
-        if (onLinePath(element, left, top, localTileSize)) {
-          validElements.push({
-            id: element.id,
-            element: element,
-            originalEvent: e,
-            posOnMap: {
-              x: element.x,
-              y: element.y
-            }
-          });
-        }
-        break;
-    }
-  }
-  if (validElements.length === 0) {
-    return null;
-  }
-  if (validElements.length === 1) {
-    return validElements[0];
-  }
-  validElements.sort(function (a, b) {
-    if (a.element.zIndex > b.element.zIndex) {
-      return -1;
-    }
-    if (a.element.zIndex < b.element.zIndex) {
-      return 1;
-    }
-    if (a.id > b.id) {
-      return 1;
-    }
-    if (a.id < b.id) {
-      return -1;
-    }
-    return 0;
-  });
-  return validElements[0];
-}
-
-function computeEventPositions(props, event, tileSize) {
-  var left = -props.left - props.deltaLeft + event.pageX - event.target.offsetLeft;
-  var top = -props.top - props.deltaTop + event.pageY - event.target.offsetTop;
-  var posOnMap = {
-    x: Math.floor(left / tileSize / props.zoom),
-    y: Math.floor(top / tileSize / props.zoom)
-  };
-  return {
-    left: left,
-    top: top,
-    posOnMap: posOnMap
-  };
-}
-
-function elementClick(e, elements, tileSize, state) {
-  var _computeEventPosition = computeEventPositions(state, e, tileSize),
-    left = _computeEventPosition.left,
-    top = _computeEventPosition.top,
-    posOnMap = _computeEventPosition.posOnMap;
-  var clickedElement = collideElement(e, elements, left, top, tileSize, state.zoom);
-  if (clickedElement !== null) {
-    return clickedElement;
-  }
-  return {
-    id: null,
-    element: null,
-    originalEvent: e,
-    posOnMap: posOnMap
-  };
-}
-
-function elementRightClick(e, elements, tileSize, state) {
-  var left = -state.left - state.deltaLeft + e.pageX - e.target.offsetLeft;
-  var top = -state.top - state.deltaTop + e.pageY - e.target.offsetTop;
-  var clickedElement = collideElement(e, elements, left, top, tileSize, state.zoom);
-  if (clickedElement !== null) {
-    return clickedElement;
-  }
-  return {
-    id: null,
-    element: null,
-    originalEvent: e,
-    posOnMap: {
-      x: Math.floor(left / tileSize / state.zoom),
-      y: Math.floor(top / tileSize / state.zoom)
-    }
-  };
-}
-
-var LEFT_BUTTON = 1;
-var selectedObject = null;
-var unselectTimeoutId = 0;
-var UNSELECT_TIMEOUT_MS = 300;
-function mouseMove(event, elements, tileSize, props, setProps, lockXAxis, lockYAxis, dragObjects, onElementMoved, onHover) {
-  var newProps = _extends({}, props);
-  var _computeEventPosition = computeEventPositions(props, event, tileSize),
-    left = _computeEventPosition.left,
-    top = _computeEventPosition.top,
-    posOnMap = _computeEventPosition.posOnMap;
-  if (event.nativeEvent.buttons === LEFT_BUTTON && !!props.prevX) {
-    var moved = false;
-    if (dragObjects) {
-      if (selectedObject === null) {
-        selectedObject = collideElement(event, elements, left, top, tileSize, props.zoom);
-      }
-      if (selectedObject !== null && selectedObject.element.draggable) {
-        selectedObject.element.x = -props.left - props.deltaLeft + (event.clientX - props.boundingClientRect.left) - selectedObject.element.width / 2;
-        selectedObject.element.y = -props.top - props.deltaLeft + (event.clientY - props.boundingClientRect.top) - selectedObject.element.height / 2;
-        moved = true;
-        if (onElementMoved) {
-          onElementMoved(selectedObject, event.screenX - props.prevX, event.screenY - props.prevY);
-        }
-        if (onHover) {
-          onHover(null, posOnMap);
-        }
-      }
-    }
-    if (!moved) {
-      if (!lockXAxis) {
-        newProps.left += event.screenX - props.prevX;
-      }
-      if (!lockYAxis) {
-        newProps.top += event.screenY - props.prevY;
-      }
-    }
-    if (event.nativeEvent.pointerType !== 'mouse') {
-      unselectTimeoutId = setTimeout(function () {
-        selectedObject = null;
-        setProps(_extends({}, newProps, {
-          prevX: null,
-          prevY: null
-        }));
-      }, UNSELECT_TIMEOUT_MS);
-    }
-  } else {
-    if (onHover) {
-      onHover(collideElement(event, elements, left, top, tileSize, props.zoom), posOnMap);
-    }
-    selectedObject = null;
-  }
-  setProps(_extends({}, newProps, {
-    prevX: event.screenX,
-    prevY: event.screenY
-  }));
-}
-
-var WHEEL_DELTA = 0.05;
-function mouseWheel(event, props, setProps, minZoom, maxZoom) {
-  var zoom = props.zoom;
-  if (event.deltaY < 0) {
-    zoom += WHEEL_DELTA;
-  } else {
-    zoom -= WHEEL_DELTA;
-  }
-  zoom = Math.max(zoom, minZoom);
-  zoom = Math.min(zoom, maxZoom);
-  setProps(_extends({}, props, {
-    zoom: zoom
-  }));
-}
-
-function calcRatioForMinimap(elements, width, height, minimapWidth, minimapHeight, tileSize) {
-  var elementsX = elements.map(function (e) {
-    if (Array.isArray(e.points)) {
-      return e.points.map(function (p) {
-        return p.x * tileSize;
-      });
-    }
-    return [e.x * tileSize];
-  }).flat();
-  var minX = Math.min.apply(Math, elementsX);
-  var maxX = Math.max.apply(Math, elementsX);
-  width = Math.max(2 * maxX, -2 * minX, width);
-  var elementsY = elements.map(function (e) {
-    if (Array.isArray(e.points)) {
-      return e.points.map(function (p) {
-        return p.y * tileSize;
-      });
-    }
-    return [e.y * tileSize];
-  }).flat();
-  var minY = Math.min.apply(Math, elementsY);
-  var maxY = Math.max.apply(Math, elementsY);
-  height = Math.max(2 * maxY, -2 * minY, height);
-  var ratio = Math.max(width / minimapWidth, height / minimapHeight);
-  return ratio;
-}
-
-function sortElements(elements) {
-  elements.sort(function (a, b) {
-    if (a.zIndex !== b.zIndex) {
-      return a.zIndex - b.zIndex;
-    }
-    if (a.fill === b.fill) {
-      if (a.stroke === b.stroke) {
-        return 0;
-      }
-      if (a.stroke < b.stroke) {
-        return 1;
-      }
-      return -1;
-    }
-    if (a.fill < b.fill) {
-      return 1;
-    }
-    if (a.fill > b.fill) {
-      return -1;
-    }
-    return 0;
-  });
-  return elements;
-}
-
-var CanvasObject = /*#__PURE__*/function () {
-  function CanvasObject(id, x, y, zIndex, draggable, hasCollisions) {
-    this.id = id;
-    this.x = x;
-    this.y = y;
-    this['z-index'] = zIndex;
-    this.draggable = draggable;
-    this.hasCollisions = hasCollisions;
-  }
-  return _createClass(CanvasObject, [{
-    key: "zIndex",
-    get: function get() {
-      return this['z-index'] || 0;
-    },
-    set: function set(zIndex) {
-      this['z-index'] = zIndex;
-    }
-  }, {
-    key: "constructorName",
-    get: function get() {
-      return 'CanvasObject';
-    }
-  }]);
-}();
-
-var CanvasImage = /*#__PURE__*/function (_CanvasObject) {
-  function CanvasImage(_ref) {
-    var _this;
-    var id = _ref.id,
-      x = _ref.x,
-      y = _ref.y,
-      width = _ref.width,
-      height = _ref.height,
-      src = _ref.src,
-      zIndex = _ref.zIndex,
-      draggable = _ref.draggable,
-      hasCollisions = _ref.hasCollisions,
-      rotation = _ref.rotation;
-    _this = _CanvasObject.call(this, id, x, y, zIndex, draggable, hasCollisions) || this;
-    _this.width = width;
-    _this.height = height;
-    _this.src = src;
-    _this.rotation = rotation;
-    return _this;
-  }
-  _inheritsLoose(CanvasImage, _CanvasObject);
-  var _proto = CanvasImage.prototype;
-  _proto.crop = function crop(sx, swidth, sheight) {
-    this.sx = sx;
-    this.sy = sx;
-    this.swidth = swidth;
-    this.sheight = sheight;
-  };
-  return _createClass(CanvasImage, [{
-    key: "constructorName",
-    get: function get() {
-      return 'CanvasImage';
-    }
-  }]);
-}(CanvasObject);
-
-var ColoredCanvasObject = /*#__PURE__*/function (_CanvasObject) {
-  function ColoredCanvasObject(id, x, y, fill, stroke, zIndex, draggable, hasCollisions) {
-    var _this;
-    _this = _CanvasObject.call(this, id, x, y, zIndex, draggable, hasCollisions) || this;
-    _this.fill = fill;
-    _this.stroke = stroke;
-    return _this;
-  }
-  _inheritsLoose(ColoredCanvasObject, _CanvasObject);
-  return _createClass(ColoredCanvasObject, [{
-    key: "constructorName",
-    get: function get() {
-      return 'ColoredCanvasObject';
-    }
-  }]);
-}(CanvasObject);
-
-var Circle = /*#__PURE__*/function (_ColoredCanvasObject) {
-  function Circle(_ref) {
-    var _this;
-    var id = _ref.id,
-      x = _ref.x,
-      y = _ref.y,
-      radius = _ref.radius,
-      fill = _ref.fill,
-      stroke = _ref.stroke,
-      zIndex = _ref.zIndex,
-      draggable = _ref.draggable,
-      hasCollisions = _ref.hasCollisions;
-    _this = _ColoredCanvasObject.call(this, id, x, y, fill, stroke, zIndex, draggable, hasCollisions) || this;
-    _this.radius = radius;
-    return _this;
-  }
-  _inheritsLoose(Circle, _ColoredCanvasObject);
-  return _createClass(Circle, [{
-    key: "constructorName",
-    get: function get() {
-      return 'Circle';
-    }
-  }]);
-}(ColoredCanvasObject);
-
-var LinePath = /*#__PURE__*/function (_ColoredCanvasObject) {
-  function LinePath(_ref) {
-    var _this;
-    var id = _ref.id,
-      lineWidth = _ref.lineWidth,
-      points = _ref.points,
-      stroke = _ref.stroke,
-      zIndex = _ref.zIndex,
-      smoothCorners = _ref.smoothCorners,
-      smoothCornersRadius = _ref.smoothCornersRadius,
-      hasCollisions = _ref.hasCollisions;
-    _this = _ColoredCanvasObject.call(this, id, points[0].x, points[0].y, 'none', stroke, zIndex, false, hasCollisions) || this;
-    _this.points = points;
-    _this.lineWidth = lineWidth;
-    _this.smoothCorners = smoothCorners;
-    _this.smoothCornersRadius = smoothCornersRadius;
-    return _this;
-  }
-  _inheritsLoose(LinePath, _ColoredCanvasObject);
-  return _createClass(LinePath, [{
-    key: "constructorName",
-    get: function get() {
-      return 'LinePath';
-    }
-  }]);
-}(ColoredCanvasObject);
-
-var Polygon = /*#__PURE__*/function (_ColoredCanvasObject) {
-  function Polygon(_ref) {
-    var _this;
-    var id = _ref.id,
-      points = _ref.points,
-      fill = _ref.fill,
-      stroke = _ref.stroke,
-      zIndex = _ref.zIndex,
-      draggable = _ref.draggable,
-      hasCollisions = _ref.hasCollisions;
-    _this = _ColoredCanvasObject.call(this, id, points[0].x, points[0].y, fill, stroke, zIndex, draggable, hasCollisions) || this;
-    _this.points = points;
-    return _this;
-  }
-  _inheritsLoose(Polygon, _ColoredCanvasObject);
-  return _createClass(Polygon, [{
-    key: "constructorName",
-    get: function get() {
-      return 'Polygon';
-    }
-  }]);
-}(ColoredCanvasObject);
-
-var Rect = /*#__PURE__*/function (_ColoredCanvasObject) {
-  function Rect(_ref) {
-    var _this;
-    var id = _ref.id,
-      x = _ref.x,
-      y = _ref.y,
-      width = _ref.width,
-      height = _ref.height,
-      fill = _ref.fill,
-      stroke = _ref.stroke,
-      zIndex = _ref.zIndex,
-      draggable = _ref.draggable,
-      hasCollisions = _ref.hasCollisions,
-      rotation = _ref.rotation;
-    _this = _ColoredCanvasObject.call(this, id, x, y, fill, stroke, zIndex, draggable, hasCollisions) || this;
-    _this.width = width;
-    _this.height = height;
-    _this.rotation = rotation;
-    return _this;
-  }
-  _inheritsLoose(Rect, _ColoredCanvasObject);
-  return _createClass(Rect, [{
-    key: "constructorName",
-    get: function get() {
-      return 'Rect';
-    }
-  }]);
-}(ColoredCanvasObject);
-
-function renderCircle(context, element, left, top, localTileSize) {
-  context.beginPath();
-  context.arc(left + element.x * localTileSize, top + element.y * localTileSize, element.radius * localTileSize, 0, 2 * Math.PI);
-  if (element.fill) {
-    context.fill();
-  }
-  if (element.stroke) {
-    context.stroke();
-  }
-}
-
-window.__canvas2dWrapper__ = {};
-window.__canvas2dWrapper__.imgCache = {};
-function renderImage(context, element, left, top, localTileSize) {
-  if (!__canvas2dWrapper__.imgCache[element.src]) {
-    __canvas2dWrapper__.imgCache[element.src] = new Image();
-    __canvas2dWrapper__.imgCache[element.src].src = element.src;
-  }
-  var positionX = left + element.x * localTileSize;
-  var positionY = top + element.y * localTileSize;
-  var width = element.width * localTileSize;
-  var height = element.height * localTileSize;
-  if (element.rotation) {
-    context.save();
-    context.translate(positionX + width / 2, positionY + height / 2);
-    context.rotate(element.rotation);
-    if (!element.sx) {
-      context.drawImage(__canvas2dWrapper__.imgCache[element.src], -width / 2, -height / 2, width, height);
-    } else {
-      context.drawImage(__canvas2dWrapper__.imgCache[element.src], element.sx, element.sy, element.swidth, element.sheight, -element.swidth / 2, -element.sheight / 2, width, height);
-    }
-    context.restore();
-  } else {
-    if (!element.sx) {
-      context.drawImage(__canvas2dWrapper__.imgCache[element.src], positionX, positionY, width, height);
-    } else {
-      context.drawImage(__canvas2dWrapper__.imgCache[element.src], element.sx, element.sy, element.swidth, element.sheight, positionX, positionY, width, height);
-    }
-  }
-}
-
-function renderLinePath(context, element, left, top, localTileSize) {
-  var defaultLineWidth = context.lineWidth;
-  var points = element.points.map(function (p) {
-    return {
-      x: left + p.x * localTileSize,
-      y: top + p.y * localTileSize
-    };
-  });
-  if (points.length < 2) return;
-  context.beginPath();
-  context.moveTo(points[0].x, points[0].y);
-  if (element.smoothCorners) {
-    for (var i = 1; i < points.length - 1; i++) {
-      var prev = points[i - 1];
-      var curr = points[i];
-      var next = points[i + 1];
-      var dx1 = curr.x - prev.x;
-      var dy1 = curr.y - prev.y;
-      var dx2 = next.x - curr.x;
-      var dy2 = next.y - curr.y;
-      var len1 = Math.hypot(dx1, dy1);
-      var len2 = Math.hypot(dx2, dy2);
-      var offset1X = dx1 / len1 * element.smoothCornersRadius;
-      var offset1Y = dy1 / len1 * element.smoothCornersRadius;
-      var offset2X = dx2 / len2 * element.smoothCornersRadius;
-      var offset2Y = dy2 / len2 * element.smoothCornersRadius;
-      var cornerStart = {
-        x: curr.x - offset1X,
-        y: curr.y - offset1Y
-      };
-      var cornerEnd = {
-        x: curr.x + offset2X,
-        y: curr.y + offset2Y
-      };
-      context.lineTo(cornerStart.x, cornerStart.y);
-      context.quadraticCurveTo(curr.x, curr.y, cornerEnd.x, cornerEnd.y);
-    }
-    context.lineTo(points[points.length - 1].x, points[points.length - 1].y);
-  } else {
-    for (var _i = 1; _i < points.length; _i++) {
-      context.lineTo(points[_i].x, points[_i].y);
-    }
-  }
-  context.lineWidth = element.lineWidth * localTileSize;
-  context.stroke();
-  context.lineWidth = defaultLineWidth;
-}
-
-function renderPolygon(context, element, left, top, localTileSize) {
-  context.beginPath();
-  context.moveTo(left + element.points[0].x * localTileSize, top + element.points[0].y * localTileSize);
-  for (var i = 0; i < element.points.length; i++) {
-    context.lineTo(left + element.points[i].x * localTileSize, top + element.points[i].y * localTileSize);
-  }
-  context.lineTo(left + element.points[0].x * localTileSize, top + element.points[0].y * localTileSize);
-  if (element.fill) {
-    context.fill();
-  }
-  if (element.stroke) {
-    context.stroke();
-  }
-}
-
-function renderRect(context, element, left, top, localTileSize) {
-  var positionX = left + element.x * localTileSize;
-  var positionY = top + element.y * localTileSize;
-  var width = element.width * localTileSize;
-  var height = element.height * localTileSize;
-  if (element.rotation) {
-    context.save();
-    context.translate(positionX + width / 2, positionY + height / 2);
-    context.rotate(element.rotation);
-    if (element.fill) {
-      context.fillRect(-width / 2, -width / 2, width, height);
-    }
-    if (element.stroke) {
-      context.strokeRect(-width / 2, -width / 2, width, height);
-    }
-    context.restore();
-  } else {
-    if (element.fill) {
-      context.fillRect(positionX, positionY, width, height);
-    }
-    if (element.stroke) {
-      context.strokeRect(positionX, positionY, width, height);
-    }
-  }
-}
-
-var _renderFn;
-var renderFn = (_renderFn = {}, _renderFn[new Circle({}).constructorName] = renderCircle, _renderFn[new CanvasImage({}).constructorName] = renderImage, _renderFn[new LinePath({
-  points: [{}]
-}).constructorName] = renderLinePath, _renderFn[new Polygon({
-  points: [{}]
-}).constructorName] = renderPolygon, _renderFn[new Rect({}).constructorName] = renderRect, _renderFn);
-function renderCanvas(context, width, height, elements, tileSize, state) {
-  var left = state.left + state.deltaLeft;
-  var top = state.top + state.deltaTop;
-  var prevFillStyle = '';
-  var prevStrokeStyle = '';
-  var localTileSize = calcTileSize(tileSize, state.zoom);
-  context.clearRect(0, 0, width, height);
-  for (var _iterator = _createForOfIteratorHelperLoose(elements), _step; !(_step = _iterator()).done;) {
-    var element = _step.value;
-    if (element.fill !== prevFillStyle && typeof element.fill !== 'undefined') {
-      context.fillStyle = element.fill;
-      prevFillStyle = element.fill;
-    }
-    if (element.stroke !== prevStrokeStyle && typeof element.stroke !== 'undefined') {
-      context.strokeStyle = element.stroke;
-      prevStrokeStyle = element.stroke;
-    }
-    var type = element.constructorName;
-    if (renderFn[type]) {
-      renderFn[type](context, element, left, top, localTileSize);
-    } else {
-      throw new Error('Unsupported shape type:' + type);
-    }
-  }
-}
-
-var _excluded = ["width", "height", "trackMouseMove", "minZoom", "maxZoom", "tileSize", "onClick", "onRightClick", "onHover", "onElementMoved", "onWheel", "onFrame", "lockXAxis", "lockYAxis", "smoothingQuality", "dragObjects", "deltaLeft", "deltaTop", "showMinimap", "minimapWidth", "minimapHeight", "minimapFilter"];
-var elements = {};
-function Canvas2D(_ref) {
-  var width = _ref.width,
-    height = _ref.height,
-    _ref$trackMouseMove = _ref.trackMouseMove,
-    trackMouseMove = _ref$trackMouseMove === void 0 ? true : _ref$trackMouseMove,
-    _ref$minZoom = _ref.minZoom,
-    minZoom = _ref$minZoom === void 0 ? 1 : _ref$minZoom,
-    _ref$maxZoom = _ref.maxZoom,
-    maxZoom = _ref$maxZoom === void 0 ? 1 : _ref$maxZoom,
-    _ref$tileSize = _ref.tileSize,
-    tileSize = _ref$tileSize === void 0 ? 1 : _ref$tileSize,
-    onClick = _ref.onClick,
-    onRightClick = _ref.onRightClick,
-    onHover = _ref.onHover,
-    onElementMoved = _ref.onElementMoved,
-    onWheel = _ref.onWheel,
-    onFrame = _ref.onFrame,
-    _ref$lockXAxis = _ref.lockXAxis,
-    lockXAxis = _ref$lockXAxis === void 0 ? false : _ref$lockXAxis,
-    _ref$lockYAxis = _ref.lockYAxis,
-    lockYAxis = _ref$lockYAxis === void 0 ? false : _ref$lockYAxis,
-    _ref$smoothingQuality = _ref.smoothingQuality,
-    smoothingQuality = _ref$smoothingQuality === void 0 ? 'medium' : _ref$smoothingQuality,
-    _ref$dragObjects = _ref.dragObjects,
-    dragObjects = _ref$dragObjects === void 0 ? false : _ref$dragObjects,
-    _ref$deltaLeft = _ref.deltaLeft,
-    deltaLeft = _ref$deltaLeft === void 0 ? 0 : _ref$deltaLeft,
-    _ref$deltaTop = _ref.deltaTop,
-    deltaTop = _ref$deltaTop === void 0 ? 0 : _ref$deltaTop,
-    _ref$showMinimap = _ref.showMinimap,
-    showMinimap = _ref$showMinimap === void 0 ? false : _ref$showMinimap,
-    _ref$minimapWidth = _ref.minimapWidth,
-    minimapWidth = _ref$minimapWidth === void 0 ? 240 : _ref$minimapWidth,
-    _ref$minimapHeight = _ref.minimapHeight,
-    minimapHeight = _ref$minimapHeight === void 0 ? 120 : _ref$minimapHeight,
-    _ref$minimapFilter = _ref.minimapFilter,
-    minimapFilter = _ref$minimapFilter === void 0 ? function (e) {
-      return true;
-    } : _ref$minimapFilter,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  if (!elements[otherProps.id]) {
-    elements[otherProps.id] = [];
-  }
-  var _useState = React.useState({}),
-    state = _useState[0],
-    setState = _useState[1];
-  var canvasRef = React.useCallback(function (canvas) {
-    if (canvas !== null) {
-      var context = canvas.getContext('2d');
-      if (smoothingQuality === false) {
-        context.imageSmoothingEnabled = false;
-      } else {
-        context.imageSmoothingEnabled = true;
-        context.imageSmoothingQuality = smoothingQuality;
-      }
-      setState(function (s) {
-        return _extends({}, s, {
-          boundingClientRect: canvas.getBoundingClientRect(),
-          canvas: canvas,
-          context: context,
-          left: width / 2,
-          top: height / 2,
-          width: width,
-          height: height,
-          zoom: 1
-        });
-      });
-    }
-  }, []);
-  var canvasMapRef = React.useCallback(function (minimapCanvas) {
-    if (minimapCanvas !== null) {
-      var minimapContext = minimapCanvas.getContext('2d');
-      setState(function (s) {
-        return _extends({}, s, {
-          boundingClientRect: minimapCanvas.getBoundingClientRect(),
-          minimapCanvas: minimapCanvas,
-          minimapContext: minimapContext
-        });
-      });
-    }
-  }, []);
-  state.deltaTop = deltaTop;
-  state.deltaLeft = deltaLeft;
-  if (typeof width !== 'number' || typeof height !== 'number') {
-    throw new Error('width/height should be specified and be numbers.');
-  }
-  if (minZoom > maxZoom) {
-    throw new Error('minZoom should be lower than maxZoom.');
-  }
-  if (typeof onClick !== 'function' && typeof onClick !== 'undefined') {
-    throw new Error('onClick should be a function.');
-  }
-  if (typeof onFrame !== 'function') {
-    throw new Error('onFrame should be a function.');
-  }
-  var onMouseMove = null;
-  if (trackMouseMove) {
-    onMouseMove = function onMouseMove(e) {
-      return mouseMove(e, elements[otherProps.id], tileSize, state, setState, lockXAxis, lockYAxis, dragObjects, onElementMoved, onHover);
-    };
-  }
-  var onWheelFn = function onWheelFn(e) {
-    if (onWheel) {
-      onWheel(e);
-    }
-    if (minZoom !== maxZoom) {
-      mouseWheel(e, state, setState, minZoom, maxZoom);
-    }
-  };
-  var onClickFn = null;
-  if (onClick) {
-    onClickFn = function onClickFn(e) {
-      return onClick(elementClick(e, elements[otherProps.id], tileSize, state));
-    };
-  }
-  React.useEffect(function () {
-    function onRightClickEvent(e) {
-      e.preventDefault();
-      onRightClick(elementRightClick(e, elements[otherProps.id], tileSize, state));
-    }
-    if (onRightClick && state.canvas) {
-      state.canvas.addEventListener('contextmenu', onRightClickEvent);
-      return function () {
-        state.canvas.removeEventListener('contextmenu', onRightClickEvent);
-      };
-    }
-  }, [state.canvas, onRightClick]);
-  React.useEffect(function () {
-    var shouldRender = true;
-    function render() {
-      if (!shouldRender) {
-        return;
-      }
-      elements[otherProps.id] = onFrame();
-      var sortedElements = sortElements(elements[otherProps.id]);
-      if (state.context) {
-        renderCanvas(state.context, width, height, sortedElements, tileSize, state);
-      }
-      if (showMinimap && state.minimapContext) {
-        var filteredElementsList = sortedElements.filter(minimapFilter);
-        var ratio = calcRatioForMinimap(filteredElementsList, width, height, minimapWidth, minimapHeight, tileSize);
-        renderCanvas(state.minimapContext, minimapWidth, minimapHeight, filteredElementsList, tileSize / ratio, {
-          left: minimapWidth / 2,
-          top: minimapHeight / 2,
-          deltaLeft: 0,
-          deltaTop: 0,
-          zoom: 1
-        });
-      }
-      window.requestAnimationFrame(render);
-    }
-    window.requestAnimationFrame(render);
-    return function () {
-      shouldRender = false;
-    };
-  }, [state.left, state.top, state.deltaLeft, state.deltaTop, state.zoom, state.context, onFrame]);
-  React.useEffect(function () {
-    setState(function (s) {
-      return _extends({}, s, {
-        left: width / 2,
-        top: height / 2,
-        width: width,
-        height: height
-      });
-    });
-  }, [width, height]);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("canvas", _extends({
-    ref: canvasRef,
-    width: width,
-    height: height,
-    onPointerMove: onMouseMove,
-    onWheel: onWheelFn,
-    onClick: onClickFn,
-    className: "canvas2d-wrapper"
-  }, otherProps)), showMinimap && /*#__PURE__*/React__default.createElement("canvas", {
-    ref: canvasMapRef,
-    width: minimapWidth,
-    height: minimapHeight,
-    className: "canvas2d-wrapper-minimap"
-  }));
-}
-
-function preloadImages(images) {
-  for (var _iterator = _createForOfIteratorHelperLoose(images), _step; !(_step = _iterator()).done;) {
-    var image = _step.value;
-    __canvas2dWrapper__.imgCache[image] = new Image();
-    __canvas2dWrapper__.imgCache[image].src = image;
-  }
-}
-
-var intervalId = 0;
-var FRAME_INTERVAL = 15;
-function useGamepad() {
-  var _useState = React.useState(),
-    gamepad = _useState[0],
-    setGamepad = _useState[1];
-  React.useEffect(function () {
-    clearInterval(intervalId);
-    intervalId = setInterval(function () {
-      return setGamepad(navigator.getGamepads()[0]);
-    }, FRAME_INTERVAL);
-  }, []);
-  return gamepad;
-}
-
-function useKeyboard() {
-  var _useState = React.useState({}),
-    keyboard = _useState[0],
-    setKeyboard = _useState[1];
-  React.useEffect(function () {
-    var keydown = function keydown(e) {
-      keyboard[e.key] = true;
-      setKeyboard(JSON.parse(JSON.stringify(keyboard)));
-    };
-    document.addEventListener('keydown', keydown);
-    var keyup = function keyup(e) {
-      keyboard[e.key] = false;
-      setKeyboard(JSON.parse(JSON.stringify(keyboard)));
-    };
-    document.addEventListener('keyup', keyup);
-    return function () {
-      document.removeEventListener('keydown', keydown);
-      document.removeEventListener('keyup', keyup);
-    };
-  }, []);
-  return keyboard;
-}
-
-function useMousePosition(includeTouch) {
-  if (includeTouch === void 0) {
-    includeTouch = true;
-  }
-  var _useState = React.useState({
-      x: null,
-      y: null
-    }),
-    mousePosition = _useState[0],
-    setMousePosition = _useState[1];
-  React.useEffect(function () {
-    var updateMousePosition = function updateMousePosition(ev) {
-      var x, y;
-      if (ev.touches) {
-        var touch = ev.touches[0];
-        var _ref = [touch.clientX, touch.clientY];
-        x = _ref[0];
-        y = _ref[1];
-      } else {
-        var _ref2 = [ev.clientX, ev.clientY];
-        x = _ref2[0];
-        y = _ref2[1];
-      }
-      setMousePosition({
-        x: x,
-        y: y
-      });
-    };
-    window.addEventListener('mousemove', updateMousePosition);
-    if (includeTouch) {
-      window.addEventListener('touchmove', updateMousePosition);
-    }
-    return function () {
-      window.removeEventListener('mousemove', updateMousePosition);
-      if (includeTouch) {
-        window.removeEventListener('touchmove', updateMousePosition);
-      }
-    };
-  }, [includeTouch]);
-  return mousePosition;
-}
-
-function getWindowDimensions() {
-  var _document$documentEle = document.documentElement,
-    width = _document$documentEle.clientWidth,
-    height = _document$documentEle.clientHeight;
-  return {
-    width: width,
-    height: height
-  };
-}
-function useWindowDimensions() {
-  var _useState = React.useState(getWindowDimensions()),
-    windowDimensions = _useState[0],
-    setWindowDimensions = _useState[1];
-  React.useEffect(function () {
-    function handleResize() {
-      setWindowDimensions(getWindowDimensions());
-    }
-    window.addEventListener('resize', handleResize);
-    return function () {
-      return window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-  return windowDimensions;
-}
-
-exports.Canvas2D = Canvas2D;
-exports.CanvasImage = CanvasImage;
-exports.CanvasObject = CanvasObject;
-exports.Circle = Circle;
-exports.LinePath = LinePath;
-exports.Polygon = Polygon;
-exports.Rect = Rect;
-exports.preloadImages = preloadImages;
-exports.useGamepad = useGamepad;
-exports.useKeyboard = useKeyboard;
-exports.useMousePosition = useMousePosition;
-exports.useWindowDimensions = useWindowDimensions;
-//# sourceMappingURL=index.js.map