@netless/telebox-insider 1.0.0-alpha.4 → 1.0.0-alpha.7

package/package.json

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

package/src/TeleBox/index.ts

@@ -719,40 +719,42 @@ export class TeleBox {
                 pxIntrinsicCoord,
                 collectorRect,
             ]) => {
+                const styles = maximized
+                    ? {
+                          x: 0,
+                          y: 0,
+                          width: "100%",
+                          height: "100%",
+                          scaleX: 1,
+                          scaleY: 1,
+                      }
+                    : {
+                          x: pxIntrinsicCoord.x,
+                          y: pxIntrinsicCoord.y,
+                          width: pxIntrinsicSize.width + "px",
+                          height: pxIntrinsicSize.height + "px",
+                          scaleX: 1,
+                          scaleY: 1,
+                      };
                 if (minimized && collectorRect) {
-                    return {
-                        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,
-                        scaleY: collectorRect.height / pxIntrinsicSize.height,
-                    };
-                }
-                if (maximized) {
-                    return {
-                        x: 0,
-                        y: 0,
-                        width: "100%",
-                        height: "100%",
-                        scaleX: 1,
-                        scaleY: 1,
-                    };
+                    const boxWidth = maximized
+                        ? this.rootRect.width
+                        : pxIntrinsicSize.width;
+                    const boxHeight = maximized
+                        ? this.rootRect.height
+                        : pxIntrinsicSize.height;
+                    styles.x =
+                        collectorRect.x -
+                        boxWidth / 2 +
+                        collectorRect.width / 2;
+                    styles.y =
+                        collectorRect.y -
+                        boxHeight / 2 +
+                        collectorRect.height / 2;
+                    styles.scaleX = collectorRect.width / boxWidth;
+                    styles.scaleY = collectorRect.height / boxHeight;
                 }
-                return {
-                    x: pxIntrinsicCoord.x,
-                    y: pxIntrinsicCoord.y,
-                    width: pxIntrinsicSize.width + "px",
-                    height: pxIntrinsicSize.height + "px",
-                    scaleX: 1,
-                    scaleY: 1,
-                };
+                return styles;
             },
             { compare: shallowequal }
         );

package/src/TeleBoxCollector/style.scss

@@ -7,7 +7,7 @@
     visibility: hidden;
     display: block;
     position: absolute;
-    z-index: $base-z-index * 2;
+    z-index: $collector-z-index;
     width: 40px;
     height: 40px;
     margin: 0;

package/src/TeleBoxManager/index.ts

@@ -206,8 +206,9 @@ export class TeleBoxManager {
             ratio$: stageRatio$,
             root$,
             highlightStage$: combine(
-                [highlightStage$, maximized$],
-                ([highlightStage, maximized]) => highlightStage && !maximized
+                [highlightStage$, maximized$, minimized$],
+                ([highlightStage, maximized, minimized]) =>
+                    highlightStage && (minimized || !maximized)
             ),
         });
         this._sideEffect.addDisposer(() => teleStage.destroy());

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 + 2000;
+    z-index: $stage-z-index;
     top: 0;
     left: 0;
     width: 100%;

package/src/scss/variables.scss

@@ -1,2 +1,4 @@
 $namespace: "telebox";
 $base-z-index: 100;
+$stage-z-index: $base-z-index + 2000;
+$collector-z-index: $stage-z-index + 1;