Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add custom paths feature #168

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+3,478 −2,511
Open

Add custom paths feature #168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ef93338
Add throttling to pointer move event (#164)
vinothpandian Aug 17, 2024
2a6b5b4
Add custom paths feature
vinothpandian Aug 17, 2024
ac4d3f7
fix: update lockfile
vinothpandian Aug 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions .github/workflows/test.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
name: CI
on: [ push ]
on: [push]
jobs:
build:
name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}

runs-on: ${{ matrix.os }}
strategy:
matrix:
node: [ "18.x" ]
os: [ ubuntu-latest ]
node: ["18.x"]
os: [ubuntu-latest]

steps:
- name: Checkout repo
Expand Down Expand Up @@ -41,12 +41,12 @@ jobs:
- name: Install dependencies
run: pnpm install --no-frozen-lockfile

- name: Lint
run: pnpm lint

- name: Install Playwright browsers
run: pnpx playwright install chromium

- name: Unit tests
run: pnpm unit:test

- name: Test
run: pnpm test

Expand Down
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,5 @@ packages/tests/cypress/downloads/
.idea/
.turbo/cookies/
/apps/docs/src/content/docs/api/
.turbo/cache/
.turbo/daemon/
38 changes: 19 additions & 19 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,26 +108,26 @@ const Canvas = class extends React.Component {

## List of Props

| Props | Expected datatype | Default value | Description |
|------------------------------------| ----------------- | --------------------- |----------------------------------------------------------------------------------------------------|
| width | PropTypes.string | 100% | canvas width (em/rem/px) |
| height | PropTypes.string | 100% | canvas width (em/rem/px) |
| id | PropTypes.string | "react-sketch-canvas" | ID field to uniquely identify a SVG canvas (Supports multiple canvases in a single page) |
| 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 | false | Keep background image on image/SVG export (on false, canvasColor will be set as background) |
| Props | Expected datatype | Default value | Description |
| ---------------------------------- | ----------------- | --------------------- | --------------------------------------------------------------------------------------------------- |
| width | PropTypes.string | 100% | canvas width (em/rem/px) |
| height | PropTypes.string | 100% | canvas width (em/rem/px) |
| id | PropTypes.string | "react-sketch-canvas" | ID field to uniquely identify a SVG canvas (Supports multiple canvases in a single page) |
| 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 | false | 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") |
| onChange | PropTypes.func | | Returns the current sketch path in `CanvasPath` type on every path change |
| onStroke | PropTypes.func | | Returns the the last stroke path and whether it is an eraser stroke on every pointer up event |
| style | PropTypes.object | false | Add CSS styling as CSS-in-JS object |
| svgStyle | PropTypes.object | {} | Add CSS styling as CSS-in-JS object for the SVG |
| withTimestamp | PropTypes.bool | false | Add timestamp to individual strokes for measuring sketching time |
| readOnly | PropTypes.bool | false | Disable drawing on the canvas (undo/redo, clear & reset will still work.) |
| strokeWidth | PropTypes.number | 4 | Pen stroke size |
| eraserWidth | PropTypes.number | 8 | Erase size |
| allowOnlyPointerType | PropTypes.string | all | allow pointer type ("all"/"mouse"/"pen"/"touch") |
| onChange | PropTypes.func | | Returns the current sketch path in `CanvasPath` type on every path change |
| onStroke | PropTypes.func | | Returns the the last stroke path and whether it is an eraser stroke on every pointer up event |
| style | PropTypes.object | false | Add CSS styling as CSS-in-JS object |
| svgStyle | PropTypes.object | {} | Add CSS styling as CSS-in-JS object for the SVG |
| withTimestamp | PropTypes.bool | false | Add timestamp to individual strokes for measuring sketching time |
| readOnly | PropTypes.bool | false | Disable drawing on the canvas (undo/redo, clear & reset will still work.) |

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

Expand Down
7 changes: 4 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"preview": "turbo run preview",
"lint": "turbo run lint",
"test": "turbo run build test",
"unit:test": "turbo run unit:test",
"ci:test": "turbo run build ci:test",
"format": "prettier --write \"**/*.{ts,tsx,md}\"",
"ci:build": "cp README.md packages/react-sketch-canvas/ && pnpm --filter react-sketch-canvas ci:build",
Expand All @@ -20,15 +21,15 @@
},
"devDependencies": {
"eslint-config-custom": "workspace:*",
"prettier": "^3.2.5",
"turbo": "^1.12.4"
"prettier": "^3.3.3",
"turbo": "^2.0.14"
},
"engines": {
"node": ">=18.0.0",
"pnpm": ">=8.0.0"
},
"packageManager": "[email protected]",
"dependencies": {
"@changesets/cli": "^2.27.1"
"@changesets/cli": "^2.27.7"
}
}
1 change: 1 addition & 0 deletions packages/eslint-config-custom/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ module.exports = {
"react/jsx-filename-extension": [1, { extensions: [".tsx", ".jsx"] }],
"import/extensions": [1, "never"],
"import/prefer-default-export": "off",
"import/no-extraneous-dependencies": "off",
},
parser: "@typescript-eslint/parser",
plugins: ["@typescript-eslint"],
Expand Down
40 changes: 21 additions & 19 deletions packages/react-sketch-canvas/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,26 +108,28 @@ const Canvas = class extends React.Component {

## List of Props

| Props | Expected datatype | Default value | Description |
|------------------------------------| ----------------- | --------------------- |----------------------------------------------------------------------------------------------------|
| width | PropTypes.string | 100% | canvas width (em/rem/px) |
| height | PropTypes.string | 100% | canvas width (em/rem/px) |
| id | PropTypes.string | "react-sketch-canvas" | ID field to uniquely identify a SVG canvas (Supports multiple canvases in a single page) |
| 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 | false | Keep background image on image/SVG export (on false, canvasColor will be set as background) |
| Props | Expected datatype | Default value | Description |
| ---------------------------------- | ----------------- | --------------------- | --------------------------------------------------------------------------------------------------- |
| width | PropTypes.string | 100% | canvas width (em/rem/px) |
| height | PropTypes.string | 100% | canvas width (em/rem/px) |
| id | PropTypes.string | "react-sketch-canvas" | ID field to uniquely identify a SVG canvas (Supports multiple canvases in a single page) |
| 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 | false | 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") |
| onChange | PropTypes.func | | Returns the current sketch path in `CanvasPath` type on every path change |
| onStroke | PropTypes.func | | Returns the the last stroke path and whether it is an eraser stroke on every pointer up event |
| style | PropTypes.object | false | Add CSS styling as CSS-in-JS object |
| svgStyle | PropTypes.object | {} | Add CSS styling as CSS-in-JS object for the SVG |
| withTimestamp | PropTypes.bool | false | Add timestamp to individual strokes for measuring sketching time |
| readOnly | PropTypes.bool | false | Disable drawing on the canvas (undo/redo, clear & reset will still work.) |
| strokeWidth | PropTypes.number | 4 | Pen stroke size |
| eraserWidth | PropTypes.number | 8 | Erase size |
| allowOnlyPointerType | PropTypes.string | all | allow pointer type ("all"/"mouse"/"pen"/"touch") |
| onChange | PropTypes.func | | Returns the current sketch path in `CanvasPath` type on every path change |
| onStroke | PropTypes.func | | Returns the the last stroke path and whether it is an eraser stroke on every pointer up event |
| style | PropTypes.object | false | Add CSS styling as CSS-in-JS object |
| svgStyle | PropTypes.object | {} | Add CSS styling as CSS-in-JS object for the SVG |
| withTimestamp | PropTypes.bool | false | Add timestamp to individual strokes for measuring sketching time |
| readOnly | PropTypes.bool | false | Disable drawing on the canvas (undo/redo, clear & reset will still work.) |
| throttleTime | PropTypes.number | 0 | Throttle time for pointer move events in milliseconds |
| getSvgPathFromPoints | PropTypes.func | | Custom path generator callback that receives the current path as an array and returns an SVG path |

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

Expand Down
9 changes: 7 additions & 2 deletions packages/react-sketch-canvas/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,21 +42,26 @@
"ci:build": "pnpm clean && tsup src/index.tsx --env.NODE_ENV production && npm run size",
"dev": "tsup src/index.tsx --env.NODE_ENV development",
"lint": "eslint *.ts*",
"size": "size-limit"
"size": "size-limit",
"unit:test": "vitest --no-watch"
},
"devDependencies": {
"@size-limit/preset-small-lib": "^11.0.2",
"@testing-library/dom": "^10.4.0",
"@testing-library/react": "^16.0.0",
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
"eslint": "^8.56.0",
"eslint-config-custom": "workspace:*",
"jsdom": "^24.1.1",
"react": "^18.2.0",
"rimraf": "^5.0.5",
"size-limit": "^11.0.2",
"tsconfig": "workspace:*",
"tslib": "^2.6.2",
"tsup": "^8.0.2",
"typescript": "^5.3.3"
"typescript": "^5.3.3",
"vitest": "^2.0.5"
},
"peerDependencies": {
"react": ">=16.8"
Expand Down
39 changes: 39 additions & 0 deletions packages/react-sketch-canvas/src/Canvas/__test__/utils.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { describe, it, expect, vi } from "vitest";
import { renderHook, act } from "@testing-library/react";

import { useThrottledCallback } from "../utils";

describe("useThrottledCallback", () => {
it("should call the callback immediately if delay is 0", () => {
const callback = vi.fn();
const { result } = renderHook(() => useThrottledCallback(callback, 0, []));

act(() => {
result.current();
});

expect(callback).toHaveBeenCalledTimes(1);
});

it("should throttle the callback", () => {
vi.useFakeTimers();
const callback = vi.fn();
const { result } = renderHook(() => useThrottledCallback(callback, 20, []));

act(() => {
result.current();
result.current();
result.current();
});

expect(callback).toHaveBeenCalledTimes(1);

act(() => {
vi.advanceTimersByTime(20);
});

expect(callback).toHaveBeenCalledTimes(2);

vi.useRealTimers();
});
});
Loading
Loading