@netless/telebox-insider 0.2.15 → 0.2.19

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netless/telebox-insider",
-    "version": "0.2.15",
+    "version": "0.2.19",
     "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,21 +430,40 @@ 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);
+        box._coord$.reaction((_, __, skipUpdate) => {
+            if (!skipUpdate) {
+                this.events.emit(TELE_BOX_MANAGER_EVENT.Move, box);
+            }
         });
-        box.events.on(TELE_BOX_EVENT.Resize, () => {
-            this.events.emit(TELE_BOX_MANAGER_EVENT.Resize, box);
+        box._size$.reaction((_, __, skipUpdate) => {
+            if (!skipUpdate) {
+                this.events.emit(TELE_BOX_MANAGER_EVENT.Resize, box);
+            }
         });
-        box.events.on(TELE_BOX_EVENT.IntrinsicMove, () => {
-            this.events.emit(TELE_BOX_MANAGER_EVENT.IntrinsicMove, box);
+        box._intrinsicCoord$.reaction((_, __, skipUpdate) => {
+            if (!skipUpdate) {
+                this.events.emit(TELE_BOX_MANAGER_EVENT.IntrinsicMove, box);
+            }
         });
-        box.events.on(TELE_BOX_EVENT.IntrinsicResize, () => {
-            this.events.emit(TELE_BOX_MANAGER_EVENT.IntrinsicResize, box);
+        box._intrinsicSize$.reaction((_, __, skipUpdate) => {
+            if (!skipUpdate) {
+                this.events.emit(TELE_BOX_MANAGER_EVENT.IntrinsicResize, box);
+            }
         });
-        box.events.on(TELE_BOX_EVENT.VisualResize, () => {
-            this.events.emit(TELE_BOX_MANAGER_EVENT.VisualResize, box);
+        box._visualSize$.reaction((_, __, skipUpdate) => {
+            if (!skipUpdate) {
+                this.events.emit(TELE_BOX_MANAGER_EVENT.VisualResize, box);
+            }
+        });
+        box._zIndex$.reaction((_, __, skipUpdate) => {
+            if (this.topBox && box.zIndex > this.topBox.zIndex) {
+                this.topBox$.setValue(box);
+            }
+            if (!skipUpdate) {
+                this.events.emit(TELE_BOX_MANAGER_EVENT.ZIndex, box);
+            }
         });
         this.events.emit(TELE_BOX_MANAGER_EVENT.Created, box);
 
@@ -475,7 +513,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 +574,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,
@@ -635,16 +671,16 @@ export class TeleBoxManager {
             box.setMinWidth(config.minWidth, skipUpdate);
         }
         if (config.resizable != null) {
-            box.setResizable(config.resizable);
+            box.setResizable(config.resizable, skipUpdate);
         }
         if (config.draggable != null) {
-            box.setDraggable(config.draggable);
+            box.setDraggable(config.draggable, skipUpdate);
         }
         if (config.fixRatio != null) {
             box.setFixRatio(config.fixRatio, skipUpdate);
         }
         if (config.zIndex != null) {
-            box.setZIndex(config.zIndex);
+            box.setZIndex(config.zIndex, skipUpdate);
         }
         if (config.content != null) {
             box.mountContent(config.content);
@@ -699,9 +735,6 @@ export class TeleBoxManager {
             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);
-                }
             }
         }
     }