@worktile/theia 20.1.0-next.14 → 20.1.0-next.16

package/fesm2022/worktile-theia.mjs

@@ -10,7 +10,7 @@ import { cloneDeep, map, assign, defaults, groupBy, uniq, isEqual } from 'lodash
 export { assign, cloneDeep, debounce, defaults, groupBy, isEqual, map, uniq } from 'lodash';
 import { Editor, Element, Span, Range, Path, Node, Point, Text, Transforms, Operation, createEditor } from 'slate';
 import * as i4 from 'slate-angular';
-import { FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, getClipboardData, AngularEditor, hotkeys, getPlainText as getPlainText$1, createClipboardData, setClipboardData, BaseElementComponent, IS_SAFARI, ELEMENT_TO_COMPONENT, SlateModule, getBlockCardByNativeElement, SLATE_BLOCK_CARD_CLASS_NAME, EDITOR_TO_VIRTUAL_SCROLL_SELECTION, BaseElementFlavour, hasBlockCard, isCardLeft, ELEMENT_KEY_TO_HEIGHTS, DefaultTextFlavour, defaultScrollSelectionIntoView, getDataTransferClipboard, SLATE_DEBUG_KEY, withAngular } from 'slate-angular';
+import { FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, getClipboardData, AngularEditor, hotkeys, getPlainText as getPlainText$1, createClipboardData, setClipboardData, BaseElementComponent, IS_SAFARI, ELEMENT_TO_COMPONENT, SlateModule, getBlockCardByNativeElement, SLATE_BLOCK_CARD_CLASS_NAME, EDITOR_TO_VIRTUAL_SCROLL_SELECTION, BaseElementFlavour, hasBlockCard, isCardLeft, ELEMENT_KEY_TO_HEIGHTS, getRealHeightByElement, isDebug, debugLog, DefaultTextFlavour, defaultScrollSelectionIntoView, getDataTransferClipboard, SLATE_DEBUG_KEY, withAngular } from 'slate-angular';
 import { HistoryEditor, withHistory } from 'slate-history';
 import { NODE_TO_PARENT, NODE_TO_INDEX, NODE_TO_ELEMENT, DOMEditor, EDITOR_TO_ELEMENT } from 'slate-dom';
 import { TheiaConverter } from '@atinc/selene';
@@ -5227,7 +5227,6 @@ const TABLE_BORDER = 1;
 const TABLE_PADDING = 8;
 const TABLE_CONTROL = 11;
 const TABLE_NUMBER_COLUMN = 45;
-const TABLE_HORIZONTAL_SCROLL_HEIGHT = 16; // table component horizontal scrollbar height
 const TableWithStickyRowClass = 'the-table-with-sticky-row';
 var FullscreenState;
 (function (FullscreenState) {
@@ -9938,6 +9937,8 @@ class TheTable extends TheBaseElement {
                 setTimeout(() => {
                     this.afterRowControlsUpdate();
                 }, 0);
+                // 表格数据变化，更新横向滚动条
+                this.updateHorizontalScrollbar();
             }, 0);
             this.isFreezeRow = this.freezeRowPipe.transform(this.element, this.tablePluginOptions);
             this.isFreezeColumn = this.freezeColumnPipe.transform(this.element, this.tablePluginOptions, this.tableWrapperWidth);
@@ -9949,8 +9950,6 @@ class TheTable extends TheBaseElement {
                 this.theTableContextMenuService.closeContextMenu();
                 this.tableStore.isExistSelectedCell && this.tableStore.clearSelectedCells();
             }
-            // 表格数据变化，更新横向滚动条
-            this.updateHorizontalScrollbar();
         }
     }
     // 需要等待内容更新后，才可以执行 useRowControls，否则获取的高度可能不正确
@@ -9986,7 +9985,6 @@ class TheTable extends TheBaseElement {
         this.destroy$ = new Subject();
         this.rowControls = [];
         this.colControls = [];
-        this.isMouseOverTable = false;
         this.getOutletParent = () => {
             return this.tbodyElement.nativeElement;
         };
@@ -10659,6 +10657,8 @@ class TheTable extends TheBaseElement {
         fromEvent(this.tableWrapper.nativeElement, 'scroll')
             .pipe(takeUntil(this.destroy$))
             .subscribe(() => {
+            const scrollbarContainer = this.horizontalScrollbarContainer.nativeElement;
+            scrollbarContainer.scrollLeft = this.tableWrapper.nativeElement.scrollLeft;
             this.setTableScrollingShadow();
             this.updateStickyRowScrollLeft();
             this.setHeaderRowShadow();
@@ -10688,7 +10688,7 @@ class TheTable extends TheBaseElement {
             const buffer = this.isInTable ? -TABLE_CONTROL : 0;
             if (this.isStickyTop && this.isScrolledXOfScrollContainer) {
                 stickyRows.forEach((element) => {
-                    this.renderer.setStyle(element, 'left', `${this.tableWrapperLeft + this.getColControlButtonWidth()}px`);
+                    this.renderer.setStyle(element, 'left', `${this.tableWrapperLeft}px`);
                 });
                 this.renderer.setStyle(cornerControl, 'left', `${this.tableWrapperLeft + buffer}px`);
                 rowControl && this.renderer.setStyle(rowControl, 'left', `${this.tableWrapperLeft + buffer}px`);
@@ -10718,58 +10718,9 @@ class TheTable extends TheBaseElement {
         if (!this.horizontalScrollbarContainer || !this.horizontalScrollbarContent) {
             return;
         }
-        this.bindTableMouseEvents();
         this.bindScrollbarEvents();
         this.updateHorizontalScrollbar();
     }
-    // 绑定鼠标和滚轮事件，用于处理表格横向滚动条显隐
-    bindTableMouseEvents() {
-        if (!this.nativeElement) {
-            return;
-        }
-        // 鼠标移入表格时，更新滚动条是否显示固定
-        fromEvent(this.nativeElement, 'mouseenter')
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-            this.isMouseOverTable = true;
-            this.updateHorizontalScrollbar();
-        });
-        fromEvent(this.nativeElement, 'mouseleave')
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-            this.isMouseOverTable = false;
-            this.updateHorizontalScrollbar();
-        });
-        // 在表格上的滚轮滚动监听，处理滚动过程中超过可视范围滚动条的显隐
-        // 页面的垂直滚动由使用方的页面决定，表格组件无法准确获取，这里通过监听滚轮实现
-        fromEvent(this.nativeElement, 'wheel', { passive: false })
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((event) => {
-            // 只有在鼠标在表格上时才处理
-            if (!this.isMouseOverTable) {
-                return;
-            }
-            const isHorizontalScroll = Math.abs(event.deltaX) > Math.abs(event.deltaY) || event.shiftKey;
-            if (isHorizontalScroll && this.horizontalScrollbarContainer) {
-                event.preventDefault();
-                let deltaX = event.deltaX;
-                // 如果是 Shift + 滚轮，将垂直滚动转换为横向滚动
-                if (event.shiftKey && Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
-                    deltaX = event.deltaY;
-                }
-                const scrollbarContainer = this.horizontalScrollbarContainer.nativeElement;
-                const newScrollLeft = Math.max(0, Math.min(scrollbarContainer.scrollLeft + deltaX, scrollbarContainer.scrollWidth - scrollbarContainer.clientWidth));
-                // 同步滚动到滚动条
-                scrollbarContainer.scrollLeft = newScrollLeft;
-            }
-            else {
-                // 纵向滚动，需要延迟执行是否需要固定滚动条
-                setTimeout(() => {
-                    this.updateScrollbarFixedState();
-                }, 100);
-            }
-        });
-    }
     // 监听横向滚动条滚动事件
     bindScrollbarEvents() {
         if (!this.horizontalScrollbarContainer || !this.horizontalScrollbarContent) {
@@ -10786,38 +10737,27 @@ class TheTable extends TheBaseElement {
         });
     }
     updateHorizontalScrollbar() {
-        this.syncMouseOverState();
-        this.updateScrollbarVisibility();
+        this.setScrollbarWidth();
         this.updateScrollbarFixedState();
     }
-    syncMouseOverState() {
-        this.isMouseOverTable = this.nativeElement.matches(':hover');
-    }
-    // 更新横向滚动条可见性
-    updateScrollbarVisibility() {
-        if (!this.tableWrapper || !this.horizontalScrollbarContainer || !this.horizontalScrollbarContent) {
+    setScrollbarWidth() {
+        if (!this.tableWrapper || !this.horizontalScrollbarContent) {
             return;
         }
         const tableWrapper = this.tableWrapper.nativeElement;
-        const scrollbarContainer = this.horizontalScrollbarContainer.nativeElement;
         const scrollbarContent = this.horizontalScrollbarContent.nativeElement;
         const hasHorizontalScroll = tableWrapper.scrollWidth > tableWrapper.clientWidth;
         if (!hasHorizontalScroll) {
-            this.renderer.removeClass(scrollbarContainer, 'visible');
+            this.renderer.removeStyle(scrollbarContent, 'width');
             return;
         }
         this.renderer.setStyle(scrollbarContent, 'width', `${tableWrapper.scrollWidth}px`);
-        this.renderer.addClass(scrollbarContainer, 'visible');
     }
     // 更新横向滚动条固定状态
     updateScrollbarFixedState() {
         if (this.editor.options.disabledTableStickyScrollbar || !this.horizontalScrollbarContainer) {
             return;
         }
-        if (!this.isMouseOverTable) {
-            this.setScrollbarFixed(false, 0);
-            return;
-        }
         const tableRect = this.nativeElement.getBoundingClientRect();
         const viewportHeight = this.getViewportHeight();
         const scrollbarBottomPosition = tableRect.bottom;
@@ -10857,15 +10797,11 @@ class TheTable extends TheBaseElement {
             this.renderer.addClass(scrollbar, 'fixed');
             this.renderer.setStyle(scrollbar, 'left', `${Math.max(0, tableRect.left)}px`);
             this.renderer.setStyle(scrollbar, 'width', `${tableRect.width}px`);
-            this.renderer.setStyle(scrollbar, 'top', `${viewportHeight - TABLE_HORIZONTAL_SCROLL_HEIGHT}px`);
-            this.renderer.removeStyle(scrollbar, 'bottom');
         }
         else {
             this.renderer.removeClass(scrollbar, 'fixed');
             this.renderer.removeStyle(scrollbar, 'left');
             this.renderer.removeStyle(scrollbar, 'width');
-            this.renderer.removeStyle(scrollbar, 'top');
-            this.renderer.setStyle(scrollbar, 'bottom', `-${TABLE_HORIZONTAL_SCROLL_HEIGHT}px`);
         }
         requestAnimationFrame(() => {
             if (scrollbar.scrollLeft !== currentScrollLeft) {
@@ -14383,13 +14319,26 @@ class TheImage extends TheBaseElement {
         if (!AngularEditor.isEnabledVirtualScroll(this.editor)) {
             return;
         }
-        const heights = ELEMENT_KEY_TO_HEIGHTS.get(this.editor);
-        const key = AngularEditor.findKey(this.editor, this.element);
-        if (heights && heights.get(key.id)) {
+        const realHeight = getRealHeightByElement(this.editor, this.element, 0);
+        if (realHeight > 0) {
             const blockCard = getBlockCardByNativeElement(this.nativeElement);
             if (blockCard) {
                 const style = getComputedStyle(blockCard);
-                blockCard.style.minHeight = heights.get(key.id) - parseFloat(style.marginTop) - parseFloat(style.marginBottom) + 'px';
+                const minHeight = realHeight - parseFloat(style.marginTop) - parseFloat(style.marginBottom);
+                blockCard.style.minHeight = minHeight + 'px';
+                if (isDebug) {
+                    debugLog('warn', 'setImageMinHeight in blockCard, realHeight（cache）: ', realHeight, this.element.key, 'minHeight: ', minHeight);
+                }
+            }
+            else {
+                if (isDebug) {
+                    debugLog('warn', 'image render and can not find blockCard', this.element.key, this.editor.children.indexOf(this.element));
+                }
+            }
+        }
+        else {
+            if (isDebug) {
+                debugLog('warn', 'image render and can not find cache height', this.element.key, this.editor.children.indexOf(this.element));
             }
         }
     }
@@ -14398,8 +14347,12 @@ class TheImage extends TheBaseElement {
             return;
         }
         const blockCard = getBlockCardByNativeElement(this.nativeElement);
-        if (blockCard) {
+        if (blockCard && blockCard.style.minHeight) {
             blockCard.style.minHeight = '';
+            return true;
+        }
+        else {
+            return false;
         }
     }
     setImagePluginOptions() {
@@ -14639,13 +14592,23 @@ class TheImage extends TheBaseElement {
             .withPositions([bottomPosition]);
     }
     imageLoaded(event) {
-        this.clearMinHeight();
         const img = event.target;
         this.naturalWidth = img.naturalWidth;
         this.naturalHeight = img.naturalHeight;
         if (AngularEditor.isEnabledVirtualScroll(this.editor)) {
+            if (isDebug) {
+                const realHeight = this.getRealHeight();
+                debugLog('warn', 'imageLoaded, realHeight: ', realHeight, this.element.key, this.editor.children.indexOf(this.element));
+            }
             this.imageLoadedCacheHeightTimer = setTimeout(() => {
-                this.cacheImageHeight(this.getRealHeight());
+                if (isDebug) {
+                    const realHeight = this.getRealHeight();
+                    debugLog('warn', 'imageLoaded, realHeight setTimeout period: ', realHeight, this.element.key, 'index: ', this.editor.children.indexOf(this.element));
+                }
+                const result = this.clearMinHeight();
+                if (!result) {
+                    this.cacheImageHeight(this.getRealHeight());
+                }
             }, 0);
         }
     }