Skip to content

Commit

Permalink
fix(docs): list indent and hanging (#1675)
Browse files Browse the repository at this point in the history 
* fix: list indent and hanging

* fix: list indent and hanging

* fix: remove unused codes
  • Loading branch information
@Jocs
Jocs committed Apr 7, 2024
1 parent 3acf286 commit 4020055
Show file tree
Hide file tree
Showing 6 changed files with 53 additions and 68 deletions.
7 changes: 5 additions & 2 deletions examples/src/data/docs/default-document-data-cn.ts
View file
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
View file
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
42 changes: 29 additions & 13 deletions packages/docs/src/commands/commands/list.command.ts
View file
Expand Up @@ -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';
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,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,
Expand Down
2 changes: 1 addition & 1 deletion packages/engine-render/src/basics/i-document-skeleton-cached.ts
View file
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
63 changes: 11 additions & 52 deletions packages/engine-render/src/components/docs/layout/block/paragraph/layout-ruler.ts
View file
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 @@ -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,
Expand Down Expand Up @@ -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,
};
}

Expand Down Expand Up @@ -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];
}
1 change: 1 addition & 0 deletions packages/engine-render/src/index.ts
View file
Expand Up @@ -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';

0 comments on commit 4020055

Please sign in to comment.