@worktile/theia 15.1.8 → 15.1.11

package/fesm2020/worktile-theia.mjs

@@ -12370,10 +12370,6 @@ const getColumnsWidth = (cellRow, isColgroup = false) => {
 };
 /**
  * 计算表格列宽
- * 1. 编辑模式下，返回原始列宽
- * 2. 预览模式下，返回基于当前表格宽度计算的列宽
- *    a. 打印模式下，按照原宽度比例基于当前表格宽度计算列宽
- *    b. 非打印模式下计算
  * @param isReadonly
  * @param element
  * @param tableWidth
@@ -12383,31 +12379,12 @@ const getColumnsWidth = (cellRow, isColgroup = false) => {
 const calcColumnGroups = (isReadonly, element, tableWidth, mode) => {
     const columns = element?.columns;
     if (isReadonly) {
-        const isPrint = mode === TheMode.print;
-        const numberedColumnWidth = element.options?.numberedColumn ? TABLE_NUMBER_COLUMN : 0;
         if (columns) {
             const opts = new TableOptions();
-            const columnsWidth = columns.reduce((a, b) => a + b.width, 0);
-            const cellsWidthRatio = columns.map(column => {
-                return isPrint ? Math.floor((column.width / columnsWidth) * 100) / 100 : column.width / columnsWidth;
-            });
-            const newColumns = cellsWidthRatio.map(item => {
-                let cellWidth = opts.minWidthPx;
-                if (isPrint) {
-                    // 按照 DPI 96 的 A4 纸宽度是 794, 打印时左右 80px 的边距，所以这里取 794 - 80 * 2 = 634
-                    // 如果存在序号列，还需要在 634 基础上减去序号列的宽度，剩下的才是内容区域的宽度
-                    // 为什么减 1， 因为这个宽度是内容区域宽度，但 td 右侧还有一个边框，所以减去 1
-                    const newTableWidth = 634 - numberedColumnWidth;
-                    cellWidth = parseInt(`${item * newTableWidth}`) - 1;
-                }
-                else {
-                    // 总列宽大于当前表格宽度时，按照设置时的总列宽计算
-                    const newTableWidth = tableWidth - numberedColumnWidth;
-                    const columnTotalWidth = columnsWidth > tableWidth ? columnsWidth : newTableWidth;
-                    cellWidth = item * columnTotalWidth;
-                }
-                return { width: cellWidth < opts.minWidthPx ? opts.minWidthPx : cellWidth };
-            });
+            const isPrint = mode === TheMode.print;
+            const newColumns = isPrint
+                ? calcPrintColumnWidth(element, opts.minWidthPx)
+                : calcColumnWidth(element, tableWidth, opts.minWidthPx);
             return newColumns;
         }
         return [];
@@ -12416,6 +12393,53 @@ const calcColumnGroups = (isReadonly, element, tableWidth, mode) => {
         return columns;
     }
 };
+/**
+ * 计算表格列宽
+ * @param element
+ * @param tableWidth
+ * @param minWidthPx
+ * @returns number[]
+ */
+const calcColumnWidth = (element, tableWidth, minWidthPx) => {
+    const columns = element?.columns;
+    const numberedColumnWidth = element.options?.numberedColumn ? TABLE_NUMBER_COLUMN : 0;
+    const columnsWidth = columns.reduce((a, b) => a + b.width, 0);
+    // 总列宽大于当前表格宽度时，按照设置时的总列宽计算
+    const columnTotalWidth = Math.max(columnsWidth, tableWidth - numberedColumnWidth);
+    return columns.map(column => {
+        const cellWidth = (column.width / columnsWidth) * columnTotalWidth;
+        return { width: Math.max(cellWidth, minWidthPx) };
+    });
+};
+/**
+ * 打印模式下，按照原宽度比例基于当前表格宽度计算列宽
+ * 1. 所有列的最小列宽总和大于表格宽度时，所有列返回最小宽度
+ * @param element
+ * @param minWidthPx
+ * @returns number[]
+ */
+const calcPrintColumnWidth = (element, minWidthPx) => {
+    const columns = element?.columns;
+    const numberedColumnWidth = element.options?.numberedColumn ? TABLE_NUMBER_COLUMN : 0;
+    // 按照 DPI 96 的 A4 纸宽度是 794, 打印时左右 80px 的边距，所以这里取 794 - 80 * 2 = 634
+    // 如果存在序号列，还需要在 634 基础上减去序号列的宽度，剩下的才是内容区域的宽度
+    let columnTotalWidth = 634 - numberedColumnWidth;
+    const columnsWidth = columns.reduce((a, b) => a + b.width, 0);
+    // 计算所有列的 minWidth 总和
+    const totalMinWidth = minWidthPx * columns.length;
+    if (totalMinWidth > columnTotalWidth) {
+        // 如果所有列的 minWidth 总和大于 columnTotalWidth，所有列返回最小宽度
+        return columns.map(() => ({ width: minWidthPx }));
+    }
+    // 在剩余的宽度中按比例分配
+    const remainingWidth = columnTotalWidth - totalMinWidth;
+    const remainingWidthRatio = columns.map(column => column.width / columnsWidth);
+    // 为什么减 1， 因为这个宽度是内容区域宽度，但 td 右侧还有一个边框，所以减去 1
+    let newColumnsWidth = remainingWidthRatio.map(ratio => minWidthPx + Math.floor(ratio * remainingWidth) - 1);
+    return columns.map((_, index) => ({
+        width: newColumnsWidth[index]
+    }));
+};
 
 /**
  * 计算最小行跨距单元格
@@ -12757,9 +12781,9 @@ class TheTableComponent extends TheBaseElementComponent {
             });
             this.getIsInTable();
             this.getColControls();
+            this.getColumnGroups();
         }
         this.headerRow = isHeaderRow(this.element);
-        this.getColumnGroups();
     }
     constructor(elementRef, eventDispatcher, resizeNotifier, tableStore, cdr, ngZone, tableService, theTableContextMenuService, freezeColumnPipe, freezeRowPipe, renderer, contextService, config) {
         super(elementRef, cdr);
@@ -12840,6 +12864,7 @@ class TheTableComponent extends TheBaseElementComponent {
             this.listenOnSelectedCells();
             this.listenKeydownSelectEvents();
             this.listenTableWrapperScroll();
+            this.getColumnGroups();
             if (this.element.options?.numberedColumn) {
                 const loadImageDone = await this.resolveImage();
                 // 等待序号列表格内图片加载完成后再去渲染表格行高度
@@ -12868,6 +12893,7 @@ class TheTableComponent extends TheBaseElementComponent {
                     this.setStickyRowStyle();
                     this.bindTableScrollingShadow();
                     this.setHeaderRowShadow();
+                    this.getColumnGroups();
                 }
             });
             this.contextService.windowResized$.pipe(takeUntil(this.destroy$)).subscribe(result => {
@@ -12880,6 +12906,7 @@ class TheTableComponent extends TheBaseElementComponent {
     }
     getColumnGroups() {
         this.columns = calcColumnGroups(this.readonly, this.element, this.elementRef.nativeElement.offsetWidth, this.config.mode);
+        this.readonly && this.cdr.detectChanges();
     }
     /* 给标题行的左/右加阴影 */
     setHeaderRowShadow() {
@@ -13433,7 +13460,7 @@ class TheTableComponent extends TheBaseElementComponent {
     }
 }
 TheTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheTableComponent, deps: [{ token: i0.ElementRef }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: TableStore }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TableService }, { token: TheTableContextMenuService }, { token: TableFreezeColumnPipe }, { token: TableFreezeRowPipe }, { token: i0.Renderer2 }, { token: TheContextService }, { token: THE_MODE_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-TheTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: TheTableComponent, selector: "the-table, [theTable]", host: { listeners: { "mousedown": "handleMousedown($event)" }, properties: { "class.the-table-with-controls": "isInTable || tableStore.isRightClicking || tableStore.isFocusedInput", "class.the-table-with-sticky-column": "freezeColumnPipe.transform(element, tablePluginOptions)", "class.the-numbered-table": "!readonly && element?.options?.numberedColumn", "class.the-table-selection-hide": "tableStore.isCellSelecting || tableStore.isRightClicking || tableStore.isFocusedInput" } }, providers: [
+TheTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: TheTableComponent, selector: "the-table, [theTable]", host: { listeners: { "mousedown": "handleMousedown($event)" }, properties: { "class.the-table-with-controls": "isInTable || tableStore.isRightClicking || tableStore.isFocusedInput", "class.the-table-with-sticky-column": "freezeColumnPipe.transform(element, tablePluginOptions)", "class.the-numbered-table": "element?.options?.numberedColumn", "class.the-table-selection-hide": "tableStore.isCellSelecting || tableStore.isRightClicking || tableStore.isFocusedInput" } }, providers: [
         TableStore,
         TableService,
         TheTableContextMenuService,
@@ -13463,7 +13490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                     ], host: {
                         '[class.the-table-with-controls]': 'isInTable || tableStore.isRightClicking || tableStore.isFocusedInput',
                         '[class.the-table-with-sticky-column]': 'freezeColumnPipe.transform(element, tablePluginOptions)',
-                        '[class.the-numbered-table]': '!readonly && element?.options?.numberedColumn',
+                        '[class.the-numbered-table]': 'element?.options?.numberedColumn',
                         '[class.the-table-selection-hide]': 'tableStore.isCellSelecting || tableStore.isRightClicking || tableStore.isFocusedInput'
                     }, template: "<div class=\"the-table-container\" theColumnResize>\n  <div #tableRowControlsWrapper class=\"the-table-row-controls-wrapper\">\n    <div\n      class=\"the-table-corner-controls the-sticky-corner-controls\"\n      #cornerControl\n      [ngClass]=\"{\n        visible: !readonly && (isInTable || tableStore.isRightClicking || tableStore.isFocusedInput),\n        'control-active': isSelectedAllCell,\n        dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0\n      }\"\n    >\n      <div class=\"the-table-corner-button\" (mousedown)=\"onSelectTable($event)\"></div>\n      <div class=\"the-table-corner-controls-insert-row-marker\" *ngIf=\"!headerRow\">\n        <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n      </div>\n      <div class=\"the-table-corner-controls-insert-column-marker\" *ngIf=\"!element.options?.headerColumn\">\n        <the-table-insert-mark type=\"column\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n      </div>\n    </div>\n    <div class=\"the-table-row-controls\">\n      <div class=\"the-table-row-controls-inner\" #rowControlsInner>\n        <div\n          class=\"the-table-row-controls-button-wrap\"\n          #rowControlsButtonWrapper\n          *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowControls\"\n          [ngClass]=\"{\n            'control-active': tableStore.selectedRowsIndex.includes(control.rowIndex),\n            dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n          }\"\n        >\n          <ng-container\n            *ngIf=\"!readonly && (isInTable || tableStore.isRightClicking || tableStore.isFocusedInput) && !element?.options?.numberedColumn\"\n          >\n            <button\n              (mousedown)=\"onRowMousedown($event, control.rowIndex)\"\n              type=\"button\"\n              [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n              class=\"the-table-row-controls-button the-table-controls-button\"\n            ></button>\n          </ng-container>\n          <ng-container *ngIf=\"element?.options?.numberedColumn\">\n            <div\n              [contentEditable]=\"false\"\n              contenteditable=\"false\"\n              (mousedown)=\"onRowMousedown($event, control.rowIndex)\"\n              class=\"the-table-numbered-controls-button\"\n              [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n            >\n              <p class=\"row-number d-flex align-items-center\">{{ headerRow && i === 0 ? '' : headerRow ? i : i + 1 }}</p>\n            </div>\n          </ng-container>\n          <the-table-insert-mark type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\"> </the-table-insert-mark>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"the-table-wrapper\" #tableWrapper [ngClass]=\"{ 'the-table-numbered': element?.options?.numberedColumn }\">\n    <table class=\"the-table\" #theTable>\n      <colgroup #colgroup *ngIf=\"columns\">\n        <col *ngIf=\"readonly && element?.options?.numberedColumn\" class=\"the-table-number-col\" />\n        <col *ngFor=\"let col of columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n      </colgroup>\n      <thead>\n        <tr class=\"the-table-col-controls-wrapper the-sticky-row\" #columnControlsWrapper>\n          <th *ngIf=\"readonly && element?.options?.numberedColumn\" class=\"the-table-number-col\"></th>\n          <th\n            #colControl\n            class=\"the-table-col-controls\"\n            *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColControls\"\n            [ngClass]=\"{\n              'control-active': tableStore.selectedColumnsIndex.includes(i),\n              dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n            }\"\n            (mousedown)=\"onColMousedown($event, i)\"\n          >\n            <the-table-insert-mark\n              *ngIf=\"isInTable || tableStore.isRightClicking || tableStore.isFocusedInput\"\n              type=\"column\"\n              [at]=\"i + 1\"\n              [tableStore]=\"tableStore\"\n              [parentElement]=\"colControl\"\n            >\n            </the-table-insert-mark>\n          </th>\n        </tr>\n      </thead>\n      <tbody #tbody>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"> </slate-children>\n      </tbody>\n      <div\n        *ngIf=\"!element.options?.headerColumn\"\n        #headerRowLeftShadow\n        class=\"header-row-shadow header-row-left-shadow\"\n        contenteditable=\"false\"\n      ></div>\n      <div class=\"header-row-shadow header-row-right-shadow\" #headerRowRightShadow contenteditable=\"false\"></div>\n    </table>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: TableCellEventDispatcher }, { type: ColumnResizeNotifierSource }, { type: TableStore }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: TableService }, { type: TheTableContextMenuService }, { type: TableFreezeColumnPipe }, { type: TableFreezeRowPipe }, { type: i0.Renderer2 }, { type: TheContextService }, { type: TheModeConfig, decorators: [{