diff --git a/README.md b/README.md index 6d0c386..5a1435f 100644 --- a/README.md +++ b/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 diff --git a/demo/src/index.js b/demo/src/index.js index 4d87b6e..e3c960d 100644 --- a/demo/src/index.js +++ b/demo/src/index.js @@ -72,6 +72,19 @@ class Demo extends Component {

Hide UI

To hide the UI elements, set the `hideInterface` prop. You can also hide the grid with the `hideGrid` prop.

+

Zoom & Pan

+

+ Set the enablePanAndZoom 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 clampLinesToDocument property. +

+

Save & Load

This part got me most excited. Very easy to use saving and loading of @@ -94,10 +107,10 @@ class Demo extends Component {