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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@netless/telebox-insider",
3
- "version": "1.0.0-alpha.7",
3
+ "version": "1.0.0-alpha.8",
4
4
  "private": false,
5
5
  "description": "Window widget for Whiteboard",
6
6
  "license": "MIT",
@@ -737,12 +737,9 @@ export class TeleBox {
737
737
  scaleY: 1,
738
738
  };
739
739
  if (minimized && collectorRect) {
740
- const boxWidth = maximized
741
- ? this.rootRect.width
742
- : pxIntrinsicSize.width;
743
- const boxHeight = maximized
744
- ? this.rootRect.height
745
- : pxIntrinsicSize.height;
740
+ const { width: boxWidth, height: boxHeight } = maximized
741
+ ? this.rootRect
742
+ : pxIntrinsicSize;
746
743
  styles.x =
747
744
  collectorRect.x -
748
745
  boxWidth / 2 +
@@ -792,16 +789,14 @@ export class TeleBox {
792
789
  this.$content = $content;
793
790
 
794
791
  this._sideEffect.add(() => {
795
- const observer = new ResizeObserver((entries) => {
796
- const rect = entries[0]?.contentRect;
797
- if (rect) {
798
- this._contentRect$.setValue({
799
- x: rect.x,
800
- y: rect.y,
801
- width: rect.width,
802
- height: rect.height,
803
- });
804
- }
792
+ const observer = new ResizeObserver(() => {
793
+ const rect = $content.getBoundingClientRect();
794
+ this._contentRect$.setValue({
795
+ x: rect.x,
796
+ y: rect.y,
797
+ width: rect.width,
798
+ height: rect.height,
799
+ });
805
800
  });
806
801
  observer.observe($content);
807
802
  return () => observer.disconnect();
@@ -75,11 +75,6 @@ export class MaxTitleBar extends DefaultTitleBar {
75
75
 
76
76
  this.sideEffect.addDisposer(
77
77
  [
78
- this.rootRect$.subscribe((rootRect) => {
79
- const { x, y, width } = rootRect;
80
- $titleBar.style.transform = `translate(${x}px, ${y}px)`;
81
- $titleBar.style.width = width + "px";
82
- }),
83
78
  this.state$.subscribe((state) => {
84
79
  $titleBar.classList.toggle(
85
80
  this.wrapClassName("max-titlebar-maximized"),
@@ -16,7 +16,10 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
16
16
  position: absolute;
17
17
  top: 0;
18
18
  left: 0;
19
- z-index: $base-z-index * 500;
19
+ width: 100%;
20
+ z-index: $max-titlebar-z-index;
21
+ border-top-left-radius: 6px;
22
+ border-top-right-radius: 6px;
20
23
 
21
24
  .#{$namespace}-title {
22
25
  display: none;
@@ -95,7 +98,7 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
95
98
  height: 100%;
96
99
  overflow: hidden;
97
100
  max-width: 182px;
98
- min-width: 50px;
101
+ min-width: 150px;
99
102
  padding: 0 26px 0 16px;
100
103
  outline: none;
101
104
  font-size: 13px;
@@ -111,16 +111,14 @@ export class TeleBoxManager {
111
111
  if (!root) {
112
112
  return () => void 0;
113
113
  }
114
- const observer = new ResizeObserver((entries) => {
115
- const rect = entries[0]?.contentRect;
116
- if (rect) {
117
- rootRect$.setValue({
118
- x: rect.x,
119
- y: rect.y,
120
- width: rect.width,
121
- height: rect.height,
122
- });
123
- }
114
+ const observer = new ResizeObserver(() => {
115
+ const rect = root.getBoundingClientRect();
116
+ rootRect$.setValue({
117
+ x: rect.x,
118
+ y: rect.y,
119
+ width: rect.width,
120
+ height: rect.height,
121
+ });
124
122
  });
125
123
  observer.observe(root);
126
124
  return () => observer.disconnect();
@@ -1,4 +1,5 @@
1
1
  $namespace: "telebox";
2
2
  $base-z-index: 100;
3
- $stage-z-index: $base-z-index + 2000;
4
- $collector-z-index: $stage-z-index + 1;
3
+ $max-titlebar-z-index: $base-z-index + 5000;
4
+ $stage-z-index: $max-titlebar-z-index + 10;
5
+ $collector-z-index: $stage-z-index + 10;