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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netless/telebox-insider",
-    "version": "1.0.0-alpha.1",
+    "version": "1.0.0-alpha.4",
     "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",
@@ -62,6 +63,6 @@
         "shallowequal": "^1.1.0",
         "side-effect-manager": "^1.1.0",
         "stylefire": "^7.0.3",
-        "value-enhancer": "^1.1.1"
+        "value-enhancer": "^1.2.1"
     }
 }

package/src/TeleBox/index.ts

@@ -9,8 +9,13 @@ import type {
     ReadonlyValEnhancedResult,
     ValEnhancedResult,
 } from "value-enhancer";
-import { withValueEnhancer } from "value-enhancer";
-import { combine, Val, withReadonlyValueEnhancer } from "value-enhancer";
+import {
+    combine,
+    Val,
+    withReadonlyValueEnhancer,
+    withValueEnhancer,
+    ValManager,
+} from "value-enhancer";
 import type { TeleTitleBar } from "../TeleTitleBar";
 import { DefaultTitleBar } from "../TeleTitleBar";
 import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observer";
@@ -55,7 +60,7 @@ type ValConfig = {
     ratio: Val<RequiredTeleBoxConfig["ratio"], boolean>;
 };
 
-type ReadonlyValConfig = {
+type PropsValConfig = {
     darkMode: RequiredTeleBoxConfig["darkMode$"];
     fence: RequiredTeleBoxConfig["fence$"];
     minimized: RequiredTeleBoxConfig["minimized$"];
@@ -64,7 +69,9 @@ type ReadonlyValConfig = {
     rootRect: RequiredTeleBoxConfig["rootRect$"];
     managerStageRect: RequiredTeleBoxConfig["managerStageRect$"];
     collectorRect: RequiredTeleBoxConfig["collectorRect$"];
+};
 
+type MyReadonlyValConfig = {
     zIndex: Val<RequiredTeleBoxConfig["zIndex"], boolean>;
     focus: Val<RequiredTeleBoxConfig["focus"], boolean>;
 
@@ -85,7 +92,9 @@ type ReadonlyValConfig = {
     contentStageRect: ReadonlyVal<TeleBoxRect | null>;
 };
 
-type CombinedValEnhancedResult = ReadonlyValEnhancedResult<ReadonlyValConfig> &
+type CombinedValEnhancedResult = ReadonlyValEnhancedResult<
+    PropsValConfig & MyReadonlyValConfig
+> &
     ValEnhancedResult<ValConfig>;
 
 export interface TeleBox extends CombinedValEnhancedResult {}
@@ -117,6 +126,7 @@ export class TeleBox {
         minimized$,
         maximized$,
         readonly$,
+        root$,
         rootRect$,
         managerStageRect$,
         stageRatio$,
@@ -128,6 +138,9 @@ export class TeleBox {
         this.id = id;
         this.namespace = namespace;
 
+        const valManager = new ValManager();
+        this._sideEffect.addDisposer(() => valManager.destroy());
+
         const title$ = new Val(title);
         const visible$ = new Val(visible);
         const resizable$ = new Val(resizable);
@@ -220,19 +233,22 @@ 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$,
         });
         this._sideEffect.addDisposer(() => teleStage.destroy());
 
-        const readonlyValConfig: ReadonlyValConfig = {
+        const propsValConfig: PropsValConfig = {
             darkMode: darkMode$,
             fence: fence$,
             minimized: minimized$,
@@ -241,7 +257,11 @@ export class TeleBox {
             rootRect: rootRect$,
             managerStageRect: managerStageRect$,
             collectorRect: collectorRect$,
+        };
+
+        withReadonlyValueEnhancer(this, propsValConfig);
 
+        const myReadonlyValConfig: MyReadonlyValConfig = {
             zIndex: zIndex$,
             focus: focus$,
 
@@ -262,7 +282,7 @@ export class TeleBox {
             contentStageRect: teleStage.stageRect$,
         };
 
-        withReadonlyValueEnhancer(this, readonlyValConfig);
+        withReadonlyValueEnhancer(this, myReadonlyValConfig, valManager);
 
         const valConfig: ValConfig = {
             title: title$,
@@ -272,14 +292,14 @@ export class TeleBox {
             ratio: ratio$,
         };
 
-        withValueEnhancer(this, valConfig);
+        withValueEnhancer(this, valConfig, valManager);
 
         this.titleBar =
             titleBar ||
             new DefaultTitleBar({
                 readonly$: readonly$,
                 state$: state$,
-                title: title$.value,
+                title$: title$,
                 namespace: this.namespace,
                 onDragStart: (event) => this._handleTrackStart?.(event),
                 onEvent: (event) => this._delegateEvents.emit(event.type),
@@ -312,7 +332,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 +356,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 +559,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.
      */
@@ -713,8 +721,14 @@ export class TeleBox {
             ]) => {
                 if (minimized && collectorRect) {
                     return {
-                        x: collectorRect.x + collectorRect.width / 2,
-                        y: collectorRect.y + collectorRect.height / 2,
+                        x:
+                            collectorRect.x -
+                            pxIntrinsicSize.width / 2 +
+                            collectorRect.width / 2,
+                        y:
+                            collectorRect.y -
+                            pxIntrinsicSize.height / 2 +
+                            collectorRect.height / 2,
                         width: pxIntrinsicSize.width + "px",
                         height: pxIntrinsicSize.height + "px",
                         scaleX: collectorRect.width / pxIntrinsicSize.width,

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

@@ -6,17 +6,21 @@ import type {
     ReadonlyValEnhancedResult,
     ValEnhancedResult,
 } from "value-enhancer";
-import { withValueEnhancer } from "value-enhancer";
-import { combine } from "value-enhancer";
-import { Val } from "value-enhancer";
-import { withReadonlyValueEnhancer } from "value-enhancer";
+import { derive } from "value-enhancer";
+import {
+    withValueEnhancer,
+    combine,
+    Val,
+    withReadonlyValueEnhancer,
+    ValManager,
+} from "value-enhancer";
 import { SideEffectManager } from "side-effect-manager";
 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,17 +29,20 @@ export interface TeleBoxCollectorConfig {
 
 type ValConfig = {
     styles: Val<TeleStyles>;
-    root: Val<HTMLElement | undefined>;
-    el: Val<HTMLElement>;
+    $collector: Val<HTMLElement>;
+};
+
+type PropsValConfig = {
+    root: TeleBoxCollectorConfig["root$"];
 };
 
-type ReadonlyValConfig = {
+type MyReadonlyValConfig = {
     rect: ReadonlyVal<TeleBoxRect | undefined>;
     visible: ReadonlyVal<boolean>;
 };
 
 type CombinedValEnhancedResult = ValEnhancedResult<ValConfig> &
-    ReadonlyValEnhancedResult<ReadonlyValConfig>;
+    ReadonlyValEnhancedResult<PropsValConfig & MyReadonlyValConfig>;
 
 export interface TeleBoxCollector extends CombinedValEnhancedResult {}
 
@@ -47,30 +54,37 @@ export class TeleBoxCollector {
         rootRect$,
         namespace = "telebox",
         styles = {},
-        root,
+        root$,
     }: TeleBoxCollectorConfig) {
         this.namespace = namespace;
 
+        const valManager = new ValManager();
+        this._sideEffect.addDisposer(() => valManager.destroy());
+
         const rect$ = new Val<TeleBoxRect | undefined>(void 0);
-        const visible$ = minimized$;
+        const visible$ = derive(minimized$);
         const styles$ = new Val(styles);
-        const root$ = new Val(root);
         const el$ = new Val<HTMLElement>(document.createElement("button"));
 
         const valConfig: ValConfig = {
             styles: styles$,
+            $collector: el$,
+        };
+
+        withValueEnhancer(this, valConfig, valManager);
+
+        const propsValConfig: PropsValConfig = {
             root: root$,
-            el: el$,
         };
 
-        withValueEnhancer(this, valConfig);
+        withReadonlyValueEnhancer(this, propsValConfig);
 
-        const readonlyValConfig: ReadonlyValConfig = {
+        const myReadonlyValConfig: MyReadonlyValConfig = {
             rect: rect$,
             visible: visible$,
         };
 
-        withReadonlyValueEnhancer(this, readonlyValConfig);
+        withReadonlyValueEnhancer(this, myReadonlyValConfig, valManager);
 
         el$.value.className = this.wrapClassName("collector");
         el$.value.style.backgroundImage = `url('${collectorSVG}')`;

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"));
@@ -94,9 +109,7 @@ export class MaxTitleBar extends DefaultTitleBar {
                                 this.wrapClassName("max-titlebar-single-title"),
                                 titles.length === 1
                             );
-                            if (titles.length === 1) {
-                                this.setTitle(titles[0].title);
-                            } else {
+                            if (titles.length !== 1) {
                                 $titleBar.replaceChild(
                                     this.renderTitles(),
                                     $titleBar.firstElementChild as HTMLElement

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,11 +105,13 @@ export class TeleBoxManager {
             },
             { compare: shallowequal }
         );
-        this._sideEffect.add(() => {
-            const observer = new ResizeObserver((entries) => {
-                this._sideEffect.setTimeout(
-                    // debounce
-                    () => {
+        this._sideEffect.addDisposer(
+            root$.subscribe((root) => {
+                this._sideEffect.add(() => {
+                    if (!root) {
+                        return () => void 0;
+                    }
+                    const observer = new ResizeObserver((entries) => {
                         const rect = entries[0]?.contentRect;
                         if (rect) {
                             rootRect$.setValue({
@@ -113,14 +121,12 @@ export class TeleBoxManager {
                                 height: rect.height,
                             });
                         }
-                    },
-                    50,
-                    "root-resize-observer"
-                );
-            });
-            observer.observe(root);
-            return () => observer.disconnect();
-        });
+                    });
+                    observer.observe(root);
+                    return () => observer.disconnect();
+                }, "calc-root-rect");
+            })
+        );
 
         this.boxes$ = new Val<TeleBox[]>([]);
         this.topBox$ = new Val<TeleBox | undefined>(undefined);
@@ -190,7 +196,7 @@ export class TeleBoxManager {
                 readonly$: readonly$,
                 darkMode$: darkMode$,
                 namespace,
-                root,
+                root$,
                 rootRect$,
             });
 
@@ -198,19 +204,23 @@ export class TeleBoxManager {
             namespace,
             rootRect$,
             ratio$: stageRatio$,
-            root,
-            highlightStage$,
+            root$,
+            highlightStage$: combine(
+                [highlightStage$, maximized$],
+                ([highlightStage, maximized]) => highlightStage && !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 +232,7 @@ export class TeleBoxManager {
             highlightStage: highlightStage$,
         };
 
-        withValueEnhancer(this, valConfig);
+        withValueEnhancer(this, valConfig, valManager);
 
         const closeBtnClassName = this.wrapClassName("titlebar-icon-close");
 
@@ -271,10 +281,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 +310,6 @@ export class TeleBoxManager {
             },
         });
 
-        this.root.appendChild(this.titleBar.render());
-
         this._sideEffect.addDisposer([
             state$.reaction((state, skipUpdate) => {
                 if (!skipUpdate) {
@@ -345,8 +355,6 @@ export class TeleBoxManager {
 
     protected _sideEffect: SideEffectManager;
 
-    protected root: HTMLElement;
-
     public readonly namespace: string;
 
     /** @deprecated use setMaximized and setMinimized instead */
@@ -380,6 +388,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 +401,6 @@ export class TeleBoxManager {
             managerHighlightStage$: this._highlightStage$,
         });
 
-        box.mount(this.root);
-
         if (box.focus) {
             this.focusBox(box);
             if (smartPosition) {
@@ -522,6 +529,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();
     }

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: $base-z-index + 2000;
     top: 0;
     left: 0;
     width: 100%;