@netless/telebox-insider 1.0.0-alpha.6 → 1.0.0-alpha.9

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netless/telebox-insider",
-    "version": "1.0.0-alpha.6",
+    "version": "1.0.0-alpha.9",
     "private": false,
     "description": "Window widget for Whiteboard",
     "license": "MIT",
@@ -63,6 +63,6 @@
         "shallowequal": "^1.1.0",
         "side-effect-manager": "^1.1.0",
         "stylefire": "^7.0.3",
-        "value-enhancer": "^1.2.1"
+        "value-enhancer": "^1.3.0"
     }
 }

package/src/TeleBox/index.ts

@@ -719,40 +719,39 @@ 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 { width: boxWidth, height: boxHeight } = maximized
+                        ? this.rootRect
+                        : pxIntrinsicSize;
+                    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 }
         );
@@ -790,16 +789,14 @@ export class TeleBox {
         this.$content = $content;
 
         this._sideEffect.add(() => {
-            const observer = new ResizeObserver((entries) => {
-                const rect = entries[0]?.contentRect;
-                if (rect) {
-                    this._contentRect$.setValue({
-                        x: rect.x,
-                        y: rect.y,
-                        width: rect.width,
-                        height: rect.height,
-                    });
-                }
+            const observer = new ResizeObserver(() => {
+                const rect = $content.getBoundingClientRect();
+                this._contentRect$.setValue({
+                    x: rect.x,
+                    y: rect.y,
+                    width: rect.width,
+                    height: rect.height,
+                });
             });
             observer.observe($content);
             return () => observer.disconnect();

package/src/TeleBoxManager/MaxTitleBar/index.ts

@@ -75,11 +75,6 @@ export class MaxTitleBar extends DefaultTitleBar {
 
         this.sideEffect.addDisposer(
             [
-                this.rootRect$.subscribe((rootRect) => {
-                    const { x, y, width } = rootRect;
-                    $titleBar.style.transform = `translate(${x}px, ${y}px)`;
-                    $titleBar.style.width = width + "px";
-                }),
                 this.state$.subscribe((state) => {
                     $titleBar.classList.toggle(
                         this.wrapClassName("max-titlebar-maximized"),

package/src/TeleBoxManager/MaxTitleBar/style.scss

@@ -16,7 +16,10 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
     position: absolute;
     top: 0;
     left: 0;
-    z-index: $base-z-index * 500;
+    width: 100%;
+    z-index: $max-titlebar-z-index;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
 
     .#{$namespace}-title {
         display: none;
@@ -95,7 +98,7 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
     height: 100%;
     overflow: hidden;
     max-width: 182px;
-    min-width: 50px;
+    min-width: 150px;
     padding: 0 26px 0 16px;
     outline: none;
     font-size: 13px;

package/src/TeleBoxManager/index.ts

@@ -111,16 +111,14 @@ export class TeleBoxManager {
                     if (!root) {
                         return () => void 0;
                     }
-                    const observer = new ResizeObserver((entries) => {
-                        const rect = entries[0]?.contentRect;
-                        if (rect) {
-                            rootRect$.setValue({
-                                x: rect.x,
-                                y: rect.y,
-                                width: rect.width,
-                                height: rect.height,
-                            });
-                        }
+                    const observer = new ResizeObserver(() => {
+                        const rect = root.getBoundingClientRect();
+                        rootRect$.setValue({
+                            x: rect.x,
+                            y: rect.y,
+                            width: rect.width,
+                            height: rect.height,
+                        });
                     });
                     observer.observe(root);
                     return () => observer.disconnect();
@@ -206,8 +204,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/scss/variables.scss

@@ -1,4 +1,5 @@
 $namespace: "telebox";
 $base-z-index: 100;
-$stage-z-index: $base-z-index + 2000;
-$collector-z-index: $stage-z-index + 1;
+$max-titlebar-z-index: $base-z-index + 5000;
+$stage-z-index: $max-titlebar-z-index + 10;
+$collector-z-index: $stage-z-index + 10;