@netless/telebox-insider 0.2.11 → 0.2.15

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netless/telebox-insider",
-    "version": "0.2.11",
+    "version": "0.2.15",
     "private": false,
     "description": "Window widget for Whiteboard",
     "license": "MIT",

package/src/TeleBoxManager/index.ts

@@ -59,7 +59,6 @@ export class TeleBoxManager {
         },
         collector,
         namespace = "telebox",
-        zIndex = 100,
         readonly = false,
     }: TeleBoxManagerConfig = {}) {
         this._sideEffect = new SideEffectManager();
@@ -67,7 +66,6 @@ export class TeleBoxManager {
 
         this.root = root;
         this.namespace = namespace;
-        this.zIndex = zIndex;
 
         this.boxes$ = createVal<TeleBox[]>([]);
         this.topBox$ = this.boxes$.derive((boxes) => {
@@ -346,8 +344,6 @@ export class TeleBoxManager {
 
     public readonly namespace: string;
 
-    public zIndex: number;
-
     public _darkMode$: Val<boolean, boolean>;
 
     public get darkMode(): boolean {
@@ -387,7 +383,7 @@ export class TeleBoxManager {
         smartPosition = true
     ): ReadonlyTeleBox {
         const box = new TeleBox({
-            zIndex: this.zIndex,
+            zIndex: this.topBox ? this.topBox.zIndex + 1 : 100,
             ...(smartPosition ? this.smartPosition(config) : config),
             darkMode: this.darkMode,
             prefersColorScheme: this.prefersColorScheme,
@@ -477,18 +473,18 @@ export class TeleBoxManager {
         const index = this.getBoxIndex(boxOrID);
         if (index >= 0) {
             const boxes = this.boxes.slice();
-            const deletedBox = boxes.splice(index, 1)[0];
+            const deletedBoxes = boxes.splice(index, 1);
             this.boxes$.setValue(boxes);
             this.focusTopBox();
-            deletedBox.destroy();
+            deletedBoxes.forEach((box) => box.destroy());
             if (!skipUpdate) {
                 if (this.boxes.length <= 0) {
                     this.setMaximized(false);
                     this.setMinimized(false);
                 }
-                this.events.emit(TELE_BOX_MANAGER_EVENT.Removed, boxes);
+                this.events.emit(TELE_BOX_MANAGER_EVENT.Removed, deletedBoxes);
             }
-            return deletedBox;
+            return deletedBoxes[0];
         }
         return;
     }
@@ -647,6 +643,9 @@ export class TeleBoxManager {
         if (config.fixRatio != null) {
             box.setFixRatio(config.fixRatio, skipUpdate);
         }
+        if (config.zIndex != null) {
+            box.setZIndex(config.zIndex);
+        }
         if (config.content != null) {
             box.mountContent(config.content);
         }
@@ -696,15 +695,13 @@ export class TeleBoxManager {
     }
 
     protected makeBoxTop(box: TeleBox, skipUpdate = false): void {
-        if (box !== this.topBox) {
-            const maxIndex = this.boxes.reduce(
-                (max, box) => Math.max(max, box.zIndex),
-                0
-            );
-            box.setZIndex(maxIndex + 1, skipUpdate);
-            this.topBox$.setValue(box);
-            if (!skipUpdate) {
-                this.events.emit(TELE_BOX_MANAGER_EVENT.ZIndex, box);
+        if (this.topBox) {
+            if (box !== this.topBox) {
+                box.setZIndex(this.topBox.zIndex + 1, skipUpdate);
+                this.topBox$.setValue(box);
+                if (!skipUpdate) {
+                    this.events.emit(TELE_BOX_MANAGER_EVENT.ZIndex, box);
+                }
             }
         }
     }

package/src/TeleBoxManager/typings.ts

@@ -14,7 +14,6 @@ export interface TeleBoxManagerConfig
         | "maximized"
         | "minimized"
         | "namespace"
-        | "zIndex"
         | "readonly"
     > {
     /** Element to mount boxes. */