canvas2d-wrapper 1.9.1 → 1.11.0

package/dist/index.js

@@ -52,7 +52,7 @@ 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;
+    if (-1 !== e.indexOf(n)) continue;
     t[n] = r[n];
   }
   return t;
@@ -137,7 +137,11 @@ function collideElement(e, elements, left, top, tileSize, zoom) {
           validElements.push({
             id: element.id,
             element: element,
-            originalEvent: e
+            originalEvent: e,
+            posOnMap: {
+              x: element.x,
+              y: element.y
+            }
           });
         }
         break;
@@ -146,7 +150,11 @@ function collideElement(e, elements, left, top, tileSize, zoom) {
           validElements.push({
             id: element.id,
             element: element,
-            originalEvent: e
+            originalEvent: e,
+            posOnMap: {
+              x: element.x,
+              y: element.y
+            }
           });
         }
         break;
@@ -155,7 +163,11 @@ function collideElement(e, elements, left, top, tileSize, zoom) {
           validElements.push({
             id: element.id,
             element: element,
-            originalEvent: e
+            originalEvent: e,
+            posOnMap: {
+              x: element.x,
+              y: element.y
+            }
           });
         }
         break;
@@ -195,7 +207,11 @@ function elementClick(e, elements, tileSize, state) {
   return {
     id: null,
     element: null,
-    originalEvent: e
+    originalEvent: e,
+    posOnMap: {
+      x: Math.floor(left / tileSize / state.zoom),
+      y: Math.floor(top / tileSize / state.zoom)
+    }
   };
 }
 
@@ -209,7 +225,11 @@ function elementRightClick(e, elements, tileSize, state) {
   return {
     id: null,
     element: null,
-    originalEvent: e
+    originalEvent: e,
+    posOnMap: {
+      x: Math.floor(left / tileSize / state.zoom),
+      y: Math.floor(top / tileSize / state.zoom)
+    }
   };
 }
 
@@ -286,6 +306,33 @@ function mouseWheel(event, props, setProps, minZoom, maxZoom) {
   }));
 }
 
+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) {
@@ -335,6 +382,39 @@ var CanvasObject = /*#__PURE__*/function () {
   }]);
 }();
 
+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;
+    _this = _CanvasObject.call(this, id, x, y, zIndex, draggable) || this;
+    _this.width = width;
+    _this.height = height;
+    _this.src = src;
+    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) {
     var _this;
@@ -376,83 +456,76 @@ var Circle = /*#__PURE__*/function (_ColoredCanvasObject) {
   }]);
 }(ColoredCanvasObject);
 
-var CanvasImage = /*#__PURE__*/function (_CanvasObject) {
-  function CanvasImage(_ref) {
+var LinePath = /*#__PURE__*/function (_ColoredCanvasObject) {
+  function LinePath(_ref) {
     var _this;
     var id = _ref.id,
-      x = _ref.x,
-      y = _ref.y,
-      width = _ref.width,
-      height = _ref.height,
-      src = _ref.src,
+      lineWidth = _ref.lineWidth,
+      points = _ref.points,
+      stroke = _ref.stroke,
       zIndex = _ref.zIndex,
-      draggable = _ref.draggable;
-    _this = _CanvasObject.call(this, id, x, y, zIndex, draggable) || this;
-    _this.width = width;
-    _this.height = height;
-    _this.src = src;
+      smoothCorners = _ref.smoothCorners,
+      smoothCornersRadius = _ref.smoothCornersRadius;
+    _this = _ColoredCanvasObject.call(this, id, points[0].x, points[0].y, 'none', stroke, zIndex, false) || this;
+    _this.points = points;
+    _this.lineWidth = lineWidth;
+    _this.smoothCorners = smoothCorners;
+    _this.smoothCornersRadius = smoothCornersRadius;
     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, [{
+  _inheritsLoose(LinePath, _ColoredCanvasObject);
+  return _createClass(LinePath, [{
     key: "constructorName",
     get: function get() {
-      return 'CanvasImage';
+      return 'LinePath';
     }
   }]);
-}(CanvasObject);
+}(ColoredCanvasObject);
 
-var Rect = /*#__PURE__*/function (_ColoredCanvasObject) {
-  function Rect(_ref) {
+var Polygon = /*#__PURE__*/function (_ColoredCanvasObject) {
+  function Polygon(_ref) {
     var _this;
     var id = _ref.id,
-      x = _ref.x,
-      y = _ref.y,
-      width = _ref.width,
-      height = _ref.height,
+      points = _ref.points,
       fill = _ref.fill,
       stroke = _ref.stroke,
       zIndex = _ref.zIndex,
       draggable = _ref.draggable;
-    _this = _ColoredCanvasObject.call(this, id, x, y, fill, stroke, zIndex, draggable) || this;
-    _this.width = width;
-    _this.height = height;
+    _this = _ColoredCanvasObject.call(this, id, points[0].x, points[0].y, fill, stroke, zIndex, draggable) || this;
+    _this.points = points;
     return _this;
   }
-  _inheritsLoose(Rect, _ColoredCanvasObject);
-  return _createClass(Rect, [{
+  _inheritsLoose(Polygon, _ColoredCanvasObject);
+  return _createClass(Polygon, [{
     key: "constructorName",
     get: function get() {
-      return 'Rect';
+      return 'Polygon';
     }
   }]);
 }(ColoredCanvasObject);
 
-var Polygon = /*#__PURE__*/function (_ColoredCanvasObject) {
-  function Polygon(_ref) {
+var Rect = /*#__PURE__*/function (_ColoredCanvasObject) {
+  function Rect(_ref) {
     var _this;
     var id = _ref.id,
-      points = _ref.points,
+      x = _ref.x,
+      y = _ref.y,
+      width = _ref.width,
+      height = _ref.height,
       fill = _ref.fill,
       stroke = _ref.stroke,
       zIndex = _ref.zIndex,
       draggable = _ref.draggable;
-    _this = _ColoredCanvasObject.call(this, id, points[0].x, points[0].y, fill, stroke, zIndex, draggable) || this;
-    _this.points = points;
+    _this = _ColoredCanvasObject.call(this, id, x, y, fill, stroke, zIndex, draggable) || this;
+    _this.width = width;
+    _this.height = height;
     return _this;
   }
-  _inheritsLoose(Polygon, _ColoredCanvasObject);
-  return _createClass(Polygon, [{
+  _inheritsLoose(Rect, _ColoredCanvasObject);
+  return _createClass(Rect, [{
     key: "constructorName",
     get: function get() {
-      return 'Polygon';
+      return 'Rect';
     }
   }]);
 }(ColoredCanvasObject);
@@ -482,16 +555,55 @@ function renderImage(context, element, left, top, localTileSize) {
   }
 }
 
-function renderRect(context, element, left, top, localTileSize) {
-  if (element.fill) {
-    context.fillRect(left + element.x * localTileSize, top + element.y * localTileSize, element.width * localTileSize, element.height * localTileSize);
-  }
-  if (element.stroke) {
-    context.strokeRect(left + element.x * localTileSize, top + element.y * localTileSize, element.width * localTileSize, element.height * localTileSize);
+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 renderRect$1(context, element, left, top, localTileSize) {
+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++) {
@@ -506,10 +618,21 @@ function renderRect$1(context, element, left, top, localTileSize) {
   }
 }
 
+function renderRect(context, element, left, top, localTileSize) {
+  if (element.fill) {
+    context.fillRect(left + element.x * localTileSize, top + element.y * localTileSize, element.width * localTileSize, element.height * localTileSize);
+  }
+  if (element.stroke) {
+    context.strokeRect(left + element.x * localTileSize, top + element.y * localTileSize, element.width * localTileSize, element.height * localTileSize);
+  }
+}
+
 var _renderFn;
-var renderFn = (_renderFn = {}, _renderFn[new Circle({}).constructorName] = renderCircle, _renderFn[new CanvasImage({}).constructorName] = renderImage, _renderFn[new Rect({}).constructorName] = renderRect, _renderFn[new Polygon({
+var renderFn = (_renderFn = {}, _renderFn[new Circle({}).constructorName] = renderCircle, _renderFn[new CanvasImage({}).constructorName] = renderImage, _renderFn[new LinePath({
+  points: [{}]
+}).constructorName] = renderLinePath, _renderFn[new Polygon({
   points: [{}]
-}).constructorName] = renderRect$1, _renderFn);
+}).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;
@@ -536,7 +659,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 _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,
@@ -567,6 +690,16 @@ function Canvas2D(_ref) {
     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] = [];
@@ -583,15 +716,29 @@ function Canvas2D(_ref) {
         context.imageSmoothingEnabled = true;
         context.imageSmoothingQuality = smoothingQuality;
       }
-      setState({
-        boundingClientRect: canvas.getBoundingClientRect(),
-        canvas: canvas,
-        context: context,
-        left: width / 2,
-        top: height / 2,
-        width: width,
-        height: height,
-        zoom: 1
+      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
+        });
       });
     }
   }, []);
@@ -652,14 +799,25 @@ function Canvas2D(_ref) {
       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 * state.zoom);
+        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.context, onFrame]);
-  return /*#__PURE__*/React__default.createElement("canvas", _extends({
+  }, [state.left, state.top, state.deltaLeft, state.deltaTop, state.zoom, state.context, onFrame]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("canvas", _extends({
     ref: canvasRef,
     width: width,
     height: height,
@@ -667,7 +825,12 @@ function Canvas2D(_ref) {
     onWheel: onWheelFn,
     onClick: onClickFn,
     className: "canvas2d-wrapper"
-  }, otherProps));
+  }, otherProps)), showMinimap && /*#__PURE__*/React__default.createElement("canvas", {
+    ref: canvasMapRef,
+    width: minimapWidth,
+    height: minimapHeight,
+    className: "canvas2d-wrapper-minimap"
+  }));
 }
 
 function preloadImages(images) {
@@ -698,14 +861,20 @@ function useKeyboard() {
     keyboard = _useState[0],
     setKeyboard = _useState[1];
   React.useEffect(function () {
-    document.addEventListener('keydown', function (e) {
+    var keydown = function keydown(e) {
       keyboard[e.key] = true;
       setKeyboard(JSON.parse(JSON.stringify(keyboard)));
-    });
-    document.addEventListener('keyup', function (e) {
+    };
+    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;
 }
@@ -781,6 +950,7 @@ exports.Canvas2D = Canvas2D;
 exports.CanvasImage = CanvasImage;
 exports.CanvasObject = CanvasObject;
 exports.Circle = Circle;
+exports.LinePath = LinePath;
 exports.Polygon = Polygon;
 exports.Rect = Rect;
 exports.preloadImages = preloadImages;