@netless/telebox-insider 0.2.14 → 0.2.18

package/package.json

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

package/src/TeleBox/index.ts

@@ -935,7 +935,7 @@ export class TeleBox {
                 }
                 last$userStyles = $userStyles;
                 if ($userStyles) {
-                    $content.appendChild($userStyles);
+                    $contentWrap.appendChild($userStyles);
                 }
             });
         });

package/src/TeleBoxManager/index.ts

@@ -37,6 +37,7 @@ type ValConfig = {
     prefersColorScheme: Val<TeleBoxColorScheme, boolean>;
     containerRect: Val<TeleBoxRect, boolean>;
     collector: Val<TeleBoxCollector | null>;
+    collectorRect: Val<TeleBoxRect | undefined>;
     readonly: Val<boolean, boolean>;
     minimized: Val<boolean, boolean>;
     maximized: Val<boolean, boolean>;
@@ -197,25 +198,36 @@ export class TeleBoxManager {
             collector$.value?.setDarkMode(darkMode);
         });
 
+        const calcCollectorRect = (): TeleBoxRect | undefined => {
+            if (collector$.value?.$collector) {
+                const { x, y, width, height } =
+                    collector$.value.$collector.getBoundingClientRect();
+                const rootRect = this.root.getBoundingClientRect();
+                return {
+                    x: x - rootRect.x,
+                    y: y - rootRect.y,
+                    width,
+                    height,
+                };
+            }
+            return;
+        };
+
+        const collectorRect$ = createVal(
+            minimized$.value ? calcCollectorRect() : void 0
+        );
+        collectorRect$.subscribe((collectorRect, _, skipUpdate) => {
+            this.boxes.forEach((box) => {
+                box.setCollectorRect(collectorRect, skipUpdate);
+            });
+        });
+
         minimized$.subscribe((minimized, _, skipUpdate) => {
             collector$.value?.setVisible(minimized);
 
             if (minimized) {
                 if (collector$.value?.$collector) {
-                    const { x, y, width, height } =
-                        collector$.value.$collector.getBoundingClientRect();
-                    const rootRect = this.root.getBoundingClientRect();
-                    this.boxes.forEach((box) => {
-                        box.setCollectorRect(
-                            {
-                                x: x - rootRect.x,
-                                y: y - rootRect.y,
-                                width,
-                                height,
-                            },
-                            true
-                        );
-                    });
+                    collectorRect$.setValue(calcCollectorRect());
                 } else if (import.meta.env.DEV) {
                     console.warn("No collector for minimized boxes.");
                 }
@@ -255,6 +267,7 @@ export class TeleBoxManager {
                     const box = this.getBox(id);
                     if (box) {
                         this.focusBox(box);
+                        this.makeBoxTop(box);
                         return;
                     }
                 }
@@ -293,6 +306,7 @@ export class TeleBoxManager {
                     }
                     case TELE_BOX_EVENT.Close: {
                         this.removeTopBox();
+                        this.focusTopBox();
                         break;
                     }
                     default: {
@@ -315,6 +329,7 @@ export class TeleBoxManager {
             prefersColorScheme: prefersColorScheme$,
             containerRect: containerRect$,
             collector: collector$,
+            collectorRect: collectorRect$,
             readonly: readonly$,
             fence: fence$,
             minimized: minimized$,
@@ -393,12 +408,16 @@ export class TeleBoxManager {
             namespace: this.namespace,
             containerRect: this.containerRect,
             readonly: this.readonly,
+            collectorRect: this.collectorRect,
         });
 
         box.mount(this.root);
 
         if (box.focus) {
             this.focusBox(box);
+            if (smartPosition) {
+                this.makeBoxTop(box);
+            }
         }
 
         this.boxes$.setValue([...this.boxes, box]);
@@ -411,6 +430,7 @@ export class TeleBoxManager {
         });
         box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Close, () => {
             this.remove(box);
+            this.focusTopBox();
         });
         box.events.on(TELE_BOX_EVENT.Move, () => {
             this.events.emit(TELE_BOX_MANAGER_EVENT.Move, box);
@@ -427,6 +447,11 @@ export class TeleBoxManager {
         box.events.on(TELE_BOX_EVENT.VisualResize, () => {
             this.events.emit(TELE_BOX_MANAGER_EVENT.VisualResize, box);
         });
+        box.events.on(TELE_BOX_EVENT.ZIndex, () => {
+            if (this.topBox && box.zIndex > this.topBox.zIndex) {
+                this.topBox$.setValue(box);
+            }
+        });
         this.events.emit(TELE_BOX_MANAGER_EVENT.Created, box);
 
         return box;
@@ -475,7 +500,6 @@ export class TeleBoxManager {
             const boxes = this.boxes.slice();
             const deletedBoxes = boxes.splice(index, 1);
             this.boxes$.setValue(boxes);
-            this.focusTopBox();
             deletedBoxes.forEach((box) => box.destroy());
             if (!skipUpdate) {
                 if (this.boxes.length <= 0) {
@@ -537,7 +561,6 @@ export class TeleBoxManager {
                         focusChanged = true;
                         targetBox.setFocus(true, skipUpdate);
                     }
-                    this.makeBoxTop(targetBox, skipUpdate);
                     if (focusChanged && !skipUpdate) {
                         this.events.emit(
                             TELE_BOX_MANAGER_EVENT.Focused,
@@ -643,6 +666,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);
         }