@netless/telebox-insider 1.0.0-alpha.1 → 1.0.0-alpha.12

package/src/TeleBoxManager/index.ts

@@ -6,11 +6,13 @@ import type {
     ValEnhancedResult,
     ReadonlyValEnhancedResult,
 } from "value-enhancer";
+import { derive } from "value-enhancer";
 import {
     combine,
     Val,
     withValueEnhancer,
     withReadonlyValueEnhancer,
+    ValManager,
 } from "value-enhancer";
 import Emittery from "emittery";
 import type {
@@ -46,6 +48,7 @@ const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
 type ReadonlyValConfig = {
     darkMode: ReadonlyVal<boolean, boolean>;
     state: ReadonlyVal<TeleBoxState, boolean>;
+    root: Val<HTMLElement | null>;
     rootRect: Val<TeleBoxRect>;
     stageRect: ReadonlyVal<TeleBoxRect>;
 };
@@ -67,7 +70,7 @@ export interface TeleBoxManager extends CombinedValEnhancedResult {}
 
 export class TeleBoxManager {
     public constructor({
-        root = document.body,
+        root = null,
         prefersColorScheme = TELE_BOX_COLOR_SCHEME.Light,
         minimized = false,
         maximized = false,
@@ -80,9 +83,12 @@ export class TeleBoxManager {
     }: TeleBoxManagerConfig = {}) {
         this._sideEffect = new SideEffectManager();
 
-        this.root = root;
         this.namespace = namespace;
 
+        const valManager = new ValManager();
+        this._sideEffect.addDisposer(() => valManager.destroy());
+
+        const root$ = new Val(root);
         const readonly$ = new Val(readonly);
         const minimized$ = new Val(minimized);
         const maximized$ = new Val(maximized);
@@ -99,28 +105,26 @@ export class TeleBoxManager {
             },
             { compare: shallowequal }
         );
-        this._sideEffect.add(() => {
-            const observer = new ResizeObserver((entries) => {
-                this._sideEffect.setTimeout(
-                    // debounce
-                    () => {
-                        const rect = entries[0]?.contentRect;
-                        if (rect) {
-                            rootRect$.setValue({
-                                x: rect.x,
-                                y: rect.y,
-                                width: rect.width,
-                                height: rect.height,
-                            });
-                        }
-                    },
-                    50,
-                    "root-resize-observer"
-                );
-            });
-            observer.observe(root);
-            return () => observer.disconnect();
-        });
+        this._sideEffect.addDisposer(
+            root$.subscribe((root) => {
+                this._sideEffect.add(() => {
+                    if (!root) {
+                        return () => void 0;
+                    }
+                    const observer = new ResizeObserver(() => {
+                        const rect = root.getBoundingClientRect();
+                        rootRect$.setValue({
+                            x: rect.x,
+                            y: rect.y,
+                            width: rect.width,
+                            height: rect.height,
+                        });
+                    });
+                    observer.observe(root);
+                    return () => observer.disconnect();
+                }, "calc-root-rect");
+            })
+        );
 
         this.boxes$ = new Val<TeleBox[]>([]);
         this.topBox$ = new Val<TeleBox | undefined>(undefined);
@@ -190,7 +194,7 @@ export class TeleBoxManager {
                 readonly$: readonly$,
                 darkMode$: darkMode$,
                 namespace,
-                root,
+                root$,
                 rootRect$,
             });
 
@@ -198,19 +202,24 @@ export class TeleBoxManager {
             namespace,
             rootRect$,
             ratio$: stageRatio$,
-            root,
-            highlightStage$,
+            root$,
+            highlightStage$: combine(
+                [highlightStage$, maximized$, minimized$],
+                ([highlightStage, maximized, minimized]) =>
+                    highlightStage && (minimized || !maximized)
+            ),
         });
         this._sideEffect.addDisposer(() => teleStage.destroy());
 
         const readonlyValConfig: ReadonlyValConfig = {
             darkMode: darkMode$,
             state: state$,
+            root: root$,
             rootRect: rootRect$,
             stageRect: teleStage.stageRect$,
         };
 
-        withReadonlyValueEnhancer(this, readonlyValConfig);
+        withReadonlyValueEnhancer(this, readonlyValConfig, valManager);
 
         const valConfig: ValConfig = {
             prefersColorScheme: prefersColorScheme$,
@@ -222,7 +231,7 @@ export class TeleBoxManager {
             highlightStage: highlightStage$,
         };
 
-        withValueEnhancer(this, valConfig);
+        withValueEnhancer(this, valConfig, valManager);
 
         const closeBtnClassName = this.wrapClassName("titlebar-icon-close");
 
@@ -271,10 +280,12 @@ export class TeleBoxManager {
 
         this.titleBar = new MaxTitleBar({
             namespace: this.namespace,
+            title$: derive(this.topBox$, (topBox) => topBox?.title || ""),
             boxes$: this.boxes$,
             darkMode$: darkMode$,
             readonly$: readonly$,
             state$: state$,
+            root$,
             rootRect$: rootRect$,
             onEvent: (event): void => {
                 switch (event.type) {
@@ -298,8 +309,6 @@ export class TeleBoxManager {
             },
         });
 
-        this.root.appendChild(this.titleBar.render());
-
         this._sideEffect.addDisposer([
             state$.reaction((state, skipUpdate) => {
                 if (!skipUpdate) {
@@ -345,8 +354,6 @@ export class TeleBoxManager {
 
     protected _sideEffect: SideEffectManager;
 
-    protected root: HTMLElement;
-
     public readonly namespace: string;
 
     /** @deprecated use setMaximized and setMinimized instead */
@@ -380,20 +387,19 @@ export class TeleBoxManager {
             ...config,
             ...(smartPosition ? this.smartPosition(config) : {}),
             namespace: this.namespace,
+            root$: this._root$,
             darkMode$: this._darkMode$,
             maximized$: this._maximized$,
             minimized$: this._minimized$,
             fence$: this._fence$,
             rootRect$: this._rootRect$,
             managerStageRect$: this._stageRect$,
-            stageRatio$: this._stageRatio$,
+            managerStageRatio$: this._stageRatio$,
             readonly$: this._readonly$,
             collectorRect$: this.collector._rect$,
             managerHighlightStage$: this._highlightStage$,
         });
 
-        box.mount(this.root);
-
         if (box.focus) {
             this.focusBox(box);
             if (smartPosition) {
@@ -522,6 +528,20 @@ export class TeleBoxManager {
         return deletedBoxes;
     }
 
+    /**
+     * Mount manager to a container element.
+     */
+    public mount(root: HTMLElement): void {
+        this._root$.setValue(root);
+    }
+
+    /**
+     * Unmount manager from the container element.
+     */
+    public unmount(): void {
+        this._root$.setValue(null);
+    }
+
     public destroy(skipUpdate = false): void {
         this.events.clearListeners();
         this._sideEffect.flushAll();
@@ -650,6 +670,9 @@ export class TeleBoxManager {
         if (config.zIndex != null) {
             box._zIndex$.setValue(config.zIndex, skipUpdate);
         }
+        if (config.stageRatio !== undefined) {
+            box.setStageRatio(config.stageRatio, skipUpdate);
+        }
         if (config.content != null) {
             box.mountContent(config.content);
         }

package/src/TeleBoxManager/typings.ts

@@ -6,7 +6,7 @@ import type { TELE_BOX_MANAGER_EVENT } from "./constants";
 
 export interface TeleBoxManagerConfig extends Pick<TeleBoxConfig, "namespace"> {
     /** Element to mount boxes. */
-    readonly root?: HTMLElement;
+    readonly root?: HTMLElement | null;
     /** Stage area height/with ratio. No ratio if <= 0. Default -1. */
     readonly stageRatio?: number;
     /** Where the minimized boxes go. */
@@ -37,11 +37,17 @@ type TeleBoxManagerBoxConfigBaseProps =
     | "resizable"
     | "draggable"
     | "ratio"
-    | "zIndex";
+    | "zIndex"
+    | "stageRatio";
 
 export type TeleBoxManagerCreateConfig = Pick<
     TeleBoxConfig,
-    TeleBoxManagerBoxConfigBaseProps | "content" | "footer" | "id" | "focus"
+    | TeleBoxManagerBoxConfigBaseProps
+    | "content"
+    | "stage"
+    | "footer"
+    | "id"
+    | "focus"
 >;
 
 export type TeleBoxManagerQueryConfig = Pick<
@@ -51,6 +57,7 @@ export type TeleBoxManagerQueryConfig = Pick<
     | "resizable"
     | "draggable"
     | "ratio"
+    | "stageRatio"
     | "zIndex"
     | "id"
     | "focus"
@@ -58,7 +65,7 @@ export type TeleBoxManagerQueryConfig = Pick<
 
 export type TeleBoxManagerUpdateConfig = Pick<
     TeleBoxConfig,
-    TeleBoxManagerBoxConfigBaseProps | "content" | "footer"
+    TeleBoxManagerBoxConfigBaseProps | "content" | "stage" | "footer"
 >;
 
 type CheckTeleBoxManagerConfig<

package/src/TeleStage/index.ts

@@ -3,13 +3,12 @@ import "./style.scss";
 import shallowequal from "shallowequal";
 import { SideEffectManager } from "side-effect-manager";
 import type { ReadonlyVal } from "value-enhancer";
-import { Val } from "value-enhancer";
 import { combine } from "value-enhancer";
 import type { TeleBoxRect } from "../TeleBox/typings";
 
 export interface TeleStageConfig {
     namespace: string;
-    root?: HTMLElement | null;
+    root$: ReadonlyVal<HTMLElement | null>;
     rootRect$: ReadonlyVal<TeleBoxRect>;
     ratio$: ReadonlyVal<number>;
     highlightStage$: ReadonlyVal<boolean>;
@@ -21,7 +20,6 @@ export class TeleStage {
     public readonly namespace: string;
     public readonly stageRect$: ReadonlyVal<TeleBoxRect>;
     public readonly highlightStage$: ReadonlyVal<boolean>;
-    public readonly root$: Val<HTMLElement | null>;
 
     public $boxStage?: HTMLDivElement;
 
@@ -30,19 +28,14 @@ export class TeleStage {
         rootRect$,
         ratio$,
         highlightStage$,
-        root = null,
+        root$,
     }: TeleStageConfig) {
         this.namespace = namespace;
         this.highlightStage$ = highlightStage$;
-        this.root$ = new Val<HTMLElement | null>(root);
 
         this.stageRect$ = combine(
-            [rootRect$, highlightStage$, ratio$],
-            ([rootRect, highlightStage, ratio]) => {
-                if (!highlightStage) {
-                    return rootRect;
-                }
-
+            [rootRect$, ratio$],
+            ([rootRect, ratio]) => {
                 if (ratio <= 0 || rootRect.width <= 0 || rootRect.height <= 0) {
                     return rootRect;
                 }
@@ -73,7 +66,7 @@ export class TeleStage {
         );
 
         this._sideEffect.addDisposer(
-            combine([this.root$, highlightStage$]).subscribe(
+            combine([root$, highlightStage$]).subscribe(
                 ([root, highlightStage]) => {
                     if (root && highlightStage) {
                         root.appendChild(this.render());
@@ -171,14 +164,6 @@ export class TeleStage {
         return $boxStage;
     }
 
-    public mount($root: HTMLElement): void {
-        this.root$.setValue($root);
-    }
-
-    public unmount(): void {
-        this.root$.setValue(null);
-    }
-
     public destroy(): void {
         this._sideEffect.flushAll();
     }

package/src/TeleStage/style.scss

@@ -3,7 +3,7 @@
 .#{$namespace}-box-stage-container {
     display: none;
     position: absolute;
-    z-index: $base-z-index - 1;
+    z-index: $stage-z-index;
     top: 0;
     left: 0;
     width: 100%;

package/src/TeleTitleBar/DefaultTitleBar/index.ts

@@ -14,7 +14,7 @@ import type {
     TeleTitleBarEvent,
 } from "../typings";
 import { preventEvent } from "../../utils";
-import { Val } from "value-enhancer";
+import type { ReadonlyVal } from "value-enhancer";
 
 export type DefaultTitleBarButton = TeleTitleBarEvent & {
     readonly iconClassName: string;
@@ -29,7 +29,7 @@ export class DefaultTitleBar implements TeleTitleBar {
     public constructor({
         readonly$,
         state$,
-        title = "",
+        title$,
         buttons,
         onEvent,
         onDragStart,
@@ -37,7 +37,7 @@ export class DefaultTitleBar implements TeleTitleBar {
     }: DefaultTitleBarConfig) {
         this.readonly$ = readonly$;
         this.state$ = state$;
-        this.title$ = new Val(title);
+        this.title$ = title$;
         this.onEvent = onEvent;
         this.onDragStart = onDragStart;
         this.namespace = namespace;
@@ -67,14 +67,6 @@ export class DefaultTitleBar implements TeleTitleBar {
 
     public $dragArea: HTMLElement;
 
-    public get title(): string {
-        return this.title$.value;
-    }
-
-    public setTitle(title: string): void {
-        this.title$.setValue(title);
-    }
-
     public render(): HTMLElement {
         if (!this.$titleBar) {
             this.$titleBar = document.createElement("div");
@@ -205,7 +197,7 @@ export class DefaultTitleBar implements TeleTitleBar {
 
     protected readonly$: TeleTitleBarConfig["readonly$"];
 
-    protected title$: Val<string>;
+    protected title$: ReadonlyVal<string>;
 
     protected buttons: ReadonlyArray<DefaultTitleBarButton>;
 

package/src/TeleTitleBar/typings.ts

@@ -10,7 +10,7 @@ export type TeleTitleBarEvent<U = keyof TeleBoxDelegateEventConfig> =
 
 export interface TeleTitleBarConfig {
     readonly$: ReadonlyVal<boolean, boolean>;
-    title?: string;
+    title$: ReadonlyVal<string, boolean>;
     state$: ReadonlyVal<TeleBoxState, boolean>;
     namespace?: string;
     onEvent?: (event: TeleTitleBarEvent) => void;

package/src/scss/variables.scss

@@ -1,2 +1,5 @@
 $namespace: "telebox";
 $base-z-index: 100;
+$max-titlebar-z-index: $base-z-index + 5000;
+$stage-z-index: $max-titlebar-z-index + 10;
+$collector-z-index: $stage-z-index + 10;