@worktile/theia 14.3.12 → 14.3.13

package/fesm2020/worktile-theia.mjs

@@ -28,7 +28,7 @@ import { ThyDividerComponent, ThyDividerModule } from 'ngx-tethys/divider';
 import * as i2$2 from '@angular/cdk/scrolling';
 import { CdkScrollable, ScrollingModule } from '@angular/cdk/scrolling';
 import { mixinUnsubscribe, MixinBase, ScrollToService } from 'ngx-tethys/core';
-import { isKeyHotkey } from 'is-hotkey';
+import { isKeyHotkey, isHotkey } from 'is-hotkey';
 import { Subject, fromEvent, timer, combineLatest, Observable, BehaviorSubject, merge, ReplaySubject } from 'rxjs';
 import { takeUntil, take, delay, map as map$1, skip, filter, debounceTime, startWith, distinctUntilChanged, share, mapTo, pairwise } from 'rxjs/operators';
 import * as i5 from 'ngx-tethys/input';
@@ -3147,7 +3147,8 @@ class TheContextService {
     rebindContainerScroll() {
         this.scrollSubscription?.unsubscribe();
         if (this.options.theOptions?.scrollContainer) {
-            const containerElement = this.options.nativeElement.closest(this.options.theOptions.scrollContainer);
+            const containerElement = this.options.nativeElement.closest(this.options.theOptions.scrollContainer) ||
+                this.options.nativeElement.querySelector(this.options.theOptions.scrollContainer);
             if (containerElement) {
                 this.ngZone.runOutsideAngular(() => {
                     this.scrollSubscription = fromEvent(containerElement, 'scroll').subscribe(event => {
@@ -11193,10 +11194,10 @@ function setCellMenuVisibility(editor, menuList, tableInfo) {
                 item.visibility = selectCellNodes && selectCellNodes.length === 1 && isCellMerged;
                 break;
             case 'delete-selection-rows':
-                item.visibility = !isFullscreen || !selectedColumnsIndex.length;
+                item.visibility = !(isFullscreen && selectedColumnsIndex.length);
                 break;
             case 'delete-selection-columns':
-                item.visibility = !isFullscreen || !selectedRowsIndex.length;
+                item.visibility = !(isFullscreen && selectedRowsIndex.length);
                 break;
             case 'delete-table':
                 item.visibility = !isFullscreen;
@@ -11291,6 +11292,10 @@ class TableStore {
         this.isCellSelecting = false;
         this.isRightClicking = false;
         this.isModSelecting = false;
+        this.isSelectedAllCell = () => {
+            const pos = this.createTablePosition();
+            return pos.getHeight() * pos.getWidth() === this.selectedCells.length;
+        };
     }
     get selectedCells() {
         return this.selectedCells$.getValue();
@@ -12428,39 +12433,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             args: [{ name: 'freezeRow' }]
         }] });
 
-const getOsName = () => {
-    const userAgent = navigator.userAgent.toLowerCase();
-    let name = 'Unknown';
-    if (userAgent.indexOf('win') > -1) {
-        name = 'Windows';
-    }
-    else if (userAgent.indexOf('iphone') > -1) {
-        name = 'Iphone';
-    }
-    else if (userAgent.indexOf('mac') > -1) {
-        name = 'Mac';
-    }
-    else if (userAgent.indexOf('x11') > -1 ||
-        userAgent.indexOf('unix') > -1 ||
-        userAgent.indexOf('sunname') > -1 ||
-        userAgent.indexOf('bsd') > -1) {
-        name = 'Unix';
-    }
-    else if (userAgent.indexOf('linux') > -1) {
-        if (userAgent.indexOf('android') > -1) {
-            name = 'Android';
-        }
-        else {
-            name = 'Linux';
-        }
-    }
-    else {
-        name = 'Unknown';
-    }
-    return name;
-};
-const isMac = () => getOsName() === 'Mac';
-
 const TABLE_SELECTOR = '.the-table';
 const TABLE_WRAPPER_SELECTOR = '.the-table-wrapper';
 const RESIZE_OVERLAY_SELECTOR = '.the-table-resize-overlay-thumb';
@@ -12645,7 +12617,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }] } });
 
 class TheTableComponent extends TheBaseElementComponent {
-    constructor(elementRef, eventDispatcher, resizeNotifier, tableStore, cdr, ngZone, tableService, theTableContextMenuService, freezeColumnPipe, freezeRowPipe, renderer) {
+    constructor(elementRef, eventDispatcher, resizeNotifier, tableStore, cdr, ngZone, tableService, theTableContextMenuService, freezeColumnPipe, freezeRowPipe, renderer, contextService) {
         super(elementRef, cdr);
         this.eventDispatcher = eventDispatcher;
         this.resizeNotifier = resizeNotifier;
@@ -12657,10 +12629,13 @@ class TheTableComponent extends TheBaseElementComponent {
         this.freezeColumnPipe = freezeColumnPipe;
         this.freezeRowPipe = freezeRowPipe;
         this.renderer = renderer;
+        this.contextService = contextService;
         this.headerRow = false;
+        this.isSelectedAllCell = false;
         this.destroy$ = new Subject();
         this.rowControls = [];
         this.colControls = [];
+        this.tableWrapperMarginTop = 0;
     }
     get columns() {
         return this.element && this.element.columns;
@@ -12671,10 +12646,6 @@ class TheTableComponent extends TheBaseElementComponent {
     get tbodyNativeElement() {
         return this.tbodyElement?.nativeElement;
     }
-    get isSelectedAllCell() {
-        return (this.tableStore.selectedRowsIndex.length === this.rowControls.length &&
-            this.tableStore.selectedColumnsIndex.length === this.colControls.length);
-    }
     handleMousedown(event) {
         if (event.target instanceof Element && this.tbodyNativeElement.contains(event.target)) {
             return;
@@ -12711,8 +12682,24 @@ class TheTableComponent extends TheBaseElementComponent {
                 .pipe(takeUntil(this.destroy$))
                 .subscribe(value => {
                 this.tableStore.isFullscreen = value;
+                if (this.tableStore.isFullscreen) {
+                    this.previousScrollContainer = this.editor.options.scrollContainer;
+                    this.editor.options.scrollContainer = '.the-editable-container';
+                }
+                else {
+                    this.editor.options.scrollContainer = this.previousScrollContainer;
+                }
+                this.isStickyTop = false;
+                this.setHeaderRowStyle();
+                this.contextService.rebindContainerScroll();
             });
         }
+        this.tableStore
+            .selectedCellsChange()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.isSelectedAllCell = this.tableStore.isSelectedAllCell();
+        });
     }
     getWrapperWidth() {
         const tableContainer = this.nativeElement.firstChild;
@@ -12769,40 +12756,25 @@ class TheTableComponent extends TheBaseElementComponent {
         });
     }
     subscribeScrollContainerScroll() {
-        if (this.scrollContainerRef) {
-            this.scrollContainerRef.unsubscribe();
-            this.scrollContainerRef = null;
-        }
         this.ngZone.runOutsideAngular(() => {
-            const scrollContainer = this.editor.options?.scrollContainer || DEFAULT_SCROLL_CONTAINER;
-            const scrollContainerElement = this.elementRef.nativeElement.closest(scrollContainer);
-            this.scrollContainerTop = scrollContainerElement.getBoundingClientRect().top;
-            const elementTop = this.elementRef.nativeElement.getBoundingClientRect().top;
-            this.scrollContainerRef = fromEvent(scrollContainerElement, 'scroll')
-                .pipe(takeUntil(this.destroy$), map$1(() => {
-                const distance = elementTop - this.scrollContainerTop;
-                const scrollTop = scrollContainerElement.scrollTop;
-                const buffer = this.isInTable ? 0 : 30;
-                const scrollHeight = scrollTop - (distance + buffer);
-                this.isStickyTop = scrollHeight > 0;
+            this.contextService.containerScrolled$
+                .pipe(takeUntil(this.destroy$), map$1(event => {
+                this.scrollContainerTop = event.target.getBoundingClientRect().top;
+                const clientRect = this.theTableElement.nativeElement.getBoundingClientRect();
+                const headerTopHeight = this.isInTable ? -19 : 11;
                 const headerRowHeight = this.calculateRowControls()[0]?.height;
+                const top = clientRect.top + headerTopHeight - this.tableWrapperMarginTop;
+                this.isStickyTop =
+                    top <= this.scrollContainerTop + 8 && clientRect.bottom - this.scrollContainerTop >= headerRowHeight;
                 // 标题行内容超过固定高度时移除冻结
                 if (this.isStickyTop && this.freezeRowPipe.transform(this.element, this.headerRow)) {
                     const maxHeaderRowHeight = (24 + 8) * 11; // 超出 11 行，取消冻结
                     this.isStickyTop = headerRowHeight <= maxHeaderRowHeight;
                 }
-                // 滚动超出表格总高度后移除冻结
-                if (this.isStickyTop && this.freezeRowPipe.transform(this.element, this.headerRow)) {
-                    const tableHeight = this.calculateRowControls().reduce((previous, current) => {
-                        return previous + current.height;
-                    }, 0);
-                    const buffer = this.isInTable ? 11 : 0;
-                    this.isStickyTop = scrollHeight <= tableHeight - headerRowHeight + buffer;
-                }
                 return this.isStickyTop;
             }), distinctUntilChanged())
                 .subscribe(() => {
-                this.setStickyRowStyle();
+                this.setHeaderRowStyle();
             });
         });
     }
@@ -12890,14 +12862,16 @@ class TheTableComponent extends TheBaseElementComponent {
         if (this.isStickyTop && this.freezeRowPipe.transform(this.element, this.headerRow)) {
             this.renderer.addClass(this.nativeElement, stickyTableClass);
             const numberedColumn = this.element.options?.numberedColumn;
-            this.renderer.setStyle(headerRow, 'top', this.scrollContainerTop + 'px');
+            const top = this.isInTable ? this.scrollContainerTop + 36 : this.scrollContainerTop;
+            this.renderer.setStyle(headerRow, 'top', top + 'px');
             const buffer = this.element.options?.numberedColumn ? 0 : 8; // margin-bottom
             if (this.isInTable || numberedColumn) {
                 [colControl, tableCornerBtn, rowControlButton].map(item => {
                     item && this.renderer.setStyle(item, 'top', this.scrollContainerTop + 'px');
                 });
             }
-            this.renderer.setStyle(this.tableWrapper.nativeElement, 'margin-top', headerRowHeight + buffer + 'px');
+            this.tableWrapperMarginTop = headerRowHeight + buffer;
+            this.renderer.setStyle(this.tableWrapper.nativeElement, 'margin-top', this.tableWrapperMarginTop + 'px');
         }
         else {
             this.renderer.removeClass(this.nativeElement, stickyTableClass);
@@ -12905,6 +12879,7 @@ class TheTableComponent extends TheBaseElementComponent {
                 item && this.renderer.setStyle(item, 'top', null);
             });
             this.renderer.setStyle(this.tableWrapper.nativeElement, 'margin-top', null);
+            this.tableWrapperMarginTop = 0;
         }
     }
     bindTableScrollingShadow() {
@@ -13114,10 +13089,11 @@ class TheTableComponent extends TheBaseElementComponent {
         }
     }
     initializeRows() {
-        this.element.children.map(row => {
+        this.element.children.map((row, index$1) => {
             if (!row.height) {
                 const element = TheEditor.toDOMNode(this.editor, row);
-                setNode(this.editor, { height: getElementHeight(element) }, row);
+                let height = getElementHeight(element);
+                setNode(this.editor, { height }, row);
             }
         });
     }
@@ -13125,7 +13101,7 @@ class TheTableComponent extends TheBaseElementComponent {
         const rowElements = this.nativeElement.querySelector('tbody').children;
         if (rowElements) {
             [...rowElements].map((row, index$1) => {
-                const height = getElementHeight(row);
+                let height = getElementHeight(row);
                 setNode(this.editor, { height }, this.element.children[index$1]);
             });
         }
@@ -13234,21 +13210,18 @@ class TheTableComponent extends TheBaseElementComponent {
     }
     // keydown
     listenKeydownSelectEvents() {
-        const ctrlKey = isMac() ? ['Meta'] : ['Control'];
         this.ngZone.runOutsideAngular(() => {
             fromEvent(document, 'keydown')
                 .pipe(takeUntil(this.destroy$), filter((e) => !!e))
                 .subscribe((event) => {
-                if (ctrlKey.includes(event.key) && !this.readonly) {
+                if (isHotkey('mod', event) && !this.readonly) {
                     this.tableStore.isModSelecting = true;
                 }
             });
             fromEvent(document, 'keyup')
                 .pipe(takeUntil(this.destroy$), filter((e) => !!e))
-                .subscribe((event) => {
-                if (ctrlKey.includes(event.key) && !this.readonly) {
-                    this.tableStore.isModSelecting = false;
-                }
+                .subscribe(() => {
+                this.tableStore.isModSelecting = false;
             });
         });
     }
@@ -13262,13 +13235,9 @@ class TheTableComponent extends TheBaseElementComponent {
         super.ngOnDestroy();
         this.destroy$.next();
         this.destroy$.complete();
-        if (this.scrollContainerRef) {
-            this.scrollContainerRef.unsubscribe();
-            this.scrollContainerRef = null;
-        }
     }
 }
-TheTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", 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 }], target: i0.ɵɵFactoryTarget.Component });
+TheTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", 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 }], target: i0.ɵɵFactoryTarget.Component });
 TheTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TheTableComponent, selector: "the-table, [theTable]", host: { listeners: { "mousedown": "handleMousedown($event)" }, properties: { "class.the-table-with-controls": "isInTable || tableStore.isCellSelecting", "class.the-numberd-table": "element?.options?.numberedColumn", "class.the-table-selection-hide": "tableStore.isCellSelecting || tableStore.isRightClicking" } }, providers: [
         TableStore,
         TableService,
@@ -13301,7 +13270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         '[class.the-numberd-table]': 'element?.options?.numberedColumn',
                         '[class.the-table-selection-hide]': 'tableStore.isCellSelecting || tableStore.isRightClicking'
                     }, template: "<div class=\"the-table-container\" theColumnResize>\n    <div 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.isCellSelecting),\n                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=\"!element.options?.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\">\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                        active: tableStore.selectedRowsIndex.includes(control.rowIndex),\n                        dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n                    }\"\n                >\n                    <ng-container *ngIf=\"!readonly && (isInTable || tableStore.isCellSelecting) && !element?.options?.numberedColumn\">\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 *ngIf=\"columns\">\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\n                        #colControl\n                        class=\"the-table-col-controls\"\n                        [ngClass]=\"{\n                            'the-sticky-cell': i === 0 && element | freezeColumn : tablePluginOptions,\n                            active: tableStore.selectedColumnsIndex.includes(i),\n                            dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n                        }\"\n                        (mousedown)=\"onColMousedown($event, i)\"\n                        *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColControls\"\n                    >\n                        <the-table-insert-mark\n                            *ngIf=\"isInTable || tableStore.isCellSelecting\"\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        </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 }]; }, propDecorators: { tableWrapper: [{
+        }], 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 }]; }, propDecorators: { tableWrapper: [{
                 type: ViewChild,
                 args: ['tableWrapper', { read: ElementRef, static: true }]
             }], theTableElement: [{