35 lines
797 B
TypeScript
35 lines
797 B
TypeScript
|
import styled from "styles"
|
||
|
|
import { useRef } from "react"
|
||
|
|
import useZoomEvents from "hooks/useZoomEvents"
|
||
|
|
import useZoomPanEffect from "hooks/useZoomPanEffect"
|
||
|
|
|
||
|
|
export default function Canvas() {
|
||
|
|
const rCanvas = useRef<SVGSVGElement>(null)
|
||
|
|
const rGroup = useRef<SVGGElement>(null)
|
||
|
|
const events = useZoomEvents(rCanvas)
|
||
|
|
|
||
|
|
useZoomPanEffect(rGroup)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<MainSVG ref={rCanvas} {...events}>
|
||
|
|
<MainGroup ref={rGroup}>
|
||
|
|
<circle cx={100} cy={100} r={50} />
|
||
|
|
<circle cx={500} cy={500} r={200} />
|
||
|
|
<circle cx={200} cy={800} r={100} />
|
||
|
|
</MainGroup>
|
||
|
|
</MainSVG>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const MainSVG = styled("svg", {
|
||
|
|
position: "fixed",
|
||
|
|
top: 0,
|
||
|
|
left: 0,
|
||
|
|
width: "100%",
|
||
|
|
height: "100%",
|
||
|
|
touchAction: "none",
|
||
|
|
zIndex: 100,
|
||
|
|
})
|
||
|
|
|
||
|
|
const MainGroup = styled("g", {})
|