add editor loading screen

Author: nicoecheza

packages/main/src/mainWindow.ts

@@ -14,6 +14,8 @@ async function createWindow() {
     },
   });
 
+  browserWindow.setMenuBarVisibility(false);
+
   /**
    * If the 'show' property of the BrowserWindow's constructor is omitted from the initialization options,
    * it then defaults to 'true'. This can cause flickering as the window loads the html content,

packages/renderer/src/components/Dropdown/component.tsx

@@ -12,16 +12,19 @@ function Dropdown(props: Props) {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
 
-  const handleClick = useCallback((event: MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
+  const handleClick = useCallback((e: MouseEvent<HTMLElement>) => {
+    e.stopPropagation();
+    setAnchorEl(e.currentTarget);
   }, []);
 
-  const handleSelect = useCallback((_: MouseEvent<HTMLLIElement>, option: Option) => {
+  const handleSelect = useCallback((e: MouseEvent<HTMLLIElement>, option: Option) => {
+    e.stopPropagation();
     setAnchorEl(null);
     option.handler();
   }, []);
 
-  const handleClose = useCallback(() => {
+  const handleClose = useCallback((e: MouseEvent<HTMLElement>) => {
+    e.stopPropagation();
     setAnchorEl(null);
   }, []);
 

packages/renderer/src/components/ProjectCard/component.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useState } from 'react';
 import ViewModuleIcon from '@mui/icons-material/ViewModule';
 import cx from 'classnames';
-import { Link } from 'react-router-dom';
 
 import { getThumbnailUrl } from '/@/modules/project';
 import { t } from '/@/modules/store/translation/utils';
@@ -13,10 +12,14 @@ import type { Props } from './types';
 
 import './styles.css';
 
-export function ProjectCard({ project, onDelete, onDuplicate }: Props) {
+export function ProjectCard({ project, onClick, onDelete, onDuplicate }: Props) {
   const [open, setOpen] = useState(false);
   const parcels = project.layout.cols * project.layout.rows;
 
+  const handleClick = useCallback(() => {
+    if (onClick) onClick(project);
+  }, [project, onClick]);
+
   const handleDeleteProject = useCallback(() => {
     onDelete(project);
     handleCloseModal();
@@ -48,36 +51,37 @@ export function ProjectCard({ project, onDelete, onDuplicate }: Props) {
   ];
 
   return (
-    <div className={cx('ProjectCard', { 'has-thumbnail': !!thumbnailUrl })}>
-      <Link
-        to={`/editor?path=${encodeURIComponent(project.path)}`}
-        className="project-thumbnail"
-        style={thumbnailUrl ? { backgroundImage: `url(${thumbnailUrl})` } : {}}
-      />
-      <div className="project-data">
-        <Link
-          to={`/editor?path=${encodeURIComponent(project.path)}`}
-          className="title-wrapper"
-        >
-          <div className="title">{project.title}</div>
-          <div
-            className="description"
-            title={project.description}
-          >
-            <ViewModuleIcon className="Icon" /> {t('scene_list.parcel_count', { parcels })}
-          </div>
-        </Link>
-        <Dropdown
-          className="options-dropdown"
-          options={dropdownOptions}
+    <>
+      <div
+        className={cx('ProjectCard', { 'has-thumbnail': !!thumbnailUrl })}
+        onClick={handleClick}
+      >
+        <div
+          className="project-thumbnail"
+          style={thumbnailUrl ? { backgroundImage: `url(${thumbnailUrl})` } : {}}
         />
+        <div className="project-data">
+          <div className="title-wrapper">
+            <div className="title">{project.title}</div>
+            <div
+              className="description"
+              title={project.description}
+            >
+              <ViewModuleIcon className="Icon" /> {t('scene_list.parcel_count', { parcels })}
+            </div>
+          </div>
+          <Dropdown
+            className="options-dropdown"
+            options={dropdownOptions}
+          />
+        </div>
       </div>
       <DeleteProject
         open={open}
         project={project}
         onClose={handleCloseModal}
         onSubmit={handleDeleteProject}
       />
-    </div>
+    </>
   );
 }

packages/renderer/src/components/ProjectCard/types.ts

@@ -2,6 +2,7 @@ import type { Project } from '/shared/types/projects';
 
 export type Props = {
   project: Project;
+  onClick: (project: Project) => void;
   onDelete: (project: Project) => void;
   onDuplicate: (project: Project) => void;
 };

packages/renderer/src/components/SceneList/component.tsx

@@ -29,7 +29,8 @@ function NoScenesAnchor(content: string) {
 }
 
 export function SceneList({ projects, sortBy, onSort }: Props) {
-  const { deleteProject, duplicateProject, importProject, createProject } = useWorkspace();
+  const { selectProject, deleteProject, duplicateProject, importProject, createProject } =
+    useWorkspace();
 
   const sort = useCallback(
     (_sortBy: SortBy) => {
@@ -65,6 +66,7 @@ export function SceneList({ projects, sortBy, onSort }: Props) {
         <ProjectCard
           key={project.path}
           project={project}
+          onClick={selectProject}
           onDelete={deleteProject}
           onDuplicate={duplicateProject}
         />

packages/renderer/src/hooks/useEditor.ts

@@ -1,22 +1,14 @@
-import { useCallback, useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useCallback } from 'react';
 
 import { useDispatch, useSelector } from '#store';
 
 import type { DeployOptions } from '/shared/types/ipc';
 import { actions } from '/@/modules/store/editor';
 
-import { useWorkspace } from './useWorkspace';
-
 export const useEditor = () => {
   const dispatch = useDispatch();
   const editor = useSelector(state => state.editor);
-  const [search] = useSearchParams();
-  const path = useMemo(() => search.get('path'), [search]);
-  const workspace = useWorkspace();
-  const project = useMemo(() => {
-    return workspace.projects.find(project => project.path === path);
-  }, [workspace.projects, path]);
+  const { project } = editor;
 
   const startInspector = useCallback(() => {
     dispatch(actions.startInspector());

packages/renderer/src/hooks/useWorkspace.ts

@@ -1,48 +1,60 @@
 import { useDispatch, useSelector } from '#store';
 import { useCallback } from 'react';
-import { actions } from '/@/modules/store/workspace';
+
 import { type Project, type SortBy } from '/shared/types/projects';
 
+import { actions as editorActions } from '/@/modules/store/editor';
+import { actions as workspaceActions } from '/@/modules/store/workspace';
+import { useNavigate } from 'react-router-dom';
+
 export const useWorkspace = () => {
   const dispatch = useDispatch();
+  const navigate = useNavigate();
   const workspace = useSelector(state => state.workspace);
 
   const getWorkspace = useCallback(() => {
-    dispatch(actions.getWorkspace());
+    dispatch(workspaceActions.getWorkspace());
   }, []);
 
   const setSortBy = useCallback((type: SortBy) => {
-    dispatch(actions.setSortBy(type));
+    dispatch(workspaceActions.setSortBy(type));
+  }, []);
+
+  const selectProject = useCallback((project: Project) => {
+    dispatch(editorActions.setProject(project));
+    navigate('/editor');
   }, []);
 
   const createProject = useCallback(() => {
-    dispatch(actions.createProject());
+    dispatch(workspaceActions.createProject());
+    navigate('/editor');
   }, []);
 
   const deleteProject = useCallback((project: Project) => {
-    dispatch(actions.deleteProject(project.path));
+    dispatch(workspaceActions.deleteProject(project.path));
   }, []);
 
   const duplicateProject = useCallback((project: Project) => {
-    dispatch(actions.duplicateProject(project.path));
+    dispatch(workspaceActions.duplicateProject(project.path));
   }, []);
 
   const importProject = useCallback(() => {
-    dispatch(actions.importProject());
+    dispatch(workspaceActions.importProject());
   }, []);
 
   const reimportProject = useCallback((path: string) => {
-    dispatch(actions.reimportProject(path));
+    dispatch(workspaceActions.reimportProject(path));
   }, []);
 
   const unlistProjects = useCallback((paths: string[]) => {
-    dispatch(actions.unlistProjects(paths));
+    dispatch(workspaceActions.unlistProjects(paths));
   }, []);
 
   return {
     ...workspace,
     getWorkspace,
     setSortBy,
+    selectProject,
     createProject,
     deleteProject,
     duplicateProject,

packages/renderer/src/modules/store/editor/slice.ts

@@ -1,5 +1,8 @@
 import { editor } from '#preload';
-import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import { createAsyncThunk, createSlice, type PayloadAction } from '@reduxjs/toolkit';
+
+import { type Project } from '/shared/types/projects';
+import { actions as workspaceActions } from '../workspace';
 
 // actions
 export const startInspector = createAsyncThunk('editor/startInspector', editor.startInspector);
@@ -9,6 +12,7 @@ export const openPreview = createAsyncThunk('editor/openPreview', editor.openPre
 
 // state
 export type EditorState = {
+  project?: Project;
   inspectorPort: number;
   previewPort: number;
   publishPort: number;
@@ -34,7 +38,11 @@ const initialState: EditorState = {
 export const slice = createSlice({
   name: 'editor',
   initialState,
-  reducers: {},
+  reducers: {
+    setProject: (state, { payload: project }: PayloadAction<Project>) => {
+      state.project = project;
+    },
+  },
   extraReducers: builder => {
     builder.addCase(startInspector.pending, state => {
       state.inspectorPort = 0;
@@ -72,6 +80,12 @@ export const slice = createSlice({
       state.error = action.error.message || null;
       state.loadingPublish = false;
     });
+    builder.addCase(workspaceActions.createProject.pending, state => {
+      state.project = undefined;
+    });
+    builder.addCase(workspaceActions.createProject.fulfilled, (state, action) => {
+      state.project = action.payload;
+    });
   },
 });