Skip to content

Commit bcbb141

Browse files
vinothpandianvinothpandian
committed
chore: add more examples
1 parent b798782 commit bcbb141

File tree

13 files changed

+334
-8
lines changed

13 files changed

+334
-8
lines changed

‎apps/docs/src/components/LiveCode.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ interface LiveCodeProps {
1616
export function LiveCode({
1717
files,
1818
editorClassName = "h-64",
19-
previewClassName = "h-64",
19+
previewClassName = "h-80",
2020
}: LiveCodeProps) {
2121
return (
2222
<div className="reset-wrapper mt-4">
@@ -42,7 +42,7 @@ export function LiveCode({
4242
>
4343
<SandpackCodeEditor showTabs />
4444
</SandpackLayout>
45-
<div className="rounded-b-lg bg-zinc-900 p-4">
45+
<div className="rounded-b-lg bg-zinc-900 p-2">
4646
<div className="overflow-hidden rounded bg-white p-1">
4747
<SandpackPreview
4848
className={previewClassName}

‎apps/docs/src/content/docs/examples/background.mdx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
title: Background
3+
description: Setting up background of the canvas.
4+
sidebar:
5+
order: 5
6+
---
7+
import { LiveCode } from "../../../components/LiveCode";
8+
import Background from "../../../examples/Background.tsx?raw";
9+
import BackgroundDataURI from "../../../examples/BackgroundDataURI.tsx?raw";
10+
11+
<LiveCode client:load previewClassName="h-96" files={{ "App.tsx": Background }} />
12+
13+
## Data URI as Background
14+
15+
<LiveCode client:load previewClassName="h-96" files={{ "App.tsx": BackgroundDataURI }} />

‎apps/docs/src/content/docs/examples/sketching-time.mdx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
title: Sketching time
3+
description: Measuring sketching time
4+
sidebar:
5+
order: 6
6+
---
7+
8+
import { LiveCode } from "../../../components/LiveCode";
9+
import SketchingTime from "../../../examples/SketchingTime.tsx?raw";
10+
11+
<LiveCode client:load files={{ "App.tsx": SketchingTime }} />

‎apps/docs/src/content/docs/examples/undo-redo.mdx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
title: Undo, Redo, Clear, and Reset
3+
description: Undo, Redo, Clear, and Reset the canvas.
4+
sidebar:
5+
order: 4
6+
---
7+
import { LiveCode } from "../../../components/LiveCode";
8+
import UndoRedo from "../../../examples/UndoRedo.tsx?raw";
9+
10+
<LiveCode client:load previewClassName="h-96" files={{ "App.tsx": UndoRedo }} />

‎apps/docs/src/content/docs/index.mdx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,15 @@ hero:
1818

1919
import { Card, CardGrid } from "@astrojs/starlight/components";
2020
import { HomePageDemo } from "../../components/HomePageDemo";
21+
import { Link } from "@astrojs/check";
2122

2223
<HomePageDemo client:load />
2324

2425
## Features
2526

2627
<CardGrid>
2728
<Card title="Multi input support" icon="pencil">
28-
Accepts input from Mouse, touch, and graphic tablets.
29+
Accepts input from Mouse, touch, and graphic tablets. Example <a href="/react-sketch-canvas/examples/input-devices/">here</a>.
2930
</Card>
3031
<Card title="Vector-first drawing" icon="add-document">
3132
Freehand drawing with vector output with PNG & JPEG export.

‎apps/docs/src/examples/Background.tsx

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { ReactSketchCanvas } from "react-sketch-canvas";
2+
import { type ChangeEvent, useState } from "react";
3+
4+
const somePreserveAspectRatio = [
5+
"none",
6+
"xMinYMin",
7+
"xMidYMin",
8+
"xMaxYMin",
9+
"xMinYMid",
10+
"xMidYMid",
11+
"xMaxYMid",
12+
"xMinYMax",
13+
"xMidYMax",
14+
"xMaxYMax",
15+
] as const;
16+
17+
type SomePreserveAspectRatio = (typeof somePreserveAspectRatio)[number];
18+
19+
export default function App() {
20+
const [backgroundImage, setBackgroundImage] = useState(
21+
"https://images.pexels.com/photos/1193743/pexels-photo-1193743.jpeg?cs=srgb&fm=jpg",
22+
);
23+
const [preserveAspectRatio, setPreserveAspectRatio] =
24+
useState<SomePreserveAspectRatio>("none");
25+
26+
const handlePreserveAspectRatioChange = (
27+
event: ChangeEvent<HTMLSelectElement>,
28+
) => {
29+
setPreserveAspectRatio(event.target.value as SomePreserveAspectRatio);
30+
};
31+
32+
const handleBackgroundImageChange = (
33+
event: ChangeEvent<HTMLInputElement>,
34+
) => {
35+
setBackgroundImage(event.target.value);
36+
};
37+
38+
return (
39+
<div className="d-flex flex-column gap-2 p-2">
40+
<h1>Tools</h1>
41+
<div className="d-flex gap-2 flex-column">
42+
<div className="mb-3">
43+
<label htmlFor="backgroundImage" className="form-label">
44+
Background Image
45+
</label>
46+
<input
47+
type="text"
48+
className="form-control"
49+
id="backgroundImage"
50+
placeholder="URL of the image to use as a background"
51+
value={backgroundImage}
52+
onChange={handleBackgroundImageChange}
53+
/>
54+
</div>
55+
<label htmlFor="preserveAspectRatio" className="form-label">
56+
Preserve Aspect Ratio
57+
</label>
58+
<select
59+
id="preserveAspectRatio"
60+
className="form-select form-select-sm"
61+
aria-label="Preserve Aspect Ratio options"
62+
value={preserveAspectRatio}
63+
onChange={handlePreserveAspectRatioChange}
64+
>
65+
{somePreserveAspectRatio.map((value) => (
66+
<option key={value} value={value}>
67+
{value}
68+
</option>
69+
))}
70+
</select>
71+
</div>
72+
<h1>Canvas</h1>
73+
<ReactSketchCanvas
74+
backgroundImage={backgroundImage}
75+
preserveBackgroundImageAspectRatio={preserveAspectRatio}
76+
/>
77+
</div>
78+
);
79+
}

‎apps/docs/src/examples/BackgroundDataURI.tsx

Lines changed: 79 additions & 0 deletions
Large diffs are not rendered by default.

‎apps/docs/src/examples/Colors.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export default function App() {
1818
};
1919

2020
return (
21-
<div className="d-flex flex-column gap-2">
21+
<div className="d-flex flex-column gap-2 p-2">
2222
<h1>Tools</h1>
2323
<div className="d-flex gap-2 align-items-center ">
2424
<label htmlFor="color">Stroke color</label>

‎apps/docs/src/examples/Drawing.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,18 +29,20 @@ export default function App() {
2929
};
3030

3131
return (
32-
<div className="d-flex flex-column gap-2">
32+
<div className="d-flex flex-column gap-2 p-2">
3333
<h1>Tools</h1>
3434
<div className="d-flex gap-2 align-items-center ">
3535
<button
36-
className="btn btn-sm btn-primary"
36+
type="button"
37+
className="btn btn-sm btn-outline-primary"
3738
disabled={!eraseMode}
3839
onClick={handlePenClick}
3940
>
4041
Pen
4142
</button>
4243
<button
43-
className="btn btn-sm btn-primary"
44+
type="button"
45+
className="btn btn-sm btn-outline-primary"
4446
disabled={eraseMode}
4547
onClick={handleEraserClick}
4648
>

‎apps/docs/src/examples/ReadOnly.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default function App() {
99
};
1010

1111
return (
12-
<div className="d-flex flex-column gap-2">
12+
<div className="d-flex flex-column gap-2 p-2">
1313
<h1>Tools</h1>
1414
<div className="d-flex gap-2 align-items-center ">
1515
<div className="form-check form-switch">

‎apps/docs/src/examples/SketchingTime.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import {
2+
ReactSketchCanvas,
3+
type ReactSketchCanvasRef,
4+
} from "react-sketch-canvas";
5+
import { useRef, useState } from "react";
6+
7+
export default function App() {
8+
const canvasRef = useRef<ReactSketchCanvasRef>(null);
9+
const [sketchingTime, setSketchingTime] = useState(0);
10+
11+
const handleSketchingTime = async () => {
12+
const time = (await canvasRef.current?.getSketchingTime()) || 0;
13+
setSketchingTime(time);
14+
};
15+
16+
const sketchingTimeInSeconds = (sketchingTime / 1_000).toLocaleString();
17+
18+
return (
19+
<div className="d-flex flex-column gap-2 p-2">
20+
<h1>Tools</h1>
21+
<div className="d-flex gap-2 align-items-center ">
22+
<button
23+
type="button"
24+
className="btn btn-sm btn-outline-primary"
25+
onClick={handleSketchingTime}
26+
>
27+
Get Sketching Time
28+
</button>
29+
<span>{sketchingTimeInSeconds} seconds</span>
30+
</div>
31+
<h1>Canvas</h1>
32+
<ReactSketchCanvas ref={canvasRef} withTimestamp />
33+
</div>
34+
);
35+
}

‎apps/docs/src/examples/UndoRedo.tsx

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import {
2+
ReactSketchCanvas,
3+
type ReactSketchCanvasRef,
4+
} from "react-sketch-canvas";
5+
import { useRef, useState } from "react";
6+
7+
export default function App() {
8+
const canvasRef = useRef<ReactSketchCanvasRef>(null);
9+
const [eraseMode, setEraseMode] = useState(false);
10+
11+
const handleEraserClick = () => {
12+
setEraseMode(true);
13+
canvasRef.current?.eraseMode(true);
14+
};
15+
16+
const handlePenClick = () => {
17+
setEraseMode(false);
18+
canvasRef.current?.eraseMode(false);
19+
};
20+
21+
const handleUndoClick = () => {
22+
canvasRef.current?.undo();
23+
};
24+
25+
const handleRedoClick = () => {
26+
canvasRef.current?.redo();
27+
};
28+
29+
const handleClearClick = () => {
30+
canvasRef.current?.clearCanvas();
31+
};
32+
33+
const handleResetClick = () => {
34+
canvasRef.current?.resetCanvas();
35+
};
36+
37+
return (
38+
<div className="d-flex flex-column gap-2 p-2">
39+
<h1>Tools</h1>
40+
<div className="d-flex gap-2 align-items-center ">
41+
<button
42+
type="button"
43+
className="btn btn-sm btn-outline-primary"
44+
disabled={!eraseMode}
45+
onClick={handlePenClick}
46+
>
47+
Pen
48+
</button>
49+
<button
50+
type="button"
51+
className="btn btn-sm btn-outline-primary"
52+
disabled={eraseMode}
53+
onClick={handleEraserClick}
54+
>
55+
Eraser
56+
</button>
57+
<div className="vr" />
58+
<button
59+
type="button"
60+
className="btn btn-sm btn-outline-primary"
61+
onClick={handleUndoClick}
62+
>
63+
Undo
64+
</button>
65+
<button
66+
type="button"
67+
className="btn btn-sm btn-outline-primary"
68+
onClick={handleRedoClick}
69+
>
70+
Redo
71+
</button>
72+
<button
73+
type="button"
74+
className="btn btn-sm btn-outline-primary"
75+
onClick={handleClearClick}
76+
>
77+
Clear
78+
</button>
79+
<button
80+
type="button"
81+
className="btn btn-sm btn-outline-primary"
82+
onClick={handleResetClick}
83+
>
84+
Reset
85+
</button>
86+
</div>
87+
<h1>Canvas</h1>
88+
<ReactSketchCanvas ref={canvasRef} />
89+
</div>
90+
);
91+
}

‎packages/react-sketch-canvas/src/ReactSketchCanvas/types.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,9 @@ export interface ReactSketchCanvasRef extends CanvasRef {
112112
loadPaths: (paths: CanvasPath[]) => void;
113113
/**
114114
* Get the current drawing time in milliseconds. This will only work if withTimestamp prop is set to true.
115+
*
116+
* @remarks
117+
* This does not include the idle time when the user is not drawing. It only includes the time when the user is drawing on the canvas.
115118
*/
116119
getSketchingTime: () => Promise<number>;
117120
/**

0 commit comments

Comments
 (0)