slate-angular 20.2.0-next.23 → 20.2.0-next.24

package/fesm2022/slate-angular.mjs

@@ -2352,8 +2352,9 @@ class ListRender {
         this.viewTypes = [];
         this.differ = null;
         this.initialized = false;
+        this.preRenderingHTMLElement = [];
     }
-    initialize(children, parent, childrenContext) {
+    initialize(children, parent, childrenContext, preRenderingCount = 0) {
         this.initialized = true;
         this.children = children;
         const isRoot = parent === this.viewContext.editor;
@@ -2379,15 +2380,26 @@ class ListRender {
             executeAfterViewInit(this.viewContext.editor);
         }
     }
-    update(children, parent, childrenContext) {
+    update(children, parent, childrenContext, preRenderingCount = 0) {
         if (!this.initialized || this.children.length === 0) {
-            this.initialize(children, parent, childrenContext);
+            this.initialize(children, parent, childrenContext, preRenderingCount);
             return;
         }
         if (!this.differ) {
             throw new Error('Exception: Can not find differ ');
         }
         const outletParent = this.getOutletParent();
+        if (this.preRenderingHTMLElement.length > 0) {
+            const preRenderingElement = [...this.preRenderingHTMLElement];
+            preRenderingElement.forEach((rootNodes, index) => {
+                rootNodes.forEach(rootNode => {
+                    rootNode.style.position = '';
+                    rootNode.style.top = '';
+                    rootNode.style.width = '';
+                });
+            });
+            this.preRenderingHTMLElement = [];
+        }
         const diffResult = this.differ.diff(children);
         const parentPath = AngularEditor.findPath(this.viewContext.editor, parent);
         const isRoot = parent === this.viewContext.editor;
@@ -2485,6 +2497,15 @@ class ListRender {
             });
             this.contexts = newContexts;
         }
+        if (preRenderingCount > 0) {
+            for (let i = 0; i < preRenderingCount; i++) {
+                const rootNodes = [...getRootNodes(this.views[i], this.blockCards[i])];
+                rootNodes.forEach(rootNode => {
+                    rootNode.style = `position: absolute;top: -100%;`;
+                });
+                this.preRenderingHTMLElement.push(rootNodes);
+            }
+        }
     }
     destroy() {
         this.children.forEach((element, index) => {
@@ -3200,7 +3221,7 @@ class SlateEditable {
             viewportBoundingTop: 0
         };
         this.inViewportChildren = [];
-        this.inViewportIndics = new Set();
+        this.inViewportIndics = [];
         this.keyHeightMap = new Map();
         this.virtualScrollInitialized = false;
     }
@@ -3267,7 +3288,8 @@ class SlateEditable {
                     this.listRender.initialize(childrenForRender, this.editor, this.context);
                 }
                 else {
-                    this.listRender.update(childrenForRender, this.editor, this.context);
+                    const { preRenderingCount, childrenWithPreRendering } = this.handlePreRendering();
+                    this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount);
                 }
                 this.tryMeasureInViewportChildrenHeights();
             }
@@ -3311,7 +3333,7 @@ class SlateEditable {
     }
     calculateVirtualScrollSelection(selection) {
         if (selection) {
-            const indics = Array.from(this.inViewportIndics.values());
+            const indics = this.inViewportIndics;
             if (indics.length > 0) {
                 const currentVisibleRange = {
                     anchor: Editor.start(this.editor, [indics[0]]),
@@ -3482,13 +3504,13 @@ class SlateEditable {
         const virtualView = this.calculateVirtualViewport();
         const oldInViewportChildren = this.inViewportChildren;
         this.applyVirtualView(virtualView);
-        this.listRender.update(this.inViewportChildren, this.editor, this.context);
+        const { preRenderingCount, childrenWithPreRendering } = this.handlePreRendering();
+        this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount);
         // 新增或者修改的才需要重算，计算出这个结果
         const remeasureIndics = [];
-        const newInViewportIndics = Array.from(this.inViewportIndics);
         this.inViewportChildren.forEach((child, index) => {
             if (oldInViewportChildren.indexOf(child) === -1) {
-                remeasureIndics.push(newInViewportIndics[index]);
+                remeasureIndics.push(this.inViewportIndics[index]);
             }
         });
         if (isDebug && remeasureIndics.length > 0) {
@@ -3581,7 +3603,7 @@ class SlateEditable {
                 if (entries.length > 0 && entries[0].contentRect.width !== editorResizeObserverRectWidth) {
                     editorResizeObserverRectWidth = entries[0].contentRect.width;
                     this.keyHeightMap.clear();
-                    const remeasureIndics = Array.from(this.inViewportIndics);
+                    const remeasureIndics = this.inViewportIndics;
                     this.remeasureHeightByIndics(remeasureIndics);
                 }
             });
@@ -3597,62 +3619,77 @@ class SlateEditable {
             return;
         }
         this.virtualTopHeightElement.style.height = `${topHeight}px`;
-        this.virtualBottomHeightElement.style.height = `${bottomHeight}px`;
+        if (bottomHeight !== undefined) {
+            this.virtualBottomHeightElement.style.height = `${bottomHeight}px`;
+        }
+    }
+    getVirtualTopHeight() {
+        if (!this.virtualScrollInitialized) {
+            return 0;
+        }
+        return parseFloat(this.virtualTopHeightElement.style.height.replace('px', ''));
     }
     debugLog(type, ...args) {
         const doc = this.elementRef?.nativeElement?.ownerDocument ?? document;
         VirtualScrollDebugOverlay.log(doc, type, ...args);
     }
+    handlePreRendering() {
+        let preRenderingCount = 0;
+        const childrenWithPreRendering = [...this.inViewportChildren];
+        if (this.inViewportIndics[0] !== 0) {
+            preRenderingCount = 1;
+            childrenWithPreRendering.unshift(this.editor.children[this.inViewportIndics[0] - 1]);
+        }
+        return { preRenderingCount, childrenWithPreRendering };
+    }
     tryUpdateVirtualViewport() {
+        if (isDebug) {
+            this.debugLog('log', 'tryUpdateVirtualViewport');
+        }
         this.tryUpdateVirtualViewportAnimId && cancelAnimationFrame(this.tryUpdateVirtualViewportAnimId);
         this.tryUpdateVirtualViewportAnimId = requestAnimationFrame(() => {
+            if (isDebug) {
+                this.debugLog('log', 'tryUpdateVirtualViewport Anim start');
+            }
             let virtualView = this.calculateVirtualViewport();
             let diff = this.diffVirtualViewport(virtualView);
-            if (!diff.isDiff) {
-                return;
-            }
-            // diff.isAddedTop
-            if (diff.isMissingTop) {
-                const remeasureIndics = diff.diffTopRenderedIndexes;
-                const result = this.remeasureHeightByIndics(remeasureIndics);
-                if (result) {
-                    virtualView = this.calculateVirtualViewport();
-                    diff = this.diffVirtualViewport(virtualView, 'second');
-                    if (!diff.isDiff) {
-                        return;
+            if (diff.isDiff) {
+                this.applyVirtualView(virtualView);
+                if (this.listRender.initialized) {
+                    const { preRenderingCount, childrenWithPreRendering } = this.handlePreRendering();
+                    this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount);
+                    if (!AngularEditor.isReadOnly(this.editor) && this.editor.selection) {
+                        this.toNativeSelection();
                     }
                 }
-            }
-            this.applyVirtualView(virtualView);
-            if (this.listRender.initialized) {
-                this.listRender.update(virtualView.inViewportChildren, this.editor, this.context);
-                if (!AngularEditor.isReadOnly(this.editor) && this.editor.selection) {
-                    this.toNativeSelection();
+                if (diff.isAddedTop) {
+                    const remeasureAddedIndics = diff.diffTopRenderedIndexes;
+                    if (isDebug) {
+                        this.debugLog('log', 'isAddedTop to remeasure heights: ', remeasureAddedIndics);
+                    }
+                    const startIndexBeforeAdd = diff.diffTopRenderedIndexes[diff.diffTopRenderedIndexes.length - 1] + 1;
+                    const topHeightBeforeAdd = virtualView.accumulatedHeights[startIndexBeforeAdd];
+                    const result = this.remeasureHeightByIndics(remeasureAddedIndics);
+                    if (result) {
+                        const newHeights = buildHeightsAndAccumulatedHeights(this.editor);
+                        const actualTopHeightAfterAdd = newHeights.accumulatedHeights[startIndexBeforeAdd];
+                        const newTopHeight = virtualView.top - (actualTopHeightAfterAdd - topHeightBeforeAdd);
+                        this.setVirtualSpaceHeight(newTopHeight);
+                        this.debugLog('log', `update top height cause added element in top, 减去: ${actualTopHeightAfterAdd - topHeightBeforeAdd}`);
+                    }
                 }
+                this.tryMeasureInViewportChildrenHeights();
             }
-            if (diff.isAddedTop) {
-                const remeasureAddedIndics = diff.diffTopRenderedIndexes;
-                if (isDebug) {
-                    this.debugLog('log', 'isAddedTop to remeasure heights: ', remeasureAddedIndics);
-                }
-                const startIndexBeforeAdd = diff.diffTopRenderedIndexes[diff.diffTopRenderedIndexes.length - 1] + 1;
-                const topHeightBeforeAdd = virtualView.accumulatedHeights[startIndexBeforeAdd];
-                const result = this.remeasureHeightByIndics(remeasureAddedIndics);
-                if (result) {
-                    const newHeights = buildHeightsAndAccumulatedHeights(this.editor);
-                    const visibleStartIndex = diff.diffTopRenderedIndexes[0];
-                    const actualTopHeightAfterAdd = newHeights.accumulatedHeights[startIndexBeforeAdd];
-                    const adjustedTopHeight = (visibleStartIndex === -1 ? 0 : newHeights.accumulatedHeights[visibleStartIndex]) -
-                        (actualTopHeightAfterAdd - topHeightBeforeAdd);
-                    if (adjustedTopHeight !== virtualView.top) {
-                        if (isDebug) {
-                            this.debugLog('log', `update top height cause added element in top: ${adjustedTopHeight}, old height: ${virtualView.top}`);
-                        }
-                        this.virtualTopHeightElement.style.height = `${adjustedTopHeight}px`;
-                    }
+            else {
+                const topHeight = this.getVirtualTopHeight();
+                if (virtualView.top !== topHeight) {
+                    this.debugLog('log', 'update top height: ', virtualView.top - topHeight, 'start index', this.inViewportIndics[0]);
+                    this.setVirtualSpaceHeight(virtualView.top);
                 }
             }
-            this.tryMeasureInViewportChildrenHeights();
+            if (isDebug) {
+                this.debugLog('log', 'tryUpdateVirtualViewport Anim end');
+            }
         });
     }
     calculateVirtualViewport() {
@@ -3660,7 +3697,7 @@ class SlateEditable {
         if (!children.length || !this.isEnabledVirtualScroll()) {
             return {
                 inViewportChildren: children,
-                visibleIndexes: new Set(),
+                visibleIndexes: [],
                 top: 0,
                 bottom: 0,
                 heights: []
@@ -3675,7 +3712,7 @@ class SlateEditable {
         if (!viewportHeight) {
             return {
                 inViewportChildren: [],
-                visibleIndexes: new Set(),
+                visibleIndexes: [],
                 top: 0,
                 bottom: 0,
                 heights: []
@@ -3727,7 +3764,7 @@ class SlateEditable {
         const bottom = totalHeight - accumulatedHeights[visibleEndIndex + 1];
         return {
             inViewportChildren: visible.length ? visible : children,
-            visibleIndexes: new Set(visibleIndexes),
+            visibleIndexes,
             top,
             bottom,
             heights,
@@ -3812,7 +3849,7 @@ class SlateEditable {
                 const needBottom = virtualView.heights
                     .slice(newVisibleIndexes[newVisibleIndexes.length - 1] + 1)
                     .reduce((acc, height) => acc + height, 0);
-                this.debugLog('log', 'newTopHeight:', needTop, 'prevTopHeight:', parseFloat(this.virtualTopHeightElement.style.height));
+                this.debugLog('log', needTop - parseFloat(this.virtualTopHeightElement.style.height), 'newTopHeight:', needTop, 'prevTopHeight:', parseFloat(this.virtualTopHeightElement.style.height));
                 this.debugLog('log', 'newBottomHeight:', needBottom, 'prevBottomHeight:', parseFloat(this.virtualBottomHeightElement.style.height));
                 this.debugLog('warn', '=========== Dividing line ===========');
             }
@@ -3843,7 +3880,8 @@ class SlateEditable {
     }
     measureVisibleHeights() {
         const children = (this.editor.children || []);
-        this.inViewportIndics.forEach(index => {
+        const inViewportIndics = [...this.inViewportIndics];
+        inViewportIndics.forEach(index => {
             const node = children[index];
             if (!node) {
                 return;