@netless/telebox-insider 0.2.9 → 0.2.13

package/package.json

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

package/src/TeleBox/constants.ts

@@ -21,6 +21,7 @@ export enum TELE_BOX_EVENT {
     IntrinsicMove = "intrinsic_move",
     IntrinsicResize = "intrinsic_resize",
     VisualResize = "visual_resize",
+    ZIndex = "z_index",
     State = "state",
     Minimized = "minimized",
     Maximized = "maximized",

package/src/TeleBox/index.ts

@@ -140,24 +140,28 @@ export class TeleBox {
                             const prefersDark = window.matchMedia(
                                 "(prefers-color-scheme: dark)"
                             );
-                            darkMode$.setValue(prefersDark.matches, skipUpdate);
-                            const handler = (
-                                evt: MediaQueryListEvent
-                            ): void => {
-                                darkMode$.setValue(evt.matches, skipUpdate);
-                            };
-                            prefersDark.addEventListener("change", handler);
-                            return () =>
-                                prefersDark.removeEventListener(
-                                    "change",
-                                    handler
+                            if (prefersDark) {
+                                darkMode$.setValue(
+                                    prefersDark.matches,
+                                    skipUpdate
                                 );
+                                const handler = (
+                                    evt: MediaQueryListEvent
+                                ): void => {
+                                    darkMode$.setValue(evt.matches, skipUpdate);
+                                };
+                                prefersDark.addListener(handler);
+                                return () =>
+                                    prefersDark.removeListener(handler);
+                            } else {
+                                return noop;
+                            }
                         } else {
                             darkMode$.setValue(
                                 prefersColorScheme === "dark",
                                 skipUpdate
                             );
-                            return () => {};
+                            return noop;
                         }
                     }, "prefers-color-scheme");
                 }
@@ -193,7 +197,13 @@ export class TeleBox {
         const draggable$ = createVal(draggable);
         const fence$ = createVal(fence);
         const fixRatio$ = createVal(fixRatio);
+
         const zIndex$ = createVal(zIndex);
+        zIndex$.reaction((zIndex, _, skipUpdate) => {
+            if (!skipUpdate) {
+                this.events.emit(TELE_BOX_EVENT.ZIndex, zIndex);
+            }
+        });
 
         const focus$ = createVal(focus);
         focus$.reaction((focus, _, skipUpdate) => {
@@ -1255,6 +1265,10 @@ export class TeleBox {
     }
 }
 
+function noop(): void {
+    return;
+}
+
 type PropKeys<K = keyof TeleBox> = K extends keyof TeleBox
     ? TeleBox[K] extends Function
         ? never

package/src/TeleBox/typings.ts

@@ -96,6 +96,7 @@ export type TeleBoxEventConfig = CheckTeleBoxConfig<{
     intrinsic_move: { x: number; y: number };
     intrinsic_resize: { width: number; height: number };
     visual_resize: { width: number; height: number };
+    z_index: number;
     state: TeleBoxState;
     minimized: boolean;
     maximized: boolean;

package/src/TeleBoxManager/MaxTitleBar/index.ts

@@ -25,10 +25,6 @@ export class MaxTitleBar extends DefaultTitleBar {
     }
 
     public focusBox(box?: MaxTitleBarTeleBox): void {
-        if (!box) {
-            box = this.boxes[this.boxes.length - 1];
-        }
-
         if (this.focusedBox && this.focusedBox === box) {
             return;
         }
@@ -200,7 +196,7 @@ export class MaxTitleBar extends DefaultTitleBar {
 
     protected boxes: MaxTitleBarTeleBox[];
 
-    protected focusedBox: MaxTitleBarTeleBox | undefined;
+    public focusedBox: MaxTitleBarTeleBox | undefined;
 
     protected containerRect: TeleBoxRect;
 }

package/src/TeleBoxManager/constants.ts

@@ -1,5 +1,6 @@
 export enum TELE_BOX_MANAGER_EVENT {
     Focused = "focused",
+    Blurred = "blurred",
     Created = "created",
     Removed = "removed",
     State = "state",
@@ -10,6 +11,7 @@ export enum TELE_BOX_MANAGER_EVENT {
     IntrinsicMove = "intrinsic_move",
     IntrinsicResize = "intrinsic_resize",
     VisualResize = "visual_resize",
+    ZIndex = "z_index",
     PrefersColorScheme = "prefers_color_scheme",
     DarkMode = "dark_mode",
 }

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,18 +66,32 @@ export class TeleBoxManager {
 
         this.root = root;
         this.namespace = namespace;
-        this.zIndex = zIndex;
 
-        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
-        const prefersDark$ = createVal(prefersDark.matches);
-        this._sideEffect.add(() => {
-            const handler = (evt: MediaQueryListEvent): void => {
-                prefersDark$.setValue(evt.matches);
-            };
-            prefersDark.addEventListener("change", handler);
-            return () => prefersDark.removeEventListener("change", handler);
+        this.boxes$ = createVal<TeleBox[]>([]);
+        this.topBox$ = this.boxes$.derive((boxes) => {
+            if (boxes.length > 0) {
+                const topBox = boxes.reduce((topBox, box) =>
+                    topBox.zIndex > box.zIndex ? topBox : box
+                );
+                return topBox;
+            }
+            return;
         });
 
+        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
+        const prefersDark$ = createVal(false);
+
+        if (prefersDark) {
+            prefersDark$.setValue(prefersDark.matches);
+            this._sideEffect.add(() => {
+                const handler = (evt: MediaQueryListEvent): void => {
+                    prefersDark$.setValue(evt.matches);
+                };
+                prefersDark.addListener(handler);
+                return () => prefersDark.removeListener(handler);
+            });
+        }
+
         const prefersColorScheme$ = createVal(prefersColorScheme);
         prefersColorScheme$.reaction((prefersColorScheme, _, skipUpdate) => {
             this.boxes.forEach((box) =>
@@ -217,6 +230,8 @@ export class TeleBoxManager {
             }
         });
 
+        const closeBtnClassName = this.wrapClassName("titlebar-icon-close");
+
         const checkFocusBox = (ev: MouseEvent | TouchEvent): void => {
             if (readonly$.value) {
                 return;
@@ -232,11 +247,14 @@ export class TeleBoxManager {
                 el;
                 el = el.parentElement
             ) {
+                if (el.classList && el.classList.contains(closeBtnClassName)) {
+                    return;
+                }
                 const id = el.dataset?.teleBoxID;
                 if (id) {
-                    const box = this.boxes.find((box) => box.id === id);
+                    const box = this.getBox(id);
                     if (box) {
-                        this.focusBox({ focus: true, box });
+                        this.focusBox(box);
                         return;
                     }
                 }
@@ -261,8 +279,7 @@ export class TeleBoxManager {
             readonly: readonly$.value,
             namespace: this.namespace,
             state: state$.value,
-            boxes: this.boxes,
-            focusedBox: this._focusedBox,
+            boxes: this.boxes$.value,
             containerRect: containerRect$.value,
             onEvent: (event): void => {
                 switch (event.type) {
@@ -275,12 +292,7 @@ export class TeleBoxManager {
                         break;
                     }
                     case TELE_BOX_EVENT.Close: {
-                        const box =
-                            this._focusedBox ??
-                            this.boxes[this.boxes.length - 1];
-                        if (box) {
-                            this.remove(box.id);
-                        }
+                        this.removeTopBox();
                         break;
                     }
                     default: {
@@ -295,6 +307,9 @@ export class TeleBoxManager {
         this._darkMode$.subscribe((darkMode) => {
             this.maxTitleBar.setDarkMode(darkMode);
         });
+        this.boxes$.reaction((boxes) => {
+            this.maxTitleBar.setBoxes(boxes);
+        });
 
         const valConfig: ValConfig = {
             prefersColorScheme: prefersColorScheme$,
@@ -313,6 +328,14 @@ export class TeleBoxManager {
         this.root.appendChild(this.maxTitleBar.render());
     }
 
+    public get boxes(): ReadonlyArray<TeleBox> {
+        return this.boxes$.value;
+    }
+
+    public get topBox(): TeleBox | undefined {
+        return this.topBox$.value;
+    }
+
     public readonly events = new EventEmitter() as TeleBoxManagerEvents;
 
     protected _sideEffect: SideEffectManager;
@@ -321,8 +344,6 @@ export class TeleBoxManager {
 
     public readonly namespace: string;
 
-    public zIndex: number;
-
     public _darkMode$: Val<boolean, boolean>;
 
     public get darkMode(): boolean {
@@ -357,16 +378,30 @@ export class TeleBoxManager {
         return this;
     }
 
-    public create(config?: TeleBoxManagerCreateConfig): ReadonlyTeleBox {
-        const box = new TeleBox(this.wrapCreateConfig(config));
+    public create(
+        config: TeleBoxManagerCreateConfig = {},
+        smartPosition = true
+    ): ReadonlyTeleBox {
+        const box = new TeleBox({
+            zIndex: this.topBox ? this.topBox.zIndex + 1 : 100,
+            ...(smartPosition ? this.smartPosition(config) : config),
+            darkMode: this.darkMode,
+            prefersColorScheme: this.prefersColorScheme,
+            maximized: this.maximized,
+            minimized: this.minimized,
+            fence: this.fence,
+            namespace: this.namespace,
+            containerRect: this.containerRect,
+            readonly: this.readonly,
+        });
+
         box.mount(this.root);
-        this.boxes.push(box);
 
         if (box.focus) {
-            this.focusBox({ focus: true, box, increaseZIndex: false });
+            this.focusBox(box);
         }
 
-        this.maxTitleBar.setBoxes(this.boxes);
+        this.boxes$.setValue([...this.boxes, box]);
 
         box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Maximize, () => {
             this.setMaximized(!this.maximized);
@@ -375,8 +410,7 @@ export class TeleBoxManager {
             this.setMinimized(true);
         });
         box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Close, () => {
-            this.focusBox({ focus: false, box });
-            this.remove(box.id);
+            this.remove(box);
         });
         box.events.on(TELE_BOX_EVENT.Move, () => {
             this.events.emit(TELE_BOX_MANAGER_EVENT.Move, box);
@@ -433,57 +467,52 @@ export class TeleBoxManager {
     }
 
     public remove(
-        boxID: string,
+        boxOrID: string | TeleBox,
         skipUpdate = false
     ): ReadonlyTeleBox | undefined {
-        const index = this.boxes.findIndex((box) => box.id === boxID);
+        const index = this.getBoxIndex(boxOrID);
         if (index >= 0) {
-            const boxes = this.boxes.splice(index, 1);
-            this.maxTitleBar.setBoxes(this.boxes);
-            const box = boxes[0];
-            this.focusBox({ focus: false, box });
-            box.destroy();
+            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) {
                     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 box;
+            return deletedBoxes[0];
         }
         return;
     }
 
-    public removeAll(skipUpdate = false): ReadonlyTeleBox[] {
-        if (this._focusedBox) {
-            const box = this._focusedBox;
-            this._focusedBox = void 0;
-            if (!skipUpdate) {
-                this.events.emit(
-                    TELE_BOX_MANAGER_EVENT.Focused,
-                    undefined,
-                    box
-                );
-            }
+    public removeTopBox(): ReadonlyTeleBox | undefined {
+        if (this.topBox) {
+            return this.remove(this.topBox);
         }
-        const boxes = this.boxes.splice(0, this.boxes.length);
-        this.maxTitleBar.setBoxes(this.boxes);
-        boxes.forEach((box) => box.destroy());
+        return;
+    }
+
+    public removeAll(skipUpdate = false): ReadonlyTeleBox[] {
+        const deletedBoxes = this.boxes$.value;
+        this.boxes$.setValue([]);
+        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 boxes;
+        return deletedBoxes;
     }
 
     public destroy(skipUpdate = false): void {
         this.events.removeAllListeners();
         this._sideEffect.flushAll();
-        this._focusedBox = void 0;
         this.removeAll(skipUpdate);
 
         Object.keys(this).forEach((key) => {
@@ -498,13 +527,70 @@ export class TeleBoxManager {
         return `${this.namespace}-${className}`;
     }
 
-    protected maxTitleBar: MaxTitleBar;
+    public focusBox(boxOrID: string | TeleBox, skipUpdate = false): void {
+        const targetBox = this.getBox(boxOrID);
+        if (targetBox) {
+            this.boxes.forEach((box) => {
+                if (targetBox === box) {
+                    let focusChanged = false;
+                    if (!targetBox.focus) {
+                        focusChanged = true;
+                        targetBox.setFocus(true, skipUpdate);
+                    }
+                    this.makeBoxTop(targetBox, skipUpdate);
+                    if (focusChanged && !skipUpdate) {
+                        this.events.emit(
+                            TELE_BOX_MANAGER_EVENT.Focused,
+                            targetBox
+                        );
+                    }
+                } else if (box.focus) {
+                    this.blurBox(box, skipUpdate);
+                }
+            });
+            this.maxTitleBar.focusBox(targetBox);
+        }
+    }
+
+    public focusTopBox(): void {
+        if (this.topBox && !this.topBox.focus) {
+            return this.focusBox(this.topBox);
+        }
+    }
+
+    public blurBox(boxOrID: string | TeleBox, skipUpdate = false): void {
+        const targetBox = this.getBox(boxOrID);
+        if (targetBox) {
+            if (targetBox.focus) {
+                targetBox.setFocus(false, skipUpdate);
+                if (!skipUpdate) {
+                    this.events.emit(TELE_BOX_MANAGER_EVENT.Blurred, targetBox);
+                }
+            }
+            if (this.maxTitleBar.focusedBox === targetBox) {
+                this.maxTitleBar.focusBox();
+            }
+        }
+    }
 
-    protected _focusedBox: TeleBox | undefined;
+    public blurAll(skipUpdate = false): void {
+        this.boxes.forEach((box) => {
+            if (box.focus) {
+                box.setFocus(false, skipUpdate);
+                if (!skipUpdate) {
+                    this.events.emit(TELE_BOX_MANAGER_EVENT.Blurred, box);
+                }
+            }
+        });
+        if (this.maxTitleBar.focusedBox) {
+            this.maxTitleBar.focusBox();
+        }
+    }
 
-    protected boxes: TeleBox[] = [];
+    protected maxTitleBar: MaxTitleBar;
 
-    protected lastState: TeleBoxState | undefined;
+    protected boxes$: Val<TeleBox[]>;
+    protected topBox$: Val<TeleBox | undefined>;
 
     protected teleBoxMatcher(
         config: TeleBoxManagerQueryConfig
@@ -557,9 +643,6 @@ export class TeleBoxManager {
         if (config.fixRatio != null) {
             box.setFixRatio(config.fixRatio, skipUpdate);
         }
-        if (config.focus != null) {
-            this.focusBox({ focus: config.focus, box, skipUpdate });
-        }
         if (config.content != null) {
             box.mountContent(config.content);
         }
@@ -568,119 +651,67 @@ export class TeleBoxManager {
         }
     }
 
-    protected focusBox({
-        focus,
-        box,
-        skipUpdate = false,
-        increaseZIndex = true,
-    }: {
-        focus: boolean;
-        box: TeleBox;
-        skipUpdate?: boolean;
-        increaseZIndex?: boolean;
-    }): void {
-        box.setFocus(focus, skipUpdate);
-        if (box.focus) {
-            if (this._focusedBox !== box) {
-                const lastFocusedBox = this._focusedBox;
-                if (this._focusedBox) {
-                    this._focusedBox.setFocus(false, skipUpdate);
-                }
-                this._focusedBox = box;
-                if (increaseZIndex) {
-                    box.setZIndex(++this.zIndex);
-                }
-                if (!skipUpdate) {
-                    this.events.emit(
-                        TELE_BOX_MANAGER_EVENT.Focused,
-                        box,
-                        lastFocusedBox
-                    );
-                }
-            }
-        } else {
-            if (this._focusedBox === box) {
-                this._focusedBox = void 0;
+    protected smartPosition(config: TeleBoxConfig = {}): TeleBoxConfig {
+        let { x, y } = config;
+        const { width = 0.5, height = 0.5 } = config;
 
-                if (!skipUpdate) {
-                    this.events.emit(
-                        TELE_BOX_MANAGER_EVENT.Focused,
-                        undefined,
-                        box
-                    );
+        if (x == null) {
+            let vx = 20;
+            if (this.topBox) {
+                vx = this.topBox.intrinsicX * this.containerRect.width + 20;
+
+                if (
+                    vx >
+                    this.containerRect.width - width * this.containerRect.width
+                ) {
+                    vx = 20;
                 }
             }
+            x = vx / this.containerRect.width;
         }
-        this.maxTitleBar.focusBox(this._focusedBox);
-    }
-
-    protected getInitialPosition(
-        width: number,
-        height: number
-    ): { x: number; y: number } {
-        const upMostBox =
-            this.boxes.length > 0 &&
-            this.boxes.reduce((box1, box2) =>
-                box1.zIndex > box2.zIndex ? box1 : box2
-            );
 
-        let x = 20;
-        let y = 20;
+        if (y == null) {
+            let vy = 20;
 
-        if (upMostBox) {
-            x = upMostBox.intrinsicX * this.containerRect.width + 20;
-            y = upMostBox.intrinsicY * this.containerRect.height + 20;
+            if (this.topBox) {
+                vy = this.topBox.intrinsicY * this.containerRect.height + 20;
 
-            if (
-                x >
-                    this.containerRect.width -
-                        width * this.containerRect.width ||
-                y >
+                if (
+                    vy >
                     this.containerRect.height -
                         height * this.containerRect.height
-            ) {
-                x = 20;
-                y = 20;
+                ) {
+                    vy = 20;
+                }
             }
+
+            y = vy / this.containerRect.height;
         }
 
-        return {
-            x: x / this.containerRect.width,
-            y: y / this.containerRect.height,
-        };
+        return { ...config, x, y, width, height };
     }
 
-    protected wrapCreateConfig(config: TeleBoxConfig = {}): TeleBoxConfig {
-        let { x, y } = config;
-        const { width = 0.5, height = 0.5 } = config;
-
-        if (x == null || y == null) {
-            const initialPos = this.getInitialPosition(width, height);
-
-            if (x == null) {
-                x = initialPos.x;
-            }
-
-            if (y == null) {
-                y = initialPos.y;
+    protected makeBoxTop(box: TeleBox, skipUpdate = false): void {
+        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);
+                }
             }
         }
+    }
 
-        return {
-            ...config,
-            x,
-            y,
-            width,
-            height,
-            darkMode: this.darkMode,
-            prefersColorScheme: this.prefersColorScheme,
-            maximized: this.maximized,
-            minimized: this.minimized,
-            fence: this.fence,
-            zIndex: this.zIndex,
-            namespace: this.namespace,
-            containerRect: this.containerRect,
-            readonly: this.readonly,
-        };
+    protected getBoxIndex(boxOrID: TeleBox | string): number {
+        return typeof boxOrID === "string"
+            ? this.boxes.findIndex((box) => box.id === boxOrID)
+            : this.boxes.findIndex((box) => box === boxOrID);
+    }
+
+    protected getBox(boxOrID: TeleBox | string): TeleBox | undefined {
+        return typeof boxOrID === "string"
+            ? this.boxes.find((box) => box.id === boxOrID)
+            : boxOrID;
     }
 }

package/src/TeleBoxManager/typings.ts

@@ -14,7 +14,6 @@ export interface TeleBoxManagerConfig
         | "maximized"
         | "minimized"
         | "namespace"
-        | "zIndex"
         | "readonly"
     > {
     /** Element to mount boxes. */
@@ -35,16 +34,16 @@ type TeleBoxManagerBoxConfigBaseProps =
     | "resizable"
     | "draggable"
     | "fixRatio"
-    | "focus";
+    | "zIndex";
 
 export type TeleBoxManagerCreateConfig = Pick<
     TeleBoxConfig,
-    TeleBoxManagerBoxConfigBaseProps | "content" | "footer" | "id"
+    TeleBoxManagerBoxConfigBaseProps | "content" | "footer" | "id" | "focus"
 >;
 
 export type TeleBoxManagerQueryConfig = Pick<
     TeleBoxConfig,
-    TeleBoxManagerBoxConfigBaseProps | "id"
+    TeleBoxManagerBoxConfigBaseProps | "id" | "focus"
 >;
 
 export type TeleBoxManagerUpdateConfig = Pick<
@@ -57,8 +56,8 @@ type CheckTeleBoxManagerConfig<
 > = T;
 
 export type TeleBoxManagerEventConfig = CheckTeleBoxManagerConfig<{
-    /** current focused box and last focused box */
-    focused: [ReadonlyTeleBox | undefined, ReadonlyTeleBox | undefined];
+    focused: [ReadonlyTeleBox | undefined];
+    blurred: [ReadonlyTeleBox | undefined];
     created: [ReadonlyTeleBox];
     removed: [ReadonlyTeleBox[]];
     state: [TeleBoxState];
@@ -69,6 +68,7 @@ export type TeleBoxManagerEventConfig = CheckTeleBoxManagerConfig<{
     intrinsic_move: [ReadonlyTeleBox];
     intrinsic_resize: [ReadonlyTeleBox];
     visual_resize: [ReadonlyTeleBox];
+    z_index: [ReadonlyTeleBox];
     prefers_color_scheme: [TeleBoxColorScheme];
     dark_mode: [boolean];
 }>;