1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import React, { useRef, useState } from 'react';
import type { NextPage } from 'next';
import { Form, Toggle } from 'react-daisyui';
import { Page, Container, Toolbar, Canvas, Code } from 'components/content';
import { Scope, View, Layer, Rectangle } from 'react-paper-bindings';
const MultiCanvasPage: NextPage = () => {
const [scope1] = useState(new Scope());
const scope2 = useRef(new Scope());
const [visible1, setVisible1] = useState(true);
const [visible2, setVisible2] = useState(true);
const [color1, setColor1] = useState('blue');
const [color2, setColor2] = useState('red');
return (
<Page title="Multi Canvas">
<Container>
<Toolbar>
<Form.Label title="Canvas 1">
<Toggle
className="ml-1"
checked={visible1}
onChange={() => setVisible1(!visible1)}
/>
</Form.Label>
<Form.Label title="Canvas 2">
<Toggle
className="ml-1"
checked={visible2}
onChange={() => setVisible2(!visible2)}
/>
</Form.Label>
</Toolbar>
{visible1 && (
<Canvas scope={scope1}>
<View>
<Layer>
<Rectangle
center={[100, 100]}
fillColor={color1}
size={[50, 50]}
onClick={() => setColor1(color1 === 'blue' ? 'cyan' : 'blue')}
/>
</Layer>
</View>
</Canvas>
)}
{visible2 && (
<Canvas scope={scope2.current}>
<View>
<Layer>
<Rectangle
center={[200, 100]}
fillColor={color2}
size={[75, 75]}
onClick={() => setColor2(color2 === 'red' ? 'gray' : 'red')}
/>
</Layer>
</View>
</Canvas>
)}
</Container>
</Page>
);
};
export default MultiCanvasPage;