tldraw 4.3.0-next.f4772c19540d → 4.3.0

package/src/lib/shapes/arrow/shared.ts

@@ -38,7 +38,7 @@ export function getBoundShapeInfoForTerminal(
 	terminalName: 'start' | 'end'
 ): BoundShapeInfo | undefined {
 	const binding = editor
-		.getBindingsFromShape<TLArrowBinding>(arrow, 'arrow')
+		.getBindingsFromShape(arrow, 'arrow')
 		.find((b) => b.props.terminal === terminalName)
 	if (!binding) return
 
@@ -105,7 +105,7 @@ export interface TLArrowBindings {
 const arrowBindingsCache = createComputedCache(
 	'arrow bindings',
 	(editor: Editor, arrow: TLArrowShape) => {
-		const bindings = editor.getBindingsFromShape<TLArrowBinding>(arrow.id, 'arrow')
+		const bindings = editor.getBindingsFromShape(arrow.id, 'arrow')
 		return {
 			start: bindings.find((b) => b.props.terminal === 'start'),
 			end: bindings.find((b) => b.props.terminal === 'end'),
@@ -223,7 +223,7 @@ export function createOrUpdateArrowBinding(
 	const targetId = typeof target === 'string' ? target : target.id
 
 	const existingMany = editor
-		.getBindingsFromShape<TLArrowBinding>(arrowId, 'arrow')
+		.getBindingsFromShape(arrowId, 'arrow')
 		.filter((b) => b.props.terminal === props.terminal)
 
 	// if we've somehow ended up with too many bindings, delete the extras
@@ -254,7 +254,7 @@ export function createOrUpdateArrowBinding(
  */
 export function removeArrowBinding(editor: Editor, arrow: TLArrowShape, terminal: 'start' | 'end') {
 	const existing = editor
-		.getBindingsFromShape<TLArrowBinding>(arrow, 'arrow')
+		.getBindingsFromShape(arrow, 'arrow')
 		.filter((b) => b.props.terminal === terminal)
 
 	editor.deleteBindings(existing)

package/src/lib/shapes/arrow/toolStates/Idle.tsx

@@ -1,4 +1,5 @@
 import { StateNode, TLKeyboardEventInfo, TLPointerEventInfo, TLShapeId } from '@tldraw/editor'
+import { startEditingShapeWithRichText } from '../../../tools/SelectTool/selectHelpers'
 import { ArrowShapeUtil } from '../ArrowShapeUtil'
 import { clearArrowTargetState, updateArrowTargetState } from '../arrowTargetState'
 
@@ -40,20 +41,9 @@ export class Idle extends StateNode {
 	override onKeyUp(info: TLKeyboardEventInfo) {
 		this.update()
 		if (info.key === 'Enter') {
-			if (this.editor.getIsReadonly()) return null
 			const onlySelectedShape = this.editor.getOnlySelectedShape()
-			// If the only selected shape is editable, start editing it
-			if (
-				onlySelectedShape &&
-				this.editor.getShapeUtil(onlySelectedShape).canEdit(onlySelectedShape)
-			) {
-				this.editor.setCurrentTool('select')
-				this.editor.setEditingShape(onlySelectedShape.id)
-				this.editor.root.getCurrent()?.transition('editing_shape', {
-					...info,
-					target: 'shape',
-					shape: onlySelectedShape,
-				})
+			if (this.editor.canEditShape(onlySelectedShape)) {
+				startEditingShapeWithRichText(this.editor, onlySelectedShape, { selectAll: true })
 			}
 		}
 	}
@@ -63,7 +53,7 @@ export class Idle extends StateNode {
 
 		const targetState = updateArrowTargetState({
 			editor: this.editor,
-			pointInPageSpace: this.editor.inputs.currentPagePoint,
+			pointInPageSpace: this.editor.inputs.getCurrentPagePoint(),
 			arrow: undefined,
 			isPrecise: this.isPrecise,
 			currentBinding: undefined,

package/src/lib/shapes/arrow/toolStates/Pointing.tsx

@@ -18,7 +18,7 @@ export class Pointing extends StateNode {
 
 		const targetState = updateArrowTargetState({
 			editor: this.editor,
-			pointInPageSpace: this.editor.inputs.currentPagePoint,
+			pointInPageSpace: this.editor.inputs.getCurrentPagePoint(),
 			arrow: undefined,
 			isPrecise: this.isPrecise,
 			currentBinding: undefined,
@@ -43,7 +43,7 @@ export class Pointing extends StateNode {
 	}
 
 	override onPointerMove() {
-		if (this.editor.inputs.isDragging) {
+		if (this.editor.inputs.getIsDragging()) {
 			if (!this.shape) {
 				this.createArrowShape()
 			}
@@ -90,13 +90,13 @@ export class Pointing extends StateNode {
 	}
 
 	createArrowShape() {
-		const { originPagePoint } = this.editor.inputs
+		const originPagePoint = this.editor.inputs.getOriginPagePoint()
 
 		const id = createShapeId()
 
 		this.markId = this.editor.markHistoryStoppingPoint(`creating_arrow:${id}`)
 		const newPoint = maybeSnapToGrid(originPagePoint, this.editor)
-		this.editor.createShape<TLArrowShape>({
+		this.editor.createShape({
 			id,
 			type: 'arrow',
 			x: newPoint.x,
@@ -159,7 +159,10 @@ export class Pointing extends StateNode {
 		{
 			const util = this.editor.getShapeUtil<TLArrowShape>('arrow')
 			const initial = this.shape
-			const point = this.editor.getPointInShapeSpace(shape, this.editor.inputs.currentPagePoint)
+			const point = this.editor.getPointInShapeSpace(
+				shape,
+				this.editor.inputs.getCurrentPagePoint()
+			)
 			const endHandle = handles.find((h) => h.id === 'end')!
 			const change = util.onHandleDrag?.(this.editor.getShape(shape)!, {
 				handle: { ...endHandle, x: point.x, y: point.y },

package/src/lib/shapes/bookmark/BookmarkShapeUtil.tsx

@@ -139,7 +139,7 @@ export function BookmarkShapeComponent({
 
 	const markAsHandledOnShiftKey = useCallback<PointerEventHandler>(
 		(e) => {
-			if (!editor.inputs.shiftKey) editor.markEventAsHandled(e)
+			if (!editor.inputs.getShiftKey()) editor.markEventAsHandled(e)
 		},
 		[editor]
 	)

package/src/lib/shapes/bookmark/bookmarks.ts

@@ -59,7 +59,7 @@ export function updateBookmarkAssetOnUrlChange(editor: Editor, shape: TLBookmark
 	if (editor.getAsset(assetId)) {
 		// Existing asset for this URL?
 		if (shape.props.assetId !== assetId) {
-			editor.updateShapes<TLBookmarkShape>([
+			editor.updateShapes([
 				{
 					id: shape.id,
 					type: shape.type,
@@ -71,7 +71,7 @@ export function updateBookmarkAssetOnUrlChange(editor: Editor, shape: TLBookmark
 		// No asset for this URL?
 
 		// First, clear out the existing asset reference
-		editor.updateShapes<TLBookmarkShape>([
+		editor.updateShapes([
 			{
 				id: shape.id,
 				type: shape.type,
@@ -103,7 +103,7 @@ const createBookmarkAssetOnUrlChange = debounce(async (editor: Editor, shape: TL
 		editor.createAssets([asset])
 
 		// And update the shape
-		editor.updateShapes<TLBookmarkShape>([
+		editor.updateShapes([
 			{
 				id: shape.id,
 				type: shape.type,

package/src/lib/shapes/draw/DrawShapeUtil.test.ts

@@ -0,0 +1,146 @@
+import { createShapeId, TLDrawShape } from '@tldraw/editor'
+import { TestEditor } from '../../../test/TestEditor'
+import { createDrawSegments, pointsToBase64 } from '../../utils/test-helpers'
+
+let editor: TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+
+afterEach(() => {
+	editor?.dispose()
+})
+
+describe('DrawShapeUtil dot detection', () => {
+	const shapeId = createShapeId('test-draw')
+
+	function createDrawShape(segments: TLDrawShape['props']['segments']): TLDrawShape {
+		editor.createShapes([
+			{
+				id: shapeId,
+				type: 'draw',
+				props: { segments },
+			},
+		])
+		return editor.getShape(shapeId) as TLDrawShape
+	}
+
+	describe('getIsDot behavior via hideResizeHandles', () => {
+		it('treats a shape with one segment and zero points as a dot', () => {
+			const shape = createDrawShape([{ type: 'free', path: '' }])
+			const util = editor.getShapeUtil('draw')
+			expect(util.hideResizeHandles(shape)).toBe(true)
+		})
+
+		it('treats a shape with one segment and one point as a dot', () => {
+			const shape = createDrawShape(createDrawSegments([[{ x: 0, y: 0, z: 0.5 }]]))
+			const util = editor.getShapeUtil('draw')
+			expect(util.hideResizeHandles(shape)).toBe(true)
+		})
+
+		it('treats a shape with one segment and two points as NOT a dot', () => {
+			const shape = createDrawShape(
+				createDrawSegments([
+					[
+						{ x: 0, y: 0, z: 0.5 },
+						{ x: 10, y: 10, z: 0.5 },
+					],
+				])
+			)
+			const util = editor.getShapeUtil('draw')
+			expect(util.hideResizeHandles(shape)).toBe(false)
+		})
+
+		it('treats a shape with one segment and many points as NOT a dot', () => {
+			const shape = createDrawShape(
+				createDrawSegments([
+					[
+						{ x: 0, y: 0, z: 0.5 },
+						{ x: 10, y: 10, z: 0.5 },
+						{ x: 20, y: 5, z: 0.5 },
+						{ x: 30, y: 15, z: 0.5 },
+					],
+				])
+			)
+			const util = editor.getShapeUtil('draw')
+			expect(util.hideResizeHandles(shape)).toBe(false)
+		})
+
+		it('treats a shape with multiple segments as NOT a dot', () => {
+			const shape = createDrawShape(
+				createDrawSegments([[{ x: 0, y: 0, z: 0.5 }], [{ x: 10, y: 10, z: 0.5 }]])
+			)
+			const util = editor.getShapeUtil('draw')
+			expect(util.hideResizeHandles(shape)).toBe(false)
+		})
+	})
+
+	describe('hideRotateHandle mirrors hideResizeHandles for dots', () => {
+		it('hides rotate handle for dots', () => {
+			const shape = createDrawShape(createDrawSegments([[{ x: 0, y: 0, z: 0.5 }]]))
+			const util = editor.getShapeUtil('draw')
+			expect(util.hideRotateHandle(shape)).toBe(true)
+		})
+
+		it('shows rotate handle for non-dots', () => {
+			const shape = createDrawShape(
+				createDrawSegments([
+					[
+						{ x: 0, y: 0, z: 0.5 },
+						{ x: 10, y: 10, z: 0.5 },
+					],
+				])
+			)
+			const util = editor.getShapeUtil('draw')
+			expect(util.hideRotateHandle(shape)).toBe(false)
+		})
+	})
+
+	describe('hideSelectionBoundsFg mirrors hideResizeHandles for dots', () => {
+		it('hides selection bounds for dots', () => {
+			const shape = createDrawShape(createDrawSegments([[{ x: 0, y: 0, z: 0.5 }]]))
+			const util = editor.getShapeUtil('draw')
+			expect(util.hideSelectionBoundsFg(shape)).toBe(true)
+		})
+
+		it('shows selection bounds for non-dots', () => {
+			const shape = createDrawShape(
+				createDrawSegments([
+					[
+						{ x: 0, y: 0, z: 0.5 },
+						{ x: 10, y: 10, z: 0.5 },
+					],
+				])
+			)
+			const util = editor.getShapeUtil('draw')
+			expect(util.hideSelectionBoundsFg(shape)).toBe(false)
+		})
+	})
+
+	describe('base64 encoding boundary conditions', () => {
+		it('correctly handles the boundary at exactly 24 base64 characters (2 points)', () => {
+			// First point is 16 base64 chars (Float32), delta points are 8 chars each (Float16)
+			// 2 points = 24 characters, which should NOT be a dot
+			const twoPointsBase64 = pointsToBase64([
+				{ x: 0, y: 0, z: 0.5 },
+				{ x: 1, y: 1, z: 0.5 },
+			])
+			expect(twoPointsBase64.length).toBe(24)
+
+			const shape = createDrawShape([{ type: 'free', path: twoPointsBase64 }])
+			const util = editor.getShapeUtil('draw')
+			expect(util.hideResizeHandles(shape)).toBe(false)
+		})
+
+		it('correctly handles the boundary at exactly 16 base64 characters (1 point)', () => {
+			// 1 point = 16 characters (Float32 first point), which should be a dot
+			const onePointBase64 = pointsToBase64([{ x: 0, y: 0, z: 0.5 }])
+			expect(onePointBase64.length).toBe(16)
+
+			const shape = createDrawShape([{ type: 'free', path: onePointBase64 }])
+			const util = editor.getShapeUtil('draw')
+			expect(util.hideResizeHandles(shape)).toBe(true)
+		})
+	})
+})

package/src/lib/shapes/draw/DrawShapeUtil.tsx

@@ -8,7 +8,6 @@ import {
 	SvgExportContext,
 	TLDrawShape,
 	TLDrawShapeProps,
-	TLDrawShapeSegment,
 	TLResizeInfo,
 	TLShapeUtilCanvasSvgDef,
 	VecLike,
@@ -18,7 +17,6 @@ import {
 	last,
 	lerp,
 	rng,
-	toFixed,
 	useEditor,
 	useValue,
 } from '@tldraw/editor'
@@ -31,7 +29,11 @@ import { getSvgPathFromStrokePoints } from '../shared/freehand/svg'
 import { svgInk } from '../shared/freehand/svgInk'
 import { interpolateSegments } from '../shared/interpolate-props'
 import { useDefaultColorTheme } from '../shared/useDefaultColorTheme'
-import { getDrawShapeStrokeDashArray, getFreehandOptions, getPointsFromSegments } from './getPath'
+import {
+	getDrawShapeStrokeDashArray,
+	getFreehandOptions,
+	getPointsFromDrawSegments,
+} from './getPath'
 
 /** @public */
 export interface DrawShapeOptions {
@@ -73,11 +75,17 @@ export class DrawShapeUtil extends ShapeUtil<TLDrawShape> {
 			isClosed: false,
 			isPen: false,
 			scale: 1,
+			scaleX: 1,
+			scaleY: 1,
 		}
 	}
 
 	getGeometry(shape: TLDrawShape) {
-		const points = getPointsFromSegments(shape.props.segments)
+		const points = getPointsFromDrawSegments(
+			shape.props.segments,
+			shape.props.scaleX,
+			shape.props.scaleY
+		)
 
 		const sw = (STROKE_SIZES[shape.props.size] + 1) * shape.props.scale
 
@@ -131,7 +139,11 @@ export class DrawShapeUtil extends ShapeUtil<TLDrawShape> {
 	}
 
 	indicator(shape: TLDrawShape) {
-		const allPointsFromSegments = getPointsFromSegments(shape.props.segments)
+		const allPointsFromSegments = getPointsFromDrawSegments(
+			shape.props.segments,
+			shape.props.scaleX,
+			shape.props.scaleY
+		)
 
 		let sw = (STROKE_SIZES[shape.props.size] + 1) * shape.props.scale
 
@@ -139,7 +151,7 @@ export class DrawShapeUtil extends ShapeUtil<TLDrawShape> {
 		const forceSolid = useValue(
 			'force solid',
 			() => {
-				const zoomLevel = this.editor.getZoomLevel()
+				const zoomLevel = this.editor.getEfficientZoomLevel()
 				return zoomLevel < 0.5 && zoomLevel < 1.5 / sw
 			},
 			[this.editor, sw]
@@ -182,24 +194,10 @@ export class DrawShapeUtil extends ShapeUtil<TLDrawShape> {
 	override onResize(shape: TLDrawShape, info: TLResizeInfo<TLDrawShape>) {
 		const { scaleX, scaleY } = info
 
-		const newSegments: TLDrawShapeSegment[] = []
-
-		for (const segment of shape.props.segments) {
-			newSegments.push({
-				...segment,
-				points: segment.points.map(({ x, y, z }) => {
-					return {
-						x: toFixed(scaleX * x),
-						y: toFixed(scaleY * y),
-						z,
-					}
-				}),
-			})
-		}
-
 		return {
 			props: {
-				segments: newSegments,
+				scaleX: scaleX * shape.props.scaleX,
+				scaleY: scaleY * shape.props.scaleY,
 			},
 		}
 	}
@@ -229,14 +227,22 @@ function getDot(point: VecLike, sw: number) {
 }
 
 function getIsDot(shape: TLDrawShape) {
-	return shape.props.segments.length === 1 && shape.props.segments[0].points.length < 2
+	// 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
 }
 
 function DrawShapeSvg({ shape, zoomOverride }: { shape: TLDrawShape; zoomOverride?: number }) {
 	const theme = useDefaultColorTheme()
 	const editor = useEditor()
 
-	const allPointsFromSegments = getPointsFromSegments(shape.props.segments)
+	const allPointsFromSegments = getPointsFromDrawSegments(
+		shape.props.segments,
+		shape.props.scaleX,
+		shape.props.scaleY
+	)
 
 	const showAsComplete = shape.props.isComplete || last(shape.props.segments)?.type === 'straight'
 
@@ -244,7 +250,7 @@ function DrawShapeSvg({ shape, zoomOverride }: { shape: TLDrawShape; zoomOverrid
 	const forceSolid = useValue(
 		'force solid',
 		() => {
-			const zoomLevel = zoomOverride ?? editor.getZoomLevel()
+			const zoomLevel = zoomOverride ?? editor.getEfficientZoomLevel()
 			return zoomLevel < 0.5 && zoomLevel < 1.5 / sw
 		},
 		[editor, sw, zoomOverride]
@@ -253,10 +259,10 @@ function DrawShapeSvg({ shape, zoomOverride }: { shape: TLDrawShape; zoomOverrid
 	const dotAdjustment = useValue(
 		'dot adjustment',
 		() => {
-			const zoomLevel = zoomOverride ?? editor.getZoomLevel()
+			const zoomLevel = zoomOverride ?? editor.getEfficientZoomLevel()
 			// If we're zoomed way out (10%), then we need to make the dotted line go to 9 instead 0.1
 			// Chrome doesn't render anything otherwise.
-			return zoomLevel < 0.2 ? 0 : 0.1
+			return zoomLevel < 0.2 ? 9 : 0.1
 		},
 		[editor, zoomOverride]
 	)

package/src/lib/shapes/draw/getPath.ts

@@ -6,6 +6,7 @@ import {
 	TLDrawShape,
 	TLDrawShapeSegment,
 	Vec,
+	b64Vecs,
 	modulate,
 } from '@tldraw/editor'
 import { StrokeOptions } from '../shared/freehand/types'
@@ -101,19 +102,39 @@ export function getFreehandOptions(
 	return { ...solidSettings(strokeWidth), last }
 }
 
-export function getPointsFromSegments(segments: TLDrawShapeSegment[]) {
+/** @public */
+export function getPointsFromDrawSegment(
+	segment: TLDrawShapeSegment,
+	scaleX: number,
+	scaleY: number,
+	points: Vec[] = []
+) {
+	const _points = b64Vecs.decodePoints(segment.path)
+
+	// Apply scale factors (used for lazy resize and flipping)
+	if (scaleX !== 1 || scaleY !== 1) {
+		for (const point of _points) {
+			point.x *= scaleX
+			point.y *= scaleY
+		}
+	}
+
+	if (segment.type === 'free' || _points.length < 2) {
+		points.push(..._points.map(Vec.From))
+	} else {
+		const pointsToInterpolate = Math.max(4, Math.floor(Vec.Dist(_points[0], _points[1]) / 16))
+		points.push(...Vec.PointsBetween(_points[0], _points[1], pointsToInterpolate))
+	}
+
+	return points
+}
+
+/** @public */
+export function getPointsFromDrawSegments(segments: TLDrawShapeSegment[], scaleX = 1, scaleY = 1) {
 	const points: Vec[] = []
 
 	for (const segment of segments) {
-		if (segment.type === 'free' || segment.points.length < 2) {
-			points.push(...segment.points.map(Vec.Cast))
-		} else {
-			const pointsToInterpolate = Math.max(
-				4,
-				Math.floor(Vec.Dist(segment.points[0], segment.points[1]) / 16)
-			)
-			points.push(...Vec.PointsBetween(segment.points[0], segment.points[1], pointsToInterpolate))
-		}
+		getPointsFromDrawSegment(segment, scaleX, scaleY, points)
 	}
 
 	return points