@bigbluebutton/tldraw 2.0.0-alpha.19

package/src/test/TldrawEditor.test.tsx

@@ -0,0 +1,377 @@
+import {
+	BaseBoxShapeTool,
+	BaseBoxShapeUtil,
+	Canvas,
+	Editor,
+	HTMLContainer,
+	TLBaseShape,
+	TldrawEditor,
+	createShapeId,
+	createTLStore,
+	noop,
+} from '@bigbluebutton/editor'
+import { act, render, screen } from '@testing-library/react'
+import { defaultTools } from '../lib/defaultTools'
+import { GeoShapeUtil } from '../lib/shapes/geo/GeoShapeUtil'
+
+function checkAllShapes(editor: Editor, shapes: string[]) {
+	expect(Object.keys(editor!.store.schema.types.shape.migrations.subTypeMigrations!)).toStrictEqual(
+		shapes
+	)
+
+	expect(Object.keys(editor!.shapeUtils)).toStrictEqual(shapes)
+}
+
+describe('<TldrawEditor />', () => {
+	it('Renders without crashing', async () => {
+		render(
+			<TldrawEditor tools={defaultTools} autoFocus initialState="select">
+				<div data-testid="canvas-1" />
+			</TldrawEditor>
+		)
+		await screen.findByTestId('canvas-1')
+	})
+
+	it('Creates its own store with core shapes', async () => {
+		let editor: Editor
+		render(
+			<TldrawEditor
+				onMount={(e) => {
+					editor = e
+				}}
+				initialState="select"
+				tools={defaultTools}
+				autoFocus
+			>
+				<div data-testid="canvas-1" />
+			</TldrawEditor>
+		)
+		await screen.findByTestId('canvas-1')
+		checkAllShapes(editor!, ['group'])
+	})
+
+	it('Can be created with default shapes', async () => {
+		let editor: Editor
+		render(
+			<TldrawEditor
+				shapeUtils={[]}
+				tools={defaultTools}
+				initialState="select"
+				onMount={(e) => {
+					editor = e
+				}}
+				autoFocus
+			>
+				<div data-testid="canvas-1" />
+			</TldrawEditor>
+		)
+		await screen.findByTestId('canvas-1')
+		expect(editor!).toBeTruthy()
+
+		checkAllShapes(editor!, ['group'])
+	})
+
+	it('Renders with an external store', async () => {
+		const store = createTLStore({ shapeUtils: [] })
+		render(
+			<TldrawEditor
+				store={store}
+				tools={defaultTools}
+				initialState="select"
+				onMount={(editor) => {
+					expect(editor.store).toBe(store)
+				}}
+				autoFocus
+			>
+				<div data-testid="canvas-1" />
+			</TldrawEditor>
+		)
+		await screen.findByTestId('canvas-1')
+	})
+
+	it('throws if the store has different shapes to the ones passed in', async () => {
+		const spy = jest.spyOn(console, 'error').mockImplementation(noop)
+		// expect(() =>
+		// 	render(
+		// 		<TldrawEditor
+		// 			shapeUtils={[GroupShapeUtil]}
+		// 			store={createTLStore({ shapeUtils: [] })}
+		// 			autoFocus
+		// 			components={{
+		// 				ErrorFallback: ({ error }) => {
+		// 					throw error
+		// 				},
+		// 			}}
+		// 		>
+		// 			<div data-testid="canvas-1" />
+		// 		</TldrawEditor>
+		// 	)
+		// ).toThrowErrorMatchingInlineSnapshot(
+		// 	`"Editor and store have different shapes: \\"draw\\" was passed into the editor but not the schema"`
+		// )
+
+		// 	expect(() =>
+		// 		render(
+		// 			<TldrawEditor
+		// 				store={createTLStore({ shapeUtils: [GroupShapeUtil] })}
+		// 				autoFocus
+		// 				components={{
+		// 					ErrorFallback: ({ error }) => {
+		// 						throw error
+		// 					},
+		// 				}}
+		// 			>
+		// 				<div data-testid="canvas-1" />
+		// 			</TldrawEditor>
+		// 		)
+		// 	).toThrowErrorMatchingInlineSnapshot(
+		// 		`"Editor and store have different shapes: \\"draw\\" is present in the store schema but not provided to the editor"`
+		// 	)
+		spy.mockRestore()
+	})
+
+	it('Accepts fresh versions of store and calls `onMount` for each one', async () => {
+		const initialStore = createTLStore({ shapeUtils: [] })
+		const onMount = jest.fn()
+		const rendered = render(
+			<TldrawEditor
+				initialState="select"
+				tools={defaultTools}
+				store={initialStore}
+				onMount={onMount}
+				autoFocus
+			>
+				<div data-testid="canvas-1" />
+			</TldrawEditor>
+		)
+		await screen.findByTestId('canvas-1')
+		const initialEditor = onMount.mock.lastCall[0]
+		jest.spyOn(initialEditor, 'dispose')
+		expect(initialEditor.store).toBe(initialStore)
+		// re-render with the same store:
+		rendered.rerender(
+			<TldrawEditor
+				tools={defaultTools}
+				initialState="select"
+				store={initialStore}
+				onMount={onMount}
+				autoFocus
+			>
+				<div data-testid="canvas-2" />
+			</TldrawEditor>
+		)
+		await screen.findByTestId('canvas-2')
+		// not called again:
+		expect(onMount).toHaveBeenCalledTimes(1)
+		// re-render with a new store:
+		const newStore = createTLStore({ shapeUtils: [] })
+		rendered.rerender(
+			<TldrawEditor
+				tools={defaultTools}
+				initialState="select"
+				store={newStore}
+				onMount={onMount}
+				autoFocus
+			>
+				<div data-testid="canvas-3" />
+			</TldrawEditor>
+		)
+		await screen.findByTestId('canvas-3')
+		expect(initialEditor.dispose).toHaveBeenCalledTimes(1)
+		expect(onMount).toHaveBeenCalledTimes(2)
+		expect(onMount.mock.lastCall[0].store).toBe(newStore)
+	})
+
+	it('Renders the canvas and shapes', async () => {
+		let editor = {} as Editor
+		await act(async () =>
+			render(
+				<TldrawEditor
+					shapeUtils={[GeoShapeUtil]}
+					initialState="select"
+					tools={defaultTools}
+					autoFocus
+					onMount={(editorApp) => {
+						editor = editorApp
+					}}
+				>
+					<Canvas />
+					<div data-testid="canvas-1" />
+				</TldrawEditor>
+			)
+		)
+		await screen.findByTestId('canvas-1')
+
+		expect(editor).toBeTruthy()
+		await act(async () => {
+			editor.updateInstanceState(
+				{ screenBounds: { x: 0, y: 0, w: 1080, h: 720 } },
+				{ ephemeral: true, squashing: true }
+			)
+		})
+
+		const id = createShapeId()
+
+		await act(async () => {
+			editor.createShapes([
+				{
+					id,
+					type: 'geo',
+					props: { w: 100, h: 100 },
+				},
+			])
+		})
+
+		// Does the shape exist?
+		expect(editor.getShape(id)).toMatchObject({
+			id,
+			type: 'geo',
+			x: 0,
+			y: 0,
+			opacity: 1,
+			props: { geo: 'rectangle', w: 100, h: 100 },
+		})
+
+		// Is the shape's component rendering?
+		expect(document.querySelectorAll('.tl-shape')).toHaveLength(1)
+
+		expect(document.querySelectorAll('.tl-shape-indicator')).toHaveLength(0)
+
+		// Select the shape
+		await act(async () => editor.select(id))
+
+		expect(editor.getSelectedShapeIds().length).toBe(1)
+
+		// Is the shape's component rendering?
+		expect(document.querySelectorAll('.tl-shape-indicator')).toHaveLength(1)
+
+		// Select the eraser tool...
+		await act(async () => editor.setCurrentTool('eraser'))
+
+		// Is the editor's current tool correct?
+		expect(editor.getCurrentToolId()).toBe('eraser')
+	})
+})
+
+describe('Custom shapes', () => {
+	type CardShape = TLBaseShape<
+		'card',
+		{
+			w: number
+			h: number
+		}
+	>
+
+	class CardUtil extends BaseBoxShapeUtil<CardShape> {
+		static override type = 'card' as const
+
+		override isAspectRatioLocked = (_shape: CardShape) => false
+		override canResize = (_shape: CardShape) => true
+		override canBind = (_shape: CardShape) => true
+
+		override getDefaultProps(): CardShape['props'] {
+			return {
+				w: 300,
+				h: 300,
+			}
+		}
+
+		component(shape: CardShape) {
+			return (
+				<HTMLContainer
+					id={shape.id}
+					data-testid="card-shape"
+					style={{
+						border: '1px solid black',
+						display: 'flex',
+						alignItems: 'center',
+						justifyContent: 'center',
+						pointerEvents: 'all',
+					}}
+				>
+					{shape.props.w.toFixed()}x{shape.props.h.toFixed()}
+				</HTMLContainer>
+			)
+		}
+
+		indicator(shape: CardShape) {
+			return <rect data-testid="card-indicator" width={shape.props.w} height={shape.props.h} />
+		}
+	}
+
+	class CardTool extends BaseBoxShapeTool {
+		static override id = 'card'
+		static override initial = 'idle'
+		override shapeType = 'card'
+	}
+
+	const tools = [CardTool]
+	const shapeUtils = [CardUtil]
+
+	it('Uses custom shapes', async () => {
+		let editor = {} as Editor
+		render(
+			<TldrawEditor
+				shapeUtils={shapeUtils}
+				tools={[...defaultTools, ...tools]}
+				autoFocus
+				initialState="select"
+				onMount={(editorApp) => {
+					editor = editorApp
+				}}
+			>
+				<Canvas />
+				<div data-testid="canvas-1" />
+			</TldrawEditor>
+		)
+		await screen.findByTestId('canvas-1')
+
+		expect(editor).toBeTruthy()
+		await act(async () => {
+			editor.updateInstanceState(
+				{ screenBounds: { x: 0, y: 0, w: 1080, h: 720 } },
+				{ ephemeral: true, squashing: true }
+			)
+		})
+
+		expect(editor.shapeUtils.card).toBeTruthy()
+		checkAllShapes(editor, ['group', 'card'])
+
+		const id = createShapeId()
+
+		await act(async () => {
+			editor.createShapes([
+				{
+					id,
+					type: 'card',
+					props: { w: 100, h: 100 },
+				},
+			])
+		})
+
+		// Does the shape exist?
+		expect(editor.getShape(id)).toMatchObject({
+			id,
+			type: 'card',
+			x: 0,
+			y: 0,
+			opacity: 1,
+			props: { w: 100, h: 100 },
+		})
+
+		// Is the shape's component rendering?
+		expect(await screen.findByTestId('card-shape')).toBeTruthy()
+
+		// Select the shape
+		await act(async () => editor.select(id))
+
+		// Is the shape's component rendering?
+		expect(await screen.findByTestId('card-indicator')).toBeTruthy()
+
+		// Select the tool...
+		await act(async () => editor.setCurrentTool('card'))
+
+		// Is the editor's current tool correct?
+		expect(editor.getCurrentToolId()).toBe('card')
+	})
+})

package/src/test/ZoomTool.test.ts

@@ -0,0 +1,210 @@
+import { createShapeId } from '@bigbluebutton/editor'
+import { TestEditor } from './TestEditor'
+
+let editor: TestEditor
+
+const ids = {
+	box1: createShapeId('box1'),
+}
+
+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 } }])
+})
+
+describe('TLSelectTool.Zooming', () => {
+	it('Correctly enters and exists zooming mode when pressing and relasing z', () => {
+		editor.expectToBeIn('select.idle')
+		editor.keyDown('z')
+		editor.expectToBeIn('zoom.idle')
+		editor.keyUp('z')
+		editor.expectToBeIn('select.idle')
+	})
+
+	it('Correctly enters and exists zooming mode when holding alt and pressing and relasing z', () => {
+		editor.expectToBeIn('select.idle')
+		editor.keyDown('Alt')
+		editor.keyDown('z')
+		editor.expectToBeIn('zoom.idle')
+		editor.keyUp('z')
+		editor.expectToBeIn('select.idle')
+		editor.keyUp('Alt')
+		editor.expectToBeIn('select.idle')
+	})
+
+	it('Correctly zooms in when clicking', () => {
+		editor.keyDown('z')
+		expect(editor.getZoomLevel()).toBe(1)
+		expect(editor.getViewportPageBounds()).toMatchObject({ x: -0, y: -0, w: 1080, h: 720 })
+		expect(editor.getViewportPageCenter()).toMatchObject({ x: 540, y: 360 })
+		editor.click()
+		editor.expectToBeIn('zoom.idle')
+		jest.advanceTimersByTime(300)
+		expect(editor.getZoomLevel()).toBe(2)
+	})
+
+	it('Correctly zooms out when clicking while pressing Alt', () => {
+		editor.keyDown('z')
+		editor.keyDown('Alt')
+		expect(editor.getZoomLevel()).toBe(1)
+		expect(editor.getViewportPageBounds()).toMatchObject({ x: -0, y: -0, w: 1080, h: 720 })
+		expect(editor.getViewportPageCenter()).toMatchObject({ x: 540, y: 360 })
+		editor.click()
+		jest.advanceTimersByTime(300)
+		expect(editor.getZoomLevel()).toBe(0.5)
+	})
+
+	it('Cancels while pointing', () => {
+		editor.keyDown('z')
+		editor.expectToBeIn('zoom.idle')
+		editor.pointerDown()
+		editor.expectToBeIn('zoom.pointing')
+		editor.cancel()
+		editor.expectToBeIn('zoom.idle')
+		editor.pointerUp()
+		expect(editor.getZoomLevel()).toBe(1)
+	})
+
+	it('Cancels while brushing', () => {
+		editor.keyDown('z')
+		editor.expectToBeIn('zoom.idle')
+		editor.pointerDown(0, 0)
+		editor.expectToBeIn('zoom.pointing')
+		editor.pointerMove(10, 10)
+		editor.expectToBeIn('zoom.zoom_brushing')
+		editor.cancel()
+		editor.expectToBeIn('zoom.idle')
+		editor.pointerUp()
+		expect(editor.getZoomLevel()).toBe(1)
+	})
+
+	it('Interrupts while pointing', () => {
+		editor.keyDown('z')
+		editor.expectToBeIn('zoom.idle')
+		editor.pointerDown()
+		editor.expectToBeIn('zoom.pointing')
+		editor.interrupt()
+		editor.expectToBeIn('select.idle')
+		editor.pointerUp()
+		expect(editor.getZoomLevel()).toBe(1)
+	})
+
+	it('Interrupts while brushing', () => {
+		editor.keyDown('z')
+		editor.expectToBeIn('zoom.idle')
+		editor.pointerDown(0, 0)
+		editor.expectToBeIn('zoom.pointing')
+		editor.pointerMove(10, 10)
+		editor.expectToBeIn('zoom.zoom_brushing')
+		editor.interrupt()
+		editor.expectToBeIn('select.idle')
+		editor.pointerUp()
+		expect(editor.getZoomLevel()).toBe(1)
+	})
+
+	it('When the dragged area is small it zooms in instead of zooming to the area', () => {
+		const originalCenter = { x: 540, y: 360 }
+		const originalPageBounds = { x: -0, y: -0, w: 1080, h: 720 }
+		const change = 6
+		expect(editor.getZoomLevel()).toBe(1)
+		expect(editor.getViewportPageBounds()).toMatchObject(originalPageBounds)
+		expect(editor.getViewportPageCenter()).toMatchObject(originalCenter)
+		editor.keyDown('z')
+		editor.expectToBeIn('zoom.idle')
+		editor.pointerDown(0, 0)
+		editor.expectToBeIn('zoom.pointing')
+		editor.pointerMove(change, change)
+		editor.expectToBeIn('zoom.zoom_brushing')
+		editor.pointerUp(change, change)
+		editor.expectToBeIn('zoom.idle')
+		jest.advanceTimersByTime(300)
+		expect(editor.getZoomLevel()).toBe(2)
+		expect(editor.getViewportPageBounds()).toMatchObject({
+			x: change / 2,
+			y: change / 2,
+			w: originalPageBounds.w / 2,
+			h: originalPageBounds.h / 2,
+		})
+		expect(editor.getViewportPageCenter()).toMatchObject({
+			x: (originalCenter.x + change) / 2,
+			y: (originalCenter.y + change) / 2,
+		})
+	})
+
+	it('Correctly zooms in when dragging a zoom area', () => {
+		const newBoundsWidth = 540
+		const newBoundsHeight = 360
+		const newBoundsX = 100
+		const newBoundsY = 200
+		editor.expectToBeIn('select.idle')
+		expect(editor.getZoomLevel()).toBe(1)
+		expect(editor.getViewportPageBounds()).toMatchObject({ x: -0, y: -0, w: 1080, h: 720 })
+		expect(editor.getViewportPageCenter()).toMatchObject({ x: 540, y: 360 })
+		editor.keyDown('z')
+		editor.expectToBeIn('zoom.idle')
+		editor.pointerDown(newBoundsX, newBoundsY)
+		editor.pointerMove(newBoundsX + newBoundsWidth, newBoundsY + newBoundsHeight)
+		expect(editor.getInstanceState().zoomBrush).toMatchObject({
+			x: newBoundsX,
+			y: newBoundsY,
+			w: newBoundsWidth,
+			h: newBoundsHeight,
+		})
+		editor.pointerUp(newBoundsX + newBoundsWidth, newBoundsY + newBoundsHeight)
+		jest.advanceTimersByTime(300)
+		expect(editor.getZoomLevel()).toBeCloseTo(1.2888)
+		expect(editor.getViewportPageBounds()).toMatchObject({
+			x: -48.9655172413793,
+			y: 100.68965517241382,
+			w: 837.9310344827586,
+			h: 558.6206896551723,
+		})
+		expect(editor.getViewportPageCenter()).toMatchObject({
+			x: newBoundsX + newBoundsWidth / 2,
+			y: newBoundsY + newBoundsHeight / 2,
+		})
+		editor.expectToBeIn('zoom.idle')
+	})
+
+	it('Correctly zooms out when dragging a zoom area and holding Alt key', () => {
+		const newBoundsWidth = 1080
+		const newBoundsHeight = 720
+		const newBoundsX = 100
+		const newBoundsY = 200
+		editor.expectToBeIn('select.idle')
+		const originalZoomLevel = 1
+		expect(editor.getZoomLevel()).toBe(originalZoomLevel)
+		expect(editor.getViewportPageBounds()).toMatchObject({ x: -0, y: -0, w: 1080, h: 720 })
+		expect(editor.getViewportPageCenter()).toMatchObject({ x: 540, y: 360 })
+		editor.keyDown('z')
+		editor.expectToBeIn('zoom.idle')
+		editor.keyDown('Alt')
+		editor.pointerDown(newBoundsX, newBoundsY)
+		editor.pointerMove(newBoundsX + newBoundsWidth, newBoundsY + newBoundsHeight)
+		expect(editor.getInstanceState().zoomBrush).toMatchObject({
+			x: newBoundsX,
+			y: newBoundsY,
+			w: newBoundsWidth,
+			h: newBoundsHeight,
+		})
+		editor.pointerUp()
+		jest.advanceTimersByTime(500)
+		expect(editor.getZoomLevel()).toBeCloseTo(originalZoomLevel / 2)
+		expect(editor.getViewportPageBounds()).toMatchObject({
+			x: -440,
+			y: -160,
+			w: 2160,
+			h: 1440,
+		})
+		expect(editor.getViewportPageCenter()).toMatchObject({
+			x: newBoundsX + newBoundsWidth / 2,
+			y: newBoundsY + newBoundsHeight / 2,
+		})
+		editor.expectToBeIn('zoom.idle')
+	})
+})

package/src/test/__snapshots__/groups.test.ts.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`creating new shapes pencil lines will reisze the group appropriately if the new shape changes the group bounds: box shape after second resize 1`] = `
+Box2d {
+  "h": 40,
+  "w": 40,
+  "x": -20,
+  "y": -20,
+}
+`;
+
+exports[`creating new shapes pencil lines will reisze the group appropriately if the new shape changes the group bounds: group shape after second resize 1`] = `
+Box2d {
+  "h": 120,
+  "w": 120,
+  "x": -20,
+  "y": -20,
+}
+`;
+
+exports[`creating new shapes pencil lines will reisze the group appropriately if the new shape changes the group bounds: group with line shape 1`] = `
+Box2d {
+  "h": 110,
+  "w": 110,
+  "x": -10,
+  "y": -10,
+}
+`;
+
+exports[`creating new shapes pencil lines works if the shape drawing begins outside of the current group bounds: box shape after resize 1`] = `
+Box2d {
+  "h": 50,
+  "w": 50,
+  "x": -100,
+  "y": -100,
+}
+`;
+
+exports[`creating new shapes pencil lines works if the shape drawing begins outside of the current group bounds: group with line 1`] = `
+Box2d {
+  "h": 200,
+  "w": 200,
+  "x": -100,
+  "y": -100,
+}
+`;

package/src/test/__snapshots__/resizing.test.ts.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`When resizing a shape with children Resizes a rotated draw shape: draw shape after rotating 1`] = `
+Object {
+  "id": "shape:lineA",
+  "index": "a3",
+  "isLocked": false,
+  "meta": Object {},
+  "opacity": 1,
+  "parentId": "shape:boxA",
+  "props": Object {
+    "color": "black",
+    "dash": "draw",
+    "fill": "none",
+    "isClosed": false,
+    "isComplete": false,
+    "isPen": false,
+    "segments": Array [
+      Object {
+        "points": Array [
+          Object {
+            "x": 0,
+            "y": 0,
+            "z": 0.5,
+          },
+          Object {
+            "x": 110,
+            "y": 110,
+            "z": 0.5,
+          },
+        ],
+        "type": "free",
+      },
+    ],
+    "size": "m",
+  },
+  "rotation": 3.141592653589793,
+  "type": "draw",
+  "typeName": "shape",
+  "x": 100,
+  "y": 100,
+}
+`;