tldraw 5.2.0-next.e2b8d10bf10e → 5.2.0

package/src/test/resizing.test.ts

@@ -1,9 +1,11 @@
 import {
 	GapsSnapIndicator,
+	Mat,
 	PI,
 	PI2,
 	PointsSnapIndicator,
 	RotateCorner,
+	TLArrowShape,
 	TLGeoShape,
 	TLSelectionHandle,
 	TLShapeId,
@@ -16,6 +18,7 @@ import {
 	toRichText,
 } from '@tldraw/editor'
 import { vi } from 'vitest'
+import { getArrowBindings, getArrowTerminalsInArrowSpace } from '../lib/shapes/arrow/shared'
 import { NoteShapeUtil } from '../lib/shapes/note/NoteShapeUtil'
 import { createDrawSegments } from '../lib/utils/test-helpers'
 import { getSnapLines } from './getSnapLines'
@@ -867,6 +870,253 @@ describe('When resizing a shape with children', () => {
 	})
 })
 
+describe('When resizing nested shapes', () => {
+	// A document with the common kinds of nesting: a geo shape on the page, a
+	// group of two geo shapes, a frame with a geo child, and arrows bound from
+	// the page shape to a group child and from a group child to the frame child.
+	//
+	//      0    100   200             500
+	//
+	//   0             ┌─group1─────────┐
+	//                 │ ┌─────┐        │
+	//                 │ │  A  │ ┌─────┐│
+	// 100             │ └─────┘ │  B  ││
+	// 200  ┌─────┐    └─────────┴─────┘│
+	//      │page │
+	// 300  └─────┘
+	// 400             ┌─frame1─────────┐
+	//                 │ ┌─────┐        │
+	//                 │ │  C  │        │
+	// 600             └─┴─────┴────────┘
+	const nestedIds = {
+		pageBox: createShapeId('pageBox'),
+		group1: createShapeId('group1'),
+		groupBoxA: createShapeId('groupBoxA'),
+		groupBoxB: createShapeId('groupBoxB'),
+		frame1: createShapeId('frame1'),
+		frameBox: createShapeId('frameBox'),
+		arrowPageToGroup: createShapeId('arrowPageToGroup'),
+		arrowGroupToFrame: createShapeId('arrowGroupToFrame'),
+	}
+
+	beforeEach(() => {
+		editor.selectAll().deleteShapes(editor.getSelectedShapeIds())
+		editor
+			.createShapes([
+				{ id: nestedIds.pageBox, type: 'geo', x: 0, y: 200, props: { w: 100, h: 100 } },
+				{ id: nestedIds.groupBoxA, type: 'geo', x: 200, y: 0, props: { w: 100, h: 100 } },
+				{ id: nestedIds.groupBoxB, type: 'geo', x: 400, y: 100, props: { w: 100, h: 100 } },
+				{ id: nestedIds.frame1, type: 'frame', x: 200, y: 400, props: { w: 300, h: 200 } },
+				{
+					id: nestedIds.frameBox,
+					type: 'geo',
+					parentId: nestedIds.frame1,
+					x: 50,
+					y: 50,
+					props: { w: 100, h: 100 },
+				},
+			])
+			.groupShapes([nestedIds.groupBoxA, nestedIds.groupBoxB], { groupId: nestedIds.group1 })
+			.createShapes([
+				{
+					id: nestedIds.arrowPageToGroup,
+					type: 'arrow',
+					x: 150,
+					y: 200,
+					props: { start: { x: 0, y: 0 }, end: { x: 50, y: -100 } },
+				},
+				{
+					id: nestedIds.arrowGroupToFrame,
+					type: 'arrow',
+					x: 450,
+					y: 250,
+					props: { start: { x: 0, y: 0 }, end: { x: -150, y: 250 } },
+				},
+			])
+			.createBindings([
+				{
+					type: 'arrow',
+					fromId: nestedIds.arrowPageToGroup,
+					toId: nestedIds.pageBox,
+					props: {
+						terminal: 'start',
+						isExact: false,
+						isPrecise: true,
+						normalizedAnchor: { x: 0.5, y: 0.5 },
+					},
+				},
+				{
+					type: 'arrow',
+					fromId: nestedIds.arrowPageToGroup,
+					toId: nestedIds.groupBoxA,
+					props: {
+						terminal: 'end',
+						isExact: false,
+						isPrecise: true,
+						normalizedAnchor: { x: 0.5, y: 0.5 },
+					},
+				},
+				{
+					type: 'arrow',
+					fromId: nestedIds.arrowGroupToFrame,
+					toId: nestedIds.groupBoxB,
+					props: {
+						terminal: 'start',
+						isExact: false,
+						isPrecise: true,
+						normalizedAnchor: { x: 0.5, y: 0.5 },
+					},
+				},
+				{
+					type: 'arrow',
+					fromId: nestedIds.arrowGroupToFrame,
+					toId: nestedIds.frameBox,
+					props: {
+						terminal: 'end',
+						isExact: false,
+						isPrecise: true,
+						normalizedAnchor: { x: 0.5, y: 0.5 },
+					},
+				},
+			])
+			.selectNone()
+	})
+
+	const getArrowTerminalPagePoints = (arrowId: TLShapeId) => {
+		const arrow = editor.getShape<TLArrowShape>(arrowId)!
+		const bindings = getArrowBindings(editor, arrow)
+		const terminals = getArrowTerminalsInArrowSpace(editor, arrow, bindings)
+		const pageTransform = editor.getShapePageTransform(arrowId)!
+		return {
+			start: Mat.applyToPoint(pageTransform, terminals.start),
+			end: Mat.applyToPoint(pageTransform, terminals.end),
+		}
+	}
+
+	it('resizes the children of a group', () => {
+		editor
+			.select(nestedIds.group1)
+			// the group's page bounds are (200,0) -> (500,200); double them
+			.pointerDownOnHandle('bottom_right')
+			.pointerMove(800, 400)
+
+		expect(roundedPageBounds(nestedIds.group1)).toMatchObject({ x: 200, y: 0, w: 600, h: 400 })
+		expect(roundedPageBounds(nestedIds.groupBoxA)).toMatchObject({ x: 200, y: 0, w: 200, h: 200 })
+		expect(roundedPageBounds(nestedIds.groupBoxB)).toMatchObject({
+			x: 600,
+			y: 200,
+			w: 200,
+			h: 200,
+		})
+
+		// shapes outside of the group are unaffected
+		expect(roundedPageBounds(nestedIds.pageBox)).toMatchObject({ x: 0, y: 200, w: 100, h: 100 })
+		expect(roundedPageBounds(nestedIds.frameBox)).toMatchObject({ x: 250, y: 450, w: 100, h: 100 })
+	})
+
+	it('resizes the children of nested groups on every pointer move', () => {
+		const boxP = createShapeId('boxP')
+		const boxQ = createShapeId('boxQ')
+		const boxR = createShapeId('boxR')
+		const innerGroup = createShapeId('innerGroup')
+		const outerGroup = createShapeId('outerGroup')
+
+		editor
+			.selectAll()
+			.deleteShapes(editor.getSelectedShapeIds())
+			.createShapes([
+				{ id: boxP, type: 'geo', x: 0, y: 0, props: { w: 100, h: 100 } },
+				{ id: boxQ, type: 'geo', x: 200, y: 200, props: { w: 100, h: 100 } },
+			])
+			.groupShapes([boxP, boxQ], { groupId: innerGroup })
+			.createShapes([{ id: boxR, type: 'geo', x: 400, y: 400, props: { w: 100, h: 100 } }])
+			.groupShapes([innerGroup, boxR], { groupId: outerGroup })
+			.select(outerGroup)
+
+		expect(roundedPageBounds(outerGroup)).toMatchObject({ x: 0, y: 0, w: 500, h: 500 })
+
+		// grow to double the size; each pointer move must update the outer
+		// group, then the inner group, then the innermost children, since each
+		// level's new position depends on its parent's committed transform
+		editor.pointerDownOnHandle('bottom_right').pointerMove(1000, 1000)
+
+		expect(roundedPageBounds(outerGroup)).toMatchObject({ x: 0, y: 0, w: 1000, h: 1000 })
+		expect(roundedPageBounds(innerGroup)).toMatchObject({ x: 0, y: 0, w: 600, h: 600 })
+		expect(roundedPageBounds(boxP)).toMatchObject({ x: 0, y: 0, w: 200, h: 200 })
+		expect(roundedPageBounds(boxQ)).toMatchObject({ x: 400, y: 400, w: 200, h: 200 })
+		expect(roundedPageBounds(boxR)).toMatchObject({ x: 800, y: 800, w: 200, h: 200 })
+
+		// then shrink to half the original size in the same gesture
+		editor.pointerMove(250, 250)
+
+		expect(roundedPageBounds(outerGroup)).toMatchObject({ x: 0, y: 0, w: 250, h: 250 })
+		expect(roundedPageBounds(innerGroup)).toMatchObject({ x: 0, y: 0, w: 150, h: 150 })
+		expect(roundedPageBounds(boxP)).toMatchObject({ x: 0, y: 0, w: 50, h: 50 })
+		expect(roundedPageBounds(boxQ)).toMatchObject({ x: 100, y: 100, w: 50, h: 50 })
+		expect(roundedPageBounds(boxR)).toMatchObject({ x: 200, y: 200, w: 50, h: 50 })
+
+		editor.pointerUp()
+
+		expect(roundedPageBounds(boxP)).toMatchObject({ x: 0, y: 0, w: 50, h: 50 })
+		expect(roundedPageBounds(boxQ)).toMatchObject({ x: 100, y: 100, w: 50, h: 50 })
+		expect(roundedPageBounds(boxR)).toMatchObject({ x: 200, y: 200, w: 50, h: 50 })
+	})
+
+	it('keeps arrows bound to shapes inside a resized group', () => {
+		editor
+			.select(nestedIds.group1)
+			.pointerDownOnHandle('bottom_right')
+			.pointerMove(800, 400)
+			.pointerUp()
+
+		const bindings = getArrowBindings(
+			editor,
+			editor.getShape<TLArrowShape>(nestedIds.arrowPageToGroup)!
+		)
+		expect(bindings.start).toMatchObject({ toId: nestedIds.pageBox })
+		expect(bindings.end).toMatchObject({ toId: nestedIds.groupBoxA })
+
+		const terminals = getArrowTerminalPagePoints(nestedIds.arrowPageToGroup)
+		// the start terminal stays at the center of the unselected page shape
+		expect(terminals.start).toCloselyMatchObject({ x: 50, y: 250 })
+		// the end terminal follows the center of the resized group child
+		expect(terminals.end).toCloselyMatchObject({ x: 300, y: 100 })
+	})
+
+	it('resizes a mixed selection of page, group, and frame shapes', () => {
+		editor
+			.selectAll()
+			// the selection's page bounds are (0,0) -> (500,600); double them
+			.pointerDownOnHandle('bottom_right')
+			.pointerMove(1000, 1200)
+			.pointerUp()
+
+		expect(roundedPageBounds(nestedIds.pageBox)).toMatchObject({ x: 0, y: 400, w: 200, h: 200 })
+		expect(roundedPageBounds(nestedIds.group1)).toMatchObject({ x: 400, y: 0, w: 600, h: 400 })
+		expect(roundedPageBounds(nestedIds.groupBoxA)).toMatchObject({ x: 400, y: 0, w: 200, h: 200 })
+		expect(roundedPageBounds(nestedIds.groupBoxB)).toMatchObject({
+			x: 800,
+			y: 200,
+			w: 200,
+			h: 200,
+		})
+		expect(roundedPageBounds(nestedIds.frame1)).toMatchObject({ x: 400, y: 800, w: 600, h: 400 })
+
+		// the frame's child is not resized; it keeps its position within the frame
+		expect(editor.getShape(nestedIds.frameBox)).toMatchObject({ x: 50, y: 50 })
+		expect(roundedPageBounds(nestedIds.frameBox)).toMatchObject({ x: 450, y: 850, w: 100, h: 100 })
+
+		// the arrow terminals follow the shapes they are bound to
+		const pageToGroup = getArrowTerminalPagePoints(nestedIds.arrowPageToGroup)
+		expect(pageToGroup.start).toCloselyMatchObject({ x: 100, y: 500 })
+		expect(pageToGroup.end).toCloselyMatchObject({ x: 500, y: 100 })
+
+		const groupToFrame = getArrowTerminalPagePoints(nestedIds.arrowGroupToFrame)
+		expect(groupToFrame.start).toCloselyMatchObject({ x: 900, y: 300 })
+		expect(groupToFrame.end).toCloselyMatchObject({ x: 500, y: 900 })
+	})
+})
+
 function getGapAndPointLines() {
 	const gapLines = editor.snaps
 		.getIndicators()

package/src/test/right-click-context-menu.test.ts

@@ -0,0 +1,90 @@
+import { createShapeId } from '@tldraw/editor'
+import { TestEditor } from './TestEditor'
+
+let editor: TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+afterEach(() => {
+	editor?.dispose()
+})
+
+// A right-click opens the context menu, which is a select-tool surface — every
+// item acts on the current selection. The editor routes every right-click
+// through the select tool before the event reaches the state chart, so the
+// select tool's idle resolves the selection at the click point (selecting the
+// shape under the pointer, or clearing the selection) regardless of which tool
+// was active. This keeps the menu consistent with the click in any tool, and
+// never creates a shape from a creation tool. See #8277 and #8828.
+
+// Shape-creation tools: right-click must switch to select and never create a shape.
+const CREATION_TOOLS = ['geo', 'note', 'text', 'line', 'arrow', 'draw', 'frame'] as const
+
+// Other non-select tools: right-click must still switch to select so the menu
+// reflects the click rather than a stale selection.
+const OTHER_TOOLS = ['hand', 'eraser', 'laser', 'zoom'] as const
+
+describe('right click routes through the select tool', () => {
+	it.each(CREATION_TOOLS)('%s switches to the select tool and creates no shape', (tool) => {
+		editor.setCurrentTool(tool)
+
+		editor.rightClick(100, 100)
+
+		editor.expectToBeIn('select.idle')
+		expect(editor.getCurrentPageShapes()).toHaveLength(0)
+	})
+
+	it.each(OTHER_TOOLS)('%s switches to the select tool', (tool) => {
+		editor.setCurrentTool(tool)
+
+		editor.rightClick(100, 100)
+
+		editor.expectToBeIn('select.idle')
+	})
+
+	it('stays in the select tool when already active', () => {
+		editor.setCurrentTool('select')
+
+		editor.rightClick(100, 100)
+
+		editor.expectToBeIn('select.idle')
+	})
+
+	it('selects the shape under the pointer so the menu reflects it', () => {
+		const id = createShapeId()
+		editor.createShape({
+			id,
+			type: 'geo',
+			x: 0,
+			y: 0,
+			props: { w: 100, h: 100, geo: 'rectangle' },
+		})
+		editor.selectNone()
+
+		editor.setCurrentTool('geo')
+		editor.rightClick(50, 50)
+
+		editor.expectToBeIn('select.idle')
+		expect(editor.getSelectedShapeIds()).toEqual([id])
+	})
+
+	it('clears a stale selection when right-clicking empty canvas from another tool', () => {
+		const id = createShapeId()
+		editor.createShape({
+			id,
+			type: 'geo',
+			x: 0,
+			y: 0,
+			props: { w: 100, h: 100, geo: 'rectangle' },
+		})
+		editor.select(id)
+
+		// right-click far from the selected shape, while a non-select tool is active
+		editor.setCurrentTool('hand')
+		editor.rightClick(500, 500)
+
+		editor.expectToBeIn('select.idle')
+		expect(editor.getSelectedShapeIds()).toEqual([])
+	})
+})

package/src/test/rightClickPanning.test.ts

@@ -1,3 +1,4 @@
+import { Vec } from '@tldraw/editor'
 import { TestEditor } from './TestEditor'
 
 describe('with rightClickPanning enabled (default)', () => {
@@ -17,6 +18,16 @@ describe('with rightClickPanning enabled (default)', () => {
 		expect(editor.inputs.getIsPanning()).toBe(false)
 	})
 
+	it('does not zoom when momentum panning on release', () => {
+		editor.pointerDown(100, 100, { button: 2 })
+		editor.pointerMove(200, 200)
+		expect(editor.inputs.getIsPanning()).toBe(true)
+		editor.inputs.setPointerVelocity(new Vec(1, 1))
+		editor.pointerUp(200, 200, { button: 2 }).forceTick()
+
+		expect(editor.getCamera().z).toBe(1)
+	})
+
 	it('does not pan on a static right-click', () => {
 		editor.pointerDown(100, 100, { button: 2 })
 		editor.pointerUp(100, 100, { button: 2 })

package/src/test/selection-omnibus.test.ts

@@ -1785,7 +1785,7 @@ describe('right clicking', () => {
 		expect(editor.getSelectedShapeIds()).toEqual([ids.box1])
 	})
 
-	it('keeps selection when right-clicking a selection background', () => {
+	it('keeps selection when right-clicking inside the selection bounds', () => {
 		editor.createShapes([{ id: ids.box1, type: 'geo' }])
 		editor.selectAll()
 		editor.pointerMove(30, 30)
@@ -1817,7 +1817,7 @@ describe('right clicking', () => {
 		expect(editor.getSelectedShapeIds()).toEqual([ids.box2, ids.box3])
 	})
 
-	it('keeps selection when right-clicking a selection background', () => {
+	it('clears selection when right-clicking outside the selected arrow', () => {
 		editor
 			.selectAll()
 			.deleteShapes(editor.getSelectedShapeIds())
@@ -2188,6 +2188,19 @@ describe('control pointing', () => {
 		// ...and expect menu to be open, but that's a native thing
 	})
 
+	it('selects locked shapes on ctrl click when on a mac', () => {
+		tlenv.isDarwin = true
+
+		editor.createShape({ id: ids.box4, type: 'geo', x: 600, isLocked: true })
+
+		expect(editor.getSelectedShapeIds()).toEqual([ids.box1])
+		editor.keyDown('Control')
+		editor.pointerMove(650, 50) // inside of locked box 4
+		editor.pointerDown()
+		editor.pointerUp()
+		expect(editor.getSelectedShapeIds()).toEqual([ids.box4])
+	})
+
 	it('selects on ctrl click when on a pc or other device', () => {
 		tlenv.isDarwin = false
 

package/src/test/spatialIndex.test.ts

@@ -223,6 +223,138 @@ describe('SpatialIndexManager - step-2 transitive bounds sweep', () => {
 	})
 })
 
+describe('SpatialIndexManager - binding-only diffs', () => {
+	it('refreshes arrow bounds when bindings are created in a separate step from the shapes', () => {
+		// Regression: an arrow's bounds derive from its bindings, but a
+		// binding-only transaction contains no shape diff. If the index was
+		// queried between createShapes and createBindings (the hover side
+		// effect does this on every store change), the arrow stayed indexed
+		// at its unbound bounds and parts of the bound body were
+		// un-hoverable.
+		const boxAId = createShapeId('boxA')
+		const boxBId = createShapeId('boxB')
+		const arrowId = createShapeId('arrow')
+
+		editor.createShapes([
+			{ id: boxAId, type: 'geo', x: 0, y: 0, props: { w: 100, h: 100, fill: 'none' } },
+			{ id: boxBId, type: 'geo', x: 500, y: 0, props: { w: 100, h: 100, fill: 'none' } },
+			// The arrow's own terminals are far from the shapes it will be
+			// bound to, as happens when content is created via the API.
+			{
+				id: arrowId,
+				type: 'arrow',
+				x: 2000,
+				y: 2000,
+				props: { kind: 'arc', bend: -50, start: { x: 0, y: 0 }, end: { x: 100, y: 0 } },
+			},
+		])
+
+		const unboundBounds = editor.getShapePageBounds(arrowId)!
+
+		// Pull the spatial index so the arrow is indexed at its unbound
+		// bounds before the bindings exist.
+		expect(editor.getShapeIdsInsideBounds(unboundBounds).has(arrowId)).toBe(true)
+
+		editor.createBindings([
+			{
+				type: 'arrow',
+				fromId: arrowId,
+				toId: boxAId,
+				props: {
+					terminal: 'start',
+					isExact: false,
+					isPrecise: false,
+					normalizedAnchor: { x: 0.5, y: 0.5 },
+				},
+			},
+			{
+				type: 'arrow',
+				fromId: arrowId,
+				toId: boxBId,
+				props: {
+					terminal: 'end',
+					isExact: false,
+					isPrecise: false,
+					normalizedAnchor: { x: 0.5, y: 0.5 },
+				},
+			},
+		])
+
+		const boundBounds = editor.getShapePageBounds(arrowId)!
+		expect(boundBounds.equals(unboundBounds)).toBe(false)
+
+		// The index must reflect the bound bounds...
+		expect(editor.getShapeIdsInsideBounds(boundBounds).has(arrowId)).toBe(true)
+
+		// ...and the arrow must be hit-testable on its bound body.
+		const apex = { x: boundBounds.midX, y: boundBounds.minY + 1 }
+		expect(editor.getShapeAtPoint(apex, { hitInside: false, margin: 8 })?.id).toBe(arrowId)
+	})
+
+	it('ticks the epoch and refreshes arrow bounds when a binding update moves the arrow', () => {
+		const boxAId = createShapeId('boxA')
+		const boxBId = createShapeId('boxB')
+		const arrowId = createShapeId('arrow')
+
+		editor.createShapes([
+			{ id: boxAId, type: 'geo', x: 0, y: 0, props: { w: 100, h: 100, fill: 'none' } },
+			{ id: boxBId, type: 'geo', x: 500, y: 500, props: { w: 100, h: 100, fill: 'none' } },
+			{
+				id: arrowId,
+				type: 'arrow',
+				x: 0,
+				y: 0,
+				props: { start: { x: 0, y: 0 }, end: { x: 100, y: 0 } },
+			},
+		])
+		editor.createBindings([
+			{
+				type: 'arrow',
+				fromId: arrowId,
+				toId: boxAId,
+				props: {
+					terminal: 'start',
+					isExact: false,
+					isPrecise: true,
+					normalizedAnchor: { x: 0, y: 0 },
+				},
+			},
+			{
+				type: 'arrow',
+				fromId: arrowId,
+				toId: boxBId,
+				props: {
+					terminal: 'end',
+					isExact: false,
+					isPrecise: true,
+					normalizedAnchor: { x: 0, y: 0 },
+				},
+			},
+		])
+
+		const boundsBefore = editor.getShapePageBounds(arrowId)!
+		const tracker = trackSpatialIndexInvalidations(editor, boundsBefore.clone())
+
+		// Move the end terminal across the target shape with a binding-only
+		// update; the arrow record itself is untouched.
+		const binding = editor
+			.getBindingsFromShape(arrowId, 'arrow')
+			.find((b) => b.props.terminal === 'end')!
+		editor.updateBinding({
+			...binding,
+			props: { ...binding.props, normalizedAnchor: { x: 0.5, y: 1 } },
+		})
+
+		const boundsAfter = editor.getShapePageBounds(arrowId)!
+		expect(boundsAfter.equals(boundsBefore)).toBe(false)
+		expect(tracker.delta).toBe(1)
+
+		const probe = probeOnlyInAfter(boundsBefore, boundsAfter)
+		expect(editor.getShapeIdsInsideBounds(probe).has(arrowId)).toBe(true)
+		tracker.stop()
+	})
+})
+
 describe('SpatialIndexManager - basic queries', () => {
 	it('returns shapes inside the queried bounds', () => {
 		const insideId = createShapeId('inside')

package/src/test/translating.test.ts

@@ -783,9 +783,6 @@ describe('snapping with multiple shapes', () => {
 })
 
 describe('Snap-between behavior', () => {
-	beforeEach(() => {
-		editor?.dispose()
-	})
 	it('snaps a shape horizontally between two others', () => {
 		// ┌─────┐               ┌─────┐
 		// │     │               │     │
@@ -1160,9 +1157,6 @@ describe('Snap-between behavior', () => {
 })
 
 describe('Snap-next-to behavior', () => {
-	beforeEach(() => {
-		editor?.dispose()
-	})
 	it('snaps a shape to the left of two others, matching the gap size', () => {
 		// ┌───┐
 		// │ X │