Skip to content

Commit

Permalink
fix(docs): line space between image and line (#3101)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jocs
Jocs authored Aug 17, 2024
1 parent 736cb9b commit 32915ff
Show file tree
Hide file tree
Showing 5 changed files with 74 additions and 51 deletions.
43 changes: 28 additions & 15 deletions packages/engine-render/src/components/docs/document.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,7 @@ export class Documents extends DocComponent {

for (let i = 0; i < linesCount; i++) {
const line = lines[i];
const { divides, asc = 0, type, lineHeight = 0, paddingTop } = line;
const { divides, asc = 0, type, lineHeight = 0 } = line;

const maxLineAsc = asc;

Expand All @@ -331,9 +331,22 @@ export class Documents extends DocComponent {
}
}
} else {
// let { x, y } = this._drawLiquid;
// x += horizontalOffsetNoAngle;
// y += verticalOffsetNoAngle + line.top;
// ctx.save();
// ctx.strokeStyle = 'rgb(245, 90, 34)';
// ctx.moveTo(x, y);
// ctx.lineTo(line.width ?? 0 + x, y);
// ctx.lineTo(line.width ?? 0 + x, lineHeight + y);
// ctx.lineTo(x, lineHeight + y);
// ctx.lineTo(x, y);
// ctx.stroke();
// ctx.restore();

this._drawLiquid.translateSave();
this._drawLiquid.translateLine(line, true, true);

this._drawLiquid.translateLine(line, true);
rotateTranslateXListApply && this._drawLiquid.translate(rotateTranslateXListApply[i]); // x axis offset

const divideLength = divides.length;
Expand All @@ -360,7 +373,7 @@ export class Documents extends DocComponent {
const centerPoint = Vector2.create(spanWidth / 2, lineHeight / 2);

const spanStartPoint = calculateRectRotate(
originTranslate.addByPoint(spanLeft, paddingTop),
originTranslate.addByPoint(spanLeft, 0),
centerPoint,
centerAngle,
vertexAngle,
Expand Down Expand Up @@ -392,7 +405,7 @@ export class Documents extends DocComponent {
const centerPoint = Vector2.create(spanWidth / 2, lineHeight / 2);

const spanStartPoint = calculateRectRotate(
originTranslate.addByPoint(spanLeft + xOffset, paddingTop),
originTranslate.addByPoint(spanLeft + xOffset, 0),
centerPoint,
centerAngle,
vertexAngle,
Expand All @@ -402,7 +415,7 @@ export class Documents extends DocComponent {
const spanPointWithFont = calculateRectRotate(
originTranslate.addByPoint(
spanLeft + maxLineAscSin + xOffset,
maxLineAscCos + paddingTop
maxLineAscCos
),
centerPoint,
centerAngle,
Expand Down Expand Up @@ -571,7 +584,7 @@ export class Documents extends DocComponent {

for (let i = 0; i < linesCount; i++) {
const line = lines[i];
const { divides, asc = 0, type, lineHeight = 0, paddingTop } = line;
const { divides, asc = 0, type, lineHeight = 0 } = line;

const maxLineAsc = asc;

Expand All @@ -590,7 +603,7 @@ export class Documents extends DocComponent {
}
} else {
this._drawLiquid.translateSave();
this._drawLiquid.translateLine(line, true);
this._drawLiquid.translateLine(line, true, true);

const divideLength = divides.length;

Expand All @@ -616,7 +629,7 @@ export class Documents extends DocComponent {
const centerPoint = Vector2.create(spanWidth / 2, lineHeight / 2);

const spanStartPoint = calculateRectRotate(
originTranslate.addByPoint(spanLeft, paddingTop),
originTranslate.addByPoint(spanLeft, 0),
centerPoint,
centerAngle,
vertexAngle,
Expand Down Expand Up @@ -648,7 +661,7 @@ export class Documents extends DocComponent {
const centerPoint = Vector2.create(spanWidth / 2, lineHeight / 2);

const spanStartPoint = calculateRectRotate(
originTranslate.addByPoint(spanLeft + xOffset, paddingTop),
originTranslate.addByPoint(spanLeft + xOffset, 0),
centerPoint,
centerAngle,
vertexAngle,
Expand All @@ -658,7 +671,7 @@ export class Documents extends DocComponent {
const spanPointWithFont = calculateRectRotate(
originTranslate.addByPoint(
spanLeft + maxLineAscSin + xOffset,
maxLineAscCos + paddingTop
maxLineAscCos
),
centerPoint,
centerAngle,
Expand Down Expand Up @@ -777,7 +790,7 @@ export class Documents extends DocComponent {

for (let i = 0; i < linesCount; i++) {
const line = lines[i];
const { divides, asc = 0, type, lineHeight = 0, paddingTop } = line;
const { divides, asc = 0, type, lineHeight = 0 } = line;

const maxLineAsc = asc;

Expand All @@ -796,7 +809,7 @@ export class Documents extends DocComponent {
}
} else {
this._drawLiquid.translateSave();
this._drawLiquid.translateLine(line, true);
this._drawLiquid.translateLine(line, true, true);
const { y } = this._drawLiquid;

if (isHeader) {
Expand Down Expand Up @@ -835,7 +848,7 @@ export class Documents extends DocComponent {
const centerPoint = Vector2.create(spanWidth / 2, lineHeight / 2);

const spanStartPoint = calculateRectRotate(
originTranslate.addByPoint(spanLeft, paddingTop),
originTranslate.addByPoint(spanLeft, 0),
centerPoint,
centerAngle,
vertexAngle,
Expand Down Expand Up @@ -867,7 +880,7 @@ export class Documents extends DocComponent {
const centerPoint = Vector2.create(spanWidth / 2, lineHeight / 2);

const spanStartPoint = calculateRectRotate(
originTranslate.addByPoint(spanLeft + xOffset, paddingTop),
originTranslate.addByPoint(spanLeft + xOffset, 0),
centerPoint,
centerAngle,
vertexAngle,
Expand All @@ -877,7 +890,7 @@ export class Documents extends DocComponent {
const spanPointWithFont = calculateRectRotate(
originTranslate.addByPoint(
spanLeft + maxLineAscSin + xOffset,
maxLineAscCos + paddingTop
maxLineAscCos
),
centerPoint,
centerAngle,
Expand Down
10 changes: 5 additions & 5 deletions packages/engine-render/src/components/docs/extensions/line.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,25 +45,25 @@ export class Line extends docExtension {
return;
}

const { asc, dsc, paddingTop } = line;
const { asc, dsc } = line;
const { sp: strikeoutPosition, spo, sbo, bd } = bBox;
const scale = getScale(parentScale);
const DELTA = 0.5;
const { ul: underline, st: strikethrough, ol: overline, va: baselineOffset, bbl: bottomBorderLine } = textStyle;

if (underline) {
const startY = asc + dsc + paddingTop;
const startY = asc + dsc;
this._drawLine(ctx, glyph, underline, startY, scale);
}

if (bottomBorderLine) {
const startY = asc + dsc + 3 + paddingTop;
const startY = asc + dsc + 3;
this._drawLine(ctx, glyph, bottomBorderLine, startY, scale, 2);
}

if (strikethrough) {
// strikethrough position is the middle of bounding box ascent and descent.
let startY = asc + bd - strikeoutPosition - DELTA + paddingTop;
let startY = asc + bd - strikeoutPosition - DELTA;

/**
* --------- superscript strikethrough position -------
Expand All @@ -82,7 +82,7 @@ export class Line extends docExtension {
}

if (overline) {
const startY = -DEFAULT_OFFSET_SPACING - DELTA + paddingTop;
const startY = -DEFAULT_OFFSET_SPACING - DELTA;

this._drawLine(ctx, glyph, overline, startY, scale);
}
Expand Down
48 changes: 27 additions & 21 deletions packages/engine-render/src/components/docs/layout/block/paragraph/layout-ruler.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -354,16 +354,16 @@ function _divideOperator(
// If the height of the new content exceeds the height of the added row,
// the entire row needs to be recalculated according to the new height
// in order to handle the mixing of graphics and text
const spanGroupCached = __getSpanGroupByLine(currentLine);
const spanGroupCached = __getGlyphGroupByLine(currentLine);
const spanGroupCachedLen = spanGroupCached.length;
let newSpanGroup = [];
let newGlyphGroup = [];
let startIndex = 1;

if (spanGroupCachedLen > 2 && spanGroupCached[0].glyphType === GlyphType.LIST) {
newSpanGroup = [spanGroupCached[0], spanGroupCached[1]];
newGlyphGroup = [spanGroupCached[0], spanGroupCached[1]];
startIndex = 2;
} else {
newSpanGroup = [spanGroupCached[0]];
newGlyphGroup = [spanGroupCached[0]];
}
const column = currentLine.parent;

Expand All @@ -372,7 +372,7 @@ function _divideOperator(

_lineOperator(
ctx,
newSpanGroup,
newGlyphGroup,
pages,
sectionBreakConfig,
paragraphConfig,
Expand Down Expand Up @@ -415,7 +415,7 @@ function _lineOperator(
paragraphConfig: IParagraphConfig,
paragraphStart: boolean = false,
breakPointType: BreakPointType = BreakPointType.Normal,
defaultSpanLineHeight?: number
defaultGlyphLineHeight?: number
) {
let lastPage = getLastPage(pages);
let columnInfo = getLastNotFullColumnInfo(lastPage);
Expand All @@ -441,7 +441,7 @@ function _lineOperator(

const ascent = Math.max(...glyphGroup.map((glyph) => glyph.bBox.ba));
const descent = Math.max(...glyphGroup.map((glyph) => glyph.bBox.bd));
const spanLineHeight = defaultSpanLineHeight || ascent + descent;
const glyphLineHeight = defaultGlyphLineHeight || (ascent + descent);

const {
paragraphStyle = {},
Expand All @@ -463,13 +463,15 @@ function _lineOperator(
indentEnd,
} = paragraphStyle;

const { paragraphLineGapDefault, linePitch, lineSpacing, spacingRule, snapToGrid, gridType } = getLineHeightConfig(
const {
paragraphLineGapDefault, linePitch, lineSpacing, spacingRule, snapToGrid, gridType,
} = getLineHeightConfig(
sectionBreakConfig,
paragraphConfig
);

const { paddingTop, paddingBottom, contentHeight, lineSpacingApply } = __getLineHeight(
spanLineHeight,
glyphLineHeight,
paragraphLineGapDefault,
linePitch,
gridType,
Expand Down Expand Up @@ -542,7 +544,7 @@ function _lineOperator(
// 行高超过Col高度，且列中已存在一行以上，且section大于一个；
// console.log('_lineOperator', { glyphGroup, pages, lineHeight, newLineTop, sectionHeight: section.height, lastPage });
setColumnFullState(column, true);
_columnOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, paragraphStart, breakPointType, defaultSpanLineHeight);
_columnOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, paragraphStart, breakPointType, defaultGlyphLineHeight);

if (paragraphStart && paragraphAffectSkeDrawings && paragraphAffectSkeDrawings.size > 0) {
for (const drawing of paragraphAffectSkeDrawings.values()) {
Expand Down Expand Up @@ -607,7 +609,7 @@ function _lineOperator(
column.lines.push(newLine);
newLine.parent = column;
createAndUpdateBlockAnchor(paragraphIndex, newLine, lineTop, pDrawingAnchor);
_divideOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, paragraphStart, breakPointType, defaultSpanLineHeight);
_divideOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, paragraphStart, breakPointType, defaultGlyphLineHeight);
}

function __updateAndPositionDrawings(
Expand Down Expand Up @@ -1004,6 +1006,7 @@ function __getParagraphSpace(

if (paragraphStart) {
let marginTop = getNumberUnitValue(spaceAbove, lineSpacing);

if (preLine) {
const { spaceBelowApply: preSpaceBelowApply } = preLine;
if (marginTop < preSpaceBelowApply) {
Expand All @@ -1021,6 +1024,7 @@ function __getParagraphSpace(
spaceBelowApply,
};
}

return {
marginTop: 0,
spaceBelowApply,
Expand All @@ -1036,7 +1040,7 @@ function __makeColumnsFull(columns: IDocumentSkeletonColumn[] = []) {
}

function __getLineHeight(
spanLineHeight: number,
glyphLineHeight: number,
paragraphLineGapDefault: number,
linePitch: number,
gridType: GridType,
Expand All @@ -1054,36 +1058,38 @@ function __getLineHeight(
return {
paddingTop,
paddingBottom,
contentHeight: lineSpacing * spanLineHeight,
lineSpacingApply: spanLineHeight,
contentHeight: lineSpacing * glyphLineHeight,
lineSpacingApply: glyphLineHeight,
};
}

return {
paddingTop,
paddingBottom,
contentHeight: Math.max(lineSpacing, spanLineHeight),
contentHeight: Math.max(lineSpacing, glyphLineHeight),
lineSpacingApply: lineSpacing,
};
}

// open xml $17.18.14 ST_DocGrid (Document Grid Types)
let lineSpacingApply = 0;
if (spacingRule === SpacingRule.AUTO) {
// auto的情况下，lineSpacing代表行数
// auto 的情况下，lineSpacing代表行数
lineSpacingApply = lineSpacing * linePitch;
} else {
lineSpacingApply = lineSpacing;
}

if (spanLineHeight + paragraphLineGapDefault * 2 < lineSpacingApply) {
paddingTop = paddingBottom = (lineSpacingApply - spanLineHeight) / 2;
if (glyphLineHeight + paragraphLineGapDefault * 2 < lineSpacingApply) {
paddingTop = paddingBottom = (lineSpacingApply - glyphLineHeight) / 2;
} else {
lineSpacingApply = glyphLineHeight;
}

return {
paddingTop,
paddingBottom,
contentHeight: spanLineHeight,
contentHeight: glyphLineHeight,
lineSpacingApply,
};
}
Expand Down Expand Up @@ -1129,7 +1135,7 @@ export function updateInlineDrawingPosition(
const glyphHeight = glyph.bBox.bd + glyph.bBox.ba;

drawing.aLeft = divide.left + divide.paddingLeft + glyph.left + 0.5 * glyph.width - 0.5 * width || 0;
drawing.aTop = top + lineHeight - 0.5 * glyphHeight - 0.5 * height || 0;
drawing.aTop = top + lineHeight - 0.5 * glyphHeight - 0.5 * height;
drawing.width = width;
drawing.height = height;
drawing.angle = angle;
Expand Down Expand Up @@ -1298,7 +1304,7 @@ function __maxFontBoundingBoxByGlyphGroup(glyphGroup: IDocumentSkeletonGlyph[])
return maxBox;
}

function __getSpanGroupByLine({ divides }: IDocumentSkeletonLine) {
function __getGlyphGroupByLine({ divides }: IDocumentSkeletonLine) {
return divides.flatMap((divide) => divide.glyphGroup);
}

Expand Down
8 changes: 6 additions & 2 deletions packages/engine-render/src/components/docs/liquid.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,15 +151,19 @@ export class Liquid {
};
}

translateLine(line: IDocumentSkeletonLine, isDraw = false) {
translateLine(line: IDocumentSkeletonLine, includeMarginTop = false, includePaddingTop = false) {
const {
top: lineTop,
marginBottom: _lineMarginBottom = 0,
marginTop: lineMarginTop = 0,
paddingTop: linePaddingTop = 0,
paddingBottom: _linePaddingBottom = 0,
} = line;
const lineOffset = lineTop + (isDraw === true ? lineMarginTop : 0) + linePaddingTop;

const lineOffset = lineTop +
(includeMarginTop ? lineMarginTop : 0) +
(includePaddingTop ? linePaddingTop : 0);

this.translate(0, lineOffset);
return {
x: 0,
Expand Down
Loading

0 comments on commit 32915ff

Please sign in to comment.