Add support for pan and zoom

README.md

@@ -58,7 +58,10 @@ These are the defaultProps of CanvasDraw. You can pass along any of these props
     imgSrc: "",
     saveData: null,
     immediateLoading: false,
-    hideInterface: false
+    hideInterface: false,
+    enablePanAndZoom: false,
+    mouseZoomFactor: 0.01,
+    zoomExtents: { min: 0.33, max: 3 },
   };
 ```
 
@@ -68,7 +71,9 @@ 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
+- `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 +84,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

@@ -72,6 +72,19 @@ class Demo extends Component {
         <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 +107,10 @@ class Demo extends Component {
           </button>
           <button
             onClick={() => {
-              this.saveableCanvas.clear();
+              this.saveableCanvas.eraseAll();
             }}
           >
-            Clear
+            Erase
           </button>
           <button
             onClick={() => {

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]',
+        }
       }
     }
   }