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

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,83 @@ 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 = 1;
+        const childrenWithPreRendering = [...this.inViewportChildren];
+        if (this.inViewportIndics[0] !== 0) {
+            childrenWithPreRendering.unshift(this.editor.children[this.inViewportIndics[0] - 1]);
+        }
+        else {
+            preRenderingCount = 0;
+        }
+        const lastIndex = this.inViewportIndics[this.inViewportIndics.length - 1];
+        if (lastIndex !== this.editor.children.length - 1) {
+            childrenWithPreRendering.push(this.editor.children[lastIndex + 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.isDifferent) {
+                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.needAddOnTop) {
+                    const remeasureAddedIndics = diff.changedIndexesOfTop;
+                    if (isDebug) {
+                        this.debugLog('log', 'needAddOnTop to remeasure heights: ', remeasureAddedIndics);
+                    }
+                    const startIndexBeforeAdd = diff.changedIndexesOfTop[diff.changedIndexesOfTop.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 +3703,7 @@ class SlateEditable {
         if (!children.length || !this.isEnabledVirtualScroll()) {
             return {
                 inViewportChildren: children,
-                visibleIndexes: new Set(),
+                visibleIndexes: [],
                 top: 0,
                 bottom: 0,
                 heights: []
@@ -3675,7 +3718,7 @@ class SlateEditable {
         if (!viewportHeight) {
             return {
                 inViewportChildren: [],
-                visibleIndexes: new Set(),
+                visibleIndexes: [],
                 top: 0,
                 bottom: 0,
                 heights: []
@@ -3727,7 +3770,7 @@ class SlateEditable {
         const bottom = totalHeight - accumulatedHeights[visibleEndIndex + 1];
         return {
             inViewportChildren: visible.length ? visible : children,
-            visibleIndexes: new Set(visibleIndexes),
+            visibleIndexes,
             top,
             bottom,
             heights,
@@ -3742,60 +3785,60 @@ class SlateEditable {
     diffVirtualViewport(virtualView, stage = 'first') {
         if (!this.inViewportChildren.length) {
             return {
-                isDiff: true,
-                diffTopRenderedIndexes: [],
-                diffBottomRenderedIndexes: []
+                isDifferent: true,
+                changedIndexesOfTop: [],
+                changedIndexesOfBottom: []
             };
         }
-        const oldVisibleIndexes = [...this.inViewportIndics];
-        const newVisibleIndexes = [...virtualView.visibleIndexes];
-        const firstNewIndex = newVisibleIndexes[0];
-        const lastNewIndex = newVisibleIndexes[newVisibleIndexes.length - 1];
-        const firstOldIndex = oldVisibleIndexes[0];
-        const lastOldIndex = oldVisibleIndexes[oldVisibleIndexes.length - 1];
+        const oldIndexesInViewport = [...this.inViewportIndics];
+        const newIndexesInViewport = [...virtualView.visibleIndexes];
+        const firstNewIndex = newIndexesInViewport[0];
+        const lastNewIndex = newIndexesInViewport[newIndexesInViewport.length - 1];
+        const firstOldIndex = oldIndexesInViewport[0];
+        const lastOldIndex = oldIndexesInViewport[oldIndexesInViewport.length - 1];
         if (firstNewIndex !== firstOldIndex || lastNewIndex !== lastOldIndex) {
-            const diffTopRenderedIndexes = [];
-            const diffBottomRenderedIndexes = [];
-            const isMissingTop = firstNewIndex !== firstOldIndex && firstNewIndex > firstOldIndex;
-            const isAddedTop = firstNewIndex !== firstOldIndex && firstNewIndex < firstOldIndex;
-            const isMissingBottom = lastNewIndex !== lastOldIndex && lastOldIndex > lastNewIndex;
-            const isAddedBottom = lastNewIndex !== lastOldIndex && lastOldIndex < lastNewIndex;
-            if (isMissingTop || isAddedBottom) {
+            const changedIndexesOfTop = [];
+            const changedIndexesOfBottom = [];
+            const needRemoveOnTop = firstNewIndex !== firstOldIndex && firstNewIndex > firstOldIndex;
+            const needAddOnTop = firstNewIndex !== firstOldIndex && firstNewIndex < firstOldIndex;
+            const needRemoveOnBottom = lastNewIndex !== lastOldIndex && lastOldIndex > lastNewIndex;
+            const needAddOnBottom = lastNewIndex !== lastOldIndex && lastOldIndex < lastNewIndex;
+            if (needRemoveOnTop || needAddOnBottom) {
                 // 向下
-                for (let index = 0; index < oldVisibleIndexes.length; index++) {
-                    const element = oldVisibleIndexes[index];
-                    if (!newVisibleIndexes.includes(element)) {
-                        diffTopRenderedIndexes.push(element);
+                for (let index = 0; index < oldIndexesInViewport.length; index++) {
+                    const element = oldIndexesInViewport[index];
+                    if (!newIndexesInViewport.includes(element)) {
+                        changedIndexesOfTop.push(element);
                     }
                     else {
                         break;
                     }
                 }
-                for (let index = newVisibleIndexes.length - 1; index >= 0; index--) {
-                    const element = newVisibleIndexes[index];
-                    if (!oldVisibleIndexes.includes(element)) {
-                        diffBottomRenderedIndexes.push(element);
+                for (let index = newIndexesInViewport.length - 1; index >= 0; index--) {
+                    const element = newIndexesInViewport[index];
+                    if (!oldIndexesInViewport.includes(element)) {
+                        changedIndexesOfBottom.push(element);
                     }
                     else {
                         break;
                     }
                 }
             }
-            else if (isAddedTop || isMissingBottom) {
+            else if (needAddOnTop || needRemoveOnBottom) {
                 // 向上
-                for (let index = 0; index < newVisibleIndexes.length; index++) {
-                    const element = newVisibleIndexes[index];
-                    if (!oldVisibleIndexes.includes(element)) {
-                        diffTopRenderedIndexes.push(element);
+                for (let index = 0; index < newIndexesInViewport.length; index++) {
+                    const element = newIndexesInViewport[index];
+                    if (!oldIndexesInViewport.includes(element)) {
+                        changedIndexesOfTop.push(element);
                     }
                     else {
                         break;
                     }
                 }
-                for (let index = oldVisibleIndexes.length - 1; index >= 0; index--) {
-                    const element = oldVisibleIndexes[index];
-                    if (!newVisibleIndexes.includes(element)) {
-                        diffBottomRenderedIndexes.push(element);
+                for (let index = oldIndexesInViewport.length - 1; index >= 0; index--) {
+                    const element = oldIndexesInViewport[index];
+                    if (!newIndexesInViewport.includes(element)) {
+                        changedIndexesOfBottom.push(element);
                     }
                     else {
                         break;
@@ -3804,32 +3847,32 @@ class SlateEditable {
             }
             if (isDebug) {
                 this.debugLog('log', `====== diffVirtualViewport stage: ${stage} ======`);
-                this.debugLog('log', 'oldVisibleIndexes:', oldVisibleIndexes);
-                this.debugLog('log', 'newVisibleIndexes:', newVisibleIndexes);
-                this.debugLog('log', 'diffTopRenderedIndexes:', isMissingTop ? '-' : isAddedTop ? '+' : '-', diffTopRenderedIndexes, diffTopRenderedIndexes.map(index => getRealHeightByElement(this.editor, this.editor.children[index], 0)));
-                this.debugLog('log', 'diffBottomRenderedIndexes:', isAddedBottom ? '+' : isMissingBottom ? '-' : '+', diffBottomRenderedIndexes, diffBottomRenderedIndexes.map(index => getRealHeightByElement(this.editor, this.editor.children[index], 0)));
-                const needTop = virtualView.heights.slice(0, newVisibleIndexes[0]).reduce((acc, height) => acc + height, 0);
+                this.debugLog('log', 'oldIndexesInViewport:', oldIndexesInViewport);
+                this.debugLog('log', 'newIndexesInViewport:', newIndexesInViewport);
+                this.debugLog('log', 'changedIndexesOfTop:', needRemoveOnTop ? '-' : needAddOnTop ? '+' : '-', changedIndexesOfTop, changedIndexesOfTop.map(index => getRealHeightByElement(this.editor, this.editor.children[index], 0)));
+                this.debugLog('log', 'changedIndexesOfBottom:', needAddOnBottom ? '+' : needRemoveOnBottom ? '-' : '+', changedIndexesOfBottom, changedIndexesOfBottom.map(index => getRealHeightByElement(this.editor, this.editor.children[index], 0)));
+                const needTop = virtualView.heights.slice(0, newIndexesInViewport[0]).reduce((acc, height) => acc + height, 0);
                 const needBottom = virtualView.heights
-                    .slice(newVisibleIndexes[newVisibleIndexes.length - 1] + 1)
+                    .slice(newIndexesInViewport[newIndexesInViewport.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 ===========');
             }
             return {
-                isDiff: true,
-                isMissingTop,
-                isAddedTop,
-                isMissingBottom,
-                isAddedBottom,
-                diffTopRenderedIndexes,
-                diffBottomRenderedIndexes
+                isDifferent: true,
+                needRemoveOnTop,
+                needAddOnTop,
+                needRemoveOnBottom,
+                needAddOnBottom,
+                changedIndexesOfTop,
+                changedIndexesOfBottom
             };
         }
         return {
-            isDiff: false,
-            diffTopRenderedIndexes: [],
-            diffBottomRenderedIndexes: []
+            isDifferent: false,
+            changedIndexesOfTop: [],
+            changedIndexesOfBottom: []
         };
     }
     tryMeasureInViewportChildrenHeights() {
@@ -3843,7 +3886,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;