@bigbluebutton/tldraw 2.0.0-alpha.19

package/src/test/commands/nudge.test.ts

@@ -0,0 +1,292 @@
+import { TLShapeId, createShapeId } from '@bigbluebutton/editor'
+import { TestEditor } from '../TestEditor'
+
+let editor: TestEditor
+
+const ids = {
+	boxA: createShapeId('boxA'),
+	boxB: createShapeId('boxB'),
+}
+
+beforeEach(() => {
+	editor = new TestEditor()
+	editor.createShapes([
+		{
+			id: ids.boxA,
+			type: 'geo',
+			x: 10,
+			y: 10,
+			props: {
+				w: 100,
+				h: 100,
+			},
+		},
+		{
+			id: ids.boxB,
+			type: 'geo',
+			x: 27,
+			y: 13,
+			props: {
+				w: 120,
+				h: 167,
+			},
+		},
+	])
+})
+
+function nudgeAndGet(ids: TLShapeId[], key: string, shiftKey: boolean) {
+	const step = editor.getInstanceState().isGridMode ? (shiftKey ? 50 : 10) : shiftKey ? 10 : 1
+	switch (key) {
+		case 'ArrowLeft': {
+			editor.mark('nudge')
+			editor.nudgeShapes(editor.getSelectedShapeIds(), { x: -step, y: 0 })
+			break
+		}
+		case 'ArrowRight': {
+			editor.mark('nudge')
+			editor.nudgeShapes(editor.getSelectedShapeIds(), { x: step, y: 0 })
+			break
+		}
+		case 'ArrowUp': {
+			editor.mark('nudge')
+			editor.nudgeShapes(editor.getSelectedShapeIds(), { x: 0, y: -step })
+			break
+		}
+		case 'ArrowDown': {
+			editor.mark('nudge')
+			editor.nudgeShapes(editor.getSelectedShapeIds(), { x: 0, y: step })
+			break
+		}
+	}
+
+	const shapes = ids.map((id) => editor.getShape(id)!)
+	return shapes.map((shape) => ({ x: shape.x, y: shape.y }))
+}
+
+function getShape(ids: TLShapeId[]) {
+	const shapes = ids.map((id) => editor.getShape(id)!)
+	return shapes.map((shape) => ({ x: shape.x, y: shape.y }))
+}
+
+describe('When a shape is selected...', () => {
+	it('nudges and undoes', () => {
+		editor.setSelectedShapes([ids.boxA])
+
+		editor.keyDown('ArrowUp')
+		expect(editor.getSelectionPageBounds()).toMatchObject({ x: 10, y: 9 })
+		editor.keyUp('ArrowUp')
+
+		editor.undo()
+		expect(editor.getSelectionPageBounds()).toMatchObject({ x: 10, y: 10 })
+
+		editor.redo()
+		expect(editor.getSelectionPageBounds()).toMatchObject({ x: 10, y: 9 })
+	})
+
+	it('nudges and holds', () => {
+		editor.setSelectedShapes([ids.boxA])
+
+		editor.keyDown('ArrowUp')
+		editor.keyRepeat('ArrowUp')
+		editor.keyRepeat('ArrowUp')
+		editor.keyRepeat('ArrowUp')
+		editor.keyRepeat('ArrowUp')
+		editor.keyUp('ArrowUp')
+
+		expect(editor.getSelectionPageBounds()).toMatchObject({ x: 10, y: 5 })
+
+		// Undoing should go back to the keydown state, all those
+		// repeats should be ephemeral and squashed down
+		editor.undo()
+		expect(editor.getSelectionPageBounds()).toMatchObject({ x: 10, y: 10 })
+
+		editor.redo()
+		expect(editor.getSelectionPageBounds()).toMatchObject({ x: 10, y: 5 })
+	})
+
+	it('nudges a shape correctly', () => {
+		editor.setSelectedShapes([ids.boxA])
+
+		editor.keyDown('ArrowUp')
+		expect(editor.getSelectionPageBounds()).toMatchObject({ x: 10, y: 9 })
+		editor.keyUp('ArrowUp')
+
+		editor.keyDown('ArrowRight')
+		expect(editor.getSelectionPageBounds()).toMatchObject({ x: 11, y: 9 })
+		editor.keyUp('ArrowRight')
+
+		editor.keyDown('ArrowDown')
+		expect(editor.getSelectionPageBounds()).toMatchObject({ x: 11, y: 10 })
+		editor.keyUp('ArrowDown')
+
+		editor.keyDown('ArrowLeft')
+		expect(editor.getSelectionPageBounds()).toMatchObject({ x: 10, y: 10 })
+		editor.keyUp('ArrowLeft')
+	})
+})
+
+// The tests below were written before the tests above; they all still work
+// but there may be some redundancy. They may cover a few cases that aren't
+// covered above though.
+
+describe('When a shape is rotated...', () => {
+	it('Translates correctly in page space', () => {
+		// Rotate boxB by 90 degrees and move it to 0,0 for simplicity's sake
+		editor.select(ids.boxB)
+		editor.rotateShapesBy([ids.boxB], Math.PI / 2)
+		editor.updateShapes([{ id: ids.boxB, type: 'geo', x: 0, y: 0, props: { w: 100, h: 100 } }])
+		// Make box A a child of box B
+		editor.reparentShapes([ids.boxA], ids.boxB)
+		// editor.updateShapes([{ id: ids.boxB, type: 'geo', x: 10, y: 10 }])
+
+		// Here's the selection page bounds and shape before we nudge it
+		editor.setSelectedShapes([ids.boxA])
+		expect(editor.getSelectionPageBounds()).toCloselyMatchObject({ x: 10, y: 10, w: 100, h: 100 })
+		expect(editor.getShape(ids.boxA)).toCloselyMatchObject({ x: 10, y: -10 })
+
+		// Select box A and move it up. The page bounds should move up, but the
+		// shape should move left (since its parent is rotated 90 degrees)
+		editor.keyDown('ArrowUp')
+		expect(editor.getSelectionPageBounds()).toMatchObject({ x: 10, y: 9, w: 100, h: 100 })
+		expect(editor.getShape(ids.boxA)).toMatchObject({ x: 9, y: -10 })
+		editor.keyUp('ArrowUp')
+	})
+})
+
+describe('When a shape is selected...', () => {
+	it('nudges a shape correctly', () => {
+		editor.setSelectedShapes([ids.boxA])
+
+		expect(nudgeAndGet([ids.boxA], 'ArrowUp', false)).toMatchObject([{ x: 10, y: 9 }])
+		expect(nudgeAndGet([ids.boxA], 'ArrowRight', false)).toMatchObject([{ x: 11, y: 9 }])
+		expect(nudgeAndGet([ids.boxA], 'ArrowDown', false)).toMatchObject([{ x: 11, y: 10 }])
+		expect(nudgeAndGet([ids.boxA], 'ArrowLeft', false)).toMatchObject([{ x: 10, y: 10 }])
+	})
+
+	it('nudges a shape with shift key pressed', () => {
+		editor.setSelectedShapes([ids.boxA])
+
+		expect(nudgeAndGet([ids.boxA], 'ArrowUp', true)).toMatchObject([{ x: 10, y: 0 }])
+		expect(nudgeAndGet([ids.boxA], 'ArrowRight', true)).toMatchObject([{ x: 20, y: 0 }])
+		expect(nudgeAndGet([ids.boxA], 'ArrowDown', true)).toMatchObject([{ x: 20, y: 10 }])
+		expect(nudgeAndGet([ids.boxA], 'ArrowLeft', true)).toMatchObject([{ x: 10, y: 10 }])
+	})
+
+	it.todo('updates bound shapes')
+})
+
+describe('When grid is enabled...', () => {
+	it('nudges a shape correctly', () => {
+		editor.updateInstanceState({ isGridMode: true })
+		editor.setSelectedShapes([ids.boxA])
+
+		expect(nudgeAndGet([ids.boxA], 'ArrowUp', false)).toMatchObject([{ x: 10, y: 0 }])
+		expect(nudgeAndGet([ids.boxA], 'ArrowRight', false)).toMatchObject([{ x: 20, y: 0 }])
+		expect(nudgeAndGet([ids.boxA], 'ArrowDown', false)).toMatchObject([{ x: 20, y: 10 }])
+		expect(nudgeAndGet([ids.boxA], 'ArrowLeft', false)).toMatchObject([{ x: 10, y: 10 }])
+	})
+
+	it('nudges a shape with shift key pressed', () => {
+		editor.updateInstanceState({ isGridMode: true })
+		editor.setSelectedShapes([ids.boxA])
+
+		expect(nudgeAndGet([ids.boxA], 'ArrowUp', true)).toMatchObject([{ x: 10, y: -40 }])
+		expect(nudgeAndGet([ids.boxA], 'ArrowRight', true)).toMatchObject([{ x: 60, y: -40 }])
+		expect(nudgeAndGet([ids.boxA], 'ArrowDown', true)).toMatchObject([{ x: 60, y: 10 }])
+		expect(nudgeAndGet([ids.boxA], 'ArrowLeft', true)).toMatchObject([{ x: 10, y: 10 }])
+	})
+})
+
+describe('When multiple shapes are selected...', () => {
+	it('Nudges all shapes correctly', () => {
+		editor.setSelectedShapes([ids.boxA, ids.boxB])
+
+		expect(nudgeAndGet([ids.boxA, ids.boxB], 'ArrowUp', false)).toMatchObject([
+			{ x: 10, y: 9 },
+			{ x: 27, y: 12 },
+		])
+		expect(nudgeAndGet([ids.boxA, ids.boxB], 'ArrowRight', false)).toMatchObject([
+			{ x: 11, y: 9 },
+			{ x: 28, y: 12 },
+		])
+		expect(nudgeAndGet([ids.boxA, ids.boxB], 'ArrowDown', false)).toMatchObject([
+			{ x: 11, y: 10 },
+			{ x: 28, y: 13 },
+		])
+		expect(nudgeAndGet([ids.boxA, ids.boxB], 'ArrowLeft', false)).toMatchObject([
+			{ x: 10, y: 10 },
+			{ x: 27, y: 13 },
+		])
+	})
+})
+
+describe('When undo redo is on...', () => {
+	it('Does not nudge any shapes', () => {
+		editor.setSelectedShapes([ids.boxA])
+
+		expect(nudgeAndGet([ids.boxA], 'ArrowUp', false)).toMatchObject([{ x: 10, y: 9 }])
+		editor.undo()
+		expect(getShape([ids.boxA])).toMatchObject([{ x: 10, y: 10 }])
+		editor.redo()
+		expect(getShape([ids.boxA])).toMatchObject([{ x: 10, y: 9 }])
+
+		expect(nudgeAndGet([ids.boxA], 'ArrowRight', false)).toMatchObject([{ x: 11, y: 9 }])
+		editor.undo()
+		expect(getShape([ids.boxA])).toMatchObject([{ x: 10, y: 9 }])
+		editor.redo()
+		expect(getShape([ids.boxA])).toMatchObject([{ x: 11, y: 9 }])
+	})
+})
+
+describe('When nudging a rotated shape...', () => {
+	it('Moves the page point correctly', () => {
+		editor.setSelectedShapes([ids.boxA])
+		const shapeA = editor.getShape(ids.boxA)!
+
+		editor.updateShapes([{ id: ids.boxA, type: shapeA.type, rotation: 90 }])
+		expect(nudgeAndGet([ids.boxA], 'ArrowRight', false)).toMatchObject([{ x: 11, y: 10 }])
+
+		editor.updateShapes([{ id: ids.boxA, type: shapeA.type, rotation: -90 }])
+		expect(nudgeAndGet([ids.boxA], 'ArrowDown', false)).toMatchObject([{ x: 11, y: 11 }])
+	})
+})
+
+describe('When nudging multiple rotated shapes...', () => {
+	it('Moves the page point correctly', () => {
+		editor.setSelectedShapes([ids.boxA, ids.boxB])
+		const shapeA = editor.getShape(ids.boxA)!
+		const shapeB = editor.getShape(ids.boxB)!
+
+		editor.updateShapes([
+			{
+				...shapeA,
+				rotation: 90,
+			},
+			{
+				...shapeB,
+				rotation: -90,
+			},
+		])
+		expect(nudgeAndGet([ids.boxA, ids.boxB], 'ArrowRight', false)).toMatchObject([
+			{ x: 11, y: 10 },
+			{ x: 28, y: 13 },
+		])
+
+		editor.updateShapes([
+			{
+				id: shapeA.id,
+				type: shapeA.type,
+				rotation: -90,
+			},
+			{
+				id: shapeB.id,
+				type: shapeB.type,
+				rotation: 90,
+			},
+		])
+		expect(nudgeAndGet([ids.boxA, ids.boxB], 'ArrowDown', false)).toMatchObject([
+			{ x: 11, y: 11 },
+			{ x: 28, y: 14 },
+		])
+	})
+})

package/src/test/commands/packShapes.test.ts

@@ -0,0 +1,62 @@
+import { createShapeId } from '@bigbluebutton/editor'
+import { TestEditor } from '../TestEditor'
+
+let editor: TestEditor
+
+const ids = {
+	boxA: createShapeId('boxA'),
+	boxB: createShapeId('boxB'),
+	boxC: createShapeId('boxC'),
+	boxD: createShapeId('boxD'),
+}
+
+jest.useFakeTimers()
+
+beforeEach(() => {
+	editor = new TestEditor()
+	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('editor.packShapes', () => {
+	it('packs shapes', () => {
+		editor.selectAll()
+		const centerBefore = editor.getSelectionRotatedPageBounds()!.center.clone()
+		editor.packShapes(editor.getSelectedShapeIds(), 16)
+		jest.advanceTimersByTime(1000)
+		expect(
+			editor.getCurrentPageShapes().map((s) => ({ ...s, parentId: 'wahtever' }))
+		).toMatchSnapshot('packed shapes')
+		const centerAfter = editor.getSelectionRotatedPageBounds()!.center.clone()
+		expect(centerBefore).toMatchObject(centerAfter)
+	})
+
+	it('packs rotated shapes', () => {
+		editor.updateShapes([{ id: ids.boxA, type: 'geo', rotation: Math.PI }])
+		editor.selectAll().packShapes(editor.getSelectedShapeIds(), 16)
+		jest.advanceTimersByTime(1000)
+		expect(
+			editor.getCurrentPageShapes().map((s) => ({ ...s, parentId: 'wahtever' }))
+		).toMatchSnapshot('packed shapes')
+	})
+})

package/src/test/commands/pageToScreen.test.ts

@@ -0,0 +1,25 @@
+import { TestEditor } from '../TestEditor'
+
+let editor: TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+	editor.setCamera({ x: 0, y: 0, z: 1 })
+})
+
+describe('viewport.pageToScreen', () => {
+	it('converts correctly', () => {
+		expect(editor.pageToScreen({ x: 0, y: 0 })).toMatchObject({ x: 0, y: 0 })
+		expect(editor.pageToScreen({ x: 200, y: 200 })).toMatchObject({
+			x: 200,
+			y: 200,
+		})
+		editor.setCamera({ x: 100, y: 100 })
+		expect(editor.pageToScreen({ x: 200, y: 200 })).toMatchObject({
+			x: 300,
+			y: 300,
+		})
+	})
+
+	// see `screen to page` for paired tests
+})

package/src/test/commands/pan.test.ts

@@ -0,0 +1,32 @@
+import { Box2d, Vec2d } from '@bigbluebutton/editor'
+import { TestEditor, createDefaultShapes } from '../TestEditor'
+
+let editor: TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+	editor.createShapes(createDefaultShapes())
+})
+
+describe('When panning', () => {
+	it('Updates the camera', () => {
+		editor.pan({ x: 200, y: 200 })
+		editor.expectCameraToBe(200, 200, 1)
+	})
+
+	it('Updates the pageBounds', () => {
+		const screenBounds = editor.getViewportScreenBounds()
+		const beforeScreenBounds = new Box2d(
+			screenBounds.x,
+			screenBounds.y,
+			screenBounds.w,
+			screenBounds.h
+		)
+		const beforePageBounds = editor.getViewportPageBounds().clone()
+		editor.pan({ x: 200, y: 200 })
+		expect(editor.getViewportScreenBounds()).toMatchObject(beforeScreenBounds.toJson())
+		expect(editor.getViewportPageBounds().toJson()).toMatchObject(
+			beforePageBounds.translate(new Vec2d(-200, -200)).toJson()
+		)
+	})
+})

package/src/test/commands/penmode.test.ts

@@ -0,0 +1,27 @@
+import { Vec2d } from '@bigbluebutton/editor'
+import { TestEditor } from '../TestEditor'
+
+let editor: TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+
+it('ignores touch events while in pen mode', async () => {
+	editor.setCurrentTool('draw')
+	editor.updateInstanceState({ isPenMode: true })
+	editor.dispatch({
+		type: 'pointer',
+		name: 'pointer_down',
+		isPen: false,
+		pointerId: 1,
+		point: new Vec2d(100, 100),
+		shiftKey: false,
+		altKey: false,
+		ctrlKey: false,
+		button: 1,
+		target: 'canvas',
+	})
+
+	expect(editor.getCurrentPageShapes().length).toBe(0)
+})

package/src/test/commands/pinch.test.ts

@@ -0,0 +1,11 @@
+// import { TestEditor } from '../TestEditor'
+
+// let editor: TestEditor
+
+// beforeEach(() => {
+// 	editor =new TestEditor()
+// })
+
+describe('When pinching', () => {
+	it.todo('Pinches the camera')
+})

package/src/test/commands/putContent.test.ts

@@ -0,0 +1,39 @@
+import { TLContent, structuredClone } from '@bigbluebutton/editor'
+import { TestEditor } from '../TestEditor'
+
+let editor: TestEditor
+
+const clipboardContent: TLContent = JSON.parse(
+	`{"assets":[],"shapes":[{"x":927.9906463623047,"y":725.71875,"rotation":0,"index":"aD","type":"geo","props":{"w":215.34375,"h":195.28750610351562,"geo":"rectangle","color":"black","fill":"none","dash":"draw","size":"m","opacity":"1","font":"draw","text":"","align":"middle","growY":0,"url":""},"parentId":"page:Zh9Z-7-cUdRqfGbNL092o","id":"shape:YvYcQ5pd6eYfcJVtAaUzx","typeName":"shape"},{"x":1178.971908569336,"y":763.6687622070312,"rotation":0,"index":"aE","type":"geo","props":{"w":56.559356689453125,"h":31.740631103515625,"geo":"rectangle","color":"black","fill":"none","dash":"draw","size":"m","opacity":"1","font":"draw","text":"","align":"middle","growY":0,"url":""},"parentId":"page:Zh9Z-7-cUdRqfGbNL092o","id":"shape:qGCazmD9WsedCv1qYPBVu","typeName":"shape"},{"x":1265.2625274658203,"y":780.8187561035156,"rotation":0,"index":"aF","type":"geo","props":{"w":67.7437744140625,"h":78.15313720703125,"geo":"rectangle","color":"black","fill":"none","dash":"draw","size":"m","opacity":"1","font":"draw","text":"","align":"middle","growY":0,"url":""},"parentId":"page:Zh9Z-7-cUdRqfGbNL092o","id":"shape:X9-rd27k2ZDdaHV-hsqtu","typeName":"shape"},{"x":1380.418788909912,"y":819.4562530517578,"rotation":0,"index":"aG","type":"text","props":{"opacity":"1","color":"black","size":"m","w":60.931251525878906,"text":"hello","font":"draw","align":"middle","autoSize":true,"scale":1},"parentId":"page:Zh9Z-7-cUdRqfGbNL092o","id":"shape:5FoI2ueEiMAAkxLkrHN3T","typeName":"shape"},{"x":1055.409408569336,"y":853.0687561035156,"rotation":0,"index":"aH","type":"arrow","parentId":"page:Zh9Z-7-cUdRqfGbNL092o","props":{"opacity":"1","dash":"draw","size":"m","fill":"none","color":"black","bend":0,"start":{"type":"binding","boundShapeId":"shape:YvYcQ5pd6eYfcJVtAaUzx","normalizedAnchor":{"x":0.5916993746372079,"y":0.6521154816530428},"isExact":false},"end":{"type":"binding","boundShapeId":"shape:X9-rd27k2ZDdaHV-hsqtu","normalizedAnchor":{"x":0.5,"y":0.5},"isExact":false},"arrowheadStart":"none","arrowheadEnd":"arrow","text":"","font":"draw"},"id":"shape:XMSpBf6f7pL5aW1LSQyaw","typeName":"shape"},{"x":1216.471908569336,"y":932.7437744140625,"rotation":0,"index":"aI","type":"draw","props":{"segments":[{"type":"free","points":[{"x":0,"y":0,"z":0.5},{"x":1.00311279296875,"y":-0.54376220703125,"z":0.5},{"x":7.3343505859375,"y":-4.3531494140625,"z":0.5},{"x":23.246856689453125,"y":-14.25,"z":0.5},{"x":41.484344482421875,"y":-25.706268310546875,"z":0.5},{"x":57.887481689453125,"y":-37.46250915527344,"z":0.5},{"x":70.60934448242188,"y":-48.11564636230469,"z":0.5},{"x":76.70309448242188,"y":-54.43751525878906,"z":0.5},{"x":79.51559448242188,"y":-58.25627136230469,"z":0.5},{"x":80.20309448242188,"y":-60.56877136230469,"z":0.5},{"x":72.57809448242188,"y":-60.51564025878906,"z":0.5},{"x":61.175018310546875,"y":-58.28126525878906,"z":0.5},{"x":50.137481689453125,"y":-51.80938720703125,"z":0.5},{"x":41.612518310546875,"y":-42.89064025878906,"z":0.5},{"x":37.837493896484375,"y":-34.56877136230469,"z":0.5},{"x":37.506256103515625,"y":-27.525009155273438,"z":0.5},{"x":43.350006103515625,"y":-22.406265258789062,"z":0.5},{"x":55.228118896484375,"y":-20.506271362304688,"z":0.5},{"x":72.70938110351562,"y":-24.693771362304688,"z":0.5},{"x":93.02810668945312,"y":-36.38751220703125,"z":0.5},{"x":106.99063110351562,"y":-49.09063720703125,"z":0.5},{"x":115.16561889648438,"y":-59.25001525878906,"z":0.5},{"x":120.29061889648438,"y":-66.65939331054688,"z":0.5},{"x":122.21249389648438,"y":-70.01251220703125,"z":0.5},{"x":121.01248168945312,"y":-70.11564636230469,"z":0.5},{"x":116.71560668945312,"y":-65.25938415527344,"z":0.5},{"x":111.81875610351562,"y":-56.35939025878906,"z":0.5},{"x":109.52188110351562,"y":-48.18438720703125,"z":0.5},{"x":109.10000610351562,"y":-41.89064025878906,"z":0.5},{"x":112.64999389648438,"y":-38.07501220703125,"z":0.5},{"x":121.82809448242188,"y":-39.159393310546875,"z":0.5},{"x":132.42501831054688,"y":-46.518768310546875,"z":0.5},{"x":141.89376831054688,"y":-59.88127136230469,"z":0.5},{"x":148.40621948242188,"y":-74.43751525878906,"z":0.5},{"x":150.76559448242188,"y":-83.91252136230469,"z":0.5},{"x":151.16873168945312,"y":-88.77500915527344,"z":0.5},{"x":150.39688110351562,"y":-91.09063720703125,"z":0.5},{"x":147.40621948242188,"y":-90.03126525878906,"z":0.5},{"x":142.63125610351562,"y":-83.81564331054688,"z":0.5},{"x":138.87814331054688,"y":-74.77500915527344,"z":0.5},{"x":137.00625610351562,"y":-67.02813720703125,"z":0.5},{"x":136.30624389648438,"y":-60.79689025878906,"z":0.5},{"x":137.94375610351562,"y":-57.74375915527344,"z":0.5},{"x":142.95309448242188,"y":-58.01251220703125,"z":0.5},{"x":150.82498168945312,"y":-63.815643310546875,"z":0.5},{"x":157.37496948242188,"y":-72.54376220703125,"z":0.5},{"x":160.91873168945312,"y":-79.04689025878906,"z":0.5},{"x":162.82809448242188,"y":-83.13127136230469,"z":0.5},{"x":163.27188110351562,"y":-84.72189331054688,"z":0.5},{"x":159.78121948242188,"y":-80.45314025878906,"z":0.5},{"x":155.98434448242188,"y":-70.89376831054688,"z":0.5},{"x":154.01559448242188,"y":-57.06251525878906,"z":0.5},{"x":155.79684448242188,"y":-44.25001525878906,"z":0.5},{"x":163.32498168945312,"y":-35.41252136230469,"z":0.5},{"x":175.12814331054688,"y":-30.921890258789062,"z":0.5},{"x":186.04061889648438,"y":-30.71563720703125,"z":0.5},{"x":193.04373168945312,"y":-33.35313415527344,"z":0.5},{"x":197.56564331054688,"y":-38.48439025878906,"z":0.5},{"x":200.49996948242188,"y":-43.14689636230469,"z":0.5},{"x":201.47189331054688,"y":-45.28752136230469,"z":0.5}]}],"isComplete":true,"isClosed":false,"color":"black","fill":"none","dash":"draw","size":"m","opacity":"1"},"parentId":"page:Zh9Z-7-cUdRqfGbNL092o","id":"shape:OyubUm-qwOaDbvzNoa_g0","typeName":"shape"},{"x":1465.7375030517578,"y":706.3968811035156,"rotation":0,"index":"aJ","type":"note","parentId":"page:Zh9Z-7-cUdRqfGbNL092o","props":{"opacity":"1","color":"black","size":"m","text":"v","font":"draw","align":"middle","growY":0,"url":""},"id":"shape:0D2ZNbqxTKi4d6Q3BbEls","typeName":"shape"},{"x":1324.9500274658203,"y":930.1781311035156,"rotation":0,"index":"aK","type":"frame","props":{"opacity":"1","w":85.3499755859375,"h":56.3125,"name":""},"parentId":"page:Zh9Z-7-cUdRqfGbNL092o","id":"shape:ACKcls6rrAOAgkTX_sCdm","typeName":"shape"}],"rootShapeIds":["shape:YvYcQ5pd6eYfcJVtAaUzx","shape:qGCazmD9WsedCv1qYPBVu","shape:X9-rd27k2ZDdaHV-hsqtu","shape:5FoI2ueEiMAAkxLkrHN3T","shape:XMSpBf6f7pL5aW1LSQyaw","shape:OyubUm-qwOaDbvzNoa_g0","shape:0D2ZNbqxTKi4d6Q3BbEls","shape:ACKcls6rrAOAgkTX_sCdm","shape:o3P2c-wWaerZLcWso3sYF","shape:rZe9vg-I2X7O-n58mkq0M","shape:UlgYlA5ZzNZtpZRqgABbq","shape:uabMKQtbtNDL6teToq_6D","shape:uWFz_gmKo6NscSSazs4WF","shape:TNY5G4OSvHp_wZ4eqUll9","shape:xMMH0bZqs-y6Iabio8gMT","shape:nWe_I7doDo6HgGfAFE5wu"],"schema":{"schemaVersion":1,"storeVersion":1,"recordVersions":{"asset":{"version":0,"subTypeKey":"type","subTypeVersions":{"image":1,"video":1,"bookmark":0}},"camera":{"version":0},"document":{"version":0},"instance":{"version":2},"instance_page_state":{"version":0},"page":{"version":0},"shape":{"version":0,"subTypeKey":"type","subTypeVersions":{"arrow":0,"bookmark":0,"draw":0,"embed":0,"frame":0,"geo":1,"group":0,"icon":0,"image":1,"line":0,"note":1,"text":0,"video":1}},"user":{"version":0},"user_document":{"version":0},"user_presence":{"version":0}}}}`
+)
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+
+describe('Migrations', () => {
+	it('Throws error if content does not have a schema', () => {
+		const withoutSchema = structuredClone(clipboardContent)
+		// @ts-expect-error
+		delete withoutSchema.schema
+		expect(() => editor.putContentOntoCurrentPage(withoutSchema)).toThrowError()
+	})
+
+	it('Does not throw error if content has a schema', () => {
+		expect(() => editor.putContentOntoCurrentPage(clipboardContent)).not.toThrowError()
+	})
+
+	it('Throws error if any shape is invalid due to wrong type', () => {
+		const withInvalidShapeType = structuredClone(clipboardContent)
+		withInvalidShapeType.shapes[0].type = 'invalid'
+		expect(() => editor.putContentOntoCurrentPage(withInvalidShapeType)).toThrowError()
+	})
+
+	// we temporarily disabled validations
+	it.skip('Throws error if any shape is invalid due to wrong model', () => {
+		const withInvalidShapeModel = structuredClone(clipboardContent)
+		// @ts-expect-error
+		withInvalidShapeModel.shapes[0].x = 'invalid'
+		expect(() => editor.putContentOntoCurrentPage(withInvalidShapeModel)).toThrowError()
+	})
+})