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

Adjust pointer events for shapes

Browse source
This commit is contained in:
Steve Ruiz 2021-07-09 20:43:18 +01:00
parent 5d12a2fd54
commit 552c8457ef
8 changed files with 80 additions and 296 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/canvas/defs.tsx
View file

@ -19,7 +19,7 @@ function ExpandDef() {
const zoom = useSelector((s) => tld.getCurrentCamera(s.data).zoom)
return (
<filter id="expand">
<feMorphology operator="dilate" radius={1 / zoom} />
<feMorphology operator="dilate" radius={0.5 / zoom} />
</filter>
)
}

11
components/canvas/page.tsx
View file

@ -127,8 +127,9 @@ const TranslatedShape = memo(
}: TranslatedShapeProps) => {
const rGroup = useRef<SVGGElement>(null)
const events = useShapeEvents(shape.id, isCurrentParent, rGroup)
const utils = getShapeUtils(shape)
const center = getShapeUtils(shape).getCenter(shape)
const center = utils.getCenter(shape)
const rotation = shape.rotation * (180 / Math.PI)
const transform = `
rotate(${rotation}, ${center})
@ -136,7 +137,13 @@ const TranslatedShape = memo(
`
return (
<g ref={rGroup} transform={transform} pointerEvents="all" {...events}>
<g
ref={rGroup}
id={shape.id}
transform={transform}
filter={isHovered ? 'url(#expand)' : 'none'}
{...events}
>
{isEditing && shape.type === ShapeType.Text ? (
<EditingTextShape shape={shape} />
) : (

209
components/canvas/shape.tsx
View file

@ -1,209 +0,0 @@
import React, { useRef, memo, useEffect } from 'react'
import state, { useSelector } from 'state'
import styled from 'styles'
import { getShapeUtils } from 'state/shape-utils'
import { deepCompareArrays } from 'utils'
import tld from 'utils/tld'
import useShapeEvents from 'hooks/useShapeEvents'
import useShape from 'hooks/useShape'
import vec from 'utils/vec'
import { getShapeStyle } from 'state/shape-styles'
import { Shape as _Shape } from 'types'
interface ShapeProps {
shape: _Shape
parent?: _Shape
}
function Shape({ shape, parent }: ShapeProps): JSX.Element {
const rGroup = useRef<SVGGElement>(null)
const { id, isHidden, children } = shape
const style = getShapeStyle(shape.style)
const { strokeWidth } = style
const center = getShapeUtils(shape).getCenter(shape)
const rotation = shape.rotation * (180 / Math.PI)
const parentPoint = parent?.point || [0, 0]
const transform = `
translate(${vec.neg(parentPoint)})
rotate(${rotation}, ${center})
translate(${shape.point})
`
const isCurrentParent = false
const events = useShapeEvents(shape.id, isCurrentParent, rGroup)
// From here on, not reactive—if we're here, we can trust that the
// shape in state is a shape with changes that we need to render.
const { isParent, isForeignObject, canStyleFill } = getShapeUtils(shape)
return (
<StyledGroup
id={id + '-group'}
ref={rGroup}
transform={transform}
isCurrentParent={isCurrentParent}
{...events}
>
{isForeignObject ? (
<ForeignObjectHover id={id} />
) : (
<EventSoak
as="use"
href={'#' + id}
strokeWidth={strokeWidth + 8}
variant={canStyleFill ? 'filled' : 'hollow'}
/>
)}
{!isHidden &&
(isForeignObject ? (
<ForeignObjectRender id={id} />
) : (
<RealShape
id={id}
isParent={isParent}
shape={shape}
strokeWidth={strokeWidth}
/>
))}
{isParent &&
children.map((shapeId) => (
<Shape
key={shapeId}
shape={tld.getShape(state.data, shapeId)}
parent={shape}
/>
))}
</StyledGroup>
)
}
export default memo(Shape)
// function Def({ id }: { id: string }) {
// const shape = useShape(id)
// if (!shape) return null
// return getShapeUtils(shape).render(shape, { isEditing: false })
// }
interface RealShapeProps {
id: string
isParent: boolean
strokeWidth: number
shape: _Shape
}
const RealShape = memo(
function RealShape({ shape }: RealShapeProps) {
return getShapeUtils(shape).render(shape, { isEditing: false })
},
(prev, next) => {
return (
prev.shape &&
next.shape &&
next.shape !== prev.shape &&
getShapeUtils(next.shape).shouldRender(next.shape, prev.shape)
)
}
)
const ForeignObjectHover = memo(function ForeignObjectHover({
id,
}: {
id: string
}) {
const size = useSelector((s) => {
const shape = tld.getPage(s.data).shapes[id]
if (shape === undefined) return [0, 0]
const bounds = getShapeUtils(shape).getBounds(shape)
return [bounds.width, bounds.height]
}, deepCompareArrays)
return (
<EventSoak
as="rect"
width={size[0]}
height={size[1]}
strokeWidth={1.5}
variant={'ghost'}
/>
)
})
const ForeignObjectRender = memo(function ForeignObjectRender({
id,
}: {
id: string
}) {
const shape = useShape(id)
const rFocusable = useRef<HTMLTextAreaElement>(null)
const isEditing = useSelector((s) => s.data.editingId === id)
useEffect(() => {
if (isEditing) {
setTimeout(() => {
const elm = rFocusable.current
if (!elm) return
elm.focus()
}, 0)
}
}, [isEditing])
if (shape === undefined) return null
return getShapeUtils(shape).render(shape, { isEditing, ref: rFocusable })
})
const EventSoak = styled('use', {
opacity: 0,
strokeLinecap: 'round',
strokeLinejoin: 'round',
variants: {
variant: {
ghost: {
pointerEvents: 'all',
filter: 'none',
opacity: 0,
},
hollow: {
pointerEvents: 'stroke',
},
filled: {
pointerEvents: 'all',
},
},
},
})
const StyledGroup = styled('g', {
outline: 'none',
'& > *[data-shy=true]': {
opacity: 0,
},
'&:hover': {
'& > *[data-shy=true]': {
opacity: 1,
},
},
variants: {
isCurrentParent: {
true: {
'& > *[data-shy=true]': {
opacity: 1,
},
},
},
},
})

31
state/shape-utils/arrow.tsx
View file

@ -7,7 +7,6 @@ import {
getBoundsFromPoints,
translateBounds,
pointInBounds,
pointInCircle,
circleFromThreePoints,
isAngleBetween,
getPerfectDashProps,
@ -102,8 +101,8 @@ const arrow = registerShapeUtils<ArrowShape>({
return shape.handles !== prev.handles || shape.style !== prev.style
},
render(shape, { isHovered }) {
const { id, bend, handles, style } = shape
render(shape) {
const { bend, handles, style } = shape
const { start, end, bend: _bend } = handles
const isStraightLine =
@ -146,11 +145,11 @@ const arrow = registerShapeUtils<ArrowShape>({
<path
d={path}
fill="none"
stroke="transparent"
strokeWidth={Math.max(8, strokeWidth * 2)}
strokeDasharray="none"
strokeDashoffset="none"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d={path}
@ -160,6 +159,7 @@ const arrow = registerShapeUtils<ArrowShape>({
strokeDasharray={strokeDasharray}
strokeDashoffset={strokeDashoffset}
strokeLinecap="round"
strokeLinejoin="round"
/>
</>
)
@ -206,6 +206,7 @@ const arrow = registerShapeUtils<ArrowShape>({
strokeDasharray="none"
strokeDashoffset="none"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d={path}
@ -215,6 +216,7 @@ const arrow = registerShapeUtils<ArrowShape>({
strokeDasharray={strokeDasharray}
strokeDashoffset={strokeDashoffset}
strokeLinecap="round"
strokeLinejoin="round"
/>
</>
)
@ -223,7 +225,7 @@ const arrow = registerShapeUtils<ArrowShape>({
const sw = strokeWidth * 1.618
return (
<g id={id} filter={isHovered ? 'url(#expand)' : 'none'}>
<g pointerEvents="all">
{shaftPath}
{shape.decorations.start === Decoration.Arrow && (
<path
@ -235,6 +237,7 @@ const arrow = registerShapeUtils<ArrowShape>({
strokeDasharray="none"
strokeLinecap="round"
strokeLinejoin="round"
pointerEvents="stroke"
/>
)}
{shape.decorations.end === Decoration.Arrow && (
@ -247,6 +250,7 @@ const arrow = registerShapeUtils<ArrowShape>({
strokeDasharray="none"
strokeLinecap="round"
strokeLinejoin="round"
pointerEvents="stroke"
/>
)}
</g>
@ -308,21 +312,8 @@ const arrow = registerShapeUtils<ArrowShape>({
return vec.add(shape.point, vec.med(start.point, end.point))
},
hitTest(shape, point) {
const { start, end } = shape.handles
if (shape.bend === 0) {
return (
vec.distanceToLineSegment(
start.point,
end.point,
vec.sub(point, shape.point)
) < 4
)
}
const [cx, cy, r] = getCtp(shape)
return !pointInCircle(point, vec.add(shape.point, [cx, cy]), r - 4)
hitTest() {
return true
},
hitTestBounds(this, shape, brushBounds) {

45
state/shape-utils/draw.tsx
View file

@ -41,13 +41,14 @@ const draw = registerShapeUtils<DrawShape>({
},
render(shape, { isHovered }) {
const { id, points, style } = shape
const { points, style } = shape
const styles = getShapeStyle(style)
const strokeWidth = +styles.strokeWidth
const shouldFill =
style.isFilled &&
points.length > 3 &&
vec.dist(points[0], points[points.length - 1]) < +styles.strokeWidth * 2
@ -58,11 +59,11 @@ const draw = registerShapeUtils<DrawShape>({
return (
<circle
id={id}
r={strokeWidth * 0.618}
fill={styles.stroke}
stroke={styles.stroke}
strokeWidth={sw}
pointerEvents="all"
filter={isHovered ? 'url(#expand)' : 'none'}
/>
)
@ -80,15 +81,15 @@ const draw = registerShapeUtils<DrawShape>({
})
return (
<g id={id}>
<>
{shouldFill && (
<path
d={polygonPathData}
strokeWidth="0"
stroke="none"
fill={styles.fill}
strokeLinejoin="round"
strokeLinecap="round"
pointerEvents="fill"
/>
)}
<path
@ -98,9 +99,10 @@ const draw = registerShapeUtils<DrawShape>({
strokeWidth={strokeWidth}
strokeLinejoin="round"
strokeLinecap="round"
pointerEvents="all"
filter={isHovered ? 'url(#expand)' : 'none'}
/>
</g>
</>
)
}
@ -129,29 +131,29 @@ const draw = registerShapeUtils<DrawShape>({
const sw = strokeWidth * 1.618
return (
<g id={id}>
{style.dash !== DashStyle.Solid && (
<path
d={path}
fill="transparent"
stroke="transparent"
strokeWidth={strokeWidth * 2}
strokeLinejoin="round"
strokeLinecap="round"
/>
)}
<>
<path
d={path}
fill={shouldFill ? styles.fill : 'none'}
stroke="transparent"
strokeWidth={Math.min(4, strokeWidth * 2)}
strokeLinejoin="round"
strokeLinecap="round"
pointerEvents={shouldFill ? 'all' : 'stroke'}
/>
<path
d={path}
fill="transparent"
stroke={styles.stroke}
strokeWidth={sw}
strokeDasharray={strokeDasharray}
strokeDashoffset={strokeDashoffset}
strokeLinejoin="round"
strokeLinecap="round"
pointerEvents="stroke"
filter={isHovered ? 'url(#expand)' : 'none'}
/>
</g>
</>
)
},
@ -174,13 +176,8 @@ const draw = registerShapeUtils<DrawShape>({
return getBoundsCenter(this.getBounds(shape))
},
hitTest(shape, point) {
const pt = vec.sub(point, shape.point)
const min = +getShapeStyle(shape.style).strokeWidth
return shape.points.some(
(curr, i) =>
i > 0 && vec.distanceToLineSegment(shape.points[i - 1], curr, pt) < min
)
hitTest() {
return true
},
hitTestBounds(this, shape, brushBounds) {

7
state/shape-utils/ellipse.tsx
View file

@ -58,16 +58,16 @@ const ellipse = registerShapeUtils<EllipseShape>({
const path = pathCache.get(shape)
return (
<g id={id}>
<g id={id} pointerEvents={style.isFilled ? 'all' : 'stroke'}>
{style.isFilled && (
<ellipse
id={id}
cx={radiusX}
cy={radiusY}
rx={rx}
ry={ry}
stroke="none"
fill={styles.fill}
pointerEvents="fill"
/>
)}
<path
@ -75,6 +75,7 @@ const ellipse = registerShapeUtils<EllipseShape>({
fill={styles.stroke}
stroke={styles.stroke}
strokeWidth={strokeWidth}
pointerEvents="all"
filter={isHovered ? 'url(#expand)' : 'none'}
/>
</g>
@ -97,7 +98,6 @@ const ellipse = registerShapeUtils<EllipseShape>({
return (
<ellipse
id={id}
cx={radiusX}
cy={radiusY}
rx={rx}
@ -107,6 +107,7 @@ const ellipse = registerShapeUtils<EllipseShape>({
strokeWidth={sw}
strokeDasharray={strokeDasharray}
strokeDashoffset={strokeDashoffset}
pointerEvents={style.isFilled ? 'all' : 'stroke'}
filter={isHovered ? 'url(#expand)' : 'none'}
/>
)

28
state/shape-utils/polyline.tsx
View file

@ -28,19 +28,20 @@ const polyline = registerShapeUtils<PolylineShape>({
shouldRender(shape, prev) {
return shape.points !== prev.points || shape.style !== prev.style
},
render(shape, { isHovered }) {
const { id, points } = shape
render(shape) {
const { points, style } = shape
const styles = getShapeStyle(shape.style)
const styles = getShapeStyle(style)
return (
<polyline
id={id}
points={points.toString()}
stroke={styles.stroke}
strokeWidth={styles.strokeWidth}
strokeWidth={styles.strokeWidth * 1.618}
fill={shape.style.isFilled ? styles.fill : 'none'}
filter={isHovered ? 'url(#expand)' : 'none'}
pointerEvents={style.isFilled ? 'all' : 'stroke'}
strokeLinecap="round"
strokeLinejoin="round"
/>
)
},
@ -62,19 +63,8 @@ const polyline = registerShapeUtils<PolylineShape>({
return [bounds.minX + bounds.width / 2, bounds.minY + bounds.height / 2]
},
hitTest(shape, point) {
const pt = vec.sub(point, shape.point)
let prev = shape.points[0]
for (let i = 1; i < shape.points.length; i++) {
const curr = shape.points[i]
if (vec.distanceToLineSegment(prev, curr, pt) < 4) {
hitTest() {
return true
}
prev = curr
}
return false
},
hitTestBounds(this, shape, brushBounds) {
@ -126,7 +116,7 @@ const polyline = registerShapeUtils<PolylineShape>({
canTransform: true,
canChangeAspectRatio: true,
canStyleFill: false,
canStyleFill: true,
})
export default polyline

17
state/shape-utils/rectangle.tsx
View file

@ -39,7 +39,8 @@ const rectangle = registerShapeUtils<RectangleShape>({
})
return (
<g id={id}>
<>
{style.isFilled && (
<rect
rx={radius}
ry={radius}
@ -51,14 +52,16 @@ const rectangle = registerShapeUtils<RectangleShape>({
fill={styles.fill}
stroke={styles.stroke}
/>
)}
<path
d={pathData}
fill={styles.stroke}
stroke={styles.stroke}
strokeWidth={styles.strokeWidth}
filter={isHovered ? 'url(#expand)' : 'none'}
pointerEvents={style.isFilled ? 'all' : 'stroke'}
/>
</g>
</>
)
}
@ -98,17 +101,21 @@ const rectangle = registerShapeUtils<RectangleShape>({
})
return (
<g id={id}>
<>
<rect
x={sw / 2}
y={sw / 2}
width={w}
height={h}
fill={styles.fill}
stroke="none"
stroke="transparent"
strokeWidth={sw}
pointerEvents={style.isFilled ? 'all' : 'stroke'}
/>
<g filter={isHovered ? 'url(#expand)' : 'none'}>{paths}</g>
<g filter={isHovered ? 'url(#expand)' : 'none'} pointerEvents="stroke">
{paths}
</g>
</>
)
},