tldraw 3.16.0-canary.9a94aba7bcaa → 3.16.0-canary.9abe0dac1e0f

package/src/lib/shapes/arrow/ArrowShapeOptions.test.ts

@@ -1,4 +1,5 @@
 import { TLArrowShape, createShapeId } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
 import { ArrowShapeUtil } from './ArrowShapeUtil'
 import { updateArrowTargetState } from './arrowTargetState'
@@ -12,7 +13,7 @@ const ids = {
 	arrow1: createShapeId('arrow1'),
 }
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 window.requestAnimationFrame = function requestAnimationFrame(cb) {
 	return setTimeout(cb, 1000 / 60)
@@ -46,13 +47,21 @@ describe('ArrowShapeOptions', () => {
 		it('should have correct default shouldBeExact behavior (alt key)', () => {
 			const util = editor.getShapeUtil<ArrowShapeUtil>('arrow')
 
-			// Test without alt key
+			// Test without alt key, not precise
 			editor.inputs.altKey = false
-			expect(util.options.shouldBeExact(editor)).toBe(false)
+			expect(util.options.shouldBeExact(editor, false)).toBe(false)
 
-			// Test with alt key
+			// Test without alt key, precise
+			editor.inputs.altKey = false
+			expect(util.options.shouldBeExact(editor, true)).toBe(false)
+
+			// Test with alt key, not precise
+			editor.inputs.altKey = true
+			expect(util.options.shouldBeExact(editor, false)).toBe(true)
+
+			// Test with alt key, precise
 			editor.inputs.altKey = true
-			expect(util.options.shouldBeExact(editor)).toBe(true)
+			expect(util.options.shouldBeExact(editor, true)).toBe(true)
 		})
 
 		it('should have correct default shouldIgnoreTargets behavior (ctrl key)', () => {
@@ -185,7 +194,7 @@ describe('ArrowShapeOptions', () => {
 			class CustomArrowShapeUtil extends ArrowShapeUtil {
 				override options = {
 					...baseUtil.options,
-					shouldBeExact: (editor: any) => editor.inputs.shiftKey, // Use shift instead of alt
+					shouldBeExact: (editor: any, _isPrecise: boolean) => editor.inputs.shiftKey, // Use shift instead of alt
 				}
 			}
 
@@ -194,12 +203,14 @@ describe('ArrowShapeOptions', () => {
 			// Test with shift key
 			editor.inputs.shiftKey = true
 			editor.inputs.altKey = false
-			expect(customUtil.options.shouldBeExact(editor)).toBe(true)
+			expect(customUtil.options.shouldBeExact(editor, false)).toBe(true)
+			expect(customUtil.options.shouldBeExact(editor, true)).toBe(true)
 
 			// Test without shift key
 			editor.inputs.shiftKey = false
 			editor.inputs.altKey = true // Alt key should not matter for custom implementation
-			expect(customUtil.options.shouldBeExact(editor)).toBe(false)
+			expect(customUtil.options.shouldBeExact(editor, false)).toBe(false)
+			expect(customUtil.options.shouldBeExact(editor, true)).toBe(false)
 		})
 
 		it('should allow customizing shouldIgnoreTargets behavior', () => {
@@ -231,9 +242,9 @@ describe('ArrowShapeOptions', () => {
 			class CustomArrowShapeUtil extends ArrowShapeUtil {
 				override options = {
 					...baseUtil.options,
-					shouldBeExact: (editor: any) => {
-						// Custom logic: exact when both alt and shift are pressed
-						return editor.inputs.altKey && editor.inputs.shiftKey
+					shouldBeExact: (editor: any, isPrecise: boolean) => {
+						// Custom logic: exact when both alt and shift are pressed, and only if precise
+						return editor.inputs.altKey && editor.inputs.shiftKey && isPrecise
 					},
 					shouldIgnoreTargets: (editor: any) => {
 						// Custom logic: ignore targets when any modifier key is pressed
@@ -244,15 +255,20 @@ describe('ArrowShapeOptions', () => {
 
 			const customUtil = new CustomArrowShapeUtil(editor)
 
-			// Test shouldBeExact with both keys
+			// Test shouldBeExact with both keys and precise
 			editor.inputs.altKey = true
 			editor.inputs.shiftKey = true
-			expect(customUtil.options.shouldBeExact(editor)).toBe(true)
+			expect(customUtil.options.shouldBeExact(editor, true)).toBe(true)
+
+			// Test shouldBeExact with both keys but not precise
+			editor.inputs.altKey = true
+			editor.inputs.shiftKey = true
+			expect(customUtil.options.shouldBeExact(editor, false)).toBe(false)
 
 			// Test shouldBeExact with only one key
 			editor.inputs.altKey = true
 			editor.inputs.shiftKey = false
-			expect(customUtil.options.shouldBeExact(editor)).toBe(false)
+			expect(customUtil.options.shouldBeExact(editor, true)).toBe(false)
 
 			// Test shouldIgnoreTargets with any key
 			editor.inputs.altKey = false
@@ -282,6 +298,61 @@ describe('ArrowShapeOptions', () => {
 			expect(editor.getCurrentToolId()).toBe('arrow')
 		})
 
+		it('should allow custom shouldBeExact logic based on isPrecise - example from arrow precise-exact', () => {
+			// This replicates the logic from the arrows-precise-exact example
+			const baseUtil = editor.getShapeUtil<ArrowShapeUtil>('arrow')
+			class ExampleArrowShapeUtil extends ArrowShapeUtil {
+				override options = {
+					...baseUtil.options,
+					shouldBeExact: (_editor: any, isPrecise: boolean) => isPrecise,
+				}
+			}
+
+			// Replace the util temporarily for testing
+			const customUtil = new ExampleArrowShapeUtil(editor)
+			const originalShouldBeExact = baseUtil.options.shouldBeExact
+			baseUtil.options.shouldBeExact = customUtil.options.shouldBeExact
+
+			try {
+				editor.setCurrentTool('arrow')
+				editor.inputs.ctrlKey = false // Allow binding
+
+				// Set up fast pointer velocity to ensure precise remains false
+				editor.inputs.pointerVelocity = { x: 2, y: 2, len: () => 2.8 } as any
+
+				const targetState = updateArrowTargetState({
+					editor,
+					pointInPageSpace: { x: 150, y: 150 },
+					arrow: undefined,
+					isPrecise: true, // Input precise
+					currentBinding: undefined,
+					oppositeBinding: undefined,
+				})
+
+				// With the custom logic, precise arrows should be exact
+				expect(targetState?.isExact).toBe(true)
+				expect(targetState?.isPrecise).toBe(true)
+
+				// Test with non-precise movement (and fast velocity to avoid auto-precise)
+				const nonPreciseTargetState = updateArrowTargetState({
+					editor,
+					pointInPageSpace: { x: 150, y: 150 },
+					arrow: undefined,
+					isPrecise: false, // Not precise
+					currentBinding: undefined,
+					oppositeBinding: undefined,
+				})
+
+				// Non-precise arrows should not be exact with this custom logic,
+				// but they might still become precise due to internal logic
+				// The key test is that shouldBeExact gets the final computed precise value
+				expect(nonPreciseTargetState).toBeDefined()
+			} finally {
+				// Restore original function
+				baseUtil.options.shouldBeExact = originalShouldBeExact
+			}
+		})
+
 		it('should respect shouldIgnoreTargets when starting arrow creation', () => {
 			editor.setCurrentTool('arrow')
 

package/src/lib/shapes/arrow/ArrowShapeTool.test.ts

@@ -1,4 +1,5 @@
 import { IndexKey, TLArrowShape, TLShapeId, Vec, createShapeId } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
 import { getArrowTargetState } from './arrowTargetState'
 import { getArrowBindings } from './shared'
@@ -13,7 +14,7 @@ global.cancelAnimationFrame = function cancelAnimationFrame(id) {
 	clearTimeout(id)
 }
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 const ids = {
 	box1: createShapeId('box1'),
@@ -242,7 +243,7 @@ describe('When pointing an end shape', () => {
 			},
 		})
 
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
 
@@ -306,7 +307,7 @@ describe('When pointing an end shape', () => {
 		})
 
 		// Give time for the velocity to die down
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
 
@@ -568,12 +569,12 @@ describe('reparenting issue', () => {
 		const arrow1BoundIndex = editor.getShape(arrow1Id)!.index
 		const arrow2BoundIndex = editor.getShape(arrow2Id)!.index
 		expect(arrow1BoundIndex).toBe('a1V')
-		expect(arrow2BoundIndex).toBe('a1F')
+		expect(arrow2BoundIndex).toBe('a1G')
 
 		// nudge everything around and make sure we all stay in the right order
 		editor.selectAll().nudgeShapes(editor.getSelectedShapeIds(), { x: -1, y: 0 })
 		expect(editor.getShape(arrow1Id)!.index).toBe('a1V')
-		expect(editor.getShape(arrow2Id)!.index).toBe('a1F')
+		expect(editor.getShape(arrow2Id)!.index).toBe('a1G')
 	})
 })
 

package/src/lib/shapes/arrow/ArrowShapeUtil.test.ts

@@ -1,4 +1,5 @@
 import { HALF_PI, TLArrowShape, TLShapeId, createShapeId, toRichText } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
 import { createOrUpdateArrowBinding, getArrowBindings } from './shared'
 
@@ -12,7 +13,7 @@ const ids = {
 	arrow1: createShapeId('arrow1'),
 }
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 window.requestAnimationFrame = function requestAnimationFrame(cb) {
 	return setTimeout(cb, 1000 / 60)
@@ -217,7 +218,7 @@ describe('Other cases when arrow are moved', () => {
 		// When box one is not selected, unbinds box1 and keeps binding to box2
 		editor.select(ids.arrow1, ids.box2, ids.box3)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'right')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		expect(bindings()).toMatchObject({
 			start: { toId: ids.box1, props: { isPrecise: false } },
@@ -227,7 +228,7 @@ describe('Other cases when arrow are moved', () => {
 		// maintains bindings if they would still be over the same shape (but makes them precise), but unbinds others
 		editor.select(ids.arrow1, ids.box3)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'top')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		expect(bindings()).toMatchObject({
 			start: { toId: ids.box1, props: { isPrecise: true } },
@@ -244,7 +245,7 @@ describe('Other cases when arrow are moved', () => {
 		// When box one is not selected, unbinds box1 and keeps binding to box2
 		editor.select(ids.arrow1, ids.box2, ids.box3)
 		editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		expect(bindings()).toMatchObject({
 			start: { toId: ids.box1, props: { isPrecise: false } },
@@ -254,7 +255,7 @@ describe('Other cases when arrow are moved', () => {
 		// unbinds when only the arrow is selected (not its bound shapes) if the arrow itself has moved
 		editor.select(ids.arrow1, ids.box3, ids.box4)
 		editor.distributeShapes(editor.getSelectedShapeIds(), 'vertical')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		// The arrow didn't actually move
 		expect(bindings()).toMatchObject({
@@ -265,7 +266,7 @@ describe('Other cases when arrow are moved', () => {
 		// The arrow will not move because it is still bound to another shape
 		editor.updateShapes([{ id: ids.box4, type: 'geo', y: -600 }])
 		editor.distributeShapes(editor.getSelectedShapeIds(), 'vertical')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		expect(bindings()).toMatchObject({
 			start: undefined,
@@ -578,3 +579,44 @@ describe("an arrow's parents", () => {
 		})
 	})
 })
+
+describe('Arrow export bounds', () => {
+	it('excludes labels from shape bounds for export', () => {
+		editor.selectAll().deleteShapes(editor.getSelectedShapeIds())
+
+		// Create shapes for the arrow to bind to
+		editor.createShapes([
+			{ id: ids.box1, type: 'geo', x: 100, y: 100, props: { w: 100, h: 100 } },
+			{ id: ids.box2, type: 'geo', x: 300, y: 100, props: { w: 100, h: 100 } },
+		])
+
+		// Create an arrow with a label
+		editor.createShapes([
+			{
+				id: ids.arrow1,
+				type: 'arrow',
+				x: 0,
+				y: 0,
+				props: {
+					start: { x: 0, y: 0 },
+					end: { x: 0, y: 100 },
+					richText: toRichText('Test Label'),
+				},
+			},
+		])
+
+		// Get the page bounds (should exclude labels due to excludeFromShapeBounds flag)
+		const pageBounds = editor.getShapePageBounds(ids.arrow1)
+		expect(pageBounds).toBeDefined()
+
+		// The bounds should be smaller than if labels were included
+		// Since the arrow has a label that's excluded, the bounds should be minimal
+		expect(pageBounds!.width).toBeLessThan(200) // Should not include label width
+		expect(pageBounds!.height).toBeLessThan(200) // Should not include label height
+
+		// Verify that the arrow has a label (which should be excluded from shape bounds)
+		const arrow = editor.getShape(ids.arrow1) as TLArrowShape
+		expect(arrow.props.richText).toBeDefined()
+		expect(arrow.props.richText).not.toBeNull()
+	})
+})

package/src/lib/shapes/arrow/arrow-types.ts

@@ -81,7 +81,7 @@ export interface ArrowShapeOptions {
 	 */
 	readonly hoverPreciseTimeout: number
 	/**
-	 * When pointing at a shape using the arrow tool or draggin an arrow terminal handle, how long
+	 * When pointing at a shape using the arrow tool or dragging an arrow terminal handle, how long
 	 * should we wait before we assume the user is targeting precisely instead of imprecisely.
 	 */
 	readonly pointingPreciseTimeout: number
@@ -90,13 +90,11 @@ export interface ArrowShapeOptions {
 	 * When creating an arrow, should it stop exactly at the pointer, or should
 	 * it stop at the edge of the target shape.
 	 */
-	// eslint-disable-next-line @typescript-eslint/method-signature-style
-	readonly shouldBeExact: (editor: Editor) => boolean
+	shouldBeExact(editor: Editor, isPrecise: boolean): boolean
 	/**
 	 * When creating an arrow, should it bind to the target shape.
 	 */
-	// eslint-disable-next-line @typescript-eslint/method-signature-style
-	readonly shouldIgnoreTargets: (editor: Editor) => boolean
+	shouldIgnoreTargets(editor: Editor): boolean
 }
 
 /** @public */

package/src/lib/shapes/arrow/arrowLabel.ts

@@ -227,6 +227,14 @@ interface ArrowheadInfo {
 	hasEndArrowhead: boolean
 }
 export function getArrowLabelPosition(editor: Editor, shape: TLArrowShape) {
+	const isEditing = editor.getEditingShapeId() === shape.id
+	if (!isEditing && isEmptyRichText(shape.props.richText)) {
+		// Short-circuit for empty labels.
+		const bodyGeom = getArrowBodyGeometry(editor, shape)
+		const labelCenter = bodyGeom.interpolateAlongEdge(0.5)
+		return { box: Box.FromCenter(labelCenter, new Vec(0, 0)), debugGeom: [] }
+	}
+
 	const debugGeom: Geometry2d[] = []
 	const info = getArrowInfo(editor, shape)!
 

package/src/lib/shapes/arrow/arrowTargetState.ts

@@ -87,8 +87,6 @@ export function updateArrowTargetState({
 		return null
 	}
 
-	const isExact = util.options.shouldBeExact(editor)
-
 	const arrowKind = arrow ? arrow.props.kind : editor.getStyleForNextShape(ArrowShapeKindStyle)
 
 	const target = editor.getShapeAtPoint(pointInPageSpace, {
@@ -165,7 +163,7 @@ export function updateArrowTargetState({
 		}
 	}
 
-	let precise = isPrecise || isExact
+	let precise = isPrecise
 
 	if (!precise) {
 		// If we're switching to a new bound shape, then precise only if moving slowly
@@ -186,6 +184,9 @@ export function updateArrowTargetState({
 		}
 	}
 
+	const isExact = util.options.shouldBeExact(editor, precise)
+	if (isExact) precise = true
+
 	const shouldSnapCenter = !isExact && precise && targetGeometryInTargetSpace.isClosed
 	// const shouldSnapEdges = !isExact && (precise || !targetGeometryInTargetSpace.isClosed)
 	const shouldSnapEdges =

package/src/lib/shapes/bookmark/BookmarkShapeUtil.tsx

@@ -13,7 +13,6 @@ import {
 	debounce,
 	getHashForString,
 	lerp,
-	stopEventPropagation,
 	tlenv,
 	toDomPrecision,
 	useEditor,
@@ -132,9 +131,9 @@ function BookmarkShapeComponent({ shape }: { shape: TLBookmarkShape }) {
 	const [isFaviconValid, setIsFaviconValid] = useState(true)
 	const onFaviconError = () => setIsFaviconValid(false)
 
-	const useStopPropagationOnShiftKey = useCallback<PointerEventHandler>(
+	const markAsHandledOnShiftKey = useCallback<PointerEventHandler>(
 		(e) => {
-			if (!editor.inputs.shiftKey) stopEventPropagation(e)
+			if (!editor.inputs.shiftKey) editor.markEventAsHandled(e)
 		},
 		[editor]
 	)
@@ -182,8 +181,8 @@ function BookmarkShapeComponent({ shape }: { shape: TLBookmarkShape }) {
 						target="_blank"
 						rel="noopener noreferrer"
 						draggable={false}
-						onPointerDown={useStopPropagationOnShiftKey}
-						onPointerUp={useStopPropagationOnShiftKey}
+						onPointerDown={markAsHandledOnShiftKey}
+						onPointerUp={markAsHandledOnShiftKey}
 					>
 						{isFaviconValid && asset?.props.favicon ? (
 							<img

package/src/lib/shapes/draw/DrawShapeTool.test.ts

@@ -1,5 +1,4 @@
 import { TestEditor } from '../../../test/TestEditor'
-import { DrawShapeTool } from './DrawShapeTool'
 
 let editor: TestEditor
 
@@ -10,10 +9,6 @@ afterEach(() => {
 	editor?.dispose()
 })
 
-describe(DrawShapeTool, () => {
-	return
-})
-
 describe('When in the idle state', () => {
 	it('Returns to select on cancel', () => {
 		editor.setCurrentTool('draw')

package/src/lib/shapes/frame/FrameShapeUtil.tsx

@@ -100,6 +100,10 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
 		return false
 	}
 
+	override isExportBoundsContainer(): boolean {
+		return true
+	}
+
 	override getDefaultProps(): TLFrameShape['props'] {
 		return { w: 160 * 2, h: 90 * 2, name: '', color: 'black' }
 	}
@@ -192,6 +196,7 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
 					height,
 					isFilled: true,
 					isLabel: true,
+					excludeFromShapeBounds: true,
 				}),
 			],
 		})
@@ -335,6 +340,10 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
 		return true
 	}
 
+	override getClipPath(shape: TLFrameShape) {
+		return this.editor.getShapeGeometry(shape.id).vertices
+	}
+
 	override canReceiveNewChildrenOfType(shape: TLShape) {
 		return !shape.isLocked
 	}

package/src/lib/shapes/frame/components/FrameLabelInput.tsx

@@ -1,4 +1,4 @@
-import { TLFrameShape, TLShapeId, stopEventPropagation, useEditor } from '@tldraw/editor'
+import { TLFrameShape, TLShapeId, useEditor } from '@tldraw/editor'
 import { forwardRef, useCallback } from 'react'
 import { defaultEmptyAs } from '../FrameShapeUtil'
 
@@ -8,12 +8,19 @@ export const FrameLabelInput = forwardRef<
 >(({ id, name, isEditing }, ref) => {
 	const editor = useEditor()
 
+	const handlePointerDown = useCallback(
+		(e: React.PointerEvent) => {
+			if (isEditing) editor.markEventAsHandled(e)
+		},
+		[editor, isEditing]
+	)
+
 	const handleKeyDown = useCallback(
 		(e: React.KeyboardEvent<HTMLInputElement>) => {
 			if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
 				// need to prevent the enter keydown making it's way up to the Idle state
 				// and sending us back into edit mode
-				stopEventPropagation(e)
+				editor.markEventAsHandled(e)
 				e.currentTarget.blur()
 				editor.setEditingShape(null)
 			}
@@ -74,7 +81,7 @@ export const FrameLabelInput = forwardRef<
 				onKeyDown={handleKeyDown}
 				onBlur={handleBlur}
 				onChange={handleChange}
-				onPointerDown={isEditing ? stopEventPropagation : undefined}
+				onPointerDown={handlePointerDown}
 				draggable={false}
 			/>
 			{defaultEmptyAs(name, 'Frame') + String.fromCharCode(8203)}

package/src/lib/shapes/geo/GeoShapeUtil.tsx

@@ -126,6 +126,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 					height: unscaledLabelHeight * shape.props.scale,
 					isFilled: true,
 					isLabel: true,
+					excludeFromShapeBounds: true,
 					isEmptyLabel: isEmptyRichText(shape.props.richText),
 				}),
 			],

package/src/lib/shapes/image/ImageShapeUtil.tsx

@@ -57,6 +57,9 @@ export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
 	override canCrop() {
 		return true
 	}
+	override isExportBoundsContainer(): boolean {
+		return true
+	}
 
 	override getDefaultProps(): TLImageShape['props'] {
 		return {

package/src/lib/shapes/line/LineShapeUtil.test.tsx

@@ -7,6 +7,7 @@ import {
 	sortByIndex,
 	structuredClone,
 } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
 import { TL } from '../../../test/test-jsx'
 
@@ -16,7 +17,7 @@ mockUniqueId(() => 'id' + nextId++)
 let editor: TestEditor
 const id = createShapeId('line1')
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 beforeEach(() => {
 	editor = new TestEditor()
@@ -338,12 +339,12 @@ describe('Misc', () => {
 
 		expect(editor.getShapePageBounds(box)!.maxX).not.toEqual(editor.getShapePageBounds(line)!.maxX)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'right')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		expect(editor.getShapePageBounds(box)!.maxX).toEqual(editor.getShapePageBounds(line)!.maxX)
 
 		expect(editor.getShapePageBounds(box)!.maxY).not.toEqual(editor.getShapePageBounds(line)!.maxY)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'bottom')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		expect(editor.getShapePageBounds(box)!.maxY).toEqual(editor.getShapePageBounds(line)!.maxY)
 	})
 

package/src/lib/shapes/line/__snapshots__/LineShapeUtil.test.tsx.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Misc resizes: line shape after resize 1`] = `
+exports[`Misc > resizes > line shape after resize 1`] = `
 {
   "id": "shape:line1",
   "index": "a1",

package/src/lib/shapes/note/NoteShapeUtil.tsx

@@ -147,6 +147,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 					height: lh,
 					isFilled: true,
 					isLabel: true,
+					excludeFromShapeBounds: true,
 				}),
 			],
 		})

package/src/lib/shapes/shared/HyperlinkButton.tsx

@@ -1,4 +1,4 @@
-import { stopEventPropagation, useEditor, useValue } from '@tldraw/editor'
+import { useEditor, useValue } from '@tldraw/editor'
 import classNames from 'classnames'
 import { PointerEventHandler, useCallback } from 'react'
 
@@ -8,9 +8,9 @@ const LINK_ICON =
 export function HyperlinkButton({ url }: { url: string }) {
 	const editor = useEditor()
 	const hideButton = useValue('zoomLevel', () => editor.getZoomLevel() < 0.32, [editor])
-	const useStopPropagationOnShiftKey = useCallback<PointerEventHandler>(
+	const markAsHandledOnShiftKey = useCallback<PointerEventHandler>(
 		(e) => {
-			if (!editor.inputs.shiftKey) stopEventPropagation(e)
+			if (!editor.inputs.shiftKey) editor.markEventAsHandled(e)
 		},
 		[editor]
 	)
@@ -22,8 +22,8 @@ export function HyperlinkButton({ url }: { url: string }) {
 			href={url}
 			target="_blank"
 			rel="noopener noreferrer"
-			onPointerDown={useStopPropagationOnShiftKey}
-			onPointerUp={useStopPropagationOnShiftKey}
+			onPointerDown={markAsHandledOnShiftKey}
+			onPointerUp={markAsHandledOnShiftKey}
 			title={url}
 			draggable={false}
 		>

package/src/lib/shapes/shared/PlainTextLabel.tsx

@@ -130,9 +130,3 @@ export const PlainTextLabel = React.memo(function PlainTextLabel({
 		</div>
 	)
 })
-
-/**
- * @deprecated Use `PlainTextLabel` instead.
- * @public
- */
-export const TextLabel = PlainTextLabel

package/src/lib/shapes/shared/freehand/svg.ts

@@ -6,6 +6,8 @@ import { StrokePoint } from './types'
  *
  * @param points - The stroke points returned from perfect-freehand
  * @param closed - Whether the shape is closed
+ *
+ * @public
  */
 export function getSvgPathFromStrokePoints(points: StrokePoint[], closed = false): string {
 	const len = points.length

package/src/lib/shapes/shared/useEditablePlainText.ts

@@ -5,7 +5,6 @@ import {
 	getPointerInfo,
 	noop,
 	preventDefault,
-	stopEventPropagation,
 	tlenv,
 	useEditor,
 	useValue,
@@ -129,14 +128,14 @@ export function useEditableTextCommon(shapeId: TLShapeId) {
 			// partially if we didn't dispatch/stop below.
 
 			editor.dispatch({
-				...getPointerInfo(e),
+				...getPointerInfo(editor, e),
 				type: 'pointer',
 				name: 'pointer_down',
 				target: 'shape',
 				shape: editor.getShape(shapeId)!,
 			})
 
-			stopEventPropagation(e) // we need to prevent blurring the input
+			e.stopPropagation() // we need to prevent blurring the input
 		},
 		[editor, shapeId]
 	)
@@ -161,15 +160,9 @@ export function useEditableTextCommon(shapeId: TLShapeId) {
 		handleFocus: noop,
 		handleBlur: noop,
 		handleInputPointerDown,
-		handleDoubleClick: stopEventPropagation,
+		handleDoubleClick: editor.markEventAsHandled,
 		handlePaste,
 		isEditing,
 		isReadyForEditing,
 	}
 }
-
-/**
- * @deprecated Use `useEditablePlainText` instead.
- * @public
- */
-export const useEditableText = useEditablePlainText

package/src/lib/shapes/shared/useImageOrVideoAsset.ts

@@ -158,10 +158,3 @@ function resolveAssetUrl(
 			callback(url)
 		})
 }
-
-/**
- * @deprecated Use {@link useImageOrVideoAsset} instead.
- *
- * @public
- */
-export const useAsset = useImageOrVideoAsset