fix(slides): fix slide import errs (#7142)

Author: VicKun4937

packages/engine-render/src/__tests__/drawing-group.spec.ts

@@ -135,6 +135,50 @@ describe('drawing group', () => {
         expect(childRenderSpy).toHaveBeenCalled();
     });
 
+    it('maps children of nested drawing groups through the parent rendered bound', () => {
+        const outerGroup = new DrawingGroupObject('outer-group');
+        outerGroup.transformByState({
+            left: 0,
+            top: 0,
+            width: 500,
+            height: 500,
+        });
+        outerGroup.setBaseBound({
+            left: 0,
+            top: 0,
+            width: 10,
+            height: 10,
+        });
+
+        const innerGroup = new DrawingGroupObject('inner-group');
+        innerGroup.transformByState({
+            left: 1,
+            top: 1,
+            width: 2,
+            height: 2,
+        });
+        innerGroup.setBaseBound({
+            left: 100,
+            top: 100,
+            width: 50,
+            height: 50,
+        });
+
+        const child = new Rect('nested-child', {
+            left: 100,
+            top: 100,
+            width: 50,
+            height: 50,
+            fill: '#333333',
+        });
+
+        innerGroup.addObject(child);
+        outerGroup.addObject(innerGroup);
+
+        expect(innerGroup.getRealBound().width).toBe(100);
+        expect(child.getRealBound().width).toBe(100);
+    });
+
     it('covers group object management, transform recalculation and dispose flow', () => {
         const sceneChild = new Rect('scene-child', {
             left: 5,

packages/engine-render/src/base-object.ts

@@ -613,11 +613,14 @@ export abstract class BaseObject extends Disposable {
         }
         if (baseBound) {
             const parentState = this.getParent();
+            const parentRealBound = typeof parentState.getRealBound === 'function'
+                ? parentState.getRealBound()
+                : parentState;
             const parentBound = {
-                top: parentState.top || 0,
-                left: parentState.left,
-                width: parentState.width || 0,
-                height: parentState.height || 0,
+                top: parentRealBound.top || 0,
+                left: parentRealBound.left,
+                width: parentRealBound.width || 0,
+                height: parentRealBound.height || 0,
             };
             const realBound = getRenderTransformBaseOnParentBound(baseBound, parentBound, { width: realWidth, height: realHeight, left: realLeft, top: realTop });
 

packages/engine-render/src/components/docs/layout/block/paragraph/__tests__/layout-ruler.spec.ts

@@ -15,9 +15,11 @@
  */
 
 import type { IParagraphConfig } from '../../../../../../basics/interfaces';
+import type { IDocumentSkeletonGlyph } from '../../../../../../basics/i-document-skeleton-cached';
 import {
     BooleanNumber,
     DataStreamTreeTokenType,
+    DocumentFlavor,
     GridType,
     ObjectRelativeFromV,
     PositionedObjectLayoutType,
@@ -50,6 +52,44 @@ describe('layout-ruler', () => {
         });
     });
 
+    function createGlyph(content: string, width: number): IDocumentSkeletonGlyph {
+        return {
+            content,
+            raw: content,
+            ts: {},
+            fontStyle: {
+                fontString: 'bold 40.5pt "Microsoft YaHei"',
+                fontSize: 40.5,
+                originFontSize: 40.5,
+                fontFamily: 'Microsoft YaHei',
+                fontCache: 'Microsoft YaHei-40.5-bold',
+            },
+            width,
+            bBox: {
+                width,
+                ba: 40,
+                bd: 10,
+                aba: 40,
+                abd: 10,
+                sp: 0,
+                sbr: 0,
+                sbo: 0,
+                spr: 0,
+                spo: 0,
+            },
+            xOffset: 0,
+            left: 0,
+            glyphType: GlyphType.LETTER,
+            streamType: DataStreamTreeTokenType.LETTER,
+            isJustifiable: true,
+            adjustability: {
+                stretchability: [0, 0],
+                shrinkability: [0, 0],
+            },
+            count: content.length,
+        };
+    }
+
     function getLineBoxHeight(metrics: ReturnType<typeof getLineHeightMetrics>) {
         return metrics.paddingTop + metrics.contentHeight + metrics.paddingBottom;
     }
@@ -379,6 +419,38 @@ describe('layout-ruler', () => {
         expect(lastPage.sections.length).toBeGreaterThan(0);
     });
 
+    it('keeps imported shape text on one line when browser glyph bboxes slightly exceed the box', () => {
+        const text = '\u4F01\u4E1A\u6587\u5316\u5EFA\u8BBE';
+        const { ctx, paragraphNode, sectionBreakConfig, curPage } = createParagraphLayoutTestBed(text, {
+            documentStyle: {
+                documentFlavor: DocumentFlavor.TRADITIONAL,
+                pageSize: { width: 365.3740157480315, height: 120 },
+                marginTop: 0,
+                marginBottom: 0,
+                marginLeft: 20,
+                marginRight: 20,
+                paragraphLineGapDefault: 0,
+            },
+        });
+        const glyphs = text.split('').map((char) => createGlyph(char, 54.65998840332031));
+        const paragraphConfig = {
+            paragraphIndex: paragraphNode.endIndex,
+            paragraphStyle: {
+                lineSpacing: 1,
+                snapToGrid: BooleanNumber.FALSE,
+                spaceAbove: { v: 0 },
+                spaceBelow: { v: 0 },
+            },
+            useWordStyleLineHeight: false,
+        } as unknown as IParagraphConfig;
+
+        const result = layoutParagraph(ctx, glyphs, [curPage], sectionBreakConfig, paragraphConfig, true);
+        const lines = result[0].sections[0].columns[0].lines;
+
+        expect(lines).toHaveLength(1);
+        expect(lines[0].divides[0].glyphGroup.map((glyph) => glyph.content).join('')).toBe(text);
+    });
+
     it('uses glyph height as the base for auto line spacing when grid snapping is not explicitly enabled', () => {
         const metrics = getLineHeightMetrics(16, 0, 15.6, GridType.LINES, 1.5, SpacingRule.AUTO, BooleanNumber.FALSE, true);
 

packages/engine-render/src/components/docs/layout/block/paragraph/__tests__/line-adjustment.spec.ts

@@ -152,6 +152,35 @@ describe('line-adjustment', () => {
         expect(() => lineAdjustment(pages, viewModel, paragraphNode, sectionBreakConfig)).not.toThrow();
     });
 
+    it('spreads glyphs across the line for horizontal align DISTRIBUTED', () => {
+        const text = '2038';
+        const { viewModel, ctx, paragraphNode, sectionBreakConfig, curPage } = createParagraphLayoutTestBed(text, {
+            body: {
+                dataStream: `${text}\r\n`,
+                textRuns: [{ st: 0, ed: 6, ts: {} }],
+                paragraphs: [{
+                    startIndex: text.length,
+                    paragraphStyle: {
+                        horizontalAlign: HorizontalAlign.DISTRIBUTED,
+                    },
+                }],
+                sectionBreaks: [{ startIndex: text.length + 1 }],
+            },
+        });
+        const shapedTextList = shaping(ctx, paragraphNode.content!, viewModel, paragraphNode, sectionBreakConfig);
+        const pages = lineBreaking(ctx, viewModel, shapedTextList, curPage, paragraphNode, sectionBreakConfig, null);
+        const divide = pages[0].sections[0].columns[0].lines[0].divides[0];
+        const visibleGlyphs = divide.glyphGroup.filter((glyph) => glyph.content !== '');
+        const lastVisibleGlyph = visibleGlyphs[visibleGlyphs.length - 1];
+        const initialLastGlyphLeft = lastVisibleGlyph.left;
+
+        lineAdjustment(pages, viewModel, paragraphNode, sectionBreakConfig);
+
+        expect(lastVisibleGlyph.left).toBeGreaterThan(initialLastGlyphLeft);
+        expect(lastVisibleGlyph.left + lastVisibleGlyph.width).toBeCloseTo(divide.width, 1);
+        expect(divide.paddingLeft).toBe(0);
+    });
+
     it('handles line with only paragraph break', () => {
         const { viewModel, ctx, paragraphNode, sectionBreakConfig, curPage } = createParagraphLayoutTestBed('');
         const shapedTextList = shaping(ctx, paragraphNode.content!, viewModel, paragraphNode, sectionBreakConfig);

packages/engine-render/src/components/docs/layout/block/paragraph/layout-ruler.ts

@@ -75,6 +75,18 @@ import { createTableSkeletons, rollbackListCache } from '../table';
 
 const LINE_LAYOUT_OVERFLOW_TOLERANCE = 2;
 const FLOAT_OBJECT_RELAYOUT_LIMIT = 5;
+const MIN_LINE_WIDTH_TOLERANCE = 1;
+const MAX_LINE_WIDTH_TOLERANCE = 3;
+const RELATIVE_LINE_WIDTH_TOLERANCE = 0.01;
+
+function isBeyondDivideWidth(width: number, divideWidth: number) {
+    const tolerance = Math.min(
+        MAX_LINE_WIDTH_TOLERANCE,
+        Math.max(MIN_LINE_WIDTH_TOLERANCE, divideWidth * RELATIVE_LINE_WIDTH_TOLERANCE)
+    );
+
+    return width - divideWidth > tolerance;
+}
 
 export function layoutParagraph(
     ctx: ILayoutContext,
@@ -237,7 +249,7 @@ function _divideOperator(
         const lastLeft = lastGlyph?.left || 0;
         const preOffsetLeft = lastWidth + lastLeft;
         const { hyphenationZone } = sectionBreakConfig;
-        if (preOffsetLeft + width > divide.width) {
+        if (isBeyondDivideWidth(preOffsetLeft + width, divide.width)) {
             if (shouldKeepOverflowingTextOnLine(sectionBreakConfig)) {
                 addGlyphToDivide(divide, glyphGroup, preOffsetLeft);
                 updateDivideInfo(divide, { breakType: breakPointType });
@@ -295,7 +307,7 @@ function _divideOperator(
                     sliceGlyphGroup.push(glyphGroup.shift()!);
 
                     const sliceGlyphGroupWidth = __getGlyphGroupWidth(sliceGlyphGroup);
-                    if (sliceGlyphGroupWidth > divide.width) {
+                    if (isBeyondDivideWidth(sliceGlyphGroupWidth, divide.width)) {
                         // To avoid infinity loop when width is less than one char's width.
                         if (sliceGlyphGroup.length > 1) { // || (sliceGlyphGroup.length > 0 && sliceGlyphGroup[sliceGlyphGroup.length - 1].drawingId)) {
                             glyphGroup.unshift(sliceGlyphGroup.pop()!);

packages/engine-render/src/components/docs/layout/block/paragraph/line-adjustment.ts

@@ -127,6 +127,27 @@ function adjustGlyphsInDivide(divide: IDocumentSkeletonDivide, justificationRati
     setGlyphGroupLeft(divide.glyphGroup);
 }
 
+function distributeGlyphsInDivide(divide: IDocumentSkeletonDivide, remaining: number): boolean {
+    if (remaining <= 0) {
+        return false;
+    }
+
+    const visibleGlyphs = divide.glyphGroup.filter((glyph) => glyph.content !== '' && glyph.width > 0);
+
+    if (visibleGlyphs.length < 2) {
+        return false;
+    }
+
+    const extraGap = remaining / (visibleGlyphs.length - 1);
+
+    for (let i = 0; i < visibleGlyphs.length - 1; i++) {
+        visibleGlyphs[i].width += extraGap;
+    }
+
+    setGlyphGroupLeft(divide.glyphGroup);
+    return true;
+}
+
 /**
  * When aligning text horizontally within a document,
  * it may be ineffective if the total line width is not initially calculated.
@@ -226,7 +247,13 @@ function horizontalAlignHandler(
 
         const inkBounds = allowOverflowHorizontalOffset ? getGlyphGroupInkBounds(divide) : null;
 
-        if (horizontalAlign === HorizontalAlign.CENTER && inkBounds) {
+        if (horizontalAlign === HorizontalAlign.DISTRIBUTED) {
+            if (distributeGlyphsInDivide(divide, width - glyphGroupWidth)) {
+                glyphGroupWidth = getGlyphGroupWidth(divide);
+                divide.glyphGroupWidth = glyphGroupWidth;
+            }
+            divide.paddingLeft = 0;
+        } else if (horizontalAlign === HorizontalAlign.CENTER && inkBounds) {
             divide.paddingLeft = width / 2 - (inkBounds.left + inkBounds.right) / 2;
         } else if (horizontalAlign === HorizontalAlign.RIGHT && inkBounds) {
             divide.paddingLeft = width - inkBounds.right;
@@ -343,7 +370,7 @@ export function lineAdjustment(
         restoreLastCJKGlyphWidth(line);
         // Add dash to the end of divide when divide is break by Hyphen.
         addHyphenDash(line, viewModel, paragraphNode, sectionBreakConfig, paragraphStyle);
-        // Handle horizontal align: left\center\right\justified.
+        // Handle horizontal align: left\center\right\justified\distributed.
         horizontalAlignHandler(line, horizontalAlign, shouldAllowOverflowHorizontalOffset(sectionBreakConfig));
     });
 }