[tech debt] Primitives renaming party / cleanup (#2396)

This PR:
- renames Vec2d to Vec
- renames Vec2dModel to VecModel
- renames Box2d to Box
- renames Box2dModel to BoxModel
- renames Matrix2d to Mat
- renames Matrix2dModel to MatModel
- removes unused primitive helpers
- removes unused exports
- removes a few redundant tests in dgreensp

### Change Type

- [x] `major` — Breaking change

### Release Notes

- renames Vec2d to Vec
- renames Vec2dModel to VecModel
- renames Box2d to Box
- renames Box2dModel to BoxModel
- renames Matrix2d to Mat
- renames Matrix2dModel to MatModel
- removes unused primitive helpers

apps/examples/e2e/tests/test-text.spec.ts

@@ -1,5 +1,5 @@
 import test, { Page, expect } from '@playwright/test'
-import { Box2dModel, Editor } from '@tldraw/tldraw'
+import { BoxModel, Editor } from '@tldraw/tldraw'
 import { setupPage } from '../shared-e2e'
 
 export function sleep(ms: number) {
@@ -29,7 +29,7 @@ const measureTextSpansOptions = {
 	textAlign: 'start' as 'start' | 'middle' | 'end',
 }
 
-function formatLines(spans: { box: Box2dModel; text: string }[]) {
+function formatLines(spans: { box: BoxModel; text: string }[]) {
 	const lines = []
 
 	let currentLine: string[] | null = null
@@ -85,7 +85,7 @@ test.describe('text measurement', () => {
 
 	test('should get a single text span', async () => {
 		const spans = await page.evaluate<
-			{ text: string; box: Box2dModel }[],
+			{ text: string; box: BoxModel }[],
 			typeof measureTextSpansOptions
 		>(
 			async (options) => editor.textMeasure.measureTextSpans('testing', options),
@@ -97,7 +97,7 @@ test.describe('text measurement', () => {
 
 	test('should wrap a word when it has to', async () => {
 		const spans = await page.evaluate<
-			{ text: string; box: Box2dModel }[],
+			{ text: string; box: BoxModel }[],
 			typeof measureTextSpansOptions
 		>(
 			async (options) => editor.textMeasure.measureTextSpans('testing', { ...options, width: 50 }),
@@ -109,7 +109,7 @@ test.describe('text measurement', () => {
 
 	test('should preserve whitespace at line breaks', async () => {
 		const spans = await page.evaluate<
-			{ text: string; box: Box2dModel }[],
+			{ text: string; box: BoxModel }[],
 			typeof measureTextSpansOptions
 		>(
 			async (options) => editor.textMeasure.measureTextSpans('testing   testing', options),
@@ -121,7 +121,7 @@ test.describe('text measurement', () => {
 
 	test('should preserve whitespace at the end of wrapped lines', async () => {
 		const spans = await page.evaluate<
-			{ text: string; box: Box2dModel }[],
+			{ text: string; box: BoxModel }[],
 			typeof measureTextSpansOptions
 		>(
 			async (options) => editor.textMeasure.measureTextSpans('testing testing   ', options),
@@ -136,7 +136,7 @@ test.describe('text measurement', () => {
 
 	test('preserves whitespace at the end of unwrapped lines', async () => {
 		const spans = await page.evaluate<
-			{ text: string; box: Box2dModel }[],
+			{ text: string; box: BoxModel }[],
 			typeof measureTextSpansOptions
 		>(
 			async (options) =>
@@ -149,7 +149,7 @@ test.describe('text measurement', () => {
 
 	test('preserves whitespace at the start of an unwrapped line', async () => {
 		const spans = await page.evaluate<
-			{ text: string; box: Box2dModel }[],
+			{ text: string; box: BoxModel }[],
 			typeof measureTextSpansOptions
 		>(
 			async (options) =>
@@ -162,7 +162,7 @@ test.describe('text measurement', () => {
 
 	test('should place starting whitespace on its own line if it has to', async () => {
 		const spans = await page.evaluate<
-			{ text: string; box: Box2dModel }[],
+			{ text: string; box: BoxModel }[],
 			typeof measureTextSpansOptions
 		>(
 			async (options) => editor.textMeasure.measureTextSpans('  testing testing', options),
@@ -174,7 +174,7 @@ test.describe('text measurement', () => {
 
 	test('should handle multiline text', async () => {
 		const spans = await page.evaluate<
-			{ text: string; box: Box2dModel }[],
+			{ text: string; box: BoxModel }[],
 			typeof measureTextSpansOptions
 		>(
 			async (options) =>
@@ -192,7 +192,7 @@ test.describe('text measurement', () => {
 
 	test('should break long strings of text', async () => {
 		const spans = await page.evaluate<
-			{ text: string; box: Box2dModel }[],
+			{ text: string; box: BoxModel }[],
 			typeof measureTextSpansOptions
 		>(
 			async (options) =>
@@ -212,7 +212,7 @@ test.describe('text measurement', () => {
 
 	test('should return an empty array if the text is empty', async () => {
 		const spans = await page.evaluate<
-			{ text: string; box: Box2dModel }[],
+			{ text: string; box: BoxModel }[],
 			typeof measureTextSpansOptions
 		>(async (options) => editor.textMeasure.measureTextSpans('', options), measureTextSpansOptions)
 
@@ -221,7 +221,7 @@ test.describe('text measurement', () => {
 
 	test('should handle trailing newlines', async () => {
 		const spans = await page.evaluate<
-			{ text: string; box: Box2dModel }[],
+			{ text: string; box: BoxModel }[],
 			typeof measureTextSpansOptions
 		>(
 			async (options) => editor.textMeasure.measureTextSpans('hi\n\n\n', options),
@@ -233,7 +233,7 @@ test.describe('text measurement', () => {
 
 	test('should handle only newlines', async () => {
 		const spans = await page.evaluate<
-			{ text: string; box: Box2dModel }[],
+			{ text: string; box: BoxModel }[],
 			typeof measureTextSpansOptions
 		>(
 			async (options) => editor.textMeasure.measureTextSpans('\n\n\n', options),

apps/examples/src/examples/floaty-window/FloatyExample.tsx

@@ -1,4 +1,4 @@
-import { Tldraw, Vec2d, useContainer, useEditor } from '@tldraw/tldraw'
+import { Tldraw, Vec, useContainer, useEditor } from '@tldraw/tldraw'
 import '@tldraw/tldraw/tldraw.css'
 import { useEffect } from 'react'
 
@@ -32,7 +32,7 @@ function SneakyFloatyHook() {
 			if (sx !== x || sy !== y) {
 				x = sx
 				y = sy
-				editor.setCamera(new Vec2d(-x, -y))
+				editor.setCamera(new Vec(-x, -y))
 			}
 		}
 

apps/examples/src/examples/screenshot-tool/ScreenshotTool/childStates/Dragging.ts

@@ -1,4 +1,4 @@
-import { Box2d, StateNode, atom, copyAs, exportAs } from '@tldraw/tldraw'
+import { Box, StateNode, atom, copyAs, exportAs } from '@tldraw/tldraw'
 
 // There's a guide at the bottom of this file!
 
@@ -6,7 +6,7 @@ export class ScreenshotDragging extends StateNode {
 	static override id = 'dragging'
 
 	// [1]
-	screenshotBox = atom('screenshot brush', new Box2d())
+	screenshotBox = atom('screenshot brush', new Box())
 
 	// [2]
 	override onEnter = () => {
@@ -30,7 +30,7 @@ export class ScreenshotDragging extends StateNode {
 			inputs: { shiftKey, altKey, originPagePoint, currentPagePoint },
 		} = this.editor
 
-		const box = Box2d.FromPoints([originPagePoint, currentPagePoint])
+		const box = Box.FromPoints([originPagePoint, currentPagePoint])
 
 		if (shiftKey) {
 			if (box.w > box.h * (16 / 9)) {

apps/examples/src/examples/screenshot-tool/ScreenshotToolExample.tsx

@@ -1,10 +1,10 @@
 import {
-	Box2d,
+	Box,
 	TLEditorComponents,
 	TLUiAssetUrlOverrides,
 	TLUiOverrides,
 	Tldraw,
-	Vec2d,
+	Vec,
 	toolbarItem,
 	useEditor,
 	useValue,
@@ -69,11 +69,11 @@ function ScreenshotBox() {
 			// "page space", i.e. uneffected by scale, and relative to the tldraw
 			// page's top left corner.
 			const zoomLevel = editor.getZoomLevel()
-			const { x, y } = Vec2d.Sub(
+			const { x, y } = Vec.Sub(
 				editor.pageToScreen({ x: box.x, y: box.y }),
 				editor.getViewportScreenBounds()
 			)
-			return new Box2d(x, y, box.w * zoomLevel, box.h * zoomLevel)
+			return new Box(x, y, box.w * zoomLevel, box.h * zoomLevel)
 		},
 		[editor]
 	)

apps/examples/src/examples/speech-bubble/SpeechBubble/SpeechBubbleUtil.tsx

@@ -12,7 +12,7 @@ import {
 	TLOnBeforeUpdateHandler,
 	TLOnHandleChangeHandler,
 	TLOnResizeHandler,
-	Vec2d,
+	Vec,
 	deepCopy,
 	getDefaultColorTheme,
 	resizeBox,
@@ -128,21 +128,21 @@ export class SpeechBubbleUtil extends ShapeUtil<SpeechBubbleShape> {
 		const MIN_DISTANCE = slantedLength / 5
 		const MAX_DISTANCE = slantedLength / 1.5
 
-		const handleInShapeSpace = new Vec2d(handles.handle.x * w, handles.handle.y * h)
+		const handleInShapeSpace = new Vec(handles.handle.x * w, handles.handle.y * h)
 
 		const distanceToIntersection = handleInShapeSpace.dist(segmentsIntersection)
-		const center = new Vec2d(w / 2, h / 2)
-		const vHandle = Vec2d.Sub(handleInShapeSpace, center).uni()
+		const center = new Vec(w / 2, h / 2)
+		const vHandle = Vec.Sub(handleInShapeSpace, center).uni()
 
 		let newPoint = handleInShapeSpace
 
 		if (insideShape) {
-			newPoint = Vec2d.Add(segmentsIntersection, vHandle.mul(MIN_DISTANCE))
+			newPoint = Vec.Add(segmentsIntersection, vHandle.mul(MIN_DISTANCE))
 		} else {
 			if (distanceToIntersection <= MIN_DISTANCE) {
-				newPoint = Vec2d.Add(segmentsIntersection, vHandle.mul(MIN_DISTANCE))
+				newPoint = Vec.Add(segmentsIntersection, vHandle.mul(MIN_DISTANCE))
 			} else if (distanceToIntersection >= MAX_DISTANCE) {
-				newPoint = Vec2d.Add(segmentsIntersection, vHandle.mul(MAX_DISTANCE))
+				newPoint = Vec.Add(segmentsIntersection, vHandle.mul(MAX_DISTANCE))
 			}
 		}
 

apps/examples/src/examples/speech-bubble/SpeechBubble/helpers.tsx

@@ -1,19 +1,19 @@
-import { Vec2d, VecLike, lerp, pointInPolygon } from '@tldraw/tldraw'
+import { Vec, VecLike, lerp, pointInPolygon } from '@tldraw/tldraw'
 import { SpeechBubbleShape } from './SpeechBubbleUtil'
 
-export const getSpeechBubbleVertices = (shape: SpeechBubbleShape): Vec2d[] => {
+export const getSpeechBubbleVertices = (shape: SpeechBubbleShape): Vec[] => {
 	const { w, h, handles } = shape.props
 
-	const handleInShapeSpace = new Vec2d(handles.handle.x * w, handles.handle.y * h)
+	const handleInShapeSpace = new Vec(handles.handle.x * w, handles.handle.y * h)
 
-	const [tl, tr, br, bl] = [new Vec2d(0, 0), new Vec2d(w, 0), new Vec2d(w, h), new Vec2d(0, h)]
+	const [tl, tr, br, bl] = [new Vec(0, 0), new Vec(w, 0), new Vec(w, h), new Vec(0, h)]
 
 	const offsetH = w / 10
 	const offsetV = h / 10
 
 	const { adjustedIntersection, intersectionSegmentIndex } = getHandleIntersectionPoint(shape)
 
-	let vertices: Vec2d[]
+	let vertices: Vec[]
 
 	// Inject the tail segments into the geometry of the shape
 	switch (intersectionSegmentIndex) {
@@ -21,9 +21,9 @@ export const getSpeechBubbleVertices = (shape: SpeechBubbleShape): Vec2d[] => {
 			// top
 			vertices = [
 				tl,
-				new Vec2d(adjustedIntersection.x - offsetH, adjustedIntersection.y),
-				new Vec2d(handleInShapeSpace.x, handleInShapeSpace.y),
-				new Vec2d(adjustedIntersection.x + offsetH, adjustedIntersection.y),
+				new Vec(adjustedIntersection.x - offsetH, adjustedIntersection.y),
+				new Vec(handleInShapeSpace.x, handleInShapeSpace.y),
+				new Vec(adjustedIntersection.x + offsetH, adjustedIntersection.y),
 				tr,
 				br,
 				bl,
@@ -34,9 +34,9 @@ export const getSpeechBubbleVertices = (shape: SpeechBubbleShape): Vec2d[] => {
 			vertices = [
 				tl,
 				tr,
-				new Vec2d(adjustedIntersection.x, adjustedIntersection.y - offsetV),
-				new Vec2d(handleInShapeSpace.x, handleInShapeSpace.y),
-				new Vec2d(adjustedIntersection.x, adjustedIntersection.y + offsetV),
+				new Vec(adjustedIntersection.x, adjustedIntersection.y - offsetV),
+				new Vec(handleInShapeSpace.x, handleInShapeSpace.y),
+				new Vec(adjustedIntersection.x, adjustedIntersection.y + offsetV),
 				br,
 				bl,
 			]
@@ -47,9 +47,9 @@ export const getSpeechBubbleVertices = (shape: SpeechBubbleShape): Vec2d[] => {
 				tl,
 				tr,
 				br,
-				new Vec2d(adjustedIntersection.x + offsetH, adjustedIntersection.y),
-				new Vec2d(handleInShapeSpace.x, handleInShapeSpace.y),
-				new Vec2d(adjustedIntersection.x - offsetH, adjustedIntersection.y),
+				new Vec(adjustedIntersection.x + offsetH, adjustedIntersection.y),
+				new Vec(handleInShapeSpace.x, handleInShapeSpace.y),
+				new Vec(adjustedIntersection.x - offsetH, adjustedIntersection.y),
 				bl,
 			]
 			break
@@ -60,9 +60,9 @@ export const getSpeechBubbleVertices = (shape: SpeechBubbleShape): Vec2d[] => {
 				tr,
 				br,
 				bl,
-				new Vec2d(adjustedIntersection.x, adjustedIntersection.y + offsetV),
-				new Vec2d(handleInShapeSpace.x, handleInShapeSpace.y),
-				new Vec2d(adjustedIntersection.x, adjustedIntersection.y - offsetV),
+				new Vec(adjustedIntersection.x, adjustedIntersection.y + offsetV),
+				new Vec(handleInShapeSpace.x, handleInShapeSpace.y),
+				new Vec(adjustedIntersection.x, adjustedIntersection.y - offsetV),
 			]
 			break
 		default:
@@ -74,10 +74,10 @@ export const getSpeechBubbleVertices = (shape: SpeechBubbleShape): Vec2d[] => {
 
 export function getHandleIntersectionPoint(shape: SpeechBubbleShape) {
 	const { w, h, handles } = shape.props
-	const handleInShapeSpace = new Vec2d(handles.handle.x * w, handles.handle.y * h)
+	const handleInShapeSpace = new Vec(handles.handle.x * w, handles.handle.y * h)
 
-	const center = new Vec2d(w / 2, h / 2)
-	const corners = [new Vec2d(0, 0), new Vec2d(w, 0), new Vec2d(w, h), new Vec2d(0, h)]
+	const center = new Vec(w / 2, h / 2)
+	const corners = [new Vec(0, 0), new Vec(w, 0), new Vec(w, h), new Vec(0, h)]
 	const segments = [
 		[corners[0], corners[1]],
 		[corners[1], corners[2]],
@@ -85,8 +85,8 @@ export function getHandleIntersectionPoint(shape: SpeechBubbleShape) {
 		[corners[3], corners[0]],
 	]
 
-	let segmentsIntersection: Vec2d | null = null
-	let intersectionSegment: Vec2d[] | null = null
+	let segmentsIntersection: Vec | null = null
+	let intersectionSegment: Vec[] | null = null
 
 	// If the point inside of the box's corners?
 	const insideShape = pointInPolygon(handleInShapeSpace, corners)
@@ -94,7 +94,7 @@ export function getHandleIntersectionPoint(shape: SpeechBubbleShape) {
 	// We want to be sure we get an intersection, so if the point is
 	// inside the shape, push it away from the center by a big distance
 	const pointToCheck = insideShape
-		? Vec2d.Add(handleInShapeSpace, Vec2d.Sub(handleInShapeSpace, center).uni().mul(1000000))
+		? Vec.Add(handleInShapeSpace, Vec.Sub(handleInShapeSpace, center).uni().mul(1000000))
 		: handleInShapeSpace
 
 	// Test each segment for an intersection
@@ -120,11 +120,11 @@ export function getHandleIntersectionPoint(shape: SpeechBubbleShape) {
 	const intersectionSegmentIndex = segments.indexOf(intersectionSegment)
 
 	// a normalised vector from start to end, so this can work in any direction
-	const unit = Vec2d.Sub(end, start).uni()
+	const unit = Vec.Sub(end, start).uni()
 
 	// Where is the intersection relative to the start?
-	const totalDistance = Vec2d.Dist(start, end)
-	const distance = Vec2d.Dist(segmentsIntersection, start)
+	const totalDistance = Vec.Dist(start, end)
+	const distance = Vec.Dist(segmentsIntersection, start)
 
 	// make it stick to the middle
 	const middleRelative = mapRange(0, totalDistance, -1, 1, distance) // absolute -> -1 to 1
@@ -170,7 +170,7 @@ function intersectLineSegmentLineSegment(a1: VecLike, a2: VecLike, b1: VecLike,
 		const ua = ua_t / u_b
 		const ub = ub_t / u_b
 		if (0 <= ua && ua <= 1 && 0 <= ub && ub <= 1) {
-			return Vec2d.AddXY(a1, ua * AVx, ua * AVy)
+			return Vec.AddXY(a1, ua * AVx, ua * AVy)
 		}
 	}
 

apps/examples/src/examples/things-on-the-canvas/OnTheCanvas.tsx

@@ -4,7 +4,7 @@ import {
 	TLEditorComponents,
 	track,
 	useEditor,
-	Vec2d,
+	Vec,
 } from '@tldraw/tldraw'
 import '@tldraw/tldraw/tldraw.css'
 import { useState } from 'react'
@@ -62,7 +62,7 @@ const MyComponentInFront = track(() => {
 
 	if (!selectionRotatedPageBounds) return null
 
-	const pageCoordinates = Vec2d.Sub(
+	const pageCoordinates = Vec.Sub(
 		editor.pageToScreen(selectionRotatedPageBounds.point),
 		editor.getViewportScreenBounds()
 	)