@netless/telebox-insider 0.3.0-beta.2 → 0.3.0-beta.4

package/package.json

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

package/src/TeleBoxManager/MaxTitleBar/index.ts

@@ -12,11 +12,12 @@ export interface MaxTitleBarConfig extends DefaultTitleBarConfig {
     boxes: MaxTitleBarTeleBox[];
     containerRect: TeleBoxRect;
     focusedBox?: MaxTitleBarTeleBox;
-    boxesStatus?: Map<string, TeleBoxState>;
+    getBoxesStatus?: () => Map<string, TeleBoxState>;
 }
 
 export class MaxTitleBar extends DefaultTitleBar {
-    public boxesStatus?: Map<string, TeleBoxState>;
+
+    public getBoxesStatus?: MaxTitleBarConfig["getBoxesStatus"];
     public constructor(config: MaxTitleBarConfig) {
         super(config);
 
@@ -24,22 +25,27 @@ export class MaxTitleBar extends DefaultTitleBar {
         this.focusedBox = config.focusedBox;
         this.containerRect = config.containerRect;
         this.darkMode = config.darkMode;
-        this.boxesStatus = config.boxesStatus;
+        this.getBoxesStatus = config.getBoxesStatus;
     }
-
     public hasMaximizedBoxInStatus(): boolean {
-        if (!this.boxesStatus || this.boxesStatus.size === 0) {
-            return false
+        if (this.getBoxesStatus) {
+            const boxesStatus = this.getBoxesStatus();
+            if (boxesStatus.size) {
+                const hasMaximizedBox = [...boxesStatus.values()].find((state) => state === TELE_BOX_STATE.Maximized);
+                return !!hasMaximizedBox;
+            }
         }
-        const hasMaximizedBox = [...this.boxesStatus.values()].find((state) => state === TELE_BOX_STATE.Maximized);
-        return !!hasMaximizedBox;
+        return false;
     }
 
     public get MaximizedBoxes(): MaxTitleBarTeleBox[] {
-        if (!this.boxesStatus || this.boxesStatus.size === 0) {
-            return [];
+        if (this.getBoxesStatus) {
+            const boxesStatus = this.getBoxesStatus();
+            if (boxesStatus) {
+                return this.boxes.filter((box) => boxesStatus && boxesStatus.get(box.id) === TELE_BOX_STATE.Maximized);
+            }
         }
-        return this.boxes.filter((box) => this.boxesStatus && this.boxesStatus.get(box.id) === TELE_BOX_STATE.Maximized);
+        return [];
     }
 
     /**
@@ -103,8 +109,7 @@ export class MaxTitleBar extends DefaultTitleBar {
         }
     }
 
-    public setBoxesStatus(boxesStatus: Map<string, TeleBoxState>): void {
-        this.boxesStatus = boxesStatus;
+    public updateBoxesStatus(): void {
         if (this.hasMaximizedBoxInStatus()) {
             this.setBoxStatus(TELE_BOX_STATE.Maximized);
         }

package/src/TeleBoxManager/index.ts

@@ -201,6 +201,7 @@ export class TeleBoxManager {
                                         this.setBoxStatus(box.id, TELE_BOX_STATE.Normal);
                                     }
                                 });
+                                this.effectBoxStatusChange();
                             }
                             minimized$.setValue(false);
                         }
@@ -315,12 +316,15 @@ export class TeleBoxManager {
             state: state$.value,
             boxes: this.boxes$.value,
             containerRect: containerRect$.value,
-            boxesStatus: this.boxesStatus$,
+            getBoxesStatus: () => {
+                return this.boxesStatus$;
+            },
             onEvent: (event): void => {
                 switch (event.type) {
                     case TELE_BOX_DELEGATE_EVENT.Maximize: {
                         if (this.hasBoxesStatus() && this.maxTitleBar.focusedBox?.id) {
                             this.setBoxStatus(this.maxTitleBar.focusedBox.id, TELE_BOX_STATE.Normal);
+                            this.effectBoxStatusChange();
                             this.makeMaximizedTopBoxFocus();
                         } else {
                             maximized$.setValue(!maximized$.value);
@@ -330,6 +334,7 @@ export class TeleBoxManager {
                     case TELE_BOX_DELEGATE_EVENT.Minimize: {
                         if (this.hasBoxesStatus() && this.maxTitleBar.focusedBox?.id) {
                             this.setBoxStatus(this.maxTitleBar.focusedBox.id, TELE_BOX_STATE.Minimized);
+                            this.effectBoxStatusChange();
                             this.makeMaximizedTopBoxFocus();
                         } else {
                             minimized$.setValue(true);
@@ -433,31 +438,53 @@ export class TeleBoxManager {
     }
 
     public setBoxStatus(boxId: string, boxStatus?: TeleBoxState, skipUpdate = false): void {
-        const boxesStatus = this.boxesStatus$;
         if (boxStatus) {
-            const oldBoxStatus = boxesStatus.get(boxId);
-            boxesStatus.set(boxId, boxStatus);
+            const oldBoxStatus = this.boxesStatus$.get(boxId);
+            this.boxesStatus$.set(boxId, boxStatus);
             if (boxStatus === TELE_BOX_STATE.Minimized && oldBoxStatus !== TELE_BOX_STATE.Minimized) {
                 this.setLastNotMinimizedBoxStatus(boxId, oldBoxStatus, skipUpdate);
+                this.effectLastNotMinimizedBoxStatusChange();
             } else if (oldBoxStatus === TELE_BOX_STATE.Minimized && boxStatus !== TELE_BOX_STATE.Minimized) {
                 this.setLastNotMinimizedBoxStatus(boxId, undefined, skipUpdate);
+                this.effectLastNotMinimizedBoxStatusChange();
             }
         } else {
-            boxesStatus.delete(boxId);
+            this.boxesStatus$.delete(boxId);
             this.setLastNotMinimizedBoxStatus(boxId, undefined, skipUpdate);
+            this.effectLastNotMinimizedBoxStatusChange();
         }
-        this.setBoxesStatus(boxesStatus, skipUpdate);
         if (!skipUpdate) {
             this.events.emit(TELE_BOX_MANAGER_EVENT.BoxStatus, { id: boxId, boxStatus});
         }
     }
 
-    private setBoxesStatus(boxesStatus: Map<string, TeleBoxState>, skipUpdate = false): void {
+    public getBoxStatus(boxId: string): TeleBoxState | undefined {
+        return this.boxesStatus$.get(boxId);
+    }
+
+    public getLastNotMinimizedBoxStatus(boxId: string): NotMinimizedBoxState | undefined {
+        return this.lastNotMinimizedBoxesStatus$.get(boxId);
+    }
+
+    public get boxesStatus(): ReadonlyMap<string, TeleBoxState> {
+        return this.boxesStatus$;
+    }
+
+    public get lastNotMinimizedBoxesStatus(): ReadonlyMap<string, NotMinimizedBoxState> {
+        return this.lastNotMinimizedBoxesStatus$;
+    }
+
+    public setBoxesStatus(boxesStatus: Map<string, TeleBoxState>, skipUpdate = false): void {
+        this.boxesStatus$ = boxesStatus;
+        this.effectBoxStatusChange(skipUpdate);
+    }
+
+    private effectBoxStatusChange(skipUpdate = false){
         let topBox:TeleBox | undefined;
         const topBoxId = this.topBox?.id;
         let hasMinimizedBox = false;
         this.boxes.forEach((box) => {
-            const boxStatus = boxesStatus.get(box.id);
+            const boxStatus = this.boxesStatus$.get(box.id);
             if (boxStatus) {
                 if (boxStatus !== TELE_BOX_STATE.Minimized && box.zIndex > (topBox?.zIndex ?? 0)) {
                     topBox = box;
@@ -484,7 +511,7 @@ export class TeleBoxManager {
             this.focusTopBox();
         }
         if (this.maxTitleBar) {
-            this.maxTitleBar.setBoxesStatus(boxesStatus);
+            this.maxTitleBar.updateBoxesStatus();
         }
     }
     
@@ -497,24 +524,25 @@ export class TeleBoxManager {
     }
 
     public setLastNotMinimizedBoxStatus(boxId: string, lastNotMinimizedBoxStatus?: NotMinimizedBoxState, skipUpdate = false): void {
-        const boxesStatus = this.lastNotMinimizedBoxesStatus$;
         if (lastNotMinimizedBoxStatus) {
-            boxesStatus.set(boxId, lastNotMinimizedBoxStatus);
+            this.lastNotMinimizedBoxesStatus$.set(boxId, lastNotMinimizedBoxStatus);
         } else {
-            boxesStatus.delete(boxId);
+            this.lastNotMinimizedBoxesStatus$.delete(boxId);
         }
-        this.setLastNotMinimizedBoxesStatus(boxesStatus, skipUpdate);
         if (!skipUpdate) {
             this.events.emit(TELE_BOX_MANAGER_EVENT.LastNotMinimizedBoxStatus, { id: boxId, boxStatus:lastNotMinimizedBoxStatus});
         }
     }
 
-    private setLastNotMinimizedBoxesStatus(lastNotMinimizedBoxesStatus: Map<string, NotMinimizedBoxState>, skipUpdate = false): void {
+    public setLastNotMinimizedBoxesStatus(lastNotMinimizedBoxesStatus: Map<string, NotMinimizedBoxState>, skipUpdate = false): void {
+        this.lastNotMinimizedBoxesStatus$ = lastNotMinimizedBoxesStatus;
+        this.effectLastNotMinimizedBoxStatusChange(skipUpdate);
+    }
+
+    private effectLastNotMinimizedBoxStatusChange(skipUpdate = false){
         this.boxes.forEach((box) => {
-            const boxStatus = lastNotMinimizedBoxesStatus.get(box.id);
-            if (boxStatus) {
-                box.setLastNotMinimizedBoxStatus(boxStatus, skipUpdate);
-            }
+            const boxStatus = this.lastNotMinimizedBoxesStatus$.get(box.id);
+            box.setLastNotMinimizedBoxStatus(boxStatus, skipUpdate);
         });
     }
 
@@ -553,10 +581,12 @@ export class TeleBoxManager {
 
         if (box.boxStatus) {
             this.setBoxStatus(box.id, box.boxStatus, true);
+            this.effectBoxStatusChange(true);
         }
 
         if (box._lastNotMinimizedBoxStatus$.value) {
             this.setLastNotMinimizedBoxStatus(box.id, box._lastNotMinimizedBoxStatus$.value, true);
+            this.effectLastNotMinimizedBoxStatusChange();
         }
 
         box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Maximize, () => {
@@ -570,6 +600,7 @@ export class TeleBoxManager {
                         }
                     });
                 }
+                this.effectBoxStatusChange();
                 this.makeMaximizedTopBoxFocus();
             } else {
                 this.setMaximized(!this.maximized);
@@ -580,6 +611,7 @@ export class TeleBoxManager {
             if (box.boxStatus) {
                 const oldBoxStatus = box.boxStatus;
                 this.setBoxStatus(box.id, TELE_BOX_STATE.Minimized);
+                this.effectBoxStatusChange();
                 if (oldBoxStatus === TELE_BOX_STATE.Maximized) {
                     this.makeMaximizedTopBoxFocus();
                 }
@@ -674,16 +706,20 @@ export class TeleBoxManager {
         skipUpdate = false
     ): ReadonlyTeleBox | undefined {
         const box = this.getBox(boxOrID);
-        if (box) {
-            this.setBoxStatus(box.id, undefined, skipUpdate);
-            this.setLastNotMinimizedBoxStatus(box.id, undefined, skipUpdate);
-        }
         const index = this.getBoxIndex(boxOrID);
         if (index >= 0) {
             const boxes = this.boxes.slice();
             const deletedBoxes = boxes.splice(index, 1);
             this.boxes$.setValue(boxes);
             deletedBoxes.forEach((box) => box.destroy());
+            if (box) {
+                this.setBoxStatus(box.id, undefined, skipUpdate);
+                this.boxesStatus$.delete(box.id);
+                this.effectBoxStatusChange(skipUpdate);
+                this.setLastNotMinimizedBoxStatus(box.id, undefined, skipUpdate);
+                this.lastNotMinimizedBoxesStatus$.delete(box.id);
+                this.effectLastNotMinimizedBoxStatusChange();
+            }
             if (!skipUpdate) {
                 if (this.boxes.length <= 0) {
                     this.setMaximized(false);
@@ -874,9 +910,11 @@ export class TeleBoxManager {
         }
         if (config.boxStatus) {
             this.setBoxStatus(box.id, config.boxStatus, skipUpdate);
+            this.effectBoxStatusChange(skipUpdate);
         }
         if (config.lastNotMinimizedBoxStatus) {
             this.setLastNotMinimizedBoxStatus(box.id, config.lastNotMinimizedBoxStatus, skipUpdate);
+            this.effectLastNotMinimizedBoxStatusChange();
         }
     }
 
@@ -939,7 +977,7 @@ export class TeleBoxManager {
                     return currentBox;
                 }
                 return topBox.zIndex > currentBox.zIndex ? topBox : currentBox;
-            });
+            }, );
             if (maximizedBox) {
                 this.maxTitleBar.focusBox(maximizedBox);
             }