Precise exact arrows

Arrows can be precise, which means that instead of just pointing to the center of a shape, they point to a specific place within the shape. If they're precise, they can also be exact. When they're the exact, the arrow won't stop at the edge of the shape, it'll pass through the shape right the way to the point the arrow is targeting.

By default, arrows are precise when moving slowly, and exact when holding the alt key. This example shows how to customize this behavior, so that a precise arrow is always exact.

import { ArrowShapeUtil, Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'

const shapeUtils = [
	ArrowShapeUtil.configure({
		shouldBeExact: (editor, isPrecise) => isPrecise,
	}),
]

export default function ArrowsPreciseExactExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw shapeUtils={shapeUtils} />
		</div>
	)
}
Is this page helpful?
Prev
Note resizing
Next
Disable pages