PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

improves select display

Browse source
This commit is contained in:
Steve Ruiz 2021-05-28 15:37:23 +01:00
parent 708223fffa
commit 9fd8ef8421
10 changed files with 237 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

44
components/canvas/canvas.tsx
View file

@ -1,13 +1,14 @@
import styled from "styles"
import React, { useCallback, useRef } from "react"
import useZoomEvents from "hooks/useZoomEvents"
import useCamera from "hooks/useCamera"
import Page from "./page"
import Brush from "./brush"
import state from "state"
import Bounds from "./bounds/bounding-box"
import BoundsBg from "./bounds/bounds-bg"
import inputs from "state/inputs"
import styled from 'styles'
import state from 'state'
import inputs from 'state/inputs'
import React, { useCallback, useRef } from 'react'
import useZoomEvents from 'hooks/useZoomEvents'
import useCamera from 'hooks/useCamera'
import Defs from './defs'
import Page from './page'
import Brush from './brush'
import Bounds from './bounds/bounding-box'
import BoundsBg from './bounds/bounds-bg'
export default function Canvas() {
const rCanvas = useRef<SVGSVGElement>(null)
@ -18,16 +19,16 @@ export default function Canvas() {
const handlePointerDown = useCallback((e: React.PointerEvent) => {
rCanvas.current.setPointerCapture(e.pointerId)
state.send("POINTED_CANVAS", inputs.pointerDown(e, "canvas"))
state.send('POINTED_CANVAS', inputs.pointerDown(e, 'canvas'))
}, [])
const handlePointerMove = useCallback((e: React.PointerEvent) => {
state.send("MOVED_POINTER", inputs.pointerMove(e))
state.send('MOVED_POINTER', inputs.pointerMove(e))
}, [])
const handlePointerUp = useCallback((e: React.PointerEvent) => {
rCanvas.current.releasePointerCapture(e.pointerId)
state.send("STOPPED_POINTING", { id: "canvas", ...inputs.pointerUp(e) })
state.send('STOPPED_POINTING', { id: 'canvas', ...inputs.pointerUp(e) })
}, [])
return (
@ -38,6 +39,7 @@ export default function Canvas() {
onPointerMove={handlePointerMove}
onPointerUp={handlePointerUp}
>
<Defs />
<MainGroup ref={rGroup}>
<BoundsBg />
<Page />
@ -48,18 +50,18 @@ export default function Canvas() {
)
}
const MainSVG = styled("svg", {
position: "fixed",
const MainSVG = styled('svg', {
position: 'fixed',
top: 0,
left: 0,
width: "100%",
height: "100%",
touchAction: "none",
width: '100%',
height: '100%',
touchAction: 'none',
zIndex: 100,
"& *": {
userSelect: "none",
'& *': {
userSelect: 'none',
},
})
const MainGroup = styled("g", {})
const MainGroup = styled('g', {})