@netless/telebox-insider 1.0.0-alpha.11 → 1.0.0-alpha.14

package/package.json

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

package/src/TeleBox/index.ts

@@ -77,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>;
 
@@ -120,6 +121,7 @@ export class TeleBox {
         stageRatio = null,
         titleBar,
         content,
+        stage,
         footer,
         styles,
         highlightStage = null,
@@ -151,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);
 
@@ -228,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);
@@ -274,6 +275,7 @@ export class TeleBox {
             focus: focus$,
 
             $userContent: $userContent$,
+            $userStage: $userStage$,
             $userFooter: $userFooter$,
             $userStyles: $userStyles$,
 
@@ -582,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.
      */
@@ -626,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;
 
@@ -801,8 +817,8 @@ export class TeleBox {
             const observer = new ResizeObserver(() => {
                 const rect = $content.getBoundingClientRect();
                 this._contentRect$.setValue({
-                    x: rect.x,
-                    y: rect.y,
+                    x: 0,
+                    y: 0,
                     width: rect.width,
                     height: rect.height,
                 });
@@ -837,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");
@@ -1118,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

@@ -62,9 +62,11 @@ export interface TeleBoxConfig {
     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;

package/src/TeleBoxManager/index.ts

@@ -114,8 +114,8 @@ export class TeleBoxManager {
                     const observer = new ResizeObserver(() => {
                         const rect = root.getBoundingClientRect();
                         rootRect$.setValue({
-                            x: rect.x,
-                            y: rect.y,
+                            x: 0,
+                            y: 0,
                             width: rect.width,
                             height: rect.height,
                         });

package/src/TeleBoxManager/typings.ts

@@ -42,7 +42,12 @@ type TeleBoxManagerBoxConfigBaseProps =
 
 export type TeleBoxManagerCreateConfig = Pick<
     TeleBoxConfig,
-    TeleBoxManagerBoxConfigBaseProps | "content" | "footer" | "id" | "focus"
+    | TeleBoxManagerBoxConfigBaseProps
+    | "content"
+    | "stage"
+    | "footer"
+    | "id"
+    | "focus"
 >;
 
 export type TeleBoxManagerQueryConfig = Pick<
@@ -60,7 +65,7 @@ export type TeleBoxManagerQueryConfig = Pick<
 
 export type TeleBoxManagerUpdateConfig = Pick<
     TeleBoxConfig,
-    TeleBoxManagerBoxConfigBaseProps | "content" | "footer"
+    TeleBoxManagerBoxConfigBaseProps | "content" | "stage" | "footer"
 >;
 
 type CheckTeleBoxManagerConfig<