fix(docs): stabilize modern worker layout rendering

Author: DR-Univer

packages/engine-render/src/__tests__/worker-layout.spec.ts

@@ -643,6 +643,99 @@ describe('worker document layout session', () => {
         localeService.dispose();
     });
 
+    it('keeps modern explicit-page drawing geometry stable across block publications', () => {
+        vi.stubGlobal('document', undefined);
+        vi.stubGlobal('OffscreenCanvas', class {
+            getContext() {
+                return {
+                    font: '',
+                    textBaseline: 'alphabetic',
+                    measureText(content: string) {
+                        return {
+                            width: content.length * 7,
+                            fontBoundingBoxAscent: 9,
+                            fontBoundingBoxDescent: 3,
+                            actualBoundingBoxAscent: 8,
+                            actualBoundingBoxDescent: 2,
+                        };
+                    },
+                };
+            }
+        });
+
+        const T = DataStreamTreeTokenType;
+        const firstDrawingId = 'modern-first-page-drawing';
+        const secondDrawingId = 'modern-second-page-drawing';
+        const content = [
+            `First ${T.CUSTOM_BLOCK} page${T.PARAGRAPH}${T.PAGE_BREAK}`,
+            `Second ${T.CUSTOM_BLOCK} page${T.PARAGRAPH}${T.PAGE_BREAK}`,
+            ...Array.from({ length: 20 }, (_, index) => `Trailing paragraph ${index}${T.PARAGRAPH}`),
+        ].join('');
+        const sourceModel = createDocumentModelWithStyle(content, {});
+        const snapshot = sourceModel.getSnapshot();
+        if (snapshot.body == null) {
+            throw new Error('Expected the modern drawing test document body.');
+        }
+        const firstDrawingStart = content.indexOf(T.CUSTOM_BLOCK);
+        const secondDrawingStart = content.indexOf(T.CUSTOM_BLOCK, firstDrawingStart + 1);
+        snapshot.body.customBlocks = [
+            { startIndex: firstDrawingStart, blockId: firstDrawingId },
+            { startIndex: secondDrawingStart, blockId: secondDrawingId },
+        ];
+        snapshot.drawings = Object.fromEntries([firstDrawingId, secondDrawingId].map((drawingId) => [drawingId, {
+            drawingId,
+            drawingType: DrawingTypeEnum.DRAWING_BLOCK,
+            unitId: snapshot.id,
+            subUnitId: snapshot.id,
+            layoutType: PositionedObjectLayoutType.WRAP_NONE,
+            docTransform: {
+                angle: 0,
+                positionH: { relativeFrom: ObjectRelativeFromH.PAGE, posOffset: 0 },
+                positionV: { relativeFrom: ObjectRelativeFromV.PARAGRAPH, posOffset: 0 },
+                size: { width: 40, height: 20 },
+            },
+        }]));
+        const dataModel = new DocumentDataModel(snapshot);
+        dataModel.updateDocumentStyle({ documentFlavor: DocumentFlavor.MODERN });
+        const session = new DocumentLayoutSession(dataModel, new LocaleService());
+        const targetModel = new DocumentDataModel(structuredClone(dataModel.getSnapshot()));
+        const targetSkeleton = DocumentSkeleton.create(new DocumentViewModel(targetModel), new LocaleService());
+        const synchronousModel = new DocumentDataModel(structuredClone(dataModel.getSnapshot()));
+        const synchronousSkeleton = DocumentSkeleton.create(new DocumentViewModel(synchronousModel), new LocaleService());
+        synchronousSkeleton.calculate();
+        const generation = session.start({ reason: 'initial' });
+        const secondDrawingTops: number[] = [];
+        let result = session.step(generation, 0);
+        for (let step = 0; step < 100; step++) {
+            if (result.publication?.kind === 'block') {
+                targetSkeleton.applyLayoutPublication(structuredClone(result.publication), result.progress);
+                const drawing = result.publication.block.skeDrawings.find(([drawingId]) => drawingId === secondDrawingId)?.[1];
+                if (drawing != null && !result.progress.complete) {
+                    secondDrawingTops.push(drawing.aTop);
+                }
+            }
+            if (result.progress.complete) {
+                break;
+            }
+            result = session.step(generation, 0);
+        }
+
+        expect(result.progress).toMatchObject({ complete: true, mode: 'continuous', pageCount: 1 });
+        expect(secondDrawingTops.length).toBeGreaterThan(1);
+        expect(new Set(secondDrawingTops).size).toBe(1);
+        expect(normalizeSkeleton(targetSkeleton.getSkeletonData())).toEqual(
+            normalizeSkeleton(synchronousSkeleton.getSkeletonData())
+        );
+
+        synchronousSkeleton.dispose();
+        synchronousModel.dispose();
+        targetSkeleton.dispose();
+        targetModel.dispose();
+        session.dispose();
+        dataModel.dispose();
+        sourceModel.dispose();
+    });
+
     it('preserves tables, column groups, drawings, lists, headers and footers across Worker transport', () => {
         vi.stubGlobal('document', undefined);
         vi.stubGlobal('OffscreenCanvas', class {

packages/engine-render/src/components/docs/__tests__/document.spec.ts

@@ -2043,9 +2043,9 @@ describe('documents render', () => {
         documents.dispose();
     });
 
-    it('draws only viewport-adjacent lines for an infinite-height modern page', () => {
+    it('draws only viewport-adjacent lines when imported modern geometry keeps a finite page height', () => {
         const bodyPage = createPage(DocumentSkeletonPageType.BODY, '');
-        bodyPage.pageHeight = Number.POSITIVE_INFINITY;
+        bodyPage.pageHeight = 120;
         bodyPage.height = 1020;
         bodyPage.skeTables.clear();
 
@@ -2063,7 +2063,12 @@ describe('documents render', () => {
         };
         bodyPage.parent = skeletonData;
 
-        const documents = new Documents('docs-modern-viewport', { getSkeletonData: () => skeletonData } as any, {
+        const documents = new Documents('docs-modern-viewport', {
+            getSkeletonData: () => skeletonData,
+            getViewModel: () => ({
+                getDataModel: () => ({ documentStyle: { documentFlavor: DocumentFlavor.MODERN } }),
+            }),
+        } as any, {
             pageLayoutType: PageLayoutType.VERTICAL,
             pageMarginLeft: 0,
             pageMarginTop: 0,

packages/engine-render/src/components/docs/document.ts

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import type { DocumentFlavor, ICustomRange, IDocumentRenderConfig, IScale, ITableCell, ITableCellBorder, Nullable } from '@univerjs/core';
 import type {
     IDocumentSkeletonColumnGroup,
     IDocumentSkeletonColumnGroupColumn,
@@ -33,7 +32,7 @@ import type { ComponentExtension, IDrawInfo, IExtensionConfig } from '../extensi
 import type { IDocumentsConfig, IPageMarginLayout } from './doc-component';
 import type { DocumentSkeleton } from './layout/doc-skeleton';
 import type { IDocsTableRenderViewport } from './table-render-viewport';
-import { CellValueType, ColumnSeparatorType, DashStyleType, HorizontalAlign, VerticalAlign, WrapStrategy } from '@univerjs/core';
+import { CellValueType, ColumnSeparatorType, DashStyleType, DocumentFlavor, HorizontalAlign, type ICustomRange, type IDocumentRenderConfig, type IScale, type ITableCell, type ITableCellBorder, type Nullable, VerticalAlign, WrapStrategy } from '@univerjs/core';
 import { Subject } from 'rxjs';
 import { BORDER_TYPE as BORDER_LTRB, drawLineByBorderType } from '../../basics';
 import { calculateRectRotate, getRotateOffsetAndFarthestHypotenuse } from '../../basics/draw';
@@ -240,6 +239,7 @@ export class Documents extends DocComponent {
         this._drawLiquid.reset();
 
         const { pages, skeHeaders, skeFooters } = skeletonData;
+        const isContinuousLayout = this.getSkeleton()?.getViewModel?.().getDataModel().documentStyle.documentFlavor === DocumentFlavor.MODERN;
         const parentScale = this.getParentScale();
         // const scale = getScale(parentScale);
         const extensions = this.getExtensionsByOrder();
@@ -304,7 +304,7 @@ export class Documents extends DocComponent {
             const vertexAngle = degToRad(vertexAngleDeg);
             const finalAngle = vertexAngle - centerAngle;
 
-            if (this.isSkipByDiffBounds(page, pageTop, pageLeft, bounds)) {
+            if (!isContinuousLayout && this.isSkipByDiffBounds(page, pageTop, pageLeft, bounds)) {
                 const { x, y } = this._drawLiquid.translatePage(
                     page,
                     this.pageLayoutType,
@@ -456,7 +456,7 @@ export class Documents extends DocComponent {
                         const { divides, asc = 0, type, lineHeight = 0 } = line;
 
                         if (
-                            page.pageHeight === Number.POSITIVE_INFINITY &&
+                            (isContinuousLayout || page.pageHeight === Number.POSITIVE_INFINITY) &&
                             bounds != null
                         ) {
                             const lineTop = pageTop + pagePaddingTop + section.top + line.top +

packages/engine-render/src/components/docs/layout/doc-skeleton.ts

@@ -379,6 +379,21 @@ function clonePageFlowForPublish(source: IDocumentSkeletonPage): IDocumentSkelet
     const page: IDocumentSkeletonPage = {
         ...source,
         sections: [],
+        // Continuous-page merging translates drawing coordinates. Keep partial
+        // publications isolated from the active layout graph so publishing the
+        // same page fragment again cannot accumulate that translation.
+        skeDrawings: new Map([...source.skeDrawings].map(([drawingId, drawing]) => [
+            drawingId,
+            { ...drawing },
+        ])),
+        skeTables: new Map([...source.skeTables].map(([tableId, table]) => [
+            tableId,
+            { ...table },
+        ])),
+        skeColumnGroups: new Map([...source.skeColumnGroups].map(([groupId, group]) => [
+            groupId,
+            { ...group },
+        ])),
         parent: undefined,
     };
 
@@ -634,6 +649,12 @@ function mergeContinuousDuplicatePages(pages: IDocumentSkeletonPage[], mergeAll
             previousPage.skeTables.set(tableId, table);
         });
 
+        page.skeColumnGroups?.forEach((columnGroup, columnGroupId) => {
+            columnGroup.top += topOffset;
+            columnGroup.parent = previousPage;
+            previousPage.skeColumnGroups.set(columnGroupId, columnGroup);
+        });
+
         previousPage.height += page.height;
         previousPage.width = Math.max(previousPage.width, page.width);
         previousPage.ed = Math.max(previousPage.ed, page.ed);
@@ -4175,6 +4196,17 @@ export class DocumentSkeleton extends Skeleton {
     private _finishIncrementalLayout(state: IIncrementalLayoutState): void {
         const { ctx } = state;
         const { skeleton } = ctx;
+        if (state.mode === 'continuous') {
+            const fragmentGeometry = skeleton.pages.map(clonePageFlowForPublish);
+            updateBlockIndex(fragmentGeometry, -1, ctx.docsConfig.documentCompatibilityPolicy);
+            fragmentGeometry.forEach((geometry, index) => {
+                const page = skeleton.pages[index];
+                if (page != null) {
+                    page.height = geometry.height;
+                    page.width = geometry.width;
+                }
+            });
+        }
         removeDupPages(ctx);
         mergeContinuousDuplicatePages(skeleton.pages, state.mode === 'continuous');
         if (state.mode === 'continuous') {