) => {
setUserName(event.target.value);
@@ -99,34 +45,13 @@ export function Board() {
return (
{
editor.registerExternalAssetHandler('url', unfurlBookmarkUrl)
- editor.createShape({
- type: 'chatBox',
- x: 0,
- y: 0,
- props: {
- w: 200,
- h: 200,
- roomId: roomId,
- },
- });
- //if (isVideoChatVisible) {
- //editor.registerExternalAssetHandler('url', unfurlBookmarkUrl)
- editor.createShape({
- type: 'videoChat',
- x: 300, // Adjust position as needed
- y: 0,
- props: {
- roomUrl: 'https://whereby.com/default-room', // Default room URL
- w: 640,
- h: 480,
- },
- });
- //}
}}
/>
{isChatBoxVisible && (
@@ -137,12 +62,12 @@ export function Board() {
onChange={handleNameChange}
placeholder="Enter your name"
/>
-
)}
{isVideoChatVisible && ( // Render the button to join video chat
@@ -154,22 +79,6 @@ export function Board() {
)
}
-// Assuming you have a message structure like this
-interface ChatMessage {
- id: string;
- text: string;
- isUser: boolean; // New property to identify the sender
-}
-
-// Example rendering function for messages
-function renderMessage(message: ChatMessage) {
- return (
-
- {message.text}
-
- )
-}
-
// How does our server handle bookmark unfurling?
async function unfurlBookmarkUrl({ url }: { url: string }): Promise {
const asset: TLBookmarkAsset = {
diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx
index bdf7457..34f2a2d 100644
--- a/src/components/Canvas.tsx
+++ b/src/components/Canvas.tsx
@@ -1,6 +1,6 @@
import { Editor, Tldraw, TLShape, TLUiComponents } from "tldraw";
import { SimController } from "@/physics/PhysicsControls";
-import { HTMLShapeUtil } from "@/shapes/HTMLShapeUtil";
+import { HTMLShapeUtil } from "@/utils/HTMLShapeUtil";
const components: TLUiComponents = {
HelpMenu: null,
diff --git a/src/components/ChatBoxStyles.css b/src/css/ChatBoxStyles.css
similarity index 100%
rename from src/components/ChatBoxStyles.css
rename to src/css/ChatBoxStyles.css
diff --git a/src/physics/simulation.ts b/src/physics/simulation.ts
index f657648..2ff1ec7 100644
--- a/src/physics/simulation.ts
+++ b/src/physics/simulation.ts
@@ -66,7 +66,7 @@ export class PhysicsWorld {
this.createGroup(shape as TLGroupShape);
break;
// Add cases for any new shape types here
- case "videoChat":
+ case "VideoChat":
this.createShape (shape as TLGeoShape);
break;
}
diff --git a/src/shapes/ChatBoxShape.tsx b/src/shapes/ChatBoxShapeUtil.tsx
similarity index 89%
rename from src/shapes/ChatBoxShape.tsx
rename to src/shapes/ChatBoxShapeUtil.tsx
index 99a47fe..b385ab6 100644
--- a/src/shapes/ChatBoxShape.tsx
+++ b/src/shapes/ChatBoxShapeUtil.tsx
@@ -1,8 +1,8 @@
import { useEffect, useRef, useState } from "react";
-import { BaseBoxShapeUtil, TLBaseBoxShape, TLBaseShape, TldrawBaseProps } from "tldraw";
+import { BaseBoxShapeUtil, TLBaseShape } from "tldraw";
export type IChatBoxShape = TLBaseShape<
- 'chatBox',
+ 'ChatBox',
{
w: number
h: number
@@ -12,7 +12,7 @@ export type IChatBoxShape = TLBaseShape<
>
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 (
- = ({ roomId, width, height, userName }) => {
+export const ChatBox: React.FC = ({ roomId, w, h, userName }) => {
const [messages, setMessages] = useState([]);
const [inputMessage, setInputMessage] = useState("");
const [username, setUsername] = useState(userName);
@@ -98,7 +94,7 @@ export const ChatBox: React.FC = ({ roomId, width, height, userNam
};
return (
-
+
{messages.map((msg) => (
diff --git a/src/shapes/VideoChatShape.tsx b/src/shapes/VideoChatShape.tsx
deleted file mode 100644
index 5062981..0000000
--- a/src/shapes/VideoChatShape.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { BaseBoxShapeUtil, TLBaseShape } from "tldraw";
-import React, { useEffect, useState } from "react"; // Updated import for React
-
-export type IVideoChatShape = TLBaseShape<
- 'videoChat',
- {
- w: number;
- h: number;
- roomUrl: string; // Changed from roomId to roomUrl for Whereby
- userName: string;
- }
->;
-
-export class VideoChatShape extends BaseBoxShapeUtil
{
- static override type = 'videoChat';
-
- getDefaultProps(): IVideoChatShape['props'] {
- return {
- roomUrl: 'https://whereby.com/default-room', // Default Whereby room URL
- w: 640,
- h: 480,
- userName: ''
- };
- }
-
- indicator(shape: IVideoChatShape) {
- return = () => { // Removed roomUrl from props
- // Remove unused destructured props
- // const [roomUrl, setRoomUrl] = useState(initialRoomUrl); // Use initialRoomUrl to avoid duplicate identifier
- // const [roomUrl, setRoomUrl] = useState(roomId); // Use roomId instead
- const [isInRoom, setIsInRoom] = useState(false);
- const [error, setError] = useState("");
- const [isLoading, setIsLoading] = useState(false);
-
- // Automatically show the button on load
- useEffect(() => {
- joinRoom();
- }, []);
-
- const joinRoom = async () => {
- setError("");
- setIsLoading(true);
- try {
- const response = await fetch('/api/get-or-create-room', { method: 'GET' });
- const data: { roomUrl?: string; error?: string } = await response.json(); // Explicitly type 'data'
- if (data.roomUrl) {
- // setRoomUrl(data.roomUrl); // Remove this line
- setIsInRoom(true);
- } else {
- setError(data.error || "Failed to join room. Please try again.");
- }
- } catch (e) {
- console.error("Error joining room:", e);
- setError("An error occurred. Please try again.");
- }
- setIsLoading(false);
- };
-
- const leaveRoom = () => {
- setIsInRoom(false);
- // setRoomUrl(""); // Remove this line
- };
-
- return (
-
- {!isInRoom && ( // Show button if not in room
-
setIsInRoom(true)} className="bg-green-500 text-white px-4 py-2 rounded">
- Join Video Chat
-
- )}
- {/* Render Video Chat UI here when isInRoom is true */}
- {isInRoom &&
Video Chat UI goes here
}
-
{
+ static override type = 'VideoChat';
+
+ getDefaultProps(): IVideoChatShape['props'] {
+ return {
+ roomUrl: 'https://whereby.com/default-room', // Default Whereby room URL
+ w: 640,
+ h: 480,
+ userName: ''
+ };
+ }
+
+ indicator(shape: IVideoChatShape) {
+ return
+ {!isInRoom && ( // Show button if not in room
+
setIsInRoom(true)} className="bg-green-500 text-white px-4 py-2 rounded">
+ Join Video Chat
+
+ )}
+ {/* Render Video Chat UI here when isInRoom is true */}
+ {isInRoom &&
Video Chat UI goes here
}
+
+
+ )
+ },
+}
\ No newline at end of file
diff --git a/src/utils/ContainerShapeUtil.tsx b/src/utils/ContainerShapeUtil.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/utils/ElementShapeUtil.tsx b/src/utils/ElementShapeUtil.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/shapes/HTMLShapeUtil.tsx b/src/utils/HTMLShapeUtil.tsx
similarity index 100%
rename from src/shapes/HTMLShapeUtil.tsx
rename to src/utils/HTMLShapeUtil.tsx
diff --git a/src/utils/card-shape-migrations.ts b/src/utils/card-shape-migrations.ts
new file mode 100644
index 0000000..6021ec8
--- /dev/null
+++ b/src/utils/card-shape-migrations.ts
@@ -0,0 +1,25 @@
+import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from 'tldraw'
+
+const versions = createShapePropsMigrationIds(
+ // this must match the shape type in the shape definition
+ 'card',
+ {
+ AddSomeProperty: 1,
+ }
+)
+
+// Migrations for the custom card shape (optional but very helpful)
+export const cardShapeMigrations = createShapePropsMigrationSequence({
+ sequence: [
+ {
+ id: versions.AddSomeProperty,
+ up(props) {
+ // it is safe to mutate the props object here
+ props.someProperty = 'some value'
+ },
+ down(props) {
+ delete props.someProperty
+ },
+ },
+ ],
+})
\ No newline at end of file
diff --git a/src/utils/card-shape-props.ts b/src/utils/card-shape-props.ts
new file mode 100644
index 0000000..bead2fb
--- /dev/null
+++ b/src/utils/card-shape-props.ts
@@ -0,0 +1,11 @@
+import { DefaultColorStyle, RecordProps, T } from 'tldraw'
+import { ICardShape } from './card-shape-types'
+
+// Validation for our custom card shape's props, using one of tldraw's default styles
+export const cardShapeProps: RecordProps = {
+ w: T.number,
+ h: T.number,
+ color: DefaultColorStyle,
+}
+
+// To generate your own custom styles, check out the custom styles example.
\ No newline at end of file
diff --git a/src/utils/card-shape-types.ts b/src/utils/card-shape-types.ts
new file mode 100644
index 0000000..0ec08e0
--- /dev/null
+++ b/src/utils/card-shape-types.ts
@@ -0,0 +1,11 @@
+import { TLBaseShape, TLDefaultColorStyle } from 'tldraw'
+
+// A type for our custom card shape
+export type ICardShape = TLBaseShape<
+ 'card',
+ {
+ w: number
+ h: number
+ color: TLDefaultColorStyle
+ }
+>
\ No newline at end of file
diff --git a/src/utils/my-interactive-shape-util.tsx b/src/utils/my-interactive-shape-util.tsx
new file mode 100644
index 0000000..ec3ecc7
--- /dev/null
+++ b/src/utils/my-interactive-shape-util.tsx
@@ -0,0 +1,120 @@
+import { BaseBoxShapeUtil, HTMLContainer, RecordProps, T, TLBaseShape } from 'tldraw'
+
+// There's a guide at the bottom of this file!
+
+type IMyInteractiveShape = TLBaseShape<
+ 'my-interactive-shape',
+ {
+ w: number
+ h: number
+ checked: boolean
+ text: string
+ }
+>
+
+export class myInteractiveShape extends BaseBoxShapeUtil {
+ static override type = 'my-interactive-shape' as const
+ static override props: RecordProps = {
+ w: T.number,
+ h: T.number,
+ checked: T.boolean,
+ text: T.string,
+ }
+
+ getDefaultProps(): IMyInteractiveShape['props'] {
+ return {
+ w: 230,
+ h: 230,
+ checked: false,
+ text: '',
+ }
+ }
+
+ // [1]
+ component(shape: IMyInteractiveShape) {
+ return (
+
+ ({
+ id: shape.id,
+ type: 'my-interactive-shape',
+ props: { checked: !shape.props.checked },
+ })
+ }
+ // [b] This is where we stop event propagation
+ onPointerDown={(e) => e.stopPropagation()}
+ onTouchStart={(e) => e.stopPropagation()}
+ onTouchEnd={(e) => e.stopPropagation()}
+ />
+ ({
+ id: shape.id,
+ type: 'my-interactive-shape',
+ props: { text: e.currentTarget.value },
+ })
+ }
+ // [c]
+ onPointerDown={(e) => {
+ if (!shape.props.checked) {
+ e.stopPropagation()
+ }
+ }}
+ onTouchStart={(e) => {
+ if (!shape.props.checked) {
+ e.stopPropagation()
+ }
+ }}
+ onTouchEnd={(e) => {
+ if (!shape.props.checked) {
+ e.stopPropagation()
+ }
+ }}
+ />
+
+ )
+ }
+
+ // [5]
+ indicator(shape: IMyInteractiveShape) {
+ return
-
- )
- },
- KeyboardShortcutsDialog: (props) => {
- const tools = useTools()
- return (
-
-
- )
- },
-}
-
-/*
-
-This file contains overrides for the Tldraw UI. These overrides are used to add your custom tools to
-the toolbar and the keyboard shortcuts menu.
-
-First we have to add our new tool to the tools object in the tools override. This is where we define
-all the basic information about our new tool - its icon, label, keyboard shortcut, what happens when
-we select it, etc.
-
-Then, we replace the UI components for the toolbar and keyboard shortcut dialog with our own, that
-add our new tool to the existing default content. Ideally, we'd interleave our new tool into the
-ideal place among the default tools, but for now we're just adding it at the start to keep things
-simple.
-*/
\ No newline at end of file
diff --git a/worker/TldrawDurableObject.ts b/worker/TldrawDurableObject.ts
index ed42779..b5e0274 100644
--- a/worker/TldrawDurableObject.ts
+++ b/worker/TldrawDurableObject.ts
@@ -10,12 +10,12 @@ import {
import { AutoRouter, IRequest, error } from 'itty-router'
import throttle from 'lodash.throttle'
import { Environment } from './types'
-import { ChatBoxShape } from '@/shapes/ChatBoxShape'
-import { VideoChatShape } from '@/shapes/VideoChatShape'
+import { ChatBoxShape } from '@/shapes/ChatBoxShapeUtil'
+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 },
})