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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netless/telebox-insider",
-    "version": "1.0.0-alpha.1",
+    "version": "1.0.0-alpha.12",
     "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.3.0"
     }
 }

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";
@@ -53,9 +58,10 @@ type ValConfig = {
     resizable: Val<RequiredTeleBoxConfig["resizable"], boolean>;
     draggable: Val<RequiredTeleBoxConfig["draggable"], boolean>;
     ratio: Val<RequiredTeleBoxConfig["ratio"], boolean>;
+    stageRatio: Val<number | null>;
 };
 
-type ReadonlyValConfig = {
+type PropsValConfig = {
     darkMode: RequiredTeleBoxConfig["darkMode$"];
     fence: RequiredTeleBoxConfig["fence$"];
     minimized: RequiredTeleBoxConfig["minimized$"];
@@ -64,11 +70,14 @@ type ReadonlyValConfig = {
     rootRect: RequiredTeleBoxConfig["rootRect$"];
     managerStageRect: RequiredTeleBoxConfig["managerStageRect$"];
     collectorRect: RequiredTeleBoxConfig["collectorRect$"];
+};
 
+type MyReadonlyValConfig = {
     zIndex: Val<RequiredTeleBoxConfig["zIndex"], boolean>;
     focus: Val<RequiredTeleBoxConfig["focus"], boolean>;
 
     $userContent: Val<TeleBoxConfig["content"], boolean>;
+    $userStage: Val<TeleBoxConfig["content"], boolean>;
     $userFooter: Val<TeleBoxConfig["footer"], boolean>;
     $userStyles: Val<TeleBoxConfig["styles"], boolean>;
 
@@ -85,7 +94,9 @@ type ReadonlyValConfig = {
     contentStageRect: ReadonlyVal<TeleBoxRect | null>;
 };
 
-type CombinedValEnhancedResult = ReadonlyValEnhancedResult<ReadonlyValConfig> &
+type CombinedValEnhancedResult = ReadonlyValEnhancedResult<
+    PropsValConfig & MyReadonlyValConfig
+> &
     ValEnhancedResult<ValConfig>;
 
 export interface TeleBox extends CombinedValEnhancedResult {}
@@ -107,8 +118,10 @@ export class TeleBox {
         ratio = -1,
         focus = false,
         zIndex = 100,
+        stageRatio = null,
         titleBar,
         content,
+        stage,
         footer,
         styles,
         highlightStage = null,
@@ -117,9 +130,10 @@ export class TeleBox {
         minimized$,
         maximized$,
         readonly$,
+        root$,
         rootRect$,
         managerStageRect$,
-        stageRatio$,
+        managerStageRatio$,
         collectorRect$,
         managerHighlightStage$,
     }: TeleBoxConfig) {
@@ -128,6 +142,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);
@@ -136,6 +153,7 @@ export class TeleBox {
         const zIndex$ = new Val(zIndex);
         const focus$ = new Val(focus);
         const $userContent$ = new Val(content);
+        const $userStage$ = new Val(stage);
         const $userFooter$ = new Val(footer);
         const $userStyles$ = new Val(styles);
 
@@ -213,26 +231,33 @@ export class TeleBox {
         );
 
         const highlightStage$ = combine(
-            [maximized$, boxHighlightStage$, managerHighlightStage$],
-            ([maximized, boxHighlightStage, managerHighlightStage]) =>
-                boxHighlightStage === null
-                    ? managerHighlightStage && maximized
-                    : boxHighlightStage
+            [boxHighlightStage$, managerHighlightStage$],
+            ([boxHighlightStage, managerHighlightStage]) =>
+                boxHighlightStage ?? managerHighlightStage
         );
 
+        const contentRoot$ = new Val<HTMLElement | null>(null);
+
         const contentRect$ = new Val<TeleBoxRect>(rootRect$.value, {
             compare: shallowequal,
         });
 
+        const stageRatio$ = new Val(stageRatio);
+
         const teleStage = new TeleStage({
             namespace,
+            root$: contentRoot$,
             rootRect$: contentRect$,
-            ratio$: stageRatio$,
+            ratio$: combine(
+                [stageRatio$, managerStageRatio$],
+                ([stageRatio, managerStageRatio]) =>
+                    stageRatio ?? managerStageRatio
+            ),
             highlightStage$,
         });
         this._sideEffect.addDisposer(() => teleStage.destroy());
 
-        const readonlyValConfig: ReadonlyValConfig = {
+        const propsValConfig: PropsValConfig = {
             darkMode: darkMode$,
             fence: fence$,
             minimized: minimized$,
@@ -241,11 +266,16 @@ export class TeleBox {
             rootRect: rootRect$,
             managerStageRect: managerStageRect$,
             collectorRect: collectorRect$,
+        };
 
+        withReadonlyValueEnhancer(this, propsValConfig);
+
+        const myReadonlyValConfig: MyReadonlyValConfig = {
             zIndex: zIndex$,
             focus: focus$,
 
             $userContent: $userContent$,
+            $userStage: $userStage$,
             $userFooter: $userFooter$,
             $userStyles: $userStyles$,
 
@@ -262,7 +292,7 @@ export class TeleBox {
             contentStageRect: teleStage.stageRect$,
         };
 
-        withReadonlyValueEnhancer(this, readonlyValConfig);
+        withReadonlyValueEnhancer(this, myReadonlyValConfig, valManager);
 
         const valConfig: ValConfig = {
             title: title$,
@@ -270,16 +300,17 @@ export class TeleBox {
             resizable: resizable$,
             draggable: draggable$,
             ratio: ratio$,
+            stageRatio: stageRatio$,
         };
 
-        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 +343,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 +367,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;
@@ -475,10 +510,10 @@ export class TeleBox {
             const rootRect = this.rootRect;
             safeX = clamp(
                 x,
-                rootRect.x - pxIntrinsicSize.width + 20,
-                rootRect.x + rootRect.width - 20
+                0 - pxIntrinsicSize.width + 20,
+                0 + rootRect.width - 20
             );
-            safeY = clamp(y, rootRect.y, rootRect.y + rootRect.height - 20);
+            safeY = clamp(y, 0, 0 + rootRect.height - 20);
         }
 
         this._intrinsicCoord$.setValue(
@@ -536,33 +571,28 @@ export class TeleBox {
     }
 
     /**
-     * Mount box to a container element.
+     * Mount dom to box content.
      */
-    public mount(container: HTMLElement): void {
-        container.appendChild(this.$box);
+    public mountContent(content: HTMLElement): void {
+        this._$userContent$.setValue(content);
     }
 
     /**
-     * Unmount box from the container element.
+     * Unmount content from the box.
      */
-    public unmount(): void {
-        if (this.$box.parentNode) {
-            this.$box.remove();
-        }
+    public unmountContent(): void {
+        this._$userContent$.setValue(undefined);
     }
 
-    /**
-     * Mount dom to box content.
-     */
-    public mountContent(content: HTMLElement): void {
-        this._$userContent$.setValue(content);
+    public mountStage(stage: HTMLElement): void {
+        this._$userStage$.setValue(stage);
     }
 
     /**
      * Unmount content from the box.
      */
-    public unmountContent(): void {
-        this._$userContent$.setValue(undefined);
+    public unmountStage(): void {
+        this._$userStage$.setValue(undefined);
     }
 
     /**
@@ -609,6 +639,9 @@ export class TeleBox {
     /** DOM of the box content */
     public $content!: HTMLElement;
 
+    /** DOM of the box stage area */
+    public $stage?: HTMLElement;
+
     /** DOM of the box title bar */
     public $titleBar!: HTMLElement;
 
@@ -711,34 +744,39 @@ export class TeleBox {
                 pxIntrinsicCoord,
                 collectorRect,
             ]) => {
+                const styles = maximized
+                    ? {
+                          x: 0,
+                          y: 0,
+                          width: "100%",
+                          height: "100%",
+                          scaleX: 1,
+                          scaleY: 1,
+                      }
+                    : {
+                          x: pxIntrinsicCoord.x,
+                          y: pxIntrinsicCoord.y,
+                          width: pxIntrinsicSize.width + "px",
+                          height: pxIntrinsicSize.height + "px",
+                          scaleX: 1,
+                          scaleY: 1,
+                      };
                 if (minimized && collectorRect) {
-                    return {
-                        x: collectorRect.x + collectorRect.width / 2,
-                        y: collectorRect.y + collectorRect.height / 2,
-                        width: pxIntrinsicSize.width + "px",
-                        height: pxIntrinsicSize.height + "px",
-                        scaleX: collectorRect.width / pxIntrinsicSize.width,
-                        scaleY: collectorRect.height / pxIntrinsicSize.height,
-                    };
-                }
-                if (maximized) {
-                    return {
-                        x: 0,
-                        y: 0,
-                        width: "100%",
-                        height: "100%",
-                        scaleX: 1,
-                        scaleY: 1,
-                    };
+                    const { width: boxWidth, height: boxHeight } = maximized
+                        ? this.rootRect
+                        : pxIntrinsicSize;
+                    styles.x =
+                        collectorRect.x -
+                        boxWidth / 2 +
+                        collectorRect.width / 2;
+                    styles.y =
+                        collectorRect.y -
+                        boxHeight / 2 +
+                        collectorRect.height / 2;
+                    styles.scaleX = collectorRect.width / boxWidth;
+                    styles.scaleY = collectorRect.height / boxHeight;
                 }
-                return {
-                    x: pxIntrinsicCoord.x,
-                    y: pxIntrinsicCoord.y,
-                    width: pxIntrinsicSize.width + "px",
-                    height: pxIntrinsicSize.height + "px",
-                    scaleX: 1,
-                    scaleY: 1,
-                };
+                return styles;
             },
             { compare: shallowequal }
         );
@@ -776,16 +814,14 @@ export class TeleBox {
         this.$content = $content;
 
         this._sideEffect.add(() => {
-            const observer = new ResizeObserver((entries) => {
-                const rect = entries[0]?.contentRect;
-                if (rect) {
-                    this._contentRect$.setValue({
-                        x: rect.x,
-                        y: rect.y,
-                        width: rect.width,
-                        height: rect.height,
-                    });
-                }
+            const observer = new ResizeObserver(() => {
+                const rect = $content.getBoundingClientRect();
+                this._contentRect$.setValue({
+                    x: rect.x,
+                    y: rect.y,
+                    width: rect.width,
+                    height: rect.height,
+                });
             });
             observer.observe($content);
             return () => observer.disconnect();
@@ -817,6 +853,41 @@ export class TeleBox {
             });
         });
 
+        this._sideEffect.add(() => {
+            let last$userStage: HTMLElement | undefined;
+            return this._$userStage$.subscribe(($userStage) => {
+                if (last$userStage) {
+                    last$userStage.remove();
+                }
+                last$userStage = $userStage;
+                if ($userStage) {
+                    if (!this.$stage) {
+                        const $stage = document.createElement("div");
+                        this.$stage = $stage;
+                        $stage.className = this.wrapClassName("content-stage");
+                        this._sideEffect.addDisposer(
+                            this._contentStageRect$.subscribe((rect) => {
+                                if (rect) {
+                                    $stage.style.top = rect.y + "px";
+                                    $stage.style.left = rect.x + "px";
+                                    $stage.style.width = rect.width + "px";
+                                    $stage.style.height = rect.height + "px";
+                                }
+                            }),
+                            "content-stage-rect"
+                        );
+                        $content.appendChild($stage);
+                    }
+                    if (!this.$stage.parentElement) {
+                        $content.appendChild(this.$stage);
+                    }
+                    this.$stage.appendChild($userStage);
+                } else if (this.$stage?.parentElement) {
+                    this.$stage.remove();
+                }
+            });
+        });
+
         $contentWrap.appendChild($content);
 
         const $footer = document.createElement("div");

package/src/TeleBox/style.scss

@@ -46,6 +46,10 @@
     position: relative;
 }
 
+.#{$namespace}-content-stage {
+    position: absolute;
+}
+
 .#{$namespace}-footer-wrap {
     flex-shrink: 0;
     display: flex;

package/src/TeleBox/typings.ts

@@ -56,13 +56,17 @@ export interface TeleBoxConfig {
     readonly focus?: boolean;
     /** Base z-index for box. */
     readonly zIndex?: number;
+    /** Box stage ratio. Follow manager stage ratio if null. Default null. */
+    readonly stageRatio?: number | null;
     /** Classname Prefix. For CSS styling. Default "telebox". */
     readonly namespace?: string;
     /** TeleTitleBar Instance. */
     readonly titleBar?: TeleTitleBar;
-    /** Box content. */
+    /** Box content element. */
     readonly content?: HTMLElement;
-    /** Box footer. */
+    /** Stage element. */
+    readonly stage?: HTMLElement;
+    /** Box footer element. */
     readonly footer?: HTMLElement;
     /** Box content styles. */
     readonly styles?: HTMLStyleElement;
@@ -78,12 +82,14 @@ 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 */
     readonly managerStageRect$: ReadonlyVal<TeleBoxRect>;
     /** Stage area height/with ratio. No ratio if <= 0. */
-    readonly stageRatio$: ReadonlyVal<number, boolean>;
+    readonly managerStageRatio$: ReadonlyVal<number, boolean>;
     /** Position and dimension of collector */
     readonly collectorRect$: ReadonlyVal<TeleBoxRect | undefined>;
     /** highlight stage settings from manager */

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/TeleBoxCollector/style.scss

@@ -7,7 +7,7 @@
     visibility: hidden;
     display: block;
     position: absolute;
-    z-index: $base-z-index * 2;
+    z-index: $collector-z-index;
     width: 40px;
     height: 40px;
     margin: 0;

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,17 +65,16 @@ 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"));
 
         this.sideEffect.addDisposer(
             [
-                this.rootRect$.subscribe((rootRect) => {
-                    const { x, y, width } = rootRect;
-                    $titleBar.style.transform = `translate(${x}px, ${y}px)`;
-                    $titleBar.style.width = width + "px";
-                }),
                 this.state$.subscribe((state) => {
                     $titleBar.classList.toggle(
                         this.wrapClassName("max-titlebar-maximized"),
@@ -94,9 +104,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/MaxTitleBar/style.scss

@@ -16,7 +16,10 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
     position: absolute;
     top: 0;
     left: 0;
-    z-index: $base-z-index * 500;
+    width: 100%;
+    z-index: $max-titlebar-z-index;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
 
     .#{$namespace}-title {
         display: none;
@@ -95,7 +98,7 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
     height: 100%;
     overflow: hidden;
     max-width: 182px;
-    min-width: 50px;
+    min-width: 150px;
     padding: 0 26px 0 16px;
     outline: none;
     font-size: 13px;