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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netless/telebox-insider",
-    "version": "1.0.0-alpha.2",
+    "version": "1.0.0-alpha.5",
     "private": false,
     "description": "Window widget for Whiteboard",
     "license": "MIT",
@@ -63,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 {}
@@ -129,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);
@@ -236,7 +248,7 @@ export class TeleBox {
         });
         this._sideEffect.addDisposer(() => teleStage.destroy());
 
-        const readonlyValConfig: ReadonlyValConfig = {
+        const propsValConfig: PropsValConfig = {
             darkMode: darkMode$,
             fence: fence$,
             minimized: minimized$,
@@ -245,7 +257,11 @@ export class TeleBox {
             rootRect: rootRect$,
             managerStageRect: managerStageRect$,
             collectorRect: collectorRect$,
+        };
+
+        withReadonlyValueEnhancer(this, propsValConfig);
 
+        const myReadonlyValConfig: MyReadonlyValConfig = {
             zIndex: zIndex$,
             focus: focus$,
 
@@ -266,7 +282,7 @@ export class TeleBox {
             contentStageRect: teleStage.stageRect$,
         };
 
-        withReadonlyValueEnhancer(this, readonlyValConfig);
+        withReadonlyValueEnhancer(this, myReadonlyValConfig, valManager);
 
         const valConfig: ValConfig = {
             title: title$,
@@ -276,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),
@@ -705,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/TeleBoxCollector/index.ts

@@ -6,10 +6,14 @@ 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";
 
@@ -25,17 +29,20 @@ export interface TeleBoxCollectorConfig {
 
 type ValConfig = {
     styles: Val<TeleStyles>;
-    el: Val<HTMLElement>;
+    $collector: Val<HTMLElement>;
+};
+
+type PropsValConfig = {
+    root: TeleBoxCollectorConfig["root$"];
 };
 
-type ReadonlyValConfig = {
+type MyReadonlyValConfig = {
     rect: ReadonlyVal<TeleBoxRect | undefined>;
     visible: ReadonlyVal<boolean>;
-    root: ReadonlyVal<HTMLElement | null>;
 };
 
 type CombinedValEnhancedResult = ValEnhancedResult<ValConfig> &
-    ReadonlyValEnhancedResult<ReadonlyValConfig>;
+    ReadonlyValEnhancedResult<PropsValConfig & MyReadonlyValConfig>;
 
 export interface TeleBoxCollector extends CombinedValEnhancedResult {}
 
@@ -51,25 +58,33 @@ export class TeleBoxCollector {
     }: 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 el$ = new Val<HTMLElement>(document.createElement("button"));
 
         const valConfig: ValConfig = {
             styles: styles$,
-            el: el$,
+            $collector: el$,
         };
 
-        withValueEnhancer(this, valConfig);
+        withValueEnhancer(this, valConfig, valManager);
 
-        const readonlyValConfig: ReadonlyValConfig = {
+        const propsValConfig: PropsValConfig = {
+            root: root$,
+        };
+
+        withReadonlyValueEnhancer(this, propsValConfig);
+
+        const myReadonlyValConfig: MyReadonlyValConfig = {
             rect: rect$,
             visible: visible$,
-            root: root$,
         };
 
-        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

@@ -109,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 {
@@ -83,6 +85,9 @@ export class TeleBoxManager {
 
         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);
@@ -107,22 +112,15 @@ export class TeleBoxManager {
                         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"
-                        );
+                        const rect = entries[0]?.contentRect;
+                        if (rect) {
+                            rootRect$.setValue({
+                                x: rect.x,
+                                y: rect.y,
+                                width: rect.width,
+                                height: rect.height,
+                            });
+                        }
                     });
                     observer.observe(root);
                     return () => observer.disconnect();
@@ -207,7 +205,10 @@ export class TeleBoxManager {
             rootRect$,
             ratio$: stageRatio$,
             root$,
-            highlightStage$,
+            highlightStage$: combine(
+                [highlightStage$, maximized$],
+                ([highlightStage, maximized]) => highlightStage && !maximized
+            ),
         });
         this._sideEffect.addDisposer(() => teleStage.destroy());
 
@@ -219,7 +220,7 @@ export class TeleBoxManager {
             stageRect: teleStage.stageRect$,
         };
 
-        withReadonlyValueEnhancer(this, readonlyValConfig);
+        withReadonlyValueEnhancer(this, readonlyValConfig, valManager);
 
         const valConfig: ValConfig = {
             prefersColorScheme: prefersColorScheme$,
@@ -231,7 +232,7 @@ export class TeleBoxManager {
             highlightStage: highlightStage$,
         };
 
-        withValueEnhancer(this, valConfig);
+        withValueEnhancer(this, valConfig, valManager);
 
         const closeBtnClassName = this.wrapClassName("titlebar-icon-close");
 
@@ -280,6 +281,7 @@ export class TeleBoxManager {
 
         this.titleBar = new MaxTitleBar({
             namespace: this.namespace,
+            title$: derive(this.topBox$, (topBox) => topBox?.title || ""),
             boxes$: this.boxes$,
             darkMode$: darkMode$,
             readonly$: readonly$,

package/src/TeleStage/index.ts

@@ -34,12 +34,8 @@ export class TeleStage {
         this.highlightStage$ = highlightStage$;
 
         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;
                 }

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

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;