canvas2d-wrapper 1.10.0 → 1.12.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2021-2022 Dysnomia
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2021-2025 Dysnomia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/canvas2d-wrapper.d.ts

@@ -41,6 +41,10 @@ declare module "canvas2d-wrapper" {
 		// Additional props
 		id: string,
 		className?: string,
+		showMinimap?: boolean,
+		minimapWidth?: number,
+		minimapHeight?: number,
+		minimapFilter?: (e: CanvasObject) => boolean,
 	};
 
 	export function Canvas2D(props: Canvas2DProps);
@@ -52,7 +56,8 @@ declare module "canvas2d-wrapper" {
 			x: number,
 			y: number,
 			zIndex?: number,
-			draggable?: boolean
+			draggable?: boolean,
+			hasCollisions?: boolean
 		);
 
 		get constructorName(): string;
@@ -65,6 +70,7 @@ declare module "canvas2d-wrapper" {
 		x: number;
 		y: number;
 		draggable: boolean | undefined;
+		hasCollisions: boolean | undefined;
 	}
 
 	export class ColoredCanvasObject extends CanvasObject {
@@ -77,7 +83,8 @@ declare module "canvas2d-wrapper" {
 			fill?: string,
 			stroke?: string,
 			zIndex?: number,
-			draggable?: boolean
+			draggable?: boolean,
+			hasCollisions?: boolean
 		);
 
 		fill: string | undefined;
@@ -94,6 +101,7 @@ declare module "canvas2d-wrapper" {
 			src: string,
 			zIndex?: number,
 			draggable?: boolean,
+			hasCollisions?: boolean
 		});
 
 		crop(sx: number, swidth: number, sheight: number);
@@ -113,6 +121,7 @@ declare module "canvas2d-wrapper" {
 			stroke?: string,
 			zIndex?: number,
 			draggable?: boolean,
+			hasCollisions?: boolean
 		});
 
 		radius: number;
@@ -127,6 +136,7 @@ declare module "canvas2d-wrapper" {
 			zIndex?: number,
 			smoothCorners?: boolean,
 			smoothCornersRadius?: number,
+			hasCollisions?: boolean
 		});
 
 		points: Position2D[];
@@ -143,6 +153,7 @@ declare module "canvas2d-wrapper" {
 			stroke?: string,
 			zIndex?: number,
 			draggable?: boolean,
+			hasCollisions?: boolean
 		});
 
 		points: Position2D[];
@@ -159,6 +170,7 @@ declare module "canvas2d-wrapper" {
 			stroke?: string,
 			zIndex?: number,
 			draggable?: boolean,
+			hasCollisions?: boolean
 		});
 
 		width: number;

package/dist/index.js

@@ -123,11 +123,52 @@ function inRect(element, x, y, left, top, localTileSize) {
   return x <= left && left <= x + width && y <= top && top <= 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) {
@@ -171,6 +212,19 @@ function collideElement(e, elements, left, top, tileSize, zoom) {
           });
         }
         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) {
@@ -306,6 +360,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) {
@@ -332,12 +413,13 @@ function sortElements(elements) {
 }
 
 var CanvasObject = /*#__PURE__*/function () {
-  function CanvasObject(id, x, y, zIndex, draggable) {
+  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",
@@ -365,8 +447,9 @@ var CanvasImage = /*#__PURE__*/function (_CanvasObject) {
       height = _ref.height,
       src = _ref.src,
       zIndex = _ref.zIndex,
-      draggable = _ref.draggable;
-    _this = _CanvasObject.call(this, id, x, y, zIndex, draggable) || this;
+      draggable = _ref.draggable,
+      hasCollisions = _ref.hasCollisions;
+    _this = _CanvasObject.call(this, id, x, y, zIndex, draggable, hasCollisions) || this;
     _this.width = width;
     _this.height = height;
     _this.src = src;
@@ -389,9 +472,9 @@ var CanvasImage = /*#__PURE__*/function (_CanvasObject) {
 }(CanvasObject);
 
 var ColoredCanvasObject = /*#__PURE__*/function (_CanvasObject) {
-  function ColoredCanvasObject(id, x, y, fill, stroke, zIndex, draggable) {
+  function ColoredCanvasObject(id, x, y, fill, stroke, zIndex, draggable, hasCollisions) {
     var _this;
-    _this = _CanvasObject.call(this, id, x, y, zIndex, draggable) || this;
+    _this = _CanvasObject.call(this, id, x, y, zIndex, draggable, hasCollisions) || this;
     _this.fill = fill;
     _this.stroke = stroke;
     return _this;
@@ -415,8 +498,9 @@ var Circle = /*#__PURE__*/function (_ColoredCanvasObject) {
       fill = _ref.fill,
       stroke = _ref.stroke,
       zIndex = _ref.zIndex,
-      draggable = _ref.draggable;
-    _this = _ColoredCanvasObject.call(this, id, x, y, fill, stroke, zIndex, draggable) || this;
+      draggable = _ref.draggable,
+      hasCollisions = _ref.hasCollisions;
+    _this = _ColoredCanvasObject.call(this, id, x, y, fill, stroke, zIndex, draggable, hasCollisions) || this;
     _this.radius = radius;
     return _this;
   }
@@ -438,8 +522,9 @@ var LinePath = /*#__PURE__*/function (_ColoredCanvasObject) {
       stroke = _ref.stroke,
       zIndex = _ref.zIndex,
       smoothCorners = _ref.smoothCorners,
-      smoothCornersRadius = _ref.smoothCornersRadius;
-    _this = _ColoredCanvasObject.call(this, id, points[0].x, points[0].y, 'none', stroke, zIndex, false) || this;
+      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;
@@ -463,8 +548,9 @@ var Polygon = /*#__PURE__*/function (_ColoredCanvasObject) {
       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;
+      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;
   }
@@ -488,8 +574,9 @@ var Rect = /*#__PURE__*/function (_ColoredCanvasObject) {
       fill = _ref.fill,
       stroke = _ref.stroke,
       zIndex = _ref.zIndex,
-      draggable = _ref.draggable;
-    _this = _ColoredCanvasObject.call(this, id, x, y, fill, stroke, zIndex, draggable) || this;
+      draggable = _ref.draggable,
+      hasCollisions = _ref.hasCollisions;
+    _this = _ColoredCanvasObject.call(this, id, x, y, fill, stroke, zIndex, draggable, hasCollisions) || this;
     _this.width = width;
     _this.height = height;
     return _this;
@@ -571,7 +658,7 @@ function renderLinePath(context, element, left, top, localTileSize) {
       context.lineTo(points[_i].x, points[_i].y);
     }
   }
-  context.lineWidth = element.lineWidth;
+  context.lineWidth = element.lineWidth * localTileSize;
   context.stroke();
   context.lineWidth = defaultLineWidth;
 }
@@ -632,7 +719,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,
@@ -663,6 +750,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] = [];
@@ -679,15 +776,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
+        });
       });
     }
   }, []);
@@ -748,6 +859,17 @@ 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);
@@ -755,7 +877,7 @@ function Canvas2D(_ref) {
       shouldRender = false;
     };
   }, [state.left, state.top, state.deltaLeft, state.deltaTop, state.zoom, state.context, onFrame]);
-  return /*#__PURE__*/React__default.createElement("canvas", _extends({
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("canvas", _extends({
     ref: canvasRef,
     width: width,
     height: height,
@@ -763,7 +885,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) {