@tldraw/editor 5.2.3 → 5.3.0-canary.0114f715ad01

package/src/lib/editor/managers/TickManager/TickManager.ts

@@ -1,5 +1,6 @@
 import { throttleToNextFrame as _throttleToNextFrame, bind } from '@tldraw/utils'
 import type { Editor } from '../../Editor'
+import { EditorManager } from '../EditorManager'
 
 const throttleToNextFrame =
 	typeof process !== 'undefined' && process.env.NODE_ENV === 'test'
@@ -13,9 +14,9 @@ const throttleToNextFrame =
 		: _throttleToNextFrame
 
 /** @internal */
-export class TickManager {
-	constructor(public editor: Editor) {
-		this.editor.disposables.add(this.dispose)
+export class TickManager extends EditorManager {
+	constructor(editor: Editor) {
+		super(editor)
 		this.start()
 	}
 
@@ -45,11 +46,9 @@ export class TickManager {
 		this.cancelRaf = throttleToNextFrame(this.tick)
 	}
 
-	// Clear the listener
-	@bind
 	dispose() {
 		this.isPaused = true
-
 		this.cancelRaf?.()
+		super.dispose()
 	}
 }

package/src/lib/editor/shapes/BaseFrameLikeShapeUtil.tsx

@@ -5,7 +5,7 @@ import { BaseBoxShapeUtil, TLBaseBoxShape } from './BaseBoxShapeUtil'
 import { TLDragShapesInInfo, TLDragShapesOutInfo } from './ShapeUtil'
 
 /**
- * A base class for frame-like shapes — containers that clip their children,
+ * A base class for frame-like shapes — containers that clip their children except arrows,
  * require full-brush selection, block erasure from inside, and support
  * drag-and-drop reparenting.
  *
@@ -17,6 +17,7 @@ import { TLDragShapesInInfo, TLDragShapesOutInfo } from './ShapeUtil'
  * - `canReceiveNewChildrenOfType()` returns `true` unless the container is locked
  * - `canRemoveChildrenOfType()` returns `true` unless the container is locked
  * - `getClipPath()` returns the shape geometry's vertices
+ * - `shouldClipChild()` clips all children except arrows
  * - `onDragShapesIn()` reparents shapes into the frame (with index restoration)
  * - `onDragShapesOut()` reparents shapes back to the page
  *
@@ -69,6 +70,10 @@ export abstract class BaseFrameLikeShapeUtil<
 		return this.editor.getShapeGeometry(shape.id).vertices
 	}
 
+	override shouldClipChild(child: TLShape): boolean {
+		return child.type !== 'arrow'
+	}
+
 	override onDragShapesIn(
 		shape: Shape,
 		draggingShapes: TLShape[],

package/src/lib/editor/shapes/ShapeUtil.ts

@@ -1039,6 +1039,7 @@ export interface TLCropInfo<T extends TLShape> {
 	uncroppedSize: { w: number; h: number }
 	initialShape: T
 	aspectRatioLocked?: boolean
+	isResizingFromCenter?: boolean
 }
 
 /** @public */

package/src/lib/editor/tools/BaseBoxShapeTool/children/Pointing.ts

@@ -4,7 +4,6 @@ import { Vec } from '../../../../primitives/Vec'
 import type { Editor } from '../../../Editor'
 import { TLBaseBoxShape } from '../../../shapes/BaseBoxShapeUtil'
 import { TLPointerEventInfo } from '../../../types/event-types'
-import { cancelShapeCreationOnLongPress } from '../../cancelShapeCreationOnLongPress'
 import { StateNode } from '../../StateNode'
 import type { BaseBoxShapeTool } from '../BaseBoxShapeTool'
 
@@ -67,7 +66,8 @@ export class Pointing extends StateNode {
 	}
 
 	override onLongPress() {
-		cancelShapeCreationOnLongPress(this.editor, () => this.cancel())
+		// On a touch (coarse pointer) long-press, cancel the pending shape so it leaves nothing behind.
+		if (this.editor.getInstanceState().isCoarsePointer) this.cancel()
 	}
 
 	override onCancel() {

package/src/lib/editor/types/emit-types.ts

@@ -6,6 +6,7 @@ import { TLEventInfo } from './event-types'
 export interface TLEventMap {
 	// Lifecycle / Internal
 	mount: []
+	unmount: []
 	'max-shapes': [{ name: string; pageId: TLPageId; count: number }]
 	change: [HistoryEntry<TLRecord>]
 	update: []

package/src/lib/options.ts

@@ -86,6 +86,7 @@ export interface TldrawOptions {
 	readonly collaboratorCheckIntervalMs: number
 	readonly cameraMovingTimeoutMs: number
 	readonly hitTestMargin: number
+	readonly coarseHitTestMargin: number
 	readonly edgeScrollDelay: number
 	readonly edgeScrollEaseDuration: number
 	readonly edgeScrollSpeed: number
@@ -312,7 +313,8 @@ export const defaultTldrawOptions = {
 	collaboratorIdleTimeoutMs: 3000,
 	collaboratorCheckIntervalMs: 1200,
 	cameraMovingTimeoutMs: 64,
-	hitTestMargin: 8,
+	hitTestMargin: 3,
+	coarseHitTestMargin: 4,
 	edgeScrollDelay: 200,
 	edgeScrollEaseDuration: 200,
 	edgeScrollSpeed: 25,

package/src/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 = '5.2.3'
+export const version = '5.3.0-canary.0114f715ad01'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
-	minor: '2026-07-01T09:20:01.735Z',
-	patch: '2026-07-06T16:50:48.696Z',
+	minor: '2026-07-06T22:25:54.730Z',
+	patch: '2026-07-06T22:25:54.730Z',
 }

package/dist-cjs/lib/editor/tools/cancelShapeCreationOnLongPress.js

@@ -1,28 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var cancelShapeCreationOnLongPress_exports = {};
-__export(cancelShapeCreationOnLongPress_exports, {
-  cancelShapeCreationOnLongPress: () => cancelShapeCreationOnLongPress
-});
-module.exports = __toCommonJS(cancelShapeCreationOnLongPress_exports);
-function cancelShapeCreationOnLongPress(editor, cancelPendingCreation) {
-  if (!editor.getInstanceState().isCoarsePointer) return;
-  cancelPendingCreation();
-}
-//# sourceMappingURL=cancelShapeCreationOnLongPress.js.map

package/dist-cjs/lib/editor/tools/cancelShapeCreationOnLongPress.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/lib/editor/tools/cancelShapeCreationOnLongPress.ts"],
-  "sourcesContent": ["import type { Editor } from '../Editor'\n\n/**\n * Shared handler for a long-press in a discrete shape-creation tool's pointing\n * state (geo, note, line, text, arrow, frame). On a coarse pointer this cancels\n * any pending creation so the long-press leaves no shape behind (issue #8277).\n * It does not open a context menu \u2014 that is a select-tool surface, reached on\n * touch only from the select tool, and on desktop from a right-click (which the\n * editor routes through the select tool).\n *\n * Gated on `isCoarsePointer`: on a fine pointer (mouse) the long-press timer\n * powers the deliberate \"pause before drag to start a precise arrow\" gesture,\n * which we must not disturb. The bug only manifests on coarse pointers, because\n * that is also where the browser fires `contextmenu` at the long-press mark.\n *\n * The `cancelPendingCreation` callback is the tool's own cleanup \u2014 it knows\n * whether it needs to `bailToMark` a shape it created early or simply transition\n * back to idle. Continuous-gesture tools (draw, highlight, eraser, laser) are\n * excluded: their press is their own action, so they handle (or ignore) the\n * long-press themselves.\n *\n * @internal\n */\nexport function cancelShapeCreationOnLongPress(\n\teditor: Editor,\n\tcancelPendingCreation: () => void\n): void {\n\tif (!editor.getInstanceState().isCoarsePointer) return\n\n\tcancelPendingCreation()\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBO,SAAS,+BACf,QACA,uBACO;AACP,MAAI,CAAC,OAAO,iBAAiB,EAAE,gBAAiB;AAEhD,wBAAsB;AACvB;",
-  "names": []
-}

package/dist-esm/lib/editor/tools/cancelShapeCreationOnLongPress.mjs

@@ -1,8 +0,0 @@
-function cancelShapeCreationOnLongPress(editor, cancelPendingCreation) {
-  if (!editor.getInstanceState().isCoarsePointer) return;
-  cancelPendingCreation();
-}
-export {
-  cancelShapeCreationOnLongPress
-};
-//# sourceMappingURL=cancelShapeCreationOnLongPress.mjs.map

package/dist-esm/lib/editor/tools/cancelShapeCreationOnLongPress.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/lib/editor/tools/cancelShapeCreationOnLongPress.ts"],
-  "sourcesContent": ["import type { Editor } from '../Editor'\n\n/**\n * Shared handler for a long-press in a discrete shape-creation tool's pointing\n * state (geo, note, line, text, arrow, frame). On a coarse pointer this cancels\n * any pending creation so the long-press leaves no shape behind (issue #8277).\n * It does not open a context menu \u2014 that is a select-tool surface, reached on\n * touch only from the select tool, and on desktop from a right-click (which the\n * editor routes through the select tool).\n *\n * Gated on `isCoarsePointer`: on a fine pointer (mouse) the long-press timer\n * powers the deliberate \"pause before drag to start a precise arrow\" gesture,\n * which we must not disturb. The bug only manifests on coarse pointers, because\n * that is also where the browser fires `contextmenu` at the long-press mark.\n *\n * The `cancelPendingCreation` callback is the tool's own cleanup \u2014 it knows\n * whether it needs to `bailToMark` a shape it created early or simply transition\n * back to idle. Continuous-gesture tools (draw, highlight, eraser, laser) are\n * excluded: their press is their own action, so they handle (or ignore) the\n * long-press themselves.\n *\n * @internal\n */\nexport function cancelShapeCreationOnLongPress(\n\teditor: Editor,\n\tcancelPendingCreation: () => void\n): void {\n\tif (!editor.getInstanceState().isCoarsePointer) return\n\n\tcancelPendingCreation()\n}\n"],
-  "mappings": "AAuBO,SAAS,+BACf,QACA,uBACO;AACP,MAAI,CAAC,OAAO,iBAAiB,EAAE,gBAAiB;AAEhD,wBAAsB;AACvB;",
-  "names": []
-}

package/src/lib/editor/tools/cancelShapeCreationOnLongPress.ts

@@ -1,31 +0,0 @@
-import type { Editor } from '../Editor'
-
-/**
- * Shared handler for a long-press in a discrete shape-creation tool's pointing
- * state (geo, note, line, text, arrow, frame). On a coarse pointer this cancels
- * any pending creation so the long-press leaves no shape behind (issue #8277).
- * It does not open a context menu — that is a select-tool surface, reached on
- * touch only from the select tool, and on desktop from a right-click (which the
- * editor routes through the select tool).
- *
- * Gated on `isCoarsePointer`: on a fine pointer (mouse) the long-press timer
- * powers the deliberate "pause before drag to start a precise arrow" gesture,
- * which we must not disturb. The bug only manifests on coarse pointers, because
- * that is also where the browser fires `contextmenu` at the long-press mark.
- *
- * The `cancelPendingCreation` callback is the tool's own cleanup — it knows
- * whether it needs to `bailToMark` a shape it created early or simply transition
- * back to idle. Continuous-gesture tools (draw, highlight, eraser, laser) are
- * excluded: their press is their own action, so they handle (or ignore) the
- * long-press themselves.
- *
- * @internal
- */
-export function cancelShapeCreationOnLongPress(
-	editor: Editor,
-	cancelPendingCreation: () => void
-): void {
-	if (!editor.getInstanceState().isCoarsePointer) return
-
-	cancelPendingCreation()
-}