Shape with onDoubleClickEdge

A custom shape that uses ShapeUtil.onDoubleClickEdge to toggle between two preset sizes.

import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
import { ResizableShapeUtil } from './ResizableShapeUtil'

// [1]
const customShapeUtils = [ResizableShapeUtil]

// [2]
export default function ShapeWithOnDoubleClickEdgeExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw
				shapeUtils={customShapeUtils}
				onMount={(editor) => {
					editor.createShape({
						type: 'resizable',
						x: 200,
						y: 200,
					})
				}}
			/>
		</div>
	)
}

/*
[1]
We define the custom shape utils array outside of the component so it doesn't get
recreated on every render.

[2]
We pass our custom shape util to the Tldraw component and create an initial shape
on mount so there's something to interact with right away.

Try it:
- Select the shape, then double-click one of its edge resize handles
- The shape toggles between 400×320 and 200×200
*/

You can handle double-clicks on a shape's resize edges by implementing the onDoubleClickEdge method on your shape util. The editor calls this handler when the user double-clicks one of the four edge resize handles (top, right, bottom, left) of a selected shape. Return a shape partial to update the shape, or void to do nothing.

In this example the handler toggles the shape between 400×320 and 200×200 every time an edge is double-clicked.

Is this page helpful?
Prev
Shape with onClick
Next
Custom shape with custom styles