@bigbluebutton/tldraw 2.0.0-alpha.19

package/src/test/shapeIdsInCurrentPage.test.ts

@@ -0,0 +1,75 @@
+import { createShapeId, PageRecordType } from '@bigbluebutton/editor'
+import { TestEditor } from './TestEditor'
+
+let editor = {} as TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+
+const ids = {
+	box1: createShapeId('box1'),
+	box2: createShapeId('box2'),
+	box3: createShapeId('box3'),
+
+	box4: createShapeId('box4'),
+	box5: createShapeId('box5'),
+	box6: createShapeId('box6'),
+}
+
+describe('shapeIdsInCurrentPage', () => {
+	it('keeps the shape ids in the current page', () => {
+		expect(new Set(editor.getCurrentPageShapeIds())).toEqual(new Set([]))
+		editor.createShapes([{ type: 'geo', id: ids.box1 }])
+
+		expect(new Set(editor.getCurrentPageShapeIds())).toEqual(new Set([ids.box1]))
+
+		editor.createShapes([{ type: 'geo', id: ids.box2 }])
+
+		expect(new Set(editor.getCurrentPageShapeIds())).toEqual(new Set([ids.box1, ids.box2]))
+
+		editor.createShapes([{ type: 'geo', id: ids.box3 }])
+
+		expect(new Set(editor.getCurrentPageShapeIds())).toEqual(
+			new Set([ids.box1, ids.box2, ids.box3])
+		)
+
+		editor.deleteShapes([ids.box2])
+
+		expect(new Set(editor.getCurrentPageShapeIds())).toEqual(new Set([ids.box1, ids.box3]))
+
+		editor.deleteShapes([ids.box1])
+
+		expect(new Set(editor.getCurrentPageShapeIds())).toEqual(new Set([ids.box3]))
+
+		editor.deleteShapes([ids.box3])
+
+		expect(new Set(editor.getCurrentPageShapeIds())).toEqual(new Set([]))
+	})
+
+	it('changes when the current page changes', () => {
+		editor.createShapes([
+			{ type: 'geo', id: ids.box1 },
+			{ type: 'geo', id: ids.box2 },
+			{ type: 'geo', id: ids.box3 },
+		])
+		const id = PageRecordType.createId('page2')
+		editor.createPage({ name: 'New Page 2', id })
+		editor.setCurrentPage(id)
+		editor.createShapes([
+			{ type: 'geo', id: ids.box4 },
+			{ type: 'geo', id: ids.box5 },
+			{ type: 'geo', id: ids.box6 },
+		])
+
+		expect(new Set(editor.getCurrentPageShapeIds())).toEqual(
+			new Set([ids.box4, ids.box5, ids.box6])
+		)
+
+		editor.setCurrentPage(editor.getPages()[0].id)
+
+		expect(new Set(editor.getCurrentPageShapeIds())).toEqual(
+			new Set([ids.box1, ids.box2, ids.box3])
+		)
+	})
+})

package/src/test/shapeutils.test.ts

@@ -0,0 +1,204 @@
+import { createShapeId, TLFrameShape, TLGeoShape } from '@bigbluebutton/editor'
+import { TestEditor } from './TestEditor'
+
+let editor: TestEditor
+
+afterEach(() => {
+	editor?.dispose()
+})
+
+const ids = {
+	frame1: createShapeId('frame1'),
+	box1: createShapeId('box1'),
+	box2: createShapeId('box2'),
+}
+
+beforeEach(() => {
+	editor = new TestEditor()
+
+	editor.createShapes([
+		{
+			id: ids.frame1,
+			type: 'frame',
+			x: 10,
+			y: 10,
+			props: {
+				w: 100,
+				h: 100,
+			},
+		},
+		{
+			id: ids.box1,
+			type: 'geo',
+			x: 200,
+			y: 200,
+			props: {
+				w: 100,
+				h: 100,
+			},
+		},
+		{
+			id: ids.box2,
+			type: 'geo',
+			parentId: ids.frame1,
+			x: 250,
+			y: 250,
+			props: {
+				w: 100,
+				h: 100,
+			},
+		},
+	])
+})
+
+describe('When interacting with a shape...', () => {
+	it('fires rotate events', () => {
+		// Set start / change / end events on only the geo shape
+		const util = editor.getShapeUtil<TLFrameShape>('frame')
+
+		const fnStart = jest.fn()
+		util.onRotateStart = fnStart
+
+		const fnChange = jest.fn()
+		util.onRotate = fnChange
+
+		const fnEnd = jest.fn()
+		util.onRotateEnd = fnEnd
+
+		editor.selectAll()
+		expect(editor.getSelectedShapeIds()).toMatchObject([ids.frame1, ids.box1])
+
+		editor
+			.pointerDown(300, 300, {
+				target: 'selection',
+				handle: 'bottom_right_rotate',
+			})
+			.pointerMove(200, 200)
+			.pointerUp(200, 200)
+
+		// Once on start (for frame only)
+		expect(fnStart).toHaveBeenCalledTimes(1)
+
+		// Once on start, once during the move
+		expect(fnChange).toHaveBeenCalledTimes(2)
+
+		// Once on end
+		expect(fnEnd).toHaveBeenCalledTimes(1)
+	})
+
+	it('cleans up events', () => {
+		const util = editor.getShapeUtil<TLGeoShape>('geo')
+		expect(util.onRotateStart).toBeUndefined()
+	})
+
+	it('fires double click handler event', () => {
+		const util = editor.getShapeUtil<TLGeoShape>('geo')
+
+		const fnStart = jest.fn()
+		util.onDoubleClick = fnStart
+
+		editor.doubleClick(50, 50, ids.box2)
+
+		expect(fnStart).toHaveBeenCalledTimes(1)
+	})
+
+	it('Fires resisizing events', () => {
+		const util = editor.getShapeUtil<TLFrameShape>('frame')
+
+		const fnStart = jest.fn()
+		util.onResizeStart = fnStart
+
+		const fnChange = jest.fn()
+		util.onResize = fnChange
+
+		const fnEnd = jest.fn()
+		util.onResizeEnd = fnEnd
+
+		editor.selectAll()
+		expect(editor.getSelectedShapeIds()).toMatchObject([ids.frame1, ids.box1])
+
+		editor.pointerDown(300, 300, {
+			target: 'selection',
+			handle: 'bottom_right',
+		})
+
+		editor.expectToBeIn('select.pointing_resize_handle')
+		editor.pointerMove(200, 200)
+		editor.expectToBeIn('select.resizing')
+		editor.pointerMove(200, 210)
+		editor.pointerUp(200, 210)
+		editor.expectToBeIn('select.idle')
+
+		// Once on start (for frame only)
+		expect(fnStart).toHaveBeenCalledTimes(1)
+
+		// Once on start, once during the resize
+		expect(fnChange).toHaveBeenCalledTimes(2)
+
+		// Once on end
+		expect(fnEnd).toHaveBeenCalledTimes(1)
+	})
+
+	it('Fires translating events', () => {
+		const util = editor.getShapeUtil<TLFrameShape>('frame')
+
+		const fnStart = jest.fn()
+		util.onTranslateStart = fnStart
+
+		const fnChange = jest.fn()
+		util.onTranslate = fnChange
+
+		const fnEnd = jest.fn()
+		util.onTranslateEnd = fnEnd
+
+		editor.selectAll()
+		expect(editor.getSelectedShapeIds()).toMatchObject([ids.frame1, ids.box1])
+
+		// Translate the shapes...
+		editor.pointerDown(50, 50, ids.box1).pointerMove(50, 40).pointerUp(50, 40)
+
+		// Once on start for frame
+		expect(fnStart).toHaveBeenCalledTimes(1)
+
+		// Once on start, once during the move
+		expect(fnChange).toHaveBeenCalledTimes(2)
+
+		// Once on end
+		expect(fnEnd).toHaveBeenCalledTimes(1)
+	})
+
+	it('Uses the shape utils onClick handler', () => {
+		const util = editor.getShapeUtil<TLFrameShape>('frame')
+
+		const fnClick = jest.fn()
+		util.onClick = fnClick
+
+		editor.pointerDown(50, 50, ids.frame1)
+		editor.pointerUp(50, 50, ids.frame1)
+
+		// If a shape has an onClick handler, and if the handler returns nothing,
+		// then normal selection rules should apply.
+		expect(editor.getSelectedShapeIds().length).toBe(1)
+	})
+
+	it('Uses the shape utils onClick handler', () => {
+		const util = editor.getShapeUtil<TLFrameShape>('frame')
+
+		const fnClick = jest.fn((shape: any) => {
+			return {
+				...shape,
+				x: 100,
+				y: 100,
+			}
+		})
+
+		util.onClick = fnClick
+
+		editor.pointerDown(50, 50, ids.frame1)
+		editor.pointerUp(50, 50, ids.frame1)
+
+		// If a shape has an onClick handler, and it returns something, then
+		// it should not be selected.
+		expect(editor.getSelectedShapeIds().length).toBe(0)
+	})
+})

package/src/test/spacebarPanning.test.ts

@@ -0,0 +1,50 @@
+import { createShapeId } from '@bigbluebutton/editor'
+import { TestEditor } from './TestEditor'
+
+let editor: TestEditor
+
+const ids = {
+	box1: createShapeId('box1'),
+}
+
+beforeEach(() => {
+	editor = new TestEditor()
+	editor.createShapes([
+		{ id: ids.box1, type: 'geo', x: 100, y: 100, props: { fill: 'solid', w: 100, h: 100 } },
+	])
+})
+
+it('Sets cursor and state correctly', () => {
+	expect(editor.getInstanceState().cursor.type).toBe('default')
+	expect(editor.inputs.isPanning).toBe(false)
+	editor.keyDown(' ')
+	expect(editor.inputs.isPanning).toBe(true)
+	expect(editor.getInstanceState().cursor.type).toBe('grab')
+	editor.pointerDown(0, 0)
+	expect(editor.getInstanceState().cursor.type).toBe('grabbing')
+	editor.pointerUp(0, 0)
+	expect(editor.getInstanceState().cursor.type).toBe('grab')
+	editor.keyUp(' ')
+	expect(editor.inputs.isPanning).toBe(false)
+	expect(editor.getInstanceState().cursor.type).toBe('default')
+})
+
+it('When holding spacebar and clicking and dragging, it pans the camera', () => {
+	editor.keyDown(' ')
+	editor.pointerDown(0, 0)
+	editor.pointerMove(100, 100)
+	editor.expectCameraToBe(100, 100, 1)
+	editor.keyUp(' ')
+})
+
+it('When holding spacebar, it updates cursor and does not send events to the state or change statecharts current active state', () => {
+	editor.pointerDown(150, 150, { target: 'canvas' })
+	editor.pointerMove(100, 100)
+	editor.expectShapeToMatch({ id: ids.box1, x: 50, y: 50 })
+
+	editor.keyDown(' ')
+	editor.pointerMove(200, 200)
+	editor.expectCameraToBe(100, 100, 1)
+	editor.expectShapeToMatch({ id: ids.box1, x: 50, y: 50 })
+	editor.keyUp(' ')
+})

package/src/test/styles2.test.tsx

@@ -0,0 +1,199 @@
+/// <reference types="react" />
+import {
+	DefaultColorStyle,
+	ReadonlySharedStyleMap,
+	SharedStyle,
+	TLGeoShape,
+	TLGroupShape,
+} from '@bigbluebutton/editor'
+import { TestEditor, createDefaultShapes, defaultShapesIds } from './TestEditor'
+import { TL } from './test-jsx'
+
+let editor: TestEditor
+
+function asPlainObject(styles: ReadonlySharedStyleMap | null) {
+	if (!styles) return null
+	const object: Record<string, SharedStyle<unknown>> = {}
+	for (const [key, value] of styles) {
+		object[key.id] = value
+	}
+	return object
+}
+
+beforeEach(() => {
+	editor = new TestEditor()
+	editor.createShapes(createDefaultShapes())
+	editor.reparentShapes([defaultShapesIds.ellipse1], editor.getCurrentPageId())
+})
+
+describe('Editor.styles', () => {
+	it('should return empty if nothing is selected', () => {
+		editor.selectNone()
+		expect(asPlainObject(editor.getSharedStyles())).toStrictEqual({})
+	})
+
+	it('should return styles for a single shape', () => {
+		editor.select(defaultShapesIds.box1)
+		expect(asPlainObject(editor.getSharedStyles())).toStrictEqual({
+			'tldraw:horizontalAlign': { type: 'shared', value: 'middle' },
+			'tldraw:labelColor': { type: 'shared', value: 'black' },
+			'tldraw:color': { type: 'shared', value: 'black' },
+			'tldraw:dash': { type: 'shared', value: 'draw' },
+			'tldraw:fill': { type: 'shared', value: 'none' },
+			'tldraw:size': { type: 'shared', value: 'm' },
+			'tldraw:font': { type: 'shared', value: 'draw' },
+			'tldraw:geo': { type: 'shared', value: 'rectangle' },
+			'tldraw:verticalAlign': { type: 'shared', value: 'middle' },
+		})
+	})
+
+	it('should return styles for two matching shapes', () => {
+		editor.select(defaultShapesIds.box1, defaultShapesIds.box2)
+		expect(asPlainObject(editor.getSharedStyles())).toStrictEqual({
+			'tldraw:horizontalAlign': { type: 'shared', value: 'middle' },
+			'tldraw:labelColor': { type: 'shared', value: 'black' },
+			'tldraw:color': { type: 'shared', value: 'black' },
+			'tldraw:dash': { type: 'shared', value: 'draw' },
+			'tldraw:fill': { type: 'shared', value: 'none' },
+			'tldraw:size': { type: 'shared', value: 'm' },
+			'tldraw:font': { type: 'shared', value: 'draw' },
+			'tldraw:geo': { type: 'shared', value: 'rectangle' },
+			'tldraw:verticalAlign': { type: 'shared', value: 'middle' },
+		})
+	})
+
+	it('should return mixed styles for shapes that have mixed values', () => {
+		editor.updateShapes([
+			{
+				id: defaultShapesIds.box1,
+				type: 'geo',
+				props: { h: 200, w: 200, color: 'red', dash: 'solid' },
+			},
+		])
+
+		editor.select(defaultShapesIds.box1, defaultShapesIds.box2)
+
+		expect(asPlainObject(editor.getSharedStyles())).toStrictEqual({
+			'tldraw:horizontalAlign': { type: 'shared', value: 'middle' },
+			'tldraw:labelColor': { type: 'shared', value: 'black' },
+			'tldraw:color': { type: 'mixed' },
+			'tldraw:dash': { type: 'mixed' },
+			'tldraw:fill': { type: 'shared', value: 'none' },
+			'tldraw:size': { type: 'shared', value: 'm' },
+			'tldraw:font': { type: 'shared', value: 'draw' },
+			'tldraw:geo': { type: 'shared', value: 'rectangle' },
+			'tldraw:verticalAlign': { type: 'shared', value: 'middle' },
+		})
+	})
+
+	it('should return mixed for all mixed styles', () => {
+		editor.updateShapes([
+			{
+				id: defaultShapesIds.box1,
+				type: 'geo',
+				props: { h: 200, w: 200, color: 'red', dash: 'solid' },
+			},
+			{
+				id: defaultShapesIds.box2,
+				type: 'geo',
+				props: { size: 'l', fill: 'pattern', font: 'mono' },
+			},
+			{
+				id: defaultShapesIds.ellipse1,
+				type: 'geo',
+				props: {
+					align: 'start',
+					text: 'hello world this is a long sentence that should wrap',
+					w: 100,
+					url: 'https://aol.com',
+					verticalAlign: 'start',
+				},
+			},
+		])
+
+		editor.selectAll()
+
+		expect(asPlainObject(editor.getSharedStyles())).toStrictEqual({
+			'tldraw:color': { type: 'mixed' },
+			'tldraw:dash': { type: 'mixed' },
+			'tldraw:fill': { type: 'mixed' },
+			'tldraw:font': { type: 'mixed' },
+			'tldraw:geo': { type: 'mixed' },
+			'tldraw:horizontalAlign': { type: 'mixed' },
+			'tldraw:labelColor': { type: 'shared', value: 'black' },
+			'tldraw:size': { type: 'mixed' },
+			'tldraw:verticalAlign': { type: 'mixed' },
+		})
+	})
+
+	it('should return the same styles object if nothing relevant changes', () => {
+		editor.select(defaultShapesIds.box1, defaultShapesIds.box2)
+		const initialStyles = editor.getSharedStyles()
+
+		// update position of one of the shapes - not a style prop, so maps to same styles
+		editor.updateShapes([
+			{
+				id: defaultShapesIds.box1,
+				type: 'geo',
+				x: 1000,
+				y: 1000,
+			},
+		])
+
+		expect(editor.getSharedStyles()).toBe(initialStyles)
+	})
+})
+
+describe('Editor.setStyle', () => {
+	it('should set style for selected shapes', () => {
+		const ids = editor.createShapesFromJsx([
+			<TL.geo ref="A" x={0} y={0} color="blue" />,
+			<TL.geo ref="B" x={0} y={0} color="green" />,
+		])
+
+		editor.setSelectedShapes([ids.A, ids.B])
+		editor.setStyleForSelectedShapes(DefaultColorStyle, 'red')
+		editor.setStyleForNextShapes(DefaultColorStyle, 'red')
+
+		expect(editor.getShape<TLGeoShape>(ids.A)!.props.color).toBe('red')
+		expect(editor.getShape<TLGeoShape>(ids.B)!.props.color).toBe('red')
+	})
+
+	it('should traverse into groups and set styles in their children', () => {
+		const ids = editor.createShapesFromJsx([
+			<TL.geo ref="boxA" x={0} y={0} />,
+			<TL.group ref="groupA" x={0} y={0}>
+				<TL.geo ref="boxB" x={0} y={0} />
+				<TL.group ref="groupB" x={0} y={0}>
+					<TL.geo ref="boxC" x={0} y={0} />
+					<TL.geo ref="boxD" x={0} y={0} />
+				</TL.group>
+			</TL.group>,
+		])
+
+		editor.setSelectedShapes([ids.groupA])
+		editor.setStyleForSelectedShapes(DefaultColorStyle, 'red')
+		editor.setStyleForNextShapes(DefaultColorStyle, 'red')
+
+		// a wasn't selected...
+		expect(editor.getShape<TLGeoShape>(ids.boxA)!.props.color).toBe('black')
+
+		// b, c, & d were within a selected group...
+		expect(editor.getShape<TLGeoShape>(ids.boxB)!.props.color).toBe('red')
+		expect(editor.getShape<TLGeoShape>(ids.boxC)!.props.color).toBe('red')
+		expect(editor.getShape<TLGeoShape>(ids.boxD)!.props.color).toBe('red')
+
+		// groups get skipped
+		expect(editor.getShape<TLGroupShape>(ids.groupA)!.props).not.toHaveProperty('color')
+		expect(editor.getShape<TLGroupShape>(ids.groupB)!.props).not.toHaveProperty('color')
+	})
+
+	it('stores styles on stylesForNextShape', () => {
+		editor.setStyleForSelectedShapes(DefaultColorStyle, 'red')
+		editor.setStyleForNextShapes(DefaultColorStyle, 'red')
+		expect(editor.getInstanceState().stylesForNextShape[DefaultColorStyle.id]).toBe('red')
+		editor.setStyleForSelectedShapes(DefaultColorStyle, 'green')
+		editor.setStyleForNextShapes(DefaultColorStyle, 'green')
+		expect(editor.getInstanceState().stylesForNextShape[DefaultColorStyle.id]).toBe('green')
+	})
+})

package/src/test/styles3.test.ts

@@ -0,0 +1,70 @@
+import { createShapeId } from '@bigbluebutton/editor'
+import { TestEditor } from './TestEditor'
+
+let editor: TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+
+afterEach(() => {
+	editor?.dispose()
+})
+
+it("When changing the style of a geo shape, if the text label is empty, don't measure it", () => {
+	const id = createShapeId()
+
+	editor.createShapes([
+		{
+			id,
+			type: 'geo',
+			props: {
+				text: '',
+				size: 's',
+				w: 5,
+				h: 5,
+			},
+		},
+	])
+
+	const boundsBefore = editor.getShapeGeometry(id).bounds
+
+	editor.updateShapes([
+		{
+			id,
+			type: 'geo',
+			props: { size: 'l' },
+		},
+	])
+
+	expect(editor.getShapeGeometry(id).bounds).toMatchObject(boundsBefore)
+})
+
+it('When changing the style of a geo shape, if the text label has text, measure it and possibly update the size', () => {
+	const id = createShapeId()
+
+	editor.createShapes([
+		{
+			id,
+			type: 'geo',
+			props: {
+				text: 'h',
+				size: 's',
+				w: 5,
+				h: 5,
+			},
+		},
+	])
+
+	const boundsBefore = editor.getShapeGeometry(id).bounds!
+
+	editor.updateShapes([
+		{
+			id,
+			type: 'geo',
+			props: { size: 'l' },
+		},
+	])
+
+	expect(editor.getShapeGeometry(id).bounds).not.toMatchObject(boundsBefore)
+})