tldraw 3.16.0-canary.9e28d92565ca → 3.16.0-canary.9f9886f75150

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tldraw",
   "description": "A tiny little drawing editor.",
-  "version": "3.16.0-canary.9e28d92565ca",
+  "version": "3.16.0-canary.9f9886f75150",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -55,8 +55,8 @@
     "@tiptap/pm": "^2.9.1",
     "@tiptap/react": "^2.9.1",
     "@tiptap/starter-kit": "^2.9.1",
-    "@tldraw/editor": "3.16.0-canary.9e28d92565ca",
-    "@tldraw/store": "3.16.0-canary.9e28d92565ca",
+    "@tldraw/editor": "3.16.0-canary.9f9886f75150",
+    "@tldraw/store": "3.16.0-canary.9f9886f75150",
     "classnames": "^2.5.1",
     "hotkeys-js": "^3.13.9",
     "idb": "^7.1.1",

package/src/index.ts

@@ -106,13 +106,6 @@ export {
 } from './lib/shapes/arrow/arrow-types'
 export { ArrowShapeTool } from './lib/shapes/arrow/ArrowShapeTool'
 export { ArrowShapeUtil } from './lib/shapes/arrow/ArrowShapeUtil'
-export {
-	clearArrowTargetState,
-	getArrowTargetState,
-	updateArrowTargetState,
-	type ArrowTargetState,
-	type UpdateArrowTargetStateOpts,
-} from './lib/shapes/arrow/arrowTargetState'
 export {
 	type ElbowArrowBox,
 	type ElbowArrowBoxEdges,

package/src/lib/shapes/arrow/ArrowShapeTool.test.ts

@@ -1,8 +1,6 @@
 import { IndexKey, TLArrowShape, TLShapeId, Vec, createShapeId } from '@tldraw/editor'
 import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
-import { defaultShapeUtils } from '../../defaultShapeUtils'
-import { ArrowShapeUtil } from './ArrowShapeUtil'
 import { getArrowTargetState } from './arrowTargetState'
 import { getArrowBindings } from './shared'
 
@@ -28,8 +26,8 @@ function bindings(id: TLShapeId) {
 	return getArrowBindings(editor, editor.getShape(id) as TLArrowShape)
 }
 
-function init(opts?: ConstructorParameters<typeof TestEditor>[0]) {
-	editor = new TestEditor(opts)
+beforeEach(() => {
+	editor = new TestEditor()
 	editor
 		.selectAll()
 		.deleteShapes(editor.getSelectedShapeIds())
@@ -38,9 +36,7 @@ function init(opts?: ConstructorParameters<typeof TestEditor>[0]) {
 			{ id: ids.box2, type: 'geo', x: 300, y: 300, props: { w: 100, h: 100 } },
 			{ id: ids.box3, type: 'geo', x: 350, y: 350, props: { w: 50, h: 50 } }, // overlapping box2, but smaller!
 		])
-}
-
-beforeEach(init)
+})
 
 it('enters the arrow state', () => {
 	editor.setCurrentTool('arrow')
@@ -582,96 +578,6 @@ describe('reparenting issue', () => {
 	})
 })
 
-describe('precision timeout configuration', () => {
-	it('uses a timeout when dragging arrow handles', () => {
-		// Create an arrow first
-
-		editor.setCurrentTool('arrow').pointerDown(0, 0)
-		// Use high velocity to avoid precise mode immediately
-		editor.inputs.pointerVelocity = new Vec(1, 1)
-		editor.pointerMove(100, 100)
-
-		const arrow = editor.getCurrentPageShapes()[
-			editor.getCurrentPageShapes().length - 1
-		] as TLArrowShape
-
-		editor.expectToBeIn('select.dragging_handle')
-
-		expect(bindings(arrow.id)).toMatchObject({
-			end: {
-				toId: ids.box1,
-				props: {
-					isPrecise: false,
-				},
-			},
-		})
-
-		vi.advanceTimersByTime(1000)
-
-		expect(bindings(arrow.id)).toMatchObject({
-			end: {
-				toId: ids.box1,
-				props: {
-					isPrecise: true,
-				},
-			},
-		})
-	})
-
-	it('allows configuring the pointingPreciseTimeout', () => {
-		init({
-			shapeUtils: [
-				...defaultShapeUtils.map((s) =>
-					s.type === 'arrow' ? ArrowShapeUtil.configure({ pointingPreciseTimeout: 2000 }) : s
-				),
-			],
-		})
-		// Create an arrow first
-
-		editor.setCurrentTool('arrow').pointerDown(0, 0)
-		// Use high velocity to avoid precise mode immediately
-		editor.inputs.pointerVelocity = new Vec(1, 1)
-		editor.pointerMove(100, 100)
-
-		const arrow = editor.getCurrentPageShapes()[
-			editor.getCurrentPageShapes().length - 1
-		] as TLArrowShape
-
-		editor.expectToBeIn('select.dragging_handle')
-
-		expect(bindings(arrow.id)).toMatchObject({
-			end: {
-				toId: ids.box1,
-				props: {
-					isPrecise: false,
-				},
-			},
-		})
-
-		vi.advanceTimersByTime(1000)
-
-		expect(bindings(arrow.id)).toMatchObject({
-			end: {
-				toId: ids.box1,
-				props: {
-					isPrecise: false,
-				},
-			},
-		})
-
-		vi.advanceTimersByTime(1000)
-
-		expect(bindings(arrow.id)).toMatchObject({
-			end: {
-				toId: ids.box1,
-				props: {
-					isPrecise: true,
-				},
-			},
-		})
-	})
-})
-
 describe('line bug', () => {
 	it('works as expected when binding to a straight line', () => {
 		editor.selectAll().deleteShapes(editor.getSelectedShapeIds())

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

@@ -27,11 +27,6 @@ import {
 	ElbowArrowSideDeltas,
 } from './elbow/definitions'
 
-/**
- * Options passed to {@link updateArrowTargetState}.
- *
- * @public
- */
 export interface UpdateArrowTargetStateOpts {
 	editor: Editor
 	pointInPageSpace: VecLike
@@ -42,13 +37,6 @@ export interface UpdateArrowTargetStateOpts {
 	oppositeBinding: TLArrowBinding | undefined
 }
 
-/**
- * State representing what we're pointing to when drawing or updating an arrow. You can get this
- * state using {@link getArrowTargetState}, and update it as part of an arrow interaction with
- * {@link updateArrowTargetState} or {@link clearArrowTargetState}.
- *
- * @public
- */
 export interface ArrowTargetState {
 	target: TLShape
 	arrowKind: TLArrowShapeKind
@@ -75,32 +63,14 @@ function getArrowTargetAtom(editor: Editor) {
 	return arrowTargetStore.get(editor, () => atom('arrowTarget', null))
 }
 
-/**
- * Get the current arrow target state for an editor. See {@link ArrowTargetState} for more
- * information.
- *
- * @public
- */
 export function getArrowTargetState(editor: Editor) {
 	return getArrowTargetAtom(editor).get()
 }
 
-/**
- * Clear the current arrow target state for an editor. See {@link ArrowTargetState} for more
- * information.
- *
- * @public
- */
 export function clearArrowTargetState(editor: Editor) {
 	getArrowTargetAtom(editor).set(null)
 }
 
-/**
- * Update the current arrow target state for an editor. See {@link ArrowTargetState} for more
- * information.
- *
- * @public
- */
 export function updateArrowTargetState({
 	editor,
 	pointInPageSpace,

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

@@ -163,7 +163,7 @@ export class Pointing extends StateNode {
 			const endHandle = handles.find((h) => h.id === 'end')!
 			const change = util.onHandleDrag?.(this.editor.getShape(shape)!, {
 				handle: { ...endHandle, x: point.x, y: point.y },
-				isPrecise: this.isPrecise,
+				isPrecise: false,
 				isCreatingShape: true,
 				initial: initial,
 			})

package/src/lib/tools/SelectTool/childStates/DraggingHandle.tsx

@@ -13,7 +13,6 @@ import {
 	sortByIndex,
 	structuredClone,
 } from '@tldraw/editor'
-import { ArrowShapeUtil } from '../../../shapes/arrow/ArrowShapeUtil'
 import { clearArrowTargetState } from '../../../shapes/arrow/arrowTargetState'
 import { getArrowBindings } from '../../../shapes/arrow/shared'
 
@@ -136,13 +135,10 @@ export class DraggingHandle extends StateNode {
 	}
 
 	// Only relevant to arrows
-	private exactTimeout = -1
+	private exactTimeout = -1 as any
 
 	// Only relevant to arrows
 	private resetExactTimeout() {
-		const arrowUtil = this.editor.getShapeUtil<ArrowShapeUtil>('arrow')
-		const timeoutValue = arrowUtil.options.pointingPreciseTimeout
-
 		if (this.exactTimeout !== -1) {
 			this.clearExactTimeout()
 		}
@@ -154,7 +150,7 @@ export class DraggingHandle extends StateNode {
 				this.update()
 			}
 			this.exactTimeout = -1
-		}, timeoutValue)
+		}, 750)
 	}
 
 	// Only relevant to arrows

package/src/lib/ui/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '3.16.0-canary.9e28d92565ca'
+export const version = '3.16.0-canary.9f9886f75150'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-09-18T12:01:01.351Z',
-	patch: '2025-09-18T12:01:01.351Z',
+	minor: '2025-09-18T09:27:24.175Z',
+	patch: '2025-09-18T09:27:24.175Z',
 }

package/src/lib/ui.css

@@ -168,7 +168,7 @@
 	min-height: 40px;
 	width: 100%;
 	gap: 8px;
-	margin-top: -4px;
+	margin: -4px 0px;
 }
 
 .tlui-button__menu::after {
@@ -1039,19 +1039,10 @@ tldraw? probably.
 	display: none;
 }
 
-/*
- * This is used in a couple places, like Align and Vertical Align.
- * It's because we have a toolbar with a Toggle Group but then an adjacent button
- * next to it that opens a popup.
- */
-.tlui-style-panel__section .tlui-toolbar:has(.tlui-toolbar) {
+.tlui-style-panel[data-ismobile='true'] .tlui-style-panel__section .tlui-row.tlui-toolbar {
 	flex-wrap: wrap;
 }
 
-.tlui-style-panel__section .tlui-toolbar:has(.tlui-toolbar) .tlui-style-panel__subheading {
-	margin-left: -2px;
-}
-
 .tlui-style-panel__section__common:not(:only-child) {
 	margin-bottom: 7px;
 	border-bottom: 1px solid var(--tl-color-divider);

package/src/test/TestEditor.ts

@@ -86,14 +86,8 @@ export class TestEditor extends Editor {
 		elm.tabIndex = 0
 		elm.getBoundingClientRect = () => bounds as DOMRect
 
-		const shapeUtilsWithDefaults = [
-			...defaultShapeUtils.filter((s) => !options.shapeUtils?.some((su) => su.type === s.type)),
-			...(options.shapeUtils ?? []),
-		]
-		const bindingUtilsWithDefaults = [
-			...defaultBindingUtils.filter((b) => !options.bindingUtils?.some((bu) => bu.type === b.type)),
-			...(options.bindingUtils ?? []),
-		]
+		const shapeUtilsWithDefaults = [...defaultShapeUtils, ...(options.shapeUtils ?? [])]
+		const bindingUtilsWithDefaults = [...defaultBindingUtils, ...(options.bindingUtils ?? [])]
 
 		super({
 			...options,

package/tldraw.css

@@ -1964,7 +1964,7 @@ it from receiving any pointer events or affecting the cursor. */
 	min-height: 40px;
 	width: 100%;
 	gap: 8px;
-	margin-top: -4px;
+	margin: -4px 0px;
 }
 
 .tlui-button__menu::after {
@@ -2835,19 +2835,10 @@ tldraw? probably.
 	display: none;
 }
 
-/*
- * This is used in a couple places, like Align and Vertical Align.
- * It's because we have a toolbar with a Toggle Group but then an adjacent button
- * next to it that opens a popup.
- */
-.tlui-style-panel__section .tlui-toolbar:has(.tlui-toolbar) {
+.tlui-style-panel[data-ismobile='true'] .tlui-style-panel__section .tlui-row.tlui-toolbar {
 	flex-wrap: wrap;
 }
 
-.tlui-style-panel__section .tlui-toolbar:has(.tlui-toolbar) .tlui-style-panel__subheading {
-	margin-left: -2px;
-}
-
 .tlui-style-panel__section__common:not(:only-child) {
 	margin-bottom: 7px;
 	border-bottom: 1px solid var(--tl-color-divider);