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

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" allowDecimals={false} />
+					<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/components/MenuZone.tsx

@@ -1,24 +1,17 @@
-import { track, useEditor } from '@bigbluebutton/editor'
-import { useBreakpoint } from '../hooks/useBreakpoint'
-import { useReadonly } from '../hooks/useReadonly'
-import { ActionsMenu } from './ActionsMenu'
-import { DuplicateButton } from './DuplicateButton'
-import { Menu } from './Menu'
-import { PageMenu } from './PageMenu/PageMenu'
-import { RedoButton } from './RedoButton'
-import { TrashButton } from './TrashButton'
-import { UndoButton } from './UndoButton'
+import { track } from '@bigbluebutton/editor'
+// import { useBreakpoint } from '../hooks/useBreakpoint'
+// import { useReadonly } from '../hooks/useReadonly'
 
 export const MenuZone = track(function MenuZone() {
-	const editor = useEditor()
+	// const editor = useEditor()
 
-	const breakpoint = useBreakpoint()
-	const isReadonly = useReadonly()
+	// const breakpoint = useBreakpoint()
+	// const isReadonly = useReadonly()
 
 	return (
 		<div className="tlui-menu-zone">
 			<div className="tlui-buttons__horizontal">
-				<Menu />
+				{/* <Menu />
 				<PageMenu />
 				{breakpoint >= 6 && !isReadonly && !editor.isInAny('hand', 'zoom') && (
 					<>
@@ -28,7 +21,7 @@ export const MenuZone = track(function MenuZone() {
 						<DuplicateButton />
 						<ActionsMenu />
 					</>
-				)}
+				)} */}
 			</div>
 		</div>
 	)

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

@@ -7,11 +7,7 @@ import { TLUiToolbarItem, useToolbarSchema } from '../../hooks/useToolbarSchema'
 import { TLUiToolItem } from '../../hooks/useTools'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { ActionsMenu } from '../ActionsMenu'
-import { DuplicateButton } from '../DuplicateButton'
 import { MobileStylePanel } from '../MobileStylePanel'
-import { RedoButton } from '../RedoButton'
-import { TrashButton } from '../TrashButton'
-import { UndoButton } from '../UndoButton'
 import { Button } from '../primitives/Button'
 import * as M from '../primitives/DropdownMenu'
 import { kbdStr } from '../primitives/shared'
@@ -112,7 +108,7 @@ export const Toolbar = memo(function Toolbar() {
 				<div className="tlui-toolbar__left">
 					{!isReadonly && (
 						<div className="tlui-toolbar__extras">
-							{breakpoint < 6 && !(activeToolId === 'hand' || activeToolId === 'zoom') && (
+							{/* {breakpoint < 6 && !(activeToolId === 'hand' || activeToolId === 'zoom') && (
 								<div className="tlui-toolbar__extras__controls tlui-buttons__horizontal">
 									<UndoButton />
 									<RedoButton />
@@ -120,7 +116,7 @@ export const Toolbar = memo(function Toolbar() {
 									<DuplicateButton />
 									<ActionsMenu />
 								</div>
-							)}
+							)} */}
 							<ToggleToolLockedButton activeToolId={activeToolId} />
 						</div>
 					)}
@@ -197,6 +193,7 @@ export const Toolbar = memo(function Toolbar() {
 												<OverflowToolsContent toolbarItems={itemsInDropdown} />
 											</M.Content>
 										</M.Root>
+										<ActionsMenu />
 									</>
 								) : null}
 							</>

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