Merge pull request #624 from tuanchauict/browser-js

Integrate BrowserManager into AppContext

monosketch-svelte/src/app/app-context.ts

@@ -1,17 +1,42 @@
+import { TODO } from "$libs/todo";
+import { ShapeManager } from "$mono/shape/shape-manager";
+import { WorkspaceDao } from "$mono/store-manager/dao/workspace-dao";
+import { BrowserManager } from "$mono/window/browser-manager";
 import { LifecycleOwner } from 'lib/libs/flow';
 import { AppUiStateManager } from '$mono/ui-state-manager';
 
+/**
+ * Main class of the app to handle all kinds of events, UI, actions, etc.
+ */
 export class AppContext {
     appLifecycleOwner = new LifecycleOwner();
 
     appUiStateManager = new AppUiStateManager(this.appLifecycleOwner);
 
+    shapeManager = new ShapeManager();
+
     onStart = (): void => {
         this.appLifecycleOwner.onStart();
 
+        this.init();
+
         this.appUiStateManager.observeTheme(() => {
             console.log('Theme changed');
             // TODO: Update theme in the workspace
         });
     };
+
+    private init() {
+        const browserManager = new BrowserManager((url: string) => {
+            console.log('URL updated:', url);
+            // TODO: Update the workspace based on the URL
+            TODO("Update the workspace based on the URL");
+        });
+        browserManager.startObserveStateChange(
+            this.shapeManager.rootIdFlow,
+            this.appLifecycleOwner,
+            WorkspaceDao.instance);
+
+        // TODO: Replicate from MonoSketchApplication
+    }
 }

monosketch-svelte/src/lib/mono/window/window-viewmodel.ts

@@ -2,4 +2,6 @@ import { Flow } from '$libs/flow';
 
 export namespace WindowViewModel {
     export const windowSizeUpdateEventFlow = new Flow<boolean>(true);
+
+    export const applicationActiveStateFlow = new Flow<boolean>(true);
 }

monosketch-svelte/src/lib/ui/modal/recent-project/project-list/ProjectList.svelte

@@ -4,6 +4,7 @@ import { ProjectAction, type ProjectItem } from '../model';
 import { onDestroy, onMount } from 'svelte';
 import { LifecycleOwner } from '$libs/flow';
 import { projectDataViewModel } from '../viewmodel';
+import { BrowserManager } from "$mono/window/browser-manager";
 
 export let dismiss: () => void;
 
@@ -41,7 +42,8 @@ function onAction(item: ProjectItem, action: ProjectAction) {
             dismiss();
             break;
         case ProjectAction.OpenInNewTab:
-            console.log('open in new tab');
+            // Need to delay for a short time the action to ensure the modal is closed before opening the new tab
+            setTimeout(() => BrowserManager.openInNewTab(item.id), 10);
             dismiss();
             break;
         case ProjectAction.Remove:

monosketch-svelte/src/main.ts

@@ -1,9 +1,9 @@
 import '$assets/fonts/stylesheet.css';
 import '$style/main.scss';
-import App from './App.svelte';
 import { AppContext } from '$app/app-context';
 import { APP_CONTEXT } from '$mono/common/constant';
 import { WindowViewModel } from '$mono/window/window-viewmodel';
+import App from './App.svelte';
 
 const appContext = new AppContext();
 const context = new Map();
@@ -13,6 +13,18 @@ window.onresize = () => {
     WindowViewModel.windowSizeUpdateEventFlow.value = true;
 };
 
+window.onfocus = () => {
+    WindowViewModel.applicationActiveStateFlow.value = true;
+};
+
+window.onblur = () => {
+    WindowViewModel.applicationActiveStateFlow.value = false;
+};
+
+document.addEventListener('visibilitychange', () => {
+    WindowViewModel.applicationActiveStateFlow.value = document['visibilityState'] === 'visible';
+});
+
 const app = new App({
     // @ts-expect-error - Safe to ignore
     target: document.getElementById('app'),