@tldraw/editor 5.4.0-next.ef99ab47e5ce → 5.4.0

package/src/lib/hooks/useLocalStore.ts

@@ -1,5 +1,5 @@
-import { TLAsset, TLAssetStore, TLStoreSnapshot } from '@tldraw/tlschema'
-import { WeakCache } from '@tldraw/utils'
+import { TLAssetId, TLAssetStore, TLStoreSnapshot } from '@tldraw/tlschema'
+import { noop } from '@tldraw/utils'
 import { useEffect } from 'react'
 import { TLStoreOptions, createTLStore } from '../config/createTLStore'
 import { TLEditorSnapshot } from '../config/TLEditorSnapshot'
@@ -33,7 +33,9 @@ export function useLocalStore(
 
 		setState({ status: 'loading' })
 
-		const objectURLCache = new WeakCache<TLAsset, Promise<string | null>>()
+		// Keyed by asset id rather than record identity so that a record update doesn't mint
+		// another object url for the same blob; every url minted here is revoked on cleanup.
+		const objectURLCache = new Map<TLAssetId, Promise<string | null>>()
 		const assets: TLAssetStore = {
 			upload: async (asset, file) => {
 				await client.db.storeAsset(asset.id, file)
@@ -43,11 +45,14 @@ export function useLocalStore(
 				if (!asset.props.src) return null
 
 				if (asset.props.src.startsWith('asset:')) {
-					return await objectURLCache.get(asset, async () => {
-						const blob = await client.db.getAsset(asset.id)
-						if (!blob) return null
-						return URL.createObjectURL(blob)
-					})
+					let objectURL = objectURLCache.get(asset.id)
+					if (!objectURL) {
+						objectURL = client.db
+							.getAsset(asset.id)
+							.then((blob) => (blob ? URL.createObjectURL(blob) : null))
+						objectURLCache.set(asset.id, objectURL)
+					}
+					return await objectURL
 				}
 
 				return asset.props.src
@@ -78,6 +83,9 @@ export function useLocalStore(
 		return () => {
 			isClosed = true
 			client.close()
+			for (const objectURL of objectURLCache.values()) {
+				objectURL.then((url) => url && URL.revokeObjectURL(url), noop)
+			}
 		}
 	}, [options, setState])
 

package/src/lib/hooks/usePassThroughWheelEvents.ts

@@ -70,6 +70,9 @@ export function usePassThroughWheelEvents(ref: RefObject<HTMLElement | null>) {
 		const newEvent = new WheelEvent('wheel', e as any)
 		;(newEvent as any).isSpecialRedispatchedEvent = true
 		cvs.dispatchEvent(newEvent)
+		// Flag the original too: it keeps bubbling, and an enclosing pass-through root (the
+		// navigation panel around the minimap) would otherwise redispatch it a second time.
+		;(e as any).isSpecialRedispatchedEvent = true
 	})
 
 	// The element the listener is currently on, which isn't necessarily `ref.current`: a `RefObject`

package/src/lib/hooks/usePeerIds.ts

@@ -1,4 +1,5 @@
 import { useComputed, useValue } from '@tldraw/state-react'
+import { areArraysShallowEqual } from '@tldraw/utils'
 import { uniq } from '../utils/uniq'
 import { useEditor } from './useEditor'
 
@@ -17,7 +18,7 @@ export function usePeerIds() {
 	const $userIds = useComputed(
 		'userIds',
 		() => uniq(editor.getVisibleCollaborators().map((p) => p.userId)).sort(),
-		{ isEqual: (a, b) => a.join(',') === b.join?.(',') },
+		{ isEqual: areArraysShallowEqual },
 		[editor]
 	)
 

package/src/lib/license/LicenseManager.test.ts

@@ -316,6 +316,42 @@ describe('LicenseManager', () => {
 			expect(result.isDomainValid).toBe(true)
 		})
 
+		it('Fails if the wildcard domain is a prefix of the current hostname', async () => {
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL('https://sub.example.com.other.io')
+
+			const permissiveHostsInfo = JSON.parse(STANDARD_LICENSE_INFO)
+			permissiveHostsInfo[PROPERTIES.HOSTS] = ['*.example.com']
+			const permissiveLicenseKey = await generateLicenseKey(
+				JSON.stringify(permissiveHostsInfo),
+				keyPair
+			)
+			const result = (await licenseManager.getLicenseFromKey(
+				permissiveLicenseKey
+			)) as ValidLicenseKeyResult
+			expect(result.isDomainValid).toBe(false)
+		})
+
+		it('Fails if the current hostname only ends with the wildcard domain', async () => {
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL('https://notexample.com')
+
+			const permissiveHostsInfo = JSON.parse(STANDARD_LICENSE_INFO)
+			permissiveHostsInfo[PROPERTIES.HOSTS] = ['*.example.com']
+			const permissiveLicenseKey = await generateLicenseKey(
+				JSON.stringify(permissiveHostsInfo),
+				keyPair
+			)
+			const result = (await licenseManager.getLicenseFromKey(
+				permissiveLicenseKey
+			)) as ValidLicenseKeyResult
+			expect(result.isDomainValid).toBe(false)
+		})
+
 		it('Fails if has a subdomain wildcard isnt for the same base domain', async () => {
 			// @ts-ignore
 			delete window.location
@@ -422,6 +458,107 @@ describe('LicenseManager', () => {
 			expect(result.isDomainValid).toBe(true)
 		})
 
+		it('Is not development mode on a custom protocol', async () => {
+			process.env.NODE_ENV = 'production'
+			try {
+				// @ts-ignore
+				delete window.location
+				// @ts-ignore
+				window.location = new URL('app-bundle://app/index.html')
+
+				const nativeLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
+				nativeLicenseInfo[PROPERTIES.FLAGS] = FLAGS.NATIVE_LICENSE
+				nativeLicenseInfo[PROPERTIES.HOSTS] = ['app-bundle:']
+				const nativeLicenseKey = await generateLicenseKey(
+					JSON.stringify(nativeLicenseInfo),
+					keyPair
+				)
+				const nativeLicenseManager = new LicenseManager('', keyPair.publicKey)
+				const result = (await nativeLicenseManager.getLicenseFromKey(
+					nativeLicenseKey
+				)) as ValidLicenseKeyResult
+				expect(result).toMatchObject({
+					isLicenseParseable: true,
+					isNativeLicense: true,
+					isDomainValid: true,
+					isDevelopment: false,
+				})
+				expect(getLicenseState(result, () => {}, result.isDevelopment)).toBe('licensed')
+			} finally {
+				process.env.NODE_ENV = 'test'
+			}
+		})
+
+		it('Validates the domain on a custom protocol', async () => {
+			process.env.NODE_ENV = 'production'
+			try {
+				// @ts-ignore
+				delete window.location
+				// @ts-ignore
+				window.location = new URL('app-bundle://app/index.html')
+
+				const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+				const customProtocolLicenseManager = new LicenseManager('', keyPair.publicKey)
+				const result = (await customProtocolLicenseManager.getLicenseFromKey(
+					licenseKey
+				)) as ValidLicenseKeyResult
+				expect(result).toMatchObject({ isDomainValid: false, isDevelopment: false })
+				expect(getLicenseState(result, () => {}, result.isDevelopment)).toBe(
+					'unlicensed-production'
+				)
+			} finally {
+				process.env.NODE_ENV = 'test'
+			}
+		})
+
+		it('Is development mode over http on a non-loopback host', async () => {
+			process.env.NODE_ENV = 'production'
+			try {
+				// @ts-ignore
+				delete window.location
+				// @ts-ignore
+				window.location = new URL('http://www.example.com')
+
+				const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+				const httpLicenseManager = new LicenseManager('', keyPair.publicKey)
+				const result = (await httpLicenseManager.getLicenseFromKey(
+					licenseKey
+				)) as ValidLicenseKeyResult
+				expect(result.isDevelopment).toBe(true)
+			} finally {
+				process.env.NODE_ENV = 'test'
+			}
+		})
+
+		it.each([
+			['http://localhost:5173/', true],
+			['http://127.0.0.1:3000/', true],
+			['https://localhost:8443/', true],
+			['https://[::1]:8443/', true],
+			['http://192.168.1.5:3000/', true],
+			['http://staging-box/', true],
+			['https://www.example.com/', false],
+			['tauri://localhost/index.html', false],
+			['http://tauri.localhost/index.html', false],
+			['app://tauri.localhost/com.example.app', false],
+			['app-bundle://localhost/index.html', false],
+		])('Development mode at %s is %s', async (href, expected) => {
+			process.env.NODE_ENV = 'production'
+			try {
+				// @ts-ignore
+				delete window.location
+				// @ts-ignore
+				window.location = new URL(href)
+
+				const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+				const manager = new LicenseManager('', keyPair.publicKey)
+				const result = (await manager.getLicenseFromKey(licenseKey)) as ValidLicenseKeyResult
+				expect(result.isDevelopment).toBe(expected)
+			} finally {
+				process.env.NODE_ENV = 'test'
+			}
+		})
+
 		it('Fails if it is a native app with the wrong protocol', async () => {
 			// @ts-ignore
 			delete window.location
@@ -437,6 +574,29 @@ describe('LicenseManager', () => {
 			)) as ValidLicenseKeyResult
 			expect(result.isDomainValid).toBe(false)
 		})
+
+		it.each(['tauri://localhost/index.html', 'http://tauri.localhost/index.html'])(
+			'Does not license an unrelated key at %s',
+			async (href) => {
+				process.env.NODE_ENV = 'production'
+				try {
+					// @ts-ignore
+					delete window.location
+					// @ts-ignore
+					window.location = new URL(href)
+
+					const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+					const manager = new LicenseManager('', keyPair.publicKey)
+					const result = (await manager.getLicenseFromKey(licenseKey)) as ValidLicenseKeyResult
+					expect(result).toMatchObject({ isDevelopment: false, isDomainValid: false })
+					expect(getLicenseState(result, () => {}, result.isDevelopment)).toBe(
+						'unlicensed-production'
+					)
+				} finally {
+					process.env.NODE_ENV = 'test'
+				}
+			}
+		)
 	})
 
 	describe('License types and flags', () => {

package/src/lib/license/LicenseManager.ts

@@ -174,10 +174,17 @@ export class LicenseManager {
 	}
 
 	private getIsDevelopment() {
-		// If we are using https on a non-loopback domain we assume it's a production env and a development one otherwise
+		const protocol = window.location.protocol
+		const hostname = window.location.hostname
+
+		// Tauri uses `tauri://localhost` on macOS and Linux and `http://tauri.localhost` on Windows.
+		if (hostname.toLowerCase().endsWith('.localhost')) {
+			return process.env.NODE_ENV !== 'production'
+		}
+
 		return (
-			!['https:', 'vscode-webview:'].includes(window.location.protocol) ||
-			this.isLoopbackHost(window.location.hostname) ||
+			protocol === 'http:' ||
+			(protocol === 'https:' && this.isLoopbackHost(hostname)) ||
 			process.env.NODE_ENV !== 'production'
 		)
 	}
@@ -407,7 +414,9 @@ export class LicenseManager {
 
 			// Glob testing, we only support '*.somedomain.com' right now.
 			if (host.includes('*')) {
-				const globToRegex = new RegExp(host.replace(/\*/g, '.*?'))
+				const globToRegex = new RegExp(
+					normalizedHostOrUrlRegex.replace(/\./g, '\\.').replace(/\*/g, '.*?') + '$'
+				)
 				return globToRegex.test(currentHostname) || globToRegex.test(`www.${currentHostname}`)
 			}
 

package/src/lib/license/LicenseProvider.tsx

@@ -1,13 +1,34 @@
 import { useValue } from '@tldraw/state-react'
 import { createContext, ReactNode, useContext, useEffect, useState } from 'react'
+import { useMaybeEditor } from '../hooks/useEditor'
 import { LicenseManager } from './LicenseManager'
 
 /** @internal */
-export const LicenseContext = createContext({} as LicenseManager)
+export const LicenseContext = createContext<LicenseManager | null>(null)
 
 /** @internal */
-export function useLicenseContext() {
-	return useContext(LicenseContext)
+export function useLicenseContext(): LicenseManager {
+	const licenseManager = useMaybeLicenseManager()
+	if (!licenseManager) {
+		throw new Error(
+			'useLicenseContext must be used inside of the <Tldraw /> or <TldrawEditor /> components, or inside an <EditorProvider /> wrapping an editor created by them'
+		)
+	}
+	return licenseManager
+}
+
+/**
+ * Returns the license manager for the current editor, or `null` if there is none. Reads the
+ * license context when inside `<TldrawEditor />`, and otherwise falls back to the license manager
+ * of the nearest editor, so UI mounted outside the editor tree (via `EditorProvider`) resolves the
+ * same license as the editor it belongs to.
+ *
+ * @internal
+ */
+export function useMaybeLicenseManager(): LicenseManager | null {
+	const licenseManager = useContext(LicenseContext)
+	const editor = useMaybeEditor()
+	return licenseManager ?? editor?.licenseManager ?? null
 }
 
 function shouldHideEditorAfterDelay(licenseState: string): boolean {

package/src/lib/license/useLicenseManagerState.ts

@@ -8,16 +8,18 @@ export function useLicenseManagerState(licenseManager: LicenseManager): LicenseS
 
 /**
  * Reactively reads whether a licensable feature is enabled for the current license. Re-renders when
- * license validation resolves.
+ * license validation resolves. Returns `false` when there is no license manager, so gated UI stays
+ * hidden when mounted without an editor or license context.
  *
  * @internal
  */
 export function useLicenseFeatureFlag(
-	licenseManager: LicenseManager,
+	licenseManager: LicenseManager | null,
 	feature: LicenseFeatureName
 ): boolean {
-	return useValue('licenseFeature', () => licenseManager.isFeatureEnabled(feature), [
-		licenseManager,
-		feature,
-	])
+	return useValue(
+		'licenseFeature',
+		() => (licenseManager ? licenseManager.isFeatureEnabled(feature) : false),
+		[licenseManager, feature]
+	)
 }

package/src/lib/primitives/Box.test.ts

@@ -1,4 +1,4 @@
-import { Box } from './Box'
+import { Box, rotateSelectionHandle } from './Box'
 import { Vec } from './Vec'
 
 describe('Box', () => {
@@ -759,3 +759,11 @@ describe('Box', () => {
 		})
 	})
 })
+
+describe('rotateSelectionHandle', () => {
+	it('wraps around for negative rotations', () => {
+		expect(rotateSelectionHandle('top', Math.PI / 2)).toBe('right')
+		expect(rotateSelectionHandle('top', -Math.PI / 2)).toBe('left')
+		expect(rotateSelectionHandle('top_left', -Math.PI)).toBe('bottom_right')
+	})
+})

package/src/lib/primitives/Box.ts

@@ -678,7 +678,9 @@ export function rotateSelectionHandle(handle: SelectionHandle, rotation: number)
 	const numSteps = Math.round(rotation / (PI / 4))
 
 	const currentIndex = ORDERED_SELECTION_HANDLES.indexOf(handle)
-	return ORDERED_SELECTION_HANDLES[(currentIndex + numSteps) % ORDERED_SELECTION_HANDLES.length]
+	// numSteps is negative for negative rotations, so wrap the index into range
+	const n = ORDERED_SELECTION_HANDLES.length
+	return ORDERED_SELECTION_HANDLES[(((currentIndex + numSteps) % n) + n) % n]
 }
 
 /** @public */

package/src/lib/primitives/Vec.test.ts

@@ -336,6 +336,16 @@ describe('Vec.Slope', () => {
 		expect(Vec.Slope(new Vec(0, 0), new Vec(50, 100))).toEqual(2)
 		expect(Vec.Slope(new Vec(0, 0), new Vec(-50, 100))).toEqual(-2)
 		expect(Vec.Slope(new Vec(123, 456), new Vec(789, 24))).toEqual(-0.6486486486486487)
+		// A.x happened to equal B.y here, which used to trip the vertical guard
+		expect(Vec.Slope(new Vec(1, 0), new Vec(0, 1))).toEqual(-1)
+		expect(Vec.Slope(new Vec(5, 0), new Vec(5, 10))).toBeNaN()
+	})
+})
+
+describe('Vec.cross', () => {
+	it('Matches the static Vec.Cross.', () => {
+		expect(Vec.Cross(new Vec(1, 2, 3), new Vec(4, 5, 6))).toMatchObject({ x: -3, y: 6 })
+		expect(new Vec(1, 2, 3).cross(new Vec(4, 5, 6))).toMatchObject({ x: -3, y: 6 })
 	})
 })
 

package/src/lib/primitives/Vec.ts

@@ -164,9 +164,9 @@ export class Vec {
 	}
 
 	cross(V: VecLike) {
-		this.x = this.y * V.z! - this.z * V.y
-		this.y = this.z * V.x - this.x * V.z!
-		// this.z = this.x * V.y - this.y * V.x
+		const { x, y, z } = this
+		this.x = y * V.z! - z * V.y
+		this.y = z * V.x - x * V.z!
 		return this
 	}
 
@@ -497,7 +497,7 @@ export class Vec {
 	}
 
 	static Slope(A: VecLike, B: VecLike): number {
-		if (A.x === B.y) return NaN
+		if (A.x === B.x) return NaN
 		return (A.y - B.y) / (A.x - B.x)
 	}
 

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

@@ -1,5 +1,228 @@
-describe('Arc2d', () => {
-	it('should be tested', () => {
-		expect(true).toBe(true)
+import { Vec } from '../Vec'
+import { Arc2d } from './Arc2d'
+
+// A quarter circle of radius 10 centred at the origin, from (10, 0) clockwise (in screen
+// space, i.e. with increasing angle) to (0, 10).
+const quarter = () =>
+	new Arc2d({
+		center: new Vec(0, 0),
+		start: new Vec(10, 0),
+		end: new Vec(0, 10),
+		sweepFlag: 1,
+		largeArcFlag: 0,
+	})
+
+// The complementary three-quarter arc between the same points, going the other way round.
+const threeQuarter = () =>
+	new Arc2d({
+		center: new Vec(0, 0),
+		start: new Vec(10, 0),
+		end: new Vec(0, 10),
+		sweepFlag: 0,
+		largeArcFlag: 1,
+	})
+
+function expectVec(actual: Vec, expected: { x: number; y: number }) {
+	expect(actual.x).toBeCloseTo(expected.x)
+	expect(actual.y).toBeCloseTo(expected.y)
+}
+
+describe('Arc2d construction', () => {
+	it('is never closed or filled', () => {
+		expect(quarter()).toMatchObject({ isClosed: false, isFilled: false })
+	})
+
+	it('throws when start and end are the same point', () => {
+		expect(
+			() =>
+				new Arc2d({
+					center: new Vec(0, 0),
+					start: new Vec(10, 0),
+					end: new Vec(10, 0),
+					sweepFlag: 1,
+					largeArcFlag: 0,
+				})
+		).toThrow('Arc must have different start and end points.')
+	})
+})
+
+describe('Arc2d.getLength', () => {
+	it('is the arc measure times the radius', () => {
+		expect(quarter().length).toBeCloseTo((Math.PI / 2) * 10)
+		expect(threeQuarter().length).toBeCloseTo(((3 * Math.PI) / 2) * 10)
+	})
+
+	it('is half a circumference for a semicircle in either direction', () => {
+		const semi = new Arc2d({
+			center: new Vec(25, 25),
+			start: new Vec(25, 50),
+			end: new Vec(25, 0),
+			sweepFlag: 1,
+			largeArcFlag: 1,
+		})
+		expect(semi.length).toBeCloseTo(Math.PI * 25)
+	})
+})
+
+describe('Arc2d.getVertices', () => {
+	it('samples at least eight segments from start to end', () => {
+		const { vertices } = quarter()
+		expect(vertices.length).toBe(9)
+		expectVec(vertices[0], { x: 10, y: 0 })
+		expectVec(vertices[4], { x: 10 / Math.SQRT2, y: 10 / Math.SQRT2 })
+		expectVec(vertices[8], { x: 0, y: 10 })
+	})
+
+	it('keeps every vertex on the circle', () => {
+		for (const v of quarter().vertices) {
+			expect(Vec.Dist(v, new Vec(0, 0))).toBeCloseTo(10)
+		}
+	})
+
+	it('walks the long way round for a large arc', () => {
+		const { vertices } = threeQuarter()
+		expect(vertices.length).toBe(9)
+		expectVec(vertices[0], { x: 10, y: 0 })
+		// the midpoint of the long arc is opposite the midpoint of the short arc
+		expectVec(vertices[4], { x: -10 / Math.SQRT2, y: -10 / Math.SQRT2 })
+		expectVec(vertices[8], { x: 0, y: 10 })
+	})
+
+	it('samples more vertices for longer arcs', () => {
+		const big = new Arc2d({
+			center: new Vec(0, 0),
+			start: new Vec(100, 0),
+			end: new Vec(0, 100),
+			sweepFlag: 1,
+			largeArcFlag: 0,
+		})
+		// length is 50π ≈ 157, one vertex per 20 units -> 8 segments
+		expect(big.vertices.length).toBe(9)
+		const bigger = new Arc2d({
+			center: new Vec(0, 0),
+			start: new Vec(200, 0),
+			end: new Vec(0, 200),
+			sweepFlag: 1,
+			largeArcFlag: 0,
+		})
+		// length is 100π ≈ 314 -> 16 segments
+		expect(bigger.vertices.length).toBe(17)
+	})
+})
+
+describe('Arc2d.bounds', () => {
+	it('is the box around the sampled vertices', () => {
+		const { bounds } = quarter()
+		expect(bounds.x).toBeCloseTo(0)
+		expect(bounds.y).toBeCloseTo(0)
+		expect(bounds.w).toBeCloseTo(10)
+		expect(bounds.h).toBeCloseTo(10)
+	})
+})
+
+describe('Arc2d.nearestPoint', () => {
+	it('projects radially onto the arc when the angle is within the sweep', () => {
+		expectVec(quarter().nearestPoint(new Vec(5, 5)), { x: 10 / Math.SQRT2, y: 10 / Math.SQRT2 })
+		expectVec(quarter().nearestPoint(new Vec(20, 20)), {
+			x: 10 / Math.SQRT2,
+			y: 10 / Math.SQRT2,
+		})
+	})
+
+	it('returns the start point for angles before the arc', () => {
+		expect(quarter().nearestPoint(new Vec(20, -5))).toMatchObject({ x: 10, y: 0 })
+		expect(quarter().nearestPoint(new Vec(20, 0))).toMatchObject({ x: 10, y: 0 })
+	})
+
+	it('returns the end point for angles after the arc', () => {
+		expect(quarter().nearestPoint(new Vec(-5, 20))).toMatchObject({ x: 0, y: 10 })
+		expect(quarter().nearestPoint(new Vec(0, 20))).toMatchObject({ x: 0, y: 10 })
+	})
+
+	it('returns the start point for the centre itself', () => {
+		expect(quarter().nearestPoint(new Vec(0, 0))).toMatchObject({ x: 10, y: 0 })
+	})
+
+	it('projects onto the long arc', () => {
+		expectVec(threeQuarter().nearestPoint(new Vec(-20, 0)), { x: -10, y: 0 })
+		expectVec(threeQuarter().nearestPoint(new Vec(0, -3)), { x: 0, y: -10 })
+		// a point in the gap of the long arc snaps to the nearer end point
+		expect(threeQuarter().nearestPoint(new Vec(20, 5))).toMatchObject({ x: 10, y: 0 })
+	})
+})
+
+describe('Arc2d.distanceToPoint', () => {
+	it('measures to the arc or its end points', () => {
+		expect(quarter().distanceToPoint(new Vec(20, 20))).toBeCloseTo(Math.hypot(20, 20) - 10)
+		expect(quarter().distanceToPoint(new Vec(20, 0))).toBe(10)
+		expect(quarter().distanceToPoint(new Vec(0, 0))).toBe(10)
+	})
+
+	it('is never negative because an arc has no interior', () => {
+		expect(quarter().distanceToPoint(new Vec(1, 1), true)).toBeGreaterThan(0)
+	})
+})
+
+describe('Arc2d.hitTestPoint', () => {
+	it('hits points on the arc within the margin', () => {
+		expect(quarter().hitTestPoint(new Vec(10 / Math.SQRT2, 10 / Math.SQRT2), 0.001)).toBe(true)
+		expect(quarter().hitTestPoint(new Vec(10, 0))).toBe(true)
+		expect(quarter().hitTestPoint(new Vec(5, 5), 3)).toBe(true)
+		expect(quarter().hitTestPoint(new Vec(5, 5), 2)).toBe(false)
+	})
+
+	it('does not hit the sector inside the arc even with hitInside', () => {
+		expect(quarter().hitTestPoint(new Vec(5, 5), 0, true)).toBe(false)
+	})
+})
+
+describe('Arc2d.hitTestLineSegment', () => {
+	it('hits a segment crossing the arc', () => {
+		expect(quarter().hitTestLineSegment(new Vec(5, 0), new Vec(5, 20))).toBe(true)
+	})
+
+	it('misses a segment crossing the circle outside the arc', () => {
+		// crosses the circle at (-5, 8.66), which is at 120° and not on the quarter arc
+		expect(quarter().hitTestLineSegment(new Vec(-5, 0), new Vec(-5, 20))).toBe(false)
+		// but it is on the complementary arc
+		expect(threeQuarter().hitTestLineSegment(new Vec(-5, 0), new Vec(-5, 20))).toBe(true)
+	})
+
+	it('misses a segment that does not reach the circle', () => {
+		expect(quarter().hitTestLineSegment(new Vec(20, 20), new Vec(30, 30))).toBe(false)
+		expect(quarter().hitTestLineSegment(new Vec(1, 1), new Vec(2, 2))).toBe(false)
+	})
+
+	// Locks in current behaviour, see #10555.
+	it('hits crossings just beyond the end points (known quirk)', () => {
+		// (5, -8.66) is at -60°, off the quarter arc, but getPointInArcT clamps it to the start
+		expect(quarter().hitTestLineSegment(new Vec(5, -20), new Vec(5, 0))).toBe(true)
+	})
+
+	it('checks both directions of the long arc', () => {
+		expect(threeQuarter().hitTestLineSegment(new Vec(5, -20), new Vec(5, 0))).toBe(true)
+		expect(threeQuarter().hitTestLineSegment(new Vec(5, 0), new Vec(5, 20))).toBe(false)
+	})
+})
+
+describe('Arc2d.getSvgPathData', () => {
+	it('emits a move and an arc command with the flags', () => {
+		expect(quarter().getSvgPathData()).toBe('M10, 0 A10 10 0 0 1 0, 10')
+		expect(threeQuarter().getSvgPathData()).toBe('M10, 0 A10 10 0 1 0 0, 10')
+	})
+
+	it('omits the move command when not first', () => {
+		expect(quarter().getSvgPathData(false)).toBe(' A10 10 0 0 1 0, 10')
+	})
+
+	it('rounds coordinates to two decimals', () => {
+		const arc = new Arc2d({
+			center: new Vec(0, 0),
+			start: new Vec(10, 0),
+			end: new Vec(10 / Math.SQRT2, 10 / Math.SQRT2),
+			sweepFlag: 1,
+			largeArcFlag: 0,
+		})
+		expect(arc.getSvgPathData()).toBe('M10, 0 A10 10 0 0 1 7.07, 7.07')
 	})
 })