fix(draw): scale loop-closing threshold by zoom (tldraw#8293)

In order to keep draw-shape loop closing consistent in screen space
across zoom levels, this PR updates the draw tool's closing-distance
threshold logic to account for zoom behavior (including dynamic resize
mode). Closes tldraw#8240.

### Change type

- [x] `bugfix`

### Code changes

| Section   | LOC change |
| --------- | ---------- |
| Core code | +12 / -1   |

### Test plan

1. Open the examples app and select the draw tool.
2. Draw a nearly closed loop at a low zoom level (far zoomed out) and
confirm it closes predictably.
3. Repeat at a high zoom level (far zoomed in) and confirm closing
sensitivity remains usable.
4. Toggle dynamic resize mode and repeat to verify behavior remains
stable.

- [ ] Unit tests
- [ ] End to end tests

### Release notes

- Fix draw-shape loop-closing sensitivity so closing works more
consistently across zoom levels.

Made with [Cursor](https://cursor.com)

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>

Author: max-drake

packages/tldraw/src/lib/shapes/draw/DrawShapeTool.test.ts

@@ -1,4 +1,6 @@
+import { TLDrawShape } from '@tldraw/editor'
 import { TestEditor } from '../../../test/TestEditor'
+import { Drawing } from './toolStates/Drawing'
 
 let editor: TestEditor
 
@@ -9,6 +11,10 @@ afterEach(() => {
 	editor?.dispose()
 })
 
+function getDrawingState(): Drawing {
+	return editor.root.children!['draw'].children!['drawing'] as Drawing
+}
+
 describe('When in the idle state', () => {
 	it('Returns to select on cancel', () => {
 		editor.setCurrentTool('draw')
@@ -45,3 +51,120 @@ describe('When in the drawing state', () => {
 		editor.expectToBeIn('draw.idle')
 	})
 })
+
+describe('zoomOnEnter', () => {
+	it('Captures the zoom level when entering the drawing state', () => {
+		editor.setCamera({ x: 0, y: 0, z: 2 })
+		editor.setCurrentTool('draw')
+		editor.pointerDown(50, 50)
+
+		const drawing = getDrawingState()
+		expect(drawing.zoomOnEnter).toBe(2)
+	})
+
+	it('Uses the zoom level at entry, not the current zoom level', () => {
+		editor.setCamera({ x: 0, y: 0, z: 3 })
+		editor.setCurrentTool('draw')
+		editor.pointerDown(50, 50)
+
+		const drawing = getDrawingState()
+		expect(drawing.zoomOnEnter).toBe(3)
+
+		// Change zoom mid-stroke
+		editor.setCamera({ x: 0, y: 0, z: 1 })
+		editor.pointerMove(60, 60)
+
+		// zoomOnEnter should still reflect the zoom at entry
+		expect(drawing.zoomOnEnter).toBe(3)
+	})
+
+	it('Defaults to 1 when zoom is at default level', () => {
+		editor.setCurrentTool('draw')
+		editor.pointerDown(50, 50)
+
+		const drawing = getDrawingState()
+		expect(drawing.zoomOnEnter).toBe(1)
+	})
+})
+
+describe('Close threshold with zoom', () => {
+	function drawNearlyClosedShape(gap: number) {
+		// Draw a shape that loops back near the start point
+		// Start at origin, go right, down, left, then almost back to start
+		editor.setCurrentTool('draw')
+		editor.pointerDown(100, 100)
+		editor.pointerMove(200, 100)
+		editor.pointerMove(200, 200)
+		editor.pointerMove(100, 200)
+		// Come back near the start with the specified gap
+		editor.pointerMove(100 + gap, 100)
+		editor.pointerUp()
+
+		const shapes = editor.getCurrentPageShapes()
+		return shapes[shapes.length - 1] as TLDrawShape
+	}
+
+	it('Closes a shape when the endpoint is near the start at zoom=1', () => {
+		const shape = drawNearlyClosedShape(2)
+		expect(shape.props.isClosed).toBe(true)
+	})
+
+	it('Does not close a shape when the endpoint is far from the start', () => {
+		const shape = drawNearlyClosedShape(50)
+		expect(shape.props.isClosed).toBe(false)
+	})
+
+	it('Has a larger close threshold at low zoom levels', () => {
+		// threshold = 6 + 2*sqrt(strokeWidth*0.8) + 100/(1+(zoom/0.18)^3)
+		// At zoom=0.1: threshold ≈ 95 page units
+		// At zoom=1:   threshold ≈ 10 page units
+		// Note: screen gap * (1/zoom) = page gap
+
+		// At zoom=1, screen gap of 15px = 15 page units > threshold ~10 → NOT closed
+		editor.setCamera({ x: 0, y: 0, z: 1 })
+		const shapeAtZoom1 = drawNearlyClosedShape(15)
+		expect(shapeAtZoom1.props.isClosed).toBe(false)
+
+		// At zoom=0.1, screen gap of 5px = 50 page units < threshold ~95 → CLOSED
+		// The larger page-space threshold at low zoom makes closing easier
+		editor.setCamera({ x: 0, y: 0, z: 0.1 })
+		const shapeAtLowZoom = drawNearlyClosedShape(5)
+		expect(shapeAtLowZoom.props.isClosed).toBe(true)
+	})
+
+	it('Has a small close threshold at high zoom levels', () => {
+		// At zoom=5: threshold ≈ 9.4 page units
+		// Screen gap of 60px = 12 page units > threshold → NOT closed
+		editor.setCamera({ x: 0, y: 0, z: 5 })
+		const shape = drawNearlyClosedShape(60)
+		expect(shape.props.isClosed).toBe(false)
+	})
+
+	it('Uses a different threshold formula when dynamic resize mode is enabled', () => {
+		editor.user.updateUserPreferences({ isDynamicSizeMode: true })
+
+		// In dynamic resize mode, threshold = (strokeWidth + 2) * scale
+		// where scale = 1/zoom. At zoom=0.1, scale=10, strokeWidth(m)=3.5
+		// threshold = (3.5+2)*10 = 55 page units
+		// Screen gap of 3px at zoom=0.1 = 30 page units < 55 → CLOSED
+		editor.setCamera({ x: 0, y: 0, z: 0.1 })
+		const shapeAtLowZoom = drawNearlyClosedShape(3)
+		expect(shapeAtLowZoom.props.isClosed).toBe(true)
+	})
+
+	it('Does not close highlight shapes regardless of zoom', () => {
+		editor.setCamera({ x: 0, y: 0, z: 0.1 })
+		editor.setCurrentTool('highlight')
+		editor.pointerDown(100, 100)
+		editor.pointerMove(200, 100)
+		editor.pointerMove(200, 200)
+		editor.pointerMove(100, 200)
+		editor.pointerMove(102, 100)
+		editor.pointerUp()
+
+		const shapes = editor.getCurrentPageShapes()
+		const shape = shapes[shapes.length - 1]
+		// Highlight shapes don't have isClosed
+		expect((shape as any).props.isClosed).toBeUndefined()
+	})
+})

packages/tldraw/src/lib/shapes/draw/toolStates/Drawing.ts

@@ -49,6 +49,7 @@ export class Drawing extends StateNode {
 	lastRecordedPoint = {} as Vec
 	mergeNextPoint = false
 	currentLineLength = 0
+	zoomOnEnter = 1
 
 	// Cache for current segment's points to avoid repeated b64 decode/encode
 	currentSegmentPoints: Vec[] = []
@@ -59,6 +60,7 @@ export class Drawing extends StateNode {
 		this.markId = null
 		this.info = info
 		this.lastRecordedPoint = this.editor.inputs.getCurrentPagePoint().clone()
+		this.zoomOnEnter = this.editor.getZoomLevel()
 		this.startShape()
 	}
 
@@ -80,7 +82,7 @@ export class Drawing extends StateNode {
 		if (this.isPenOrStylus) {
 			// Don't update the shape if we haven't moved far enough from the last time we recorded a point
 			const currentPagePoint = inputs.getCurrentPagePoint()
-			if (Vec.Dist(currentPagePoint, this.lastRecordedPoint) >= 1 / this.editor.getZoomLevel()) {
+			if (Vec.Dist(currentPagePoint, this.lastRecordedPoint) >= 1 / this.zoomOnEnter) {
 				this.lastRecordedPoint = currentPagePoint.clone()
 				this.mergeNextPoint = false
 			} else {
@@ -149,12 +151,22 @@ export class Drawing extends StateNode {
 		const lastSegment = segments[segments.length - 1]
 		const lastPoint = b64Vecs.decodeLastPoint(lastSegment.path)
 
+		const isDynamicResizingEnabled = this.editor.user.getIsDynamicResizeMode()
+
+		const threshold = isDynamicResizingEnabled // when dynamic resizing is enabled scale is 1/zoom, so the threshold should not scale directly with zoom at all
+			? (strokeWidth + 2) * scale // +2 keeps tiny strokes from being too hard to close
+			: // 6 is a base floor, 2 is stroke influence, 0.8 tempers width growth
+				6 +
+				2 * Math.sqrt(strokeWidth * 0.8) +
+				// 100 is low-zoom boost, 0.18 is the zoom knee, 3 controls falloff steepness
+				100 / (1 + Math.pow(this.zoomOnEnter / 0.18, 3))
+
 		return (
 			firstPoint !== null &&
 			lastPoint !== null &&
 			firstPoint !== lastPoint &&
 			this.currentLineLength > strokeWidth * 4 * scale &&
-			Vec.DistMin(firstPoint, lastPoint, strokeWidth * 2 * scale)
+			Vec.DistMin(firstPoint, lastPoint, threshold)
 		)
 	}
 
@@ -481,7 +493,7 @@ export class Drawing extends StateNode {
 				if (shouldSnap) {
 					if (newSegments.length > 2) {
 						let nearestPoint: VecModel | undefined = undefined
-						let minDistance = 8 / this.editor.getZoomLevel()
+						let minDistance = 8 / this.zoomOnEnter
 
 						// Don't try to snap to the last two segments
 						for (let i = 0, n = segments.length - 2; i < n; i++) {