fix(docs): list indent and hanging

examples/src/data/docs/default-document-data-cn.ts

@@ -15,7 +15,7 @@
  */
 
 import type { IDocumentData } from '@univerjs/core';
-import { BooleanNumber, HorizontalAlign } from '@univerjs/core';
+import { BooleanNumber } from '@univerjs/core';
 import { ptToPixel } from '@univerjs/engine-render';
 
 export const DEFAULT_DOCUMENT_DATA_CN: IDocumentData = {
@@ -115,7 +115,10 @@ export const DEFAULT_DOCUMENT_DATA_CN: IDocumentData = {
                     spaceAbove: 10,
                     lineSpacing: 2,
                     spaceBelow: 0,
-                    horizontalAlign: HorizontalAlign.JUSTIFIED,
+                    // hanging: 20,
+                    // indentStart: 50,
+                    // indentEnd: 50,
+                    // indentFirstLine: 50,
                 },
             },
             {

packages/docs/src/commands/commands/delete.command.ts

@@ -92,6 +92,12 @@ export const DeleteLeftCommand: ICommand = {
 
                 if (paragraphStyle) {
                     updateParagraph.paragraphStyle = paragraphStyle;
+                    // TODO: It maybe need to update codes bellow when we support nested list.
+                    const { hanging } = paragraphStyle;
+                    if (hanging) {
+                        updateParagraph.paragraphStyle.indentStart = hanging;
+                        updateParagraph.paragraphStyle.hanging = undefined;
+                    }
                 }
             } else if (preIsIndent === true) {
                 const bullet = paragraph.bullet;

packages/docs/src/commands/commands/list.command.ts

@@ -20,13 +20,14 @@ import {
     ICommandService,
     IUniverInstanceService,
     MemoryCursor,
+    PRESET_LIST_TYPE,
     PresetListType,
     TextX,
     TextXActionType,
     Tools,
     UpdateDocsAttributeType,
 } from '@univerjs/core';
-import type { IActiveTextRange } from '@univerjs/engine-render';
+import { getCharSpaceApply, getNumberUnitValue, type IActiveTextRange } from '@univerjs/engine-render';
 
 import { serializeTextRange, TextSelectionManagerService } from '../../services/text-selection-manager.service';
 import type { IRichTextEditingMutationParams } from '../mutations/core-editing.mutation';
@@ -65,7 +66,7 @@ export const ListOperationCommand: ICommand<IListOperationCommandParams> = {
 
         const unitId = dataModel.getUnitId();
 
-        const isAlreadyOrdered = currentParagraphs.every((paragraph) => paragraph.bullet?.listType === listType);
+        const isAlreadyList = currentParagraphs.every((paragraph) => paragraph.bullet?.listType === listType);
 
         const ID_LENGTH = 6;
 
@@ -98,36 +99,51 @@ export const ListOperationCommand: ICommand<IListOperationCommandParams> = {
 
         const textX = new TextX();
 
+        const customLists = dataModel.getSnapshot().lists ?? {};
+
+        const lists = {
+            ...PRESET_LIST_TYPE,
+            ...customLists,
+        };
+
+        const { charSpace, defaultTabStop = 36, gridType } = dataModel.getSnapshot().documentStyle;
+
         for (const paragraph of currentParagraphs) {
-            const { startIndex } = paragraph;
+            const { startIndex, paragraphStyle = {} } = paragraph;
+            const { indentFirstLine = 0, snapToGrid, indentStart = 0 } = paragraphStyle;
+            const { hanging: listHanging, indentStart: listIndentStart } = lists[listType].nestingLevel[0];
+
+            const charSpaceApply = getCharSpaceApply(charSpace, defaultTabStop, gridType, snapToGrid);
 
             textX.push({
                 t: TextXActionType.RETAIN,
                 len: startIndex - memoryCursor.cursor,
                 segmentId,
             });
 
-            // See: univer/packages/engine-render/src/components/docs/block/paragraph/layout-ruler.ts line:802 comments.
-            const paragraphStyle = {
-                ...paragraph.paragraphStyle,
-                hanging: undefined,
-                indentStart: undefined,
-            };
-
             textX.push({
                 t: TextXActionType.RETAIN,
                 len: 1,
                 body: {
                     dataStream: '',
                     paragraphs: [
-                        isAlreadyOrdered
+                        isAlreadyList
                             ? {
-                                paragraphStyle,
+                                paragraphStyle: {
+                                    ...paragraphStyle,
+                                    hanging: undefined,
+                                    indentStart: indentStart ? Math.max(0, getNumberUnitValue(indentStart, charSpaceApply) + listHanging - listIndentStart) : undefined,
+                                },
                                 startIndex: 0,
                             }
                             : {
-                                ...paragraph,
                                 startIndex: 0,
+                                paragraphStyle: {
+                                    ...paragraphStyle,
+                                    indentFirstLine: undefined,
+                                    hanging: listHanging,
+                                    indentStart: listIndentStart - listHanging + getNumberUnitValue(indentFirstLine, charSpaceApply) + getNumberUnitValue(indentStart, charSpaceApply),
+                                },
                                 bullet: {
                                     ...(paragraph.bullet ?? {
                                         nestingLevel: 0,

packages/engine-render/src/basics/i-document-skeleton-cached.ts

@@ -141,7 +141,7 @@ export interface IDocumentSkeletonLine {
 
     lineIndex: number; // lineIndex 行号
     bullet?: IDocumentSkeletonBullet; // 无序和有序列表标题
-    paragraphStart: boolean; // Paragraph start 默认false
+    paragraphStart: boolean; // Paragraph start 默认 false
 
     // dtId: string[]; // drawingTBIds 影响行的元素id集合，会切割divide，影响上下
     // bmt: number; // benchmarkTop， drawing的位置是根据paragraph的位置进行相对定位的，段落跨页后，需要一个校准

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

@@ -14,11 +14,10 @@
  * limitations under the License.
  */
 
-import type { INumberUnit, IParagraphStyle } from '@univerjs/core';
+import type { INumberUnit } from '@univerjs/core';
 import { BooleanNumber, DataStreamTreeTokenType, GridType, SpacingRule } from '@univerjs/core';
 
 import type {
-    IDocumentSkeletonBullet,
     IDocumentSkeletonColumn,
     IDocumentSkeletonDrawing,
     IDocumentSkeletonGlyph,
@@ -70,8 +69,6 @@ export function layoutParagraph(
 
             const charSpaceApply = getCharSpaceApply(charSpace, defaultTabStop, gridType, snapToGrid);
 
-            __bulletIndentHandler(paragraphStyle, bulletSkeleton, charSpaceApply);
-
             const bulletGlyph = createSkeletonBulletGlyph(glyphGroup[0], bulletSkeleton, charSpaceApply);
             _lineOperator([bulletGlyph, ...glyphGroup], pages, sectionBreakConfig, paragraphConfig, paragraphStart);
         } else {
@@ -366,18 +363,15 @@ function _lineOperator(
     const lineIndex = line ? line.lineIndex + 1 : 0;
     const { charSpace, defaultTabStop } = getCharSpaceConfig(sectionBreakConfig, paragraphConfig);
     const charSpaceApply = getCharSpaceApply(charSpace, defaultTabStop, gridType, snapToGrid);
-    const { paddingLeft, paddingRight, changeBulletWidth } = __getIndentPadding(
-        glyphGroup[0],
+    const { paddingLeft, paddingRight } = __getIndentPadding(
         indentFirstLine,
         hanging,
         indentStart,
         indentEnd,
-        charSpaceApply
+        charSpaceApply,
+        paragraphStart
     );
-    if (changeBulletWidth.state) {
-        // 为了保持__getIndentPadding的纯函数特性，把修改首行列表宽度的逻辑外置到这里
-        glyphGroup[0].width = changeBulletWidth.hangingNumber;
-    }
+
     const newLine = createSkeletonLine(
         paragraphIndex,
         LineType.PARAGRAPH,
@@ -443,45 +437,32 @@ function _pageOperator(
  * 17.3.1.12 ind (Paragraph Indentation)
  */
 function __getIndentPadding(
-    glyph: IDocumentSkeletonGlyph,
     indentFirstLine: INumberUnit | number = 0,
     hanging: INumberUnit | number = 0,
     indentStart: INumberUnit | number = 0,
     indentEnd: INumberUnit | number = 0,
-    charSpaceApply: number
+    charSpaceApply: number,
+    paragraphStart = false
 ) {
-    const { glyphType = GlyphType.LETTER, bBox } = glyph;
     const indentFirstLineNumber = getNumberUnitValue(indentFirstLine, charSpaceApply);
     const hangingNumber = getNumberUnitValue(hanging, charSpaceApply);
     const indentStartNumber = getNumberUnitValue(indentStart, charSpaceApply);
     const indentEndNumber = getNumberUnitValue(indentEnd, charSpaceApply);
 
     let paddingLeft = indentStartNumber;
     const paddingRight = indentEndNumber;
-    const changeBulletWidth = {
-        state: false,
-        hangingNumber: 0,
-    };
 
-    if (glyphType === GlyphType.LIST) {
-        // 首行的处理
-        const { width: fontWidth } = bBox;
+    if (indentFirstLineNumber > 0 && paragraphStart) {
+        paddingLeft += indentFirstLineNumber;
+    }
 
-        if (indentFirstLineNumber > 0) {
-            paddingLeft += indentFirstLineNumber;
-        } else if (hangingNumber > 0 && hangingNumber > fontWidth) {
-            // glyph.w = hangingNumber;
-            changeBulletWidth.state = true;
-            changeBulletWidth.hangingNumber = hangingNumber;
-        }
-    } else {
+    if (hangingNumber > 0 && !paragraphStart) {
         paddingLeft += hangingNumber;
     }
 
     return {
         paddingLeft,
         paddingRight,
-        changeBulletWidth,
     };
 }
 
@@ -715,28 +696,6 @@ function __getSpanGroupByLine(line: IDocumentSkeletonLine) {
     return glyphGroup;
 }
 
-function __bulletIndentHandler(
-    paragraphStyle: IParagraphStyle,
-    bulletSkeleton: IDocumentSkeletonBullet,
-    charSpaceApply: number
-) {
-    const { hanging, indentStart } = paragraphStyle;
-
-    const { hanging: hangingBullet, indentStart: indentStartBullet } = bulletSkeleton;
-
-    // TODO: @JOCS, do not modify snapshot data directly.
-    if (hanging === undefined) {
-        paragraphStyle.hanging = hangingBullet;
-    }
-
-    // TODO: @JOCS, do not modify snapshot data directly.
-    if (indentStart === undefined) {
-        paragraphStyle.indentStart =
-            getNumberUnitValue(indentStartBullet || 0, charSpaceApply) -
-            getNumberUnitValue(hangingBullet || 0, charSpaceApply);
-    }
-}
-
 function __isNullLine(line: IDocumentSkeletonLine) {
     return !line.divides[0].glyphGroup[0];
 }

packages/engine-render/src/index.ts

@@ -46,3 +46,4 @@ export { Documents } from './components/docs/document';
 export type { IPageRenderConfig } from './components/docs/document';
 export { DocumentSkeleton } from './components/docs/layout/doc-skeleton';
 export { ThinEngine } from './thin-engine';
+export { getCharSpaceApply, getNumberUnitValue } from './components/docs/layout/tools';