fix: can't change files again (#34)

kaplayjs · Oct 1, 2024 · fbaa50f · fbaa50f
1 parent 17e6cd9
commit fbaa50f
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git a/src/components/Editor/MonacoEditor.tsx b/src/components/Editor/MonacoEditor.tsx
@@ -12,7 +12,8 @@ type Props = {
 
 const MonacoEditor: FC<Props> = (props) => {
     const { updateFile, getFile } = useProject();
-    const { run, update, updateImageDecorations, getRuntime } = useEditor();
+    const { run, update, updateImageDecorations, getRuntime, setRuntime } =
+        useEditor();
 
     const handleEditorBeforeMount = (monaco: Monaco) => {
         configMonaco(monaco);
@@ -22,8 +23,7 @@ const MonacoEditor: FC<Props> = (props) => {
         editor: editor.IStandaloneCodeEditor,
         monaco: Monaco,
     ) => {
-        getRuntime().editor = editor;
-        getRuntime().monaco = monaco;
+        setRuntime({ editor, monaco });
         const currentFile = getRuntime().currentFile;
 
         props.onMount?.();

diff --git a/src/components/FileTree/FileEntry.tsx b/src/components/FileTree/FileEntry.tsx
@@ -20,10 +20,10 @@ const logoByKind = {
 
 const FileEntry: FC<Props> = ({ file }) => {
     const { removeFile } = useProject();
-    const { getRuntime } = useEditor();
+    const { getRuntime, setCurrentFile } = useEditor();
 
     const handleClick: MouseEventHandler = () => {
-        getRuntime().currentFile = file.path;
+        setCurrentFile(file.path);
     };
 
     const handleDelete: MouseEventHandler = (e) => {
@@ -35,7 +35,7 @@ const FileEntry: FC<Props> = ({ file }) => {
 
         if (confirm("Are you sure you want to remove this scene?")) {
             removeFile(file.path);
-            getRuntime().currentFile = "main.js";
+            setCurrentFile("main.js");
         }
     };
 

diff --git a/src/hooks/useEditor.ts b/src/hooks/useEditor.ts
@@ -26,6 +26,8 @@ type EditorStore = {
     update: (value?: string) => void;
     run: () => void;
     getRuntime: () => EditorRuntime;
+    setRuntime: (runtime: Partial<EditorRuntime>) => void;
+    setCurrentFile: (currentFile: string) => void;
     setTheme: (theme: string) => void;
     updateImageDecorations: () => void;
     showNotification: (message: string) => void;
@@ -34,7 +36,7 @@ type EditorStore = {
     loadProject: (project: string) => void;
 };
 
-export const useEditor = create<EditorStore>((_set, get) => ({
+export const useEditor = create<EditorStore>((set, get) => ({
     runtime: {
         editor: null,
         monaco: null,
@@ -43,7 +45,25 @@ export const useEditor = create<EditorStore>((_set, get) => ({
         iframe: createRef() as MutableRefObject<HTMLIFrameElement>,
         isDefaultExample: false,
     },
+    setRuntime: (runtime) => {
+        set((state) => ({
+            runtime: {
+                ...state.runtime,
+                ...runtime,
+            },
+        }));
+    },
     getRuntime: () => get().runtime,
+    setCurrentFile: (currentFile) => {
+        set((state) => ({
+            runtime: {
+                ...state.runtime,
+                currentFile,
+            },
+        }));
+
+        get().update();
+    },
     update: (customValue?: string) => {
         if (customValue) {
             debug(0, "Editor value updated with custom value");