feat: [WIP] file open

* use tldraw indexed db instead of Yjs indexed db
GIP-RECIA · Mar 10, 2023 · 2727822 · 2727822
1 parent d516320
commit 2727822
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 191 deletions.
diff --git a/client/src/App.scss b/client/src/App.scss
@@ -28,7 +28,7 @@ a {
 $border-radius: 9px;
 $padding: 9px;
 $height: 40px;
-$left: 50px;
+$left: 110px;
 
 .container {
   z-index: 2;

diff --git a/client/src/components/Editor.tsx b/client/src/components/Editor.tsx
@@ -1,18 +1,12 @@
-import { FormEvent, useState } from "react";
-import { Tldraw, useFileSystem } from "@tldraw/tldraw";
+import { FormEvent, useCallback, useState } from "react";
+import { Tldraw, TldrawApp, useFileSystem } from "@tldraw/tldraw";
 import { CustomCursor } from "./Cursor";
 import { useAssets } from "../hooks/useAssets";
 import { useMultiplayer } from "../hooks/useMultiplayer";
-import { useSingleplayer } from "../hooks/useSingleplayer";
-import { cloneDoc, initPersistence, initProvider, newDoc } from "../utils/yjs";
+import { cloneDoc, initProvider, newDoc } from "../utils/yjs";
 import { v4 as uuidv4, validate as uuidValidate } from "uuid";
 import PropTypes from "prop-types";
-import {
-  Multiplayer,
-  MultiplayerReadOnly,
-  Settings,
-  Singleplayer,
-} from "../types/types";
+import { Multiplayer, Settings, Singleplayer } from "../types/types";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faArrowRightFromBracket,
@@ -57,10 +51,11 @@ function Editor({
   const [useLocalDoc, setUseLocalDoc] = useState(false);
 
   language = language || "en";
-  initPersistence(idbName, localDoc);
+  readOnly = readOnly || false;
   let editor = (
     <SingleplayerEditor
       apiUrl={apiUrl}
+      idbName={idbName}
       doc={localDoc}
       language={language}
       readOnly={wantJoinRoom}
@@ -70,20 +65,14 @@ function Editor({
     let doc = newDoc();
     if (useLocalDoc) doc = cloneDoc(localDoc);
     const provider = initProvider(wsUrl, room, doc);
-    editor = readOnly ? (
-      <MultiplayerReadOnlyEditor
-        doc={doc}
-        provider={provider}
-        roomId={room}
-        language={language}
-      />
-    ) : (
+    editor = (
       <MultiplayerEditor
         apiUrl={apiUrl}
         doc={doc}
         provider={provider}
         roomId={room}
         language={language}
+        readOnly={readOnly}
       />
     );
   }
@@ -185,22 +174,32 @@ function Editor({
   );
 }
 
-function SingleplayerEditor({ apiUrl, doc, language, readOnly }: Singleplayer) {
+function SingleplayerEditor({
+  apiUrl,
+  idbName,
+  doc,
+  language,
+  readOnly,
+}: Singleplayer) {
   const fileSystemEvents = useFileSystem();
   const { onAssetCreate, onAssetDelete, onAssetUpload } = useAssets(apiUrl);
-  const { ...events } = useSingleplayer(doc, language);
+
+  const onMount = useCallback((app: TldrawApp) => {
+    app.setSetting("language", language);
+    app.setSetting("keepStyleMenuOpen", true);
+  }, []);
 
   return (
     <Tldraw
       autofocus
-      showPages={false}
+      id={idbName}
+      onMount={onMount}
       showMultiplayerMenu={false}
       onAssetCreate={onAssetCreate}
       onAssetDelete={onAssetDelete}
       onAssetUpload={onAssetUpload}
       readOnly={readOnly}
       {...fileSystemEvents}
-      {...events}
     />
   );
 }
@@ -211,6 +210,7 @@ function MultiplayerEditor({
   provider,
   roomId,
   language,
+  readOnly,
 }: Multiplayer) {
   const { onSaveProjectAs, onSaveProject } = useFileSystem();
   const { onAssetCreate, onAssetDelete, onAssetUpload } = useAssets(apiUrl);
@@ -222,34 +222,12 @@ function MultiplayerEditor({
       components={components}
       showPages={false}
       showMultiplayerMenu={false}
-      onAssetCreate={onAssetCreate}
+      onAssetCreate={readOnly ? undefined : onAssetCreate}
       onAssetDelete={onAssetDelete}
       onAssetUpload={onAssetUpload}
       onSaveProjectAs={onSaveProjectAs}
       onSaveProject={onSaveProject}
-      {...events}
-    />
-  );
-}
-
-function MultiplayerReadOnlyEditor({
-  doc,
-  provider,
-  roomId,
-  language,
-}: MultiplayerReadOnly) {
-  const { onSaveProjectAs, onSaveProject } = useFileSystem();
-  const { ...events } = useMultiplayer(doc, provider, roomId, language);
-
-  return (
-    <Tldraw
-      autofocus
-      components={components}
-      showPages={false}
-      showMultiplayerMenu={false}
-      onSaveProjectAs={onSaveProjectAs}
-      onSaveProject={onSaveProject}
-      readOnly
+      readOnly={readOnly}
       {...events}
     />
   );

diff --git a/client/src/hooks/useSingleplayer.ts b/client/src/hooks/useSingleplayer.ts
diff --git a/client/src/types/types.ts b/client/src/types/types.ts
@@ -15,6 +15,7 @@ export type Settings = {
 
 export type Singleplayer = {
   apiUrl: string;
+  idbName: string;
   doc: Y.Doc;
   language: string;
   readOnly: boolean;
@@ -26,11 +27,5 @@ export type Multiplayer = {
   provider: WebsocketProvider;
   roomId: string;
   language: string;
-};
-
-export type MultiplayerReadOnly = {
-  doc: Y.Doc;
-  provider: WebsocketProvider;
-  roomId: string;
-  language: string;
+  readOnly: boolean;
 };