@bigbluebutton/tldraw 2.0.0-alpha.19

package/src/test/commands/clipboard.test.ts

@@ -0,0 +1,481 @@
+import { createShapeId, TLArrowShape } from '@bigbluebutton/editor'
+import { TestEditor } from '../TestEditor'
+
+let editor: TestEditor
+
+const ids = {
+	box1: createShapeId('box1'),
+	box2: createShapeId('box2'),
+	box3: createShapeId('box3'),
+	box4: createShapeId('box4'),
+	arrow1: createShapeId('arrow1'),
+}
+
+beforeEach(() => {
+	editor = new TestEditor()
+
+	editor.selectAll().deleteShapes(editor.getSelectedShapeIds())
+})
+
+afterEach(() => {
+	editor.selectAll().deleteShapes(editor.getSelectedShapeIds())
+})
+
+const doMockClipboard = () => {
+	const context: { current: any } = { current: undefined }
+
+	Object.assign(window.navigator, {
+		clipboard: {
+			write: jest.fn((content: any) => {
+				context.current = content
+			}),
+		},
+	})
+
+	globalThis.ClipboardItem = jest.fn((payload: any) => payload)
+
+	return context
+}
+
+const assertClipboardOfCorrectShape = async (_clipboardContent: any) => {
+	return true
+	// expect(clipboardContent.length).toBe(1)
+	// expect(clipboardContent[0]['text/html']).toBeDefined()
+	// expect(clipboardContent[0]['text/plain']).toBeDefined()
+	// expect(clipboardContent.length).toBe(1)
+	// expect(await readAsText(clipboardContent[0]['text/html'])).toMatch(/^<tldraw>(.*)<\/tldraw>$/)
+}
+
+describe('When copying and pasting', () => {
+	it('does nothing when copying with nothing is selected', async () => {
+		const mockClipboard = doMockClipboard()
+
+		editor.createShapes([
+			{ id: ids.box1, type: 'geo', x: 100, y: 100, props: { w: 100, h: 100 } },
+			{ id: ids.box2, type: 'geo', x: 300, y: 300, props: { w: 100, h: 100 } },
+		])
+
+		editor.copy()
+
+		expect(mockClipboard.current).toBeUndefined()
+	})
+
+	it('copies the selected shapes and pastes when ALL shapes still in the viewport', async () => {
+		const mockClipboard = doMockClipboard()
+
+		editor.createShapes([
+			{ id: ids.box1, type: 'geo', x: 100, y: 100, props: { w: 100, h: 100 } },
+			{ id: ids.box2, type: 'geo', x: 300, y: 300, props: { w: 100, h: 100 } },
+		])
+
+		const shapesBefore = editor.getCurrentPageShapes()
+		editor.selectAll().copy()
+
+		await assertClipboardOfCorrectShape(mockClipboard.current)
+
+		const testOffsetX = 100
+		const testOffsetY = 100
+		editor.setCamera({
+			x: editor.getCamera().x - testOffsetX,
+			y: editor.getCamera().y - testOffsetY,
+			z: editor.getZoomLevel(),
+		})
+
+		editor.paste()
+		const shapesAfter = editor.getCurrentPageShapes()
+
+		// We should not have changed the original shapes
+		expect(shapesBefore[0]).toMatchObject(shapesAfter[0])
+		expect(shapesBefore[1]).toMatchObject(shapesAfter[1])
+
+		const box1a = shapesAfter[0]
+		const box2a = shapesAfter[1]
+		const box1b = shapesAfter[2]
+		const box2b = shapesAfter[3]
+
+		// The new shapes should match the old shapes, except for their id
+		expect(shapesAfter.length).toBe(shapesBefore.length * 2)
+		expect(box1b).toMatchObject({ ...box1a, id: box1b.id, index: 'a3' })
+		expect(box2b).toMatchObject({ ...box2a, id: box2b.id, index: 'a4' })
+	})
+
+	it.todo('pastes at the correct child index (top of the current focus layer list)')
+
+	it.todo(
+		'does not move shapes that are outside of the viewport when pasting into the children of an existing / non-copied shape'
+	)
+
+	it('copies the selected shapes and pastes when SOME shapes still in the viewport', async () => {
+		const mockClipboard = doMockClipboard()
+
+		editor.createShapes([
+			{ id: ids.box1, type: 'geo', x: -2000, y: -100, props: { w: 100, h: 100 } },
+			{ id: ids.box2, type: 'geo', x: 1900, y: 0, props: { w: 100, h: 100 } },
+		])
+
+		const shapesBefore = editor.getCurrentPageShapes()
+		editor.selectAll().copy()
+
+		await assertClipboardOfCorrectShape(mockClipboard.current)
+
+		const testOffsetX = 1800
+		const testOffsetY = 0
+		editor.setCamera({
+			x: editor.getCamera().x - testOffsetX,
+			y: editor.getCamera().y - testOffsetY,
+			z: editor.getZoomLevel(),
+		})
+
+		editor.paste()
+		const shapesAfter = editor.getCurrentPageShapes()
+
+		// We should not have changed the original shapes
+		expect(shapesBefore[0]).toMatchObject(shapesAfter[0])
+		expect(shapesBefore[1]).toMatchObject(shapesAfter[1])
+
+		const box1a = shapesAfter[0]
+		const box2a = shapesAfter[1]
+		const box1b = shapesAfter[2]
+		const box2b = shapesAfter[3]
+
+		// The new shapes should match the old shapes, except for their id
+		expect(shapesAfter.length).toBe(shapesBefore.length * 2)
+		expect(box1b).toMatchObject({ ...box1a, id: box1b.id, index: 'a3' })
+		expect(box2b).toMatchObject({ ...box2a, id: box2b.id, index: 'a4' })
+	})
+
+	it('copies the selected shapes and pastes when NO shapes still in the viewport', async () => {
+		const mockClipboard = doMockClipboard()
+
+		editor.createShapes([
+			// NOTE: These shapes are centered around [0,0] to make calcs in assertions easier.
+			{ id: ids.box1, type: 'geo', x: -100, y: -100, props: { w: 100, h: 100 } },
+			{ id: ids.box2, type: 'geo', x: 0, y: 0, props: { w: 100, h: 100 } },
+		])
+
+		const shapesBefore = editor.getCurrentPageShapes()
+		editor.selectAll().copy()
+
+		await assertClipboardOfCorrectShape(mockClipboard.current)
+
+		const testOffsetX = 2000
+		const testOffsetY = 3000
+
+		const { w: screenWidth, h: screenHeight } = editor.getViewportScreenBounds()
+		editor.setCamera({
+			x: editor.getCamera().x - testOffsetX,
+			y: editor.getCamera().y - testOffsetY,
+			z: editor.getZoomLevel(),
+		})
+
+		editor.paste()
+		const shapesAfter = editor.getCurrentPageShapes()
+
+		// We should not have changed the original shapes
+		expect(shapesBefore[0]).toMatchObject(shapesAfter[0])
+		expect(shapesBefore[1]).toMatchObject(shapesAfter[1])
+
+		const box1a = shapesAfter[0]
+		const box2a = shapesAfter[1]
+		const box1b = shapesAfter[2]
+		const box2b = shapesAfter[3]
+
+		// The new shapes should match the old shapes, except for the should be positioned on the new viewport center.
+		expect(shapesAfter.length).toBe(shapesBefore.length * 2)
+		expect(box1b).toMatchObject({
+			...box1a,
+			id: box1b.id,
+			index: 'a3',
+			x: testOffsetX + screenWidth / 2 + box1a.x,
+			y: testOffsetY + screenHeight / 2 + box1a.y,
+		})
+		expect(box2b).toMatchObject({
+			...box2a,
+			id: box2b.id,
+			index: 'a4',
+			x: testOffsetX + screenWidth / 2 + box2a.x,
+			y: testOffsetY + screenHeight / 2 + box2a.y,
+		})
+	})
+
+	it('creates new bindings for arrows when pasting', async () => {
+		const mockClipboard = doMockClipboard()
+
+		editor.createShapes([
+			{ id: ids.box1, type: 'geo', x: 100, y: 100, props: { w: 100, h: 100 } },
+			{ id: ids.box2, type: 'geo', x: 300, y: 300, props: { w: 100, h: 100 } },
+			{
+				id: ids.arrow1,
+				type: 'arrow',
+				x: 150,
+				y: 150,
+				props: {
+					start: {
+						type: 'binding',
+						boundShapeId: ids.box1,
+						isExact: false,
+						normalizedAnchor: { x: 0.5, y: 0.5 },
+						isPrecise: false,
+					},
+					end: {
+						type: 'binding',
+						boundShapeId: ids.box2,
+						isExact: false,
+						normalizedAnchor: { x: 0.5, y: 0.5 },
+						isPrecise: false,
+					},
+				},
+			},
+		])
+
+		const shapesBefore = editor.getCurrentPageShapes()
+		editor.selectAll().copy()
+
+		// Test the shape of the clipboard data.
+		await assertClipboardOfCorrectShape(mockClipboard.current)
+
+		editor.paste()
+		const shapesAfter = editor.getCurrentPageShapes()
+
+		// We should not have changed the original shapes
+		expect(shapesBefore[0]).toMatchObject(shapesAfter[0])
+		expect(shapesBefore[1]).toMatchObject(shapesAfter[1])
+		expect(shapesBefore[2]).toMatchObject(shapesAfter[2])
+
+		const box1a = shapesAfter[0]
+		const box2a = shapesAfter[1]
+		const arrow1a = shapesAfter[2] as TLArrowShape
+
+		const box1b = shapesAfter[3]
+		const box2b = shapesAfter[4]
+		const arrow1b = shapesAfter[5]
+
+		// The new shapes should match the old shapes, except for their id and the arrow's bindings!
+		expect(shapesAfter.length).toBe(shapesBefore.length * 2)
+		expect(box1b).toMatchObject({ ...box1a, id: box1b.id, index: 'a4' })
+		expect(box2b).toMatchObject({ ...box2a, id: box2b.id, index: 'a5' })
+		expect(arrow1b).toMatchObject({
+			...arrow1a,
+			id: arrow1b.id,
+			index: 'a6',
+			props: {
+				...arrow1a.props,
+				start: { ...arrow1a.props.start, boundShapeId: box1b.id },
+				end: { ...arrow1a.props.end, boundShapeId: box2b.id },
+			},
+		})
+	})
+
+	it('does nothing when cutting with nothing is selected', async () => {
+		const mockClipboard = doMockClipboard()
+
+		editor.createShapes([
+			{ id: ids.box1, type: 'geo', x: 100, y: 100, props: { w: 100, h: 100 } },
+			{ id: ids.box2, type: 'geo', x: 300, y: 300, props: { w: 100, h: 100 } },
+		])
+
+		editor.cut()
+
+		expect(mockClipboard.current).toBeUndefined()
+	})
+
+	it('cuts the selected shapes and pastes when ALL shapes still in the viewport', async () => {
+		const mockClipboard = doMockClipboard()
+
+		editor.createShapes([
+			{ id: ids.box1, type: 'geo', x: 100, y: 100, props: { w: 100, h: 100 } },
+			{ id: ids.box2, type: 'geo', x: 300, y: 300, props: { w: 100, h: 100 } },
+		])
+
+		const shapesBefore = editor.getCurrentPageShapes()
+		editor.selectAll().cut()
+
+		await assertClipboardOfCorrectShape(mockClipboard.current)
+
+		const testOffsetX = 100
+		const testOffsetY = 100
+		editor.setCamera({
+			x: editor.getCamera().x - testOffsetX,
+			y: editor.getCamera().y - testOffsetY,
+			z: editor.getZoomLevel(),
+		})
+
+		editor.paste()
+		const shapesAfter = editor.getCurrentPageShapes()
+
+		// The new shapes should match the old shapes, except for their id
+		expect(shapesAfter.length).toBe(shapesBefore.length)
+		expect(shapesAfter[0]).toMatchObject({ ...shapesBefore[0], id: shapesAfter[0].id })
+		expect(shapesAfter[1]).toMatchObject({ ...shapesBefore[1], id: shapesAfter[1].id })
+	})
+
+	it('cuts the selected shapes and pastes when SOME shapes still in the viewport', async () => {
+		const mockClipboard = doMockClipboard()
+
+		editor.createShapes([
+			{ id: ids.box1, type: 'geo', x: -2000, y: -100, props: { w: 100, h: 100 } },
+			{ id: ids.box2, type: 'geo', x: 1900, y: 0, props: { w: 100, h: 100 } },
+		])
+
+		const shapesBefore = editor.getCurrentPageShapes()
+		editor.selectAll().cut()
+
+		await assertClipboardOfCorrectShape(mockClipboard.current)
+
+		const testOffsetX = 1800
+		const testOffsetY = 0
+		editor.setCamera({
+			x: editor.getCamera().x - testOffsetX,
+			y: editor.getCamera().y - testOffsetY,
+			z: editor.getZoomLevel(),
+		})
+
+		editor.paste()
+		const shapesAfter = editor.getCurrentPageShapes()
+
+		// The new shapes should match the old shapes, except for their id
+		expect(shapesAfter.length).toBe(shapesBefore.length)
+		expect(shapesAfter[0]).toMatchObject({ ...shapesBefore[0], id: shapesAfter[0].id })
+		expect(shapesAfter[1]).toMatchObject({ ...shapesBefore[1], id: shapesAfter[1].id })
+	})
+
+	it('cuts the selected shapes and pastes when NO shapes still in the viewport', async () => {
+		const mockClipboard = doMockClipboard()
+
+		editor.createShapes([
+			// NOTE: These shapes are centered around [0,0] to make calcs in assertions easier.
+			{ id: ids.box1, type: 'geo', x: -100, y: -100, props: { w: 100, h: 100 } },
+			{ id: ids.box2, type: 'geo', x: 0, y: 0, props: { w: 100, h: 100 } },
+		])
+
+		const shapesBefore = editor.getCurrentPageShapes()
+		editor.selectAll().cut()
+
+		await assertClipboardOfCorrectShape(mockClipboard.current)
+
+		const testOffsetX = 2000
+		const testOffsetY = 3000
+
+		const { w: screenWidth, h: screenHeight } = editor.getViewportScreenBounds()
+		editor.setCamera({
+			x: editor.getCamera().x - testOffsetX,
+			y: editor.getCamera().y - testOffsetY,
+			z: editor.getZoomLevel(),
+		})
+
+		editor.paste()
+		const shapesAfter = editor.getCurrentPageShapes()
+
+		// The new shapes should match the old shapes, except for the should be positioned on the new viewport center.
+		expect(shapesAfter.length).toBe(shapesBefore.length)
+		expect(shapesAfter[0]).toMatchObject({
+			...shapesBefore[0],
+			id: shapesAfter[0].id,
+			x: testOffsetX + screenWidth / 2 + shapesBefore[0].x,
+			y: testOffsetY + screenHeight / 2 + shapesBefore[0].y,
+		})
+		expect(shapesAfter[1]).toMatchObject({
+			...shapesBefore[1],
+			id: shapesAfter[1].id,
+			x: testOffsetX + screenWidth / 2 + shapesBefore[1].x,
+			y: testOffsetY + screenHeight / 2 + shapesBefore[1].y,
+		})
+	})
+
+	it('creates new bindings for arrows when pasting', async () => {
+		const mockClipboard = doMockClipboard()
+
+		editor.createShapes([
+			{ id: ids.box1, type: 'geo', x: 100, y: 100, props: { w: 100, h: 100 } },
+			{ id: ids.box2, type: 'geo', x: 300, y: 300, props: { w: 100, h: 100 } },
+			{
+				id: ids.arrow1,
+				type: 'arrow',
+				x: 150,
+				y: 150,
+				props: {
+					start: {
+						type: 'binding',
+						boundShapeId: ids.box1,
+						isExact: false,
+						normalizedAnchor: { x: 0.5, y: 0.5 },
+						isPrecise: false,
+					},
+					end: {
+						type: 'binding',
+						boundShapeId: ids.box2,
+						isExact: false,
+						normalizedAnchor: { x: 0.5, y: 0.5 },
+						isPrecise: false,
+					},
+				},
+			},
+		])
+
+		const shapesBefore = editor.getCurrentPageShapes()
+
+		editor.selectAll().cut()
+
+		// Test the shape of the clipboard data.
+		await assertClipboardOfCorrectShape(mockClipboard.current)
+
+		editor.paste()
+		const shapesAfter = editor.getCurrentPageShapes()
+
+		// The new shapes should match the old shapes, except for their id and the arrow's bindings!
+		expect(shapesAfter.length).toBe(shapesBefore.length)
+		expect(shapesAfter[0]).toMatchObject({ ...shapesBefore[0], id: shapesAfter[0].id })
+		expect(shapesAfter[1]).toMatchObject({ ...shapesBefore[1], id: shapesAfter[1].id })
+		expect(shapesAfter[2]).toMatchObject({
+			...shapesBefore[2],
+			id: shapesAfter[2].id,
+			props: {
+				...shapesBefore[2].props,
+				start: {
+					...(shapesBefore[2] as TLArrowShape).props.start,
+					boundShapeId: shapesAfter[0].id,
+				},
+				end: { ...(shapesBefore[2] as TLArrowShape).props.end, boundShapeId: shapesAfter[1].id },
+			},
+		})
+	})
+
+	it('pastes in the right position after copying from within a group.', async () => {
+		const mockClipboard = doMockClipboard()
+
+		editor.createShapes([
+			{ id: ids.box1, type: 'geo', x: 0, y: 0, props: { w: 100, h: 100 } },
+			{ id: ids.box2, type: 'geo', x: 300, y: 300, props: { w: 100, h: 100 } },
+		])
+		editor
+			// Create group
+			.selectAll()
+			.groupShapes(editor.getSelectedShapeIds())
+			// Move the group
+			.updateShapes([
+				{
+					id: editor.getCurrentPageShapes()[2].id,
+					type: 'group',
+					x: 400,
+					y: 400,
+				},
+			])
+			// Copy a shape from within the group
+			.selectNone()
+			.setSelectedShapes([ids.box1])
+			.copy()
+
+		await assertClipboardOfCorrectShape(mockClipboard.current)
+
+		// Paste the shape
+		expect(editor.getCurrentPageShapes().length).toEqual(3)
+		editor.paste()
+		expect(editor.getCurrentPageShapes().length).toEqual(4)
+
+		// Check if the position is correct
+		const pastedShape = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
+		const pastedPoint = { x: pastedShape.x, y: pastedShape.y }
+
+		expect(pastedPoint).toMatchObject({ x: 150, y: 150 }) // center of group
+	})
+})

package/src/test/commands/complete.test.ts

@@ -0,0 +1,3 @@
+export {}
+
+it.todo('Editor.complete')

package/src/test/commands/createPage.test.ts

@@ -0,0 +1,65 @@
+import { MAX_PAGES, PageRecordType } from '@bigbluebutton/editor'
+import { TestEditor } from '../TestEditor'
+
+let editor: TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+
+it('Creates a page', () => {
+	const oldPageId = editor.getCurrentPageId()
+	const n = editor.getPages().length
+	editor.mark('creating new page')
+	editor.createPage({ name: 'Page 1' })
+	expect(editor.getPages().length).toBe(n + 1)
+	const newPageId = editor.getPages()[n].id
+	// does not move to the new page right away
+	expect(editor.getCurrentPageId()).toBe(oldPageId)
+
+	// needs to be done manually
+	editor.setCurrentPage(newPageId)
+	expect(editor.getCurrentPageId()).toBe(newPageId)
+
+	editor.undo()
+	expect(editor.getPages().length).toBe(n)
+	expect(editor.getCurrentPageId()).toBe(oldPageId)
+
+	editor.redo()
+	expect(editor.getPages().length).toBe(n + 1)
+	expect(editor.getCurrentPageId()).toBe(newPageId)
+})
+
+it("Doesn't create a page if max pages is reached", () => {
+	for (let i = 0; i < MAX_PAGES + 1; i++) {
+		editor.createPage({ name: `Test Page ${i}` })
+	}
+	expect(editor.getPages().length).toBe(MAX_PAGES)
+})
+
+it('[regression] does not die if every page has the same index', () => {
+	expect(editor.getPages().length).toBe(1)
+	const page = editor.getPages()[0]
+	editor.store.put([
+		{
+			...page,
+			id: PageRecordType.createId('2'),
+			name: 'a',
+		},
+		{
+			...page,
+			id: PageRecordType.createId('3'),
+			name: 'b',
+		},
+		{
+			...page,
+			id: PageRecordType.createId('4'),
+			name: 'c',
+		},
+	])
+
+	expect(editor.getPages().every((p) => p.index === page.index)).toBe(true)
+
+	editor.createPage({ name: 'My Special Test Page' })
+	expect(editor.getPages().some((p) => p.name === 'My Special Test Page')).toBe(true)
+})

package/src/test/commands/createShapes.test.ts

@@ -0,0 +1,141 @@
+import { DefaultColorStyle, TLArrowShape, TLGeoShape, createShapeId } from '@bigbluebutton/editor'
+import { TestEditor } from '../TestEditor'
+
+let editor: TestEditor
+
+const ids = {
+	box1: createShapeId('box1'),
+	box2: createShapeId('box2'),
+	box3: createShapeId('box3'),
+	box4: createShapeId('box4'),
+	box5: createShapeId('box5'),
+	missing: createShapeId('missing'),
+}
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+
+it('Uses typescript generics', () => {
+	expect(() => {
+		// No error here because no generic, the editor doesn't know what this guy is
+		editor.createShapes([
+			{
+				id: ids.box1,
+				type: 'geo',
+				props: { w: 'OH NO' },
+			},
+		])
+		// Yep error here because we are giving the wrong props to the shape
+		editor.createShapes<TLGeoShape>([
+			{
+				id: ids.box1,
+				type: 'geo',
+				//@ts-expect-error
+				props: { w: 'OH NO' },
+			},
+		])
+
+		// Yep error here because we are giving the wrong generic
+		editor.createShapes<TLArrowShape>([
+			{
+				id: ids.box1,
+				//@ts-expect-error
+				type: 'geo',
+				//@ts-expect-error
+				props: { w: 'OH NO' },
+			},
+		])
+
+		// All good, correct match of generic and shape type
+		editor.createShapes<TLGeoShape>([
+			{
+				id: ids.box1,
+				type: 'geo',
+				props: { w: 100 },
+			},
+		])
+
+		editor.createShapes<TLGeoShape>([
+			{
+				id: ids.box1,
+				type: 'geo',
+			},
+			{
+				id: ids.box1,
+				// @ts-expect-error - wrong type
+				type: 'arrow',
+			},
+		])
+
+		// Unions are supported just fine
+		editor.createShapes<TLGeoShape | TLArrowShape>([
+			{
+				id: ids.box1,
+				type: 'geo',
+			},
+			{
+				id: ids.box1,
+				type: 'arrow',
+			},
+		])
+	}).toThrowError()
+})
+
+it('Parents shapes to the current page if the parent is not found', () => {
+	editor.createShapes([{ id: ids.box1, parentId: ids.missing, type: 'geo' }])
+	expect(editor.getShape(ids.box1)!.parentId).toEqual(editor.getCurrentPageId())
+})
+
+it('Creates shapes with the current style', () => {
+	expect(editor.getInstanceState().stylesForNextShape[DefaultColorStyle.id]).toBe(undefined)
+	editor.createShapes([{ id: ids.box1, type: 'geo' }])
+	expect(editor.getShape<TLGeoShape>(ids.box1)!.props.color).toEqual('black')
+
+	editor.setStyleForSelectedShapes(DefaultColorStyle, 'red')
+	editor.setStyleForNextShapes(DefaultColorStyle, 'red')
+	expect(editor.getInstanceState().stylesForNextShape[DefaultColorStyle.id]).toBe('red')
+	editor.createShapes([{ id: ids.box2, type: 'geo' }])
+	expect(editor.getShape<TLGeoShape>(ids.box2)!.props.color).toEqual('red')
+})
+
+it('Creates shapes with the current opacity', () => {
+	editor.setOpacityForNextShapes(0.5)
+	editor.createShapes([{ id: ids.box3, type: 'geo' }])
+	expect(editor.getShape<TLGeoShape>(ids.box3)!.opacity).toEqual(0.5)
+})
+
+it('Creates shapes at the correct index', () => {
+	editor.createShapes([
+		{ id: ids.box3, type: 'geo' },
+		{ id: ids.box4, type: 'geo' },
+	])
+	expect(editor.getShape(ids.box3)!.index).toEqual('a1')
+	expect(editor.getShape(ids.box4)!.index).toEqual('a2')
+
+	editor.createShapes([{ id: ids.box5, type: 'geo' }])
+	expect(editor.getShape(ids.box5)!.index).toEqual('a3')
+})
+
+it('Throws out all shapes if any shape is invalid', () => {
+	const n = editor.getCurrentPageShapeIds().size
+
+	expect(() => {
+		editor.createShapes([{ id: ids.box1, type: 'geo' }])
+	}).not.toThrow()
+
+	expect(editor.getCurrentPageShapeIds().size).toBe(n + 1)
+
+	console.error = jest.fn()
+
+	// But these will need to be thrown out
+	expect(() => {
+		editor.createShapes([
+			{ id: ids.box3, type: 'geo', x: 3 },
+			// @ts-expect-error
+			{ id: ids.box4, type: 'geo', x: 'three' }, // invalid x
+		])
+	}).toThrow()
+
+	expect(editor.getCurrentPageShapeIds().size).toBe(n + 1)
+})