tldraw 4.3.0-canary.9c474ef3fad5 → 4.3.0-canary.a2419250444e

package/src/lib/utils/tldr/buildFromV1Document.ts

@@ -17,6 +17,7 @@ import {
 	TLShapeId,
 	Vec,
 	VecModel,
+	b64Vecs,
 	clamp,
 	createShapeId,
 	fetch,
@@ -370,6 +371,9 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 								break
 							}
 
+							const points = v1Shape.points.map(getV2Point)
+							const base64Points = b64Vecs.encodePoints(points)
+
 							editor.createShapes([
 								{
 									...inCommon,
@@ -381,7 +385,10 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 										dash: getV2Dash(v1Shape.style.dash),
 										isPen: false,
 										isComplete: v1Shape.isComplete,
-										segments: [{ type: 'free', points: v1Shape.points.map(getV2Point) }],
+										segments: [{ type: 'free', points: base64Points }],
+										scale: 1,
+										scaleX: 1,
+										scaleY: 1,
 									},
 								},
 							])
@@ -518,7 +525,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 					const util = editor.getShapeUtil<TLArrowShape>('arrow')
 
 					// dumb but necessary
-					editor.inputs.ctrlKey = false
+					editor.inputs.setCtrlKey(false)
 
 					for (const handleId of ['start', 'end'] as const) {
 						const bindingId = v1Shape.handles[handleId].bindingId

package/src/test/Editor.test.tsx

@@ -143,17 +143,17 @@ describe('shapes that are moved to another page', () => {
 it('Begins dragging from pointer move', () => {
 	editor.pointerDown(0, 0)
 	editor.pointerMove(2, 2)
-	expect(editor.inputs.isDragging).toBe(false)
+	expect(editor.inputs.getIsDragging()).toBe(false)
 	editor.pointerMove(10, 10)
-	expect(editor.inputs.isDragging).toBe(true)
+	expect(editor.inputs.getIsDragging()).toBe(true)
 })
 
 it('Begins dragging from wheel', () => {
 	editor.pointerDown(0, 0)
 	editor.wheel(2, 2)
-	expect(editor.inputs.isDragging).toBe(false)
+	expect(editor.inputs.getIsDragging()).toBe(false)
 	editor.wheel(10, 10)
-	expect(editor.inputs.isDragging).toBe(true)
+	expect(editor.inputs.getIsDragging()).toBe(true)
 })
 
 it('Does not create an undo stack item when first clicking on an empty canvas', () => {
@@ -266,36 +266,47 @@ describe('Editor.TickManager', () => {
 		// usually this is called by the app's tick manager, using the elapsed time
 		// between two animation frames, but we're calling it directly here.
 		const tick = (ms: number) => {
-			// @ts-ignore
-			editor._tickManager.updatePointerVelocity(ms)
+			editor.inputs.updatePointerVelocity(ms)
 		}
 
 		// 1. pointer velocity should be 0 when there is no movement
-		expect(editor.inputs.pointerVelocity.toJson()).toCloselyMatchObject({ x: 0, y: 0 })
+		expect(editor.inputs.getPointerVelocity().toJson()).toCloselyMatchObject({ x: 0, y: 0 })
 
 		editor.pointerMove(10, 10)
 
 		// 2. moving is not enough, we also need to wait a frame before the velocity is updated
-		expect(editor.inputs.pointerVelocity.toJson()).toCloselyMatchObject({ x: 0, y: 0 })
+		expect(editor.inputs.getPointerVelocity().toJson()).toCloselyMatchObject({ x: 0, y: 0 })
 
 		// 3. once time passes, the pointer velocity should be updated
 		tick(16)
-		expect(editor.inputs.pointerVelocity.toJson()).toCloselyMatchObject({ x: 0.3125, y: 0.3125 })
+		expect(editor.inputs.getPointerVelocity().toJson()).toCloselyMatchObject({
+			x: 0.3125,
+			y: 0.3125,
+		})
 
 		// 4. let's do it again, it should be updated again. move, tick, measure
 		editor.pointerMove(20, 20)
 		tick(16)
-		expect(editor.inputs.pointerVelocity.toJson()).toCloselyMatchObject({ x: 0.46875, y: 0.46875 })
+		expect(editor.inputs.getPointerVelocity().toJson()).toCloselyMatchObject({
+			x: 0.46875,
+			y: 0.46875,
+		})
 
 		// 5. if we tick again without movement, the velocity should decay
 		tick(16)
 
-		expect(editor.inputs.pointerVelocity.toJson()).toCloselyMatchObject({ x: 0.23437, y: 0.23437 })
+		expect(editor.inputs.getPointerVelocity().toJson()).toCloselyMatchObject({
+			x: 0.23437,
+			y: 0.23437,
+		})
 
 		// 6. if updatePointerVelocity is (for whatever reason) called with an elapsed time of zero milliseconds, it should be ignored
 		tick(0)
 
-		expect(editor.inputs.pointerVelocity.toJson()).toCloselyMatchObject({ x: 0.23437, y: 0.23437 })
+		expect(editor.inputs.getPointerVelocity().toJson()).toCloselyMatchObject({
+			x: 0.23437,
+			y: 0.23437,
+		})
 	})
 })
 
@@ -677,9 +688,9 @@ describe('middle-click panning', () => {
 			button: 1,
 		})
 		editor.pointerMove(100, 100)
-		expect(editor.inputs.isPanning).toBe(true)
+		expect(editor.inputs.getIsPanning()).toBe(true)
 		editor.pointerUp(100, 100)
-		expect(editor.inputs.isPanning).toBe(false)
+		expect(editor.inputs.getIsPanning()).toBe(false)
 	})
 
 	it('does not clear thee isPanning state if the space bar is down', () => {
@@ -688,51 +699,51 @@ describe('middle-click panning', () => {
 			button: 1,
 		})
 		editor.pointerMove(100, 100)
-		expect(editor.inputs.isPanning).toBe(true)
+		expect(editor.inputs.getIsPanning()).toBe(true)
 		editor.keyDown(' ')
 		editor.pointerUp(100, 100, {
 			button: 1,
 		})
-		expect(editor.inputs.isPanning).toBe(true)
+		expect(editor.inputs.getIsPanning()).toBe(true)
 
 		editor.keyUp(' ')
-		expect(editor.inputs.isPanning).toBe(false)
+		expect(editor.inputs.getIsPanning()).toBe(false)
 	})
 })
 
 describe('dragging', () => {
 	it('drags correctly at 100% zoom', () => {
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 0).pointerDown()
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 1)
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 5)
-		expect(editor.inputs.isDragging).toBe(true)
+		expect(editor.inputs.getIsDragging()).toBe(true)
 	})
 
 	it('drags correctly at 150% zoom', () => {
 		editor.setCamera({ x: 0, y: 0, z: 8 }).forceTick()
 
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 0).pointerDown()
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 2)
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 5)
-		expect(editor.inputs.isDragging).toBe(true)
+		expect(editor.inputs.getIsDragging()).toBe(true)
 	})
 
 	it('drags correctly at 50% zoom', () => {
 		editor.setCamera({ x: 0, y: 0, z: 0.1 }).forceTick()
 
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 0).pointerDown()
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 2)
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 5)
-		expect(editor.inputs.isDragging).toBe(true)
+		expect(editor.inputs.getIsDragging()).toBe(true)
 	})
 })
 

package/src/test/EraserTool.test.ts

@@ -1,5 +1,6 @@
 import { createShapeId } from '@tldraw/editor'
 import { vi } from 'vitest'
+import { createDrawSegments } from './test-jsx'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -72,18 +73,15 @@ beforeEach(() => {
 			x: 0,
 			y: 300,
 			props: {
-				segments: [
-					{
-						type: 'free',
-						points: [
-							{ x: 0, y: 0 },
-							{ x: 2, y: 50 },
-							{ x: 10, y: 100 },
-							{ x: 48, y: 100 },
-							{ x: 100, y: 100 },
-						],
-					},
-				],
+				segments: createDrawSegments([
+					[
+						{ x: 0, y: 0 },
+						{ x: 2, y: 50 },
+						{ x: 10, y: 100 },
+						{ x: 48, y: 100 },
+						{ x: 100, y: 100 },
+					],
+				]),
 			},
 		},
 	])

package/src/test/TestEditor.ts

@@ -259,7 +259,7 @@ export class TestEditor extends Editor {
 
 	paste(point?: VecLike) {
 		if (this.clipboard !== null) {
-			const p = this.inputs.shiftKey ? this.inputs.currentPagePoint : point
+			const p = this.inputs.getShiftKey() ? this.inputs.getCurrentPagePoint() : point
 
 			this.markHistoryStoppingPoint('pasting')
 			this.putContentOntoCurrentPage(this.clipboard, {
@@ -349,8 +349,8 @@ export class TestEditor extends Editor {
 	}
 
 	protected getPointerEventInfo(
-		x = this.inputs.currentScreenPoint.x,
-		y = this.inputs.currentScreenPoint.y,
+		x = this.inputs.getCurrentScreenPoint().x,
+		y = this.inputs.getCurrentScreenPoint().y,
 		options?: Partial<TLPointerEventInfo> | TLShapeId,
 		modifiers?: EventModifiers
 	) {
@@ -363,11 +363,11 @@ export class TestEditor extends Editor {
 			name: 'pointer_down',
 			type: 'pointer',
 			pointerId: 1,
-			shiftKey: this.inputs.shiftKey,
-			ctrlKey: this.inputs.ctrlKey,
-			altKey: this.inputs.altKey,
-			metaKey: this.inputs.metaKey,
-			accelKey: isAccelKey({ ...this.inputs, ...modifiers }),
+			shiftKey: this.inputs.getShiftKey(),
+			ctrlKey: this.inputs.getCtrlKey(),
+			altKey: this.inputs.getAltKey(),
+			metaKey: this.inputs.getMetaKey(),
+			accelKey: isAccelKey({ ...this.inputs.toJson(), ...modifiers }),
 			point: { x, y, z: null },
 			button: 0,
 			isPen: false,
@@ -426,8 +426,8 @@ export class TestEditor extends Editor {
 	}
 
 	pointerMove(
-		x = this.inputs.currentScreenPoint.x,
-		y = this.inputs.currentScreenPoint.y,
+		x = this.inputs.getCurrentScreenPoint().x,
+		y = this.inputs.getCurrentScreenPoint().y,
 		options?: PointerEventInit,
 		modifiers?: EventModifiers
 	) {
@@ -439,8 +439,8 @@ export class TestEditor extends Editor {
 	}
 
 	pointerDown(
-		x = this.inputs.currentScreenPoint.x,
-		y = this.inputs.currentScreenPoint.y,
+		x = this.inputs.getCurrentScreenPoint().x,
+		y = this.inputs.getCurrentScreenPoint().y,
 		options?: PointerEventInit,
 		modifiers?: EventModifiers
 	) {
@@ -452,8 +452,8 @@ export class TestEditor extends Editor {
 	}
 
 	pointerUp(
-		x = this.inputs.currentScreenPoint.x,
-		y = this.inputs.currentScreenPoint.y,
+		x = this.inputs.getCurrentScreenPoint().x,
+		y = this.inputs.getCurrentScreenPoint().y,
 		options?: PointerEventInit,
 		modifiers?: EventModifiers
 	) {
@@ -465,8 +465,8 @@ export class TestEditor extends Editor {
 	}
 
 	click(
-		x = this.inputs.currentScreenPoint.x,
-		y = this.inputs.currentScreenPoint.y,
+		x = this.inputs.getCurrentScreenPoint().x,
+		y = this.inputs.getCurrentScreenPoint().y,
 		options?: PointerEventInit,
 		modifiers?: EventModifiers
 	) {
@@ -476,8 +476,8 @@ export class TestEditor extends Editor {
 	}
 
 	rightClick(
-		x = this.inputs.currentScreenPoint.x,
-		y = this.inputs.currentScreenPoint.y,
+		x = this.inputs.getCurrentScreenPoint().x,
+		y = this.inputs.getCurrentScreenPoint().y,
 		options?: PointerEventInit,
 		modifiers?: EventModifiers
 	) {
@@ -495,8 +495,8 @@ export class TestEditor extends Editor {
 	}
 
 	doubleClick(
-		x = this.inputs.currentScreenPoint.x,
-		y = this.inputs.currentScreenPoint.y,
+		x = this.inputs.getCurrentScreenPoint().x,
+		y = this.inputs.getCurrentScreenPoint().y,
 		options?: PointerEventInit,
 		modifiers?: EventModifiers
 	) {
@@ -536,10 +536,10 @@ export class TestEditor extends Editor {
 	keyUp(key: string, options = {} as Partial<Omit<TLKeyboardEventInfo, 'key'>>) {
 		this.dispatch({
 			...this.getKeyboardEventInfo(key, 'key_up', {
-				shiftKey: this.inputs.shiftKey && key !== 'Shift',
-				ctrlKey: this.inputs.ctrlKey && !(key === 'Control' || key === 'Meta'),
-				altKey: this.inputs.altKey && key !== 'Alt',
-				metaKey: this.inputs.metaKey && key !== 'Meta',
+				shiftKey: this.inputs.getShiftKey() && key !== 'Shift',
+				ctrlKey: this.inputs.getCtrlKey() && !(key === 'Control' || key === 'Meta'),
+				altKey: this.inputs.getAltKey() && key !== 'Alt',
+				metaKey: this.inputs.getMetaKey() && key !== 'Meta',
 				...options,
 			}),
 		}).forceTick()
@@ -547,14 +547,15 @@ export class TestEditor extends Editor {
 	}
 
 	wheel(dx: number, dy: number, options = {} as Partial<Omit<TLWheelEventInfo, 'delta'>>) {
+		const currentScreenPoint = this.inputs.getCurrentScreenPoint()
 		this.dispatch({
 			type: 'wheel',
 			name: 'wheel',
-			point: new Vec(this.inputs.currentScreenPoint.x, this.inputs.currentScreenPoint.y),
-			shiftKey: this.inputs.shiftKey,
-			ctrlKey: this.inputs.ctrlKey,
-			altKey: this.inputs.altKey,
-			metaKey: this.inputs.metaKey,
+			point: new Vec(currentScreenPoint.x, currentScreenPoint.y),
+			shiftKey: this.inputs.getShiftKey(),
+			ctrlKey: this.inputs.getCtrlKey(),
+			altKey: this.inputs.getAltKey(),
+			metaKey: this.inputs.getMetaKey(),
 			accelKey: isAccelKey(this.inputs),
 			...options,
 			delta: { x: dx, y: dy },
@@ -573,8 +574,8 @@ export class TestEditor extends Editor {
 	}
 
 	pinchStart(
-		x = this.inputs.currentScreenPoint.x,
-		y = this.inputs.currentScreenPoint.y,
+		x = this.inputs.getCurrentScreenPoint().x,
+		y = this.inputs.getCurrentScreenPoint().y,
 		z: number,
 		dx: number,
 		dy: number,
@@ -584,10 +585,10 @@ export class TestEditor extends Editor {
 		this.dispatch({
 			type: 'pinch',
 			name: 'pinch_start',
-			shiftKey: this.inputs.shiftKey,
-			ctrlKey: this.inputs.ctrlKey,
-			altKey: this.inputs.altKey,
-			metaKey: this.inputs.metaKey,
+			shiftKey: this.inputs.getShiftKey(),
+			ctrlKey: this.inputs.getCtrlKey(),
+			altKey: this.inputs.getAltKey(),
+			metaKey: this.inputs.getMetaKey(),
 			accelKey: isAccelKey(this.inputs),
 			...options,
 			point: { x, y, z },
@@ -597,8 +598,8 @@ export class TestEditor extends Editor {
 	}
 
 	pinchTo(
-		x = this.inputs.currentScreenPoint.x,
-		y = this.inputs.currentScreenPoint.y,
+		x = this.inputs.getCurrentScreenPoint().x,
+		y = this.inputs.getCurrentScreenPoint().y,
 		z: number,
 		dx: number,
 		dy: number,
@@ -608,10 +609,10 @@ export class TestEditor extends Editor {
 		this.dispatch({
 			type: 'pinch',
 			name: 'pinch_start',
-			shiftKey: this.inputs.shiftKey,
-			ctrlKey: this.inputs.ctrlKey,
-			altKey: this.inputs.altKey,
-			metaKey: this.inputs.metaKey,
+			shiftKey: this.inputs.getShiftKey(),
+			ctrlKey: this.inputs.getCtrlKey(),
+			altKey: this.inputs.getAltKey(),
+			metaKey: this.inputs.getMetaKey(),
 			accelKey: isAccelKey(this.inputs),
 			...options,
 			point: { x, y, z },
@@ -621,8 +622,8 @@ export class TestEditor extends Editor {
 	}
 
 	pinchEnd(
-		x = this.inputs.currentScreenPoint.x,
-		y = this.inputs.currentScreenPoint.y,
+		x = this.inputs.getCurrentScreenPoint().x,
+		y = this.inputs.getCurrentScreenPoint().y,
 		z: number,
 		dx: number,
 		dy: number,
@@ -632,10 +633,10 @@ export class TestEditor extends Editor {
 		this.dispatch({
 			type: 'pinch',
 			name: 'pinch_end',
-			shiftKey: this.inputs.shiftKey,
-			ctrlKey: this.inputs.ctrlKey,
-			altKey: this.inputs.altKey,
-			metaKey: this.inputs.metaKey,
+			shiftKey: this.inputs.getShiftKey(),
+			ctrlKey: this.inputs.getCtrlKey(),
+			altKey: this.inputs.getAltKey(),
+			metaKey: this.inputs.getMetaKey(),
 			accelKey: isAccelKey(this.inputs),
 			...options,
 			point: { x, y, z },

package/src/test/TldrawEditor.test.tsx

@@ -19,6 +19,7 @@ import { vi } from 'vitest'
 import { defaultShapeUtils } from '../lib/defaultShapeUtils'
 import { defaultTools } from '../lib/defaultTools'
 import { defaultAddFontsFromNode, tipTapDefaultExtensions } from '../lib/utils/text/richText'
+import { createDrawSegments } from './test-jsx'
 import {
 	renderTldrawComponent,
 	renderTldrawComponentWithEditor,
@@ -193,14 +194,14 @@ describe('<TldrawEditor />', () => {
 			{ type: 'bookmark' as const, props: { w: 100, h: 100, url: 'https://example.com' } },
 			{
 				type: 'draw' as const,
-				props: { segments: [{ type: 'free' as const, points: [{ x: 0, y: 0, z: 0.5 }] }] },
+				props: { segments: createDrawSegments([[{ x: 0, y: 0, z: 0.5 }]]) },
 			},
 			{ type: 'embed' as const, props: { w: 100, h: 100, url: 'https://example.com' } },
 			{ type: 'frame' as const, props: { w: 100, h: 100 } },
 			{ type: 'geo' as const, props: { w: 100, h: 100, geo: 'rectangle' as const } },
 			{
 				type: 'highlight' as const,
-				props: { segments: [{ type: 'free' as const, points: [{ x: 0, y: 0, z: 0.5 }] }] },
+				props: { segments: createDrawSegments([[{ x: 0, y: 0, z: 0.5 }]]) },
 			},
 			{ type: 'image' as const, props: { w: 100, h: 100 } },
 			{