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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netless/telebox-insider",
-    "version": "1.0.0-alpha.10",
+    "version": "1.0.0-alpha.13",
     "private": false,
     "description": "Window widget for Whiteboard",
     "license": "MIT",

package/src/TeleBox/index.ts

@@ -58,6 +58,7 @@ type ValConfig = {
     resizable: Val<RequiredTeleBoxConfig["resizable"], boolean>;
     draggable: Val<RequiredTeleBoxConfig["draggable"], boolean>;
     ratio: Val<RequiredTeleBoxConfig["ratio"], boolean>;
+    stageRatio: Val<number | null>;
 };
 
 type PropsValConfig = {
@@ -76,6 +77,7 @@ type MyReadonlyValConfig = {
     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>;
 
@@ -116,8 +118,10 @@ export class TeleBox {
         ratio = -1,
         focus = false,
         zIndex = 100,
+        stageRatio = null,
         titleBar,
         content,
+        stage,
         footer,
         styles,
         highlightStage = null,
@@ -129,7 +133,7 @@ export class TeleBox {
         root$,
         rootRect$,
         managerStageRect$,
-        stageRatio$,
+        managerStageRatio$,
         collectorRect$,
         managerHighlightStage$,
     }: TeleBoxConfig) {
@@ -149,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);
 
@@ -226,11 +231,9 @@ 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);
@@ -239,11 +242,17 @@ export class TeleBox {
             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());
@@ -266,6 +275,7 @@ export class TeleBox {
             focus: focus$,
 
             $userContent: $userContent$,
+            $userStage: $userStage$,
             $userFooter: $userFooter$,
             $userStyles: $userStyles$,
 
@@ -290,6 +300,7 @@ export class TeleBox {
             resizable: resizable$,
             draggable: draggable$,
             ratio: ratio$,
+            stageRatio: stageRatio$,
         };
 
         withValueEnhancer(this, valConfig, valManager);
@@ -573,6 +584,17 @@ export class TeleBox {
         this._$userContent$.setValue(undefined);
     }
 
+    public mountStage(stage: HTMLElement): void {
+        this._$userStage$.setValue(stage);
+    }
+
+    /**
+     * Unmount content from the box.
+     */
+    public unmountStage(): void {
+        this._$userStage$.setValue(undefined);
+    }
+
     /**
      * Mount dom to box Footer.
      */
@@ -617,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;
 
@@ -828,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");
@@ -1109,7 +1169,19 @@ export type ReadonlyTeleBox = Pick<
     | PropKeys
     | "wrapClassName"
     | "mountContent"
+    | "unmountContent"
     | "mountFooter"
+    | "unmountFooter"
+    | "mountStage"
+    | "unmountStage"
     | "mountStyles"
+    | "unmountStyles"
+    | "setStageRatio"
+    | "setDraggable"
+    | "setResizable"
+    | "setHighlightStage"
+    | "setTitle"
+    | "setRatio"
+    | "setVisible"
     | "handleTrackStart"
 >;

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;
@@ -85,7 +89,7 @@ export interface TeleBoxConfig {
     /** 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/TeleBoxManager/index.ts

@@ -394,7 +394,7 @@ export class TeleBoxManager {
             fence$: this._fence$,
             rootRect$: this._rootRect$,
             managerStageRect$: this._stageRect$,
-            stageRatio$: this._stageRatio$,
+            managerStageRatio$: this._stageRatio$,
             readonly$: this._readonly$,
             collectorRect$: this.collector._rect$,
             managerHighlightStage$: this._highlightStage$,
@@ -670,6 +670,9 @@ export class TeleBoxManager {
         if (config.zIndex != null) {
             box._zIndex$.setValue(config.zIndex, skipUpdate);
         }
+        if (config.stageRatio !== undefined) {
+            box.setStageRatio(config.stageRatio, skipUpdate);
+        }
         if (config.content != null) {
             box.mountContent(config.content);
         }

package/src/TeleBoxManager/typings.ts

@@ -37,11 +37,17 @@ type TeleBoxManagerBoxConfigBaseProps =
     | "resizable"
     | "draggable"
     | "ratio"
-    | "zIndex";
+    | "zIndex"
+    | "stageRatio";
 
 export type TeleBoxManagerCreateConfig = Pick<
     TeleBoxConfig,
-    TeleBoxManagerBoxConfigBaseProps | "content" | "footer" | "id" | "focus"
+    | TeleBoxManagerBoxConfigBaseProps
+    | "content"
+    | "stage"
+    | "footer"
+    | "id"
+    | "focus"
 >;
 
 export type TeleBoxManagerQueryConfig = Pick<
@@ -51,6 +57,7 @@ export type TeleBoxManagerQueryConfig = Pick<
     | "resizable"
     | "draggable"
     | "ratio"
+    | "stageRatio"
     | "zIndex"
     | "id"
     | "focus"
@@ -58,7 +65,7 @@ export type TeleBoxManagerQueryConfig = Pick<
 
 export type TeleBoxManagerUpdateConfig = Pick<
     TeleBoxConfig,
-    TeleBoxManagerBoxConfigBaseProps | "content" | "footer"
+    TeleBoxManagerBoxConfigBaseProps | "content" | "stage" | "footer"
 >;
 
 type CheckTeleBoxManagerConfig<