tldraw 3.16.0-next.c30b1b5e551a → 3.16.0-next.e57e478c23e0

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/draw/DrawShapeUtil.tsx

@@ -14,6 +14,7 @@ import {
 	VecLike,
 	drawShapeMigrations,
 	drawShapeProps,
+	getColorValue,
 	last,
 	lerp,
 	rng,
@@ -289,7 +290,7 @@ function DrawShapeSvg({ shape, zoomOverride }: { shape: TLDrawShape; zoomOverrid
 				<path
 					d={svgInk(allPointsFromSegments, options)}
 					strokeLinecap="round"
-					fill={theme[shape.props.color].solid}
+					fill={getColorValue(theme, shape.props.color, 'solid')}
 				/>
 			</>
 		)
@@ -313,8 +314,8 @@ function DrawShapeSvg({ shape, zoomOverride }: { shape: TLDrawShape; zoomOverrid
 			<path
 				d={solidStrokePath}
 				strokeLinecap="round"
-				fill={isDot ? theme[shape.props.color].solid : 'none'}
-				stroke={theme[shape.props.color].solid}
+				fill={isDot ? getColorValue(theme, shape.props.color, 'solid') : 'none'}
+				stroke={getColorValue(theme, shape.props.color, 'solid')}
 				strokeWidth={sw}
 				strokeDasharray={isDot ? 'none' : getDrawShapeStrokeDashArray(shape, sw, dotAdjustment)}
 				strokeDashoffset="0"

package/src/lib/shapes/embed/EmbedShapeUtil.tsx

@@ -144,7 +144,7 @@ export class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
 							border: 0,
 							boxShadow: getRotatedBoxShadow(pageRotation),
 							borderRadius: embedInfo?.definition.overrideOutlineRadius ?? 8,
-							background: embedInfo?.definition.backgroundColor ?? 'var(--color-background)',
+							background: embedInfo?.definition.backgroundColor ?? 'var(--tl-color-background)',
 							width: w,
 							height: h,
 						}}

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

@@ -19,6 +19,7 @@ import {
 	compact,
 	frameShapeMigrations,
 	frameShapeProps,
+	getColorValue,
 	getDefaultColorTheme,
 	lerp,
 	resizeBox,
@@ -99,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' }
 	}
@@ -220,13 +225,16 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
 		)
 
 		const showFrameColors = this.options.showColors
-
-		const color = theme[shape.props.color]
-		const frameFill = showFrameColors ? color.frame.fill : theme.black.frame.fill
-		const frameStroke = showFrameColors ? color.frame.stroke : theme.black.frame.stroke
-		const frameHeadingStroke = showFrameColors ? color.frame.headingStroke : theme.background
-		const frameHeadingFill = showFrameColors ? color.frame.headingFill : theme.background
-		const frameHeadingText = showFrameColors ? color.frame.text : theme.text
+		const colorToUse = showFrameColors ? shape.props.color : 'black'
+		const frameFill = getColorValue(theme, colorToUse, 'frameFill')
+		const frameStroke = getColorValue(theme, colorToUse, 'frameStroke')
+		const frameHeadingStroke = showFrameColors
+			? getColorValue(theme, colorToUse, 'frameHeadingStroke')
+			: theme.background
+		const frameHeadingFill = showFrameColors
+			? getColorValue(theme, colorToUse, 'frameHeadingFill')
+			: theme.background
+		const frameHeadingText = getColorValue(theme, colorToUse, 'frameText')
 
 		return (
 			<>
@@ -277,13 +285,16 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
 		const text = createTextJsxFromSpans(this.editor, spans, opts)
 
 		const showFrameColors = this.options.showColors
-
-		const color = theme[shape.props.color]
-		const frameFill = showFrameColors ? color.frame.fill : theme.black.frame.fill
-		const frameStroke = showFrameColors ? color.frame.stroke : theme.black.frame.stroke
-		const frameHeadingStroke = showFrameColors ? color.frame.headingStroke : theme.background
-		const frameHeadingFill = showFrameColors ? color.frame.headingFill : theme.background
-		const frameHeadingText = showFrameColors ? color.frame.text : theme.text
+		const colorToUse = showFrameColors ? shape.props.color : 'black'
+		const frameFill = getColorValue(theme, colorToUse, 'frameFill')
+		const frameStroke = getColorValue(theme, colorToUse, 'frameStroke')
+		const frameHeadingStroke = showFrameColors
+			? getColorValue(theme, colorToUse, 'frameHeadingStroke')
+			: theme.background
+		const frameHeadingFill = showFrameColors
+			? getColorValue(theme, colorToUse, 'frameHeadingFill')
+			: theme.background
+		const frameHeadingText = getColorValue(theme, colorToUse, 'frameText')
 
 		return (
 			<>
@@ -328,6 +339,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/FrameHeading.tsx

@@ -64,7 +64,7 @@ export const FrameHeading = memo(function FrameHeading({
 				overflow: isEditing ? 'visible' : 'hidden',
 				maxWidth: `calc(var(--tl-zoom) * ${
 					side === 0 || side === 2 ? Math.ceil(width) : Math.ceil(height)
-				}px + ${showColors ? '0px' : 'var(--frame-offset-width)'})`,
+				}px + ${showColors ? '0px' : 'var(--tl-frame-offset-width)'})`,
 				bottom: '100%',
 				transform: `${translation} scale(var(--tl-scale)) translateX(${offsetX}px)`,
 			}}

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

@@ -18,6 +18,7 @@ import {
 	exhaustiveSwitchError,
 	geoShapeMigrations,
 	geoShapeProps,
+	getColorValue,
 	getDefaultColorTheme,
 	getFontsFromRichText,
 	isEqual,
@@ -220,7 +221,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 							verticalAlign={verticalAlign}
 							richText={richText}
 							isSelected={isOnlySelected}
-							labelColor={theme[props.labelColor].solid}
+							labelColor={getColorValue(theme, props.labelColor, 'solid')}
 							wrap
 						/>
 					</HTMLContainer>
@@ -278,7 +279,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 					align={props.align}
 					verticalAlign={props.verticalAlign}
 					richText={props.richText}
-					labelColor={theme[props.labelColor].solid}
+					labelColor={getColorValue(theme, props.labelColor, 'solid')}
 					bounds={bounds}
 					padding={LABEL_PADDING}
 				/>

package/src/lib/shapes/geo/components/GeoShapeBody.tsx

@@ -1,4 +1,4 @@
-import { TLGeoShape } from '@tldraw/editor'
+import { getColorValue, TLGeoShape } from '@tldraw/editor'
 import { ShapeFill } from '../../shared/ShapeFill'
 import { STROKE_SIZES } from '../../shared/default-shape-constants'
 import { useDefaultColorTheme } from '../../shared/useDefaultColorTheme'
@@ -33,7 +33,7 @@ export function GeoShapeBody({
 				strokeWidth,
 				forceSolid,
 				randomSeed: shape.id,
-				props: { fill: 'none', stroke: theme[color].solid },
+				props: { fill: 'none', stroke: getColorValue(theme, color, 'solid') },
 			})}
 		</>
 	)

package/src/lib/shapes/highlight/HighlightShapeUtil.tsx

@@ -10,6 +10,7 @@ import {
 	TLHighlightShapeProps,
 	TLResizeInfo,
 	VecLike,
+	getColorValue,
 	highlightShapeMigrations,
 	highlightShapeProps,
 	last,
@@ -289,7 +290,12 @@ function HighlightRenderer({
 			: getShapeDot(shape.props.segments[0].points[0])
 
 	const colorSpace = useColorSpace()
-	const color = theme[shape.props.color].highlight[colorSpace]
+
+	const color = getColorValue(
+		theme,
+		shape.props.color,
+		colorSpace === 'p3' ? 'highlightP3' : 'highlightSrgb'
+	)
 
 	return (
 		<path

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 {
@@ -314,9 +317,9 @@ const ImageShape = memo(function ImageShape({ shape }: { shape: TLImageShape })
 					overflow: 'hidden',
 					width: shape.props.w,
 					height: shape.props.h,
-					color: 'var(--color-text-3)',
-					backgroundColor: 'var(--color-low)',
-					border: '1px solid var(--color-low-border)',
+					color: 'var(--tl-color-text-3)',
+					backgroundColor: 'var(--tl-color-low)',
+					border: '1px solid var(--tl-color-low-border)',
 				}}
 			>
 				<div

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/LineShapeUtil.tsx

@@ -12,6 +12,7 @@ import {
 	WeakCache,
 	ZERO_INDEX_KEY,
 	assert,
+	getColorValue,
 	getIndexAbove,
 	getIndexBetween,
 	getIndices,
@@ -346,6 +347,10 @@ function LineShapeSvg({
 		strokeWidth,
 		forceSolid,
 		randomSeed: shape.id,
-		props: { transform: `scale(${scale})`, stroke: theme[color].solid, fill: 'none' },
+		props: {
+			transform: `scale(${scale})`,
+			stroke: getColorValue(theme, color, 'solid'),
+			fill: 'none',
+		},
 	})
 }

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

@@ -17,6 +17,7 @@ import {
 	Vec,
 	WeakCache,
 	exhaustiveSwitchError,
+	getColorValue,
 	getDefaultColorTheme,
 	getFontsFromRichText,
 	isEqual,
@@ -288,7 +289,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 					style={{
 						width: nw,
 						height: nh,
-						backgroundColor: theme[color].note.fill,
+						backgroundColor: getColorValue(theme, color, 'noteFill'),
 						borderBottom: hideShadows
 							? isDarkMode
 								? `${2 * scale}px solid rgb(20, 20, 20)`
@@ -308,7 +309,11 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 							verticalAlign={verticalAlign}
 							richText={richText}
 							isSelected={isSelected}
-							labelColor={labelColor === 'black' ? theme[color].note.text : theme[labelColor].fill}
+							labelColor={
+								labelColor === 'black'
+									? getColorValue(theme, color, 'noteText')
+									: getColorValue(theme, labelColor, 'fill')
+							}
 							wrap
 							padding={LABEL_PADDING * scale}
 							hasCustomTabBehavior
@@ -343,7 +348,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 				align={shape.props.align}
 				verticalAlign={shape.props.verticalAlign}
 				richText={shape.props.richText}
-				labelColor={theme[shape.props.color].note.text}
+				labelColor={getColorValue(theme, shape.props.color, 'noteText')}
 				bounds={bounds}
 				padding={LABEL_PADDING}
 				showTextOutline={false}
@@ -357,7 +362,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 					rx={1}
 					width={NOTE_SIZE}
 					height={bounds.h}
-					fill={theme[shape.props.color].note.fill}
+					fill={getColorValue(theme, shape.props.color, 'noteFill')}
 				/>
 				{textLabel}
 			</>

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/ShapeFill.tsx

@@ -1,4 +1,5 @@
 import {
+	getColorValue,
 	TLDefaultColorStyle,
 	TLDefaultColorTheme,
 	TLDefaultFillStyle,
@@ -29,13 +30,13 @@ export const ShapeFill = React.memo(function ShapeFill({
 			return null
 		}
 		case 'solid': {
-			return <path fill={theme[color].semi} d={d} />
+			return <path fill={getColorValue(theme, color, 'semi')} d={d} />
 		}
 		case 'semi': {
 			return <path fill={theme.solid} d={d} />
 		}
 		case 'fill': {
-			return <path fill={theme[color].fill} d={d} />
+			return <path fill={getColorValue(theme, color, 'fill')} d={d} />
 		}
 		case 'pattern': {
 			return <PatternFill theme={theme} color={color} fill={fill} d={d} scale={scale} />
@@ -53,13 +54,13 @@ export function PatternFill({ d, color, theme }: ShapeFillProps) {
 
 	return (
 		<>
-			<path fill={theme[color].pattern} d={d} />
+			<path fill={getColorValue(theme, color, 'pattern')} d={d} />
 			<path
 				fill={
 					svgExport
 						? `url(#${getHashPatternZoomName(1, theme.id)})`
 						: teenyTiny
-							? theme[color].semi
+							? getColorValue(theme, color, 'semi')
 							: `url(#${getHashPatternZoomName(zoomLevel, theme.id)})`
 				}
 				d={d}

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

@@ -167,9 +167,3 @@ export function useEditableTextCommon(shapeId: TLShapeId) {
 		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

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

@@ -1,10 +1,20 @@
+import { useMaybeEditor, useValue } from '@tldraw/editor'
 import { useEffect, useState } from 'react'
 
 /** @public */
 export function usePrefersReducedMotion() {
+	const editor = useMaybeEditor()
+	const animationSpeed = useValue('animationSpeed', () => editor?.user.getAnimationSpeed(), [
+		editor,
+	])
 	const [prefersReducedMotion, setPrefersReducedMotion] = useState(false)
 
 	useEffect(() => {
+		if (animationSpeed !== undefined) {
+			setPrefersReducedMotion(animationSpeed === 0 ? true : false)
+			return
+		}
+
 		if (typeof window === 'undefined' || !('matchMedia' in window)) return
 		const mql = window.matchMedia('(prefers-reduced-motion: reduce)')
 		const handler = () => {
@@ -13,7 +23,7 @@ export function usePrefersReducedMotion() {
 		handler()
 		mql.addEventListener('change', handler)
 		return () => mql.removeEventListener('change', handler)
-	}, [])
+	}, [animationSpeed])
 
 	return prefersReducedMotion
 }

package/src/lib/shapes/text/TextShapeTool.test.ts

@@ -1,9 +1,10 @@
 import { DefaultTextAlignStyle, TLTextShape, toRichText } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
 import { TextShapeTool } from './TextShapeTool'
 
 let editor: TestEditor
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 beforeEach(() => {
 	editor = new TestEditor()
@@ -115,7 +116,7 @@ describe('When in the pointing state', () => {
 
 		// Go back to start and wait a little to satisfy the time requirement
 		editor.pointerMove(0, 0)
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 
 		// y axis doesn't matter
 		editor.pointerMove(0, 100)
@@ -187,7 +188,7 @@ describe('When resizing', () => {
 	it('bails on escape while resizing and returns to text.idle', () => {
 		editor.setCurrentTool('text')
 		editor.pointerDown(0, 0)
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 		editor.pointerMove(100, 100)
 		editor.expectToBeIn('select.resizing')
 		editor.cancel()
@@ -198,7 +199,7 @@ describe('When resizing', () => {
 	it('does not bails on interrupt while resizing', () => {
 		editor.setCurrentTool('text')
 		editor.pointerDown(0, 0)
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 		editor.pointerMove(100, 100)
 		editor.expectToBeIn('select.resizing')
 		editor.interrupt()
@@ -210,7 +211,7 @@ describe('When resizing', () => {
 		const x = 0
 		const y = 0
 		editor.pointerDown(x, y)
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 		editor.pointerMove(x + 100, y + 100)
 		expect(editor.getCurrentPageShapes()[0]).toMatchObject({
 			x,

package/src/lib/shapes/text/TextShapeUtil.tsx

@@ -11,6 +11,7 @@ import {
 	TLTextShape,
 	Vec,
 	createComputedCache,
+	getColorValue,
 	getDefaultColorTheme,
 	getFontsFromRichText,
 	isEqual,
@@ -135,7 +136,7 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 				align={textAlign}
 				verticalAlign="middle"
 				richText={richText}
-				labelColor={theme[color].solid}
+				labelColor={getColorValue(theme, color, 'solid')}
 				isSelected={isSelected}
 				textWidth={width}
 				textHeight={height}
@@ -171,7 +172,7 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 				align={shape.props.textAlign}
 				verticalAlign="middle"
 				richText={shape.props.richText}
-				labelColor={theme[shape.props.color].solid}
+				labelColor={getColorValue(theme, shape.props.color, 'solid')}
 				bounds={exportBounds}
 				padding={0}
 			/>

package/src/lib/shapes/video/VideoShapeUtil.tsx

@@ -142,9 +142,9 @@ const VideoShape = memo(function VideoShape({ shape }: { shape: TLVideoShape })
 			<HTMLContainer
 				id={shape.id}
 				style={{
-					color: 'var(--color-text-3)',
-					backgroundColor: asset ? 'transparent' : 'var(--color-low)',
-					border: asset ? 'none' : '1px solid var(--color-low-border)',
+					color: 'var(--tl-color-text-3)',
+					backgroundColor: asset ? 'transparent' : 'var(--tl-color-low)',
+					border: asset ? 'none' : '1px solid var(--tl-color-low-border)',
 				}}
 			>
 				<div className="tl-counter-scaled">

package/src/lib/tools/EraserTool/childStates/Erasing.ts

@@ -4,6 +4,7 @@ import {
 	TLGroupShape,
 	TLPointerEventInfo,
 	TLShapeId,
+	isAccelKey,
 	pointInPolygon,
 } from '@tldraw/editor'
 
@@ -15,7 +16,15 @@ export class Erasing extends StateNode {
 	private markId = ''
 	private excludedShapeIds = new Set<TLShapeId>()
 
+	_isHoldingAccelKey = false
+	_firstErasingShapeId: TLShapeId | null = null
+	_erasingShapeIds: TLShapeId[] = []
+
 	override onEnter(info: TLPointerEventInfo) {
+		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
+		this._firstErasingShapeId = this.editor.getErasingShapeIds()[0] // the first one should be the first one we hit... is it?
+		this._erasingShapeIds = this.editor.getErasingShapeIds()
+
 		this.markId = this.editor.markHistoryStoppingPoint('erase scribble begin')
 		this.info = info
 
@@ -76,6 +85,16 @@ export class Erasing extends StateNode {
 		this.complete()
 	}
 
+	override onKeyUp() {
+		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
+		this.update()
+	}
+
+	override onKeyDown() {
+		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
+		this.update()
+	}
+
 	update() {
 		const { editor, excludedShapeIds } = this
 		const erasingShapeIds = editor.getErasingShapeIds()
@@ -87,6 +106,7 @@ export class Erasing extends StateNode {
 
 		this.pushPointToScribble()
 
+		// Otherwise, erasing shapes are all the shapes that were hit before plus any new shapes that are hit
 		const erasing = new Set<TLShapeId>(erasingShapeIds)
 		const minDist = this.editor.options.hitTestMargin / zoomLevel
 
@@ -121,18 +141,31 @@ export class Erasing extends StateNode {
 			if (geometry.hitTestLineSegment(A, B, minDist)) {
 				erasing.add(editor.getOutermostSelectableShape(shape).id)
 			}
+
+			this._erasingShapeIds = [...erasing]
+		}
+
+		// If the user is holding the meta / ctrl key, we should only erase the first shape we hit
+		if (this._isHoldingAccelKey && this._firstErasingShapeId) {
+			const erasingShapeId = this._firstErasingShapeId
+			if (erasingShapeId && this.editor.getShape(erasingShapeId)) {
+				editor.setErasingShapes([erasingShapeId])
+			}
+			return
 		}
 
 		// Remove the hit shapes, except if they're in the list of excluded shapes
 		// (these excluded shapes will be any frames or groups the pointer was inside of
 		// when the user started erasing)
-		this.editor.setErasingShapes([...erasing].filter((id) => !excludedShapeIds.has(id)))
+		this.editor.setErasingShapes(this._erasingShapeIds.filter((id) => !excludedShapeIds.has(id)))
 	}
 
 	complete() {
 		const { editor } = this
 		editor.deleteShapes(editor.getCurrentPageState().erasingShapeIds)
 		this.parent.transition('idle')
+		this._erasingShapeIds = []
+		this._firstErasingShapeId = null
 	}
 
 	cancel() {