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

package/package.json

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

package/src/TeleBox/index.ts

@@ -91,7 +91,7 @@ type MyReadonlyValConfig = {
     highlightStage: ReadonlyVal<boolean, boolean>;
     boxHighlightStage: Val<boolean | null, boolean>;
     contentRect: Val<TeleBoxRect>;
-    contentStageRect: ReadonlyVal<TeleBoxRect | null>;
+    contentStageRect: ReadonlyVal<TeleBoxRect>;
 };
 
 type CombinedValEnhancedResult = ReadonlyValEnhancedResult<
@@ -744,7 +744,14 @@ export class TeleBox {
                 pxIntrinsicCoord,
                 collectorRect,
             ]) => {
-                const styles = maximized
+                const styles: {
+                    x: number;
+                    y: number;
+                    width: string;
+                    height: string;
+                    scaleX: number;
+                    scaleY: number;
+                } = maximized
                     ? {
                           x: 0,
                           y: 0,
@@ -867,12 +874,10 @@ export class TeleBox {
                         $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";
-                                }
+                                $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"
                         );
@@ -1184,4 +1189,5 @@ export type ReadonlyTeleBox = Pick<
     | "setRatio"
     | "setVisible"
     | "handleTrackStart"
+    | "onValChanged"
 >;

package/src/TeleBoxCollector/index.ts

@@ -24,7 +24,6 @@ export interface TeleBoxCollectorConfig {
     minimized$: Val<boolean>;
     readonly$: ReadonlyVal<boolean>;
     darkMode$: ReadonlyVal<boolean>;
-    rootRect$: ReadonlyVal<TeleBoxRect>;
 }
 
 type ValConfig = {
@@ -51,7 +50,6 @@ export class TeleBoxCollector {
         minimized$,
         readonly$,
         darkMode$,
-        rootRect$,
         namespace = "telebox",
         styles = {},
         root$,
@@ -144,11 +142,13 @@ export class TeleBoxCollector {
                             }
                         }),
                         // Place after $collector appended to the DOM so that rect calc works
-                        combine([minimized$, rootRect$, root$]).subscribe(
-                            ([minimized, rootRect, root]) => {
+                        combine([minimized$, root$]).subscribe(
+                            ([minimized, root]) => {
                                 if (minimized && root) {
                                     const { x, y, width, height } =
                                         $collector.getBoundingClientRect();
+                                    const rootRect =
+                                        root.getBoundingClientRect();
                                     rect$.setValue({
                                         x: x - rootRect.x,
                                         y: y - rootRect.y,

package/src/TeleBoxManager/index.ts

@@ -195,7 +195,6 @@ export class TeleBoxManager {
                 darkMode$: darkMode$,
                 namespace,
                 root$,
-                rootRect$,
             });
 
         const teleStage = new TeleStage({