canvas2d-wrapper 1.6.1 → 1.7.0

package/dist/index.modern.js

@@ -1,5 +1,64 @@
 import React, { useState, useCallback, useEffect } from '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 (e.includes(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];
@@ -12,93 +71,14 @@ function _toPrimitive(t, r) {
 }
 function _toPropertyKey(t) {
   var i = _toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : String(i);
-}
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
-  }
-}
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  Object.defineProperty(Constructor, "prototype", {
-    writable: false
-  });
-  return Constructor;
-}
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  _setPrototypeOf(subClass, superClass);
+  return "symbol" == typeof i ? i : i + "";
 }
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-  return _setPrototypeOf(o, p);
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-  if (it) return (it = it.call(o)).next.bind(it);
-  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-    if (it) o = it;
-    var i = 0;
-    return function () {
-      if (i >= o.length) return {
-        done: true
-      };
-      return {
-        done: false,
-        value: o[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;
   }
-  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 calcTileSize(tileSize, zoom) {
@@ -142,6 +122,7 @@ function inRect(element, x, y, left, top, localTileSize) {
 
 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;
     var x = element.x * localTileSize;
@@ -150,34 +131,55 @@ function collideElement(e, elements, left, top, tileSize, zoom) {
       case 'Rect':
       case 'CanvasImage':
         if (inRect(element, x, y, left, top, localTileSize)) {
-          return {
+          validElements.push({
             id: element.id,
             element: element,
             originalEvent: e
-          };
+          });
         }
         break;
       case 'Circle':
         if (inCircle(element, x, y, left, top, localTileSize)) {
-          return {
+          validElements.push({
             id: element.id,
             element: element,
             originalEvent: e
-          };
+          });
         }
         break;
       case 'Polygon':
         if (inPoly(element, x, y, left, top, localTileSize)) {
-          return {
+          validElements.push({
             id: element.id,
             element: element,
             originalEvent: e
-          };
+          });
         }
         break;
     }
   }
-  return null;
+  if (validElements.length === 0) {
+    return null;
+  }
+  if (validElements.length === 1) {
+    return validElements[0];
+  }
+  validElements.sort(function (a, b) {
+    if (a.zIndex > b.zIndex) {
+      return 1;
+    }
+    if (a.zIndex < b.zIndex) {
+      return -1;
+    }
+    if (a.id > b.id) {
+      return 1;
+    }
+    if (a.id < b.id) {
+      return -1;
+    }
+    return 0;
+  });
+  return validElements[0];
 }
 
 function elementClick(e, elements, tileSize, state) {
@@ -311,7 +313,7 @@ var CanvasObject = /*#__PURE__*/function () {
     this['z-index'] = zIndex;
     this.draggable = draggable;
   }
-  _createClass(CanvasObject, [{
+  return _createClass(CanvasObject, [{
     key: "zIndex",
     get: function get() {
       return this['z-index'] || 0;
@@ -325,11 +327,9 @@ var CanvasObject = /*#__PURE__*/function () {
       return 'CanvasObject';
     }
   }]);
-  return CanvasObject;
 }();
 
 var ColoredCanvasObject = /*#__PURE__*/function (_CanvasObject) {
-  _inheritsLoose(ColoredCanvasObject, _CanvasObject);
   function ColoredCanvasObject(id, x, y, fill, stroke, zIndex, draggable) {
     var _this;
     _this = _CanvasObject.call(this, id, x, y, zIndex, draggable) || this;
@@ -337,17 +337,16 @@ var ColoredCanvasObject = /*#__PURE__*/function (_CanvasObject) {
     _this.stroke = stroke;
     return _this;
   }
-  _createClass(ColoredCanvasObject, [{
+  _inheritsLoose(ColoredCanvasObject, _CanvasObject);
+  return _createClass(ColoredCanvasObject, [{
     key: "constructorName",
     get: function get() {
       return 'ColoredCanvasObject';
     }
   }]);
-  return ColoredCanvasObject;
 }(CanvasObject);
 
 var Circle = /*#__PURE__*/function (_ColoredCanvasObject) {
-  _inheritsLoose(Circle, _ColoredCanvasObject);
   function Circle(_ref) {
     var _this;
     var id = _ref.id,
@@ -362,17 +361,16 @@ var Circle = /*#__PURE__*/function (_ColoredCanvasObject) {
     _this.radius = radius;
     return _this;
   }
-  _createClass(Circle, [{
+  _inheritsLoose(Circle, _ColoredCanvasObject);
+  return _createClass(Circle, [{
     key: "constructorName",
     get: function get() {
       return 'Circle';
     }
   }]);
-  return Circle;
 }(ColoredCanvasObject);
 
 var CanvasImage = /*#__PURE__*/function (_CanvasObject) {
-  _inheritsLoose(CanvasImage, _CanvasObject);
   function CanvasImage(_ref) {
     var _this;
     var id = _ref.id,
@@ -389,6 +387,7 @@ var CanvasImage = /*#__PURE__*/function (_CanvasObject) {
     _this.src = src;
     return _this;
   }
+  _inheritsLoose(CanvasImage, _CanvasObject);
   var _proto = CanvasImage.prototype;
   _proto.crop = function crop(x, y, width, height) {
     this.sx = sx;
@@ -396,17 +395,15 @@ var CanvasImage = /*#__PURE__*/function (_CanvasObject) {
     this.swidth = swidth;
     this.sheight = sheight;
   };
-  _createClass(CanvasImage, [{
+  return _createClass(CanvasImage, [{
     key: "constructorName",
     get: function get() {
       return 'CanvasImage';
     }
   }]);
-  return CanvasImage;
 }(CanvasObject);
 
 var Rect = /*#__PURE__*/function (_ColoredCanvasObject) {
-  _inheritsLoose(Rect, _ColoredCanvasObject);
   function Rect(_ref) {
     var _this;
     var id = _ref.id,
@@ -423,17 +420,16 @@ var Rect = /*#__PURE__*/function (_ColoredCanvasObject) {
     _this.height = height;
     return _this;
   }
-  _createClass(Rect, [{
+  _inheritsLoose(Rect, _ColoredCanvasObject);
+  return _createClass(Rect, [{
     key: "constructorName",
     get: function get() {
       return 'Rect';
     }
   }]);
-  return Rect;
 }(ColoredCanvasObject);
 
 var Polygon = /*#__PURE__*/function (_ColoredCanvasObject) {
-  _inheritsLoose(Polygon, _ColoredCanvasObject);
   function Polygon(_ref) {
     var _this;
     var id = _ref.id,
@@ -446,13 +442,13 @@ var Polygon = /*#__PURE__*/function (_ColoredCanvasObject) {
     _this.points = points;
     return _this;
   }
-  _createClass(Polygon, [{
+  _inheritsLoose(Polygon, _ColoredCanvasObject);
+  return _createClass(Polygon, [{
     key: "constructorName",
     get: function get() {
       return 'Polygon';
     }
   }]);
-  return Polygon;
 }(ColoredCanvasObject);
 
 function renderCircle(context, element, left, top, localTileSize) {
@@ -535,7 +531,7 @@ function renderCanvas(context, width, height, elements, tileSize, state) {
 }
 
 var _excluded = ["width", "height", "trackMouseMove", "minZoom", "maxZoom", "tileSize", "onClick", "onRightClick", "onHover", "onElementMoved", "onWheel", "onFrame", "lockXAxis", "lockYAxis", "smoothingQuality", "dragObjects", "deltaLeft", "deltaTop"];
-var elements = [];
+var elements = {};
 function Canvas2D(_ref) {
   var width = _ref.width,
     height = _ref.height,
@@ -566,6 +562,9 @@ function Canvas2D(_ref) {
     _ref$deltaTop = _ref.deltaTop,
     deltaTop = _ref$deltaTop === void 0 ? 0 : _ref$deltaTop,
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  if (!elements[otherProps.id]) {
+    elements[otherProps.id] = [];
+  }
   var _useState = useState({}),
     state = _useState[0],
     setState = _useState[1];
@@ -607,7 +606,7 @@ function Canvas2D(_ref) {
   var onMouseMove = null;
   if (trackMouseMove) {
     onMouseMove = function onMouseMove(e) {
-      return mouseMove(e, elements, tileSize, state, setState, lockXAxis, lockYAxis, dragObjects, onElementMoved, onHover);
+      return mouseMove(e, elements[otherProps.id], tileSize, state, setState, lockXAxis, lockYAxis, dragObjects, onElementMoved, onHover);
     };
   }
   var onWheelFn = function onWheelFn(e) {
@@ -621,13 +620,13 @@ function Canvas2D(_ref) {
   var onClickFn = null;
   if (onClick) {
     onClickFn = function onClickFn(e) {
-      return onClick(elementClick(e, elements, tileSize, state));
+      return onClick(elementClick(e, elements[otherProps.id], tileSize, state));
     };
   }
   useEffect(function () {
     function onRightClickEvent(e) {
       e.preventDefault();
-      onRightClick(elementRightClick(e, elements, tileSize, state));
+      onRightClick(elementRightClick(e, elements[otherProps.id], tileSize, state));
     }
     if (onRightClick && state.canvas) {
       state.canvas.addEventListener('contextmenu', onRightClickEvent);
@@ -642,8 +641,8 @@ function Canvas2D(_ref) {
       if (!shouldRender) {
         return;
       }
-      elements = onFrame();
-      var sortedElements = sortElements(elements);
+      elements[otherProps.id] = onFrame();
+      var sortedElements = sortElements(elements[otherProps.id]);
       if (state.context) {
         renderCanvas(state.context, width, height, sortedElements, tileSize, state);
       }