tldraw 5.2.0-next.e2b8d10bf10e → 5.2.0

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

@@ -10,6 +10,7 @@ import {
 	TLHighlightShapeProps,
 	TLResizeInfo,
 	VecLike,
+	b64Vecs,
 	debugFlags,
 	getColorValue,
 	highlightShapeMigrations,
@@ -23,9 +24,8 @@ import {
 } from '@tldraw/editor'
 import { getHighlightFreehandSettings, getPointsFromDrawSegments } from '../draw/getPath'
 import { FONT_SIZES } from '../shared/default-shape-constants'
-import { getStrokeOutlinePoints } from '../shared/freehand/getStrokeOutlinePoints'
+import { getStroke } from '../shared/freehand/getStroke'
 import { getStrokePoints } from '../shared/freehand/getStrokePoints'
-import { setStrokePointRadii } from '../shared/freehand/setStrokePointRadii'
 import { getSvgPathFromStrokePoints } from '../shared/freehand/svg'
 import type { ShapeOptionsWithDisplayValues } from '../shared/getDisplayValues'
 import { getDisplayValues } from '../shared/getDisplayValues'
@@ -113,12 +113,16 @@ export class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
 			})
 		}
 
-		const { strokePoints, sw } = getHighlightStrokePoints(shape, strokeWidth, true)
-		const opts = getHighlightFreehandSettings({ strokeWidth: sw, showAsComplete: true })
-		setStrokePointRadii(strokePoints, opts)
+		const allPointsFromSegments = getPointsFromDrawSegments(
+			shape.props.segments,
+			shape.props.scaleX,
+			shape.props.scaleY
+		)
+		const showAsComplete = shape.props.isComplete || last(shape.props.segments)?.type === 'straight'
+		const opts = getHighlightFreehandSettings({ strokeWidth, showAsComplete })
 
 		return new Polygon2d({
-			points: getStrokeOutlinePoints(strokePoints, opts),
+			points: getStroke(allPointsFromSegments, opts),
 			isFilled: true,
 		})
 	}
@@ -286,11 +290,10 @@ function getHighlightStrokePoints(
 }
 
 function getIsDot(shape: TLHighlightShape) {
-	// First point is 16 base64 chars (3 Float32s = 12 bytes)
-	// Each delta point is 8 base64 chars (3 Float16s = 6 bytes)
-	// 1 point = 16 chars, 2 points = 24 chars
-	// Check if we have less than 2 points without decoding
-	return shape.props.segments.length === 1 && shape.props.segments[0].path.length < 24
+	// A dot is a single-point segment. isSinglePoint knows the per-encoding length
+	// (and takes the segment's dim), so this stays correct for both 2D and 3D paths.
+	const segment = shape.props.segments[0]
+	return shape.props.segments.length === 1 && b64Vecs.isSinglePoint(segment.path, segment.dim)
 }
 
 function HighlightRenderer({

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

@@ -170,7 +170,7 @@ export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
 	override onResize(shape: TLImageShape, info: TLResizeInfo<TLImageShape>) {
 		let resized: TLImageShape = resizeBox(shape, info)
 		const { flipX, flipY } = info.initialShape.props
-		const { scaleX, scaleY, mode } = info
+		const { scaleX, scaleY } = info
 
 		resized = {
 			...resized,
@@ -182,16 +182,12 @@ export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
 		}
 		if (!shape.props.crop) return resized
 
-		const flipCropHorizontally =
-			// We used the flip horizontally feature
-			(mode === 'scale_shape' && scaleX === -1) ||
-			// We resized the shape past it's bounds, so it flipped
-			(mode === 'resize_bounds' && flipX !== resized.props.flipX)
-		const flipCropVertically =
-			// We used the flip vertically feature
-			(mode === 'scale_shape' && scaleY === -1) ||
-			// We resized the shape past it's bounds, so it flipped
-			(mode === 'resize_bounds' && flipY !== resized.props.flipY)
+		// Mirror the crop whenever the shape is flipped along an axis. This happens both when
+		// using the flip command and when dragging a resize handle (including a group's handle)
+		// past the opposite edge. We can't check for an exact scale of -1 here because a group
+		// flip resizes its children by an arbitrary negative scale, not just -1.
+		const flipCropHorizontally = scaleX < 0
+		const flipCropVertically = scaleY < 0
 
 		const { topLeft, bottomRight } = shape.props.crop
 		resized.props.crop = {

package/src/lib/shapes/line/LineShapeTool.test.ts

@@ -205,6 +205,47 @@ describe('When extending the line with the shift-key in tool-lock mode', () => {
 	})
 })
 
+describe('minimum bend distance for shift-clicked handles is measured in screen space', () => {
+	// regression for #7661: minimum bend distance for shift-clicked handles is measured in screen space
+	// Creates a two-point line whose end handle sits at screen point (200, 200), the
+	// camera being static so the handle's screen position matches the pointer-up location.
+	function createTwoPointLine() {
+		editor
+			.setCurrentTool('line')
+			.pointerDown(100, 100, { target: 'canvas' })
+			.pointerMove(200, 200)
+			.pointerUp(200, 200)
+	}
+
+	beforeEach(() => {
+		editor.updateInstanceState({ isToolLocked: true })
+	})
+
+	it('adds a point when the click is more than 2 screen pixels away while zoomed in', () => {
+		editor.setCamera({ x: 0, y: 0, z: 4 })
+		createTwoPointLine()
+		// 4 screen pixels from the end handle: past the 2px screen threshold, but only 1
+		// page unit — under the old page-space threshold this would have merged.
+		editor.keyDown('Shift').pointerDown(204, 200, { target: 'canvas' }).pointerUp(204, 200)
+
+		const line = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
+		assert(editor.isShapeOfType(line, 'line'))
+		expect(Object.keys(line.props.points).length).toBe(3)
+	})
+
+	it('merges the click when within 2 screen pixels while zoomed out', () => {
+		editor.setCamera({ x: 0, y: 0, z: 0.25 })
+		createTwoPointLine()
+		// 1 screen pixel from the end handle: within the 2px screen threshold, but 4 page
+		// units — under the old page-space threshold this would have added a point.
+		editor.keyDown('Shift').pointerDown(201, 200, { target: 'canvas' }).pointerUp(201, 200)
+
+		const line = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
+		assert(editor.isShapeOfType(line, 'line'))
+		expect(Object.keys(line.props.points).length).toBe(2)
+	})
+})
+
 describe('tool lock bug', () => {
 	it('works as expected when tool lock is on but shift is off', () => {
 		expect(editor.getCurrentPageShapes().length).toBe(0)

package/src/lib/shapes/line/toolStates/Pointing.ts

@@ -6,12 +6,14 @@ import {
 	Vec,
 	createShapeId,
 	getIndexAbove,
+	cancelShapeCreationOnLongPress,
 	last,
 	maybeSnapToGrid,
 	sortByIndex,
 	structuredClone,
 } from '@tldraw/editor'
 
+// Minimum distance, in screen pixels, between two shift-clicked handles before we merge them
 const MINIMUM_DISTANCE_BETWEEN_SHIFT_CLICKED_HANDLES = 2
 
 export class Pointing extends StateNode {
@@ -51,9 +53,13 @@ export class Pointing extends StateNode {
 			const nextPoint = maybeSnapToGrid(nudgedPoint, this.editor)
 			const points = structuredClone(this.shape.props.points)
 
+			// compare in screen space
+			const minDistance =
+				MINIMUM_DISTANCE_BETWEEN_SHIFT_CLICKED_HANDLES / this.editor.getZoomLevel()
+
 			if (
-				Vec.DistMin(endHandle, prevEndHandle, MINIMUM_DISTANCE_BETWEEN_SHIFT_CLICKED_HANDLES) ||
-				Vec.DistMin(nextPoint, endHandle, MINIMUM_DISTANCE_BETWEEN_SHIFT_CLICKED_HANDLES)
+				Vec.DistMin(endHandle, prevEndHandle, minDistance) ||
+				Vec.DistMin(nextPoint, endHandle, minDistance)
 			) {
 				// Don't add a new point if the distance between the last two points is too small
 				points[endHandle.id] = {
@@ -136,6 +142,10 @@ export class Pointing extends StateNode {
 		this.complete()
 	}
 
+	override onLongPress() {
+		cancelShapeCreationOnLongPress(this.editor, () => this.cancel())
+	}
+
 	override onCancel() {
 		this.cancel()
 	}

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

@@ -1,9 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import {
 	Box,
-	DefaultFontFamilies,
 	EMPTY_ARRAY,
-	Editor,
 	Group2d,
 	IndexKey,
 	Rectangle2d,
@@ -26,6 +24,7 @@ import {
 	noteShapeMigrations,
 	noteShapeProps,
 	resizeScaled,
+	resolveLineHeightPx,
 	rng,
 	toRichText,
 	useColorMode,
@@ -179,7 +178,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 			fontSizeAdjustment: 1,
 			url: '',
 			scale: 1,
-			textFirstEditedBy: null,
+			textLastEditedBy: null,
 		}
 	}
 
@@ -297,7 +296,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 	}
 
 	override getReferencedUserIds(shape: TLNoteShape) {
-		return shape.props.textFirstEditedBy ? [shape.props.textFirstEditedBy] : []
+		return shape.props.textLastEditedBy ? [shape.props.textLastEditedBy] : []
 	}
 
 	override getFontFaces(shape: TLNoteShape) {
@@ -309,7 +308,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 					style: 'normal',
 				})
 
-		if (shape.props.textFirstEditedBy && !isEmptyRichText(shape.props.richText)) {
+		if (shape.props.textLastEditedBy && !isEmptyRichText(shape.props.richText)) {
 			return [...fonts, DefaultFontFaces.tldraw_sans.normal.normal]
 		}
 		const themeFaces = getThemeFontFaces(this.editor.getCurrentTheme(), shape.props.font)
@@ -320,7 +319,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 
 	component(shape: TLNoteShape) {
 		const { id, type, props } = shape
-		const { scale, richText, fontSizeAdjustment, textFirstEditedBy } = props
+		const { scale, richText, fontSizeAdjustment, textLastEditedBy } = props
 
 		const handleKeyDown = useNoteKeydownHandler(id)
 
@@ -347,12 +346,12 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 		const attribution = useValue(
 			'attribution',
 			() => {
-				if (!textFirstEditedBy || isEmpty) return null
-				const name = this.editor.getAttributionDisplayName(textFirstEditedBy)
+				if (!textLastEditedBy || isEmpty) return null
+				const name = this.editor.getAttributionDisplayName(textLastEditedBy)
 				if (!name) return null
 				return { short: name.split(' ')[0], full: name }
 			},
-			[textFirstEditedBy, isEmpty, this.editor]
+			[textLastEditedBy, isEmpty, this.editor]
 		)
 
 		return (
@@ -459,14 +458,11 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 			),
 		})
 
-		const { textFirstEditedBy } = shape.props
-		const attributionFirstName =
-			textFirstEditedBy && !isEmptyRichText(shape.props.richText)
-				? this.editor.getAttributionDisplayName(textFirstEditedBy)?.split(' ')[0]
+		const { textLastEditedBy } = shape.props
+		const attributionName =
+			textLastEditedBy && !isEmptyRichText(shape.props.richText)
+				? (this.editor.getAttributionDisplayName(textLastEditedBy)?.split(' ')[0] ?? null)
 				: null
-		const attributionName = attributionFirstName
-			? truncateAttributionForSvg(this.editor, attributionFirstName, dv.noteWidth)
-			: null
 
 		return (
 			<>
@@ -493,17 +489,26 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 					showTextOutline={false}
 				/>
 				{attributionName && (
-					<text
-						x={dv.noteWidth - 8}
-						y={bounds.h - 6}
-						textAnchor="end"
-						fontFamily={DefaultFontFamilies['sans']}
-						fontSize={11}
-						fill={dv.labelColor}
-						opacity={0.6}
+					<foreignObject
+						x={0}
+						y={0}
+						width={dv.noteWidth}
+						height={bounds.h}
+						className="tl-export-embed-styles"
 					>
-						{attributionName}
-					</text>
+						<div style={{ position: 'relative', width: '100%', height: '100%' }}>
+							<div
+								className="tl-note__attribution"
+								style={{
+									fontSize: 11,
+									color: dv.labelColor,
+									opacity: 0.6,
+								}}
+							>
+								{attributionName}
+							</div>
+						</div>
+					</foreignObject>
 				)}
 			</>
 		)
@@ -529,12 +534,12 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 			if (isEmptyRichText(next.props.richText)) {
 				shape = {
 					...shape,
-					props: { ...shape.props, textFirstEditedBy: null },
+					props: { ...shape.props, textLastEditedBy: null },
 				}
-			} else if (!prev.props.textFirstEditedBy) {
+			} else {
 				shape = {
 					...shape,
-					props: { ...shape.props, textFirstEditedBy: this.editor.getAttributionUserId() },
+					props: { ...shape.props, textLastEditedBy: this.editor.getAttributionUserId() },
 				}
 			}
 		}
@@ -596,7 +601,8 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 		const { richText } = shape.props
 
 		if (isEmptyRichText(richText)) {
-			const minHeight = dv.labelFontSize * dv.labelLineHeight + dv.labelPadding * 2
+			const minHeight =
+				resolveLineHeightPx(dv.labelFontSize, dv.labelLineHeight) + dv.labelPadding * 2
 			return { labelHeight: minHeight, labelWidth: 100, fontSizeAdjustment: 1 }
 		}
 
@@ -737,27 +743,6 @@ function getNoteHeight(shape: TLNoteShape, noteHeight: number) {
 	return (noteHeight + shape.props.growY) * shape.props.scale
 }
 
-// Matches `.tl-note__attribution { max-width: 60% }` so SVG export truncates the same way.
-const ATTRIBUTION_MAX_WIDTH_RATIO = 0.6
-
-function truncateAttributionForSvg(editor: Editor, name: string, noteWidth: number) {
-	if (process.env.NODE_ENV === 'test') return name
-	const spans = editor.textMeasure.measureTextSpans(name, {
-		fontSize: 11,
-		fontFamily: DefaultFontFamilies['sans'],
-		textAlign: 'end',
-		width: noteWidth * ATTRIBUTION_MAX_WIDTH_RATIO,
-		height: 16,
-		padding: 0,
-		lineHeight: 1,
-		fontStyle: 'normal',
-		fontWeight: 'normal',
-		overflow: 'truncate-ellipsis',
-	})
-	if (spans.length === 0) return name
-	return spans.map((s) => s.text).join('')
-}
-
 function getNoteShadow(id: string, rotation: number, scale: number) {
 	const random = rng(id) // seeded based on id
 	const lift = Math.abs(random()) + 0.5 // 0 to 1.5

package/src/lib/shapes/note/noteCloning.test.ts

@@ -241,11 +241,11 @@ describe('Clone handles and attribution', () => {
 		})
 		const updated = editor.getShape<TLNoteShape>(shape.id)!
 		// Sanity check - the source note has attribution set
-		expect(updated.props.textFirstEditedBy).not.toBeNull()
+		expect(updated.props.textLastEditedBy).not.toBeNull()
 		return updated
 	}
 
-	it('Does not preserve textFirstEditedBy when creating an adjacent note via click', () => {
+	it('Does not preserve textLastEditedBy when creating an adjacent note via click', () => {
 		const shape = createNoteWithAttribution()
 
 		editor.select(shape.id)
@@ -261,10 +261,10 @@ describe('Clone handles and attribution', () => {
 
 		const newShape = editor.getLastCreatedShape<TLNoteShape>()
 		expect(newShape.id).not.toBe(shape.id)
-		expect(newShape.props.textFirstEditedBy).toBeNull()
+		expect(newShape.props.textLastEditedBy).toBeNull()
 	})
 
-	it('Does not preserve textFirstEditedBy when creating an adjacent note via drag', () => {
+	it('Does not preserve textLastEditedBy when creating an adjacent note via drag', () => {
 		const shape = createNoteWithAttribution()
 
 		editor.select(shape.id)
@@ -282,7 +282,7 @@ describe('Clone handles and attribution', () => {
 
 		const newShape = editor.getLastCreatedShape<TLNoteShape>()
 		expect(newShape.id).not.toBe(shape.id)
-		expect(newShape.props.textFirstEditedBy).toBeNull()
+		expect(newShape.props.textLastEditedBy).toBeNull()
 
 		editor.pointerUp()
 	})

package/src/lib/shapes/note/noteHelpers.ts

@@ -232,7 +232,7 @@ export function getNoteShapeForAdjacentPosition(
 				growY: 0,
 				fontSizeAdjustment: 1,
 				url: '',
-				textFirstEditedBy: null,
+				textLastEditedBy: null,
 			},
 		})
 

package/src/lib/shapes/note/toolStates/Pointing.ts

@@ -6,6 +6,7 @@ import {
 	TLShapeId,
 	Vec,
 	createShapeId,
+	cancelShapeCreationOnLongPress,
 	maybeSnapToGrid,
 } from '@tldraw/editor'
 import { startEditingShapeWithRichText } from '../../../tools/SelectTool/selectHelpers'
@@ -27,33 +28,57 @@ export class Pointing extends StateNode {
 
 	shape = {} as TLNoteShape
 
+	private shapeId!: TLShapeId
+
+	private shapeCenter = new Vec()
+
+	private hasCreatedShape = false
+
 	override onEnter() {
 		const { editor } = this
 
-		const id = createShapeId()
-		this.markId = editor.markHistoryStoppingPoint(`creating_note:${id}`)
+		this.hasCreatedShape = false
+		this.shapeId = createShapeId()
+		this.markId = editor.markHistoryStoppingPoint(`creating_note:${this.shapeId}`)
 
 		// Resolve note dimensions from the util's defaults
 		const noteUtil = editor.getShapeUtil('note') as NoteShapeUtil
 		const dv = getDisplayValues(noteUtil, { props: noteUtil.getDefaultProps() } as TLNoteShape)
 
 		// Check for note pits; if the pointer is close to one, place the note centered on the pit
-		const center = this.editor.inputs.getOriginPagePoint().clone()
+		const center = editor.inputs.getOriginPagePoint().clone()
 		const offset = getNoteShapeAdjacentPositionOffset(
-			this.editor,
+			editor,
 			center,
-			this.editor.getResizeScaleFactor(),
+			editor.getResizeScaleFactor(),
 			dv.noteWidth,
 			dv.noteHeight
 		)
 		if (offset) {
 			center.sub(offset)
 		}
+		this.shapeCenter = center
+
+		// On a coarse pointer, defer creating the note until the gesture commits (a
+		// drag or a release). The note is created on press, and a long-press cancels
+		// the pending creation, so without deferral the note appears on press and
+		// vanishes at the long-press mark — a visible flash. On a fine pointer there
+		// is no long-press cancel, so create immediately to keep the press-and-drag feel.
+		if (!editor.getInstanceState().isCoarsePointer) {
+			this.ensureShapeCreated()
+		}
+	}
+
+	// Create the note now if it hasn't been created yet (idempotent). The deferred
+	// drag and release paths route through here; a max-shapes failure cancels the
+	// gesture, matching the original onEnter behaviour.
+	private ensureShapeCreated() {
+		if (this.hasCreatedShape) return
 
-		// Allow this to trigger the max shapes reached alert
-		const shape = createNoteShape(this.editor, id, center)
+		const shape = createNoteShape(this.editor, this.shapeId, this.shapeCenter)
 		if (shape) {
 			this.shape = shape
+			this.hasCreatedShape = true
 		} else {
 			this.cancel()
 		}
@@ -61,6 +86,8 @@ export class Pointing extends StateNode {
 
 	override onPointerMove(info: TLPointerEventInfo) {
 		if (this.editor.inputs.getIsDragging()) {
+			this.ensureShapeCreated()
+			if (!this.hasCreatedShape) return
 			this.editor.setCurrentTool('select.translating', {
 				...info,
 				target: 'shape',
@@ -79,6 +106,10 @@ export class Pointing extends StateNode {
 		this.complete()
 	}
 
+	override onLongPress() {
+		cancelShapeCreationOnLongPress(this.editor, () => this.cancel())
+	}
+
 	override onInterrupt() {
 		this.cancel()
 	}
@@ -92,6 +123,8 @@ export class Pointing extends StateNode {
 	}
 
 	private complete() {
+		this.ensureShapeCreated()
+		if (!this.hasCreatedShape) return
 		if (this.editor.getInstanceState().isToolLocked) {
 			this.parent.transition('idle')
 		} else {

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

@@ -1,4 +1,4 @@
-import { Box, ExtractShapeByProps, TLShapeId } from '@tldraw/editor'
+import { Box, ExtractShapeByProps, TLShapeId, resolveLineHeightPx } from '@tldraw/editor'
 import classNames from 'classnames'
 import React from 'react'
 import { PlainTextArea } from '../text/PlainTextArea'
@@ -105,8 +105,8 @@ export const PlainTextLabel = React.memo(function PlainTextLabel({
 				className={`${cssPrefix}-label__inner tl-text-content__wrapper`}
 				style={{
 					fontSize,
-					lineHeight: lineHeight.toString(),
-					minHeight: Math.floor(fontSize * lineHeight) + 'px',
+					lineHeight: `${resolveLineHeightPx(fontSize, lineHeight)}px`,
+					minHeight: `${resolveLineHeightPx(fontSize, lineHeight)}px`,
 					minWidth: Math.ceil(textWidth || 0),
 					color: labelColor,
 					width: textWidth ? Math.ceil(textWidth) : undefined,

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

@@ -6,6 +6,7 @@ import {
 	TLShapeId,
 	openWindow,
 	preventDefault,
+	resolveLineHeightPx,
 	useEditor,
 	useReactor,
 	useValue,
@@ -161,8 +162,8 @@ export const RichTextLabel = React.memo(function RichTextLabel({
 				className={`${cssPrefix}-label__inner tl-text-content__wrapper`}
 				style={{
 					fontSize,
-					lineHeight: lineHeight.toString(),
-					minHeight: Math.floor(fontSize * lineHeight) + 'px',
+					lineHeight: `${resolveLineHeightPx(fontSize, lineHeight)}px`,
+					minHeight: `${resolveLineHeightPx(fontSize, lineHeight)}px`,
 					minWidth: Math.ceil(textWidth || 0),
 					color: labelColor,
 					width: textWidth ? Math.ceil(textWidth) : undefined,
@@ -254,7 +255,7 @@ export function RichTextSVG({
 		fontSize: `${fontSize}px`,
 		wrap: wrap ? 'wrap' : 'nowrap',
 		color: labelColor,
-		lineHeight,
+		lineHeight: `${resolveLineHeightPx(fontSize, lineHeight)}px`,
 		textAlign,
 		width: '100%',
 		wordWrap: 'break-word' as const,

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

@@ -74,7 +74,10 @@ const generateImage = (dpr: number, currentZoom: number, solid: string) => {
 		canvasEl.height = size
 
 		const ctx = canvasEl.getContext('2d')
-		if (!ctx) return
+		if (!ctx) {
+			reject()
+			return
+		}
 
 		ctx.fillStyle = solid
 		ctx.fillRect(0, 0, size, size)
@@ -109,6 +112,25 @@ const generateImage = (dpr: number, currentZoom: number, solid: string) => {
 	})
 }
 
+// Generating the pattern images is expensive (canvas draw + encode), but the result only depends
+// on the device pixel ratio, zoom level, and solid color. Cache the blobs at the module level so
+// the work is done once and reused across editor mounts and instances. Object URLs are still
+// created and revoked per-instance; only the underlying blobs are shared.
+const patternImageBlobCache = new Map<string, Promise<Blob>>()
+
+function getPatternImageBlob(dpr: number, zoom: number, solid: string): Promise<Blob> {
+	const key = `${dpr}_${zoom}_${solid}`
+	let blob = patternImageBlobCache.get(key)
+	if (!blob) {
+		blob = generateImage(dpr, zoom, solid)
+		// Don't keep a rejected promise around (e.g. the throwToBlob debug flag), so a later call
+		// can retry once the failure condition is gone.
+		blob.catch(() => patternImageBlobCache.delete(key))
+		patternImageBlobCache.set(key, blob)
+	}
+	return blob
+}
+
 const canvasBlob = (size: [number, number], fn: (ctx: CanvasRenderingContext2D) => void) => {
 	const canvas = getGlobalDocument().createElement('canvas')
 	canvas.width = size[0]
@@ -208,12 +230,12 @@ function usePattern() {
 
 		const promise = Promise.all(
 			getPatternLodsToGenerate(maxEffectiveZoom).flatMap<Promise<PatternDef>>((zoom) => [
-				generateImage(dpr, zoom, lightSolid).then((blob) => ({
+				getPatternImageBlob(dpr, zoom, lightSolid).then((blob) => ({
 					zoom,
 					theme: 'light',
 					url: URL.createObjectURL(blob),
 				})),
-				generateImage(dpr, zoom, darkSolid).then((blob) => ({
+				getPatternImageBlob(dpr, zoom, darkSolid).then((blob) => ({
 					zoom,
 					theme: 'dark',
 					url: URL.createObjectURL(blob),