Skip to content

Commit 6e140b1

Browse files
ecfairleheruiwoniouvinothpandian
authored
Fix undo/redo bug (#186)
* fix:improve history behavior Close #170 * fix:fixed cannot undo to empty state bug * fix:improve loadPath function When using loadPath, set to the initial value of history * fix timing issue with setting history * add test for undo after clear * Fix undo behavior with loadPaths and add tests * Fix reset canvas history logic * Use event queue for undo/redo/etc. * Fix order of operations * refactor: standardize string quotes and improve callback formatting --------- Co-authored-by: heruiwoniou <[email protected]> Co-authored-by: Vinoth Pandian <[email protected]>
1 parent bcbb141 commit 6e140b1

File tree

5 files changed

+375
-134
lines changed

5 files changed

+375
-134
lines changed

‎README.md

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -108,26 +108,26 @@ const Canvas = class extends React.Component {
108108

109109
## List of Props
110110

111-
| Props | Expected datatype | Default value | Description |
112-
|------------------------------------| ----------------- | --------------------- |----------------------------------------------------------------------------------------------------|
113-
| width | PropTypes.string | 100% | canvas width (em/rem/px) |
114-
| height | PropTypes.string | 100% | canvas width (em/rem/px) |
115-
| id | PropTypes.string | "react-sketch-canvas" | ID field to uniquely identify a SVG canvas (Supports multiple canvases in a single page) |
116-
| className | PropTypes.string | "" | Class for using with CSS selectors |
117-
| strokeColor | PropTypes.string | black | Pen color |
118-
| canvasColor | PropTypes.string | white | canvas color (HTML colors) |
119-
| backgroundImage | PropTypes.string | '' | Set SVG background with image URL |
120-
| exportWithBackgroundImage | PropTypes.bool | false | Keep background image on image/SVG export (on false, canvasColor will be set as background) |
111+
| Props | Expected datatype | Default value | Description |
112+
| ---------------------------------- | ----------------- | --------------------- | --------------------------------------------------------------------------------------------------- |
113+
| width | PropTypes.string | 100% | canvas width (em/rem/px) |
114+
| height | PropTypes.string | 100% | canvas width (em/rem/px) |
115+
| id | PropTypes.string | "react-sketch-canvas" | ID field to uniquely identify a SVG canvas (Supports multiple canvases in a single page) |
116+
| className | PropTypes.string | "" | Class for using with CSS selectors |
117+
| strokeColor | PropTypes.string | black | Pen color |
118+
| canvasColor | PropTypes.string | white | canvas color (HTML colors) |
119+
| backgroundImage | PropTypes.string | '' | Set SVG background with image URL |
120+
| exportWithBackgroundImage | PropTypes.bool | false | Keep background image on image/SVG export (on false, canvasColor will be set as background) |
121121
| preserveBackgroundImageAspectRatio | PropTypes.string | none | Set aspect ratio of the background image. For possible values check [MDN docs][preserveaspectratio] |
122-
| strokeWidth | PropTypes.number | 4 | Pen stroke size |
123-
| eraserWidth | PropTypes.number | 8 | Erase size |
124-
| allowOnlyPointerType | PropTypes.string | all | allow pointer type ("all"/"mouse"/"pen"/"touch") |
125-
| onChange | PropTypes.func | | Returns the current sketch path in `CanvasPath` type on every path change |
126-
| onStroke | PropTypes.func | | Returns the the last stroke path and whether it is an eraser stroke on every pointer up event |
127-
| style | PropTypes.object | false | Add CSS styling as CSS-in-JS object |
128-
| svgStyle | PropTypes.object | {} | Add CSS styling as CSS-in-JS object for the SVG |
129-
| withTimestamp | PropTypes.bool | false | Add timestamp to individual strokes for measuring sketching time |
130-
| readOnly | PropTypes.bool | false | Disable drawing on the canvas (undo/redo, clear & reset will still work.) |
122+
| strokeWidth | PropTypes.number | 4 | Pen stroke size |
123+
| eraserWidth | PropTypes.number | 8 | Erase size |
124+
| allowOnlyPointerType | PropTypes.string | all | allow pointer type ("all"/"mouse"/"pen"/"touch") |
125+
| onChange | PropTypes.func | | Returns the current sketch path in `CanvasPath` type on every path change |
126+
| onStroke | PropTypes.func | | Returns the the last stroke path and whether it is an eraser stroke on every pointer up event |
127+
| style | PropTypes.object | false | Add CSS styling as CSS-in-JS object |
128+
| svgStyle | PropTypes.object | {} | Add CSS styling as CSS-in-JS object for the SVG |
129+
| withTimestamp | PropTypes.bool | false | Add timestamp to individual strokes for measuring sketching time |
130+
| readOnly | PropTypes.bool | false | Disable drawing on the canvas (undo/redo, clear & reset will still work.) |
131131

132132
Set SVG background using CSS [background][css-bg] value
133133

‎packages/react-sketch-canvas/README.md

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -108,26 +108,26 @@ const Canvas = class extends React.Component {
108108

109109
## List of Props
110110

111-
| Props | Expected datatype | Default value | Description |
112-
|------------------------------------| ----------------- | --------------------- |----------------------------------------------------------------------------------------------------|
113-
| width | PropTypes.string | 100% | canvas width (em/rem/px) |
114-
| height | PropTypes.string | 100% | canvas width (em/rem/px) |
115-
| id | PropTypes.string | "react-sketch-canvas" | ID field to uniquely identify a SVG canvas (Supports multiple canvases in a single page) |
116-
| className | PropTypes.string | "" | Class for using with CSS selectors |
117-
| strokeColor | PropTypes.string | black | Pen color |
118-
| canvasColor | PropTypes.string | white | canvas color (HTML colors) |
119-
| backgroundImage | PropTypes.string | '' | Set SVG background with image URL |
120-
| exportWithBackgroundImage | PropTypes.bool | false | Keep background image on image/SVG export (on false, canvasColor will be set as background) |
111+
| Props | Expected datatype | Default value | Description |
112+
| ---------------------------------- | ----------------- | --------------------- | --------------------------------------------------------------------------------------------------- |
113+
| width | PropTypes.string | 100% | canvas width (em/rem/px) |
114+
| height | PropTypes.string | 100% | canvas width (em/rem/px) |
115+
| id | PropTypes.string | "react-sketch-canvas" | ID field to uniquely identify a SVG canvas (Supports multiple canvases in a single page) |
116+
| className | PropTypes.string | "" | Class for using with CSS selectors |
117+
| strokeColor | PropTypes.string | black | Pen color |
118+
| canvasColor | PropTypes.string | white | canvas color (HTML colors) |
119+
| backgroundImage | PropTypes.string | '' | Set SVG background with image URL |
120+
| exportWithBackgroundImage | PropTypes.bool | false | Keep background image on image/SVG export (on false, canvasColor will be set as background) |
121121
| preserveBackgroundImageAspectRatio | PropTypes.string | none | Set aspect ratio of the background image. For possible values check [MDN docs][preserveaspectratio] |
122-
| strokeWidth | PropTypes.number | 4 | Pen stroke size |
123-
| eraserWidth | PropTypes.number | 8 | Erase size |
124-
| allowOnlyPointerType | PropTypes.string | all | allow pointer type ("all"/"mouse"/"pen"/"touch") |
125-
| onChange | PropTypes.func | | Returns the current sketch path in `CanvasPath` type on every path change |
126-
| onStroke | PropTypes.func | | Returns the the last stroke path and whether it is an eraser stroke on every pointer up event |
127-
| style | PropTypes.object | false | Add CSS styling as CSS-in-JS object |
128-
| svgStyle | PropTypes.object | {} | Add CSS styling as CSS-in-JS object for the SVG |
129-
| withTimestamp | PropTypes.bool | false | Add timestamp to individual strokes for measuring sketching time |
130-
| readOnly | PropTypes.bool | false | Disable drawing on the canvas (undo/redo, clear & reset will still work.) |
122+
| strokeWidth | PropTypes.number | 4 | Pen stroke size |
123+
| eraserWidth | PropTypes.number | 8 | Erase size |
124+
| allowOnlyPointerType | PropTypes.string | all | allow pointer type ("all"/"mouse"/"pen"/"touch") |
125+
| onChange | PropTypes.func | | Returns the current sketch path in `CanvasPath` type on every path change |
126+
| onStroke | PropTypes.func | | Returns the the last stroke path and whether it is an eraser stroke on every pointer up event |
127+
| style | PropTypes.object | false | Add CSS styling as CSS-in-JS object |
128+
| svgStyle | PropTypes.object | {} | Add CSS styling as CSS-in-JS object for the SVG |
129+
| withTimestamp | PropTypes.bool | false | Add timestamp to individual strokes for measuring sketching time |
130+
| readOnly | PropTypes.bool | false | Disable drawing on the canvas (undo/redo, clear & reset will still work.) |
131131

132132
Set SVG background using CSS [background][css-bg] value
133133

0 commit comments

Comments
 (0)