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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netless/telebox-insider",
-    "version": "1.0.0-alpha.1",
+    "version": "1.0.0-alpha.2",
     "private": false,
     "description": "Window widget for Whiteboard",
     "license": "MIT",
@@ -50,6 +50,7 @@
         "minimist": "^1.2.5",
         "prettier": "^2.0.5",
         "rimraf": "^3.0.0",
+        "rollup-plugin-exclude-dependencies-from-bundle": "^1.1.22",
         "sass": "^1.36.0",
         "sass-loader": "^10.1.1",
         "typescript": "^4.1.2",

package/src/TeleBox/index.ts

@@ -117,6 +117,7 @@ export class TeleBox {
         minimized$,
         maximized$,
         readonly$,
+        root$,
         rootRect$,
         managerStageRect$,
         stageRatio$,
@@ -220,12 +221,15 @@ export class TeleBox {
                     : boxHighlightStage
         );
 
+        const contentRoot$ = new Val<HTMLElement | null>(null);
+
         const contentRect$ = new Val<TeleBoxRect>(rootRect$.value, {
             compare: shallowequal,
         });
 
         const teleStage = new TeleStage({
             namespace,
+            root$: contentRoot$,
             rootRect$: contentRect$,
             ratio$: stageRatio$,
             highlightStage$,
@@ -312,7 +316,7 @@ export class TeleBox {
         );
 
         this.$box = this.render();
-        teleStage.root$.setValue(this.$content.parentElement);
+        contentRoot$.setValue(this.$content.parentElement);
 
         const watchValEvent = <E extends TeleBoxEvent>(
             val: ReadonlyVal<TeleBoxEventConfig[E], boolean>,
@@ -336,23 +340,27 @@ export class TeleBox {
         watchValEvent(intrinsicSize$, TELE_BOX_EVENT.IntrinsicResize);
         watchValEvent(intrinsicCoord$, TELE_BOX_EVENT.IntrinsicMove);
 
-        this._sideEffect.addDisposer(
+        this._sideEffect.addDisposer([
             visible$.reaction((visible, skipUpdate) => {
                 if (!skipUpdate && !visible) {
                     this.events.emit(TELE_BOX_EVENT.Close);
                 }
-            })
-        );
-
-        this._sideEffect.addDisposer(
+            }),
             focus$.reaction((focus, skipUpdate) => {
                 if (!skipUpdate) {
                     this.events.emit(
                         focus ? TELE_BOX_EVENT.Focus : TELE_BOX_EVENT.Blur
                     );
                 }
-            })
-        );
+            }),
+            root$.subscribe((root) => {
+                if (root) {
+                    root.appendChild(this.$box);
+                } else if (this.$box.parentNode) {
+                    this.$box.remove();
+                }
+            }),
+        ]);
     }
 
     public readonly id: string;
@@ -535,22 +543,6 @@ export class TeleBox {
         );
     }
 
-    /**
-     * Mount box to a container element.
-     */
-    public mount(container: HTMLElement): void {
-        container.appendChild(this.$box);
-    }
-
-    /**
-     * Unmount box from the container element.
-     */
-    public unmount(): void {
-        if (this.$box.parentNode) {
-            this.$box.remove();
-        }
-    }
-
     /**
      * Mount dom to box content.
      */

package/src/TeleBox/typings.ts

@@ -78,6 +78,8 @@ export interface TeleBoxConfig {
     readonly minimized$: ReadonlyVal<boolean, boolean>;
     /** Is box readonly */
     readonly readonly$: ReadonlyVal<boolean, boolean>;
+    /** Root element to mount boxes */
+    readonly root$: ReadonlyVal<HTMLElement | null>;
     /** Position and dimension of root element */
     readonly rootRect$: ReadonlyVal<TeleBoxRect>;
     /** Position and dimension of stage area */

package/src/TeleBoxCollector/index.ts

@@ -16,7 +16,7 @@ import type { TeleBoxRect } from "../TeleBox/typings";
 export interface TeleBoxCollectorConfig {
     namespace?: string;
     styles?: TeleStyles;
-    root?: HTMLElement;
+    root$: ReadonlyVal<HTMLElement | null>;
     minimized$: Val<boolean>;
     readonly$: ReadonlyVal<boolean>;
     darkMode$: ReadonlyVal<boolean>;
@@ -25,13 +25,13 @@ export interface TeleBoxCollectorConfig {
 
 type ValConfig = {
     styles: Val<TeleStyles>;
-    root: Val<HTMLElement | undefined>;
     el: Val<HTMLElement>;
 };
 
 type ReadonlyValConfig = {
     rect: ReadonlyVal<TeleBoxRect | undefined>;
     visible: ReadonlyVal<boolean>;
+    root: ReadonlyVal<HTMLElement | null>;
 };
 
 type CombinedValEnhancedResult = ValEnhancedResult<ValConfig> &
@@ -47,19 +47,17 @@ export class TeleBoxCollector {
         rootRect$,
         namespace = "telebox",
         styles = {},
-        root,
+        root$,
     }: TeleBoxCollectorConfig) {
         this.namespace = namespace;
 
         const rect$ = new Val<TeleBoxRect | undefined>(void 0);
         const visible$ = minimized$;
         const styles$ = new Val(styles);
-        const root$ = new Val(root);
         const el$ = new Val<HTMLElement>(document.createElement("button"));
 
         const valConfig: ValConfig = {
             styles: styles$,
-            root: root$,
             el: el$,
         };
 
@@ -68,6 +66,7 @@ export class TeleBoxCollector {
         const readonlyValConfig: ReadonlyValConfig = {
             rect: rect$,
             visible: visible$,
+            root: root$,
         };
 
         withReadonlyValueEnhancer(this, readonlyValConfig);

package/src/TeleBoxManager/MaxTitleBar/index.ts

@@ -14,6 +14,7 @@ export interface MaxTitleBarConfig extends DefaultTitleBarConfig {
     darkMode$: ReadonlyVal<boolean>;
     boxes$: ReadonlyVal<TeleBox[]>;
     rootRect$: ReadonlyVal<TeleBoxRect>;
+    root$: ReadonlyVal<HTMLElement | null>;
 }
 
 export class MaxTitleBar extends DefaultTitleBar {
@@ -23,6 +24,16 @@ export class MaxTitleBar extends DefaultTitleBar {
         this.boxes$ = config.boxes$;
         this.rootRect$ = config.rootRect$;
         this.darkMode$ = config.darkMode$;
+
+        this.sideEffect.addDisposer(
+            config.root$.subscribe((root) => {
+                if (root) {
+                    root.appendChild(this.render());
+                } else if (this.$titleBar?.parentNode) {
+                    this.$titleBar.remove();
+                }
+            })
+        );
     }
 
     public focusBox(box?: TeleBox): void {
@@ -54,6 +65,10 @@ export class MaxTitleBar extends DefaultTitleBar {
     }
 
     public render(): HTMLElement {
+        if (this.$titleBar) {
+            return this.$titleBar;
+        }
+
         const $titleBar = super.render();
 
         $titleBar.classList.add(this.wrapClassName("max-titlebar"));

package/src/TeleBoxManager/index.ts

@@ -46,6 +46,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 +68,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 +81,9 @@ export class TeleBoxManager {
     }: TeleBoxManagerConfig = {}) {
         this._sideEffect = new SideEffectManager();
 
-        this.root = root;
         this.namespace = namespace;
 
+        const root$ = new Val(root);
         const readonly$ = new Val(readonly);
         const minimized$ = new Val(minimized);
         const maximized$ = new Val(maximized);
@@ -99,28 +100,35 @@ 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((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();
+                }, "calc-root-rect");
+            })
+        );
 
         this.boxes$ = new Val<TeleBox[]>([]);
         this.topBox$ = new Val<TeleBox | undefined>(undefined);
@@ -190,7 +198,7 @@ export class TeleBoxManager {
                 readonly$: readonly$,
                 darkMode$: darkMode$,
                 namespace,
-                root,
+                root$,
                 rootRect$,
             });
 
@@ -198,7 +206,7 @@ export class TeleBoxManager {
             namespace,
             rootRect$,
             ratio$: stageRatio$,
-            root,
+            root$,
             highlightStage$,
         });
         this._sideEffect.addDisposer(() => teleStage.destroy());
@@ -206,6 +214,7 @@ export class TeleBoxManager {
         const readonlyValConfig: ReadonlyValConfig = {
             darkMode: darkMode$,
             state: state$,
+            root: root$,
             rootRect: rootRect$,
             stageRect: teleStage.stageRect$,
         };
@@ -275,6 +284,7 @@ export class TeleBoxManager {
             darkMode$: darkMode$,
             readonly$: readonly$,
             state$: state$,
+            root$,
             rootRect$: rootRect$,
             onEvent: (event): void => {
                 switch (event.type) {
@@ -298,8 +308,6 @@ export class TeleBoxManager {
             },
         });
 
-        this.root.appendChild(this.titleBar.render());
-
         this._sideEffect.addDisposer([
             state$.reaction((state, skipUpdate) => {
                 if (!skipUpdate) {
@@ -345,8 +353,6 @@ export class TeleBoxManager {
 
     protected _sideEffect: SideEffectManager;
 
-    protected root: HTMLElement;
-
     public readonly namespace: string;
 
     /** @deprecated use setMaximized and setMinimized instead */
@@ -380,6 +386,7 @@ export class TeleBoxManager {
             ...config,
             ...(smartPosition ? this.smartPosition(config) : {}),
             namespace: this.namespace,
+            root$: this._root$,
             darkMode$: this._darkMode$,
             maximized$: this._maximized$,
             minimized$: this._minimized$,
@@ -392,8 +399,6 @@ export class TeleBoxManager {
             managerHighlightStage$: this._highlightStage$,
         });
 
-        box.mount(this.root);
-
         if (box.focus) {
             this.focusBox(box);
             if (smartPosition) {
@@ -522,6 +527,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();

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. */

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,11 +28,10 @@ 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$],
@@ -73,7 +70,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 +168,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();
     }