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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netless/telebox-insider",
-    "version": "1.0.0-alpha.1",
+    "version": "1.0.0-alpha.10",
     "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";
@@ -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;
@@ -475,10 +499,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(
@@ -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.
      */
@@ -711,34 +719,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 +789,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();

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/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;