diff --git a/src/components/Board.tsx b/src/components/Board.tsx index 80da60f..42d5427 100644 --- a/src/components/Board.tsx +++ b/src/components/Board.tsx @@ -14,7 +14,7 @@ import { multiplayerAssetStore } from '../client/multiplayerAssetStore' import { customSchema } from '../../worker/TldrawDurableObject' import React, { useState } from 'react'; -import { chatBox } from '@/shapes/ChatBoxShapeUtil'; +import { ChatBox } from '@/shapes/ChatBoxShapeUtil'; import { components, uiOverrides } from '@/ui-overrides' const WORKER_URL = `https://jeffemmett-canvas.jeffemmett.workers.dev` @@ -61,7 +61,7 @@ export function Board() { onChange={handleNameChange} placeholder="Enter your name" /> - export class ChatBoxShape extends BaseBoxShapeUtil { - static override type = 'chatBox' + static override type = 'ChatBox' getDefaultProps(): IChatBoxShape['props'] { return { @@ -29,7 +29,7 @@ export class ChatBoxShape extends BaseBoxShapeUtil { component(shape: IChatBoxShape) { return ( - + ) } } @@ -44,8 +44,8 @@ interface Message { -// Update the chatBox component to accept userName -export const chatBox: React.FC = ({ roomId, w, h, userName }) => { +// Update the ChatBox component to accept userName +export const ChatBox: React.FC = ({ roomId, w, h, userName }) => { const [messages, setMessages] = useState([]); const [inputMessage, setInputMessage] = useState(""); const [username, setUsername] = useState(userName); diff --git a/src/tools/ChatBoxTool.ts b/src/tools/ChatBoxTool.ts index ec8970b..795bfda 100644 --- a/src/tools/ChatBoxTool.ts +++ b/src/tools/ChatBoxTool.ts @@ -1,7 +1,7 @@ import { BaseBoxShapeTool } from "tldraw"; export class ChatBoxTool extends BaseBoxShapeTool { - static override id = 'chatBox' - shapeType = 'chatBox'; + static override id = 'ChatBox' + shapeType = 'ChatBox'; override initial = 'idle'; } \ No newline at end of file diff --git a/src/ui-overrides.tsx b/src/ui-overrides.tsx index 6710c2f..0bddd0b 100644 --- a/src/ui-overrides.tsx +++ b/src/ui-overrides.tsx @@ -19,13 +19,13 @@ export const uiOverrides: TLUiOverrides = { editor.setCurrentTool('VideoChat') }, } - tools.chatBox = { - id: 'chatBox', + tools.ChatBox = { + id: 'ChatBox', icon: 'color', label: 'Chat', kbd: 'x', onSelect: () => { - editor.setCurrentTool('chatBox') + editor.setCurrentTool('ChatBox') }, } return tools @@ -35,12 +35,12 @@ export const uiOverrides: TLUiOverrides = { export const components: TLComponents = { Toolbar: (props) => { const tools = useTools() - const isChatBoxSelected = useIsToolSelected(tools['chatBox']) + const isChatBoxSelected = useIsToolSelected(tools['ChatBox']) const isVideoSelected = useIsToolSelected(tools['VideoChat']) return ( - + ) diff --git a/worker/TldrawDurableObject.ts b/worker/TldrawDurableObject.ts index 4ee489d..b5e0274 100644 --- a/worker/TldrawDurableObject.ts +++ b/worker/TldrawDurableObject.ts @@ -15,7 +15,7 @@ import { VideoChatShape } from '@/shapes/VideoChatShapeUtil' // add custom shapes and bindings here if needed: export const customSchema = createTLSchema({ - shapes: { ...defaultShapeSchemas, chatBox: ChatBoxShape, VideoChat: VideoChatShape }, + shapes: { ...defaultShapeSchemas, ChatBox: ChatBoxShape, VideoChat: VideoChatShape }, // bindings: { ...defaultBindingSchemas }, })