@bigbluebutton/tldraw 2.0.0-alpha.19

package/src/test/commands/deletePage.test.ts

@@ -0,0 +1,79 @@
+import { PageRecordType } from '@bigbluebutton/editor'
+import { TestEditor } from '../TestEditor'
+
+let editor: TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+
+describe('deletePage', () => {
+	it('deletes the page', () => {
+		const page2Id = PageRecordType.createId('page2')
+		editor.createPage({ name: 'New Page 2', id: page2Id })
+
+		const pages = editor.getPages()
+		expect(pages.length).toBe(2)
+		editor.deletePage(pages[0].id)
+		expect(editor.getPages().length).toBe(1)
+		expect(editor.getPages()[0]).toEqual(pages[1])
+	})
+	it('is undoable and redoable', () => {
+		const page2Id = PageRecordType.createId('page2')
+		editor.mark('before creating page')
+		editor.createPage({ name: 'New Page 2', id: page2Id })
+
+		const pages = editor.getPages()
+		expect(pages.length).toBe(2)
+
+		editor.mark('before deleting page')
+		editor.deletePage(pages[0].id)
+		expect(editor.getPages().length).toBe(1)
+
+		editor.undo()
+		expect(editor.getPages().length).toBe(2)
+		expect(editor.getPages()).toEqual(pages)
+		editor.redo()
+		expect(editor.getPages().length).toBe(1)
+		expect(editor.getPages()[0]).toEqual(pages[1])
+	})
+	it('does not allow deleting all pages', () => {
+		const page2Id = PageRecordType.createId('page2')
+		editor.mark('before creating page')
+		editor.createPage({ name: 'New Page 2', id: page2Id })
+
+		const pages = editor.getPages()
+		editor.deletePage(pages[1].id)
+		editor.deletePage(pages[0].id)
+
+		expect(editor.getPages().length).toBe(1)
+
+		editor.deletePage(editor.getPages()[0].id)
+		expect(editor.getPages().length).toBe(1)
+	})
+	it('switches the page if you are deleting the current page', () => {
+		const page2Id = PageRecordType.createId('page2')
+		editor.mark('before creating page')
+		editor.createPage({ name: 'New Page 2', id: page2Id })
+
+		const currentPageId = editor.getCurrentPageId()
+		editor.deletePage(currentPageId)
+		expect(editor.getPages().length).toBe(1)
+		expect(editor.getCurrentPageId()).not.toBe(currentPageId)
+		expect(editor.getCurrentPageId()).toBe(editor.getPages()[0].id)
+	})
+	it('switches the page if another user or tab deletes the current page', () => {
+		const currentPageId = editor.getCurrentPageId()
+		const page2Id = PageRecordType.createId('page2')
+		editor.mark('before creating')
+		editor.createPage({ name: 'New Page 2', id: page2Id })
+
+		editor.store.mergeRemoteChanges(() => {
+			editor.store.remove([currentPageId])
+		})
+
+		expect(editor.getPages().length).toBe(1)
+		expect(editor.getCurrentPageId()).not.toBe(currentPageId)
+		expect(editor.getCurrentPageId()).toBe(editor.getPages()[0].id)
+	})
+})

package/src/test/commands/deleteShapes.test.ts

@@ -0,0 +1,113 @@
+import { 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'),
+	arrow1: createShapeId('arrow1'),
+}
+
+jest.useFakeTimers()
+
+beforeEach(() => {
+	editor = new TestEditor()
+	editor
+		.selectAll()
+		.deleteShapes(editor.getSelectedShapeIds())
+		.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.box3, type: 'geo', x: 100, y: 500, props: { w: 100, h: 100 } },
+			{ id: ids.box4, type: 'geo', x: 100, y: 800, props: { w: 100, h: 100 } },
+			{
+				id: ids.arrow1,
+				type: 'arrow',
+				x: 150,
+				y: 150,
+				props: {
+					start: {
+						type: 'binding',
+						isExact: false,
+						boundShapeId: ids.box1,
+						normalizedAnchor: { x: 0.5, y: 0.5 },
+						isPrecise: false,
+					},
+					end: {
+						type: 'binding',
+						isExact: false,
+						boundShapeId: ids.box2,
+						normalizedAnchor: { x: 0.5, y: 0.5 },
+						isPrecise: false,
+					},
+				},
+			},
+		])
+})
+
+describe('Editor.deleteShapes', () => {
+	it('Deletes a shape', () => {
+		editor.select(ids.box3, ids.box4)
+		editor.mark('before deleting')
+		editor.deleteShapes(editor.getSelectedShapeIds()) // delete the selected shapes
+		expect(editor.getShape(ids.box3)).toBeUndefined()
+		expect(editor.getShape(ids.box4)).toBeUndefined()
+		expect(editor.getSelectedShapeIds()).toMatchObject([])
+		editor.undo()
+		expect(editor.getShape(ids.box3)).not.toBeUndefined()
+		expect(editor.getShape(ids.box4)).not.toBeUndefined()
+		expect(editor.getSelectedShapeIds()).toMatchObject([ids.box3, ids.box4])
+		editor.redo()
+		expect(editor.getShape(ids.box3)).toBeUndefined()
+		expect(editor.getShape(ids.box4)).toBeUndefined()
+		expect(editor.getSelectedShapeIds()).toMatchObject([])
+	})
+
+	it('Does nothing on an empty ids array', () => {
+		editor.selectNone()
+		const before = editor.store.serialize()
+		editor.deleteShapes(editor.getSelectedShapeIds()) // should be a noop, nothing to delete
+		expect(editor.store.serialize()).toStrictEqual(before)
+	})
+
+	it('Deletes descendants', () => {
+		editor.reparentShapes([ids.box4], ids.box3)
+		editor.select(ids.box3)
+		editor.mark('before deleting')
+		editor.deleteShapes(editor.getSelectedShapeIds()) // should be a noop, nothing to delete
+		expect(editor.getShape(ids.box3)).toBeUndefined()
+		expect(editor.getShape(ids.box4)).toBeUndefined()
+		editor.undo()
+		expect(editor.getShape(ids.box3)).not.toBeUndefined()
+		expect(editor.getShape(ids.box4)).not.toBeUndefined()
+		editor.redo()
+		expect(editor.getShape(ids.box3)).toBeUndefined()
+		expect(editor.getShape(ids.box4)).toBeUndefined()
+	})
+})
+
+describe('When deleting arrows', () => {
+	it('Restores any bindings on undo', () => {
+		editor.select(ids.arrow1)
+		editor.mark('before deleting')
+		// @ts-expect-error
+		expect(editor._getArrowBindingsIndex().get()[ids.box1]).not.toBeUndefined()
+		// @ts-expect-error
+		expect(editor._getArrowBindingsIndex().get()[ids.box2]).not.toBeUndefined()
+
+		editor.deleteShapes(editor.getSelectedShapeIds()) // delete the selected shapes
+		// @ts-expect-error
+		expect(editor._getArrowBindingsIndex().get()[ids.box1]).toBeUndefined()
+		// @ts-expect-error
+		expect(editor._getArrowBindingsIndex().get()[ids.box2]).toBeUndefined()
+
+		editor.undo()
+		// @ts-expect-error
+		expect(editor._getArrowBindingsIndex().get()[ids.box1]).not.toBeUndefined()
+		// @ts-expect-error
+		expect(editor._getArrowBindingsIndex().get()[ids.box2]).not.toBeUndefined()
+	})
+})

package/src/test/commands/distributeShapes.test.ts

@@ -0,0 +1,232 @@
+import { PI, createShapeId } from '@bigbluebutton/editor'
+import { TestEditor } from '../TestEditor'
+
+jest.useFakeTimers()
+
+let editor: TestEditor
+
+const ids = {
+	boxA: createShapeId('boxA'),
+	boxB: createShapeId('boxB'),
+	boxC: createShapeId('boxC'),
+	boxD: createShapeId('boxD'),
+}
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+
+describe('distributeShapes command', () => {
+	beforeEach(() => {
+		editor.selectAll()
+		editor.deleteShapes(editor.getSelectedShapeIds())
+		editor.createShapes([
+			{
+				id: ids.boxA,
+				type: 'geo',
+				x: 0,
+				y: 0,
+			},
+			{
+				id: ids.boxB,
+				type: 'geo',
+				x: 100,
+				y: 100,
+			},
+			{
+				id: ids.boxC,
+				type: 'geo',
+				x: 400,
+				y: 400,
+			},
+		])
+	})
+
+	describe('when less than three shapes are selected', () => {
+		it('does nothing', () => {
+			editor.setSelectedShapes([ids.boxA, ids.boxB])
+			const fn = jest.fn()
+			editor.on('change-history', fn)
+			editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
+			jest.advanceTimersByTime(1000)
+			expect(fn).not.toHaveBeenCalled()
+		})
+	})
+
+	describe('When distributing...', () => {
+		it('distributeShapes horizontally', () => {
+			editor.selectAll()
+			editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
+			jest.advanceTimersByTime(1000)
+			editor.expectShapeToMatch(
+				{ id: ids.boxA, x: 0 },
+				{ id: ids.boxB, x: 200 },
+				{ id: ids.boxC, x: 400 }
+			)
+		})
+
+		it('distributeShapes horizontally when shapes are clustered', () => {
+			editor.updateShapes([{ id: ids.boxC, type: 'geo', x: 25 }])
+			editor.selectAll()
+			editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
+			jest.advanceTimersByTime(1000)
+			editor.expectShapeToMatch(
+				{ id: ids.boxA, x: 0 },
+				{ id: ids.boxB, x: 100 },
+				{ id: ids.boxC, x: 50 }
+			)
+		})
+
+		it('distributeShapes vertically', () => {
+			editor.selectAll()
+			editor.distributeShapes(editor.getSelectedShapeIds(), 'vertical')
+			jest.advanceTimersByTime(1000)
+			editor.expectShapeToMatch(
+				{ id: ids.boxA, y: 0 },
+				{ id: ids.boxB, y: 200 },
+				{ id: ids.boxC, y: 400 }
+			)
+		})
+
+		it('distributeShapes vertically when shapes are clustered', () => {
+			editor.updateShapes([{ id: ids.boxC, type: 'geo', y: 25 }])
+			editor.selectAll()
+			editor.distributeShapes(editor.getSelectedShapeIds(), 'vertical')
+			jest.advanceTimersByTime(1000)
+			editor.expectShapeToMatch(
+				{ id: ids.boxA, y: 0 },
+				{ id: ids.boxB, y: 100 },
+				{ id: ids.boxC, y: 50 }
+			)
+		})
+	})
+
+	it('distributeShapes shapes that are the child of another shape.', () => {
+		editor.selectAll()
+		editor.deleteShapes(editor.getSelectedShapeIds())
+		editor.createShapes([
+			{
+				id: ids.boxA,
+				type: 'geo',
+				x: 0,
+				y: 0,
+			},
+			{
+				id: ids.boxB,
+				type: 'geo',
+				parentId: ids.boxA,
+				x: 100,
+				y: 100,
+			},
+			{
+				id: ids.boxC,
+				type: 'geo',
+				x: 200,
+				y: 100,
+			},
+			{
+				id: ids.boxD,
+				type: 'geo',
+				x: 400,
+				y: 100,
+			},
+		])
+		editor.setSelectedShapes([ids.boxB, ids.boxC, ids.boxD])
+
+		editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
+		jest.advanceTimersByTime(1000)
+
+		editor.expectShapeToMatch(
+			{ id: ids.boxB, x: 100 },
+			{ id: ids.boxC, x: 250 },
+			{ id: ids.boxD, x: 400 }
+		)
+	})
+
+	it('distributeShapes shapes that are the child of another shape when clustered.', () => {
+		editor.selectAll()
+		editor.deleteShapes(editor.getSelectedShapeIds())
+		editor.createShapes([
+			{
+				id: ids.boxA,
+				type: 'geo',
+				x: 0,
+				y: 0,
+			},
+			{
+				id: ids.boxB,
+				type: 'geo',
+				parentId: ids.boxA,
+				x: 100,
+				y: 100,
+			},
+			{
+				id: ids.boxC,
+				type: 'geo',
+				x: 200,
+				y: 100,
+			},
+			{
+				id: ids.boxD,
+				type: 'geo',
+				x: 175,
+				y: 200,
+			},
+		])
+		editor.setSelectedShapes([ids.boxB, ids.boxC, ids.boxD])
+
+		editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
+		jest.advanceTimersByTime(1000)
+
+		editor.expectShapeToMatch(
+			{ id: ids.boxB, x: 100 },
+			{ id: ids.boxC, x: 200 },
+			{ id: ids.boxD, x: 150 }
+		)
+	})
+
+	it('distributeShapes shapes that are the child of another shape when a parent is rotated.', () => {
+		editor = new TestEditor()
+		editor.selectAll()
+		editor.deleteShapes(editor.getSelectedShapeIds())
+		editor.createShapes([
+			{
+				id: ids.boxA,
+				type: 'geo',
+				x: 0,
+				y: 0,
+				rotation: PI,
+			},
+			{
+				id: ids.boxB,
+				type: 'geo',
+				parentId: ids.boxA,
+				x: 100,
+				y: 100,
+			},
+			{
+				id: ids.boxC,
+				type: 'geo',
+				x: 200,
+				y: 0,
+			},
+			{
+				id: ids.boxD,
+				type: 'geo',
+				x: 300,
+				y: 0,
+			},
+		])
+
+		editor.setSelectedShapes([ids.boxB, ids.boxC, ids.boxD])
+
+		editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
+		jest.advanceTimersByTime(1000)
+
+		editor.expectShapeToMatch(
+			{ id: ids.boxB, x: 100 },
+			{ id: ids.boxC, x: 50 },
+			{ id: ids.boxD, x: 300 }
+		)
+	})
+})

package/src/test/commands/duplicatePage.test.ts

@@ -0,0 +1,55 @@
+import { MAX_PAGES, createShapeId } from '@bigbluebutton/editor'
+import { TestEditor } from '../TestEditor'
+
+let editor: TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+	editor.createShapes([
+		{
+			id: createShapeId(),
+			type: 'geo',
+		},
+	])
+})
+
+it('Duplicates a page', () => {
+	const oldPageId = editor.getCurrentPageId()
+	const camera = { ...editor.getCamera() }
+	const n = editor.getPages().length
+	expect(editor.getCurrentPageShapes().length).toBe(1)
+
+	const existingIds = new Set(editor.getPages().map((s) => s.id))
+
+	editor.duplicatePage(editor.getCurrentPageId())
+
+	// Creates the new page
+	expect(editor.getPages().length).toBe(n + 1)
+
+	// Navigates to the new page
+	const newPageId = editor.getPages().find((p) => !existingIds.has(p.id))!.id
+	expect(editor.getCurrentPageId()).toBe(newPageId)
+
+	// Duplicates the shapes
+	expect(editor.getCurrentPageShapes().length).toBe(1)
+
+	// Also duplicates the camera
+	expect(editor.getCamera().x).toBe(camera.x)
+	expect(editor.getCamera().y).toBe(camera.y)
+	expect(editor.getZoomLevel()).toBe(camera.z)
+
+	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 duplicate the page if max pages is reached", () => {
+	for (let i = 0; i < MAX_PAGES; i++) {
+		editor.duplicatePage(editor.getCurrentPageId())
+	}
+	expect(editor.getPages().length).toBe(MAX_PAGES)
+})

package/src/test/commands/getContent.test.ts

@@ -0,0 +1,9 @@
+// import { TestEditor } from '../TestEditor'
+
+// let editor: TestEditor
+
+// beforeEach(() => {
+// 	editor =new TestEditor()
+// })
+
+it.todo('Gets content')

package/src/test/commands/getInitialMetaForShape.test.ts

@@ -0,0 +1,21 @@
+import { createShapeId } from '@bigbluebutton/editor'
+import { TestEditor } from '../TestEditor'
+
+let editor: TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+
+it('Sets shape meta by default to an empty object', () => {
+	const id = createShapeId()
+	editor.createShapes([{ id, type: 'geo' }]).select(id)
+	expect(editor.getOnlySelectedShape()!.meta).toStrictEqual({})
+})
+
+it('Sets shape meta', () => {
+	editor.getInitialMetaForShape = (shape) => ({ firstThreeCharactersOfId: shape.id.slice(0, 3) })
+	const id = createShapeId()
+	editor.createShapes([{ id, type: 'geo' }]).select(id)
+	expect(editor.getOnlySelectedShape()!.meta).toStrictEqual({ firstThreeCharactersOfId: 'sha' })
+})

package/src/test/commands/getSvg.test.ts

@@ -0,0 +1,110 @@
+import { DefaultDashStyle, SVG_PADDING, createShapeId } from '@bigbluebutton/editor'
+import { TestEditor } from '../TestEditor'
+
+let editor: TestEditor
+
+const ids = {
+	boxA: createShapeId('boxA'),
+	boxB: createShapeId('boxB'),
+	boxC: createShapeId('boxC'),
+}
+
+beforeEach(() => {
+	editor = new TestEditor()
+	editor.setStyleForNextShapes(DefaultDashStyle, 'solid')
+	editor.setStyleForSelectedShapes(DefaultDashStyle, 'solid')
+	editor.createShapes([
+		{
+			id: ids.boxA,
+			type: 'geo',
+			x: 0,
+			y: 0,
+			props: {
+				w: 100,
+				h: 100,
+				text: 'Hello world',
+			},
+		},
+		{
+			id: ids.boxB,
+			type: 'geo',
+			x: 100,
+			y: 100,
+			props: {
+				w: 50,
+				h: 50,
+			},
+		},
+		{
+			id: ids.boxC,
+			type: 'geo',
+			x: 400,
+			y: 400,
+			props: {
+				w: 100,
+				h: 100,
+				fill: 'pattern',
+			},
+		},
+	])
+	editor.selectAll()
+})
+
+it('gets an SVG', async () => {
+	const svg = await editor.getSvg(editor.getSelectedShapeIds())
+
+	expect(svg).toBeTruthy()
+})
+
+it('Does not get an SVG when no ids are provided', async () => {
+	const svg = await editor.getSvg([])
+
+	expect(svg).toBeFalsy()
+})
+
+it('Gets the bounding box at the correct size', async () => {
+	const svg = await editor.getSvg(editor.getSelectedShapeIds())
+	const bbox = editor.getSelectionRotatedPageBounds()!
+	const expanded = bbox.expandBy(SVG_PADDING) // adds 32px padding
+
+	expect(svg!.getAttribute('width')).toMatch(expanded.width + '')
+	expect(svg!.getAttribute('height')).toMatch(expanded.height + '')
+})
+
+it('Gets the bounding box at the correct size', async () => {
+	const svg = (await editor.getSvg(editor.getSelectedShapeIds()))!
+	const bbox = editor.getSelectionRotatedPageBounds()!
+	const expanded = bbox.expandBy(SVG_PADDING) // adds 32px padding
+
+	expect(svg!.getAttribute('width')).toMatch(expanded.width + '')
+	expect(svg!.getAttribute('height')).toMatch(expanded.height + '')
+})
+
+it('Matches a snapshot', async () => {
+	const svg = (await editor.getSvg(editor.getSelectedShapeIds()))!
+
+	const elm = document.createElement('wrapper')
+	elm.appendChild(svg)
+
+	expect(elm).toMatchSnapshot('Basic SVG')
+})
+
+it('Accepts a scale option', async () => {
+	const svg1 = (await editor.getSvg(editor.getSelectedShapeIds(), { scale: 1 }))!
+
+	expect(svg1.getAttribute('width')).toBe('564')
+
+	const svg2 = (await editor.getSvg(editor.getSelectedShapeIds(), { scale: 2 }))!
+
+	expect(svg2.getAttribute('width')).toBe('1128')
+})
+
+it('Accepts a background option', async () => {
+	const svg1 = (await editor.getSvg(editor.getSelectedShapeIds(), { background: true }))!
+
+	expect(svg1.style.backgroundColor).not.toBe('transparent')
+
+	const svg2 = (await editor.getSvg(editor.getSelectedShapeIds(), { background: false }))!
+
+	expect(svg2.style.backgroundColor).toBe('transparent')
+})

package/src/test/commands/groupShapes.test.ts

@@ -0,0 +1,42 @@
+// import { TestEditor } from '../TestEditor'
+
+// let editor: TestEditor
+
+// beforeEach(() => {
+// 	editor =new TestEditor()
+// })
+
+it.todo('Groups all selected shapes when multiple shapes are selected.')
+
+it.todo('Does nothing if only one shape is selected')
+
+describe('When creating a group...', () => {
+	// - Root
+	//   - A
+	//   - B <
+	//     - B1
+	//   - C
+	//     - C1
+	//     - C2 <
+	//     - C3
+
+	// - Root
+	//   - A
+	//   - Group
+	//     - B
+	//       - B1
+	//     - C2
+	//   - C
+	//     - C1
+	//     - C3
+
+	it.todo('Makes the group at the same index as the most shallow member.')
+
+	it.todo('Moves the any grouped shapes children.')
+
+	it.todo('Does not group ascendant and descentants.')
+
+	it.todo('Assigns indices in absolute z order')
+})
+
+it.todo('Does, undoes, and redoes.')

package/src/test/commands/guide.md

@@ -0,0 +1,12 @@
+# Guide
+
+Every method on `App` should have its own unit tests.
+
+A few situations that cause tests to fail:
+
+- The shape is rotated
+- The shape is a child of another shape
+- The shape is the child of a rotated shape
+- The shape is not in the viewport
+- The shape has an arrow bound to it
+- Undo / redo

package/src/test/commands/interrupt.test.ts

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