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">

0 commit comments

Comments
 (0)