tldraw 5.4.0-next.ef99ab47e5ce → 5.4.0

package/src/test/defaultHandleExternalFileContent.test.ts

@@ -0,0 +1,86 @@
+import { MediaHelpers, TLImageShape } from '@tldraw/editor'
+import { vi } from 'vitest'
+import { defaultAssetUtils } from '../lib/defaultAssetUtils'
+import {
+	defaultHandleExternalFileContent,
+	getAssetInfo,
+} from '../lib/defaultExternalContentHandlers'
+import { TestEditor } from './TestEditor'
+
+let editor: TestEditor
+let addToast: ReturnType<typeof vi.fn>
+
+function makeOptions() {
+	addToast = vi.fn()
+	return {
+		toasts: { addToast } as any,
+		msg: ((key: string) => key) as any,
+	}
+}
+
+beforeEach(() => {
+	editor = new TestEditor({ assetUtils: defaultAssetUtils })
+	vi.spyOn(MediaHelpers, 'isAnimated').mockResolvedValue(false)
+	// Stand in for the upload stage so only the decode stage is under test.
+	vi.spyOn(editor, 'getAssetForExternalContent').mockImplementation(async (info) => {
+		if (info.type !== 'file') return undefined
+		const asset = await getAssetInfo(editor, info.file)
+		if (!asset) return undefined
+		return { ...asset, props: { ...asset.props, src: 'data:ok' } } as any
+	})
+})
+
+afterEach(() => {
+	editor?.dispose()
+	vi.restoreAllMocks()
+})
+
+describe('defaultHandleExternalFileContent', () => {
+	it('skips an undecodable image with a toast and still places the others', async () => {
+		const goodFile = new File(['good'], 'good.png', { type: 'image/png' })
+		const badFile = new File(['not really a png'], 'bad.png', { type: 'image/png' })
+
+		vi.spyOn(MediaHelpers, 'getImageSize').mockImplementation(async (file) => {
+			if (file === badFile) throw new Error('Could not load image')
+			return { w: 100, h: 50, pixelRatio: 1 }
+		})
+		vi.spyOn(console, 'error').mockImplementation(() => {})
+
+		await defaultHandleExternalFileContent(
+			editor,
+			{ point: { x: 0, y: 0 }, files: [badFile, goodFile] },
+			makeOptions()
+		)
+
+		expect(addToast).toHaveBeenCalledTimes(1)
+		expect(addToast).toHaveBeenCalledWith({
+			title: 'assets.files.upload-failed',
+			severity: 'error',
+		})
+
+		const images = editor.getCurrentPageShapes().filter((s) => s.type === 'image')
+		expect(images).toHaveLength(1)
+		const asset = editor.getAsset((images[0] as TLImageShape).props.assetId!)
+		expect(asset?.props).toMatchObject({ name: 'good.png', w: 100, h: 50 })
+	})
+
+	it('shows a toast and creates nothing when the only file is undecodable', async () => {
+		const badFile = new File(['not really a png'], 'bad.png', { type: 'image/png' })
+		vi.spyOn(MediaHelpers, 'getImageSize').mockRejectedValue(new Error('Could not load image'))
+		vi.spyOn(console, 'error').mockImplementation(() => {})
+
+		await defaultHandleExternalFileContent(
+			editor,
+			{ point: { x: 0, y: 0 }, files: [badFile] },
+			makeOptions()
+		)
+
+		expect(addToast).toHaveBeenCalledTimes(1)
+		expect(addToast).toHaveBeenCalledWith({
+			title: 'assets.files.upload-failed',
+			severity: 'error',
+		})
+		expect(editor.getCurrentPageShapes()).toHaveLength(0)
+		expect(editor.getAssets()).toHaveLength(0)
+	})
+})

package/src/test/drawing.test.ts

@@ -1,4 +1,4 @@
-import { TLDrawShape, TLHighlightShape, last } from '@tldraw/editor'
+import { PageRecordType, TLDrawShape, TLHighlightShape, last } from '@tldraw/editor'
 import { vi } from 'vitest'
 import { base64ToPoints } from '../lib/utils/test-helpers'
 import { TEST_DRAW_SHAPE_SCREEN_POINTS } from './drawing.data'
@@ -121,6 +121,39 @@ for (const toolType of ['draw', 'highlight'] as const) {
 			expect(shape.props.segments[2].type).toBe('straight')
 		})
 
+		it('Switches segment types after the same screen distance regardless of zoom', () => {
+			// Without the zoom correction the threshold is 4 canvas units, which at 800% is
+			// 32 screen pixels of the stroke not following the pointer (#10392).
+			editor.setCamera({ x: 0, y: 0, z: 8 })
+			editor
+				.setCurrentTool(toolType)
+				.pointerDown(100, 100)
+				.pointerMove(120, 100)
+				.keyDown('Shift')
+				.pointerMove(125, 100)
+
+			let shape = editor.getCurrentPageShapes()[0] as DrawableShape
+			expect(shape.props.segments.map((s) => s.type)).toEqual(['free', 'straight'])
+
+			editor.keyUp('Shift').pointerMove(130, 100)
+
+			shape = editor.getCurrentPageShapes()[0] as DrawableShape
+			expect(shape.props.segments.map((s) => s.type)).toEqual(['free', 'straight', 'free'])
+		})
+
+		it('Does not switch segment types until the pointer has moved past the drag distance', () => {
+			editor.setCamera({ x: 0, y: 0, z: 8 })
+			editor
+				.setCurrentTool(toolType)
+				.pointerDown(100, 100)
+				.pointerMove(120, 100)
+				.keyDown('Shift')
+				.pointerMove(123, 100)
+
+			const shape = editor.getCurrentPageShapes()[0] as DrawableShape
+			expect(shape.props.segments.map((s) => s.type)).toEqual(['free'])
+		})
+
 		it('Extends previously drawn line when shift is held', () => {
 			editor
 				.setCurrentTool(toolType)
@@ -163,6 +196,32 @@ for (const toolType of ['draw', 'highlight'] as const) {
 			expect(shape2.props.segments[0].type).toBe('straight')
 		})
 
+		it('Does not extend previously drawn line after changing page', () => {
+			// regression for #10400: shift-clicking after a page change appended a
+			// segment to the shape on the old page instead of starting a new shape
+			const page1Id = editor.getCurrentPageId()
+			editor.setCurrentTool(toolType).pointerDown(10, 10).pointerMove(20, 20).pointerUp()
+
+			const shapeOnPage1 = editor.getCurrentPageShapes()[0] as DrawableShape
+			expect(shapeOnPage1.props.segments.length).toBe(1)
+
+			const page2Id = PageRecordType.createId()
+			editor.createPage({ id: page2Id, name: 'Page 2' })
+			editor.setCurrentPage(page2Id)
+			editor.keyDown('Shift').pointerDown(30, 30).pointerMove(40, 40).pointerUp()
+
+			expect(editor.getCurrentPageShapes()).toHaveLength(1)
+			const shapeOnPage2 = editor.getCurrentPageShapes()[0] as DrawableShape
+			expect(shapeOnPage2.id).not.toBe(shapeOnPage1.id)
+			expect(editor.isShapeInPage(shapeOnPage2, page2Id)).toBe(true)
+			expect(shapeOnPage2.props.segments.length).toBe(1)
+			expect(shapeOnPage2.props.segments[0].type).toBe('straight')
+
+			// The shape on the first page is untouched
+			expect(editor.getShape(shapeOnPage1.id)).toEqual(shapeOnPage1)
+			expect(editor.isShapeInPage(shapeOnPage1.id, page1Id)).toBe(true)
+		})
+
 		it('Snaps to 15 degree angle when shift is held', () => {
 			const magnitude = 10
 			const angle = (17 * Math.PI) / 180

package/src/test/duplicate.test.ts

@@ -41,6 +41,28 @@ it('duplicates a shape with an offset', () => {
 	expect(editor.getLastCreatedShape()).toMatchObject({ x: 10, y: 10 })
 })
 
+it('ignores ids of shapes that do not exist', () => {
+	editor.createShape({ id: ids.box1, type: 'geo', x: 0, y: 0, props: { w: 100, h: 100 } })
+	editor.duplicateShapes([ids.box1, createShapeId('nope')], { x: 10, y: 10 })
+	expect(editor.getCurrentPageShapes().length).toBe(2)
+	expect(editor.getLastCreatedShape()).toMatchObject({ x: 10, y: 10 })
+})
+
+it('offsets a duplicated descendant only once when its ancestor is also duplicated', () => {
+	editor.createShapes([
+		{ id: ids.box1, type: 'frame', x: 0, y: 0, props: { w: 500, h: 500 } },
+		{ id: ids.box2, type: 'geo', parentId: ids.box1, x: 50, y: 50, props: { w: 100, h: 100 } },
+	])
+	editor.duplicateShapes([ids.box1, ids.box2], { x: 1000, y: 0 })
+	const frameCopy = editor
+		.getCurrentPageShapes()
+		.find((s) => s.type === 'frame' && s.id !== ids.box1)!
+	const childCopy = editor.getSortedChildIdsForParent(frameCopy.id)
+	expect(childCopy).toHaveLength(1)
+	// the child follows its duplicated parent; it should not be offset a second time
+	expect(editor.getShapePageBounds(childCopy[0])).toMatchObject({ x: 1050, y: 50 })
+})
+
 it("doesn't duplicate locked shapes", () => {
 	editor
 		.createShape({ id: ids.box1, type: 'geo', x: 0, y: 0, props: { w: 100, h: 100 } })

package/src/test/flatten.test.ts

@@ -0,0 +1,135 @@
+import {
+	AssetRecordType,
+	TLImageAsset,
+	TLShapeId,
+	TLShapePartial,
+	createShapeId,
+} from '@tldraw/editor'
+import { vi } from 'vitest'
+import { flattenShapesToImages } from '../lib/ui/hooks/useFlatten'
+import { TestEditor } from './TestEditor'
+
+let editor: TestEditor
+let assetCount = 0
+
+function installFlattenMocks(target: TestEditor) {
+	// flattenShapesToImages calls editor.getSvgString and
+	// editor.getAssetForExternalContent. Mock both to bypass the real export
+	// pipeline (jsdom can't render SVGs and we don't need real pixels — these
+	// tests only care about which shapes end up in which group).
+	vi.spyOn(target, 'getSvgString').mockResolvedValue({
+		svg: '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"></svg>',
+		width: 10,
+		height: 10,
+		trimPadding: 0,
+	})
+	vi.spyOn(target, 'getAssetForExternalContent').mockImplementation(async () => {
+		const asset: TLImageAsset = {
+			id: AssetRecordType.createId(`flat-${assetCount++}`),
+			typeName: 'asset',
+			type: 'image',
+			props: {
+				w: 10,
+				h: 10,
+				name: 'asset.svg',
+				isAnimated: false,
+				mimeType: 'image/svg+xml',
+				src: 'data:image/svg+xml;base64,',
+			},
+			meta: {},
+		}
+		return asset
+	})
+}
+
+beforeEach(() => {
+	editor = new TestEditor()
+	assetCount = 0
+	installFlattenMocks(editor)
+})
+
+afterEach(() => {
+	editor?.dispose()
+})
+
+const box = (id: TLShapeId, x: number, y: number, w = 50, h = 50): TLShapePartial => ({
+	id,
+	type: 'geo',
+	x,
+	y,
+	props: { w, h, fill: 'solid' },
+})
+
+function getImageShapeCount() {
+	return editor.getCurrentPageShapes().filter((s) => s.type === 'image').length
+}
+
+describe('flattenShapesToImages clustering', () => {
+	const expand = 64
+
+	it('groups shapes within the expand threshold into one image', async () => {
+		const a = createShapeId('a')
+		const b = createShapeId('b')
+		// gap of 30 < 2 * 64 expand, so the expanded boxes intersect
+		editor.createShapes([box(a, 0, 0), box(b, 80, 0)])
+
+		await flattenShapesToImages(editor, [a, b], expand)
+
+		expect(getImageShapeCount()).toBe(1)
+	})
+
+	it('keeps shapes in separate images when their gap exceeds the expand threshold', async () => {
+		const a = createShapeId('a')
+		const b = createShapeId('b')
+		// gap of 200 > 2 * 64 expand, so the expanded boxes do not intersect
+		editor.createShapes([box(a, 0, 0), box(b, 250, 0)])
+
+		await flattenShapesToImages(editor, [a, b], expand)
+
+		expect(getImageShapeCount()).toBe(2)
+	})
+
+	it('merges all shapes into one group when a bridging shape connects them, independent of input order', async () => {
+		// Layout: A — gap — bridge — gap — C. A and C alone do not intersect
+		// each other's expanded bounds, but `bridge` sits in the middle and
+		// should pull them all into a single group regardless of where it
+		// appears in the list. The previous greedy pass would only merge
+		// `bridge` into the first group it touched, leaving C as a separate
+		// cluster when `bridge` came after C in the list — which made the
+		// result depend on selection order.
+		const a = createShapeId('a')
+		const bridge = createShapeId('bridge')
+		const c = createShapeId('c')
+
+		const orders: TLShapeId[][] = [
+			[a, bridge, c],
+			[a, c, bridge],
+			[bridge, a, c],
+			[c, bridge, a],
+		]
+
+		for (const order of orders) {
+			editor.dispose()
+			editor = new TestEditor()
+			assetCount = 0
+			installFlattenMocks(editor)
+			editor.createShapes([box(a, 0, 0), box(bridge, 100, 0), box(c, 200, 0)])
+
+			await flattenShapesToImages(editor, order, expand)
+
+			expect(getImageShapeCount(), `order ${order.join(',')}`).toBe(1)
+		}
+	})
+
+	it('uses a single Box.Common group when no expand value is provided', async () => {
+		// Two shapes far apart should still flatten to one image when called
+		// via the no-expand path (the default useFlatten() hook).
+		const a = createShapeId('a')
+		const b = createShapeId('b')
+		editor.createShapes([box(a, 0, 0), box(b, 1000, 0)])
+
+		await flattenShapesToImages(editor, [a, b])
+
+		expect(getImageShapeCount()).toBe(1)
+	})
+})

package/src/test/frames.test.ts

@@ -450,6 +450,36 @@ describe('frame shapes', () => {
 		expect(editor.getOnlySelectedShape()!.parentId).toBe(frameId)
 	})
 
+	it('restores the original index of a child that is dragged out and back in', () => {
+		const frameId = createShapeId('frame')
+		const boxA = createShapeId('A')
+		const boxB = createShapeId('B')
+		const boxC = createShapeId('C')
+		editor.createShapes([
+			{ id: frameId, type: 'frame', x: 0, y: 0, props: { w: 200, h: 200 } },
+			// A second page-level shape, so that dragging B out lands it at page index a3: the same
+			// index as C inside the frame, which must not block restoring B to a2
+			{ id: createShapeId('X'), type: 'geo', x: 400, y: 400, props: { w: 50, h: 50 } },
+			{ id: boxA, type: 'geo', parentId: frameId, x: 10, y: 10, props: { w: 40, h: 40 } },
+			{ id: boxB, type: 'geo', parentId: frameId, x: 75, y: 75, props: { w: 50, h: 50 } },
+			{ id: boxC, type: 'geo', parentId: frameId, x: 150, y: 150, props: { w: 40, h: 40 } },
+		])
+		expect(editor.getSortedChildIdsForParent(frameId)).toEqual([boxA, boxB, boxC])
+		expect(editor.getShape(boxB)!.index).toBe('a2')
+
+		editor.setCurrentTool('select').select(boxB)
+		editor.pointerDown(100, 100).pointerMove(300, 300)
+		vi.advanceTimersByTime(300)
+		expect(editor.getShape(boxB)!.parentId).toBe(editor.getCurrentPageId())
+		expect(editor.getShape(boxB)!.index).toBe('a3')
+
+		editor.pointerMove(100, 100)
+		vi.advanceTimersByTime(300)
+		editor.pointerUp(100, 100)
+		expect(editor.getShape(boxB)!.parentId).toBe(frameId)
+		expect(editor.getSortedChildIdsForParent(frameId)).toEqual([boxA, boxB, boxC])
+	})
+
 	it('does not reparent shapes that are being dragged from within the frame', () => {
 		dragCreateFrame({ down: [0, 0], move: [200, 200], up: [200, 200] })
 		const frame = editor.getLastCreatedShape()
@@ -1718,6 +1748,27 @@ it('avoids crash when dragging into descendant', () => {
 	editor.pointerMove(30, 30)
 })
 
+it('unparents a frame dragged out of its parent by a point over its own nested child', () => {
+	const outer = createShapeId('outer')
+	const mid = createShapeId('mid')
+	const inner = createShapeId('inner')
+	editor.createShapes([
+		{ id: outer, type: 'frame', x: 0, y: 0, props: { w: 1000, h: 1000 } },
+		{ id: mid, type: 'frame', parentId: outer, x: 100, y: 100, props: { w: 500, h: 500 } },
+		{ id: inner, type: 'frame', parentId: mid, x: 100, y: 100, props: { w: 200, h: 200 } },
+	])
+
+	// inner travels with mid and stays under the pointer the whole drag; it must not be taken
+	// for the drop target, or outer never sees mid leave
+	editor.select(mid)
+	editor.pointerDown(250, 250)
+	editor.pointerMove(2000, 2000)
+	vi.advanceTimersByTime(300)
+
+	expect(editor.getShape(mid)!.parentId).toBe(editor.getCurrentPageId())
+	expect(editor.getShape(inner)!.parentId).toBe(mid)
+})
+
 describe('When dragging groups or shapes within a group', () => {
 	it('Allows dragging groups into frames', () => {
 		editor.createShape({ type: 'frame', x: 100, y: 100, props: { w: 500, h: 500 } })

package/src/test/getShapeAtPoint.test.ts

@@ -1,4 +1,12 @@
-import { TLShape, createShapeId, toRichText } from '@tldraw/editor'
+import {
+	BaseFrameLikeShapeUtil,
+	RecordProps,
+	T,
+	TLBaseShape,
+	TLShape,
+	createShapeId,
+	toRichText,
+} from '@tldraw/editor'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -212,3 +220,38 @@ describe('frames', () => {
 		expect(editor.getEditingShape()).toBe(frame)
 	})
 })
+
+// Not registered in TLGlobalShapePropsMap; see getSvgString.test.ts.
+const PLAIN_FRAME_TYPE = 'plain-frame'
+type PlainFrameShape = TLBaseShape<typeof PLAIN_FRAME_TYPE, { w: number; h: number }>
+
+describe('frame-like shapes with a plain geometry', () => {
+	// inherits BaseBoxShapeUtil's Rectangle2d geometry, which has no label children
+	class PlainFrameUtil extends BaseFrameLikeShapeUtil<any> {
+		static override type = PLAIN_FRAME_TYPE
+		static override props: RecordProps<PlainFrameShape> = { w: T.number, h: T.number }
+		getDefaultProps() {
+			return { w: 200, h: 200 }
+		}
+		component() {
+			return null
+		}
+		getIndicatorPath(): undefined {
+			return undefined
+		}
+	}
+
+	it('can be hit tested', () => {
+		editor = new TestEditor({ shapeUtils: [PlainFrameUtil] })
+		editor.createShape({
+			id: ids.frame1,
+			type: PLAIN_FRAME_TYPE,
+			x: 100,
+			y: 100,
+			props: { w: 200, h: 200 },
+		} as any)
+		expect(() => editor.getShapeAtPoint({ x: 150, y: 150 })).not.toThrow()
+		// just outside the edge, within the margin
+		expect(editor.getShapeAtPoint({ x: 98, y: 150 }, { margin: 4 })?.id).toBe(ids.frame1)
+	})
+})

package/src/test/handleDeepLink.test.tsx

@@ -73,6 +73,21 @@ describe('type: viewport', () => {
 		expect(editor.getViewportPageBounds()).toMatchObject(bounds)
 	})
 
+	it('falls back to fitting the page content when the bounds are malformed', () => {
+		editor.createShapes([
+			{ id: createShapeId(), type: 'geo', x: 2000, y: 2000, props: { w: 100, h: 100 } },
+		])
+		const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+		editor.navigateToDeepLink({ url: 'http://localhost/?d=vabc.def.ghi.jkl' })
+		warn.mockRestore()
+
+		expect(editor.getViewportPageBounds()).toMatchObject({
+			x: 2050 - editor.bounds.width / 2,
+			y: 2050 - editor.bounds.height / 2,
+		})
+		expect(editor.getZoomLevel()).toBe(1)
+	})
+
 	it('will not change the viewport if the specific page does not exist', () => {
 		const pageId = PageRecordType.createId('foo')
 

package/src/test/minimap-wheel.test.tsx

@@ -0,0 +1,48 @@
+import { act } from '@testing-library/react'
+import { TLEventInfo, deleteFromLocalStorage, setInLocalStorage } from '@tldraw/editor'
+import { vi } from 'vitest'
+import { Tldraw } from '../lib/Tldraw'
+import { renderTldrawComponentWithEditor } from './testutils/renderTldrawComponent'
+
+// jsdom has no 2D canvas context; without one the minimap manager throws on mount and the
+// minimap reports a crash instead of rendering normally.
+const getContext = vi.spyOn(HTMLCanvasElement.prototype, 'getContext')
+
+beforeEach(() => {
+	setInLocalStorage('minimap', 'false') // start with the navigation panel expanded
+	getContext.mockImplementation(() => new Proxy({}, { get: () => () => {} }) as any)
+})
+
+afterEach(() => {
+	deleteFromLocalStorage('minimap')
+	getContext.mockReset()
+})
+
+describe('wheel over the minimap', () => {
+	// Issue #10441: the minimap dispatched the wheel to the editor itself, and the navigation
+	// panel's wheel pass-through redispatched the same native event to the canvas, so the camera
+	// moved at double rate.
+	it('dispatches exactly one wheel event to the editor', async () => {
+		const { editor } = await renderTldrawComponentWithEditor(
+			(onMount) => <Tldraw onMount={onMount} />,
+			{ waitForPatterns: false }
+		)
+		const minimap = document.querySelector('[data-testid="minimap.canvas"]') as HTMLElement
+		expect(minimap).toBeTruthy()
+
+		const wheels: TLEventInfo[] = []
+		editor.on('event', (info) => {
+			if (info.type === 'wheel') wheels.push(info)
+		})
+
+		await act(async () => {
+			editor.updateInstanceState({ isFocused: true })
+			minimap.dispatchEvent(
+				new WheelEvent('wheel', { bubbles: true, cancelable: true, deltaX: 0, deltaY: 40 })
+			)
+			editor.emit('tick', 16)
+		})
+
+		expect(wheels).toHaveLength(1)
+	})
+})

package/src/test/resizing.test.ts

@@ -3582,6 +3582,25 @@ describe('shapes that have do not resize', () => {
 		expect(editor.getShapePageBounds(noteBId)).toMatchObject({ x: 100, y: 110, w: 200, h: 200 })
 	})
 
+	it('are still translated if part of a selection when canResize is false', () => {
+		const bookmarkId = createShapeId('bookmark')
+		editor.createShapes([
+			box(ids.boxA, 0, 0, 200, 320),
+			{ id: bookmarkId, type: 'bookmark', x: 0, y: 0, props: { w: 200 } },
+		])
+
+		// a bookmark without an asset is 320 tall
+		expect(editor.getShapePageBounds(bookmarkId)).toMatchObject({ x: 0, y: 0, w: 200, h: 320 })
+
+		editor.select(ids.boxA, bookmarkId)
+
+		editor.resizeSelection({ scaleX: 2, scaleY: 2.1 }, 'bottom_right')
+
+		expect(editor.getShapePageBounds(ids.boxA)).toMatchObject({ x: 0, y: 0, w: 400, h: 672 })
+		// the bookmark keeps its size but moves so its center scales with the selection
+		expect(editor.getShapePageBounds(bookmarkId)).toMatchObject({ x: 100, y: 176, w: 200, h: 320 })
+	})
+
 	it('can flip', () => {
 		const noteBId = createShapeId('noteB')
 		const noteCId = createShapeId('noteC')
@@ -3867,6 +3886,33 @@ it('uses the cross cursor when create resizing', () => {
 	expect(editor.getInstanceState().cursor.rotation).toBe(0)
 })
 
+describe('When brushing from a selection handle with the accel key', () => {
+	it('resets the resize cursor when brushing starts from a resize handle', () => {
+		editor.select(ids.boxA)
+		editor.pointerDownOnHandle('bottom_right', { ctrlKey: true })
+		editor.expectToBeIn('select.brushing')
+		expect(editor.getInstanceState().cursor).toMatchObject({ type: 'default', rotation: 0 })
+
+		editor.pointerMoveBy(50, 50)
+		expect(editor.getInstanceState().cursor).toMatchObject({ type: 'default', rotation: 0 })
+
+		editor.pointerUp()
+		editor.expectToBeIn('select.idle')
+		expect(editor.getInstanceState().cursor).toMatchObject({ type: 'default', rotation: 0 })
+	})
+
+	it('resets the rotate cursor when brushing starts from a rotate handle', () => {
+		editor.select(ids.boxA)
+		editor.pointerDownOnHandle('top_right_rotate', { ctrlKey: true })
+		editor.expectToBeIn('select.brushing')
+		expect(editor.getInstanceState().cursor).toMatchObject({ type: 'default', rotation: 0 })
+
+		editor.pointerUp()
+		editor.expectToBeIn('select.idle')
+		expect(editor.getInstanceState().cursor).toMatchObject({ type: 'default', rotation: 0 })
+	})
+})
+
 describe('Resizing text from the right edge', () => {
 	it('Resizes text from the right edge', () => {
 		const id = createShapeId()

package/src/test/selection-omnibus.test.ts

@@ -1376,6 +1376,29 @@ for (const key of ['Shift', 'Control']) {
 			editor.pointerUp()
 			editor.expectToBeIn('select.idle')
 		})
+
+		it('does not remove a selected shape from the selection on pointer up when alt is also held', () => {
+			editor.select(ids.box1, ids.box3)
+			editor.keyDown(key)
+			editor.keyDown('Alt')
+			editor.pointerMove(450, 50) // inside of box 3
+			expect(editor.getHoveredShapeId()).toBe(ids.box3)
+			editor.pointerDown()
+			expect(editor.getSelectedShapeIds()).toEqual([ids.box1, ids.box3])
+			editor.pointerUp()
+			// same as a plain click on a shape within the selection
+			expect(editor.getSelectedShapeIds()).toEqual([ids.box3])
+		})
+
+		it('does not add a selected shape to the selection on pointer up when alt is also held', () => {
+			editor.keyDown(key)
+			editor.keyDown('Alt')
+			editor.pointerMove(450, 50) // inside of box 3
+			expect(editor.getHoveredShapeId()).toBe(ids.box3)
+			editor.pointerDown()
+			editor.pointerUp()
+			expect(editor.getSelectedShapeIds()).toEqual([ids.box3])
+		})
 	})
 }
 
@@ -1792,6 +1815,33 @@ describe('scribble brushes to add to the selection', () => {
 		expect(editor.getSelectedShapeIds()).toEqual([ids.box1, ids.box2])
 	})
 
+	it('restores the prior selection when cancelled without shift', () => {
+		editor.select(ids.box2)
+		editor.pointerMove(-50, -50)
+		editor.keyDown('Alt')
+		// ctrl-press keeps the current selection and starts a brush on drag
+		editor.pointerDown(-50, -50, { target: 'canvas', accelKey: true })
+		editor.pointerMove(50, 50)
+		editor.expectToBeIn('select.scribble_brushing')
+		expect(editor.getSelectedShapeIds()).toEqual([ids.box1])
+		editor.cancel()
+		editor.expectToBeIn('select.idle')
+		expect(editor.getSelectedShapeIds()).toEqual([ids.box2])
+	})
+
+	it('restores the prior selection when cancelled with shift', () => {
+		editor.select(ids.box2)
+		editor.pointerMove(-50, -50)
+		editor.keyDown('Alt')
+		editor.keyDown('Shift')
+		editor.pointerDown(-50, -50, { target: 'canvas', accelKey: true })
+		editor.pointerMove(50, 50)
+		editor.expectToBeIn('select.scribble_brushing')
+		expect(editor.getSelectedShapeIds()).toEqual([ids.box1, ids.box2])
+		editor.cancel()
+		expect(editor.getSelectedShapeIds()).toEqual([ids.box2])
+	})
+
 	it('selects when switching between moves', () => {
 		editor.ungroupShapes([ids.group1]) // ungroup boxes 3 and 4
 		editor.pointerMove(650, 0)