experiment with routing

gempir · Feb 5, 2024 · 6ee04f1 · 6ee04f1
1 parent 2dcd566
commit 6ee04f1
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 17 deletions.
diff --git a/web/src/components/Overlay/Editor.tsx b/web/src/components/Overlay/Editor.tsx
@@ -1,15 +1,28 @@
-import { Tldraw, TldrawProps } from '@tldraw/tldraw';
+import { Tldraw, TldrawProps, useEditor } from '@tldraw/tldraw';
 import '@tldraw/tldraw/tldraw.css';
 import { useYjsStore } from '../../hooks/useYjsStore';
 import { useStore } from '../../store';
 
 
-export function Editor(props: Partial<TldrawProps>) {
+type Props = {
+    overlayId: string;
+    readonly?: boolean;
+}
+
+export function Editor(props: Partial<TldrawProps> & Props) {
     const yjsWsUrl = useStore(state => state.yjsWsUrl);
     const store = useYjsStore({
-        roomId: 'example17',
+        roomId: props.overlayId,
         hostUrl: yjsWsUrl,
     });
+    const editor = useEditor();
+
+
+    if (props.readonly && editor) {
+        console.log(editor);
+        // editor.setCamera({ x: 0, y: 0, z: 1 });
+        // editor.updateInstanceState({ isReadonly: true, canMoveCamera: false })
+    }
 
     return <Tldraw inferDarkMode store={store} {...props} />
 }
diff --git a/web/src/components/Overlay/OverlayPage.tsx → .../components/Overlay/IframeOverlayPage.tsx b/web/src/components/Overlay/OverlayPage.tsx → .../components/Overlay/IframeOverlayPage.tsx
@@ -2,10 +2,13 @@
 
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
+import { useParams } from 'next/navigation';
 
 const Editor = dynamic(async () => (await import('./Editor')).Editor, { ssr: false })
 
-export function OverlayPage() {
+export function IframeOverlayPage() {
+    const { overlayId } = useParams<{ overlayId: string }>();
+
     return (
         <div className="relative w-full h-[100vh]">
             <Head>
@@ -19,7 +22,7 @@ export function OverlayPage() {
                     }
                 `}</style>
             </Head>
-            <Editor hideUi />
+            <Editor hideUi overlayId={overlayId} readonly />
         </div>
     );
 }
diff --git a/web/src/components/Overlays/OverlaysPage.tsx → web/src/components/Overlay/OverlaysPage.tsx b/web/src/components/Overlays/OverlaysPage.tsx → web/src/components/Overlay/OverlaysPage.tsx
@@ -1,6 +1,6 @@
 import dynamic from "next/dynamic";
 import { useUserConfig } from "../../hooks/useUserConfig";
-const Editor = dynamic(async () => (await import('./../Overlay/Editor')).Editor, { ssr: false })
+const Editor = dynamic(async () => (await import('./Editor')).Editor, { ssr: false })
 
 export function OverlaysPage() {
     const [userCfg, setUserConfig, , loading, errorMessage] = useUserConfig();
@@ -9,6 +9,6 @@ export function OverlaysPage() {
     }
 
     return <div className="relative w-full h-[100vh]">
-        <Editor />
+       Table with overlays
     </div>;
 }
diff --git a/web/src/pages/overlay/[overlayid].tsx → web/src/pages/overlay/[overlayId].tsx b/web/src/pages/overlay/[overlayid].tsx → web/src/pages/overlay/[overlayId].tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import { initializeStore } from "../../service/initializeStore";
-import { OverlayPage } from "../../components/Overlay/OverlayPage";
+import { IframeOverlayPage } from "../../components/Overlay/IframeOverlayPage";
 
 export default function Overlay() {
-    return <OverlayPage />
+    return <IframeOverlayPage />
 }
 
 export const getServerSideProps = initializeStore;
diff --git a/web/src/pages/overlay/edit/[overlayId].tsx b/web/src/pages/overlay/edit/[overlayId].tsx
@@ -0,0 +1,13 @@
+'use client';
+
+import dynamic from "next/dynamic";
+import { useParams } from "next/navigation";
+const Editor = dynamic(async () => (await import('../../../components/Overlay/Editor')).Editor, { ssr: false })
+
+export default function OverlaysEditPage() {
+    const params = useParams<{ overlayId: string }>();
+
+    return <div className="relative w-full h-[100vh]">
+        <Editor overlayId={params.overlayId} />
+    </div>;
+}
diff --git a/web/src/pages/overlay/index.tsx b/web/src/pages/overlay/index.tsx
@@ -0,0 +1,8 @@
+import { OverlaysPage } from "../../components/Overlay/OverlaysPage";
+import { initializeStore } from "../../service/initializeStore";
+
+export default function OverlaysPageRoute() {
+    return <OverlaysPage />
+}
+
+export const getServerSideProps = initializeStore;
diff --git a/web/src/pages/overlays.tsx b/web/src/pages/overlays.tsx