@tldraw/editor 5.4.1 → 5.5.0-canary.003bf5951274

package/src/lib/exports/getSvgAsImage.ts

@@ -145,7 +145,13 @@ function measureContentBounds(
 	// (extraPx * 2 >= w means declaredRight <= declaredLeft, producing zero/negative crop)
 	if (extraPx <= 0 || extraPx * 2 >= w || extraPx * 2 >= h) return null
 
-	const imageData = ctx.getImageData(0, 0, w, h)
+	let imageData: ImageData
+	try {
+		imageData = ctx.getImageData(0, 0, w, h)
+	} catch {
+		// a tainted or unallocatable canvas can't be measured; export untrimmed rather than fail
+		return null
+	}
 	const data = imageData.data
 
 	// Determine how to detect "empty" pixels.
@@ -302,9 +308,11 @@ export async function trimSvgToContent(
 
 	if (trimPadding <= 0) return null
 
-	// Render SVG to a temporary canvas at 1:1 pixel ratio
-	const canvasWidth = Math.floor(width)
-	const canvasHeight = Math.floor(height)
+	// Render SVG to a temporary canvas at 1:1 pixel ratio, clamped like the raster path so a
+	// large export doesn't exceed the browser's canvas limits
+	let [canvasWidth, canvasHeight] = clampToBrowserMaxCanvasSize(width, height)
+	canvasWidth = Math.floor(canvasWidth)
+	canvasHeight = Math.floor(canvasHeight)
 
 	if (canvasWidth <= 0 || canvasHeight <= 0) return null
 
@@ -313,7 +321,7 @@ export async function trimSvgToContent(
 	if (!canvas) return null
 
 	// Measure content bounds on the canvas
-	const trimPaddingPx = trimPadding * scale
+	const trimPaddingPx = trimPadding * scale * (canvasWidth / width)
 	const bounds = measureContentBounds(canvas, trimPaddingPx)
 	if (!bounds) return null
 

package/src/lib/exports/getSvgJsx.test.ts

@@ -1,4 +1,13 @@
-import { Geometry2d, RecordProps, Rectangle2d, ShapeUtil, T, TLShape, createShapeId } from '../..'
+import {
+	BaseFrameLikeShapeUtil,
+	Geometry2d,
+	RecordProps,
+	Rectangle2d,
+	ShapeUtil,
+	T,
+	TLShape,
+	createShapeId,
+} from '../..'
 import { createTLStore } from '../config/createTLStore'
 import { Editor } from '../editor/Editor'
 import { Box } from '../primitives/Box'
@@ -861,3 +870,36 @@ describe('getExportDefaultBounds', () => {
 		})
 	})
 })
+
+// Deliberately not registered in TLGlobalShapePropsMap (test-only types leak into the api report)
+const FRAME_LIKE_TYPE = 'test-frame-like'
+
+class FrameLikeShape extends BaseFrameLikeShapeUtil<any> {
+	static override type = FRAME_LIKE_TYPE
+	static override props = { w: T.number, h: T.number }
+	getDefaultProps() {
+		return { w: 100, h: 100 }
+	}
+	getIndicatorPath() {
+		return undefined
+	}
+	component() {}
+}
+
+describe('exporting a single frame-like shape', () => {
+	it('does not need the default frame shape util to be registered', async () => {
+		const editor = new Editor({
+			shapeUtils: [FrameLikeShape],
+			bindingUtils: [],
+			tools: [],
+			store: createTLStore({ shapeUtils: [FrameLikeShape], bindingUtils: [] }),
+			getContainer: () => document.body,
+		})
+		const id = createShapeId('frame-like')
+		editor.createShape({ id, type: FRAME_LIKE_TYPE, x: 0, y: 0, props: { w: 100, h: 100 } } as any)
+
+		const result = await editor.getSvgElement([id], { background: true })
+		expect(result?.svg.style.backgroundColor).not.toBe('')
+		expect(result?.svg.style.backgroundColor).not.toBe('transparent')
+	})
+})

package/src/lib/exports/getSvgJsx.tsx

@@ -1,5 +1,5 @@
 import { useAtom, useValue } from '@tldraw/state-react'
-import { TLFrameShape, TLShape, TLShapeId } from '@tldraw/tlschema'
+import { DefaultColorStyle, TLShape, TLShapeId } from '@tldraw/tlschema'
 import { TLFontFace } from '@tldraw/tlschema'
 import { hasOwnProperty, promiseWithResolve, uniqueId } from '@tldraw/utils'
 import {
@@ -117,6 +117,7 @@ export function getSvgJsx(editor: Editor, ids: TLShapeId[], opts: TLImageExportO
 			colorMode={colorMode}
 			renderingShapes={renderingShapes}
 			onMount={initialEffectPromise.resolve}
+			onError={exportDelay.fail}
 			waitUntil={exportDelay.waitUntil}
 		>
 			{}
@@ -208,6 +209,7 @@ function SvgExport({
 	colorMode,
 	renderingShapes,
 	onMount,
+	onError,
 	waitUntil,
 }: {
 	editor: Editor
@@ -221,6 +223,7 @@ function SvgExport({
 	colorMode: 'light' | 'dark'
 	renderingShapes: TLRenderingShape[]
 	onMount(): void
+	onError(error: unknown): void
 	waitUntil(promise: Promise<void>): void
 }) {
 	const masksId = useUniqueSafeId()
@@ -283,6 +286,8 @@ function SvgExport({
 			throw new Error('SvgExport should only render once - do not use with react strict mode')
 		}
 		didRenderRef.current = true
+		// the promise is caught at the end: a throwing `toSvg` would otherwise leave `onMount`
+		// pending forever, so the export would wait out its max delay and snapshot an empty svg
 		;(async () => {
 			const shapeDefs: Record<string, { pending: false; element: ReactElement }> = {}
 
@@ -418,8 +423,17 @@ function SvgExport({
 					defsById: { ...state.defsById, ...shapeDefs },
 				}))
 			})
-		})()
-	}, [bbox, editor, exportContext, masksId, renderingShapes, singleFrameShapeId, stateAtom])
+		})().catch(onError)
+	}, [
+		bbox,
+		editor,
+		exportContext,
+		masksId,
+		onError,
+		renderingShapes,
+		singleFrameShapeId,
+		stateAtom,
+	])
 
 	useEffect(() => {
 		const fontsInUse = new Set<TLFontFace>()
@@ -449,19 +463,17 @@ function SvgExport({
 	let backgroundColor = background ? colors.background : 'transparent'
 
 	if (singleFrameShapeId && background) {
-		const frameShapeUtil = editor.getShapeUtil('frame') as any as
-			| undefined
-			| {
-					options: {
-						showColors: boolean
-					}
-			  }
-		if (frameShapeUtil?.options.showColors) {
-			const shape = editor.getShape(singleFrameShapeId)! as TLFrameShape
-			backgroundColor = getColorValue(colors, shape.props.color, 'frameFill')
-		} else {
-			backgroundColor = colors.solid
-		}
+		// the frame-like shape's own util decides this - it may not be the default 'frame' util
+		const shape = editor.getShape(singleFrameShapeId)!
+		const { showColors } = editor.getShapeUtil(shape).options as { showColors?: boolean }
+		// the color style may live under any prop key, so look it up through the style map and
+		// fall back to a literal `color` prop for frame-like shapes that don't use the style
+		const color = showColors
+			? (editor.getShapeStyleIfExists(shape, DefaultColorStyle) ??
+				('color' in shape.props ? shape.props.color : null))
+			: null
+		backgroundColor =
+			typeof color === 'string' ? getColorValue(colors, color, 'frameFill') : colors.solid
 	}
 
 	return (

package/src/lib/exports/parseCss.test.ts

@@ -119,6 +119,10 @@ test('parseCss', () => {
 		    },
 		  ],
 		  "imports": [
+		    {
+		      "extras": "",
+		      "url": "https://example.com/font.css",
+		    },
 		    {
 		      "extras": " screen and (min-width: 900px)",
 		      "url": "thing.css",

package/src/lib/exports/parseCss.ts

@@ -2,7 +2,7 @@ import { safeParseUrl } from '@tldraw/utils'
 
 export interface ParsedFontFace {
 	fontFace: string
-	urls: { original: string; resolved: string | null; embedded?: Promise<string | null> }[]
+	urls: { original: string; resolved: string | null }[]
 	fontFamilies: Set<string>
 }
 
@@ -18,7 +18,7 @@ export interface ParsedFontFace {
 // Parse @import declarations:
 // https://developer.mozilla.org/en-US/docs/Web/CSS/@import#formal_syntax
 const importsRegex =
-	/@import\s+(?:"([^"]+)"|'([^']+)'|url\s*\(\s*(?:"([^"]+)"|'([^']+)'|([^'")]+))\s*\))([^;]+);/gi
+	/@import\s+(?:"([^"]+)"|'([^']+)'|url\s*\(\s*(?:"([^"]+)"|'([^']+)'|([^'")]+))\s*\))([^;]*);/gi
 
 // Locate @font-face declarations:
 const fontFaceRegex = /@font-face\s*{([^}]+)}/gi

package/src/lib/hooks/EditorComponentsContext.tsx

@@ -5,6 +5,7 @@ import type { TLErrorFallbackComponent } from '../components/default-components/
 import type { TLGridProps } from '../components/default-components/DefaultGrid'
 import type { TLShapeErrorFallbackComponent } from '../components/default-components/DefaultShapeErrorFallback'
 import type { TLShapeWrapperProps } from '../components/default-components/DefaultShapeWrapper'
+import type { TLSpinnerProps } from '../components/default-components/DefaultSpinner'
 
 /** @public */
 export interface TLEditorComponents {
@@ -16,7 +17,7 @@ export interface TLEditorComponents {
 	LoadingScreen?: ComponentType | null
 	OnTheCanvas?: ComponentType | null
 	ShapeWrapper?: ComponentType<TLShapeWrapperProps & RefAttributes<HTMLDivElement>> | null
-	Spinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null
+	Spinner?: ComponentType<TLSpinnerProps> | null
 	SvgDefs?: ComponentType | null
 
 	// These will always have defaults

package/src/lib/hooks/useCanvasEvents.ts

@@ -19,6 +19,9 @@ export function useCanvasEvents() {
 	const events = useMemo(
 		function canvasEvents() {
 			let isSecondaryClickPointerDown = false
+			// The button each accepted press started with, by pointer id. pointercancel
+			// reports button -1, so the synthetic pointer_up needs the original.
+			const pointerDownButtons = new Map<number, number>()
 
 			function onPointerDown(e: React.PointerEvent) {
 				if (editor.wasEventAlreadyHandled(e)) return
@@ -45,6 +48,15 @@ export function useCanvasEvents() {
 
 				setPointerCapture(e.currentTarget, e)
 
+				// Only remember presses the editor will act on. A rejected palm in pen mode
+				// must not overwrite the button of the pen press it lands on top of, or the
+				// pen's pointercancel would release the wrong button and skip the
+				// stylus-eraser tool restore.
+				const isPenMode = editor.getInstanceState().isPenMode
+				if (!editor.inputs.getIsPinching() && !(isPenMode && e.pointerType !== 'pen')) {
+					pointerDownButtons.set(e.pointerId, button)
+				}
+
 				editor.dispatch({
 					type: 'pointer',
 					target: 'canvas',
@@ -56,6 +68,7 @@ export function useCanvasEvents() {
 
 			function onPointerUp(e: React.PointerEvent) {
 				if (editor.wasEventAlreadyHandled(e)) return
+				pointerDownButtons.delete(e.pointerId)
 				const button = isSecondaryClickPointerDown ? 2 : getPointerEventButton(e)
 				if (button !== 0 && button !== 1 && button !== 2 && button !== 5) return
 
@@ -91,6 +104,34 @@ export function useCanvasEvents() {
 				isSecondaryClickPointerDown = false
 			}
 
+			function onPointerCancel(e: React.PointerEvent) {
+				if (editor.wasEventAlreadyHandled(e)) return
+				const pointerDownButton = pointerDownButtons.get(e.pointerId)
+				pointerDownButtons.delete(e.pointerId)
+				// In pen mode a cancelled touch is usually a rejected palm, and the pen's own
+				// interaction must survive it.
+				if (editor.getInstanceState().isPenMode && e.pointerType !== 'pen') return
+
+				releasePointerCapture(e.currentTarget, e)
+
+				// Nothing to end if the press itself was filtered out (pen mode, unsupported
+				// button), or if this pointer never started an accepted press.
+				if (!editor.inputs.getIsPointing() || pointerDownButton === undefined) return
+
+				// The browser has taken the pointer (edge swipe, incoming call) and will never send
+				// pointerup, so end the gesture here or the tool stays stuck in its pointing or
+				// dragging state and the next touch continues it.
+				editor.interrupt()
+				editor.dispatch({
+					type: 'pointer',
+					target: 'canvas',
+					name: 'pointer_up',
+					...getPointerInfo(editor, e),
+					button: pointerDownButton,
+				})
+				isSecondaryClickPointerDown = false
+			}
+
 			function onPointerEnter(e: React.PointerEvent) {
 				if (editor.wasEventAlreadyHandled(e)) return
 				if (editor.getInstanceState().isPenMode && e.pointerType !== 'pen') return
@@ -201,6 +242,7 @@ export function useCanvasEvents() {
 			return {
 				onPointerDown,
 				onPointerUp,
+				onPointerCancel,
 				onPointerEnter,
 				onPointerLeave,
 				onDragOver,

package/src/lib/hooks/useIdentity.tsx

@@ -1,4 +1,4 @@
-import { areArraysShallowEqual, areObjectsShallowEqual } from '@tldraw/utils'
+import { areArraysShallowEqual, areObjectsShallowEqual, isEqual } from '@tldraw/utils'
 import { useRef } from 'react'
 
 function useIdentity<T>(value: T, isEqual: (a: T, b: T) => boolean): T {
@@ -49,3 +49,14 @@ const areNullableObjectsShallowEqual = (
 export function useShallowObjectIdentity<T extends object | null | undefined>(obj: T): T {
 	return useIdentity(obj, areNullableObjectsShallowEqual)
 }
+
+/**
+ * For small option objects that may nest (e.g. camera constraints), where a shallow comparison
+ * would still see a fresh identity on every render. Functions and class instances inside still
+ * compare by reference, so an inline callback or a fresh `Extension.configure()` counts as a change.
+ *
+ * @internal
+ */
+export function useDeepObjectIdentity<T extends object | null | undefined>(obj: T): T {
+	return useIdentity(obj, isEqual)
+}

package/src/lib/license/LicenseManager.ts

@@ -1,4 +1,5 @@
 import { atom, transact } from '@tldraw/state'
+import { noop } from '@tldraw/utils'
 import { publishDates, version } from '../../version'
 import { getDefaultCdnBaseUrl } from '../utils/assets'
 import { importPublicKey, str2ab } from '../utils/licensing'
@@ -127,6 +128,7 @@ export class LicenseManager {
 		...NO_FEATURES,
 	})
 	public verbose = true
+	private isDisposed = false
 
 	constructor(licenseKey: string | undefined, testPublicKey?: string) {
 		this.isTest = process.env.NODE_ENV === 'test'
@@ -144,6 +146,9 @@ export class LicenseManager {
 
 		this.getLicenseFromKey(licenseKey)
 			.then((result) => {
+				// replaced by a manager for a newer key: this one's messages, tracking ping and state
+				// would describe a key the app no longer uses
+				if (this.isDisposed) return
 				const licenseState = getLicenseState(
 					result,
 					(messages: string[]) => this.outputMessages(messages),
@@ -160,11 +165,17 @@ export class LicenseManager {
 				})
 			})
 			.catch((error) => {
+				if (this.isDisposed) return
 				console.error('License validation failed:', error)
 				this.state.set('unlicensed')
 			})
 	}
 
+	/** Ignore the pending validation: nothing is logged, tracked or set once the manager is replaced. */
+	dispose() {
+		this.isDisposed = true
+	}
+
 	/**
 	 * Returns whether a given licensable feature is enabled. Reactive: reading this inside a signal
 	 * recomputes when license validation resolves.
@@ -247,8 +258,9 @@ export class LicenseManager {
 			url.searchParams.set('environment', process.env.NODE_ENV)
 		}
 
+		// best-effort: a blocked or offline request must not surface as an unhandled rejection
 		// eslint-disable-next-line no-restricted-globals
-		fetch(url.toString())
+		fetch(url.toString()).catch(noop)
 	}
 
 	private async extractLicenseKey(licenseKey: string): Promise<LicenseInfo> {

package/src/lib/license/LicenseProvider.test.tsx

@@ -0,0 +1,76 @@
+import { act, render } from '@testing-library/react'
+import { vi } from 'vitest'
+import { LicenseFromKeyResult, LicenseManager } from './LicenseManager'
+import { LICENSE_TIMEOUT, LicenseProvider, useLicenseContext } from './LicenseProvider'
+
+const NO_KEY: LicenseFromKeyResult = { isLicenseParseable: false, reason: 'no-key-provided' }
+
+describe('LicenseProvider', () => {
+	const managers: LicenseManager[] = []
+	function Probe() {
+		managers.push(useLicenseContext())
+		return null
+	}
+	const renderWithKey = (licenseKey: string | undefined) => (
+		<LicenseProvider licenseKey={licenseKey}>
+			<Probe />
+		</LicenseProvider>
+	)
+
+	beforeEach(() => {
+		managers.length = 0
+	})
+	afterEach(() => {
+		vi.restoreAllMocks()
+		vi.useRealTimers()
+	})
+
+	it('creates a new license manager when the license key changes', async () => {
+		const rendered = await act(async () => render(renderWithKey(undefined)))
+		const initial = managers.at(-1)!
+
+		await act(async () => rendered.rerender(renderWithKey('not-a-real-key')))
+		const changed = managers.at(-1)!
+		expect(changed).not.toBe(initial)
+
+		// same key again: the manager is stable
+		await act(async () => rendered.rerender(renderWithKey('not-a-real-key')))
+		expect(managers.at(-1)).toBe(changed)
+	})
+
+	it('shows the editor again when a new key arrives after the gate closed', async () => {
+		// validation never settles so the test drives the state by hand
+		vi.spyOn(LicenseManager.prototype, 'getLicenseFromKey').mockReturnValue(new Promise(() => {}))
+		vi.useFakeTimers()
+
+		const rendered = await act(async () => render(renderWithKey('expired-key')))
+		const expired = managers.at(-1)!
+		act(() => expired.state.set('expired'))
+		act(() => vi.advanceTimersByTime(LICENSE_TIMEOUT))
+		expect(rendered.queryByTestId('tl-license-expired')).not.toBeNull()
+
+		await act(async () => rendered.rerender(renderWithKey('fresh-key')))
+		expect(rendered.queryByTestId('tl-license-expired')).toBeNull()
+		expect(managers.at(-1)).not.toBe(expired)
+	})
+
+	it('ignores the validation result of a manager replaced by a new key', async () => {
+		const resolvers: ((result: LicenseFromKeyResult) => void)[] = []
+		vi.spyOn(LicenseManager.prototype, 'getLicenseFromKey').mockImplementation(
+			() => new Promise((resolve) => resolvers.push(resolve))
+		)
+		const track = vi.spyOn(LicenseManager.prototype as any, 'maybeTrack')
+
+		const rendered = await act(async () => render(renderWithKey(undefined)))
+		const orphan = managers.at(-1)!
+		await act(async () => rendered.rerender(renderWithKey('real-key')))
+		expect(managers.at(-1)).not.toBe(orphan)
+
+		await act(async () => resolvers[0](NO_KEY))
+		expect(orphan.state.get()).toBe('pending')
+		expect(track).not.toHaveBeenCalled()
+
+		await act(async () => resolvers[1](NO_KEY))
+		expect(managers.at(-1)!.state.get()).toBe('unlicensed')
+	})
+})

package/src/lib/license/LicenseProvider.tsx

@@ -1,5 +1,5 @@
 import { useValue } from '@tldraw/state-react'
-import { createContext, ReactNode, useContext, useEffect, useState } from 'react'
+import { createContext, ReactNode, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { useMaybeEditor } from '../hooks/useEditor'
 import { LicenseManager } from './LicenseManager'
 
@@ -46,21 +46,35 @@ export function LicenseProvider({
 	licenseKey?: string
 	children: ReactNode
 }) {
-	const [licenseManager] = useState(() => new LicenseManager(licenseKey))
+	// Keyed on the license key: the editor is recreated when the key changes, and must not be
+	// handed a manager that validated the old key.
+	const licenseManager = useMemo(() => new LicenseManager(licenseKey), [licenseKey])
 	const licenseState = useValue(licenseManager.state)
-	const [showEditor, setShowEditor] = useState(true)
+	// The manager whose LICENSE_TIMEOUT elapsed; compared by identity so a new key un-gates the editor.
+	const [gatedManager, setGatedManager] = useState<LicenseManager | null>(null)
+	const showEditor = gatedManager !== licenseManager
+
+	// Dispose only the replaced manager, never on cleanup: strict mode re-runs effects with the
+	// same manager, and disposing it there would silence the live one.
+	const previousManager = useRef<LicenseManager | null>(null)
+	useEffect(() => {
+		if (previousManager.current && previousManager.current !== licenseManager) {
+			previousManager.current.dispose()
+		}
+		previousManager.current = licenseManager
+	}, [licenseManager])
 
 	// When license expires or no license in production, show for 5 seconds then hide
 	useEffect(() => {
 		if (shouldHideEditorAfterDelay(licenseState) && showEditor) {
 			// eslint-disable-next-line no-restricted-globals
 			const timer = setTimeout(() => {
-				setShowEditor(false)
+				setGatedManager(licenseManager)
 			}, LICENSE_TIMEOUT)
 
 			return () => clearTimeout(timer)
 		}
-	}, [licenseState, showEditor])
+	}, [licenseManager, licenseState, showEditor])
 
 	// If license is expired or no license in production and 5 seconds have passed, don't render anything (blank screen)
 	if (shouldHideEditorAfterDelay(licenseState) && !showEditor) {

package/src/lib/primitives/geometry/Arc2d.test.ts

@@ -225,4 +225,13 @@ describe('Arc2d.getSvgPathData', () => {
 		})
 		expect(arc.getSvgPathData()).toBe('M10, 0 A10 10 0 0 1 7.07, 7.07')
 	})
+
+	it('does not mutate the stored points', () => {
+		const start = new Vec(10, 0)
+		const end = new Vec(10 / Math.SQRT2, 10 / Math.SQRT2)
+		const arc = new Arc2d({ center: new Vec(0, 0), start, end, sweepFlag: 1, largeArcFlag: 0 })
+		arc.getSvgPathData()
+		expect(start).toMatchObject({ x: 10, y: 0 })
+		expect(end).toMatchObject({ x: 10 / Math.SQRT2, y: 10 / Math.SQRT2 })
+	})
 })

package/src/lib/primitives/geometry/Arc2d.ts

@@ -105,7 +105,7 @@ export class Arc2d extends Geometry2d {
 			_largeArcFlag: largeArcFlag,
 			_sweepFlag: sweepFlag,
 		} = this
-		return `${first ? `M${start.toFixed()}` : ``} A${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${end.toFixed()}`
+		return `${first ? `M${start}` : ``} A${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${end}`
 	}
 
 	override getLength() {

package/src/lib/primitives/geometry/CubicBezier2d.test.ts

@@ -172,4 +172,17 @@ describe('CubicBezier2d.getSvgPathData', () => {
 		})
 		expect(b.getSvgPathData()).toBe('M 0.12, 0  C1.01, 2 3, 5 10, 10')
 	})
+
+	it('does not mutate the stored points', () => {
+		const start = new Vec(0.123, 0)
+		const cp1 = new Vec(1.006, 2)
+		const cp2 = new Vec(3, 4.999)
+		const end = new Vec(10, 10.005)
+		const b = new CubicBezier2d({ start, cp1, cp2, end })
+		b.getSvgPathData()
+		expect(start).toMatchObject({ x: 0.123, y: 0 })
+		expect(cp1).toMatchObject({ x: 1.006, y: 2 })
+		expect(cp2).toMatchObject({ x: 3, y: 4.999 })
+		expect(end).toMatchObject({ x: 10, y: 10.005 })
+	})
 })

package/src/lib/primitives/geometry/CubicBezier2d.ts

@@ -81,7 +81,7 @@ export class CubicBezier2d extends Polyline2d {
 
 	getSvgPathData(first = true) {
 		const { _a: a, _b: b, _c: c, _d: d } = this
-		return `${first ? `M ${a.toFixed()} ` : ``} C${b.toFixed()} ${c.toFixed()} ${d.toFixed()}`
+		return `${first ? `M ${a} ` : ``} C${b} ${c} ${d}`
 	}
 
 	static GetAtT(segment: CubicBezier2d, t: number) {

package/src/lib/primitives/geometry/Edge2d.test.ts

@@ -1,5 +1,23 @@
-describe('Edge2d', () => {
-	it('should be tested', () => {
-		expect(true).toBe(true)
+import { Vec } from '../Vec'
+import { Edge2d } from './Edge2d'
+
+describe('Edge2d.getSvgPathData', () => {
+	it('emits a move and a line command, rounded to two decimals', () => {
+		const edge = new Edge2d({ start: new Vec(0.123456, 0), end: new Vec(10, 10.987654) })
+		expect(edge.getSvgPathData()).toBe('M0.12, 0 L10, 10.99')
+	})
+
+	it('omits the move command when not first', () => {
+		const edge = new Edge2d({ start: new Vec(0.123456, 0), end: new Vec(10, 10.987654) })
+		expect(edge.getSvgPathData(false)).toBe(' L10, 10.99')
+	})
+
+	it('does not mutate the stored points', () => {
+		const start = new Vec(0.123456, 0)
+		const end = new Vec(10, 10.987654)
+		const edge = new Edge2d({ start, end })
+		edge.getSvgPathData()
+		expect(start).toMatchObject({ x: 0.123456, y: 0 })
+		expect(end).toMatchObject({ x: 10, y: 10.987654 })
 	})
 })

package/src/lib/primitives/geometry/Edge2d.ts

@@ -68,6 +68,6 @@ export class Edge2d extends Geometry2d {
 
 	getSvgPathData(first = true) {
 		const { _start: start, _end: end } = this
-		return `${first ? `M${start.toFixed()}` : ``} L${end.toFixed()}`
+		return `${first ? `M${start}` : ``} L${end}`
 	}
 }

package/src/lib/primitives/geometry/Group2d.test.ts

@@ -340,20 +340,38 @@ describe('Group2d.transform', () => {
 		expect(t.vertices.length).toBe(8)
 	})
 
-	it('carries the label, debug colour and ignore flags forward', () => {
+	it('carries all the flags forward', () => {
 		const g = new Group2d({
 			children: [rectA()],
 			isLabel: true,
+			isEmptyLabel: true,
+			isInternal: true,
+			excludeFromShapeBounds: true,
 			debugColor: 'red',
 			ignore: true,
 		})
 		expect(g.transform(Mat.Identity())).toMatchObject({
 			isLabel: true,
+			isEmptyLabel: true,
+			isInternal: true,
+			excludeFromShapeBounds: true,
 			debugColor: 'red',
 			ignore: true,
 		})
 	})
 
+	it('applies the transform options over the carried flags', () => {
+		const g = new Group2d({ children: [rectA()], isLabel: true, isInternal: true })
+		expect(
+			g.transform(Mat.Identity(), {
+				isLabel: false,
+				isInternal: false,
+				debugColor: 'red',
+				ignore: true,
+			})
+		).toMatchObject({ isLabel: false, isInternal: false, debugColor: 'red', ignore: true })
+	})
+
 	it('scales hit testing with the transform', () => {
 		const t = group().transform(Mat.Scale(2, 2))
 		expect(t.hitTestPoint(new Vec(100, 50), 0, false)).toBe(true)
@@ -361,12 +379,15 @@ describe('Group2d.transform', () => {
 		expect(t.distanceToPoint(new Vec(300, 50))).toBe(100)
 	})
 
-	// Locks in current behaviour, see #10562.
-	it('drops the ignored children', () => {
+	// #10562: transform used to drop the ignored children.
+	it('keeps the transformed ignored children', () => {
 		const ignored = new Rectangle2d({ x: 500, width: 10, height: 10, isFilled: true, ignore: true })
 		const g = new Group2d({ children: [rectA(), ignored] })
-		expect(g.ignoredChildren.length).toBe(1)
-		expect((g.transform(Mat.Identity()) as Group2d).ignoredChildren).toEqual([])
+		const t = g.transform(Mat.Translate(10, 20)) as Group2d
+		expect(t.children.length).toBe(1)
+		expect(t.ignoredChildren.length).toBe(1)
+		expect(t.ignoredChildren[0].ignore).toBe(true)
+		expect(t.ignoredChildren[0].bounds).toMatchObject({ x: 510, y: 20, w: 10, h: 10 })
 	})
 })