@bigbluebutton/tldraw 2.0.0-alpha.19

package/src/test/commands/reparentShapesById.test.ts

@@ -0,0 +1,162 @@
+import { createShapeId } from '@bigbluebutton/editor'
+import { TestEditor, createDefaultShapes, defaultShapesIds } from '../TestEditor'
+
+let editor: TestEditor
+
+const ids = {
+	...defaultShapesIds,
+	box3: createShapeId('box3'),
+	box4: createShapeId('box4'),
+	box5: createShapeId('box5'),
+}
+
+beforeEach(() => {
+	editor = new TestEditor()
+	editor.createShapes(createDefaultShapes())
+	editor.createShapes([
+		{
+			id: ids.box3,
+			type: 'geo',
+		},
+		{
+			id: ids.box4,
+			type: 'geo',
+		},
+		{
+			id: ids.box5,
+			type: 'geo',
+		},
+	])
+})
+
+it('reparents a shape', () => {
+	expect(editor.getShape(ids.box2)!.parentId).toBe(editor.getCurrentPageId())
+	editor.reparentShapes([ids.box2], ids.box1)
+	expect(editor.getShape(ids.box2)!.parentId).toBe(ids.box1)
+	editor.reparentShapes([ids.box2], editor.getCurrentPageId())
+	expect(editor.getShape(ids.box2)!.parentId).toBe(editor.getCurrentPageId())
+})
+
+it('preserves shape page transfors', () => {
+	const before = editor.getShape(ids.box1)!
+	const A = editor.getShapePageTransform(ids.box1)
+	const A1 = editor.getShapeLocalTransform(before)
+	editor.reparentShapes([ids.box2], ids.box1)
+
+	const after = editor.getShape(ids.box1)!
+	const B = editor.getShapePageTransform(ids.box1)!
+	const B1 = editor.getShapeLocalTransform(after)
+	expect(A1).toMatchObject(B1)
+	expect(A).toMatchObject(B)
+})
+
+it('adds children to the top of the parents children by default', () => {
+	expect(editor.getShape(ids.box2)!.index).toBe('a2')
+	expect(editor.getShape(ids.box3)!.index).toBe('a3')
+	expect(editor.getShape(ids.box4)!.index).toBe('a4')
+
+	editor.reparentShapes([ids.box2, ids.box3], ids.box1)
+
+	// Set the index based on the current children
+
+	// When moving to an empty shape, start at a0
+	expect(editor.getShape(ids.box2)!.index).toBe('a1')
+	expect(editor.getShape(ids.box3)!.index).toBe('a2')
+
+	editor.reparentShapes([ids.box2], editor.getCurrentPageId())
+
+	// When moving back, place at the top of the stack
+	expect(editor.getShape(ids.box2)!.index).toBe('a6')
+})
+
+it('adds children at a given index', () => {
+	expect(editor.getShape(ids.box1)!.index).toBe('a1')
+	expect(editor.getShape(ids.box2)!.index).toBe('a2')
+	expect(editor.getShape(ids.box3)!.index).toBe('a3')
+	expect(editor.getShape(ids.box4)!.index).toBe('a4')
+	expect(editor.getShape(ids.box5)!.index).toBe('a5')
+
+	// Page
+	// - box1 a1
+	// - box2 a2
+	//   - ellipse1 a1
+	// - box3 a3
+	// - box4 a4
+	// - box5 a5
+
+	editor.reparentShapes([ids.box2], ids.box1)
+
+	// Page
+	// - box1 a1
+	//   - box2 a1
+	//     - ellipse1 a1
+	// - box3 a3
+	// - box4 a4
+	// - box5 a5
+
+	// Set the index based on the current children
+
+	// When moving to an empty shape, start at a1
+	expect(editor.getShape(ids.box1)!.index).toBe('a1')
+	expect(editor.getShape(ids.box2)!.index).toBe('a1')
+	expect(editor.getShape(ids.box3)!.index).toBe('a3')
+	expect(editor.getShape(ids.box4)!.index).toBe('a4')
+	expect(editor.getShape(ids.box5)!.index).toBe('a5')
+	expect(editor.getShape(ids.ellipse1)!.index).toBe('a1')
+
+	// Handles collisions (trying to move box3 to a0, but box2 is there already)
+	editor.reparentShapes([ids.box3], ids.box1, 'a1')
+
+	// Page
+	// - box1 a1
+	//   - box2 a1
+	//     - ellipse1 a1
+	//   - box3 a2
+	// - box4 a4
+	// - box5 a5
+
+	expect(editor.getShape(ids.box1)!.index).toBe('a1')
+	expect(editor.getShape(ids.box2)!.index).toBe('a1')
+	expect(editor.getShape(ids.box3)!.index).toBe('a2')
+	expect(editor.getShape(ids.box4)!.index).toBe('a4')
+	expect(editor.getShape(ids.box5)!.index).toBe('a5')
+	expect(editor.getShape(ids.ellipse1)!.index).toBe('a1')
+
+	// Handles collisions (trying to move box5 to a0, but box2 is there already)
+	// should end up between box 2 and box 3 (a0 and a1)
+	editor.reparentShapes([ids.box5], ids.box1, 'a1')
+
+	// Page
+	// - box1 a1
+	//   - box2 a1
+	//     - ellipse1 a1
+	//   - box5 a1V
+	//   - box3 a2
+	// - box4 a2
+
+	expect(editor.getShape(ids.box1)!.index).toBe('a1')
+	expect(editor.getShape(ids.box2)!.index).toBe('a1')
+	expect(editor.getShape(ids.box3)!.index).toBe('a2')
+	expect(editor.getShape(ids.box4)!.index).toBe('a4')
+	expect(editor.getShape(ids.box5)!.index).toBe('a1V')
+	expect(editor.getShape(ids.ellipse1)!.index).toBe('a1')
+
+	// Handles collisions (trying to move boxes 2, 3, and 5 to a0, but box1 is there already)
+	// Should order them between box1 and box4
+	editor.reparentShapes([ids.box2, ids.box3, ids.box5], editor.getCurrentPageId(), 'a1')
+
+	// Page
+	// - box1 a1
+	// - box2 a1V
+	//   - ellipse1 a1
+	// - box3 a2
+	// - box5 a3
+	// - box4 a4
+
+	expect(editor.getShape(ids.box1)!.index).toBe('a1')
+	expect(editor.getShape(ids.box2)!.index).toBe('a1V')
+	expect(editor.getShape(ids.box3)!.index).toBe('a2')
+	expect(editor.getShape(ids.box4)!.index).toBe('a4')
+	expect(editor.getShape(ids.box5)!.index).toBe('a3')
+	expect(editor.getShape(ids.ellipse1)!.index).toBe('a1')
+})

package/src/test/commands/resetZoom.test.ts

@@ -0,0 +1,30 @@
+import { TestEditor } from '../TestEditor'
+
+let editor: TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+
+describe('When resetting zoom', () => {
+	it('Resets the zoom when zoomed out', () => {
+		const center = editor.getViewportScreenBounds().center.clone()
+		editor.zoomOut()
+		editor.resetZoom()
+		expect(editor.getZoomLevel()).toBe(1)
+		editor.zoomIn()
+		editor.resetZoom()
+		expect(editor.getZoomLevel()).toBe(1)
+		expect(editor.getViewportScreenBounds().center.clone()).toMatchObject(center)
+	})
+
+	it('Resets the zoom when zoomed in', () => {
+		const center = editor.getViewportScreenBounds().center.clone()
+		editor.zoomOut()
+		editor.resetZoom()
+		expect(editor.getViewportScreenBounds().center.clone()).toMatchObject(center)
+		editor.zoomIn()
+		editor.resetZoom()
+		expect(editor.getViewportScreenBounds().center.clone()).toMatchObject(center)
+	})
+})

package/src/test/commands/resizeShape.test.ts

@@ -0,0 +1,58 @@
+import { createShapeId } from '@bigbluebutton/editor'
+import { TestEditor } from '../TestEditor'
+
+let editor: TestEditor
+
+jest.useFakeTimers()
+
+const ids = {
+	boxA: createShapeId('boxA'),
+	boxB: createShapeId('boxB'),
+	boxC: createShapeId('boxC'),
+	boxD: createShapeId('boxD'),
+}
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+
+// most of the resizeShape command logic is tested in the resizing.test.ts file
+// this file is mainly for testing the default parameters and associated logic
+
+describe('resizing a shape', () => {
+	it('always squashes history entries', () => {
+		editor.createShapes([{ id: ids.boxA, type: 'geo', props: { w: 100, h: 100 } }])
+
+		editor.mark('start')
+		const startHistoryLength = editor.history.getNumUndos()
+		editor.resizeShape(ids.boxA, { x: 2, y: 2 })
+		expect(editor.history.getNumUndos()).toBe(startHistoryLength + 1)
+		editor.resizeShape(ids.boxA, { x: 2, y: 2 })
+		expect(editor.history.getNumUndos()).toBe(startHistoryLength + 1)
+		editor.resizeShape(ids.boxA, { x: 2, y: 2 })
+		expect(editor.history.getNumUndos()).toBe(startHistoryLength + 1)
+
+		expect(editor.getShapePageBounds(ids.boxA)).toCloselyMatchObject({
+			w: 800,
+			h: 800,
+		})
+
+		editor.undo()
+		expect(editor.getShapePageBounds(ids.boxA)).toCloselyMatchObject({
+			w: 100,
+			h: 100,
+		})
+	})
+
+	it('resizes from the center of the shape by default', () => {
+		editor.createShapes([{ id: ids.boxA, type: 'geo', props: { w: 100, h: 100 } }])
+
+		editor.resizeShape(ids.boxA, { x: 2, y: 2 })
+		expect(editor.getShapePageBounds(ids.boxA)).toCloselyMatchObject({
+			x: -50,
+			y: -50,
+			w: 200,
+			h: 200,
+		})
+	})
+})

package/src/test/commands/rotateShapes.test.ts

@@ -0,0 +1,82 @@
+import { createShapeId } from '@bigbluebutton/editor'
+import { TestEditor } from '../TestEditor'
+
+let editor: TestEditor
+
+afterEach(() => {
+	editor?.dispose()
+})
+
+const ids = {
+	box1: createShapeId('box1'),
+	box2: createShapeId('box2'),
+}
+
+beforeEach(() => {
+	editor = new TestEditor()
+
+	editor.createShapes([
+		{
+			id: ids.box1,
+			type: 'geo',
+			x: 10,
+			y: 10,
+			props: {
+				w: 100,
+				h: 100,
+			},
+		},
+		{
+			id: ids.box2,
+			type: 'geo',
+			x: 200,
+			y: 200,
+			props: {
+				w: 100,
+				h: 100,
+			},
+		},
+	])
+})
+
+describe('editor.rotateShapes', () => {
+	it('Rotates shapes and fires events', () => {
+		// Set start / change / end events on only the geo shape
+		const util = editor.getShapeUtil('geo')
+
+		// Bad! who did this (did I do this)
+		const fnStart = jest.fn()
+		util.onRotateStart = fnStart
+
+		const fnChange = jest.fn()
+		util.onRotate = fnChange
+
+		const fnEnd = jest.fn()
+		util.onRotateEnd = fnEnd
+
+		// Select the shape...
+		editor.select(ids.box1, ids.box2)
+
+		const selectionPageCenter = editor.getSelectionPageCenter()
+
+		// Rotate the shape...
+		editor.rotateShapesBy(editor.getSelectedShapeIds(), Math.PI)
+
+		// Once for each shape
+		expect(fnStart).toHaveBeenCalledTimes(2)
+
+		// Once for each shape
+		expect(fnChange).toHaveBeenCalledTimes(2)
+
+		// Once for each shape
+		expect(fnEnd).toHaveBeenCalledTimes(2)
+
+		// Are the shapes rotated?
+		editor
+			.expectShapeToMatch({ id: ids.box1, rotation: Math.PI })
+			.expectShapeToMatch({ id: ids.box2, rotation: Math.PI })
+
+		// Are the centers the same?
+		expect(selectionPageCenter).toCloselyMatchObject(editor.getSelectionPageCenter()!)
+	})
+})

package/src/test/commands/screenToPage.test.ts

@@ -0,0 +1,246 @@
+import { VecLike } from '@bigbluebutton/editor'
+import { TestEditor } from '../TestEditor'
+
+let editor: TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+
+function checkScreenPage(screen: VecLike, page: VecLike) {
+	const pageResult = editor.screenToPage(screen)
+	expect(pageResult).toMatchObject(page)
+	const screenResult = editor.pageToScreen(pageResult)
+	expect(screenResult).toMatchObject(screen)
+}
+
+describe('viewport.screenToPage', () => {
+	it('converts correctly', () => {
+		checkScreenPage({ x: 0, y: 0 }, { x: 0, y: 0 })
+		checkScreenPage({ x: 100, y: 100 }, { x: 100, y: 100 })
+		checkScreenPage({ x: -100, y: -100 }, { x: -100, y: -100 })
+	})
+
+	it('converts correctly when zoomed', () => {
+		editor.setCamera({ x: 0, y: 0, z: 0.5 })
+
+		checkScreenPage({ x: 0, y: 0 }, { x: 0, y: 0 })
+		checkScreenPage({ x: 100, y: 100 }, { x: 200, y: 200 })
+		checkScreenPage({ x: -100, y: -100 }, { x: -200, y: -200 })
+	})
+
+	it('converts correctly when panned', () => {
+		editor.setCamera({ x: 100, y: 100 })
+
+		checkScreenPage({ x: 0, y: 0 }, { x: -100, y: -100 })
+		checkScreenPage({ x: 100, y: 100 }, { x: 0, y: 0 })
+		checkScreenPage({ x: -100, y: -100 }, { x: -200, y: -200 })
+	})
+
+	it('converts correctly when panned and zoomed', () => {
+		editor.setCamera({ x: 100, y: 100, z: 0.5 })
+
+		checkScreenPage({ x: 0, y: 0 }, { x: -100, y: -100 })
+		checkScreenPage({ x: 100, y: 100 }, { x: 100, y: 100 })
+		checkScreenPage({ x: -100, y: -100 }, { x: -300, y: -300 })
+		checkScreenPage({ x: -150, y: -150 }, { x: -400, y: -400 })
+	})
+
+	it('converts correctly when offset', () => {
+		editor.updateInstanceState({
+			screenBounds: { ...editor.getViewportScreenBounds(), x: 100, y: 100 },
+		})
+
+		checkScreenPage({ x: 0, y: 0 }, { x: -100, y: -100 })
+		checkScreenPage({ x: -100, y: -100 }, { x: -200, y: -200 })
+		checkScreenPage({ x: 100, y: 100 }, { x: 0, y: 0 })
+	})
+
+	it('converts correctly when zoomed out', () => {
+		// camera at zero, screenbounds at zero, but zoom at .5
+		editor.setCamera({ x: 0, y: 0, z: 0.5 })
+		editor.updateInstanceState({
+			screenBounds: { ...editor.getViewportScreenBounds(), x: 0, y: 0 },
+		})
+
+		checkScreenPage({ x: 0, y: 0 }, { x: 0, y: 0 })
+		checkScreenPage({ x: -100, y: -100 }, { x: -200, y: -200 })
+		checkScreenPage({ x: 100, y: 100 }, { x: 200, y: 200 })
+	})
+
+	it('converts correctly when zoomed in', () => {
+		editor.setCamera({ x: 0, y: 0, z: 2 })
+		editor.updateInstanceState({
+			screenBounds: { ...editor.getViewportScreenBounds(), x: 0, y: 0 },
+		})
+
+		checkScreenPage({ x: 0, y: 0 }, { x: 0, y: 0 })
+		checkScreenPage({ x: -100, y: -100 }, { x: -50, y: -50 })
+		checkScreenPage({ x: 100, y: 100 }, { x: 50, y: 50 })
+	})
+
+	it('converts correctly when zoomed', () => {
+		// camera at zero, screenbounds at zero, but zoom at .5
+		editor.updateInstanceState({
+			screenBounds: { ...editor.getViewportScreenBounds(), x: 0, y: 0 },
+		})
+		editor.setCamera({ x: 0, y: 0, z: 0.5 })
+
+		checkScreenPage({ x: 0, y: 0 }, { x: 0, y: 0 })
+		checkScreenPage({ x: -100, y: -100 }, { x: -200, y: -200 })
+		checkScreenPage({ x: 100, y: 100 }, { x: 200, y: 200 })
+	})
+
+	it('converts correctly when offset and zoomed', () => {
+		editor.setCamera({ x: 0, y: 0, z: 0.5 })
+		editor.updateInstanceState({
+			screenBounds: { ...editor.getViewportScreenBounds(), x: 100, y: 100 },
+		})
+
+		checkScreenPage({ x: 0, y: 0 }, { x: -200, y: -200 })
+		checkScreenPage({ x: -100, y: -100 }, { x: -400, y: -400 })
+		checkScreenPage({ x: 100, y: 100 }, { x: 0, y: 0 })
+	})
+
+	it('converts correctly when zoomed and panned', () => {
+		editor.updateInstanceState({
+			screenBounds: { ...editor.getViewportScreenBounds(), x: 0, y: 0 },
+		})
+		editor.setCamera({ x: 100, y: 100, z: 0.5 })
+
+		checkScreenPage({ x: 0, y: 0 }, { x: -100, y: -100 })
+		checkScreenPage({ x: -100, y: -100 }, { x: -300, y: -300 })
+		checkScreenPage({ x: 100, y: 100 }, { x: 100, y: 100 })
+	})
+
+	it('converts correctly when offset', () => {
+		editor.updateInstanceState({
+			screenBounds: { ...editor.getViewportScreenBounds(), x: 100, y: 100 },
+		})
+		editor.setCamera({ x: 0, y: 0, z: 0.5 })
+
+		checkScreenPage({ x: 0, y: 0 }, { x: -200, y: -200 })
+		checkScreenPage({ x: 100, y: 100 }, { x: 0, y: 0 })
+		checkScreenPage({ x: 200, y: 200 }, { x: 200, y: 200 })
+	})
+
+	it('converts correctly when panned', () => {
+		editor.updateInstanceState({
+			screenBounds: { ...editor.getViewportScreenBounds(), x: 0, y: 0 },
+		})
+		editor.setCamera({ x: 100, y: 100, z: 1 })
+
+		checkScreenPage({ x: 0, y: 0 }, { x: -100, y: -100 })
+		checkScreenPage({ x: 100, y: 100 }, { x: 0, y: 0 })
+		checkScreenPage({ x: 200, y: 200 }, { x: 100, y: 100 })
+	})
+
+	it('converts correctly when panned and zoomed', () => {
+		editor.updateInstanceState({
+			screenBounds: { ...editor.getViewportScreenBounds(), x: 0, y: 0 },
+		})
+		editor.setCamera({ x: 100, y: 100, z: 0.5 })
+
+		checkScreenPage({ x: 0, y: 0 }, { x: -100, y: -100 })
+		checkScreenPage({ x: 100, y: 100 }, { x: 100, y: 100 })
+		checkScreenPage({ x: 200, y: 200 }, { x: 300, y: 300 })
+	})
+
+	it('converts correctly when panned and zoomed and offset', () => {
+		editor.updateInstanceState({
+			screenBounds: { ...editor.getViewportScreenBounds(), x: 100, y: 100 },
+		})
+		editor.setCamera({ x: 100, y: 100, z: 0.5 })
+
+		checkScreenPage({ x: 0, y: 0 }, { x: -300, y: -300 })
+		checkScreenPage({ x: 100, y: 100 }, { x: -100, y: -100 })
+		checkScreenPage({ x: 200, y: 200 }, { x: 100, y: 100 })
+	})
+})
+
+describe('viewportPageBounds', () => {
+	it('sets the page bounds', () => {
+		editor.updateInstanceState({
+			screenBounds: { ...editor.getViewportScreenBounds(), x: 0, y: 0, w: 1000, h: 1000 },
+		})
+		editor.setCamera({ x: 0, y: 0, z: 1 })
+
+		expect(editor.getViewportPageBounds()).toMatchObject({
+			x: -0,
+			y: -0,
+			w: 1000,
+			h: 1000,
+		})
+	})
+
+	it('sets the page bounds when camera is zoomed', () => {
+		editor.updateInstanceState({
+			screenBounds: { ...editor.getViewportScreenBounds(), x: 0, y: 0, w: 1000, h: 1000 },
+		})
+		editor.setCamera({ x: 0, y: 0, z: 2 })
+
+		expect(editor.getViewportPageBounds()).toMatchObject({
+			x: -0,
+			y: -0,
+			w: 500,
+			h: 500,
+		})
+		editor.setCamera({ x: 0, y: 0, z: 0.5 })
+
+		expect(editor.getViewportPageBounds()).toMatchObject({
+			x: -0,
+			y: -0,
+			w: 2000,
+			h: 2000,
+		})
+	})
+
+	it('sets the page bounds when camera is panned', () => {
+		editor.updateInstanceState({
+			screenBounds: { ...editor.getViewportScreenBounds(), x: 0, y: 0, w: 1000, h: 1000 },
+		})
+		editor.setCamera({ x: 100, y: 100, z: 1 })
+
+		expect(editor.getViewportPageBounds()).toMatchObject({
+			x: -100,
+			y: -100,
+			w: 1000,
+			h: 1000,
+			maxX: 900,
+			maxY: 900,
+		})
+	})
+
+	it('sets the page bounds when camera is panned and zoomed', () => {
+		editor.updateInstanceState({
+			screenBounds: { ...editor.getViewportScreenBounds(), x: 0, y: 0, w: 1000, h: 1000 },
+		})
+		editor.setCamera({ x: 100, y: 100, z: 2 })
+
+		expect(editor.getViewportPageBounds()).toMatchObject({
+			x: -100,
+			y: -100,
+			w: 500,
+			h: 500,
+			maxX: 400,
+			maxY: 400,
+		})
+	})
+
+	it('sets the page bounds when viewport is offset', () => {
+		editor.updateInstanceState({
+			screenBounds: { ...editor.getViewportScreenBounds(), x: 100, y: 100, w: 1000, h: 1000 },
+		})
+		editor.setCamera({ x: 0, y: 0, z: 2 })
+
+		// changing the screen bounds should not affect the page bounds
+		expect(editor.getViewportPageBounds()).toMatchObject({
+			x: -0,
+			y: -0,
+			w: 500,
+			h: 500,
+			maxX: 500,
+			maxY: 500,
+		})
+	})
+})

package/src/test/commands/setAppState.test.ts

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

package/src/test/commands/setBrush.test.ts

@@ -0,0 +1,38 @@
+import { TestEditor } from '../TestEditor'
+
+let editor: TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+
+it('Sets the brush', () => {
+	expect(editor.getInstanceState().brush).toEqual(null)
+
+	editor.updateInstanceState({ brush: { x: 0, y: 0, w: 100, h: 100 } })
+
+	expect(editor.getInstanceState().brush).toMatchObject({
+		x: 0,
+		y: 0,
+		w: 100,
+		h: 100,
+	})
+
+	editor.undo()
+
+	expect(editor.getInstanceState().brush).toEqual({
+		x: 0,
+		y: 0,
+		w: 100,
+		h: 100,
+	})
+
+	editor.redo()
+
+	expect(editor.getInstanceState().brush).toEqual({
+		x: 0,
+		y: 0,
+		w: 100,
+		h: 100,
+	})
+})