Merge pull request #651 from tuanchauict/new-project

Fix New project flow
tuanchauict · Feb 13, 2025 · 1581602 · 1581602
2 parents 419c243 + 50f60a9
commit 1581602
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 29 deletions.
diff --git a/monosketch-svelte/src/lib/mono/action-manager/one-time-actions.ts b/monosketch-svelte/src/lib/mono/action-manager/one-time-actions.ts
@@ -76,7 +76,7 @@ export const OneTimeAction = {
     Idle: { type: 'Idle' } as OneTimeActionType,
 
     ProjectAction: {
-        RenameCurrentProject: (newName: string) => ({ type: 'RenameCurrentProject', newName }),
+        RenameCurrentProject: (newName: string): OneTimeActionType => ({ type: 'RenameCurrentProject', newName }),
         NewProject: { type: 'NewProject' } as OneTimeActionType,
         ExportSelectedShapes: { type: 'ExportSelectedShapes' } as OneTimeActionType,
         SwitchProject: (projectId: string): OneTimeActionType => ({ type: 'SwitchProject', projectId }),

diff --git a/monosketch-svelte/src/lib/ui/modal/rename-project/RenameProjectModal.svelte b/monosketch-svelte/src/lib/ui/modal/rename-project/RenameProjectModal.svelte
@@ -1,35 +1,28 @@
 <script lang="ts">
 import NoBackgroundModal from '../common/NoBackgroundModal.svelte';
 import ProjectNameTextField from './ProjectNameTextField.svelte';
-import { getContext, onMount } from 'svelte';
+import { getContext } from 'svelte';
 import type { Rect } from "$libs/graphics-geo/rect";
 import type { ProjectDataViewModel } from "$ui/nav/project/project-data-viewmodel";
 import { PROJECT_CONTEXT } from "$ui/nav/project/constants";
 
-export let projectId: string;
+export let projectName: string;
 export let targetBounds: Rect;
 
 const projectDataViewModel = getContext<ProjectDataViewModel>(PROJECT_CONTEXT);
 
-let name: string;
+let name: string = projectName;
 
 $: left = targetBounds.left;
 $: top = targetBounds.top + targetBounds.height + 6;
 
 function onDone() {
     if (name) {
-        projectDataViewModel.setProjectName(projectId, name);
+        projectDataViewModel.setCurrentProjectName(name);
     }
     // Reset the renaming project id to empty string. This will close the modal.
     projectDataViewModel.setRenamingProject('');
 }
-
-onMount(() => {
-    const project = projectDataViewModel.getProject(projectId);
-    if (project) {
-        name = project.name;
-    }
-});
 </script>
 
 <NoBackgroundModal onDismiss="{onDone}" {left} {top} width="{180}">

diff --git a/monosketch-svelte/src/lib/ui/nav/project/WorkingProjectView.svelte b/monosketch-svelte/src/lib/ui/nav/project/WorkingProjectView.svelte
@@ -68,7 +68,7 @@
 {/if}
 
 {#if isRenameProjectVisible && targetBounds}
-    <RenameProjectModal {projectId} {targetBounds}/>
+    <RenameProjectModal {projectName} {targetBounds}/>
 {/if}
 
 <style lang="scss">

diff --git a/monosketch-svelte/src/lib/ui/nav/project/project-data-viewmodel.ts b/monosketch-svelte/src/lib/ui/nav/project/project-data-viewmodel.ts
@@ -4,8 +4,8 @@
 
 import type { AppContext } from "$app/app-context";
 import { Flow, LifecycleOwner } from '$libs/flow';
+import { OneTimeAction } from "$mono/action-manager/one-time-actions";
 import { type ProjectItem } from 'lib/ui/nav/project/model';
-import { UUID } from '$mono/uuid';
 
 export class ProjectDataViewModel {
     private _projectFlow: Flow<ProjectItem[]> = new Flow();
@@ -19,9 +19,8 @@ export class ProjectDataViewModel {
 
     constructor(private appContext: AppContext) {
         this.updateProjectList();
-        this.openingProjectFlow = Flow.combine3(
+        this.openingProjectFlow = Flow.combine2(
             appContext.shapeManager.rootIdFlow,
-            this.renamingProjectIdFlow,
             appContext.workspaceDao.workspaceUpdateFlow,
             (id) => this.getProject(id),
         );
@@ -37,26 +36,26 @@ export class ProjectDataViewModel {
     }
 
     newProject() {
-        const newProject: ProjectItem = {
-            id: UUID.generate(),
-            name: 'New Project',
-        };
-        this.updateProjectList();
-        this.openProject(newProject.id);
-        this.setRenamingProject(newProject.id);
+        this.appContext.actionManager.setOneTimeAction(OneTimeAction.ProjectAction.NewProject);
+
+        // Delay for a short time to ensure the new project is created before renaming.
+        // TODO: Find a better way to handle this.
+        setTimeout(() => {
+            this.setRenamingProject(this.appContext.shapeManager.rootIdFlow.value || '');
+        }, 100);
     }
 
     openProject(id: string) {
-        // TODO: notify changing project with id
-        console.log('Open project with id:', id);
+        this.appContext.actionManager.setOneTimeAction(OneTimeAction.ProjectAction.SwitchProject(id));
     }
 
     confirmDeletingProject(id: string) {
         this.deletingProjectIdFlow.value = id;
     }
 
     deleteProject(id: string) {
-        this._projectFlow.value = this._projectFlow.value!.filter((item) => item.id !== id);
+        this.appContext.actionManager.setOneTimeAction(OneTimeAction.ProjectAction.RemoveProject(id));
+        this.updateProjectList();
     }
 
     cancelDeletingProject() {
@@ -67,11 +66,11 @@ export class ProjectDataViewModel {
         this.renamingProjectIdFlow.value = id;
     }
 
-    setProjectName(id: string, name: string) {
-        this.appContext.workspaceDao.getObject(id).name = name;
+    setCurrentProjectName(name: string) {
+        this.appContext.actionManager.setOneTimeAction(OneTimeAction.ProjectAction.RenameCurrentProject(name));
     }
 
-    getProject(id: string): ProjectItem {
+    private getProject(id: string): ProjectItem {
         const objectDao = this.appContext.workspaceDao.getObject(id);
         return {
             id,