canvas2d-wrapper 1.12.1 → 1.14.0

package/README.md

@@ -1,6 +1,6 @@
 # canvas2d-wrapper
 
-> A React Wrapper to use HTML5 canvas with mouse move and zoom abilities.
+> A React Wrapper to draw on an HTML5 canvas with mouse move and zoom abilities.
 
 [![NPM](https://img.shields.io/npm/v/canvas2d-wrapper.svg)](https://www.npmjs.com/package/canvas2d-wrapper)  
 [![Reliability Rating](https://sonar.dysnomia.studio/api/project_badges/measure?project=canvas2d-wrapper&metric=reliability_rating)](https://sonar.dysnomia.studio/dashboard?id=canvas2d-wrapper) [![Maintainability Rating](https://sonar.dysnomia.studio/api/project_badges/measure?project=canvas2d-wrapper&metric=sqale_rating)](https://sonar.dysnomia.studio/dashboard?id=canvas2d-wrapper) [![Security Rating](https://sonar.dysnomia.studio/api/project_badges/measure?project=canvas2d-wrapper&metric=security_rating)](https://sonar.dysnomia.studio/dashboard?id=canvas2d-wrapper)  

package/canvas2d-wrapper.d.ts

@@ -101,7 +101,8 @@ declare module "canvas2d-wrapper" {
 			src: string,
 			zIndex?: number,
 			draggable?: boolean,
-			hasCollisions?: boolean
+			hasCollisions?: boolean,
+			rotation?: number,
 		});
 
 		crop(sx: number, swidth: number, sheight: number);
@@ -109,6 +110,7 @@ declare module "canvas2d-wrapper" {
 		src: string;
 		width: number;
 		height: number;
+		rotation?: number;
 	}
 
 	export class Circle extends ColoredCanvasObject {
@@ -170,11 +172,13 @@ declare module "canvas2d-wrapper" {
 			stroke?: string,
 			zIndex?: number,
 			draggable?: boolean,
-			hasCollisions?: boolean
+			hasCollisions?: boolean,
+			rotation?: number,
 		});
 
 		width: number;
 		height: number;
+		rotation?: number;
 	}
 
 	// Functions

package/dist/index.js

@@ -117,10 +117,18 @@ function inPoly(element, x, y, mouseX, mouseY, localTileSize) {
   return counter;
 }
 
-function inRect(element, x, y, left, top, localTileSize) {
+function inRect(element, x, y, left, top, localTileSize, rotation) {
   var width = element.width * localTileSize;
   var height = element.height * localTileSize;
-  return x <= left && left <= x + width && y <= top && top <= y + height;
+  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) {
@@ -174,7 +182,7 @@ function collideElement(e, elements, left, top, tileSize, zoom) {
     switch (element.constructorName) {
       case 'Rect':
       case 'CanvasImage':
-        if (inRect(element, x, y, left, top, localTileSize)) {
+        if (inRect(element, x, y, left, top, localTileSize, element.rotation)) {
           validElements.push({
             id: element.id,
             element: element,
@@ -248,12 +256,28 @@ function collideElement(e, elements, left, top, tileSize, zoom) {
     }
     return 0;
   });
-  return validElements[validElements.length - 1];
+  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 left = -state.left - state.deltaLeft + e.pageX - e.target.offsetLeft;
-  var top = -state.top - state.deltaTop + e.pageY - e.target.offsetTop;
+  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;
@@ -262,10 +286,7 @@ function elementClick(e, elements, tileSize, state) {
     id: null,
     element: null,
     originalEvent: e,
-    posOnMap: {
-      x: Math.floor(left / tileSize / state.zoom),
-      y: Math.floor(top / tileSize / state.zoom)
-    }
+    posOnMap: posOnMap
   };
 }
 
@@ -293,8 +314,10 @@ 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 left = -props.left - props.deltaLeft + event.pageX - event.target.offsetLeft;
-  var top = -props.top - props.deltaTop + event.pageY - event.target.offsetTop;
+  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) {
@@ -309,7 +332,7 @@ function mouseMove(event, elements, tileSize, props, setProps, lockXAxis, lockYA
           onElementMoved(selectedObject, event.screenX - props.prevX, event.screenY - props.prevY);
         }
         if (onHover) {
-          onHover(null);
+          onHover(null, posOnMap);
         }
       }
     }
@@ -332,10 +355,7 @@ function mouseMove(event, elements, tileSize, props, setProps, lockXAxis, lockYA
     }
   } else {
     if (onHover) {
-      onHover(collideElement(event, elements, left, top, tileSize, props.zoom), {
-        x: left,
-        y: top
-      });
+      onHover(collideElement(event, elements, left, top, tileSize, props.zoom), posOnMap);
     }
     selectedObject = null;
   }
@@ -448,11 +468,13 @@ var CanvasImage = /*#__PURE__*/function (_CanvasObject) {
       src = _ref.src,
       zIndex = _ref.zIndex,
       draggable = _ref.draggable,
-      hasCollisions = _ref.hasCollisions;
+      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);
@@ -575,10 +597,12 @@ var Rect = /*#__PURE__*/function (_ColoredCanvasObject) {
       stroke = _ref.stroke,
       zIndex = _ref.zIndex,
       draggable = _ref.draggable,
-      hasCollisions = _ref.hasCollisions;
+      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);
@@ -608,10 +632,26 @@ function renderImage(context, element, left, top, localTileSize) {
     __canvas2dWrapper__.imgCache[element.src] = new Image();
     __canvas2dWrapper__.imgCache[element.src].src = element.src;
   }
-  if (!element.sx) {
-    context.drawImage(__canvas2dWrapper__.imgCache[element.src], left + element.x * localTileSize, top + element.y * localTileSize, element.width * localTileSize, element.height * 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.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 {
-    context.drawImage(__canvas2dWrapper__.imgCache[element.src], element.sx, element.sy, element.swidth, element.sheight, left + element.x * localTileSize, top + element.y * localTileSize, element.width * localTileSize, element.height * localTileSize);
+    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);
+    }
   }
 }
 
@@ -679,11 +719,28 @@ function renderPolygon(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 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);
+    }
   }
 }
 
@@ -861,7 +918,7 @@ function Canvas2D(_ref) {
       }
       if (showMinimap && state.minimapContext) {
         var filteredElementsList = sortedElements.filter(minimapFilter);
-        var ratio = calcRatioForMinimap(filteredElementsList, width, height, minimapWidth, minimapHeight, tileSize * state.zoom);
+        var ratio = calcRatioForMinimap(filteredElementsList, width, height, minimapWidth, minimapHeight, tileSize);
         renderCanvas(state.minimapContext, minimapWidth, minimapHeight, filteredElementsList, tileSize / ratio, {
           left: minimapWidth / 2,
           top: minimapHeight / 2,
@@ -877,6 +934,16 @@ function Canvas2D(_ref) {
       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,