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

Fixes missing lines in line/ray, fixes dots

Browse source
This commit is contained in:
Steve Ruiz 2021-05-30 21:14:52 +01:00
parent 836de0c752
commit 5b053f7c4e
3 changed files with 16 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

13
components/canvas/misc.tsx
View file

@ -1,8 +1,11 @@
import styled from "styles"
import styled from 'styles'
const DotCircle = styled("circle", {
transform: "scale(var(--scale))",
strokeWidth: "2",
export const DotCircle = styled('circle', {
transform: 'scale(var(--scale))',
fill: '$canvas',
strokeWidth: '2',
})
export { DotCircle }
export const ThinLine = styled('line', {
zStrokeWidth: 1,
})

9
lib/shape-utils/line.tsx
View file

@ -4,8 +4,9 @@ import { LineShape, ShapeType } from 'types'
import { registerShapeUtils } from './index'
import { boundsContained } from 'utils/bounds'
import { intersectCircleBounds } from 'utils/intersections'
import { DotCircle } from 'components/canvas/misc'
import { DotCircle, ThinLine } from 'components/canvas/misc'
import { translateBounds } from 'utils/utils'
import styled from 'styles'
const line = registerShapeUtils<LineShape>({
boundsCache: new WeakMap([]),
@ -33,12 +34,12 @@ const line = registerShapeUtils<LineShape>({
},
render({ id, direction }) {
const [x1, y1] = vec.add([0, 0], vec.mul(direction, 100000))
const [x2, y2] = vec.sub([0, 0], vec.mul(direction, 100000))
const [x1, y1] = vec.add([0, 0], vec.mul(direction, 10000))
const [x2, y2] = vec.sub([0, 0], vec.mul(direction, 10000))
return (
<g id={id}>
<line x1={x1} y1={y1} x2={x2} y2={y2} />
<ThinLine x1={x1} y1={y1} x2={x2} y2={y2} />
<DotCircle cx={0} cy={0} r={3} />
</g>
)

6
lib/shape-utils/ray.tsx
View file

@ -4,7 +4,7 @@ import { RayShape, ShapeType } from 'types'
import { registerShapeUtils } from './index'
import { boundsContained } from 'utils/bounds'
import { intersectCircleBounds } from 'utils/intersections'
import { DotCircle } from 'components/canvas/misc'
import { DotCircle, ThinLine } from 'components/canvas/misc'
import { translateBounds } from 'utils/utils'
const ray = registerShapeUtils<RayShape>({
@ -34,11 +34,11 @@ const ray = registerShapeUtils<RayShape>({
},
render({ id, direction }) {
const [x2, y2] = vec.add([0, 0], vec.mul(direction, 100000))
const [x2, y2] = vec.add([0, 0], vec.mul(direction, 10000))
return (
<g id={id}>
<line x1={0} y1={0} x2={x2} y2={y2} />
<ThinLine x1={0} y1={0} x2={x2} y2={y2} />
<DotCircle cx={0} cy={0} r={3} />
</g>
)