react-scratchingcard 1.0.0 → 1.0.2

package/README.md

@@ -35,7 +35,7 @@ yarn add react-scratchingcard
 
 ```tsx
 import React, { useRef }  from 'react';
-import ScratchCard from 'react-scratchcard-v2';
+import ScratchCard from 'react-scratchingcard';
 
 import * as IMG from './img.jpg';
 
@@ -100,7 +100,7 @@ const App = () => {
 or you can use CUSTOM_BRUSH_PRESET object
 
 ```tsx
-import { CUSTOM_BRUSH_PRESET } from 'react-scratchcard-v2';
+import { CUSTOM_BRUSH_PRESET } from 'react-scratchingcard';
 
 const App = () => {
   return (
@@ -128,7 +128,8 @@ const App = () => {
 |-------------------|-----------------|-------------|
 | width             | number          |             |
 | height            | number          |             |
-| image             | File or Base64  |             |
+| image             | File \| string \| {src?: string, default?: string}  |             |
+| imageCrossOrigin  | ?'' \| 'anonymous' \| 'use-credentials' |             |
 | finishPercent     | ?number         | 70          |
 | brushSize         | ?number         | 20          |
 | fadeOutOnComplete | ?boolean        | true        |
@@ -136,6 +137,23 @@ const App = () => {
 | customBrush       | ?CustomBrush    |             |
 | customCheckZone   | ?CustomCheckZone|             |
 
+### Remote URL
+
+```tsx
+<ScratchCard
+  width={320}
+  height={226}
+  image='https://cdn.example.com/scratch-cover.jpg'
+  imageCrossOrigin='anonymous'
+>
+  <h1>Scratch card</h1>
+</ScratchCard>
+```
+
+Note: pour calculer le pourcentage gratté (`finishPercent`) avec une image distante, le serveur distant doit autoriser CORS.
+
+Le composant n'impose plus CORS par defaut pour une URL distante. `imageCrossOrigin` est utile seulement si ton serveur renvoie deja les en-tetes CORS voulus.
+
 ### CustomBrush
 
 | **name** | **type**       |

package/dist/index.d.ts

@@ -8,6 +8,10 @@ declare type CustomBrush = {
     width: number;
     height: number;
 };
+declare type ImageSource = string | File | {
+    src?: string;
+    default?: string;
+};
 declare type CustomCheckZone = {
     x: number;
     y: number;
@@ -17,7 +21,8 @@ declare type CustomCheckZone = {
 interface Props {
     width: number;
     height: number;
-    image: any;
+    image: ImageSource;
+    imageCrossOrigin?: '' | 'anonymous' | 'use-credentials';
     finishPercent?: number;
     onComplete?: () => void;
     brushSize?: number;
@@ -37,11 +42,27 @@ declare class Scratch extends Component<Props, State> {
     canvas: HTMLCanvasElement;
     brushImage?: any;
     image: HTMLImageElement;
+    objectUrl: string | null;
+    scratchedCells: Set<string>;
+    scratchableCellCount: number;
     isFinished: boolean;
     constructor(props: Props);
+    componentDidUpdate(prevProps: Props): void;
+    componentWillUnmount(): void;
+    revokeObjectUrl(): void;
+    resolveImageSource(image: ImageSource): string;
+    loadImage(): void;
     componentDidMount(): void;
     reset: () => void;
-    getFilledInPixels(stride: number): number;
+    getCheckZone(): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    initializeScratchGrid(): void;
+    markScratchArea(x: number, y: number, width: number, height: number): void;
+    getFilledPercentage(): number;
     getMouse(e: any, canvas: HTMLCanvasElement): {
         x: number;
         y: number;

package/dist/index.js

@@ -19,6 +19,8 @@ function _setPrototypeOf(o, p) {
   return _setPrototypeOf(o, p);
 }
 
+var SCRATCH_GRID_SIZE = 4;
+
 var Scratch = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Scratch, _Component);
 
@@ -28,6 +30,9 @@ var Scratch = /*#__PURE__*/function (_Component) {
     _this = _Component.call(this, props) || this;
     _this.isDrawing = false;
     _this.lastPoint = null;
+    _this.objectUrl = null;
+    _this.scratchedCells = new Set();
+    _this.scratchableCellCount = 0;
     _this.isFinished = false;
 
     _this.reset = function () {
@@ -36,7 +41,13 @@ var Scratch = /*#__PURE__*/function (_Component) {
 
       _this.ctx.drawImage(_this.image, 0, 0, _this.props.width, _this.props.height);
 
+      _this.initializeScratchGrid();
+
       _this.isFinished = false;
+
+      _this.setState({
+        finished: false
+      });
     };
 
     _this.handleMouseDown = function (e) {
@@ -66,18 +77,24 @@ var Scratch = /*#__PURE__*/function (_Component) {
 
         if (_this.brushImage && _this.props.customBrush) {
           _this.ctx.drawImage(_this.brushImage, x, y, _this.props.customBrush.width, _this.props.customBrush.height);
+
+          _this.markScratchArea(x, y, _this.props.customBrush.width, _this.props.customBrush.height);
         } else {
           _this.ctx.beginPath();
 
           _this.ctx.arc(x, y, _this.props.brushSize || 20, 0, 2 * Math.PI, false);
 
           _this.ctx.fill();
+
+          var radius = _this.props.brushSize || 20;
+
+          _this.markScratchArea(x - radius, y - radius, radius * 2, radius * 2);
         }
       }
 
       _this.lastPoint = currentPoint;
 
-      _this.handlePercentage(_this.getFilledInPixels(32));
+      _this.handlePercentage(_this.getFilledPercentage());
     };
 
     _this.handleMouseUp = function () {
@@ -93,24 +110,80 @@ var Scratch = /*#__PURE__*/function (_Component) {
 
   var _proto = Scratch.prototype;
 
-  _proto.componentDidMount = function componentDidMount() {
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    if (prevProps.image !== this.props.image) {
+      this.loadImage();
+    }
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.revokeObjectUrl();
+  };
+
+  _proto.revokeObjectUrl = function revokeObjectUrl() {
+    if (this.objectUrl) {
+      URL.revokeObjectURL(this.objectUrl);
+      this.objectUrl = null;
+    }
+  };
+
+  _proto.resolveImageSource = function resolveImageSource(image) {
+    this.revokeObjectUrl();
+
+    if (typeof image === 'string') {
+      return image;
+    }
+
+    if (image instanceof File) {
+      this.objectUrl = URL.createObjectURL(image);
+      return this.objectUrl;
+    }
+
+    if (image && typeof image.src === 'string') {
+      return image.src;
+    }
+
+    if (image && typeof image["default"] === 'string') {
+      return image["default"];
+    }
+
+    return '';
+  };
+
+  _proto.loadImage = function loadImage() {
     var _this2 = this;
 
-    this.isDrawing = false;
-    this.lastPoint = null;
-    this.ctx = this.canvas.getContext('2d');
     this.image = new Image();
-    this.image.crossOrigin = 'Anonymous';
+
+    if (this.props.imageCrossOrigin !== undefined) {
+      this.image.crossOrigin = this.props.imageCrossOrigin;
+    }
 
     this.image.onload = function () {
+      _this2.ctx.globalCompositeOperation = 'source-over';
+
+      _this2.ctx.clearRect(0, 0, _this2.props.width, _this2.props.height);
+
       _this2.ctx.drawImage(_this2.image, 0, 0, _this2.props.width, _this2.props.height);
 
+      _this2.initializeScratchGrid();
+
+      _this2.isFinished = false;
+
       _this2.setState({
-        loaded: true
+        loaded: true,
+        finished: false
       });
     };
 
-    this.image.src = this.props.image;
+    this.image.src = this.resolveImageSource(this.props.image);
+  };
+
+  _proto.componentDidMount = function componentDidMount() {
+    this.isDrawing = false;
+    this.lastPoint = null;
+    this.ctx = this.canvas.getContext('2d');
+    this.loadImage();
 
     if (this.props.customBrush) {
       this.brushImage = new Image(this.props.customBrush.width, this.props.customBrush.height);
@@ -118,11 +191,7 @@ var Scratch = /*#__PURE__*/function (_Component) {
     }
   };
 
-  _proto.getFilledInPixels = function getFilledInPixels(stride) {
-    if (!stride || stride < 1) {
-      stride = 1;
-    }
-
+  _proto.getCheckZone = function getCheckZone() {
     var x = 0;
     var y = 0;
     var width = this.canvas.width;
@@ -135,17 +204,51 @@ var Scratch = /*#__PURE__*/function (_Component) {
       height = this.props.customCheckZone.height;
     }
 
-    var pixels = this.ctx.getImageData(x, y, width, height);
-    var total = pixels.data.length / stride;
-    var count = 0;
+    return {
+      x: x,
+      y: y,
+      width: width,
+      height: height
+    };
+  };
+
+  _proto.initializeScratchGrid = function initializeScratchGrid() {
+    var zone = this.getCheckZone();
+    var columns = Math.ceil(zone.width / SCRATCH_GRID_SIZE);
+    var rows = Math.ceil(zone.height / SCRATCH_GRID_SIZE);
+    this.scratchedCells = new Set();
+    this.scratchableCellCount = columns * rows;
+  };
+
+  _proto.markScratchArea = function markScratchArea(x, y, width, height) {
+    var zone = this.getCheckZone();
+    var startX = Math.max(zone.x, x);
+    var startY = Math.max(zone.y, y);
+    var endX = Math.min(zone.x + zone.width, x + width);
+    var endY = Math.min(zone.y + zone.height, y + height);
 
-    for (var i = 0; i < pixels.data.length; i += stride) {
-      if (parseInt(pixels.data[i], 10) === 0) {
-        count++;
+    if (startX >= endX || startY >= endY) {
+      return;
+    }
+
+    var startColumn = Math.floor((startX - zone.x) / SCRATCH_GRID_SIZE);
+    var endColumn = Math.floor((endX - zone.x - 1) / SCRATCH_GRID_SIZE);
+    var startRow = Math.floor((startY - zone.y) / SCRATCH_GRID_SIZE);
+    var endRow = Math.floor((endY - zone.y - 1) / SCRATCH_GRID_SIZE);
+
+    for (var row = startRow; row <= endRow; row++) {
+      for (var column = startColumn; column <= endColumn; column++) {
+        this.scratchedCells.add(column + ":" + row);
       }
     }
+  };
+
+  _proto.getFilledPercentage = function getFilledPercentage() {
+    if (this.scratchableCellCount === 0) {
+      return 0;
+    }
 
-    return Math.round(count / total * 100);
+    return Math.round(this.scratchedCells.size / this.scratchableCellCount * 100);
   };
 
   _proto.getMouse = function getMouse(e, canvas) {