Merge branch 'release/1.1.1'

CHANGELOG.md

@@ -0,0 +1,29 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+
+## [1.1.1] - 2020-04-27
+### Added
+- Started this CHANGELOG.md file to keep track of any changes per version
+
+### Fixed
+- Fix touch draw issue. (https://github.com/embiem/react-canvas-draw/issues/29)
+- Fix "Can't draw dots" issue. (https://github.com/embiem/react-canvas-draw/issues/42)
+- Fix image not shown due to cache. (https://github.com/embiem/react-canvas-draw/issues/59)
+- Fix image issues on canvas resize. (https://github.com/embiem/react-canvas-draw/issues/66)
+- Fix SecurityError on save. (https://github.com/embiem/react-canvas-draw/issues/70)
+
+### Changed
+- Unified touch & mouse events to streamline core draw logic (handleDrawStart, handleDrawMove & handleDrawEnd)
+
+## [1.1.0] - 2019-12-29
+### Added
+- onChange prop #50 (https://github.com/embiem/react-canvas-draw/pull/50)
+
+### Fixed
+- Fix "Immediate flag should be really immediate" issue #30 (https://github.com/embiem/react-canvas-draw/issues/30)

package.json

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

src/index.js

@@ -166,11 +166,14 @@ export default class extends PureComponent {
 
     // Load the image
     this.image = new Image();
-    this.image.src = this.props.imgSrc;
+
+    // Prevent SecurityError "Tainted canvases may not be exported." #70
+    this.image.crossOrigin = "anonymous";
 
     // Draw the image once loaded
     this.image.onload = () =>
       drawImage({ ctx: this.ctx.grid, img: this.image });
+    this.image.src = this.props.imgSrc;
   };
 
   undo = () => {
@@ -275,42 +278,39 @@ export default class extends PureComponent {
     });
   };
 
-  handleTouchStart = e => {
-    const { x, y } = this.getPointerPos(e);
-    this.lazy.update({ x, y }, { both: true });
-    this.handleMouseDown(e);
+  handleDrawStart = e => {
+    e.preventDefault();
 
-    this.mouseHasMoved = true;
-  };
+    // Start drawing
+    this.isPressing = true;
 
-  handleTouchMove = e => {
-    e.preventDefault();
     const { x, y } = this.getPointerPos(e);
-    this.handlePointerMove(x, y);
-  };
 
-  handleTouchEnd = e => {
-    this.handleMouseUp(e);
-    const brush = this.lazy.getBrushCoordinates();
-    this.lazy.update({ x: brush.x, y: brush.y }, { both: true });
-    this.mouseHasMoved = true;
+    if (e.touches && e.touches.length > 0) {
+      // on touch, set catenary position to touch pos
+      this.lazy.update({ x, y }, { both: true });
+    }
+
+    // Ensure the initial down position gets added to our line
+    this.handlePointerMove(x, y);
   };
 
-  handleMouseDown = e => {
+  handleDrawMove = e => {
     e.preventDefault();
-    this.isPressing = true;
-  };
 
-  handleMouseMove = e => {
     const { x, y } = this.getPointerPos(e);
     this.handlePointerMove(x, y);
   };
 
-  handleMouseUp = e => {
+  handleDrawEnd = e => {
     e.preventDefault();
+
+    // Draw to this end pos
+    this.handleDrawMove(e);
+
+    // Stop drawing & save the drawn line
     this.isDrawing = false;
     this.isPressing = false;
-
     this.saveLine();
   };
 
@@ -324,6 +324,7 @@ export default class extends PureComponent {
       this.setCanvasSize(this.canvas.grid, width, height);
 
       this.drawGrid(this.ctx.grid);
+      this.drawImage();
       this.loop({ once: true });
     }
     this.loadSaveData(saveData, true);
@@ -359,19 +360,19 @@ export default class extends PureComponent {
   handlePointerMove = (x, y) => {
     if (this.props.disabled) return;
 
-    const hasChanged = this.lazy.update({ x, y });
+    this.lazy.update({ x, y });
     const isDisabled = !this.lazy.isEnabled();
 
     if (
-      (this.isPressing && hasChanged && !this.isDrawing) ||
+      (this.isPressing && !this.isDrawing) ||
       (isDisabled && this.isPressing)
     ) {
       // Start drawing and add point
       this.isDrawing = true;
       this.points.push(this.lazy.brush.toObject());
     }
 
-    if (this.isDrawing && (this.lazy.brushHasMoved() || isDisabled)) {
+    if (this.isDrawing) {
       // Add new point
       this.points.push(this.lazy.brush.toObject());
 
@@ -583,14 +584,14 @@ export default class extends PureComponent {
                 }
               }}
               style={{ ...canvasStyle, zIndex }}
-              onMouseDown={isInterface ? this.handleMouseDown : undefined}
-              onMouseMove={isInterface ? this.handleMouseMove : undefined}
-              onMouseUp={isInterface ? this.handleMouseUp : undefined}
-              onMouseOut={isInterface ? this.handleMouseUp : undefined}
-              onTouchStart={isInterface ? this.handleTouchStart : undefined}
-              onTouchMove={isInterface ? this.handleTouchMove : undefined}
-              onTouchEnd={isInterface ? this.handleTouchEnd : undefined}
-              onTouchCancel={isInterface ? this.handleTouchEnd : undefined}
+              onMouseDown={isInterface ? this.handleDrawStart : undefined}
+              onMouseMove={isInterface ? this.handleDrawMove : undefined}
+              onMouseUp={isInterface ? this.handleDrawEnd : undefined}
+              onMouseOut={isInterface ? this.handleDrawEnd : undefined}
+              onTouchStart={isInterface ? this.handleDrawStart : undefined}
+              onTouchMove={isInterface ? this.handleDrawMove : undefined}
+              onTouchEnd={isInterface ? this.handleDrawEnd : undefined}
+              onTouchCancel={isInterface ? this.handleDrawEnd : undefined}
             />
           );
         })}