@tldraw/editor 3.15.0-next.39f008bfb627 → 3.15.0-next.82ffd490a4f1

package/src/lib/components/default-components/DefaultGrid.tsx

@@ -16,7 +16,7 @@ export function DefaultGrid({ x, y, z, size }: TLGridProps) {
 	const editor = useEditor()
 	const { gridSteps } = editor.options
 	return (
-		<svg className="tl-grid" version="1.1" xmlns="http://www.w3.org/2000/svg">
+		<svg className="tl-grid" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
 			<defs>
 				{gridSteps.map(({ min, mid, step }, i) => {
 					const s = step * size * z

package/src/lib/components/default-components/DefaultHandles.tsx

@@ -7,5 +7,9 @@ export interface TLHandlesProps {
 
 /** @public @react */
 export const DefaultHandles = ({ children }: TLHandlesProps) => {
-	return <svg className="tl-user-handles tl-overlays__item">{children}</svg>
+	return (
+		<svg className="tl-user-handles tl-overlays__item" aria-hidden="true">
+			{children}
+		</svg>
+	)
 }

package/src/lib/components/default-components/DefaultShapeIndicator.tsx

@@ -86,7 +86,7 @@ export const DefaultShapeIndicator = memo(function DefaultShapeIndicator({
 	}, [hidden])
 
 	return (
-		<svg ref={rIndicator} className={classNames('tl-overlays__item', className)}>
+		<svg ref={rIndicator} className={classNames('tl-overlays__item', className)} aria-hidden="true">
 			<g className="tl-shape-indicator" stroke={color ?? 'var(--color-selected)'} opacity={opacity}>
 				<InnerIndicator editor={editor} id={shapeId} />
 			</g>

package/src/lib/components/default-components/DefaultSnapIndictor.tsx

@@ -163,7 +163,7 @@ export interface TLSnapIndicatorProps {
 /** @public @react */
 export function DefaultSnapIndicator({ className, line, zoom }: TLSnapIndicatorProps) {
 	return (
-		<svg className={classNames('tl-overlays__item', className)}>
+		<svg className={classNames('tl-overlays__item', className)} aria-hidden="true">
 			{line.type === 'points' ? (
 				<PointsSnapIndicator {...line} zoom={zoom} />
 			) : line.type === 'gaps' ? (

package/src/lib/components/default-components/DefaultSpinner.tsx

@@ -1,19 +1,19 @@
+import classNames from 'classnames'
+
 /** @public @react */
-export function DefaultSpinner() {
+export function DefaultSpinner(props: React.SVGProps<SVGSVGElement>) {
 	return (
-		<svg width={16} height={16} viewBox="0 0 16 16" aria-hidden="false">
+		<svg
+			width={16}
+			height={16}
+			viewBox="0 0 16 16"
+			aria-hidden="false"
+			{...props}
+			className={classNames('tl-spinner', props.className)}
+		>
 			<g strokeWidth={2} fill="none" fillRule="evenodd">
 				<circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke="currentColor" />
-				<path strokeLinecap="round" d="M15 8c0-4.5-4.5-7-7-7" stroke="currentColor">
-					<animateTransform
-						attributeName="transform"
-						type="rotate"
-						from="0 8 8"
-						to="360 8 8"
-						dur="1s"
-						repeatCount="indefinite"
-					/>
-				</path>
+				<path strokeLinecap="round" d="M15 8c0-4.5-4.5-7-7-7" stroke="currentColor" />
 			</g>
 		</svg>
 	)

package/src/lib/editor/Editor.test.ts

@@ -425,3 +425,410 @@ describe('getShapesAtPoint', () => {
 		expect(hollowShapesWithHitInside[0].id).toBe(ids.hollowShape)
 	})
 })
+
+describe('selectAll', () => {
+	const selectAllIds = {
+		pageShape1: createShapeId('pageShape1'),
+		pageShape2: createShapeId('pageShape2'),
+		pageShape3: createShapeId('pageShape3'),
+		container1: createShapeId('container1'),
+		containerChild1: createShapeId('containerChild1'),
+		containerChild2: createShapeId('containerChild2'),
+		containerChild3: createShapeId('containerChild3'),
+		containerGrandchild1: createShapeId('containerGrandchild1'),
+		container2: createShapeId('container2'),
+		container2Child1: createShapeId('container2Child1'),
+		container2Child2: createShapeId('container2Child2'),
+		container2Grandchild1: createShapeId('container2Grandchild1'),
+		lockedShape: createShapeId('lockedShape'),
+	}
+
+	beforeEach(() => {
+		// Clear any existing shapes
+		editor.selectAll().deleteShapes(editor.getSelectedShapeIds())
+
+		// Create shapes directly on the page (no parentId means they're children of the page)
+		editor.createShapes([
+			{
+				id: selectAllIds.pageShape1,
+				type: 'my-custom-shape',
+				x: 100,
+				y: 100,
+				props: { w: 100, h: 100 },
+			},
+			{
+				id: selectAllIds.pageShape2,
+				type: 'my-custom-shape',
+				x: 300,
+				y: 100,
+				props: { w: 100, h: 100 },
+			},
+			{
+				id: selectAllIds.pageShape3,
+				type: 'my-custom-shape',
+				x: 500,
+				y: 100,
+				props: { w: 100, h: 100 },
+			},
+			{
+				id: selectAllIds.lockedShape,
+				type: 'my-custom-shape',
+				x: 700,
+				y: 100,
+				props: { w: 100, h: 100 },
+				isLocked: true,
+			},
+		])
+
+		// Create a container shape (simulating a frame or group)
+		editor.createShape({
+			id: selectAllIds.container1,
+			type: 'my-custom-shape',
+			x: 100,
+			y: 300,
+			props: { w: 400, h: 200 },
+		})
+
+		// Create children inside the container (parentId set to container1)
+		editor.createShapes([
+			{
+				id: selectAllIds.containerChild1,
+				type: 'my-custom-shape',
+				parentId: selectAllIds.container1,
+				x: 120,
+				y: 320,
+				props: { w: 50, h: 50 },
+			},
+			{
+				id: selectAllIds.containerChild2,
+				type: 'my-custom-shape',
+				parentId: selectAllIds.container1,
+				x: 200,
+				y: 320,
+				props: { w: 50, h: 50 },
+			},
+			{
+				id: selectAllIds.containerChild3,
+				type: 'my-custom-shape',
+				parentId: selectAllIds.container1,
+				x: 280,
+				y: 320,
+				props: { w: 50, h: 50 },
+			},
+		])
+
+		// Create a grandchild inside one of the container children
+		editor.createShape({
+			id: selectAllIds.containerGrandchild1,
+			type: 'my-custom-shape',
+			parentId: selectAllIds.containerChild3,
+			x: 290,
+			y: 330,
+			props: { w: 30, h: 30 },
+		})
+
+		// Create a second container (simulating a group)
+		editor.createShape({
+			id: selectAllIds.container2,
+			type: 'my-custom-shape',
+			x: 600,
+			y: 300,
+			props: { w: 200, h: 200 },
+		})
+
+		// Create children inside the second container
+		editor.createShapes([
+			{
+				id: selectAllIds.container2Child1,
+				type: 'my-custom-shape',
+				parentId: selectAllIds.container2,
+				x: 620,
+				y: 320,
+				props: { w: 50, h: 50 },
+			},
+			{
+				id: selectAllIds.container2Child2,
+				type: 'my-custom-shape',
+				parentId: selectAllIds.container2,
+				x: 680,
+				y: 320,
+				props: { w: 50, h: 50 },
+			},
+		])
+
+		// Create a grandchild in the second container
+		editor.createShape({
+			id: selectAllIds.container2Grandchild1,
+			type: 'my-custom-shape',
+			parentId: selectAllIds.container2Child1,
+			x: 630,
+			y: 330,
+			props: { w: 30, h: 30 },
+		})
+
+		// Clear selection
+		editor.selectNone()
+	})
+
+	it('when no shapes are selected, selects all page-level shapes (excluding locked ones)', () => {
+		// Initially no shapes selected
+		expect(editor.getSelectedShapeIds()).toEqual([])
+
+		// Call selectAll
+		editor.selectAll()
+
+		// Should select all page-level shapes (excluding locked ones)
+		const selectedIds = editor.getSelectedShapeIds()
+		expect(Array.from(selectedIds).sort()).toEqual(
+			[
+				selectAllIds.pageShape1,
+				selectAllIds.pageShape2,
+				selectAllIds.pageShape3,
+				selectAllIds.container1,
+				selectAllIds.container2,
+			].sort()
+		)
+
+		// Should NOT include locked shape or children/grandchildren
+		expect(selectedIds).not.toContain(selectAllIds.lockedShape)
+		expect(selectedIds).not.toContain(selectAllIds.containerChild1)
+		expect(selectedIds).not.toContain(selectAllIds.containerChild2)
+		expect(selectedIds).not.toContain(selectAllIds.containerChild3)
+		expect(selectedIds).not.toContain(selectAllIds.containerGrandchild1)
+		expect(selectedIds).not.toContain(selectAllIds.container2Child1)
+		expect(selectedIds).not.toContain(selectAllIds.container2Child2)
+		expect(selectedIds).not.toContain(selectAllIds.container2Grandchild1)
+	})
+
+	it('when shapes are selected only on the page, all children of the page should be selected (but not their descendants)', () => {
+		// Select some page-level shapes
+		editor.select(selectAllIds.pageShape1, selectAllIds.pageShape2)
+
+		// Call selectAll
+		editor.selectAll()
+
+		// Should select all page-level shapes (excluding locked ones), but not descendants
+		const selectedIds = editor.getSelectedShapeIds()
+		expect(Array.from(selectedIds).sort()).toEqual(
+			[
+				selectAllIds.pageShape1,
+				selectAllIds.pageShape2,
+				selectAllIds.pageShape3,
+				selectAllIds.container1,
+				selectAllIds.container2,
+			].sort()
+		)
+
+		// Should NOT include children or grandchildren or locked shapes
+		expect(selectedIds).not.toContain(selectAllIds.containerChild1)
+		expect(selectedIds).not.toContain(selectAllIds.containerChild2)
+		expect(selectedIds).not.toContain(selectAllIds.containerChild3)
+		expect(selectedIds).not.toContain(selectAllIds.containerGrandchild1)
+		expect(selectedIds).not.toContain(selectAllIds.container2Child1)
+		expect(selectedIds).not.toContain(selectAllIds.container2Child2)
+		expect(selectedIds).not.toContain(selectAllIds.container2Grandchild1)
+		expect(selectedIds).not.toContain(selectAllIds.lockedShape)
+	})
+
+	it('when shapes are selected within a container, only children of the container should be selected (not their descendants)', () => {
+		// Select some container children
+		editor.select(selectAllIds.containerChild1, selectAllIds.containerChild2)
+
+		// Call selectAll
+		editor.selectAll()
+
+		// Should select all container children (but not their descendants)
+		const selectedIds = editor.getSelectedShapeIds()
+		expect(Array.from(selectedIds).sort()).toEqual(
+			[
+				selectAllIds.containerChild1,
+				selectAllIds.containerChild2,
+				selectAllIds.containerChild3,
+			].sort()
+		)
+
+		// Should NOT include page-level shapes or grandchildren
+		expect(selectedIds).not.toContain(selectAllIds.pageShape1)
+		expect(selectedIds).not.toContain(selectAllIds.pageShape2)
+		expect(selectedIds).not.toContain(selectAllIds.pageShape3)
+		expect(selectedIds).not.toContain(selectAllIds.container1)
+		expect(selectedIds).not.toContain(selectAllIds.container2)
+		expect(selectedIds).not.toContain(selectAllIds.containerGrandchild1)
+		expect(selectedIds).not.toContain(selectAllIds.container2Child1)
+		expect(selectedIds).not.toContain(selectAllIds.container2Child2)
+		expect(selectedIds).not.toContain(selectAllIds.container2Grandchild1)
+	})
+
+	it('when shapes are selected within a second container, only children of that container should be selected', () => {
+		// Select some second container children
+		editor.select(selectAllIds.container2Child1)
+
+		// Call selectAll
+		editor.selectAll()
+
+		// Should select all second container children (but not their descendants)
+		const selectedIds = editor.getSelectedShapeIds()
+		expect(Array.from(selectedIds).sort()).toEqual(
+			[selectAllIds.container2Child1, selectAllIds.container2Child2].sort()
+		)
+
+		// Should NOT include page-level shapes or other container's children or grandchildren
+		expect(selectedIds).not.toContain(selectAllIds.pageShape1)
+		expect(selectedIds).not.toContain(selectAllIds.pageShape2)
+		expect(selectedIds).not.toContain(selectAllIds.pageShape3)
+		expect(selectedIds).not.toContain(selectAllIds.container1)
+		expect(selectedIds).not.toContain(selectAllIds.container2)
+		expect(selectedIds).not.toContain(selectAllIds.containerChild1)
+		expect(selectedIds).not.toContain(selectAllIds.containerChild2)
+		expect(selectedIds).not.toContain(selectAllIds.containerChild3)
+		expect(selectedIds).not.toContain(selectAllIds.containerGrandchild1)
+		expect(selectedIds).not.toContain(selectAllIds.container2Grandchild1)
+	})
+
+	it('when shapes are selected that belong to different parents, no change/history entry should be made', () => {
+		// Select shapes from different parents (page and container)
+		editor.select(selectAllIds.pageShape1, selectAllIds.containerChild1)
+
+		const initialSelectedIds = editor.getSelectedShapeIds()
+
+		// Spy on setSelectedShapes to verify it's not called
+		const setSelectedShapesSpy = jest.spyOn(editor, 'setSelectedShapes')
+
+		// Call selectAll
+		editor.selectAll()
+
+		// Selection should remain unchanged
+		expect(editor.getSelectedShapeIds()).toEqual(initialSelectedIds)
+
+		// setSelectedShapes should not have been called (the method returns early)
+		expect(setSelectedShapesSpy).not.toHaveBeenCalled()
+
+		setSelectedShapesSpy.mockRestore()
+	})
+
+	it('when shapes are selected that belong to different containers, no change/history entry should be made', () => {
+		// Select shapes from different containers
+		editor.select(selectAllIds.containerChild1, selectAllIds.container2Child1)
+
+		const initialSelectedIds = editor.getSelectedShapeIds()
+
+		// Spy on setSelectedShapes to verify it's not called
+		const setSelectedShapesSpy = jest.spyOn(editor, 'setSelectedShapes')
+
+		// Call selectAll
+		editor.selectAll()
+
+		// Selection should remain unchanged
+		expect(editor.getSelectedShapeIds()).toEqual(initialSelectedIds)
+
+		// setSelectedShapes should not have been called
+		expect(setSelectedShapesSpy).not.toHaveBeenCalled()
+
+		setSelectedShapesSpy.mockRestore()
+	})
+
+	it('should not select locked shapes', () => {
+		// Select a page-level shape
+		editor.select(selectAllIds.pageShape1)
+
+		// Call selectAll
+		editor.selectAll()
+
+		// Should select all page-level shapes except locked ones
+		const selectedIds = editor.getSelectedShapeIds()
+		expect(selectedIds).not.toContain(selectAllIds.lockedShape)
+		expect(selectedIds).toContain(selectAllIds.pageShape1)
+		expect(selectedIds).toContain(selectAllIds.pageShape2)
+		expect(selectedIds).toContain(selectAllIds.pageShape3)
+		expect(selectedIds).toContain(selectAllIds.container1)
+		expect(selectedIds).toContain(selectAllIds.container2)
+	})
+
+	it('should handle empty container by selecting all siblings at the same level', () => {
+		// Create an empty container
+		const emptyContainerId = createShapeId('emptyContainer')
+		editor.createShape({
+			id: emptyContainerId,
+			type: 'my-custom-shape',
+			x: 800,
+			y: 400,
+			props: { w: 100, h: 100 },
+		})
+
+		// Clear selection first
+		editor.selectNone()
+
+		// Select the empty container
+		editor.select(emptyContainerId)
+
+		// Call selectAll - since the empty container has no children, it should select all siblings (page-level shapes)
+		editor.selectAll()
+
+		// Should select all page-level shapes (including the empty container itself)
+		const selectedIds = editor.getSelectedShapeIds()
+		expect(Array.from(selectedIds).sort()).toEqual(
+			[
+				selectAllIds.pageShape1,
+				selectAllIds.pageShape2,
+				selectAllIds.pageShape3,
+				selectAllIds.container1,
+				selectAllIds.container2,
+				emptyContainerId,
+			].sort()
+		)
+
+		// Should NOT include locked shapes or children/grandchildren
+		expect(selectedIds).not.toContain(selectAllIds.lockedShape)
+		expect(selectedIds).not.toContain(selectAllIds.containerChild1)
+		expect(selectedIds).not.toContain(selectAllIds.containerChild2)
+		expect(selectedIds).not.toContain(selectAllIds.containerChild3)
+		expect(selectedIds).not.toContain(selectAllIds.containerGrandchild1)
+		expect(selectedIds).not.toContain(selectAllIds.container2Child1)
+		expect(selectedIds).not.toContain(selectAllIds.container2Child2)
+		expect(selectedIds).not.toContain(selectAllIds.container2Grandchild1)
+	})
+
+	it('should work correctly when selecting all shapes of same parent type', () => {
+		// Select all container children
+		editor.select(
+			selectAllIds.containerChild1,
+			selectAllIds.containerChild2,
+			selectAllIds.containerChild3
+		)
+
+		// Call selectAll - should maintain the same selection since all children are already selected
+		editor.selectAll()
+
+		// Should still have all container children selected
+		const selectedIds = editor.getSelectedShapeIds()
+		expect(Array.from(selectedIds).sort()).toEqual(
+			[
+				selectAllIds.containerChild1,
+				selectAllIds.containerChild2,
+				selectAllIds.containerChild3,
+			].sort()
+		)
+	})
+
+	it('should handle mixed selection levels gracefully by doing nothing', () => {
+		// Select a mix: page shape (parent=page), container (parent=page), and container child (parent=container1)
+		// These all have different parent IDs so selectAll should do nothing
+		editor.select(selectAllIds.pageShape1, selectAllIds.containerChild1)
+
+		const initialSelectedIds = Array.from(editor.getSelectedShapeIds())
+
+		// Spy on setSelectedShapes to verify it's not called
+		const setSelectedShapesSpy = jest.spyOn(editor, 'setSelectedShapes')
+
+		// Call selectAll
+		editor.selectAll()
+
+		// Selection should remain unchanged since shapes have different parents
+		expect(Array.from(editor.getSelectedShapeIds())).toEqual(initialSelectedIds)
+
+		// setSelectedShapes should not have been called
+		expect(setSelectedShapesSpy).not.toHaveBeenCalled()
+
+		setSelectedShapesSpy.mockRestore()
+	})
+})

package/src/lib/editor/Editor.ts

@@ -1803,7 +1803,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 	}
 
 	/**
-	 * Select all direct children of the current page.
+	 * Select all shapes. If the user has selected shapes that share a parent,
+	 * select all shapes within that parent. If the user has not selected any shapes,
+	 * or if the shapes shapes are only on select all shapes on the current page.
 	 *
 	 * @example
 	 * ```ts
@@ -1813,11 +1815,34 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	selectAll(): this {
-		const ids = this.getSortedChildIdsForParent(this.getCurrentPageId())
-		// page might have no shapes
+		let parentToSelectWithinId: TLParentId | null = null
+
+		const selectedShapeIds = this.getSelectedShapeIds()
+
+		// If we have selected shapes, try to find a parent to select within
+		if (selectedShapeIds.length > 0) {
+			for (const id of selectedShapeIds) {
+				const shape = this.getShape(id)
+				if (!shape) continue
+				if (parentToSelectWithinId === null) {
+					// If we haven't found a parent yet, set this parent as the parent to select within
+					parentToSelectWithinId = shape.parentId
+				} else if (parentToSelectWithinId !== shape.parentId) {
+					// If we've found two different parents, we can't select all, do nothing
+					return this
+				}
+			}
+		}
+
+		// If we haven't found a parent from our selected shapes, select the current page
+		if (!parentToSelectWithinId) {
+			parentToSelectWithinId = this.getCurrentPageId()
+		}
+
+		// Select all the unlocked shapes within the parent
+		const ids = this.getSortedChildIdsForParent(parentToSelectWithinId)
 		if (ids.length <= 0) return this
 		this.setSelectedShapes(this._getUnlockedShapeIds(ids))
-
 		return this
 	}
 
@@ -1838,10 +1863,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 			firstParentId &&
 			selectedShapeIds.every((shapeId) => this.getShape(shapeId)?.parentId === firstParentId) &&
 			!isPageId(firstParentId)
+		const filteredShapes = isSelectedWithinContainer
+			? this.getCurrentPageShapes().filter((shape) => shape.parentId === firstParentId)
+			: this.getCurrentPageShapes().filter((shape) => isPageId(shape.parentId))
 		const readingOrderShapes = isSelectedWithinContainer
-			? this._getShapesInReadingOrder(
-					this.getCurrentPageShapes().filter((shape) => shape.parentId === firstParentId)
-				)
+			? this._getShapesInReadingOrder(filteredShapes)
 			: this.getCurrentPageShapesInReadingOrder()
 		const currentShapeId: TLShapeId | undefined =
 			selectedShapeIds.length === 1
@@ -1858,7 +1884,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			adjacentShapeId = shapeIds[adjacentIndex]
 		} else {
 			if (!currentShapeId) return
-			adjacentShapeId = this.getNearestAdjacentShape(currentShapeId, direction)
+			adjacentShapeId = this.getNearestAdjacentShape(filteredShapes, currentShapeId, direction)
 		}
 
 		const shape = this.getShape(adjacentShapeId)
@@ -1957,6 +1983,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	getNearestAdjacentShape(
+		shapes: TLShape[],
 		currentShapeId: TLShapeId,
 		direction: 'left' | 'right' | 'up' | 'down'
 	): TLShapeId {
@@ -1964,7 +1991,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const currentShape = this.getShape(currentShapeId)
 		if (!currentShape) return currentShapeId
 
-		const shapes = this.getCurrentPageShapes()
 		const tabbableShapes = shapes.filter(
 			(shape) => this.getShapeUtil(shape).canTabTo(shape) && shape.id !== currentShapeId
 		)