tldraw 5.2.0-next.e2b8d10bf10e → 5.2.0

package/src/test/freehand/corpus/strokes.ts

@@ -0,0 +1,50 @@
+import { VecModel } from '@tldraw/editor'
+import { StrokeOptions } from '../../../lib/shapes/shared/freehand/types'
+import {
+	highlightSettings,
+	realPressureSettings,
+	simulatePressureSettings,
+	solidSettings,
+} from './presets'
+import { REAL_STROKES } from './real'
+
+/** A single comparison case: recorded input points plus the options tldraw would use. */
+export interface CorpusCase {
+	id: string
+	/** What kind of tldraw stroke this represents. */
+	kind: 'draw' | 'pen' | 'solid' | 'highlight'
+	points: VecModel[]
+	options: StrokeOptions
+}
+
+function makeCases(): CorpusCase[] {
+	const cases: CorpusCase[] = []
+
+	const add = (
+		id: string,
+		kind: CorpusCase['kind'],
+		points: VecModel[],
+		options: StrokeOptions,
+		last = true
+	) => {
+		cases.push({ id, kind, points, options: { ...options, last } })
+	}
+
+	// All strokes were drawn with a mouse at size 'xl' and scale 1, so tldraw passes
+	// strokeWidth = (theme.strokeWidth 2 * STROKE_SIZES.xl 5 + 1) * scale 1 = 11. Each
+	// stroke is also rendered mid-draw and through the other stroke kinds' settings, so
+	// every rendering path sees real input.
+	REAL_STROKES.forEach(({ points }, i) => {
+		const id = `real-${i + 1}`
+		add(id, 'draw', points, simulatePressureSettings(11))
+		add(`${id}-in-progress`, 'draw', points, simulatePressureSettings(11), false)
+		add(`${id}-pen`, 'pen', points, realPressureSettings(11))
+		add(`${id}-solid`, 'solid', points, solidSettings(11))
+		add(`${id}-highlight`, 'highlight', points, highlightSettings(22))
+	})
+
+	return cases
+}
+
+/** The full corpus of comparison cases: real hand-drawn strokes recorded in tldraw. */
+export const CORPUS: CorpusCase[] = makeCases()

package/src/test/freehand/svg.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest'
+import { getSvgPathFromStrokePoints } from '../../lib/shapes/shared/freehand/svg'
+import { StrokePoint } from '../../lib/shapes/shared/freehand/types'
+
+function pt(x: number, y: number): StrokePoint {
+	return { point: { x, y } } as StrokePoint
+}
+
+// The corpus never produces a two-point stroke, so the parity gate doesn't
+// cover this branch; keep a direct check on its output.
+describe('getSvgPathFromStrokePoints', () => {
+	it('renders a two-point stroke as a single relative line', () => {
+		expect(getSvgPathFromStrokePoints([pt(0, 0), pt(10.5, 20.25)])).toBe('M0,0 l10.5,20.25 ')
+	})
+
+	it('renders nothing for fewer than two points', () => {
+		expect(getSvgPathFromStrokePoints([])).toBe('')
+		expect(getSvgPathFromStrokePoints([pt(5, 5)])).toBe('')
+	})
+})

package/src/test/freehand/wellformed.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest'
+import { getStrokePoints } from '../../lib/shapes/shared/freehand/getStrokePoints'
+import { getSvgPathFromStrokePoints } from '../../lib/shapes/shared/freehand/svg'
+import { svgInk } from '../../lib/shapes/shared/freehand/svgInk'
+import { CORPUS, CorpusCase } from './corpus/strokes'
+
+/**
+ * Produce the svg path data tldraw would actually render for this case. Strokes with the 'draw'
+ * dash style (mouse or pen) are rendered as a filled outline via svgInk; solid strokes and the
+ * highlighter are rendered as a stroked centerline path.
+ */
+function renderCase(c: CorpusCase): string {
+	if (c.kind === 'draw' || c.kind === 'pen') {
+		return svgInk(c.points, c.options)
+	}
+	return getSvgPathFromStrokePoints(getStrokePoints(c.points, c.options), false)
+}
+
+// The unit tests on the individual functions can't catch a malformed path string coming out of
+// the full pipeline, so check the path data tldraw would render for every corpus case.
+describe('svg path data is well formed', () => {
+	it.each(CORPUS.map((c) => [c.id, c] as const))('%s', (_id, c) => {
+		const svg = renderCase(c)
+		expect(svg.startsWith('M')).toBe(true)
+		expect(svg).not.toContain('NaN')
+		expect(svg).not.toContain('Infinity')
+		// only valid path characters
+		expect(svg).toMatch(/^[MLQTACZmlqtacz0-9 ,.-]+$/)
+	})
+})

package/src/test/long-press-create.test.ts

@@ -0,0 +1,102 @@
+import { vi } from 'vitest'
+import { TestEditor } from './TestEditor'
+
+let editor: TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+afterEach(() => {
+	editor?.dispose()
+})
+
+vi.useFakeTimers()
+
+// On a touch device a long press fires the browser `contextmenu` event. A discrete
+// shape-creation tool (geo, note, line, text, arrow, frame) should respond by
+// canceling any pending creation and returning to its own idle state, so the long
+// press leaves no shape behind (#8277) and opens no menu — the context menu is a
+// select-tool surface, reached on touch only from the select tool. The guard is
+// `isCoarsePointer`, so fine-pointer (desktop) behavior must be preserved.
+// Continuous-gesture tools (draw, highlight, eraser, laser) are excluded: their
+// press is their own action, so a long press keeps that gesture going.
+const CREATION_TOOLS = [
+	{ tool: 'geo', pointingState: 'geo.pointing' },
+	{ tool: 'note', pointingState: 'note.pointing' },
+	{ tool: 'text', pointingState: 'text.pointing' },
+	{ tool: 'line', pointingState: 'line.pointing' },
+	{ tool: 'arrow', pointingState: 'arrow.pointing' },
+	{ tool: 'frame', pointingState: 'frame.pointing' },
+] as const
+
+describe('long press on shape-creation tools', () => {
+	describe('with a coarse pointer', () => {
+		beforeEach(() => {
+			editor.updateInstanceState({ isCoarsePointer: true })
+		})
+
+		it.each(CREATION_TOOLS)(
+			'$tool cancels creation and returns to its idle state, leaving no shape behind',
+			({ tool }) => {
+				editor.setCurrentTool(tool)
+				editor.pointerDown(100, 100)
+				vi.advanceTimersByTime(editor.options.longPressDurationMs)
+
+				// back in the tool's own idle — not switched to select, no menu
+				editor.expectToBeIn(`${tool}.idle`)
+				expect(editor.getCurrentPageShapes()).toHaveLength(0)
+
+				// releasing the long press must not create a shape either
+				editor.pointerUp(100, 100)
+				expect(editor.getCurrentPageShapes()).toHaveLength(0)
+			}
+		)
+
+		it('continuous-gesture tools keep their gesture on long press', () => {
+			// Unlike the discrete tools, a freehand tool starts a stroke on
+			// pointer-down, so the long press is part of the stroke. It must not
+			// cancel — the stroke continues.
+			editor.setCurrentTool('draw')
+			editor.pointerDown(100, 100)
+			editor.expectToBeIn('draw.drawing')
+
+			vi.advanceTimersByTime(editor.options.longPressDurationMs)
+
+			editor.expectToBeIn('draw.drawing')
+			editor.pointerUp(100, 100)
+			expect(editor.getCurrentPageShapes()).toHaveLength(1)
+		})
+
+		it('defers note creation so a long press never flashes a note', () => {
+			// The note creates on press, so without deferral the long-press cancel
+			// would briefly show then remove it. On a coarse pointer it is created on
+			// release (or drag) instead, so nothing appears during the press.
+			editor.setCurrentTool('note')
+			editor.pointerDown(100, 100)
+			expect(editor.getCurrentPageShapes()).toHaveLength(0)
+
+			// a tap still creates the note on release
+			editor.pointerUp(100, 100)
+			const shapes = editor.getCurrentPageShapes()
+			expect(shapes).toHaveLength(1)
+			expect(shapes[0].type).toBe('note')
+		})
+	})
+
+	describe('with a fine pointer, the long press is ignored', () => {
+		beforeEach(() => {
+			editor.updateInstanceState({ isCoarsePointer: false })
+		})
+
+		it.each(CREATION_TOOLS)('$tool stays in $pointingState', ({ tool, pointingState }) => {
+			editor.setCurrentTool(tool)
+			editor.pointerDown(100, 100)
+			editor.expectToBeIn(pointingState)
+
+			vi.advanceTimersByTime(editor.options.longPressDurationMs)
+
+			// desktop behavior is preserved: the tool is still mid-creation
+			editor.expectToBeIn(pointingState)
+		})
+	})
+})

package/src/test/overlays/CollaboratorBrushOverlayUtil.test.ts

@@ -1,4 +1,4 @@
-import { InstancePresenceRecordType } from '@tldraw/tlschema'
+import { createUserId, InstancePresenceRecordType } from '@tldraw/tlschema'
 import { defaultOverlayUtils } from '../../lib/defaultOverlayUtils'
 import { CollaboratorBrushOverlayUtil } from '../../lib/overlays/CollaboratorBrushOverlayUtil'
 import { TestEditor } from '../TestEditor'
@@ -22,7 +22,7 @@ describe('CollaboratorBrushOverlayUtil', () => {
 			editor.store.put([
 				InstancePresenceRecordType.create({
 					id: InstancePresenceRecordType.createId('peer1'),
-					userId: 'peer1',
+					userId: createUserId('peer1'),
 					userName: 'Peer 1',
 					currentPageId: pageId,
 					brush: { x: 1, y: 2, w: 3, h: 4 },
@@ -46,7 +46,7 @@ describe('CollaboratorBrushOverlayUtil', () => {
 			editor.store.put([
 				InstancePresenceRecordType.create({
 					id: InstancePresenceRecordType.createId('peer1'),
-					userId: 'peer1',
+					userId: createUserId('peer1'),
 					userName: 'Peer 1',
 					currentPageId: pageId,
 					color: '#123456',
@@ -54,7 +54,7 @@ describe('CollaboratorBrushOverlayUtil', () => {
 				}),
 				InstancePresenceRecordType.create({
 					id: InstancePresenceRecordType.createId('peer2'),
-					userId: 'peer2',
+					userId: createUserId('peer2'),
 					userName: 'Peer 2',
 					currentPageId: pageId,
 					color: '#abcdef',

package/src/test/overlays/CollaboratorCursorOverlayUtil.test.ts

@@ -1,4 +1,4 @@
-import { InstancePresenceRecordType } from '@tldraw/tlschema'
+import { createUserId, InstancePresenceRecordType } from '@tldraw/tlschema'
 import { vi } from 'vitest'
 import { defaultOverlayUtils } from '../../lib/defaultOverlayUtils'
 import { CollaboratorCursorOverlayUtil } from '../../lib/overlays/CollaboratorCursorOverlayUtil'
@@ -73,7 +73,7 @@ describe('CollaboratorCursorOverlayUtil', () => {
 			editor.store.put([
 				InstancePresenceRecordType.create({
 					id: InstancePresenceRecordType.createId('peer1'),
-					userId: 'peer1',
+					userId: createUserId('peer1'),
 					userName: 'Peer 1',
 					currentPageId: pageId,
 					cursor: { type: 'default', x: 10, y: 10, rotation: 0 },
@@ -98,7 +98,7 @@ describe('CollaboratorCursorOverlayUtil', () => {
 			editor.store.put([
 				InstancePresenceRecordType.create({
 					id: InstancePresenceRecordType.createId('peer1'),
-					userId: 'peer1',
+					userId: createUserId('peer1'),
 					userName: 'Alice',
 					currentPageId: pageId,
 					color: '#a',
@@ -107,7 +107,7 @@ describe('CollaboratorCursorOverlayUtil', () => {
 				}),
 				InstancePresenceRecordType.create({
 					id: InstancePresenceRecordType.createId('peer2'),
-					userId: 'peer2',
+					userId: createUserId('peer2'),
 					userName: 'Bob',
 					currentPageId: pageId,
 					color: '#b',
@@ -130,7 +130,7 @@ describe('CollaboratorCursorOverlayUtil', () => {
 			editor.store.put([
 				InstancePresenceRecordType.create({
 					id: InstancePresenceRecordType.createId('peer3'),
-					userId: 'peer3',
+					userId: createUserId('peer3'),
 					userName: 'Carol',
 					currentPageId: pageId,
 					color: '#c',
@@ -150,7 +150,7 @@ describe('CollaboratorCursorOverlayUtil', () => {
 				// inactive (way past timeout) — not shown
 				InstancePresenceRecordType.create({
 					id: InstancePresenceRecordType.createId('p_inactive'),
-					userId: 'p_inactive',
+					userId: createUserId('p_inactive'),
 					userName: 'Inactive',
 					currentPageId: pageId,
 					cursor: { type: 'default', x: 10, y: 10, rotation: 0 },
@@ -159,7 +159,7 @@ describe('CollaboratorCursorOverlayUtil', () => {
 				// idle (between thresholds) — shown
 				InstancePresenceRecordType.create({
 					id: InstancePresenceRecordType.createId('p_idle'),
-					userId: 'p_idle',
+					userId: createUserId('p_idle'),
 					userName: 'Idle',
 					currentPageId: pageId,
 					cursor: { type: 'default', x: 15, y: 15, rotation: 0 },
@@ -168,7 +168,7 @@ describe('CollaboratorCursorOverlayUtil', () => {
 				// active — shown
 				InstancePresenceRecordType.create({
 					id: InstancePresenceRecordType.createId('p_active'),
-					userId: 'p_active',
+					userId: createUserId('p_active'),
 					userName: 'Active',
 					currentPageId: pageId,
 					cursor: { type: 'default', x: 20, y: 20, rotation: 0 },
@@ -184,12 +184,12 @@ describe('CollaboratorCursorOverlayUtil', () => {
 
 		it('shows inactive collaborators when following them', () => {
 			const pageId = editor.getCurrentPageId()
-			editor.updateInstanceState({ followingUserId: 'peerF' })
+			editor.updateInstanceState({ followingUserId: createUserId('peerF') })
 			const now = Date.now()
 			editor.store.put([
 				InstancePresenceRecordType.create({
 					id: InstancePresenceRecordType.createId('presenceF'),
-					userId: 'peerF',
+					userId: createUserId('peerF'),
 					userName: 'Followed',
 					currentPageId: pageId,
 					cursor: { type: 'default', x: 10, y: 10, rotation: 0 },
@@ -204,12 +204,12 @@ describe('CollaboratorCursorOverlayUtil', () => {
 
 		it('shows inactive collaborators when they are highlighted', () => {
 			const pageId = editor.getCurrentPageId()
-			editor.updateInstanceState({ highlightedUserIds: ['peerH'] })
+			editor.updateInstanceState({ highlightedUserIds: [createUserId('peerH')] })
 			const now = Date.now()
 			editor.store.put([
 				InstancePresenceRecordType.create({
 					id: InstancePresenceRecordType.createId('presenceH'),
-					userId: 'peerH',
+					userId: createUserId('peerH'),
 					userName: 'Highlighted',
 					currentPageId: pageId,
 					cursor: { type: 'default', x: 20, y: 20, rotation: 0 },
@@ -228,12 +228,12 @@ describe('CollaboratorCursorOverlayUtil', () => {
 			editor.store.put([
 				InstancePresenceRecordType.create({
 					id: InstancePresenceRecordType.createId('presenceFU'),
-					userId: 'peerFU',
+					userId: createUserId('peerFU'),
 					userName: 'Follower',
 					currentPageId: pageId,
 					cursor: { type: 'default', x: 30, y: 30, rotation: 0 },
 					lastActivityTimestamp: now - 5 * 1000,
-					followingUserId: editor.user.getId(),
+					followingUserId: editor.user.getRecordId(),
 				}),
 			])
 			const overlays = editor.overlays
@@ -248,12 +248,12 @@ describe('CollaboratorCursorOverlayUtil', () => {
 			editor.store.put([
 				InstancePresenceRecordType.create({
 					id: InstancePresenceRecordType.createId('presenceChat'),
-					userId: 'peerChat',
+					userId: createUserId('peerChat'),
 					userName: 'Follower Chat',
 					currentPageId: pageId,
 					cursor: { type: 'default', x: 40, y: 40, rotation: 0 },
 					lastActivityTimestamp: now - 5 * 1000,
-					followingUserId: editor.user.getId(),
+					followingUserId: editor.user.getRecordId(),
 					chatMessage: 'Hello',
 				}),
 			])
@@ -268,7 +268,7 @@ describe('CollaboratorCursorOverlayUtil', () => {
 			editor.store.put([
 				InstancePresenceRecordType.create({
 					id: InstancePresenceRecordType.createId('peer4'),
-					userId: 'peer4',
+					userId: createUserId('peer4'),
 					userName: 'New User',
 					currentPageId: pageId,
 					cursor: { type: 'default', x: 10, y: 10, rotation: 0 },
@@ -290,7 +290,7 @@ describe('CollaboratorCursorOverlayUtil', () => {
 				timedEditor.store.put([
 					InstancePresenceRecordType.create({
 						id: InstancePresenceRecordType.createId('peer_timed'),
-						userId: 'peer_timed',
+						userId: createUserId('peer_timed'),
 						userName: 'Timed Peer',
 						currentPageId: pageId,
 						cursor: { type: 'default', x: 10, y: 10, rotation: 0 },

package/src/test/overlays/CollaboratorHintOverlayUtil.test.ts

@@ -1,4 +1,4 @@
-import { InstancePresenceRecordType } from '@tldraw/tlschema'
+import { createUserId, InstancePresenceRecordType } from '@tldraw/tlschema'
 import { defaultOverlayUtils } from '../../lib/defaultOverlayUtils'
 import { CollaboratorHintOverlayUtil } from '../../lib/overlays/CollaboratorHintOverlayUtil'
 import { TestEditor } from '../TestEditor'
@@ -22,7 +22,7 @@ describe('CollaboratorHintOverlayUtil', () => {
 			editor.store.put([
 				InstancePresenceRecordType.create({
 					id: InstancePresenceRecordType.createId('peer1'),
-					userId: 'peer1',
+					userId: createUserId('peer1'),
 					userName: 'Peer 1',
 					currentPageId: pageId,
 					cursor: { type: 'default', x: 100000, y: 100000, rotation: 0 },
@@ -46,7 +46,7 @@ describe('CollaboratorHintOverlayUtil', () => {
 			editor.store.put([
 				InstancePresenceRecordType.create({
 					id: InstancePresenceRecordType.createId('peer1'),
-					userId: 'peer1',
+					userId: createUserId('peer1'),
 					userName: 'Peer 1',
 					currentPageId: pageId,
 					color: '#c00',
@@ -55,7 +55,7 @@ describe('CollaboratorHintOverlayUtil', () => {
 				}),
 				InstancePresenceRecordType.create({
 					id: InstancePresenceRecordType.createId('peer2'),
-					userId: 'peer2',
+					userId: createUserId('peer2'),
 					userName: 'Peer 2',
 					currentPageId: pageId,
 					color: '#0c0',
@@ -77,7 +77,7 @@ describe('CollaboratorHintOverlayUtil', () => {
 			editor.store.put([
 				InstancePresenceRecordType.create({
 					id: InstancePresenceRecordType.createId('peer1'),
-					userId: 'peer1',
+					userId: createUserId('peer1'),
 					userName: 'Peer 1',
 					currentPageId: pageId,
 					color: '#c00',
@@ -95,13 +95,13 @@ describe('CollaboratorHintOverlayUtil', () => {
 			editor.store.put([
 				InstancePresenceRecordType.create({
 					id: InstancePresenceRecordType.createId('peer1'),
-					userId: 'peer1',
+					userId: createUserId('peer1'),
 					userName: 'Peer 1',
 					currentPageId: pageId,
 					color: '#c00',
 					cursor: { type: 'default', x: 100000, y: 100000, rotation: 0 },
 					lastActivityTimestamp: now - 5 * 1000,
-					followingUserId: editor.user.getId(),
+					followingUserId: editor.user.getRecordId(),
 				}),
 			])
 			const util = editor.overlays.getOverlayUtil<CollaboratorHintOverlayUtil>('collaborator_hint')

package/src/test/overlays/CollaboratorScribbleOverlayUtil.test.ts

@@ -1,4 +1,4 @@
-import { InstancePresenceRecordType } from '@tldraw/tlschema'
+import { createUserId, InstancePresenceRecordType } from '@tldraw/tlschema'
 import { defaultOverlayUtils } from '../../lib/defaultOverlayUtils'
 import { CollaboratorScribbleOverlayUtil } from '../../lib/overlays/CollaboratorScribbleOverlayUtil'
 import { TestEditor } from '../TestEditor'
@@ -22,7 +22,7 @@ describe('CollaboratorScribbleOverlayUtil', () => {
 			editor.store.put([
 				InstancePresenceRecordType.create({
 					id: InstancePresenceRecordType.createId('peer1'),
-					userId: 'peer1',
+					userId: createUserId('peer1'),
 					userName: 'Peer 1',
 					currentPageId: pageId,
 					scribbles: [
@@ -58,7 +58,7 @@ describe('CollaboratorScribbleOverlayUtil', () => {
 			editor.store.put([
 				InstancePresenceRecordType.create({
 					id: InstancePresenceRecordType.createId('peer1'),
-					userId: 'peer1',
+					userId: createUserId('peer1'),
 					userName: 'Peer 1',
 					currentPageId: pageId,
 					color: '#00FF00',

package/src/test/overlays/OverlayManager.test.ts

@@ -101,7 +101,7 @@ describe('OverlayManager', () => {
 		it('hits the bounded edge handle hit area regardless of margin', () => {
 			editor.createShapes([{ id: ids.box1, type: 'geo', x: 0, y: 0, props: { w: 100, h: 100 } }])
 			editor.select(ids.box1)
-			// Edge handles are filled polygons of half-thickness targetSizeY (~4.5px at zoom 1);
+			// Edge handles are filled polygons of half-thickness hitTargetSizeY (~4.5px at zoom 1);
 			// a point inside that band hits with margin 0, and a point outside misses.
 			const insideTopEdge = { x: 50, y: -3 }
 			const outsideTopEdge = { x: 50, y: -20 }

package/src/test/overlays/SelectionForegroundOverlayUtil.test.ts

@@ -93,6 +93,22 @@ describe('SelectionForegroundOverlayUtil', () => {
 			expect(idsSet.has('selection_fg:bottom_right_rotate')).toBe(true)
 		})
 
+		it.each(['top_left', 'top', 'top_left_rotate'] as const)(
+			'keeps selection foreground overlays visible while pointing the %s handle',
+			(handle) => {
+				editor.updateInstanceState({ isCoarsePointer: false })
+				editor.createShapes([{ id: ids.box1, type: 'geo', x: 0, y: 0, props: { w: 100, h: 100 } }])
+				editor.select(ids.box1)
+				editor.pointerDown(0, 0, { target: 'selection', handle })
+
+				const overlays = editor.overlays.getCurrentOverlays()
+				const idsSet = new Set(overlays.map((o) => o.id))
+				expect(idsSet.has('selection_fg:top_left')).toBe(true)
+				expect(idsSet.has('selection_fg:top')).toBe(true)
+				expect(idsSet.has('selection_fg:top_left_rotate')).toBe(true)
+			}
+		)
+
 		it('includes mobile rotate handle for coarse pointer', () => {
 			editor.updateInstanceState({ isCoarsePointer: true })
 			editor.createShapes([{ id: ids.box1, type: 'geo', x: 0, y: 0, props: { w: 60, h: 60 } }])
@@ -189,6 +205,48 @@ describe('SelectionForegroundOverlayUtil', () => {
 			expect(idsSet.has('selection_fg:bottom_right')).toBe(true)
 		})
 
+		it('keeps resize handles while pressing a resize edge', () => {
+			editor.createShapes([{ id: ids.box1, type: 'geo', x: 0, y: 0, props: { w: 100, h: 100 } }])
+			editor.select(ids.box1)
+			editor.pointerDownOnHandle('top')
+			expect(editor.getPath()).toBe('select.pointing_resize_handle')
+
+			const util =
+				editor.overlays.getOverlayUtil<SelectionForegroundOverlayUtil>('selection_foreground')
+			const idsSet = new Set(util.getOverlays().map((o) => o.id))
+			expect(idsSet.has('selection_fg:top_left')).toBe(true)
+			expect(idsSet.has('selection_fg:top_right')).toBe(true)
+			expect(idsSet.has('selection_fg:bottom_left')).toBe(true)
+			expect(idsSet.has('selection_fg:bottom_right')).toBe(true)
+
+			// Once an actual resize begins, the handles hide
+			editor.pointerMoveBy(0, -30)
+			expect(editor.getPath()).toBe('select.resizing')
+			expect(util.getOverlays()).toEqual([])
+		})
+
+		it('keeps resize handles while pressing a rotate handle', () => {
+			editor.updateInstanceState({ isCoarsePointer: false })
+			editor.createShapes([{ id: ids.box1, type: 'geo', x: 0, y: 0, props: { w: 100, h: 100 } }])
+			editor.select(ids.box1)
+			editor.pointerDownOnHandle('top_left_rotate')
+			expect(editor.getPath()).toBe('select.pointing_rotate_handle')
+
+			const util =
+				editor.overlays.getOverlayUtil<SelectionForegroundOverlayUtil>('selection_foreground')
+			expect(util.isActive()).toBe(true)
+			const idsSet = new Set(util.getOverlays().map((o) => o.id))
+			expect(idsSet.has('selection_fg:top_left')).toBe(true)
+			expect(idsSet.has('selection_fg:top_right')).toBe(true)
+			expect(idsSet.has('selection_fg:bottom_left')).toBe(true)
+			expect(idsSet.has('selection_fg:bottom_right')).toBe(true)
+
+			// Once an actual rotation begins, the selection foreground hides
+			editor.pointerMoveBy(-30, -30)
+			expect(editor.getPath()).toBe('select.rotating')
+			expect(util.isActive()).toBe(false)
+		})
+
 		it('hides edge handles on coarse pointer', () => {
 			editor.updateInstanceState({ isCoarsePointer: true })
 			editor.createShapes([{ id: ids.box1, type: 'geo', x: 0, y: 0, props: { w: 100, h: 100 } }])

package/src/test/overlays/ShapeHandleOverlayUtil.test.ts

@@ -64,13 +64,13 @@ describe('ShapeHandleOverlayUtil', () => {
 			editor.pointerUp()
 		})
 
-		it('returns true in select.pointing_shape with a handle shape selected', () => {
+		it('returns false in select.pointing_shape with a handle shape selected', () => {
 			editor.createShapes([{ id: ids.line1, type: 'line', x: 120, y: 120 }])
 			const shape = editor.getShape(ids.line1)!
 			editor.pointerDown(shape.x + 1, shape.y + 1, { target: 'shape', shape })
 			editor.expectToBeIn('select.pointing_shape')
 			const util = editor.overlays.getOverlayUtil<ShapeHandleOverlayUtil>('shape_handle')
-			expect(util.isActive()).toBe(true)
+			expect(util.isActive()).toBe(false)
 			editor.pointerUp()
 		})
 

package/src/test/overlays/ShapeIndicatorOverlayUtil.test.ts

@@ -0,0 +1,36 @@
+import { createShapeId } from '@tldraw/editor'
+import { defaultOverlayUtils } from '../../lib/defaultOverlayUtils'
+import { ShapeIndicatorOverlayUtil } from '../../lib/overlays/ShapeIndicatorOverlayUtil'
+import { TestEditor } from '../TestEditor'
+
+let editor: TestEditor
+
+const ids = {
+	box1: createShapeId('box1'),
+}
+
+beforeEach(() => {
+	editor = new TestEditor({ overlayUtils: defaultOverlayUtils })
+})
+
+describe('ShapeIndicatorOverlayUtil', () => {
+	describe('getOverlays', () => {
+		it.each(['top_left', 'top_left_rotate'] as const)(
+			'keeps selected shape indicators visible while pointing the %s selection handle',
+			(handle) => {
+				editor.createShapes([{ id: ids.box1, type: 'geo', x: 0, y: 0, props: { w: 100, h: 100 } }])
+				editor.select(ids.box1)
+				editor.pointerDown(0, 0, { target: 'selection', handle })
+
+				const util = editor.overlays.getOverlayUtil<ShapeIndicatorOverlayUtil>('shape_indicator')
+				expect(util.getOverlays()).toMatchObject([
+					{
+						id: 'shape_indicator',
+						type: 'shape_indicator',
+						props: { idsToDisplay: [ids.box1] },
+					},
+				])
+			}
+		)
+	})
+})