tldraw 4.3.0-canary.fd6b7f2a8adc → 4.3.0-next.085293d79c32

package/src/lib/shapes/arrow/ArrowShapeUtil.tsx

@@ -45,7 +45,6 @@ import {
 	useEditor,
 	useIsEditing,
 	useSharedSafeId,
-	useValue,
 } from '@tldraw/editor'
 import React, { useMemo } from 'react'
 import { updateArrowTerminal } from '../../bindings/arrow/ArrowBindingUtil'
@@ -56,6 +55,7 @@ import { ShapeFill } from '../shared/ShapeFill'
 import { ARROW_LABEL_PADDING, STROKE_SIZES, TEXT_PROPS } from '../shared/default-shape-constants'
 import { getFillDefForCanvas, getFillDefForExport } from '../shared/defaultStyleDefs'
 import { useDefaultColorTheme } from '../shared/useDefaultColorTheme'
+import { useEfficientZoomThreshold } from '../shared/useEfficientZoomThreshold'
 import { getArrowBodyPath, getArrowHandlePath } from './ArrowPath'
 import { ArrowShapeOptions } from './arrow-types'
 import {
@@ -117,9 +117,13 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 
 		hoverPreciseTimeout: 600,
 		pointingPreciseTimeout: 320,
-
-		shouldBeExact: (editor: Editor) => editor.inputs.altKey,
-		shouldIgnoreTargets: (editor: Editor) => editor.inputs.ctrlKey,
+		shouldBeExact(editor: Editor) {
+			return editor.inputs.getAltKey()
+		},
+		shouldIgnoreTargets(editor: Editor) {
+			return editor.inputs.getCtrlKey()
+		},
+		showTextOutline: true,
 	}
 
 	override canEdit() {
@@ -269,7 +273,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 
 			const segmentStart = shapePageTransform.applyToPoint(info.route.midpointHandle.segmentStart)
 			const segmentEnd = shapePageTransform.applyToPoint(info.route.midpointHandle.segmentEnd)
-			const segmentLength = Vec.Dist(segmentStart, segmentEnd) * this.editor.getZoomLevel()
+			const segmentLength = Vec.Dist(segmentStart, segmentEnd) * this.editor.getEfficientZoomLevel()
 
 			if (segmentLength > this.options.elbowMinSegmentLengthToShowMidpointHandle) {
 				handles.push({
@@ -369,7 +373,8 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 
 		// we want to snap to certain points. the maximum distance at which a snap will occur is
 		// relative to the zoom level:
-		const maxSnapDistance = this.options.elbowMidpointSnapDistance / this.editor.getZoomLevel()
+		const maxSnapDistance =
+			this.options.elbowMidpointSnapDistance / this.editor.getEfficientZoomLevel()
 
 		// we snap to the midpoint of the range by default
 		const midPoint = perpDistanceToLineAngle(
@@ -794,6 +799,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 						textWidth={labelPosition.box.w - ARROW_LABEL_PADDING * 2 * shape.props.scale}
 						isSelected={isSelected}
 						padding={0}
+						showTextOutline={this.options.showTextOutline}
 						style={{
 							transform: `translate(${labelPosition.box.center.x}px, ${labelPosition.box.center.y}px)`,
 						}}
@@ -944,7 +950,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 						.box.clone()
 						.expandBy(-ARROW_LABEL_PADDING * shape.props.scale)}
 					padding={0}
-					showTextOutline={true}
+					showTextOutline={this.options.showTextOutline}
 				/>
 			</g>
 		)
@@ -1005,13 +1011,7 @@ const ArrowSvg = track(function ArrowSvg({
 	const editor = useEditor()
 	const theme = useDefaultColorTheme()
 	const info = getArrowInfo(editor, shape)
-	const isForceSolid = useValue(
-		'force solid',
-		() => {
-			return editor.getZoomLevel() < 0.2
-		},
-		[editor]
-	)
+	const isForceSolid = useEfficientZoomThreshold(shape.props.scale * 0.25)
 	const clipPathId = useSharedSafeId(shape.id + '_clip')
 	const arrowheadDotId = useSharedSafeId('arrowhead-dot')
 	const arrowheadCrossId = useSharedSafeId('arrowhead-cross')
@@ -1037,7 +1037,7 @@ const ArrowSvg = track(function ArrowSvg({
 			start: 'skip',
 			end: 'skip',
 			lengthRatio: 2.5,
-			strokeWidth: 2 / editor.getZoomLevel(),
+			strokeWidth: 2 / editor.getEfficientZoomLevel(),
 			props: {
 				className: 'tl-arrow-hint',
 				markerStart: bindings.start

package/src/lib/shapes/arrow/arrow-types.ts

@@ -95,6 +95,8 @@ export interface ArrowShapeOptions {
 	 * When creating an arrow, should it bind to the target shape.
 	 */
 	shouldIgnoreTargets(editor: Editor): boolean
+	/** Whether to show the outline of the arrow shape's label (using the same color as the canvas). This helps with overlapping shapes. It does not show up on Safari, where text outline is a performance issues. */
+	readonly showTextOutline: boolean
 }
 
 /** @public */

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

@@ -313,7 +313,7 @@ export function getArrowLabelDefaultPosition(editor: Editor, shape: TLArrowShape
 export function isOverArrowLabel(editor: Editor, shape: TLShape) {
 	if (!editor.isShapeOfType(shape, 'arrow')) return false
 
-	const pointInShapeSpace = editor.getPointInShapeSpace(shape, editor.inputs.currentPagePoint)
+	const pointInShapeSpace = editor.getPointInShapeSpace(shape, editor.inputs.getCurrentPagePoint())
 	// How should we handle multiple labels? Do shapes ever have multiple labels?
 	const labelGeometry = editor.getShapeGeometry<Group2d>(shape).children[1]
 	// Knowing what we know about arrows... if the shape has no text in its label,

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

@@ -198,7 +198,7 @@ export function updateArrowTargetState({
 	if (!precise) {
 		// If we're switching to a new bound shape, then precise only if moving slowly
 		if (!currentBinding || (currentBinding && target.id !== currentBinding.toId)) {
-			precise = editor.inputs.pointerVelocity.len() < 0.5
+			precise = editor.inputs.getPointerVelocity().len() < 0.5
 		}
 	}
 

package/src/lib/shapes/arrow/elbow/getElbowArrowInfo.test.ts

@@ -0,0 +1,80 @@
+import { createShapeId, TLArrowShape } from '@tldraw/editor'
+import { TestEditor } from '../../../../test/TestEditor'
+import { createOrUpdateArrowBinding, getArrowBindings } from '../shared'
+import { getElbowArrowInfo } from './getElbowArrowInfo'
+
+let editor: TestEditor
+
+const ids = {
+	box1: createShapeId('box1'),
+	box2: createShapeId('box2'),
+	arrow1: createShapeId('arrow1'),
+}
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+
+describe('Elbow arrow with scale', () => {
+	it.each([1, 5, 10, 20])('creates valid orthogonal routes with scale=%i', (scale) => {
+		editor.createShapes([
+			{ id: ids.box1, type: 'geo', x: 0, y: 0, props: { w: 100, h: 100 } },
+			{ id: ids.box2, type: 'geo', x: 250, y: 100, props: { w: 100, h: 100 } },
+			{
+				id: ids.arrow1,
+				type: 'arrow',
+				x: 0,
+				y: 0,
+				props: {
+					start: { x: 0, y: 0 },
+					end: { x: 0, y: 0 },
+					kind: 'elbow',
+					scale,
+					size: 's',
+				},
+			},
+		])
+
+		createOrUpdateArrowBinding(editor, ids.arrow1, ids.box1, {
+			terminal: 'start',
+			isExact: false,
+			isPrecise: false,
+			normalizedAnchor: { x: 0.5, y: 0.5 },
+			snap: 'none',
+		})
+
+		createOrUpdateArrowBinding(editor, ids.arrow1, ids.box2, {
+			terminal: 'end',
+			isExact: false,
+			isPrecise: false,
+			normalizedAnchor: { x: 0.5, y: 0.5 },
+			snap: 'none',
+		})
+
+		const arrow = editor.getShape(ids.arrow1)! as TLArrowShape
+		const bindings = getArrowBindings(editor, arrow)
+		const info = getElbowArrowInfo(editor, arrow, bindings)
+
+		expect(info).toBeDefined()
+		expect(arrow.props.kind).toBe('elbow')
+		expect(info.route).toBeDefined()
+		expect(info.route!.points.length).toBeGreaterThanOrEqual(3)
+
+		// No duplicate consecutive points
+		for (let i = 0; i < info.route!.points.length - 1; i++) {
+			const p1 = info.route!.points[i]
+			const p2 = info.route!.points[i + 1]
+			const isDuplicate = Math.abs(p1.x - p2.x) < 0.01 && Math.abs(p1.y - p2.y) < 0.01
+			expect(isDuplicate).toBe(false)
+		}
+
+		// All segments orthogonal
+		for (let i = 0; i < info.route!.points.length - 1; i++) {
+			const p1 = info.route!.points[i]
+			const p2 = info.route!.points[i + 1]
+			const isHorizontal = Math.abs(p1.y - p2.y) < 0.01
+			const isVertical = Math.abs(p1.x - p2.x) < 0.01
+			expect(isHorizontal || isVertical).toBe(true)
+		}
+	})
+})

package/src/lib/shapes/arrow/elbow/getElbowArrowInfo.tsx

@@ -348,7 +348,7 @@ function getElbowArrowTerminalInfo(
 	point: VecModel
 ): ElbowArrowTerminal {
 	const arrowStrokeSize = (STROKE_SIZES[arrow.props.size] * arrow.props.scale) / 2
-	const minEndSegmentLength = arrowStrokeSize * arrow.props.scale * 3
+	const minEndSegmentLength = arrowStrokeSize * 3
 
 	if (binding) {
 		const target = editor.getShape(binding.toId)

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,7 +90,7 @@ export class Pointing extends StateNode {
 	}
 
 	createArrowShape() {
-		const { originPagePoint } = this.editor.inputs
+		const originPagePoint = this.editor.inputs.getOriginPagePoint()
 
 		const id = createShapeId()
 
@@ -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/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