@tldraw/editor 3.16.0-internal.a478398270c6 → 3.16.0-next.15f085081fd5

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

@@ -1,3 +1,4 @@
+import { vi } from 'vitest'
 import {
 	Box,
 	Geometry2d,
@@ -59,8 +60,8 @@ beforeEach(() => {
 		getContainer: () => document.body,
 	})
 	editor.setCameraOptions({ isLocked: true })
-	editor.setCamera = jest.fn()
-	editor.user.getAnimationSpeed = jest.fn()
+	editor.setCamera = vi.fn()
+	editor.user.getAnimationSpeed = vi.fn()
 })
 
 describe('centerOnPoint', () => {
@@ -94,13 +95,13 @@ describe('updateShape', () => {
 
 describe('zoomToFit', () => {
 	it('no-op when isLocked is set', () => {
-		editor.getCurrentPageShapeIds = jest.fn(() => new Set([createShapeId('box1')]))
+		editor.getCurrentPageShapeIds = vi.fn(() => new Set([createShapeId('box1')]))
 		editor.zoomToFit()
 		expect(editor.setCamera).not.toHaveBeenCalled()
 	})
 
 	it('sets camera when isLocked is set and force flag is set', () => {
-		editor.getCurrentPageShapeIds = jest.fn(() => new Set([createShapeId('box1')]))
+		editor.getCurrentPageShapeIds = vi.fn(() => new Set([createShapeId('box1')]))
 		editor.zoomToFit({ force: true })
 		expect(editor.setCamera).toHaveBeenCalled()
 	})
@@ -144,13 +145,13 @@ describe('zoomOut', () => {
 
 describe('zoomToSelection', () => {
 	it('no-op when isLocked is set', () => {
-		editor.getSelectionPageBounds = jest.fn(() => Box.From({ x: 0, y: 0, w: 100, h: 100 }))
+		editor.getSelectionPageBounds = vi.fn(() => Box.From({ x: 0, y: 0, w: 100, h: 100 }))
 		editor.zoomToSelection()
 		expect(editor.setCamera).not.toHaveBeenCalled()
 	})
 
 	it('sets camera when isLocked is set and force flag is set', () => {
-		editor.getSelectionPageBounds = jest.fn(() => Box.From({ x: 0, y: 0, w: 100, h: 100 }))
+		editor.getSelectionPageBounds = vi.fn(() => Box.From({ x: 0, y: 0, w: 100, h: 100 }))
 		editor.zoomToSelection({ force: true })
 		expect(editor.setCamera).toHaveBeenCalled()
 	})
@@ -286,7 +287,7 @@ describe('getShapesAtPoint', () => {
 
 	it('filters out hidden shapes', () => {
 		// Create a spy to mock isShapeHidden
-		const isShapeHiddenSpy = jest.spyOn(editor, 'isShapeHidden')
+		const isShapeHiddenSpy = vi.spyOn(editor, 'isShapeHidden')
 		isShapeHiddenSpy.mockImplementation((shape) => {
 			return typeof shape === 'string' ? shape === ids.shape3 : shape.id === ids.shape3
 		})
@@ -352,7 +353,7 @@ describe('getShapesAtPoint', () => {
 
 	it('returns empty array when all shapes are hidden', () => {
 		// Mock all shapes as hidden
-		const isShapeHiddenSpy = jest.spyOn(editor, 'isShapeHidden')
+		const isShapeHiddenSpy = vi.spyOn(editor, 'isShapeHidden')
 		isShapeHiddenSpy.mockReturnValue(true)
 
 		const shapes = editor.getShapesAtPoint({ x: 50, y: 50 })
@@ -425,3 +426,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 = vi.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 = vi.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 = vi.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()
+	})
+})