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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netless/telebox-insider",
-    "version": "1.0.0-alpha.10",
+    "version": "1.0.0-alpha.11",
     "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 = {
@@ -116,6 +117,7 @@ export class TeleBox {
         ratio = -1,
         focus = false,
         zIndex = 100,
+        stageRatio = null,
         titleBar,
         content,
         footer,
@@ -129,7 +131,7 @@ export class TeleBox {
         root$,
         rootRect$,
         managerStageRect$,
-        stageRatio$,
+        managerStageRatio$,
         collectorRect$,
         managerHighlightStage$,
     }: TeleBoxConfig) {
@@ -239,11 +241,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());
@@ -290,6 +298,7 @@ export class TeleBox {
             resizable: resizable$,
             draggable: draggable$,
             ratio: ratio$,
+            stageRatio: stageRatio$,
         };
 
         withValueEnhancer(this, valConfig, valManager);

package/src/TeleBox/typings.ts

@@ -56,6 +56,8 @@ 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. */
@@ -85,7 +87,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,7 +37,8 @@ type TeleBoxManagerBoxConfigBaseProps =
     | "resizable"
     | "draggable"
     | "ratio"
-    | "zIndex";
+    | "zIndex"
+    | "stageRatio";
 
 export type TeleBoxManagerCreateConfig = Pick<
     TeleBoxConfig,
@@ -51,6 +52,7 @@ export type TeleBoxManagerQueryConfig = Pick<
     | "resizable"
     | "draggable"
     | "ratio"
+    | "stageRatio"
     | "zIndex"
     | "id"
     | "focus"