Merge branch 'release/v1.2.1'

Author: embiem

.travis.yml

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.2.1] - 2021-11-08
+
+### Fixed
+
+- Pan & Zoom feature now actually works. 1.2.0 introduced the big refactor by markbiddlecom, but also lots of other PRs that were merged, which caused a regression.
+
 ## [1.2.0] - 2021-11-08
 
 ### Added

CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "react-canvas-draw",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "A simple yet powerful canvas-drawing component for React.",
   "main": "lib/index.js",
   "module": "es/index.js",

package.json

@@ -22,6 +22,7 @@ const canvasStyle = {
   position: "absolute",
 };
 
+// The order of these is important: grid > drawing > temp > interface
 const canvasTypes = ["grid", "drawing", "temp", "interface"];
 
 const dimensionsPropTypes = PropTypes.oneOfType([
@@ -426,7 +427,7 @@ export default class CanvasDraw extends PureComponent {
     }
 
     canvasTypes
-      .map(({ name }) => this.ctx[name])
+      .map((name) => this.ctx[name])
       .forEach((ctx) => {
         this.clearWindow(ctx);
         const m = this.coordSystem.transformMatrix;
@@ -685,23 +686,23 @@ export default class CanvasDraw extends PureComponent {
     ctx.lineWidth = this.props.gridLineWidth;
 
     if (!this.props.hideGridX) {
-      let countX = 0;
+      let countX = minx;
       const gridSizeX = this.props.gridSizeX;
-      while (countX < ctx.canvas.width) {
+      while (countX < maxx) {
         countX += gridSizeX;
-        ctx.moveTo(countX, 0);
-        ctx.lineTo(countX, ctx.canvas.height);
+        ctx.moveTo(countX, miny);
+        ctx.lineTo(countX, maxy);
       }
       ctx.stroke();
     }
 
     if (!this.props.hideGridY) {
-      let countY = 0;
+      let countY = miny;
       const gridSizeY = this.props.gridSizeY;
-      while (countY < ctx.canvas.height) {
+      while (countY < maxy) {
         countY += gridSizeY;
-        ctx.moveTo(0, countY);
-        ctx.lineTo(ctx.canvas.width, countY);
+        ctx.moveTo(minx, countY);
+        ctx.lineTo(maxx, countY);
       }
       ctx.stroke();
     }