Skip to content

Commit 9c4715c

Browse files
HriBBHriBB
committed
Add ability to pass scope to Canvas component
1 parent ab7977b commit 9c4715c

17 files changed

+157
-85
lines changed

‎demo/components/layout.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { useAppContext } from './context';
66

77
const menuItems = [
88
{ name: 'Editor', url: '/editor' },
9+
{ name: 'Scope', url: '/scope' },
910
{ name: 'Multi Canvas', url: '/multi-canvas' },
1011
{ name: 'Animations', url: '/animations' },
1112
{ name: 'Layers', url: '/layers' },
@@ -33,7 +34,10 @@ export const Layout = ({ children }: Props) => {
3334
<>
3435
<Head>
3536
<title>react-paper-bindings</title>
36-
<meta name="description" content="Examples for react-paper-bindings library." />
37+
<meta
38+
name="description"
39+
content="Examples for react-paper-bindings library."
40+
/>
3741
</Head>
3842
<Drawer
3943
mobile

‎demo/pages/animations.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Form, Toggle } from 'react-daisyui';
44
import { Page, Container, Canvas, Toolbar, Code } from 'components/content';
55
import { View, Layer, Rectangle } from 'react-paper-bindings';
66

7-
const Animations: NextPage = () => {
7+
const AnimationsPage: NextPage = () => {
88
const [animating, setAnimating] = useState(true);
99
const [rotation, setRotation] = useState(0);
1010
const [position, setPosition] = useState([75, 50]);
@@ -53,15 +53,15 @@ const Animations: NextPage = () => {
5353
);
5454
};
5555

56-
export default Animations;
56+
export default AnimationsPage;
5757

5858
const code = `import React, { useCallback, useState } from 'react';
5959
import type { NextPage } from 'next';
6060
import { Form, Toggle } from 'react-daisyui';
6161
import { Page, Container, Canvas, Toolbar } from 'components/content';
6262
import { View, Layer, Rectangle } from 'react-paper-bindings';
6363
64-
const Animations: NextPage = () => {
64+
const AnimationsPage: NextPage = () => {
6565
const [animating, setAnimating] = useState(true);
6666
const [rotation, setRotation] = useState(0);
6767
const [position, setPosition] = useState([75, 50]);
@@ -109,4 +109,4 @@ const Animations: NextPage = () => {
109109
);
110110
};
111111
112-
export default Animations;`;
112+
export default AnimationsPage;`;

‎demo/pages/compound-path.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { NextPage } from 'next';
33
import { Page, Container, Canvas, Code } from 'components/content';
44
import { View, Layer, Circle, CompoundPath } from 'react-paper-bindings';
55

6-
const Compound: NextPage = () => {
6+
const CompoundPathPage: NextPage = () => {
77
return (
88
<Page title="CompoundPath">
99
<Container>
@@ -23,14 +23,14 @@ const Compound: NextPage = () => {
2323
);
2424
};
2525

26-
export default Compound;
26+
export default CompoundPathPage;
2727

2828
const code = `import React from 'react';
2929
import type { NextPage } from 'next';
3030
import { Page, Container, Canvas } from 'components/content';
3131
import { View, Layer, Circle, CompoundPath } from 'react-paper-bindings';
3232
33-
const Compound: NextPage = () => {
33+
const CompoundPathPage: NextPage = () => {
3434
return (
3535
<Page title="CompoundPath">
3636
<Container>
@@ -49,4 +49,4 @@ const Compound: NextPage = () => {
4949
);
5050
};
5151
52-
export default Compound;`;
52+
export default CompoundPathPage;`;

‎demo/pages/editor.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@ import type { NextPage } from 'next';
33
import { Page } from 'components/content';
44
import { Paper } from 'components/paper';
55

6-
const Editor: NextPage = () => {
6+
const EditorPage: NextPage = () => {
77
return (
88
<Page title="Editor">
99
<Paper image={data} />
1010
</Page>
1111
);
1212
};
1313

14-
export default Editor;
14+
export default EditorPage;
1515

1616
const prefix = process.env.NEXT_PUBLIC_BASE_PATH || '';
1717

‎demo/pages/events.tsx

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import React, { useState } from 'react';
22
import type { NextPage } from 'next';
33
import { Page, Container, Canvas, Code } from 'components/content';
4-
import { View, Layer, Rectangle as Rect, Circle as Circ } from 'react-paper-bindings';
4+
import {
5+
View,
6+
Layer,
7+
Rectangle as Rect,
8+
Circle as Circ,
9+
} from 'react-paper-bindings';
510

611
type RectangleProps = {
712
center: [number, number];
@@ -39,7 +44,7 @@ const Circle = (props: CircleProps) => {
3944
);
4045
};
4146

42-
const Events: NextPage = () => {
47+
const EventsPage: NextPage = () => {
4348
return (
4449
<Page title="Events">
4550
<Container>
@@ -57,7 +62,7 @@ const Events: NextPage = () => {
5762
);
5863
};
5964

60-
export default Events;
65+
export default EventsPage;
6166

6267
const code = `import React, { useState } from 'react';
6368
import type { NextPage } from 'next';
@@ -105,7 +110,7 @@ const Circle = (props: CircleProps) => {
105110
);
106111
};
107112
108-
const Events: NextPage = () => {
113+
const EventsPage: NextPage = () => {
109114
return (
110115
<Page title="Events">
111116
<Container>
@@ -122,4 +127,4 @@ const Events: NextPage = () => {
122127
);
123128
};
124129
125-
export default Events;`;
130+
export default EventsPage;`;

‎demo/pages/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const MyCanvas = () =>(
2424
export default MyCanvas`,
2525
};
2626

27-
const Home: NextPage = () => {
27+
const HomePage: NextPage = () => {
2828
return (
2929
<Page title="Documentation">
3030
<Container className="pb-8">
@@ -37,4 +37,4 @@ const Home: NextPage = () => {
3737
);
3838
};
3939

40-
export default Home;
40+
export default HomePage;

‎demo/pages/layers.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const CircleLayer = ({ set }: LayerProps) => (
2828
</Layer>
2929
);
3030

31-
const Layers: NextPage = () => {
31+
const LayersPage: NextPage = () => {
3232
const [first, set] = useState<First>('rectangle');
3333
return (
3434
<Page title="Layers">
@@ -53,7 +53,7 @@ const Layers: NextPage = () => {
5353
);
5454
};
5555

56-
export default Layers;
56+
export default LayersPage;
5757

5858
const code = `import React, { useState } from 'react';
5959
import type { NextPage } from 'next';
@@ -85,7 +85,7 @@ const CircleLayer = ({ set }: LayerProps) => (
8585
</Layer>
8686
);
8787
88-
const Layers: NextPage = () => {
88+
const LayersPage: NextPage = () => {
8989
const [first, set] = useState<First>('rectangle');
9090
return (
9191
<Page title="Layers">
@@ -109,4 +109,4 @@ const Layers: NextPage = () => {
109109
);
110110
};
111111
112-
export default Layers;`;
112+
export default LayersPage;`;

‎demo/pages/multi-canvas.tsx

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
1-
import React, { useState } from 'react';
1+
import React, { useRef, useState } from 'react';
22
import type { NextPage } from 'next';
33
import { Form, Toggle } from 'react-daisyui';
44
import { Page, Container, Toolbar, Canvas, Code } from 'components/content';
5-
import { View, Layer, Rectangle } from 'react-paper-bindings';
5+
import { PaperScope, View, Layer, Rectangle } from 'react-paper-bindings';
6+
7+
const MultiCanvasPage: NextPage = () => {
8+
const [scope1] = useState(new PaperScope());
9+
const scope2 = useRef(new PaperScope());
610

7-
const MultiCanvas: NextPage = () => {
811
const [visible1, setVisible1] = useState(true);
912
const [visible2, setVisible2] = useState(true);
13+
1014
const [color1, setColor1] = useState('blue');
1115
const [color2, setColor2] = useState('red');
16+
1217
return (
1318
<Page title="Multi Canvas">
1419
<Container>
@@ -29,7 +34,7 @@ const MultiCanvas: NextPage = () => {
2934
</Form.Label>
3035
</Toolbar>
3136
{visible1 && (
32-
<Canvas>
37+
<Canvas scope={scope1}>
3338
<View>
3439
<Layer>
3540
<Rectangle
@@ -43,7 +48,7 @@ const MultiCanvas: NextPage = () => {
4348
</Canvas>
4449
)}
4550
{visible2 && (
46-
<Canvas>
51+
<Canvas scope={scope2.current}>
4752
<View>
4853
<Layer>
4954
<Rectangle
@@ -62,19 +67,24 @@ const MultiCanvas: NextPage = () => {
6267
);
6368
};
6469

65-
export default MultiCanvas;
70+
export default MultiCanvasPage;
6671

67-
const code = `import React, { useState } from 'react';
72+
const code = `import React, { useRef, useState } from 'react';
6873
import type { NextPage } from 'next';
6974
import { Form, Toggle } from 'react-daisyui';
70-
import { Page, Container, Toolbar, Canvas } from 'components/content';
71-
import { View, Layer, Rectangle } from 'react-paper-bindings';
75+
import { Page, Container, Toolbar, Canvas, Code } from 'components/content';
76+
import { Scope, View, Layer, Rectangle } from 'react-paper-bindings';
77+
78+
const MultiCanvasPage: NextPage = () => {
79+
const [scope1] = useState(new Scope());
80+
const scope2 = useRef(new Scope());
7281
73-
const MultiCanvas: NextPage = () => {
7482
const [visible1, setVisible1] = useState(true);
7583
const [visible2, setVisible2] = useState(true);
84+
7685
const [color1, setColor1] = useState('blue');
7786
const [color2, setColor2] = useState('red');
87+
7888
return (
7989
<Page title="Multi Canvas">
8090
<Container>
@@ -95,7 +105,7 @@ const MultiCanvas: NextPage = () => {
95105
</Form.Label>
96106
</Toolbar>
97107
{visible1 && (
98-
<Canvas>
108+
<Canvas scope={scope1}>
99109
<View>
100110
<Layer>
101111
<Rectangle
@@ -109,7 +119,7 @@ const MultiCanvas: NextPage = () => {
109119
</Canvas>
110120
)}
111121
{visible2 && (
112-
<Canvas>
122+
<Canvas scope={scope2.current}>
113123
<View>
114124
<Layer>
115125
<Rectangle
@@ -127,4 +137,4 @@ const MultiCanvas: NextPage = () => {
127137
);
128138
};
129139
130-
export default MultiCanvas;`;
140+
export default MultiCanvasPage;`;

‎demo/pages/refs.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const MyRectangle = () => {
2424
);
2525
};
2626

27-
const Refs: NextPage = () => {
27+
const RefsPage: NextPage = () => {
2828
const canvasRef = useRef<HTMLCanvasElement | null>(null);
2929
const rectangleRef = useRef<paper.Path.Rectangle | null>(null);
3030
const [radius, setRadius] = useState(10);
@@ -80,7 +80,7 @@ const Refs: NextPage = () => {
8080
);
8181
};
8282

83-
export default Refs;
83+
export default RefsPage;
8484

8585
const code = `import React, { useCallback, useEffect, useRef, useState } from 'react';
8686
import type { NextPage } from 'next';
@@ -93,7 +93,7 @@ const radiusMax = 80;
9393
const hueMin = 0;
9494
const hueMax = 360;
9595
96-
const Refs: NextPage = () => {
96+
const RefsPage: NextPage = () => {
9797
const canvasRef = useRef<HTMLCanvasElement | null>(null);
9898
const rectangleRef = useRef<paper.Path.Rectangle | null>(null);
9999
const [radius, setRadius] = useState(10);
@@ -148,4 +148,4 @@ const Refs: NextPage = () => {
148148
);
149149
};
150150
151-
export default Refs;`;
151+
export default RefsPage;`;

‎demo/pages/reorder.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ function move(arr: any[], from: number, to: number) {
1414
}, []);
1515
}
1616

17-
const Reorder: NextPage = () => {
17+
const ReorderPage: NextPage = () => {
1818
const [rects, setRects] = useState([
1919
{ id: 1, center: [100, 50], size: [50, 50], fillColor: 'red' },
2020
{ id: 2, center: [125, 75], size: [50, 50], fillColor: 'green' },
@@ -39,7 +39,7 @@ const Reorder: NextPage = () => {
3939
);
4040
};
4141

42-
export default Reorder;
42+
export default ReorderPage;
4343

4444
const code = `import React, { useState } from 'react';
4545
import type { NextPage } from 'next';
@@ -57,7 +57,7 @@ function move(arr: any[], from: number, to: number) {
5757
}, []);
5858
}
5959
60-
const Reorder: NextPage = () => {
60+
const ReorderPage: NextPage = () => {
6161
const [rects, setRects] = useState([
6262
{ id: 1, center: [100, 50], size: [50, 50], fillColor: 'red' },
6363
{ id: 2, center: [125, 75], size: [50, 50], fillColor: 'green' },
@@ -81,4 +81,4 @@ const Reorder: NextPage = () => {
8181
);
8282
};
8383
84-
export default Reorder;`;
84+
export default ReorderPage;`;

0 commit comments

Comments
 (0)