slate-angular 20.2.0-next.2 → 20.2.0-next.4

package/fesm2022/slate-angular.mjs

@@ -1739,6 +1739,7 @@ class BaseElementFlavour extends BaseFlavour {
         this.getOutletElement = () => {
             return this.nativeElement.querySelector('.children-outlet');
         };
+        this.stableHeight = null;
     }
     get element() {
         return this._context && this._context.element;
@@ -1824,11 +1825,21 @@ class BaseElementFlavour extends BaseFlavour {
             readonly: this._context.readonly
         };
     }
+    isStableHeight() {
+        return false;
+    }
     getRealHeight() {
+        if (this.isStableHeight() && this.stableHeight !== null) {
+            return this.stableHeight;
+        }
         const blockCard = getBlockCardByNativeElement(this.nativeElement);
         const target = blockCard || this.nativeElement;
         const computedStyle = getComputedStyle(target);
-        return Promise.resolve(target.offsetHeight + parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom));
+        const height = target.offsetHeight + parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom);
+        if (this.isStableHeight()) {
+            this.stableHeight = height;
+        }
+        return height;
     }
 }
 
@@ -2562,29 +2573,26 @@ class SlateEditable {
         this.virtualConfig = config;
         this.refreshVirtualViewAnimId && cancelAnimationFrame(this.refreshVirtualViewAnimId);
         this.refreshVirtualViewAnimId = requestAnimationFrame(() => {
-            const virtualView = this.refreshVirtualView();
-            const diff = this.diffVirtualView(virtualView);
-            if (diff.isDiff) {
-                if (diff.isMissingTop || diff.isMissingBottom) {
-                    this.measureHeightByIndexes([...diff.diffTopRenderedIndexes, ...diff.diffBottomRenderedIndexes], true).then(result => {
-                        if (isDebug) {
-                            console.log('async measureHeightByIndexes:', result);
-                        }
-                        this.applyVirtualView(result || virtualView);
-                        if (this.listRender.initialized) {
-                            this.listRender.update(this.renderedChildren, this.editor, this.context);
-                        }
-                        this.scheduleMeasureVisibleHeights();
-                    });
-                }
-                else {
-                    this.applyVirtualView(virtualView);
-                    if (this.listRender.initialized) {
-                        this.listRender.update(virtualView.renderedChildren, this.editor, this.context);
+            let virtualView = this.refreshVirtualView();
+            let diff = this.diffVirtualView(virtualView);
+            if (!diff.isDiff) {
+                return;
+            }
+            if (diff.isMissingTop) {
+                const result = this.remeasureHeightByIndics([...diff.diffTopRenderedIndexes]);
+                if (result) {
+                    virtualView = this.refreshVirtualView();
+                    diff = this.diffVirtualView(virtualView, 'second');
+                    if (!diff.isDiff) {
+                        return;
                     }
-                    this.scheduleMeasureVisibleHeights();
                 }
             }
+            this.applyVirtualView(virtualView);
+            if (this.listRender.initialized) {
+                this.listRender.update(virtualView.renderedChildren, this.editor, this.context);
+            }
+            this.scheduleMeasureVisibleHeights();
         });
     }
     get hasBeforeInputSupport() {
@@ -2639,6 +2647,8 @@ class SlateEditable {
         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() {
@@ -2951,6 +2961,7 @@ class SlateEditable {
             this.elementRef.nativeElement.appendChild(this.virtualTopHeightElement);
             this.elementRef.nativeElement.appendChild(this.virtualCenterOutlet);
             this.elementRef.nativeElement.appendChild(this.virtualBottomHeightElement);
+            this.businessHeight = this.virtualTopHeightElement.getBoundingClientRect()?.top ?? 0;
         }
     }
     changeVirtualHeight(topHeight, bottomHeight) {
@@ -2971,10 +2982,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(),
@@ -2983,36 +2993,33 @@ class SlateEditable {
                 heights: []
             };
         }
-        const bufferCount = this.virtualConfig.bufferCount ?? VIRTUAL_SCROLL_DEFAULT_BUFFER_COUNT;
-        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 elementLength = children.length;
+        const adjustedScrollTop = Math.max(0, scrollTop - this.businessHeight);
+        const viewBottom = scrollTop + viewportHeight;
+        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 = this.getBlockHeight(i);
+            const nextOffset = accumulatedOffset + currentHeight;
+            // 可视区域有交集，加入渲染
+            if (nextOffset > adjustedScrollTop && accumulatedOffset < viewBottom) {
+                if (visibleStartIndex === -1)
+                    visibleStartIndex = i; // 第一个相交起始位置
+                visible.push(children[i]);
+                visibleIndexes.push(i);
+            }
+            accumulatedOffset = nextOffset;
+        }
+        const visibleEndIndex = visibleStartIndex === -1 ? elementLength - 1 : visibleIndexes.length - 1;
+        const heights = children.map((_, idx) => this.getBlockHeight(idx));
+        const accumulatedHeights = this.buildAccumulatedHeight(heights);
+        const top = visibleStartIndex === -1 ? 0 : accumulatedHeights[visibleStartIndex];
+        const bottom = accumulatedHeights[elementLength] - accumulatedHeights[visibleEndIndex];
         return {
-            renderedChildren,
-            visibleIndexes: visibleIndexesSet,
+            renderedChildren: visible.length ? visible : children,
+            visibleIndexes: new Set(visibleIndexes),
             top,
             bottom,
             heights
@@ -3023,7 +3030,7 @@ class SlateEditable {
         this.changeVirtualHeight(virtualView.top, virtualView.bottom);
         this.virtualVisibleIndexes = virtualView.visibleIndexes;
     }
-    diffVirtualView(virtualView) {
+    diffVirtualView(virtualView, stage = 'first') {
         if (!this.renderedChildren.length) {
             return {
                 isDiff: true,
@@ -3087,6 +3094,7 @@ class SlateEditable {
                 }
             }
             if (isDebug) {
+                console.log(`====== diffVirtualView stage: ${stage} ======`);
                 console.log('oldVisibleIndexes:', oldVisibleIndexes);
                 console.log('newVisibleIndexes:', newVisibleIndexes);
                 console.log('diffTopRenderedIndexes:', isMissingTop ? '-' : isAddedTop ? '+' : '-', diffTopRenderedIndexes, diffTopRenderedIndexes.map(index => this.getBlockHeight(index, 0)));
@@ -3149,14 +3157,9 @@ class SlateEditable {
         if (!this.shouldUseVirtual()) {
             return;
         }
-        if (this.measurePending) {
-            return;
-        }
-        this.measurePending = true;
         this.measureVisibleHeightsAnimId && cancelAnimationFrame(this.measureVisibleHeightsAnimId);
         this.measureVisibleHeightsAnimId = requestAnimationFrame(() => {
             this.measureVisibleHeights();
-            this.measurePending = false;
         });
     }
     measureVisibleHeights() {
@@ -3175,16 +3178,21 @@ class SlateEditable {
             if (!view) {
                 return;
             }
-            view.getRealHeight()?.then(height => {
-                this.measuredHeights.set(key.id, height);
-            });
+            const ret = view.getRealHeight();
+            if (ret instanceof Promise) {
+                ret.then(height => {
+                    this.measuredHeights.set(key.id, height);
+                });
+            }
+            else {
+                this.measuredHeights.set(key.id, ret);
+            }
         });
     }
-    async measureHeightByIndexes(indexes, isRefresh = false) {
+    remeasureHeightByIndics(indics) {
         const children = (this.editor.children || []);
         let isHeightChanged = false;
-        const promises = [];
-        indexes.forEach(index => {
+        indics.forEach(index => {
             const node = children[index];
             if (!node) {
                 return;
@@ -3194,27 +3202,30 @@ class SlateEditable {
             if (!view) {
                 return;
             }
-            const promise = view.getRealHeight()?.then(height => {
-                const prevHeight = this.measuredHeights.get(key.id);
-                if (isDebug) {
-                    console.log('measureHeightByIndexes: get index:', index, 'prevHeight:', prevHeight, 'newHeight:', height);
-                }
-                if (prevHeight && height !== prevHeight) {
-                    this.measuredHeights.set(key.id, height);
+            const prevHeight = this.measuredHeights.get(key.id);
+            const ret = view.getRealHeight();
+            if (ret instanceof Promise) {
+                ret.then(height => {
+                    if (height !== prevHeight) {
+                        this.measuredHeights.set(key.id, height);
+                        isHeightChanged = true;
+                        if (isDebug) {
+                            console.log(`remeasureHeightByIndics, index: ${index} prevHeight: ${prevHeight} newHeight: ${height}`);
+                        }
+                    }
+                });
+            }
+            else {
+                if (ret !== prevHeight) {
+                    this.measuredHeights.set(key.id, ret);
                     isHeightChanged = true;
+                    if (isDebug) {
+                        console.log(`remeasureHeightByIndics, index: ${index} prevHeight: ${prevHeight} newHeight: ${ret}`);
+                    }
                 }
-            });
-            if (promise) {
-                promises.push(promise);
             }
         });
-        if (promises.length > 0) {
-            await Promise.all(promises);
-            if (isHeightChanged && isRefresh) {
-                return this.refreshVirtualView();
-            }
-        }
-        return null;
+        return isHeightChanged;
     }
     //#region event proxy
     addEventListener(eventName, listener, target = this.elementRef.nativeElement) {
@@ -4166,6 +4177,7 @@ class BaseElementComponent extends BaseComponent {
             }
             return null;
         };
+        this.stableHeight = null;
     }
     get element() {
         return this._context && this._context.element;
@@ -4247,11 +4259,21 @@ class BaseElementComponent extends BaseComponent {
             readonly: this._context.readonly
         };
     }
+    isStableHeight() {
+        return false;
+    }
     getRealHeight() {
+        if (this.isStableHeight() && this.stableHeight !== null) {
+            return this.stableHeight;
+        }
         const blockCard = getBlockCardByNativeElement(this.nativeElement);
         const target = blockCard || this.nativeElement;
         const computedStyle = getComputedStyle(target);
-        return Promise.resolve(target.offsetHeight + parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom));
+        const height = target.offsetHeight + parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom);
+        if (this.isStableHeight()) {
+            this.stableHeight = height;
+        }
+        return height;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: BaseElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: BaseElementComponent, isStandalone: true, viewQueries: [{ propertyName: "childrenOutletInstance", first: true, predicate: SlateChildrenOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }