@netless/telebox-insider 0.3.0-beta.7 → 0.3.0-beta.9

package/package.json

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

package/src/AppMenu/index.ts

@@ -13,7 +13,7 @@ export interface AppMenuProps {
 
 export class AppMenu {
   private readonly namespace: string = 'telebox-app-menu';
-  public readonly container: HTMLDivElement;
+  private container: HTMLDivElement;
   private readonly badge: HTMLDivElement = document.createElement('div');
   private readonly menuView: HTMLDivElement = document.createElement('div');
   private readonly manager: TeleBoxManager;
@@ -76,6 +76,14 @@ export class AppMenu {
     }
   };
 
+  public setContainer(container: HTMLDivElement){
+    if(this.container) {
+      this.container.remove();
+    }
+    this.container = container;
+    this.init();
+  }
+
   private createDefaultAppMenu(){
     this.badge.classList.add(this.c('app-menu-badge'));
     this.menuView.classList.add(this.c('app-menu-tooltip'));

package/src/TeleBoxManager/index.ts

@@ -211,6 +211,9 @@ export class TeleBoxManager {
                 collector.setVisible(minimized$.value);
                 collector.setReadonly(readonly$.value);
                 collector.setDarkMode(this._darkMode$.value);
+                if (this.useBoxesStatus && this.appMenu) {
+                    this.appMenu.setContainer(collector.$appMenuContainer);
+                }
                 this._sideEffect.add(() => {
                     collector.getBoxesStatus = () => {
                         return this.boxesStatus$;
@@ -393,7 +396,7 @@ export class TeleBoxManager {
                                 const box = this.getBox(targetBox.id);
                                 if (box) {
                                     let isFocusChanged = false;
-                                    if (this.topBox === box) {
+                                    if (box.focus) {
                                         this.blurBox(box);
                                         isFocusChanged = true;
                                     }
@@ -423,7 +426,7 @@ export class TeleBoxManager {
                                 const box = this.getBox(targetBox.id);
                                 if (box) {
                                     let isFocusChanged = false;
-                                    if (this.topBox === box) {
+                                    if (box.focus) {
                                         this.blurBox(box);
                                         isFocusChanged = true;
                                     }
@@ -606,13 +609,13 @@ export class TeleBoxManager {
             }
         });
         this.effectBoxStatusChange();
+        console.log("effectBoxesStatusTimerFunc===>newTopBox", newTopBox, curTopBox);
         if (newTopBox && curTopBox !== newTopBox) {
             this.topBox$.setValue(newTopBox);
-            this.focusBox(newTopBox, skipUpdate);
         }
         if (!newTopBox && curTopBox) {
             this.topBox$.setValue(undefined);
-            this.blurBox(curTopBox, skipUpdate);
+            // this.blurBox(curTopBox, skipUpdate);
         }
     }
 
@@ -909,10 +912,8 @@ export class TeleBoxManager {
         });
         box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Minimize, () => {
             if (box.boxStatus && this.useBoxesStatus) {
-                if (this.topBox === box) {
-                    if (this.topBox?.focus) {
-                        this.blurBox(this.topBox);
-                    }
+                if(box.focus) {
+                    this.blurBox(box);
                 }
                 this.setBox(box, {
                     status: TELE_BOX_STATE.Minimized,
@@ -926,6 +927,9 @@ export class TeleBoxManager {
             }
         });
         box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Close, () => {
+            if (this.useBoxesStatus && box.focus) {
+                this.blurBox(box);
+            }
             this.remove(box);
             this.focusTopBox();
         });