canvas2d-wrapper 1.9.1 → 1.10.0

package/canvas2d-wrapper.d.ts

@@ -1,30 +1,49 @@
 declare module "canvas2d-wrapper" {
+	export type Position2D = {
+		x: number,
+		y: number
+	};
+
+	export type Surface2D = {
+		x: number,
+		y: number,
+		width: number,
+		height: number
+	};
+
+	export type Canvas2DEventCallbackParams = {
+		id: string | null,
+		element: CanvasObject | null,
+		originalEvent: Event,
+		posOnMap: Position2D
+	};
+
 	// React component
 	export type Canvas2DProps = {
-		width : number,
-		height : number,
-		trackMouseMove? : boolean,
-		minZoom? : number,
-		maxZoom? : number,
-		tileSize? : number,
-		onClick : (element : CanvasObject) => void,
-		onRightClick? : (element : CanvasObject) => void,
-		onHover? : (element : CanvasObject, { x, y } : { x : number, y : number }) => void,
-		onElementMoved? : (element : CanvasObject, x : number, y : number) => void,
-		onWheel? : (e : Event) => void,
-		onFrame : () => CanvasObject[],
-		lockXAxis? : boolean,
-		lockYAxis? : boolean,
-		smoothingQuality? : string,
-		dragObjects? : boolean,
-		deltaLeft? : number,
-		deltaTop? : number,
+		width: number,
+		height: number,
+		trackMouseMove?: boolean,
+		minZoom?: number,
+		maxZoom?: number,
+		tileSize?: number,
+		onClick: ({ id, element, originalEvent }: Canvas2DEventCallbackParams) => void,
+		onRightClick?: ({ id, element, originalEvent }: Canvas2DEventCallbackParams) => void,
+		onHover?: ({ id, element, originalEvent }?: Canvas2DEventCallbackParams | null, position: Position2D | undefined) => void,
+		onElementMoved?: (element: CanvasObject, x: number, y: number) => void,
+		onWheel?: (e: Event) => void,
+		onFrame: () => CanvasObject[],
+		lockXAxis?: boolean,
+		lockYAxis?: boolean,
+		smoothingQuality?: string,
+		dragObjects?: boolean,
+		deltaLeft?: number,
+		deltaTop?: number,
 		// Additional props
 		id: string,
 		className?: string,
 	};
 
-	export function Canvas2D(props : Canvas2DProps);
+	export function Canvas2D(props: Canvas2DProps);
 
 	// Shapes
 	export class CanvasObject {
@@ -36,11 +55,11 @@ declare module "canvas2d-wrapper" {
 			draggable?: boolean
 		);
 
-		get constructorName() : string;
+		get constructorName(): string;
 
-		get zIndex() : number;
+		get zIndex(): number;
 
-		set zIndex(zIndex : number);
+		set zIndex(zIndex: number);
 
 		id: string;
 		x: number;
@@ -66,7 +85,7 @@ declare module "canvas2d-wrapper" {
 	}
 
 	export class CanvasImage extends ColoredCanvasObject {
-		constructor({ id, x, y, width, height, src, zIndex, draggable } : {
+		constructor({ id, x, y, width, height, src, zIndex, draggable }: {
 			id: string,
 			x: number,
 			y: number,
@@ -77,7 +96,7 @@ declare module "canvas2d-wrapper" {
 			draggable?: boolean,
 		});
 
-		crop(sx : number, swidth : number, sheight : number);
+		crop(sx: number, swidth: number, sheight: number);
 
 		src: string;
 		width: number;
@@ -85,7 +104,7 @@ declare module "canvas2d-wrapper" {
 	}
 
 	export class Circle extends ColoredCanvasObject {
-		constructor({ id, x, y, radius, fill, stroke, zIndex, draggable } : {
+		constructor({ id, x, y, radius, fill, stroke, zIndex, draggable }: {
 			id: string,
 			x: number,
 			y: number,
@@ -99,27 +118,38 @@ declare module "canvas2d-wrapper" {
 		radius: number;
 	}
 
+	export class LinePath extends ColoredCanvasObject {
+		constructor({ id, points, stroke, zIndex }: {
+			id: string,
+			lineWidth: number,
+			points: Position2D[],
+			stroke: string,
+			zIndex?: number,
+			smoothCorners?: boolean,
+			smoothCornersRadius?: number,
+		});
+
+		points: Position2D[];
+		lineWidth: number;
+		smoothCorners?: boolean;
+		smoothCornersRadius?: number;
+	}
+
 	export class Polygon extends ColoredCanvasObject {
-		constructor({ id, x, y, width, height, src, zIndex, draggable } : {
+		constructor({ id, points, width, height, src, zIndex, draggable }: {
 			id: string,
-			points: {
-				x: number,
-				y: number,
-			}[],
+			points: Position2D[],
 			fill?: string,
 			stroke?: string,
 			zIndex?: number,
 			draggable?: boolean,
 		});
 
-		points: {
-			x: number,
-			y: number,
-		}[];
+		points: Position2D[];
 	}
 
 	export class Rect extends ColoredCanvasObject {
-		constructor({ id, x, y, width, height, src, zIndex, draggable } : {
+		constructor({ id, x, y, width, height, src, zIndex, draggable }: {
 			id: string,
 			x: number,
 			y: number,
@@ -136,17 +166,17 @@ declare module "canvas2d-wrapper" {
 	}
 
 	// Functions
-	export function preloadImages(images : string[]) : void;
+	export function preloadImages(images: string[]): void;
 
 	// Hooks
-	export function useGamepad() : { [id : string] : string };
-	export function useKeyboard() : { [id : string] : string };
-	export function useMousePosition() : {
-		x : number | null,
-		y : number | null,
+	export function useGamepad(): { [id: string]: string };
+	export function useKeyboard(): { [id: string]: string };
+	export function useMousePosition(): {
+		x: number | null,
+		y: number | null,
 	};
-	export function useWindowDimensions() : {
-		width : number,
-		height : number,
+	export function useWindowDimensions(): {
+		width: number,
+		height: number,
 	};
 }

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)
+    }
   };
 }
 
@@ -335,6 +355,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 +429,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 +528,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;
+  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 +591,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;
@@ -658,7 +754,7 @@ function Canvas2D(_ref) {
     return function () {
       shouldRender = false;
     };
-  }, [state.context, onFrame]);
+  }, [state.left, state.top, state.deltaLeft, state.deltaTop, state.zoom, state.context, onFrame]);
   return /*#__PURE__*/React__default.createElement("canvas", _extends({
     ref: canvasRef,
     width: width,
@@ -698,14 +794,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 +883,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;