feat(render-engine): page and paragraph layout

examples/src/docs/main.ts

@@ -25,7 +25,7 @@ import { UniverDocsThreadCommentUIPlugin } from '@univerjs/docs-thread-comment-u
 import { UniverDocsUIPlugin } from '@univerjs/docs-ui';
 import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula';
 import { UniverRenderEnginePlugin } from '@univerjs/engine-render';
-import { DEFAULT_DOCUMENT_DATA_SIMPLE } from '@univerjs/mockdata';
+import { DEFAULT_DOCUMENT_DATA_CN } from '@univerjs/mockdata';
 import { UniverUIPlugin } from '@univerjs/ui';
 import { enUS, faIR, ruRU, zhCN } from '../locales';
 
@@ -71,7 +71,7 @@ univer.registerPlugin(UniverDocsHyperLinkUIPlugin);
 univer.registerPlugin(UniverDocsMentionUIPlugin);
 
 if (!IS_E2E) {
-    univer.createUnit(UniverInstanceType.UNIVER_DOC, DEFAULT_DOCUMENT_DATA_SIMPLE);
+    univer.createUnit(UniverInstanceType.UNIVER_DOC, DEFAULT_DOCUMENT_DATA_CN);
 }
 
 // use for console test

packages/core/src/docs/data-model/types.ts

@@ -15,7 +15,7 @@
  */
 
 export enum DataStreamTreeNodeType {
-    // COLUMN_BREAK, // \v 换列
+    // COLUMN_BREAK, // \v 换栏
     // PAGE_BREAK, // \f 换页
     // DOCS_END, // \0  文档结尾
     // TAB, // \t  制表符
@@ -47,7 +47,7 @@ export enum DataStreamTreeTokenType {
      */
     CUSTOM_RANGE_END = '\x1E', // 自定义范围结束
 
-    COLUMN_BREAK = '\v', // 换列
+    COLUMN_BREAK = '\v', // 换栏
     PAGE_BREAK = '\f', // 换页
     DOCS_END = '\0', // 文档结尾
     TAB = '\t', // 制表符

packages/core/src/types/interfaces/i-document-data.ts

@@ -429,7 +429,7 @@ export enum DocumentFlavor {
 export interface IDocStyleBase extends IMargin {
     pageNumberStart?: number; // pageNumberStart
     pageSize?: ISize; // pageSize
-
+    // PORTRAIT and LANDSCAPE
     pageOrient?: PageOrientType;
 
     documentFlavor?: DocumentFlavor; // DocumentFlavor: TRADITIONAL, MODERN
@@ -445,8 +445,10 @@ export interface IDocumentLayout {
     defaultTabStop?: number; // 17.15.1.25 defaultTabStop (Distance Between Automatic Tab Stops)   0.5 in  = 36pt，this value should be converted to the default font size when exporting
     characterSpacingControl?: characterSpacingControlType; // characterSpacingControl 17.18.7 ST_CharacterSpacing (Character-Level Whitespace Compression Settings)，default compressPunctuation
     paragraphLineGapDefault?: number; // paragraphLineGapDefault default line spacing
-    spaceWidthEastAsian?: BooleanNumber; // add space between east asian and English
 
+    autoSpaceDE?: BooleanNumber; // 17.3.1.2 autoSpaceDE (Automatically Adjust Spacing of Latin and East Asian Text)
+    autoSpaceDN?: BooleanNumber; // 17.3.1.3 autoSpaceDN (Automatically Adjust Spacing of East Asian Text and Numbers)
+    // Hyphenation.
     autoHyphenation?: BooleanNumber; // 17.15.1.10 autoHyphenation (Automatically Hyphenate Document Contents When Displayed)
     consecutiveHyphenLimit?: number; // 17.15.1.22 consecutiveHyphenLimit (Maximum Number of Consecutively Hyphenated Lines)
     doNotHyphenateCaps?: BooleanNumber; // 17.15.1.37 doNotHyphenateCaps (Do Not Hyphenate Words in ALL CAPITAL LETTERS)
@@ -500,6 +502,27 @@ export interface ISectionBreakBase {
 
     columnProperties?: ISectionColumnProperties[]; // columnProperties 17.6.4 cols (Column Definitions)
     columnSeparatorType?: ColumnSeparatorType; // ColumnSeparatorType
+    // If this attribute is present and its value is set to true or 1, then all columns for this text
+    // section are of an equal width and are calculated as follows:
+    // - Take width of page (from margin to margin)
+    // - Divide by number of columns specified in num attribute
+    // - For each column, leave space after as defined in the space attribute
+    // - Remaining width of each column is the text column width.
+    // If this attribute is present and its value is set to false or 0, then all columns for this text
+    // section are of different widths and are defined by each col element as follows:
+    // - Each col element defines a single column
+    // - Each w attribute defines the text column width
+    // - Each space attribute defines the space after the text column
+    equalWidth?: BooleanNumber; // Specifies whether all text columns in the current section are of equal width. 17.6.4 cols (Column Definitions)
+    // If all columns are not of equal width (the equalWidth attribute is not set), then this
+    // element is ignored, and the number of columns is defined by the number of col elements
+    // defined under the cols element.
+    numOfEqualWidthColumns?: number; // Specifies the number of text columns in the current section.
+    // Specifies the spacing between text columns in the current section.
+    // If all columns are not of equal width (the equalWidth attribute is not set), then this
+    // element is ignored, and the spacing after columns is defined by the space attribute on
+    // each of the col elements defined under the cols element.
+    spaceBetweenEqualWidthColumns?: INumberUnit;
     contentDirection?: TextDirection; // contentDirection
     sectionType?: SectionType; // sectionType 17.6.22 type (Section Type)
     // deprecated: The attribute does not exist in Word and should be deprecated.
@@ -745,6 +768,8 @@ export interface IParagraphProperties extends IIndentStart {
     widowControl?: BooleanNumber; // 17.3.1.44 widowControl (Allow First/Last Line to Display on a Separate Page)
     shading?: IShading; // shading
     suppressHyphenation?: BooleanNumber; // 17.3.1.34 suppressAutoHyphens (Suppress Hyphenation for Paragraph)
+    autoSpaceDE?: BooleanNumber; // 17.3.1.2 autoSpaceDE (Automatically Adjust Spacing of Latin and East Asian Text)
+    autoSpaceDN?: BooleanNumber; // 17.3.1.3 autoSpaceDN (Automatically Adjust Spacing of East Asian Text and Numbers)
 }
 
 /**
@@ -1019,23 +1044,49 @@ export interface IObjectPositionV {
 
 // 20.4.3.4 ST_RelFromH (Horizontal Relative Positioning)
 export enum ObjectRelativeFromH {
+    // Specifies that the horizontal positioning shall be
+    // relative to the edge of the page.
     PAGE,
+    // Specifies that the horizontal positioning shall be
+    // relative to the extents of the column which contains its anchor.
     COLUMN,
+    // Specifies that the horizontal positioning shall be
+    // relative to the position of the anchor within its run content.
     CHARACTER,
-    MARGIN,
+    // Specifies that the horizontal positioning shall be
+    // relative to the inside margin of the current page (the
+    // left margin on odd pages, right on even pages)
     INSIDE_MARGIN,
+    // Specifies that the horizontal positioning shall be
+    // relative to the page margins.
+    MARGIN,
+    // Specifies that the horizontal positioning shall be
+    // relative to the outside margin of the current page (the
+    // right margin on odd pages, left on even pages).
     OUTSIDE_MARGIN,
     LEFT_MARGIN,
     RIGHT_MARGIN,
 }
 
 // 20.4.3.4 ST_RelFromH (Horizontal Relative Positioning)
 export enum ObjectRelativeFromV {
+    // Specifies that the vertical positioning shall be relative
+    // to the edge of the page.
     PAGE,
+    // Specifies that the vertical positioning shall be relative
+    // to the paragraph which contains the drawing anchor.
     PARAGRAPH,
+    // Specifies that the vertical positioning shall be relative
+    // to the page margins.
     LINE,
+    // Specifies that the vertical positioning shall be relative
+    // to the page margins.
     MARGIN,
+   // Specifies that the vertical positioning shall be relative
+    // to the top margin of the current page.
     TOP_MARGIN,
+    // Specifies that the vertical positioning shall be relative
+    // to the bottom margin of the current page.
     BOTTOM_MARGIN,
     INSIDE_MARGIN,
     OUTSIDE_MARGIN,

packages/docs-drawing-ui/src/commands/commands/update-doc-drawing.command.ts

@@ -332,7 +332,7 @@ export const UpdateDocDrawingWrappingStyleCommand: ICommand = {
                 if (oldPositionH.relativeFrom === ObjectRelativeFromH.MARGIN) {
                     posOffsetH -= pageMarginLeft;
                 } else if (oldPositionH.relativeFrom === ObjectRelativeFromH.COLUMN) {
-                    posOffsetH -= skeDrawing.columnLeft;
+                    posOffsetH = posOffsetH - skeDrawing.columnLeft - pageMarginLeft;
                 }
 
                 const newPositionH = {
@@ -349,12 +349,12 @@ export const UpdateDocDrawingWrappingStyleCommand: ICommand = {
                 const oldPositionV = oldDrawings[drawingId].docTransform.positionV;
                 let posOffsetV = aTop;
 
-                if (oldPositionV.relativeFrom === ObjectRelativeFromV.PAGE) {
-                    posOffsetV += pageMarginTop;
+                if (oldPositionV.relativeFrom === ObjectRelativeFromV.MARGIN) {
+                    posOffsetV = posOffsetV - pageMarginTop;
                 } else if (oldPositionV.relativeFrom === ObjectRelativeFromV.LINE) {
-                    posOffsetV -= skeDrawing.lineTop;
+                    posOffsetV = posOffsetV - pageMarginTop - skeDrawing.lineTop;
                 } else if (oldPositionV.relativeFrom === ObjectRelativeFromV.PARAGRAPH) {
-                    posOffsetV -= skeDrawing.blockAnchorTop;
+                    posOffsetV = posOffsetV - pageMarginTop - skeDrawing.blockAnchorTop;
                 }
 
                 const newPositionV = {

packages/docs-drawing-ui/src/controllers/doc-drawing-transformer-update.controller.ts

@@ -501,6 +501,7 @@ export class DocDrawingTransformerController extends Disposable {
             segmentId: docSelectionRenderService.getSegment(),
             segmentPage: docSelectionRenderService.getSegmentPage(),
         });
+
         if (nodeInfo) {
             const { node, segmentPage: segmentPageIndex, segmentId: nodeSegmentId } = nodeInfo;
             glyphAnchor = node;
@@ -526,9 +527,12 @@ export class DocDrawingTransformerController extends Disposable {
         const pageType = page.type;
 
         for (const p of pages) {
-            const { headerId, footerId, pageHeight, pageWidth, marginLeft, marginBottom } = p;
+            const { headerId, footerId, pageHeight, pageWidth, marginLeft, marginBottom, left: pageLeft } = p;
             const pIndex = pages.indexOf(p);
 
+            this._liquid.translateSave();
+            this._liquid.translate(pageLeft, 0);
+
             if (segmentPage > -1 && pIndex === segmentPage) {
                 switch (pageType) {
                     case DocumentSkeletonPageType.HEADER: {
@@ -571,6 +575,7 @@ export class DocDrawingTransformerController extends Disposable {
             }
 
             this._liquid.restorePagePadding(p);
+            this._liquid.translateRestore();
             this._liquid.translatePage(p, pageLayoutType, pageMarginLeft, pageMarginTop);
         }
 
@@ -580,14 +585,15 @@ export class DocDrawingTransformerController extends Disposable {
             glyphAnchor = paragraphStartLine.divides?.[0]?.glyphGroup?.[0] ?? glyphAnchor;
         }
 
+        //
         docTransform.positionH = {
             relativeFrom: positionH.relativeFrom,
             posOffset: left - this._liquid.x - docsLeft,
         };
 
         switch (positionH.relativeFrom) {
-            case ObjectRelativeFromH.MARGIN: {
-                docTransform.positionH.posOffset = left - this._liquid.x - docsLeft - page.marginLeft;
+            case ObjectRelativeFromH.PAGE: {
+                docTransform.positionH.posOffset = left - this._liquid.x - docsLeft + page.marginLeft;
                 break;
             }
             case ObjectRelativeFromH.COLUMN: {
@@ -603,7 +609,7 @@ export class DocDrawingTransformerController extends Disposable {
 
         switch (positionV.relativeFrom) {
             case ObjectRelativeFromV.PAGE: {
-                docTransform.positionV.posOffset = top - this._liquid.y - docsTop - page.marginTop;
+                docTransform.positionV.posOffset = top - this._liquid.y - docsTop + page.marginTop;
                 break;
             }
             case ObjectRelativeFromV.LINE: {

packages/docs-drawing-ui/src/controllers/render-controllers/doc-drawing-transform-update.controller.ts

@@ -140,6 +140,7 @@ export class DocDrawingTransformUpdateController extends Disposable implements I
         );
     }
 
+    // eslint-disable-next-line max-lines-per-function
     private _refreshDrawing(skeleton: DocumentSkeleton) {
         const skeletonData = skeleton?.getSkeletonData();
         const { mainComponent, unitId } = this._context;
@@ -159,16 +160,23 @@ export class DocDrawingTransformUpdateController extends Disposable implements I
          */
         for (let i = 0, len = pages.length; i < len; i++) {
             const page = pages[i];
-            const { headerId, footerId, pageWidth } = page;
+            const { headerId, footerId, pageWidth, left: pageLeft } = page;
+
+            this._liquid.translateSave();
+            this._liquid.translate(pageLeft, 0);
 
             if (headerId) {
                 const headerPage = skeHeaders.get(headerId)?.get(pageWidth);
 
                 if (headerPage) {
                     this._calculateDrawingPosition(
-                        unitId, headerPage, docsLeft, docsTop, updateDrawingMap,
-                        headerPage.marginTop,
-                        page.marginLeft
+                        unitId,
+                        headerPage,
+                        docsLeft,
+                        docsTop,
+                        updateDrawingMap,
+                        0,
+                        0
                     );
                 }
             }
@@ -178,14 +186,28 @@ export class DocDrawingTransformUpdateController extends Disposable implements I
 
                 if (footerPage) {
                     this._calculateDrawingPosition(
-                        unitId, footerPage, docsLeft, docsTop, updateDrawingMap,
-                        page.pageHeight - page.marginBottom + footerPage.marginTop,
-                        page.marginLeft
+                        unitId,
+                        footerPage,
+                        docsLeft,
+                        docsTop,
+                        updateDrawingMap,
+                        0,
+                        page.pageHeight - page.marginBottom
                     );
                 }
             }
 
-            this._calculateDrawingPosition(unitId, page, docsLeft, docsTop, updateDrawingMap, page.marginTop, page.marginLeft);
+            this._calculateDrawingPosition(
+                unitId,
+                page,
+                docsLeft,
+                docsTop,
+                updateDrawingMap,
+                0,
+                0
+            );
+
+            this._liquid.translateRestore();
             this._liquid.translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
         }
 
@@ -245,14 +267,12 @@ export class DocDrawingTransformUpdateController extends Disposable implements I
         docsLeft: number,
         docsTop: number,
         updateDrawingMap: Record<string, IDrawingParamsWithBehindText>,
-        marginTop: number,
-        marginLeft: number
+        xOffset: number,
+        yOffset: number
     ) {
         const { skeDrawings } = page;
-        this._liquid.translatePagePadding({
-            marginTop,
-            marginLeft,
-        } as IDocumentSkeletonPage);
+        this._liquid.translateSave();
+        this._liquid.translate(xOffset, yOffset);
 
         skeDrawings.forEach((drawing) => {
             const { aLeft, aTop, height, width, angle, drawingId, drawingOrigin } = drawing;
@@ -280,10 +300,7 @@ export class DocDrawingTransformUpdateController extends Disposable implements I
             }
         });
 
-        this._liquid.restorePagePadding({
-            marginTop,
-            marginLeft,
-        } as IDocumentSkeletonPage);
+        this._liquid.translateRestore();
     }
 
     private _drawingInitializeListener() {

packages/docs-drawing-ui/src/controllers/render-controllers/doc-drawing-update.render-controller.ts

@@ -24,7 +24,7 @@ import { MessageType } from '@univerjs/design';
 import { DocSelectionManagerService, DocSkeletonManagerService, RichTextEditingMutation } from '@univerjs/docs';
 import { IDocDrawingService } from '@univerjs/docs-drawing';
 import { docDrawingPositionToTransform, DocSelectionRenderService } from '@univerjs/docs-ui';
-import { DRAWING_IMAGE_ALLOW_IMAGE_LIST, DRAWING_IMAGE_ALLOW_SIZE, DRAWING_IMAGE_COUNT_LIMIT, DRAWING_IMAGE_HEIGHT_LIMIT, DRAWING_IMAGE_WIDTH_LIMIT, getDrawingShapeKeyByDrawingSearch, getImageSize, IDrawingManagerService, IImageIoService, ImageUploadStatusType } from '@univerjs/drawing';
+import { DRAWING_IMAGE_ALLOW_IMAGE_LIST, DRAWING_IMAGE_ALLOW_SIZE, DRAWING_IMAGE_COUNT_LIMIT, DRAWING_IMAGE_HEIGHT_LIMIT, getDrawingShapeKeyByDrawingSearch, getImageSize, IDrawingManagerService, IImageIoService, ImageUploadStatusType } from '@univerjs/drawing';
 import { DocumentEditArea, IRenderManagerService } from '@univerjs/engine-render';
 
 import { ILocalFileService, IMessageService } from '@univerjs/ui';
@@ -78,10 +78,11 @@ export class DocDrawingUpdateRenderController extends Disposable implements IRen
         }
 
         await this._insertFloatImages(files);
+
         return true;
     }
 
-    // eslint-disable-next-line max-lines-per-function
+    // eslint-disable-next-line max-lines-per-function, complexity
     private async _insertFloatImages(files: File[]) {
         let imageParams: Nullable<IImageIoServiceParam>[] = [];
 
@@ -118,6 +119,18 @@ export class DocDrawingUpdateRenderController extends Disposable implements IRen
         const { unitId } = this._context;
         const docDrawingParams: IDocDrawing[] = [];
 
+        const activeTextRange = this._docSelectionManagerService.getActiveTextRange();
+        const skeleton = this._renderManagerSrv.getRenderById(unitId)
+            ?.with(DocSkeletonManagerService);
+
+        if (activeTextRange == null || skeleton == null) {
+            return;
+        }
+
+        const glyph = skeleton.getSkeleton().findNodeByCharIndex(activeTextRange.startOffset);
+        const section = glyph?.parent?.parent?.parent?.parent;
+        const minColWidth = Math.min(...section?.columns.map((col) => col.width) ?? []);
+
         for (const imageParam of imageParams) {
             if (imageParam == null) {
                 continue;
@@ -128,8 +141,8 @@ export class DocDrawingUpdateRenderController extends Disposable implements IRen
             this._imageIoService.addImageSourceCache(imageId, imageSourceType, image);
 
             let scale = 1;
-            if (width > DRAWING_IMAGE_WIDTH_LIMIT || height > DRAWING_IMAGE_HEIGHT_LIMIT) {
-                const scaleWidth = DRAWING_IMAGE_WIDTH_LIMIT / width;
+            if (width > minColWidth || height > DRAWING_IMAGE_HEIGHT_LIMIT) {
+                const scaleWidth = minColWidth / width;
                 const scaleHeight = DRAWING_IMAGE_HEIGHT_LIMIT / height;
                 scale = Math.min(scaleWidth, scaleHeight);
             }