Skip to content

Commit

Permalink
update README and changelog
Browse files Browse the repository at this point in the history
  • Loading branch information
@vinothpandian
vinothpandian committed Aug 24, 2021
1 parent 306ac7c commit 50688d3
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 59 deletions.
17 changes: 17 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,22 @@
## Changelog

## [6.0.0]

## Added

- Upgraded all dependencies
- Updated directory structure
- Added background image rendering directly in SVG
- Added option to export background image while exporting the canvas as image or SVG
- Added background image aspect ratio control
- Updated erase option to use mask instead of canvas color
- Add github action for deployment of storybook and package

## Breaking changes

- Removed background option to set background image using CSS-in-JS (instead check feature-filled backgroundImage prop)


## [5.3.4]

## Added
Expand Down
70 changes: 24 additions & 46 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,12 +55,12 @@ yarn add react-sketch-canvas
Common usage example

```javascript
import React from "react";
import { ReactSketchCanvas } from "react-sketch-canvas";
import React from 'react';
import { ReactSketchCanvas } from 'react-sketch-canvas';

const styles = {
border: "0.0625rem solid #9c9c9c",
borderRadius: "0.25rem",
border: '0.0625rem solid #9c9c9c',
borderRadius: '0.25rem',
};

const Canvas = () => {
Expand Down Expand Up @@ -124,52 +124,30 @@ const Canvas = class extends React.Component {

## List of Props

| Props | Expected datatype | Default value | Description |
| -------------------- | ----------------- | ------------- | -------------------------------------------------------------------- |
| className | PropTypes.string | "" | Class for using with CSS selectors |
| width | PropTypes.string | 100% | canvas width (em/rem/px) |
| height | PropTypes.string | 100% | canvas width (em/rem/px) |
| canvasColor | PropTypes.string | white | canvas color (HTML colors) |
| background | PropTypes.string | '' | Set SVG background using CSS [background][css-bg] value |
| strokeColor | PropTypes.string | black | Pen color |
| strokeWidth | PropTypes.number | 4 | Pen stroke size |
| eraserWidth | PropTypes.number | 8 | Erase size |
| allowOnlyPointerType | PropTypes.string | all | allow pointer type ("all"/"mouse"/"pen"/"touch") |
| onUpdate | PropTypes.func | all | Returns the current sketch path in `CanvasPath` type on every update |
| withTimestamp | PropTypes.bool | false | Add timestamp to individual strokes for measuring sketching time |
| Props | Expected datatype | Default value | Description |
| ---------------------------------- | ----------------- | ------------- | --------------------------------------------------------------------------------------------------- |
| width | PropTypes.string | 100% | canvas width (em/rem/px) |
| height | PropTypes.string | 100% | canvas width (em/rem/px) |
| className | PropTypes.string | "" | Class for using with CSS selectors |
| strokeColor | PropTypes.string | black | Pen color |
| canvasColor | PropTypes.string | white | canvas color (HTML colors) |
| backgroundImage | PropTypes.string | '' | Set SVG background with image URL |
| exportWithBackgroundImage | PropTypes.bool | true | Keep background image on image/SVG export (on false, canvasColor will be set as background) |
| preserveBackgroundImageAspectRatio | PropTypes.string | none | Set aspect ratio of the background image. For possible values check [MDN docs][preserveaspectratio] |
| strokeWidth | PropTypes.number | 4 | Pen stroke size |
| eraserWidth | PropTypes.number | 8 | Erase size |
| allowOnlyPointerType | PropTypes.string | all | allow pointer type ("all"/"mouse"/"pen"/"touch") |
| onUpdate | PropTypes.func | all | Returns the current sketch path in `CanvasPath` type on every update |
| style | PropTypes.object | false | Add CSS styling as CSS-in-JS object |
| withTimestamp | PropTypes.bool | false | Add timestamp to individual strokes for measuring sketching time |

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

You can specify width and height values in em or rem. It fills the parent element space if width and height are not set

Example

```javascript
<ReactSketchCanvas width="25em" height="10rem" />
```

## Styling

You can pass a CSS in JS style object to style the element. By default it has a border with following properties
<br />

```css
canvas {
border: 0.0625rem solid #9c9c9c;
border-radius: 0.25rem;
}
```

Example

```javascript
<ReactSketchCanvas
style={{
border: "0.0625rem solid #9c9c9c",
}}
/>
```

## Functions
## Methods

You can export the sketch as an image or as a svg

Expand All @@ -191,7 +169,7 @@ _Use ref to access the element and call the following functions to export image_
## Types

```ts
type ExportImageType = "jpeg" | "png";
type ExportImageType = 'jpeg' | 'png';

interface Point {
x: number;
Expand All @@ -216,10 +194,10 @@ interface CanvasPath {
- Draws smooth curves, thanks to François Romain's [tutorial][smooth-curve-tutorial]
- Immer [link][immer]


---

[based-on]: https://pspdfkit.com/blog/2017/how-to-build-free-hand-drawing-using-react/
[smooth-curve-tutorial]: https://medium.com/@francoisromain/smooth-a-svg-path-with-cubic-bezier-curves-e37b49d46c74
[css-bg]: https://developer.mozilla.org/en-US/docs/Web/CSS/background
[immer]: https://immerjs.github.io/immer/docs/introduction
[preserveaspectratio]: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
30 changes: 17 additions & 13 deletions libs/react-sketch-canvas/src/stories/0.demo.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,19 +113,22 @@ const Canvas = class extends React.Component {

## List of Props

| Props | Expected datatype | Default value | Description |
| -------------------- | ----------------- | ------------- | -------------------------------------------------------------------- |
| className | PropTypes.string | "" | Class for using with CSS selectors |
| width | PropTypes.string | 100% | canvas width (em/rem/px) |
| height | PropTypes.string | 100% | canvas width (em/rem/px) |
| canvasColor | PropTypes.string | white | canvas color (HTML colors) |
| background | PropTypes.string | '' | Set SVG background using CSS [background][css-bg] value |
| strokeColor | PropTypes.string | black | Pen color |
| strokeWidth | PropTypes.number | 4 | Pen stroke size |
| eraserWidth | PropTypes.number | 8 | Erase size |
| allowOnlyPointerType | PropTypes.string | all | allow pointer type ("all"/"mouse"/"pen"/"touch") |
| onUpdate | PropTypes.func | all | Returns the current sketch path in `CanvasPath` type on every update |
| withTimestamp | PropTypes.bool | false | Add timestamp to individual strokes for measuring sketching time |
| Props | Expected datatype | Default value | Description |
| ---------------------------------- | ----------------- | ------------- | --------------------------------------------------------------------------------------------------- |
| width | PropTypes.string | 100% | canvas width (em/rem/px) |
| height | PropTypes.string | 100% | canvas width (em/rem/px) |
| className | PropTypes.string | "" | Class for using with CSS selectors |
| strokeColor | PropTypes.string | black | Pen color |
| canvasColor | PropTypes.string | white | canvas color (HTML colors) |
| backgroundImage | PropTypes.string | '' | Set SVG background with image URL |
| exportWithBackgroundImage | PropTypes.bool | true | Keep background image on image/SVG export (on false, canvasColor will be set as background) |
| preserveBackgroundImageAspectRatio | PropTypes.string | none | Set aspect ratio of the background image. For possible values check [MDN docs][preserveaspectratio] |
| strokeWidth | PropTypes.number | 4 | Pen stroke size |
| eraserWidth | PropTypes.number | 8 | Erase size |
| allowOnlyPointerType | PropTypes.string | all | allow pointer type ("all"/"mouse"/"pen"/"touch") |
| onUpdate | PropTypes.func | all | Returns the current sketch path in `CanvasPath` type on every update |
| style | PropTypes.object | false | Add CSS styling as CSS-in-JS object |
| withTimestamp | PropTypes.bool | false | Add timestamp to individual strokes for measuring sketching time |

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

Expand Down Expand Up @@ -186,3 +189,4 @@ interface CanvasPath {
[smooth-curve-tutorial]: https://medium.com/@francoisromain/smooth-a-svg-path-with-cubic-bezier-curves-e37b49d46c74
[css-bg]: https://developer.mozilla.org/en-US/docs/Web/CSS/background
[immer]: https://immerjs.github.io/immer/docs/introduction
[preserveaspectratio]: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

0 comments on commit 50688d3

Please sign in to comment.