@netless/telebox-insider 0.3.1-beta.0 → 0.3.2-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/telebox-insider",
-  "version": "0.3.1-beta.0",
+  "version": "0.3.2-beta.0",
   "private": false,
   "description": "Window widget for Whiteboard",
   "author": "CRIMX <straybugs@gmail.com> (https://github.com/crimx/)",

package/src/TeleBox/index.ts

@@ -267,7 +267,11 @@ export class TeleBox {
             }
         });
 
-        const maximized$ = createVal(maximized);
+        const maximized$ = createVal(
+            maximized || forceMaximized,
+            (next, previous) =>
+                next === previous || (forceMaximized$.value && !next)
+        );
         maximized$.reaction((maximized, _, skipUpdate) => {
             if (!skipUpdate) {
                 this.events.emit(TELE_BOX_EVENT.Maximized, maximized);
@@ -489,7 +493,8 @@ export class TeleBox {
             this.titleBar.setReadonly(readonly);
         });
         forceMaximized$.reaction((forceMaximized) => {
-            this.titleBar.setForceMaximized(forceMaximized);
+            if (forceMaximized) maximized$.setValue(true);
+            this.titleBar.setForceMaximized?.(forceMaximized);
         });
         boxStatus$.reaction((boxStatus) => {
             this.titleBar.setBoxStatus(boxStatus);

package/src/TeleBoxManager/index.ts

@@ -167,13 +167,18 @@ export class TeleBoxManager {
 
         const minimized$ = createVal(minimized);
 
-        const maximized$ = createVal(maximized);
         const forceMaximized$ = createVal(forceMaximized);
+        const maximized$ = createVal(
+            maximized || forceMaximized,
+            (next, previous) =>
+                next === previous || (forceMaximized$.value && !next)
+        );
         forceMaximized$.reaction((forceMaximized, _, skipUpdate) => {
+            if (forceMaximized) maximized$.setValue(true, skipUpdate);
             this.boxes.forEach((box) =>
                 box.setForceMaximized(forceMaximized, skipUpdate)
             );
-            this.maxTitleBar?.setForceMaximized(forceMaximized);
+            this.maxTitleBar?.setForceMaximized?.(forceMaximized);
         });
         maximized$.reaction((maximized, _, skipUpdate) => {
             this.boxes.forEach((box) =>
@@ -328,6 +333,7 @@ export class TeleBoxManager {
                 if (id) {
                     const box = this.getBox(id);
                     if (box) {
+                        if (this.lazyFocusRequestHandler?.(box.id)) return;
                         if (!this.useBoxesStatus) {
                             this.makeBoxTop(box);
                         } else {
@@ -364,7 +370,7 @@ export class TeleBoxManager {
                                 this.makeMaximizedTopBoxFocus();
                             }
                         }
-                        this.focusBox(box);
+                        this.focusBoxCommitted(box);
                         return;
                     }
                 }
@@ -467,6 +473,10 @@ export class TeleBoxManager {
                         break;
                     }
                     case TELE_BOX_EVENT.Close: {
+                        const targetBox = this.hasBoxesStatus()
+                            ? this.maxTitleBar.focusedBox || this.getMaximizedTopBox()
+                            : this.topBox;
+                        if (targetBox && this.closeRequestHandler?.(targetBox.id)) break;
                         if (this.hasBoxesStatus()) {
                             let targetBox = this.maxTitleBar.focusedBox;
                             if (!targetBox) {
@@ -582,6 +592,22 @@ export class TeleBoxManager {
         return this._state$.value;
     }
 
+    public setUseBoxesStatus(useBoxesStatus: boolean): void {
+        if (this.useBoxesStatus === useBoxesStatus) return;
+        this.useBoxesStatus = useBoxesStatus;
+        this.boxes.forEach((box) =>
+            box.setBoxStatus(useBoxesStatus ? this.boxesStatus$.get(box.id) : undefined, true)
+        );
+        this.boxes$.setValue([...this.boxes]);
+        if (useBoxesStatus) {
+            this.appMenu ||= this.createMinimizedAppMenu();
+            this.effectBoxStatusChange();
+        } else {
+            this.appMenu?.render(new Map());
+            this.collector?.setVisible(false);
+        }
+    }
+
     /** @deprecated use setMaximized and setMinimized instead */
     public setState(state: TeleBoxState, skipUpdate = false): this {
         if (state === TELE_BOX_STATE.Normal && this.forceMaximized) {
@@ -1021,6 +1047,9 @@ export class TeleBoxManager {
                 ? this.getMaxForceTopBoxZIndex() + 1
                 : this.getMaxNormalBoxZIndex() + 1,
             ...(smartPosition ? this.smartPosition(config) : config),
+            ...(!this.useBoxesStatus
+                ? { boxStatus: undefined, lastNotMinimizedBoxStatus: undefined }
+                : {}),
             darkMode: this.darkMode,
             prefersColorScheme: this.prefersColorScheme,
             maximized: this.maximized,
@@ -1124,6 +1153,7 @@ export class TeleBoxManager {
             }
         });
         box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Close, () => {
+            if (this.closeRequestHandler?.(box.id)) return;
             if (this.useBoxesStatus && box.focus) {
                 this.blurBox(box);
             }
@@ -1329,9 +1359,26 @@ export class TeleBoxManager {
         return `${this.namespace}-${className}`;
     }
 
+    private lazyFocusRequestHandler?: (boxId: string) => boolean;
+    private closeRequestHandler?: (boxId: string) => boolean;
+    private committedFocusDepth = 0;
+
+    public setLazyFocusRequestHandler(handler?: (boxId: string) => boolean): void {
+        this.lazyFocusRequestHandler = handler;
+    }
+
+    public setCloseRequestHandler(handler?: (boxId: string) => boolean): void {
+        this.closeRequestHandler = handler;
+    }
+
     public focusBox(boxOrID: string | TeleBox, skipUpdate = false): void {
         const targetBox = this.getBox(boxOrID);
         if (targetBox) {
+            if (
+                !skipUpdate &&
+                !this.committedFocusDepth &&
+                this.lazyFocusRequestHandler?.(targetBox.id)
+            ) return;
             this.boxes.forEach((box) => {
                 if (targetBox === box) {
                     let focusChanged = false;
@@ -1360,6 +1407,15 @@ export class TeleBoxManager {
         }
     }
 
+    public focusBoxCommitted(boxOrID: string | TeleBox, skipUpdate = false): void {
+        this.committedFocusDepth = (this.committedFocusDepth ?? 0) + 1;
+        try {
+            this.focusBox(boxOrID, skipUpdate);
+        } finally {
+            this.committedFocusDepth -= 1;
+        }
+    }
+
     public focusTopBox(): void {
         if (this.topBox && !this.topBox.focus) {
             return this.focusBox(this.topBox);

package/src/TeleTitleBar/typings.ts

@@ -27,7 +27,7 @@ export interface TeleTitleBar {
 
     setReadonly(readonly: boolean): void;
 
-    setForceMaximized(forceMaximized: boolean): void;
+    setForceMaximized?(forceMaximized: boolean): void;
 
     render(): HTMLElement;