Skip to content

Commit ebdaa22

Browse files
vinothpandianvinothpandian
authored
Merge pull request #36 from vinothpandian/next
update background image using SVG image and update erase to use mask
2 parents 655a2bc + 50688d3 commit ebdaa22

36 files changed

+2624
-3787
lines changed

‎.github/workflows/node.js.yml‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
name: Node.js CI
2+
on:
3+
push:
4+
branches:
5+
- master
6+
pull_request:
7+
branches:
8+
- master
9+
jobs:
10+
build:
11+
runs-on: ubuntu-latest
12+
strategy:
13+
matrix:
14+
node-version:
15+
- 14.x
16+
steps:
17+
- uses: actions/checkout@v2
18+
19+
- name: Use Node.js ${{ matrix.node-version }}
20+
uses: actions/setup-node@v2
21+
with:
22+
node-version: ${{ matrix.node-version }}
23+
- run: |
24+
yarn install --frozen-lockfile --silent
25+
yarn nx run react-sketch-canvas:build
26+
yarn nx run react-sketch-canvas:build-storybook:ci
27+
28+
- name: Deploy Storybook 🚀
29+
uses: JamesIves/github-pages-deploy-action@4.1.4
30+
with:
31+
branch: gh-pages
32+
folder: dist/storybook/react-sketch-canvas
33+
clean: true
34+
35+
- uses: JS-DevTools/npm-publish@v1
36+
with:
37+
token: ${{ secrets.NPM_TOKEN }}
38+
check-version: true
39+
package: dist/libs/react-sketch-canvas/package.json

‎.storybook/main.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
module.exports = {
22
stories: [],
3-
addons: ['@storybook/addon-knobs/register'],
3+
addons: ['@storybook/addon-essentials'],
4+
// uncomment the property below if you want to apply some webpack config globally
5+
// webpackFinal: async (config, { configType }) => {
6+
// // Make whatever fine-grained changes you need that should apply to all storybook configs
7+
8+
// // Return the altered config
9+
// return config;
10+
// },
411
};

‎.storybook/webpack.config.js‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎.vscode/launch.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"type": "pwa-chrome",
9+
"request": "launch",
10+
"name": "Debug storybook",
11+
"url": "http://localhost:4400",
12+
"webRoot": "${workspaceFolder}",
13+
"preLaunchTask": "Storybook",
14+
"sourceMaps": true,
15+
"sourceMapPathOverrides": {
16+
"webpack:///*": "${webRoot}/*",
17+
"webpack:///./*": "${webRoot}/*",
18+
"webpack:///src/*": "${webRoot}/*",
19+
"webpack:///./~/*": "${webRoot}/node_modules/*"
20+
}
21+
}
22+
]
23+
}

‎.vscode/tasks.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
// See https://go.microsoft.com/fwlink/?LinkId=733558
3+
// for the documentation about the tasks.json format
4+
"version": "2.0.0",
5+
"tasks": [
6+
{
7+
"label": "Storybook",
8+
"type": "shell",
9+
"command": "nx run react-sketch-canvas:storybook",
10+
"isBackground": true
11+
}
12+
]
13+
}

‎CHANGELOG.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,22 @@
11
## Changelog
22

3+
## [6.0.0]
4+
5+
## Added
6+
7+
- Upgraded all dependencies
8+
- Updated directory structure
9+
- Added background image rendering directly in SVG
10+
- Added option to export background image while exporting the canvas as image or SVG
11+
- Added background image aspect ratio control
12+
- Updated erase option to use mask instead of canvas color
13+
- Add github action for deployment of storybook and package
14+
15+
## Breaking changes
16+
17+
- Removed background option to set background image using CSS-in-JS (instead check feature-filled backgroundImage prop)
18+
19+
320
## [5.3.4]
421

522
## Added

‎README.md‎

Lines changed: 24 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,12 @@ yarn add react-sketch-canvas
5555
Common usage example
5656

5757
```javascript
58-
import React from "react";
59-
import { ReactSketchCanvas } from "react-sketch-canvas";
58+
import React from 'react';
59+
import { ReactSketchCanvas } from 'react-sketch-canvas';
6060

6161
const styles = {
62-
border: "0.0625rem solid #9c9c9c",
63-
borderRadius: "0.25rem",
62+
border: '0.0625rem solid #9c9c9c',
63+
borderRadius: '0.25rem',
6464
};
6565

6666
const Canvas = () => {
@@ -124,52 +124,30 @@ const Canvas = class extends React.Component {
124124

125125
## List of Props
126126

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

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

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

145-
Example
146-
147-
```javascript
148-
<ReactSketchCanvas width="25em" height="10rem" />
149-
```
150-
151-
## Styling
152-
153-
You can pass a CSS in JS style object to style the element. By default it has a border with following properties
148+
<br />
154149

155-
```css
156-
canvas {
157-
border: 0.0625rem solid #9c9c9c;
158-
border-radius: 0.25rem;
159-
}
160-
```
161-
162-
Example
163-
164-
```javascript
165-
<ReactSketchCanvas
166-
style={{
167-
border: "0.0625rem solid #9c9c9c",
168-
}}
169-
/>
170-
```
171-
172-
## Functions
150+
## Methods
173151

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

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

193171
```ts
194-
type ExportImageType = "jpeg" | "png";
172+
type ExportImageType = 'jpeg' | 'png';
195173

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

219-
220197
---
221198

222199
[based-on]: https://pspdfkit.com/blog/2017/how-to-build-free-hand-drawing-using-react/
223200
[smooth-curve-tutorial]: https://medium.com/@francoisromain/smooth-a-svg-path-with-cubic-bezier-curves-e37b49d46c74
224201
[css-bg]: https://developer.mozilla.org/en-US/docs/Web/CSS/background
225202
[immer]: https://immerjs.github.io/immer/docs/introduction
203+
[preserveaspectratio]: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

‎apps/react-sketch-canvas-e2e/.eslintrc.json‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎apps/react-sketch-canvas-e2e/cypress.json‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎apps/react-sketch-canvas-e2e/src/fixtures/example.json‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

0 commit comments

Comments
 (0)