@bigbluebutton/tldraw 2.0.0-alpha.24 → 2.0.0-alpha.25

package/src/lib/Tldraw.test.tsx

@@ -5,12 +5,10 @@ import { Tldraw } from './Tldraw'
 
 describe('<Tldraw />', () => {
 	it('Renders without crashing', async () => {
-		await act(async () =>
-			render(
-				<Tldraw>
-					<div data-testid="canvas-1" />
-				</Tldraw>
-			)
+		render(
+			<Tldraw>
+				<div data-testid="canvas-1" />
+			</Tldraw>
 		)
 
 		await screen.findByTestId('canvas-1')
@@ -27,7 +25,7 @@ describe('<Tldraw />', () => {
 			)
 		}
 
-		await act(async () => render(<TestComponent />))
+		render(<TestComponent />)
 		await screen.findByTestId('canvas-1')
 	})
 
@@ -57,12 +55,10 @@ describe('<Tldraw />', () => {
 			}
 		}
 
-		const rendered = await act(async () =>
-			render(
-				<Tldraw shapeUtils={[FakeShapeUtil1]}>
-					<div data-testid="canvas-1" />
-				</Tldraw>
-			)
+		const rendered = render(
+			<Tldraw shapeUtils={[FakeShapeUtil1]}>
+				<div data-testid="canvas-1" />
+			</Tldraw>
 		)
 		await screen.findByTestId('canvas-1')
 

package/src/lib/defaultShapeUtils.ts

@@ -9,6 +9,7 @@ import { HighlightShapeUtil } from './shapes/highlight/HighlightShapeUtil'
 import { ImageShapeUtil } from './shapes/image/ImageShapeUtil'
 import { LineShapeUtil } from './shapes/line/LineShapeUtil'
 import { NoteShapeUtil } from './shapes/note/NoteShapeUtil'
+import { PollShapeUtil } from './shapes/poll/PollShapeUtil'
 import { TextShapeUtil } from './shapes/text/TextShapeUtil'
 import { VideoShapeUtil } from './shapes/video/VideoShapeUtil'
 
@@ -26,4 +27,5 @@ export const defaultShapeUtils: TLAnyShapeUtilConstructor[] = [
 	EmbedShapeUtil,
 	ImageShapeUtil,
 	VideoShapeUtil,
+	PollShapeUtil,
 ]

package/src/lib/shapes/arrow/ArrowShapeUtil.tsx

@@ -518,7 +518,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 
 		const path = info.isStraight ? getSolidStraightArrowPath(info) : getSolidCurvedArrowPath(info)
 
-		let handlePath: null | JSX.Element = null
+		let handlePath: null | React.JSX.Element = null
 
 		if (onlySelectedShape === shape && shouldDisplayHandles) {
 			const sw = 2

package/src/lib/shapes/line/__snapshots__/LineShapeUtil.test.ts.snap

@@ -1,18 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Misc resizes: line shape after resize 1`] = `
-Object {
+{
   "id": "shape:line1",
   "index": "a1",
   "isLocked": false,
-  "meta": Object {},
+  "meta": {},
   "opacity": 1,
   "parentId": "page:page",
-  "props": Object {
+  "props": {
     "color": "black",
     "dash": "draw",
-    "handles": Object {
-      "end": Object {
+    "handles": {
+      "end": {
         "canBind": false,
         "id": "end",
         "index": "a2",
@@ -20,7 +20,7 @@ Object {
         "x": 100,
         "y": 700,
       },
-      "start": Object {
+      "start": {
         "canBind": false,
         "id": "start",
         "index": "a1",

package/src/lib/shapes/poll/PollShapeTool.tsx

@@ -0,0 +1,7 @@
+import { BaseBoxShapeTool } from '@bigbluebutton/editor'
+
+export class PollShapeTool extends BaseBoxShapeTool {
+	static override id = 'poll'
+	static override initial = 'idle'
+	override shapeType = 'poll'
+}

package/src/lib/shapes/poll/PollShapeUtil.tsx

@@ -0,0 +1,108 @@
+import {
+	HTMLContainer,
+	Rectangle2d,
+	ShapeUtil,
+	TLOnResizeHandler,
+	getDefaultColorTheme,
+	resizeBox,
+} from '@bigbluebutton/editor'
+
+import ChatPollContent from './components/poll-content'
+import { pollShapeMigrations } from './poll-shape-migrations'
+import { pollShapeProps } from './poll-shape-props'
+import { IPollShape } from './poll-shape-types'
+
+export class PollShapeUtil extends ShapeUtil<IPollShape> {
+	static override type = 'poll' as const
+
+	static override props = pollShapeProps
+
+	static override migrations = pollShapeMigrations
+
+	override isAspectRatioLocked = (_shape: IPollShape) => false
+
+	override canResize = (_shape: IPollShape) => true
+
+	override canBind = (_shape: IPollShape) => true
+
+	getDefaultProps(): IPollShape['props'] {
+		return {
+			w: 300,
+			h: 300,
+			color: 'black',
+			fill: 'white',
+			question: '',
+			numRespondents: 0,
+			numResponders: 0,
+			questionText: '',
+			questionType: '',
+			answers: [],
+		}
+	}
+
+	getGeometry(shape: IPollShape) {
+		return new Rectangle2d({
+			width: shape.props.w,
+			height: shape.props.h,
+			isFilled: true,
+		})
+	}
+
+	component(shape: IPollShape) {
+		const { bounds } = this.editor.getShapeGeometry(shape)
+		const theme = getDefaultColorTheme({
+			isDarkMode: this.editor.user.getIsDarkMode(),
+		})
+
+		// const contentRef = React.useRef<HTMLDivElement>(null)
+		const pollMetadata = JSON.stringify({
+			id: shape.id,
+			question: shape.props.question,
+			numRespondents: shape.props.numRespondents,
+			numResponders: shape.props.numResponders,
+			questionText: shape.props.questionText,
+			questionType: shape.props.questionType,
+			answers: shape.props.answers,
+		})
+
+		const adjustedHeight = shape.props.questionText.length > 0 ? bounds.height - 75 : bounds.height
+
+		return (
+			<HTMLContainer
+				id={shape.id}
+				style={{
+					border: '1px solid #8B9AA8',
+					borderRadius: '4px',
+					boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.20)',
+					display: 'flex',
+					flexDirection: 'column',
+					alignItems: 'center',
+					justifyContent: 'center',
+					pointerEvents: 'all',
+					backgroundColor: theme[shape.props.color].semi,
+					color: theme[shape.props.color].solid,
+				}}
+			>
+				<div
+					style={{
+						width: `${bounds.width}px`,
+						overflow: 'hidden',
+						position: 'relative',
+					}}
+				>
+					<ChatPollContent metadata={pollMetadata} height={adjustedHeight} />
+				</div>
+			</HTMLContainer>
+		)
+	}
+
+	indicator(shape: IPollShape) {
+		return <rect width={shape.props.w} height={shape.props.h} />
+	}
+
+	override onResize: TLOnResizeHandler<IPollShape> = (shape, info) => {
+		return resizeBox(shape, info)
+	}
+}
+
+export default PollShapeUtil

package/src/lib/shapes/poll/components/poll-content.tsx

@@ -0,0 +1,100 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react'
+import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'
+import { TLUiTranslationKey } from '../../../ui/hooks/useTranslation/TLUiTranslationKey'
+import Styled from './styles'
+
+const caseInsensitiveReducer = (acc: any[], item: { key: string; numVotes: number }) => {
+	const index = acc.findIndex((ans) => ans.key.toLowerCase() === item.key.toLowerCase())
+	if (index !== -1) {
+		if (acc[index].numVotes >= item.numVotes) acc[index].numVotes += item.numVotes
+		else {
+			const tempVotes = acc[index].numVotes
+			acc[index] = item
+			acc[index].numVotes += tempVotes
+		}
+	} else {
+		acc.push(item)
+	}
+	return acc
+}
+
+interface ChatPollContentProps {
+	metadata: string
+	height?: number
+}
+
+interface Metadata {
+	id: string
+	question: string
+	numRespondents: number
+	numResponders: number
+	questionText: string
+	questionType: string
+	answers: Array<Answers>
+}
+
+interface Answers {
+	key: string
+	numVotes: number
+	id: number
+}
+
+function assertAsMetadata(metadata: unknown): asserts metadata is Metadata {
+	if (typeof metadata !== 'object' || metadata === null) {
+		throw new Error('metadata is not an object')
+	}
+	if (typeof (metadata as Metadata).id !== 'string') {
+		throw new Error('metadata.id is not a string')
+	}
+	if (typeof (metadata as Metadata).numRespondents !== 'number') {
+		throw new Error('metadata.numRespondents is not a number')
+	}
+	if (typeof (metadata as Metadata).numResponders !== 'number') {
+		throw new Error('metadata.numResponders is not a number')
+	}
+	if (typeof (metadata as Metadata).questionText !== 'string') {
+		throw new Error('metadata.questionText is not a string')
+	}
+	if (typeof (metadata as Metadata).questionType !== 'string') {
+		throw new Error('metadata.questionType is not a string')
+	}
+	if (!Array.isArray((metadata as Metadata).answers)) {
+		throw new Error('metadata.answers is not an array')
+	}
+}
+
+const ChatPollContent: React.FC<ChatPollContentProps> = ({
+	metadata: string,
+	height = undefined,
+}) => {
+	const pollData = JSON.parse(string) as unknown
+	assertAsMetadata(pollData)
+
+	const answers = pollData.answers.reduce(caseInsensitiveReducer, [])
+
+	const translatedAnswers = answers.map((answer: Answers) => {
+		const translationKey = answer.key as TLUiTranslationKey
+		const pollAnswer = translationKey ? translationKey : answer.key
+		return {
+			...answer,
+			pollAnswer,
+		}
+	})
+
+	const useHeight = height || translatedAnswers.length * 50
+	return (
+		<Styled.PollWrapper data-test="chatPollMessageText">
+			<Styled.PollText>{pollData.questionText}</Styled.PollText>
+			<ResponsiveContainer width="90%" height={useHeight}>
+				<BarChart data={translatedAnswers} layout="vertical">
+					<XAxis type="number" />
+					<YAxis width={80} type="category" dataKey="pollAnswer" />
+					<Bar dataKey="numVotes" fill="#0C57A7" />
+				</BarChart>
+			</ResponsiveContainer>
+		</Styled.PollWrapper>
+	)
+}
+
+export default ChatPollContent

package/src/lib/shapes/poll/components/styles.ts

@@ -0,0 +1,21 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import styled from 'styled-components'
+
+export const PollText = styled.div`
+	margin-top: 0.5rem;
+	margin-bottom: 0.5rem;
+	font-size: 1.25rem;
+	font-weight: 500;
+	margin-left: 2.75rem;
+	color: var(--color-text, var(--color-gray, #4e5a66));
+	word-break: break-word;
+`
+
+export const PollWrapper = styled.div`
+	width: 100%;
+`
+
+export default {
+	PollText,
+	PollWrapper,
+}

package/src/lib/shapes/poll/poll-shape-migrations.ts

@@ -0,0 +1,23 @@
+import { defineMigrations } from '@bigbluebutton/editor'
+
+// Migrations for the custom poll shape (optional but very helpful)
+export const pollShapeMigrations = defineMigrations({
+	currentVersion: 1,
+	migrators: {
+		1: {
+			// example, removing a property from the shape
+			up(shape) {
+				const migratedUpShape = { ...shape }
+				delete migratedUpShape.somePropertyToRemove
+				return migratedUpShape
+			},
+			down(shape) {
+				const migratedDownShape = { ...shape }
+				migratedDownShape.somePropertyToRemove = 'some value'
+				return migratedDownShape
+			},
+		},
+	},
+})
+
+export default pollShapeMigrations

package/src/lib/shapes/poll/poll-shape-props.ts

@@ -0,0 +1,17 @@
+import { DefaultColorStyle, ShapeProps, T } from '@bigbluebutton/editor'
+import { IPollShape } from './poll-shape-types'
+
+export const pollShapeProps: ShapeProps<IPollShape> = {
+	w: T.number,
+	h: T.number,
+	color: DefaultColorStyle,
+	fill: T.string,
+	question: T.string,
+	numRespondents: T.number,
+	numResponders: T.number,
+	questionText: T.string,
+	questionType: T.string,
+	answers: T.any,
+}
+
+export default pollShapeProps

package/src/lib/shapes/poll/poll-shape-types.ts

@@ -0,0 +1,21 @@
+import { TLBaseShape, TLDefaultColorStyle } from '@bigbluebutton/editor'
+
+export type IPollShape = TLBaseShape<
+	'poll',
+	{
+		w: number
+		h: number
+		color: TLDefaultColorStyle
+		fill: string
+		question: string
+		numRespondents: number
+		numResponders: number
+		questionText: string
+		questionType: string
+		answers: Array<{
+			id: number
+			key: string
+			numVotes: number
+		}>
+	}
+>

package/src/lib/tools/HandTool/HandTool.ts

@@ -1,4 +1,4 @@
-import { EASINGS, StateNode, TLClickEvent } from '@bigbluebutton/editor'
+import { StateNode, TLClickEvent } from '@bigbluebutton/editor'
 import { Dragging } from './childStates/Dragging'
 import { Idle } from './childStates/Idle'
 import { Pointing } from './childStates/Pointing'
@@ -9,27 +9,26 @@ export class HandTool extends StateNode {
 	static override initial = 'idle'
 	static override children = () => [Idle, Pointing, Dragging]
 
-	override onDoubleClick: TLClickEvent = (info) => {
+	override onDoubleClick: TLClickEvent = (_info) => {
 		// if (info.phase === 'settle') {
 		// 	const { currentScreenPoint } = this.editor.inputs
 		// 	this.editor.zoomIn(currentScreenPoint, { duration: 220, easing: EASINGS.easeOutQuint })
 		// }
 	}
 
-	override onTripleClick: TLClickEvent = (info) => {
+	override onTripleClick: TLClickEvent = (_info) => {
 		// if (info.phase === 'settle') {
 		// 	const { currentScreenPoint } = this.editor.inputs
 		// 	this.editor.zoomOut(currentScreenPoint, { duration: 320, easing: EASINGS.easeOutQuint })
 		// }
 	}
 
-	override onQuadrupleClick: TLClickEvent = (info) => {
+	override onQuadrupleClick: TLClickEvent = (_info) => {
 		// if (info.phase === 'settle') {
 		// 	const zoomLevel = this.editor.getZoomLevel()
 		// 	const {
 		// 		inputs: { currentScreenPoint },
 		// 	} = this.editor
-
 		// 	if (zoomLevel === 1) {
 		// 		this.editor.zoomToFit({ duration: 400, easing: EASINGS.easeOutQuint })
 		// 	} else {

package/src/lib/ui/components/ContextMenu.tsx

@@ -65,7 +65,7 @@ export const ContextMenu = function ContextMenu({ children }: { children: any })
 		[editor]
 	)
 
-	const container = useContainer()
+	// const container = useContainer()
 
 	const [isOpen, handleOpenChange] = useMenuIsOpen('context menu', cb)
 

package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts

@@ -356,3 +356,8 @@ export type TLUiTranslationKey =
 	| 'vscode.file-open.backup-failed'
 	| 'vscode.file-open.dont-show-again'
 	| 'cursor-chat.type-to-chat'
+	| 'app.poll.t'
+	| 'app.poll.f'
+	| 'app.poll.y'
+	| 'app.poll.n'
+	| 'app.poll.abstention'

package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts

@@ -366,4 +366,9 @@ export const DEFAULT_TRANSLATION = {
 	'vscode.file-open.backup-failed': 'Backup failed: this is not a .tldr file.',
 	'vscode.file-open.dont-show-again': "Don't ask again",
 	'cursor-chat.type-to-chat': 'Type to chat...',
+	'app.poll.t': 'True',
+	'app.poll.f': 'False',
+	'app.poll.y': 'Yes',
+	'app.poll.n': 'No',
+	'app.poll.abstention': 'Abstention',
 }

package/src/test/Editor.test.tsx

@@ -511,13 +511,13 @@ describe('getShapeUtil', () => {
 	it('throws if that shape type isnt registered', () => {
 		const myMissingShape = { type: 'missing' } as TLShape
 		expect(() => editor.getShapeUtil(myMissingShape)).toThrowErrorMatchingInlineSnapshot(
-			`"No shape util found for type \\"missing\\""`
+			`"No shape util found for type "missing""`
 		)
 	})
 
 	it('throws if that type isnt registered', () => {
 		expect(() => editor.getShapeUtil('missing')).toThrowErrorMatchingInlineSnapshot(
-			`"No shape util found for type \\"missing\\""`
+			`"No shape util found for type "missing""`
 		)
 	})
 })

package/src/test/HandTool.test.ts

@@ -1,5 +1,4 @@
-import { HandTool } from '../lib/tools/HandTool/HandTool'
-import { TestEditor, createDefaultShapes } from './TestEditor'
+import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
 
@@ -16,60 +15,60 @@ afterEach(() => {
 
 jest.useFakeTimers()
 
-describe(HandTool, () => {
-	it('Double taps to zoom in', () => {
-		editor.setCurrentTool('hand')
-		expect(editor.getZoomLevel()).toBe(1)
-		editor.click()
-		editor.click() // double click!
-		jest.advanceTimersByTime(300)
-		expect(editor.getZoomLevel()).not.toBe(1) // animating
-		jest.advanceTimersByTime(300)
-		expect(editor.getZoomLevel()).toBe(2) // all done
-	})
-
-	it('Triple taps to zoom out', () => {
-		editor.setCurrentTool('hand')
-		expect(editor.getZoomLevel()).toBe(1)
-		editor.click()
-		editor.click()
-		editor.click() // triple click!
-		jest.advanceTimersByTime(300)
-		expect(editor.getZoomLevel()).not.toBe(1) // animating
-		jest.advanceTimersByTime(300)
-		expect(editor.getZoomLevel()).toBe(0.5) // all done
-	})
-
-	it('Quadruple taps to reset zoom', () => {
-		editor.setCurrentTool('hand')
-		editor.zoomIn() // zoom to 2
-		expect(editor.getZoomLevel()).toBe(2)
-		editor.click()
-		editor.click()
-		editor.click()
-		editor.click() // quad click!
-		jest.advanceTimersByTime(300)
-		expect(editor.getZoomLevel()).not.toBe(2) // animating
-		jest.advanceTimersByTime(300)
-		expect(editor.getZoomLevel()).toBe(1) // all done
-	})
-
-	it('Quadruple taps from zoom=1 to zoom to fit', () => {
-		editor.setCurrentTool('hand')
-		expect(editor.getZoomLevel()).toBe(1)
-		editor.createShapes(createDefaultShapes()) // makes some shapes
-		editor.click()
-		editor.click()
-		editor.click()
-		editor.click() // quad click!
-		jest.advanceTimersByTime(300)
-		expect(editor.getZoomLevel()).not.toBe(1) // animating
-		jest.advanceTimersByTime(300)
-		const z = editor.getZoomLevel()
-		editor.zoomToFit() // call zoom to fit manually to compare
-		expect(editor.getZoomLevel()).toBe(z) // zoom should not have changed
-	})
-})
+// describe(HandTool, () => {
+// 	it('Double taps to zoom in', () => {
+// 		editor.setCurrentTool('hand')
+// 		expect(editor.getZoomLevel()).toBe(1)
+// 		editor.click()
+// 		editor.click() // double click!
+// 		jest.advanceTimersByTime(300)
+// 		expect(editor.getZoomLevel()).not.toBe(1) // animating
+// 		jest.advanceTimersByTime(300)
+// 		expect(editor.getZoomLevel()).toBe(2) // all done
+// 	})
+
+// 	it('Triple taps to zoom out', () => {
+// 		editor.setCurrentTool('hand')
+// 		expect(editor.getZoomLevel()).toBe(1)
+// 		editor.click()
+// 		editor.click()
+// 		editor.click() // triple click!
+// 		jest.advanceTimersByTime(300)
+// 		expect(editor.getZoomLevel()).not.toBe(1) // animating
+// 		jest.advanceTimersByTime(300)
+// 		expect(editor.getZoomLevel()).toBe(0.5) // all done
+// 	})
+
+// 	it('Quadruple taps to reset zoom', () => {
+// 		editor.setCurrentTool('hand')
+// 		editor.zoomIn() // zoom to 2
+// 		expect(editor.getZoomLevel()).toBe(2)
+// 		editor.click()
+// 		editor.click()
+// 		editor.click()
+// 		editor.click() // quad click!
+// 		jest.advanceTimersByTime(300)
+// 		expect(editor.getZoomLevel()).not.toBe(2) // animating
+// 		jest.advanceTimersByTime(300)
+// 		expect(editor.getZoomLevel()).toBe(1) // all done
+// 	})
+
+// 	it('Quadruple taps from zoom=1 to zoom to fit', () => {
+// 		editor.setCurrentTool('hand')
+// 		expect(editor.getZoomLevel()).toBe(1)
+// 		editor.createShapes(createDefaultShapes()) // makes some shapes
+// 		editor.click()
+// 		editor.click()
+// 		editor.click()
+// 		editor.click() // quad click!
+// 		jest.advanceTimersByTime(300)
+// 		expect(editor.getZoomLevel()).not.toBe(1) // animating
+// 		jest.advanceTimersByTime(300)
+// 		const z = editor.getZoomLevel()
+// 		editor.zoomToFit() // call zoom to fit manually to compare
+// 		expect(editor.getZoomLevel()).toBe(z) // zoom should not have changed
+// 	})
+// })
 
 describe('When in the idle state', () => {
 	it('Returns to select on cancel', () => {

package/src/test/TLSessionStateSnapshot.test.ts

@@ -124,23 +124,23 @@ describe(extractSessionStateFromLegacySnapshot, () => {
 		}
 
 		expect(extractSessionStateFromLegacySnapshot(oldSnapshot as any)).toMatchInlineSnapshot(`
-		Object {
+		{
 		  "currentPageId": "page:whatever",
 		  "exportBackground": false,
 		  "isDebugMode": false,
 		  "isFocusMode": false,
 		  "isGridMode": false,
 		  "isToolLocked": false,
-		  "pageStates": Array [
-		    Object {
-		      "camera": Object {
+		  "pageStates": [
+		    {
+		      "camera": {
 		        "x": 0,
 		        "y": 0,
 		        "z": 1,
 		      },
 		      "focusedGroupId": null,
 		      "pageId": "page:whatever",
-		      "selectedShapeIds": Array [
+		      "selectedShapeIds": [
 		        "shape:whatever",
 		      ],
 		    },

package/src/test/TestEditor.ts

@@ -24,6 +24,7 @@ import {
 	createTLStore,
 	rotateSelectionHandle,
 } from '@bigbluebutton/editor'
+import React from 'react'
 import { defaultShapeTools } from '../lib/defaultShapeTools'
 import { defaultShapeUtils } from '../lib/defaultShapeUtils'
 import { defaultTools } from '../lib/defaultTools'
@@ -560,7 +561,9 @@ export class TestEditor extends Editor {
 		return this
 	}
 
-	createShapesFromJsx(shapesJsx: JSX.Element | JSX.Element[]): Record<string, TLShapeId> {
+	createShapesFromJsx(
+		shapesJsx: React.JSX.Element | React.JSX.Element[]
+	): Record<string, TLShapeId> {
 		const { shapes, ids } = shapesFromJsx(shapesJsx)
 		this.createShapes(shapes)
 		return ids