@worktile/theia 15.0.6 → 15.0.8

package/fesm2020/worktile-theia.mjs

@@ -3155,6 +3155,7 @@ class TheContextService {
         };
         this.containerScrolled$ = new Subject();
         this.uploadingStatus$ = new Subject();
+        this.containerResized$ = new Subject();
         this.ngZone.runOutsideAngular(() => {
             this.onMouseUp$ = fromEvent(window, `mouseup`).pipe(takeUntil(this.destroy$));
             this.onMouseMove$ = fromEvent(window, `mousemove`).pipe(takeUntil(this.destroy$));
@@ -3164,6 +3165,7 @@ class TheContextService {
     initialize(options) {
         this.options = options;
         this.rebindContainerScroll();
+        this.bindContainerResize();
     }
     rebindContainerScroll() {
         this.scrollSubscription?.unsubscribe();
@@ -3179,6 +3181,10 @@ class TheContextService {
             }
         }
     }
+    bindContainerResize() {
+        this.resizeObserver = new ResizeObserver(entires => this.containerResized$.next(entires));
+        return this.resizeObserver.observe(this.options.nativeElement);
+    }
     getOptions() {
         if (!this.options.width) {
             const firstElementChild = this.getFirstElementChild();
@@ -3208,6 +3214,8 @@ class TheContextService {
     ngOnDestroy() {
         this.uploadingStatus$.complete();
         this.containerScrolled$?.complete();
+        this.containerResized$?.complete();
+        this.resizeObserver.disconnect();
         this.scrollSubscription?.unsubscribe();
         this.destroy$.next();
         this.destroy$.complete();
@@ -12823,6 +12831,7 @@ class TheTableComponent extends TheBaseElementComponent {
             }
             this.setHeaderCellStyle();
             this.subscribeScrollContainerScroll();
+            this.contextService.containerResized$.pipe(takeUntil(this.destroy$)).subscribe(() => this.setHeaderRowStyle());
         });
     }
     subscribeScrollContainerScroll() {
@@ -12905,25 +12914,21 @@ class TheTableComponent extends TheBaseElementComponent {
     }
     setGridColumnsStyle() {
         const colControl = this.columnControlsWrapper.nativeElement;
-        const headerRow = this.nativeElement.querySelector('tbody tr');
-        const stickyRows = this.isInTable ? [colControl, headerRow] : [headerRow];
+        const rows = [...this.nativeElement.querySelectorAll('tbody tr')];
+        // 只有一行的表格不支持固定
+        if (rows.length <= 1) {
+            return;
+        }
         if (this.freezeRowPipe.transform(this.element, this.headerRow, this.tablePluginOptions)) {
             let gridColumns = '';
             const tablePadding = 44;
-            let tableWidth = this.elementRef.nativeElement.offsetWidth;
+            let tableWidth = this.tableWrapper.nativeElement.getBoundingClientRect().width;
             tableWidth = this.element.options?.numberedColumn ? tableWidth - tablePadding : tableWidth;
-            const colgroup = this.nativeElement.querySelector('colgroup');
-            let cellElements;
-            if (colgroup && !this.tableStore.isFullscreen) {
-                cellElements = [...this.nativeElement.querySelector('colgroup').children];
-            }
-            else {
-                /* 默认插入的表格元素是没有 columns 字段的（后来做的），所以也就不会渲染 colgroup  */
-                cellElements = [...headerRow.querySelectorAll('td')];
-            }
+            const cellElements = [...rows[1].querySelectorAll('td')];
             cellElements.forEach(item => {
-                gridColumns += getElementWidth(item) + 'px ';
+                gridColumns += item.getBoundingClientRect().width + 'px ';
             });
+            const stickyRows = this.isInTable ? [colControl, rows[0]] : [rows[0]];
             stickyRows.map(item => {
                 this.renderer.setStyle(item, 'grid-template-columns', gridColumns);
                 this.renderer.setStyle(item, 'width', tableWidth + 'px');
@@ -13350,8 +13355,11 @@ class TheTableComponent extends TheBaseElementComponent {
         if (this.isStickyTop) {
             const stickyRows = this.elementRef.nativeElement.querySelectorAll('.the-sticky-row');
             for (const stiRow of stickyRows) {
-                // 同步滚动状态到 .the-sticky-row
-                stiRow.scrollLeft = this.tableWrapper.nativeElement.scrollLeft;
+                // 修复获取 scrollLeft 属性引起的浏览器重绘，导致跳动问题 #WIK-11038
+                requestAnimationFrame(() => {
+                    // 同步滚动状态到 .the-sticky-row
+                    stiRow.scrollLeft = this.tableWrapper.nativeElement.scrollLeft;
+                });
             }
         }
     }