slate-angular 20.2.0-next.3 → 20.2.0-next.5

package/fesm2022/slate-angular.mjs

@@ -2579,7 +2579,7 @@ class SlateEditable {
                 return;
             }
             if (diff.isMissingTop) {
-                const result = this.remeasureHeightByIndics([...diff.diffTopRenderedIndexes]);
+                const result = this.remeasureHeightByIndics(diff.diffTopRenderedIndexes);
                 if (result) {
                     virtualView = this.refreshVirtualView();
                     diff = this.diffVirtualView(virtualView, 'second');
@@ -2646,7 +2646,8 @@ class SlateEditable {
         this.renderedChildren = [];
         this.virtualVisibleIndexes = new Set();
         this.measuredHeights = new Map();
-        this.measurePending = false;
+        // the height from scroll container top to editor top height element
+        this.businessHeight = 0;
         this.virtualScrollInitialized = false;
     }
     ngOnInit() {
@@ -2959,7 +2960,7 @@ class SlateEditable {
             this.elementRef.nativeElement.appendChild(this.virtualTopHeightElement);
             this.elementRef.nativeElement.appendChild(this.virtualCenterOutlet);
             this.elementRef.nativeElement.appendChild(this.virtualBottomHeightElement);
-            // businessHeight
+            this.businessHeight = this.virtualTopHeightElement.getBoundingClientRect()?.top ?? 0;
         }
     }
     changeVirtualHeight(topHeight, bottomHeight) {
@@ -2980,10 +2981,9 @@ class SlateEditable {
                 heights: []
             };
         }
-        const scrollTop = this.virtualConfig.scrollTop ?? 0;
+        const scrollTop = this.virtualConfig.scrollTop;
         const viewportHeight = this.virtualConfig.viewportHeight ?? 0;
         if (!viewportHeight) {
-            // 已经启用虚拟滚动，但可视区域高度还未获取到，先置空不渲染
             return {
                 renderedChildren: [],
                 visibleIndexes: new Set(),
@@ -2992,36 +2992,41 @@ class SlateEditable {
                 heights: []
             };
         }
-        const bufferCount = this.virtualConfig.bufferCount ?? VIRTUAL_SCROLL_DEFAULT_BUFFER_COUNT;
+        const elementLength = children.length;
+        const adjustedScrollTop = Math.max(0, scrollTop - this.businessHeight);
         const heights = children.map((_, idx) => this.getBlockHeight(idx));
         const accumulatedHeights = this.buildAccumulatedHeight(heights);
-        let visibleStart = 0;
-        // 按真实或估算高度往后累加，找到滚动起点所在块
-        while (visibleStart < heights.length && accumulatedHeights[visibleStart + 1] <= scrollTop) {
-            visibleStart++;
-        }
-        // 向上预留 bufferCount 块
-        const startIndex = Math.max(0, visibleStart - bufferCount);
-        const top = accumulatedHeights[startIndex];
-        const bufferBelowHeight = this.getBufferBelowHeight(viewportHeight, visibleStart, bufferCount);
-        const targetHeight = accumulatedHeights[visibleStart] - top + viewportHeight + bufferBelowHeight;
+        const totalHeight = accumulatedHeights[elementLength];
+        const maxScrollTop = Math.max(0, totalHeight - viewportHeight);
+        const limitedScrollTop = Math.min(adjustedScrollTop, maxScrollTop);
+        const viewBottom = limitedScrollTop + viewportHeight + this.businessHeight;
+        let accumulatedOffset = 0;
+        let visibleStartIndex = -1;
         const visible = [];
         const visibleIndexes = [];
-        let accumulated = 0;
-        let cursor = startIndex;
-        // 循环累计高度超出目标高度（可视高度 + 上下 buffer）
-        while (cursor < children.length && accumulated < targetHeight) {
-            visible.push(children[cursor]);
-            visibleIndexes.push(cursor);
-            accumulated += this.getBlockHeight(cursor);
-            cursor++;
-        }
-        const bottom = heights.slice(cursor).reduce((acc, height) => acc + height, 0);
-        const renderedChildren = visible.length ? visible : children;
-        const visibleIndexesSet = new Set(visibleIndexes);
+        for (let i = 0; i < elementLength && accumulatedOffset < viewBottom; i++) {
+            const currentHeight = heights[i];
+            const nextOffset = accumulatedOffset + currentHeight;
+            // 可视区域有交集，加入渲染
+            if (nextOffset > limitedScrollTop && accumulatedOffset < viewBottom) {
+                if (visibleStartIndex === -1)
+                    visibleStartIndex = i; // 第一个相交起始位置
+                visible.push(children[i]);
+                visibleIndexes.push(i);
+            }
+            accumulatedOffset = nextOffset;
+        }
+        if (visibleStartIndex === -1 && elementLength) {
+            visibleStartIndex = elementLength - 1;
+            visible.push(children[visibleStartIndex]);
+            visibleIndexes.push(visibleStartIndex);
+        }
+        const visibleEndIndex = visibleStartIndex === -1 ? elementLength - 1 : (visibleIndexes[visibleIndexes.length - 1] ?? visibleStartIndex);
+        const top = visibleStartIndex === -1 ? 0 : accumulatedHeights[visibleStartIndex];
+        const bottom = totalHeight - accumulatedHeights[visibleEndIndex + 1];
         return {
-            renderedChildren,
-            visibleIndexes: visibleIndexesSet,
+            renderedChildren: visible.length ? visible : children,
+            visibleIndexes: new Set(visibleIndexes),
             top,
             bottom,
             heights
@@ -3141,20 +3146,6 @@ class SlateEditable {
         }
         return accumulatedHeights;
     }
-    getBufferBelowHeight(viewportHeight, visibleStart, bufferCount) {
-        let blockHeight = 0;
-        let start = visibleStart;
-        // 循环累计高度超出视图高度代表找到向下缓冲区的起始位置
-        while (blockHeight < viewportHeight) {
-            blockHeight += this.getBlockHeight(start);
-            start++;
-        }
-        let bufferHeight = 0;
-        for (let i = start; i < start + bufferCount; i++) {
-            bufferHeight += this.getBlockHeight(i);
-        }
-        return bufferHeight;
-    }
     scheduleMeasureVisibleHeights() {
         if (!this.shouldUseVirtual()) {
             return;