Merge branch 'release/v1.2.0'

Author: embiem

.all-contributorsrc

@@ -29,6 +29,15 @@
       "contributions": [
         "ideas"
       ]
+    },
+    {
+      "login": "ern-arrowsmith",
+      "name": "Ernie Arrowsmith",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/3596444?s=400&u=c4cc9bf80c5572d07c8f877635b785b3ab99eee7&v=4",
+      "profile": "https://www.linkedin.com/in/ernarrowsmith/",
+      "contributions": [
+        "ideas"
+      ]
     }
   ]
 }

.gitignore

@@ -5,3 +5,4 @@
 /node_modules
 /umd
 npm-debug.log*
+.vscode/

.travis.yml

@@ -14,6 +14,7 @@ script:
   - yarn test
   - yarn build
 deploy:
+  skip_cleanup: true
   provider: npm
   email: mbeierling@gmail.com
   api_key:

CHANGELOG.md

@@ -1,29 +1,51 @@
 # 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.2.0] - 2021-11-08
+
+### Added
+
+- Support for refreshing the background image
+- Grid customization props (grid size, line width & hide axis)
+- Export drawing to file/dataUrl using new `getDataURL` function
+- Panning & Zooming
+
+### Changed
+
+- z-index no longer hard-coded, allowing overlayed CanvasDraw components
+- big refactor, kudos to @markbiddlecom for this mammoth task
+- allow React 17 as peer dependency
 
 ## [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)
+
+- 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)
+
+- 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)
+
+- Fix "Immediate flag should be really immediate" issue #30 (<https://github.com/embiem/react-canvas-draw/issues/30>)

CONTRIBUTING.md

@@ -1,3 +1,12 @@
+# Contributing
+
+Thanks for considering to contribute to React Canvas Draw!
+
+Please use the `develop` branch when creating PRs. Below are the necessary steps to get going.
+
+If you want to be added to the contributors list in the README, 
+please follow the [all-contributors bot instructions](https://allcontributors.org/docs/en/bot/usage).
+
 ## Prerequisites
 
 [Node.js](http://nodejs.org/) >= v4 must be installed.

README.md

@@ -58,7 +58,15 @@ These are the defaultProps of CanvasDraw. You can pass along any of these props
     imgSrc: "",
     saveData: null,
     immediateLoading: false,
-    hideInterface: false
+    hideInterface: false,
+    gridSizeX: 25,
+    gridSizeY: 25,
+    gridLineWidth: 0.5,
+    hideGridX: false,
+    hideGridY: false
+    enablePanAndZoom: false,
+    mouseZoomFactor: 0.01,
+    zoomExtents: { min: 0.33, max: 3 },
   };
 ```
 
@@ -68,7 +76,10 @@ Useful functions that you can call, e.g. when having a reference to this compone
 
 - `getSaveData()` returns the drawing's save-data as a stringified object
 - `loadSaveData(saveData: String, immediate: Boolean)` loads a previously saved drawing using the saveData string, as well as an optional boolean flag to load it immediately, instead of live-drawing it.
-- `clear()` clears the canvas completely
+- `getDataURL(fileType, useBgImage, backgroundColour)` will export the canvas to a data URL, which can subsequently be used to share or manipulate the image file.
+- `clear()` clears the canvas completely, including previously erased lines, and resets the view. After a clear, `undo()` will have no effect.
+- `eraseAll()` clears the drawn lines but retains their data; calling `undo()` can restore the erased lines. _Note: erased lines are not included in the save data._
+- `resetView()` resets the canvas' view to defaults. Has no effect if the `enablePanAndZoom` property is `false`.
 - `undo()` removes the latest change to the drawing. This includes everything drawn since the last MouseDown event.
 
 ## Local Development
@@ -79,7 +90,7 @@ You just need to clone it, yarn it & start it!
 
 ## Tips
 
-If you want to save large strings, like the stringified JSON of a drawing, I recommend you to use [pieroxy/lz-string](https://github.com/pieroxy/lz-string) for compression. It's LZ compression will bring down your long strings to only ~10% of it's original size.
+If you want to save large strings, like the stringified JSON of a drawing, I recommend you use [pieroxy/lz-string](https://github.com/pieroxy/lz-string) for compression. It's LZ compression will bring down your long strings to only ~10% of its original size.
 
 ## Acknowledgement
 

demo/src/index.js

@@ -10,15 +10,43 @@ class Demo extends Component {
     width: 400,
     height: 400,
     brushRadius: 10,
-    lazyRadius: 12
+    lazyRadius: 12,
+    backgroundImg: "https://upload.wikimedia.org/wikipedia/commons/a/a1/Nepalese_Mhapuja_Mandala.jpg",
+    imgs: [
+      "https://upload.wikimedia.org/wikipedia/commons/a/a1/Nepalese_Mhapuja_Mandala.jpg",
+      "https://i.imgur.com/a0CGGVC.jpg"
+    ]
   };
+
   componentDidMount() {
     // let's change the color randomly every 2 seconds. fun!
     window.setInterval(() => {
       this.setState({
         color: "#" + Math.floor(Math.random() * 16777215).toString(16)
       });
     }, 2000);
+
+    // let's change the background image every 2 seconds. fun!
+    window.setInterval(() => {
+      if (
+        this.state.imgs &&
+        this.state.imgs.length &&
+        this.state.backgroundImg
+      ) {
+        let img = '';
+        let imgs = this.state.imgs;
+        for (let i = 0; i < imgs.length; i++) {
+          if (this.state.backgroundImg !== imgs[i]) {
+            img = imgs[i];
+          }
+        }
+
+        this.setState({
+          backgroundImg: img,
+        });
+      }
+    }, 2000);
+
   }
   render() {
     return (
@@ -69,9 +97,29 @@ class Demo extends Component {
           brushColor="rgba(155,12,60,0.3)"
           imgSrc="https://upload.wikimedia.org/wikipedia/commons/a/a1/Nepalese_Mhapuja_Mandala.jpg"
         />
+
+        <h2>Refreshable Background Image</h2>
+        <p>This will refresh the background in every two seconds.</p>
+        <CanvasDraw
+          brushColor="rgba(155,12,60,0.3)"
+          imgSrc={this.state.backgroundImg}
+        />
         <h2>Hide UI</h2>
         <p>To hide the UI elements, set the `hideInterface` prop. You can also hide the grid with the `hideGrid` prop.</p>
         <CanvasDraw hideInterface hideGrid />
+        <h2>Zoom & Pan</h2>
+        <p>
+          Set the <span>enablePanAndZoom</span> prop to enable mouse scrolling
+          and panning (using Ctrl), pinch zooming, and two-finger panning. If
+          you want to ensure that all lines stay within the bounds of the
+          canvas, set the <span>clampLinesToDocument</span> property.
+        </p>
+        <CanvasDraw
+          enablePanAndZoom
+          clampLinesToDocument
+          gridColor="#ccc"
+          imgSrc="https://upload.wikimedia.org/wikipedia/commons/a/a1/Nepalese_Mhapuja_Mandala.jpg"
+        />
         <h2>Save & Load</h2>
         <p>
           This part got me most excited. Very easy to use saving and loading of
@@ -94,10 +142,10 @@ class Demo extends Component {
           </button>
           <button
             onClick={() => {
-              this.saveableCanvas.clear();
+              this.saveableCanvas.eraseAll();
             }}
           >
-            Clear
+            Erase
           </button>
           <button
             onClick={() => {
@@ -106,6 +154,14 @@ class Demo extends Component {
           >
             Undo
           </button>
+          <button
+            onClick={() => {
+              console.log(this.saveableCanvas.getDataURL());
+              alert("DataURL written to console")
+            }}
+          >
+            GetDataURL
+          </button>
           <div>
             <label>Width:</label>
             <input

nwb.config.js

@@ -12,8 +12,9 @@ module.exports = {
   webpack: {
     rules: {
       css: {
-        modules: true,
-        localIdentName: '[local]__[hash:base64:5]'
+        modules: {
+          localIdentName: '[local]__[hash:base64:5]',
+        }
       }
     }
   }