Skip to content

Commit

Permalink
fix: list indent and hanging
Browse files Browse the repository at this point in the history
  • Loading branch information
Jocs committed Mar 23, 2024
1 parent b50997d commit 19fe7ca
Show file tree
Hide file tree
Showing 5 changed files with 72 additions and 67 deletions.
7 changes: 5 additions & 2 deletions examples/src/data/docs/default-document-data-cn.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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,
},
},
{
Expand Down
6 changes: 6 additions & 0 deletions packages/docs/src/commands/commands/delete.command.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
36 changes: 24 additions & 12 deletions packages/docs/src/commands/commands/list.command.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
ICommandService,
IUniverInstanceService,
MemoryCursor,
PRESET_LIST_TYPE,
PresetListType,
TextX,
TextXActionType,
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -98,36 +99,47 @@ export const ListOperationCommand: ICommand<IListOperationCommandParams> = {

const textX = new TextX();

const customLists = dataModel.getSnapshot().lists ?? {};

const lists = {
...PRESET_LIST_TYPE,
...customLists,
};

for (const paragraph of currentParagraphs) {
const { startIndex } = paragraph;
const { startIndex, paragraphStyle = {} } = paragraph;
// const { indentStart = 0 } = paragraphStyle;
const { hanging, indentStart } = lists[listType].nestingLevel[0];

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: undefined,
},
startIndex: 0,
}
: {
...paragraph,
startIndex: 0,
paragraphStyle: {
...paragraphStyle,
indentFirstLine: undefined,
hanging,
indentStart: indentStart - hanging, // Add paragraphStyle.indentStart
},
bullet: {
...(paragraph.bullet ?? {
nestingLevel: 0,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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的位置进行相对定位的,段落跨页后,需要一个校准
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -362,18 +359,20 @@ 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;
}

// if (changeBulletWidth.state) {
// // 为了保持__getIndentPadding的纯函数特性,把修改首行列表宽度的逻辑外置到这里
// glyphGroup[0].width = changeBulletWidth.hangingNumber;
// }

const newLine = createSkeletonLine(
paragraphIndex,
LineType.PARAGRAPH,
Expand Down Expand Up @@ -439,45 +438,52 @@ 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,
};
// 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;
}

// if (glyphType === GlyphType.LIST) {
// // 首行的处理
// const { width: fontWidth } = bBox;

// if (indentFirstLineNumber > 0) {
// paddingLeft += indentFirstLineNumber;
// } else if (hangingNumber > 0 && hangingNumber > fontWidth) {
// // glyph.w = hangingNumber;
// changeBulletWidth.state = true;
// changeBulletWidth.hangingNumber = hangingNumber;
// }
// } else {
// paddingLeft += hangingNumber;
// }

return {
paddingLeft,
paddingRight,
changeBulletWidth,
// changeBulletWidth,
};
}

Expand Down Expand Up @@ -711,28 +717,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];
}

0 comments on commit 19fe7ca

Please sign in to comment.