diff --git a/index.html b/index.html
index a2b24bd..7e0df10 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
- ggraph
+ Palace
diff --git a/partykit.json b/partykit.json
index 81e67a8..6397baa 100644
--- a/partykit.json
+++ b/partykit.json
@@ -1,5 +1,5 @@
{
- "name": "ggraph",
+ "name": "palace",
"main": "src/server.ts",
"serve": {
"path": "dist"
diff --git a/src/App.tsx b/src/App.tsx
index e6fee55..0f3394c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,14 +1,13 @@
import "tldraw/tldraw.css";
-import { Tldraw } from "tldraw";
+import { Tldraw, track, useEditor } from "tldraw";
import { useYjsStore } from "./useYjsStore";
-import { AgentButton } from "./components/AgentButton";
import { SocialShapeUtil } from "./SocialShapeUtil";
import { SocialShapeTool } from "./SocialShapeTool";
import { CustomToolbar, overrides } from "./ui";
-// import { getDocumentMeta, getUserId, getUsersInRoom, setDocumentMeta } from "./storeUtils";
import { registerDefaultPropagators } from "./propagators/ScopedPropagators";
import { PromptShape } from "./PromptShape";
import { PromptShapeTool } from "./PromptTool";
+import { CustomMainMenu } from "./CustomMainMenu";
const shapeUtils = [SocialShapeUtil, PromptShape];
const tools = [SocialShapeTool, PromptShapeTool];
@@ -41,74 +40,87 @@ export default function Canvas() {
registerDefaultPropagators(editor)
- // const userId = getUserId(editor)
- // setDocumentMeta(editor, {
- // [userId]: 123
- // })
- // // console.log(getDocumentMeta(editor))
- // // removeDocumentMeta(editor, 'test')
- // setTimeout(() => {
- // console.log(getDocumentMeta(editor))
- // console.log(getUsersInRoom(editor))
- // }, 2000);
-
}}
components={{
- SharePanel: AgentButton,
+ SharePanel: NameEditor,
Toolbar: CustomToolbar,
+ MainMenu: CustomMainMenu,
}}
/>
);
}
-// const NameEditor = track(() => {
-// const editor = useEditor();
+const NameEditor = track(() => {
+ const editor = useEditor();
+ const { color, name } = editor.user.getUserPreferences();
+ function randomName(): string {
+ const firstNames = ['Boba', 'Zap', 'Fizz', 'Glorp', 'Squish', 'Blip', 'Floof', 'Ziggy', 'Quark', 'Noodle', 'AI'];
+ const lastNames = ['Bubbles', 'Zoomers', 'Wiggles', 'Snazzle', 'Boop', 'Fizzle', 'Wobble', 'Giggle', 'Squeak', 'Noodle', 'Palace'];
+ return `${firstNames[Math.floor(Math.random() * firstNames.length)]} ${lastNames[Math.floor(Math.random() * lastNames.length)]}`
+ }
-// const { color, name } = editor.user.getUserPreferences();
+ function randomHexColor(): string {
+ return `#${Math.floor(Math.random() * 16777215).toString(16)}`
+ }
-// return (
-//
-// {
-// editor.user.updateUserPreferences({
-// color: e.currentTarget.value,
-// });
-// }}
-// />
-// {
-// editor.user.updateUserPreferences({
-// name: e.currentTarget.value,
-// });
-// }}
-// />
-//
-// );
-// });
+ const userPrefs = editor.user.getUserPreferences()
+
+ if (userPrefs.name === "New User") {
+ editor.user.updateUserPreferences({
+ name: randomName(),
+ color: randomHexColor()
+ })
+ }
+
+ return (
+
+ {
+ editor.user.updateUserPreferences({
+ color: e.currentTarget.value,
+ });
+ }}
+ />
+ {
+ editor.user.updateUserPreferences({
+ name: e.currentTarget.value,
+ });
+ }}
+ />
+
+ );
+});
diff --git a/src/CustomMainMenu.tsx b/src/CustomMainMenu.tsx
new file mode 100644
index 0000000..a84bd47
--- /dev/null
+++ b/src/CustomMainMenu.tsx
@@ -0,0 +1,57 @@
+import {
+ DefaultMainMenu,
+ TldrawUiMenuItem,
+ Editor,
+ TLContent,
+ DefaultMainMenuContent,
+ useEditor,
+ useExportAs,
+} from "tldraw";
+
+export function CustomMainMenu() {
+ const editor = useEditor()
+ const exportAs = useExportAs()
+
+ const importJSON = (editor: Editor) => {
+ const input = document.createElement("input");
+ input.type = "file";
+ input.accept = ".json";
+ input.onchange = (event) => {
+ const file = (event.target as HTMLInputElement).files?.[0];
+ const reader = new FileReader();
+ reader.onload = (event) => {
+ if (typeof event.target?.result !== 'string') {
+ return
+ }
+ const jsonData = JSON.parse(event.target.result) as TLContent
+ editor.putContentOntoCurrentPage(jsonData, { select: true })
+ };
+ reader.readAsText(file as Blob);
+ };
+ input.click();
+ };
+ const exportJSON = (editor: Editor) => {
+ const exportName = `palace-${Math.round(+new Date() / 1000).toString().slice(5)}`
+ exportAs(Array.from(editor.getCurrentPageShapeIds()), 'json', exportName)
+ };
+
+ return (
+
+
+ exportJSON(editor)}
+ />
+ importJSON(editor)}
+ />
+
+ )
+}
diff --git a/src/ui.tsx b/src/ui.tsx
index ff25e34..b694d95 100644
--- a/src/ui.tsx
+++ b/src/ui.tsx
@@ -25,7 +25,7 @@ export const overrides: TLUiOverrides = {
prompt: {
id: "prompt",
name: "Prompt",
- icon: "code",
+ icon: "fill-solid",
kbd: "p",
label: "Prompt",
onSelect: () => {
@@ -39,9 +39,11 @@ export const overrides: TLUiOverrides = {
export const CustomToolbar = (props: DefaultToolbarProps) => {
const tools = useTools()
const isSocialSelected = useIsToolSelected(tools.social)
+ const isPromptSelected = useIsToolSelected(tools.prompt)
return (
+
)