@itwin/core-backend 5.2.0-dev.7 → 5.2.0

package/lib/esm/annotations/TextBlockLayout.js

@@ -5,12 +5,11 @@
 /** @packageDocumentation
  * @module ElementGeometry
  */
-import { TextStyleSettings } from "@itwin/core-common";
+import { getMarkerText, TextRun, TextStyleSettings } from "@itwin/core-common";
 import { Geometry, Range2d } from "@itwin/core-geometry";
 import { assert } from "@itwin/core-bentley";
 import * as LineBreaker from "linebreak";
 import { AnnotationTextStyle } from "./TextAnnotationElement";
-import { Drawing } from "../Element";
 /** @internal */
 function createFindTextStyleImpl(iModel) {
     return function findTextStyleImpl(id) {
@@ -54,11 +53,10 @@ export function computeLayoutTextBlockResult(args) {
  * @beta
  */
 export function computeGraphemeOffsets(args) {
-    const { textBlock, paragraphIndex, runLayoutResult, graphemeCharIndexes, iModel } = args;
+    const { source, runLayoutResult, graphemeCharIndexes, iModel } = args;
     const findFontId = args.findFontId ?? ((name, type) => iModel.fonts.findId({ name, type }) ?? 0);
     const computeTextRange = args.computeTextRange ?? ((x) => iModel.computeRangesForText(x));
-    const source = textBlock.paragraphs[paragraphIndex].runs[runLayoutResult.sourceRunIndex];
-    if (source.type !== "text" || runLayoutResult.characterCount === 0) {
+    if (!(source instanceof TextRun) || runLayoutResult.characterCount === 0) {
         return [];
     }
     const style = TextStyleSettings.fromJSON(runLayoutResult.textStyle);
@@ -75,7 +73,7 @@ function scaleRange(range, scale) {
     range.high.scaleInPlace(scale);
 }
 /**
- * Applies block level settings (lineSpacingFactor, lineHeight, widthFactor, frame, and leader) to a [TextStyleSettings]($common).
+ * Applies block level settings (lineSpacingFactor, paragraphSpacingFactor, widthFactor, frame, margins, justification, and leader) to a [TextStyleSettings]($common).
  * These must be set on the block, as they are meaningless on individual paragraphs/runs.
  * However, leaders are a special case and can override the block's leader settings.
  * Setting `isLeader` to `true` makes the [TextBlock]($common) settings not override the leader's settings.
@@ -86,21 +84,27 @@ function applyBlockSettings(target, source, isLeader = false) {
         return target;
     }
     const lineSpacingFactor = source.lineSpacingFactor ?? target.lineSpacingFactor;
-    const lineHeight = source.lineHeight ?? target.lineHeight;
+    const paragraphSpacingFactor = source.paragraphSpacingFactor ?? target.paragraphSpacingFactor;
     const widthFactor = source.widthFactor ?? target.widthFactor;
+    const justification = source.justification ?? target.justification;
     const frame = source.frame ?? target.frame;
+    const margins = source.margins ?? target.margins;
     const leader = source.leader ?? target.leader;
     const leaderShouldChange = !isLeader && !target.leaderEquals(leader);
     if (lineSpacingFactor !== target.lineSpacingFactor ||
-        lineHeight !== target.lineHeight ||
+        paragraphSpacingFactor !== target.paragraphSpacingFactor ||
         widthFactor !== target.widthFactor ||
+        justification !== target.justification ||
         !target.frameEquals(frame) ||
+        !target.marginsEqual(margins) ||
         leaderShouldChange) {
         const cloneProps = {
             lineSpacingFactor,
-            lineHeight,
+            paragraphSpacingFactor,
             widthFactor,
+            justification,
             frame,
+            margins,
         };
         if (leaderShouldChange) {
             cloneProps.leader = leader;
@@ -110,59 +114,39 @@ function applyBlockSettings(target, source, isLeader = false) {
     return target;
 }
 /**
- * Resolves the effective style of TextBlockComponents and Leaders, taking into account overrides/style of the instance and its parent(s).
+ * Resolves the effective style of TextBlockComponents and Leaders, taking into account overrides of the instance and its parent(s).
  * @beta
  */
 export class TextStyleResolver {
-    _textStyles = new Map();
-    _findTextStyle;
     /** The resolved style of the TextBlock. */
     blockSettings;
-    /** The scale factor of the model containing the TextBlock. */
-    scaleFactor;
     constructor(args) {
-        this._findTextStyle = args.findTextStyle ?? createFindTextStyleImpl(args.iModel);
-        this.scaleFactor = 1;
-        if (args.modelId) {
-            const element = args.iModel.elements.getElement(args.modelId);
-            if (element instanceof Drawing)
-                this.scaleFactor = element.scaleFactor;
-        }
-        this.blockSettings = this.findTextStyle(args.textBlock.styleId);
+        const findTextStyle = args.findTextStyle ?? createFindTextStyleImpl(args.iModel);
+        this.blockSettings = findTextStyle(args.textStyleId);
         if (args.textBlock.styleOverrides)
             this.blockSettings = this.blockSettings.clone(args.textBlock.styleOverrides);
     }
-    resolveParagraphSettingsImpl(paragraph) {
+    /**
+     * Resolves the effective text style settings for a given TextBlockComponent, applying block-level overrides.
+     */
+    resolveSettings(overrides, isLeader = false) {
         let settings = this.blockSettings;
-        if (paragraph.overridesStyle)
-            settings = settings.clone(paragraph.styleOverrides);
-        return settings;
-    }
-    /** Looks up an [[AnnotationTextStyle]] by ID. Uses caching. */
-    findTextStyle(id) {
-        let style = this._textStyles.get(id);
-        if (undefined === style) {
-            this._textStyles.set(id, style = this._findTextStyle(id));
-        }
-        return style;
-    }
-    /** Resolves the effective style for a [TextAnnotationLeader]($common). The TextAnnotationLeader should be a sibling of the provided TextBlock. */
-    resolveTextAnnotationLeaderSettings(leader) {
-        let settings = this.blockSettings;
-        if (leader.styleOverrides)
-            settings = settings.clone(leader.styleOverrides);
-        return applyBlockSettings(settings, this.blockSettings, true);
-    }
-    /** Resolves the effective style for a [Paragraph]($common). Paragraph should be child of provided TextBlock. */
-    resolveParagraphSettings(paragraph) {
-        return applyBlockSettings(this.resolveParagraphSettingsImpl(paragraph), this.blockSettings);
-    }
-    /** Resolves the effective style for a [Run]($common). Run should be child of provided Paragraph and TextBlock. */
-    resolveRunSettings(paragraph, run) {
-        let settings = this.resolveParagraphSettingsImpl(paragraph);
-        if (run.overridesStyle)
-            settings = settings.clone(run.styleOverrides);
-        return applyBlockSettings(settings, this.blockSettings);
+        if (overrides)
+            settings = settings.clone(overrides);
+        return applyBlockSettings(settings, this.blockSettings, isLeader);
+    }
+    resolveMarkerText(overrides, index) {
+        const markerSettings = overrides.listMarker ?? this.blockSettings.listMarker;
+        return getMarkerText(markerSettings, index);
+    }
+    /**
+     * Computes the indentation based on its style and nesting depth.
+     */
+    resolveIndentation(styleOverrides, depth) {
+        const overrides = this.resolveSettings(styleOverrides);
+        const indentation = overrides.indentation;
+        const tabInterval = overrides.tabInterval;
+        return indentation + tabInterval * depth;
     }
 }
 class LayoutContext {
@@ -175,35 +159,35 @@ class LayoutContext {
         this._computeTextRange = _computeTextRange;
         this._findFontId = _findFontId;
     }
-    findFontId(name) {
+    findFontId(name, type) {
         let fontId = this._fontIds.get(name);
         if (undefined === fontId) {
-            this._fontIds.set(name, fontId = this._findFontId(name));
+            this._fontIds.set(name, fontId = this._findFontId(name, type));
         }
         return fontId;
     }
     computeRangeForText(chars, style, baselineShift) {
         if (chars.length === 0) {
             return {
-                layout: new Range2d(0, 0, 0, style.lineHeight),
+                layout: new Range2d(0, 0, 0, style.textHeight),
                 justification: new Range2d(),
             };
         }
-        const fontId = this.findFontId(style.fontName);
+        const fontId = this.findFontId(style.font.name, style.font.type);
         const { layout, justification } = this._computeTextRange({
             chars,
             fontId,
             baselineShift,
             bold: style.isBold,
             italic: style.isItalic,
-            lineHeight: this.textStyleResolver.blockSettings.lineHeight,
+            textHeight: style.textHeight,
             widthFactor: this.textStyleResolver.blockSettings.widthFactor,
         });
         if ("none" !== baselineShift) {
             const isSub = "subscript" === baselineShift;
             const scale = isSub ? style.subScriptScale : style.superScriptScale;
             const offsetFactor = isSub ? style.subScriptOffsetFactor : style.superScriptOffsetFactor;
-            const offset = { x: 0, y: style.lineHeight * offsetFactor };
+            const offset = { x: 0, y: style.textHeight * offsetFactor };
             scaleRange(layout, scale);
             layout.cloneTranslated(offset, layout);
             scaleRange(justification, scale);
@@ -252,10 +236,10 @@ class LayoutContext {
         layout.extendRange(denominator);
         return { layout, numerator, denominator };
     }
-    computeRangeForTabRun(style, source, length) {
+    computeRangeForTabRun(style, source, lengthFromLastTab) {
         const interval = source.styleOverrides.tabInterval ?? style.tabInterval;
-        const tabEndX = interval - length % interval;
-        const range = new Range2d(0, 0, 0, style.lineHeight);
+        const tabEndX = interval - lengthFromLastTab % interval;
+        const range = new Range2d(0, 0, 0, style.textHeight);
         range.extendXY(tabEndX, range.low.y);
         return range;
     }
@@ -310,9 +294,9 @@ export class RunLayout {
         this.style = props.style;
         this.fontId = props.fontId;
     }
-    static create(source, parentParagraph, context) {
-        const style = context.textStyleResolver.resolveRunSettings(parentParagraph, source);
-        const fontId = context.findFontId(style.fontName);
+    static create(source, context, cumulativeOverrides) {
+        const style = context.textStyleResolver.resolveSettings(cumulativeOverrides);
+        const fontId = context.findFontId(style.font.name, style.font.type);
         const charOffset = 0;
         const offsetFromLine = { x: 0, y: 0 };
         let numChars = 0;
@@ -338,7 +322,7 @@ export class RunLayout {
             default: { // "linebreak" or "tab"
                 // "tab": Tabs rely on the context they are in, so we compute its range later.
                 // lineBreak: We do this so that blank lines space correctly without special casing later.
-                range = new Range2d(0, 0, 0, style.lineHeight);
+                range = new Range2d(0, 0, 0, style.textHeight);
                 break;
             }
         }
@@ -380,9 +364,8 @@ export class RunLayout {
             });
         });
     }
-    toResult(paragraph) {
+    toResult() {
         const result = {
-            sourceRunIndex: paragraph.runs.indexOf(this.source),
             fontId: this.fontId,
             characterOffset: this.charOffset,
             characterCount: this.numChars,
@@ -411,60 +394,109 @@ export class RunLayout {
 export class LineLayout {
     source;
     range = new Range2d(0, 0, 0, 0);
+    runRange = new Range2d(0, 0, 0, 0); // Range of all runs excluding marker.
     justificationRange = new Range2d(0, 0, 0, 0);
-    offsetFromDocument = { x: 0, y: 0 };
+    offsetFromDocument;
+    depth;
     lengthFromLastTab = 0; // Used to track the length from the last tab for tab runs.
     _runs = [];
-    constructor(source) {
+    _marker;
+    constructor(source, style, context, depth = 0) {
         this.source = source;
+        this.depth = depth;
+        this.offsetFromDocument = { x: context?.textStyleResolver.resolveIndentation(style, depth) ?? 0, y: 0 };
     }
     /** Compute a string representation, primarily for debugging purposes. */
     stringify() {
         const runs = this._runs.map((run) => run.stringify());
         return `${runs.join("")}`;
     }
+    /** Gets the array of RunLayout objects contained in this line. */
     get runs() { return this._runs; }
+    /** Indicates whether this line contains any runs. */
     get isEmpty() { return this._runs.length === 0; }
+    /** Gets the last RunLayout in this line. */
     get back() {
         assert(!this.isEmpty);
         return this._runs[this._runs.length - 1];
     }
+    /**
+     * Gets or sets the marker RunLayout for this line, used for lists.
+     * A marker is the symbol or character that appears before each list item in a list, bullets, numbers, etc.
+     * */
+    get marker() { return this._marker; }
+    set marker(value) { this._marker = value; }
     append(run) {
         this._runs.push(run);
         this.computeRanges();
     }
     /** Invoked every time a run is appended,. */
     computeRanges() {
-        this.range.low.setZero();
-        this.range.high.setZero();
-        // Some runs (fractions) are taller than others.
-        // We want to center each run vertically inside the line.
+        this.runRange.low.setZero();
+        this.runRange.high.setZero();
+        this.lengthFromLastTab = 0;
         let lineHeight = 0;
+        let tallestNonFractionRun;
         for (const run of this._runs) {
-            lineHeight = Math.max(lineHeight, run.range.yLength());
+            const runHeight = run.range.yLength();
+            lineHeight = Math.max(lineHeight, runHeight);
+            if (run.source.type !== "fraction" && (!tallestNonFractionRun || runHeight > tallestNonFractionRun.range.yLength())) {
+                tallestNonFractionRun = run;
+            }
+        }
+        // // The baseline for the line is the bottom of the tallest non-fraction run, centered in the line.
+        let baseline = 0;
+        if (tallestNonFractionRun) {
+            baseline = (lineHeight + tallestNonFractionRun.range.yLength()) / 2;
         }
         for (const run of this._runs) {
             const runHeight = run.range.yLength();
-            const runOffset = { x: this.range.high.x, y: (lineHeight - runHeight) / 2 };
+            // Vertically align runs: normal text at baseline, fractions visually centered on text or line as appropriate.
+            let yOffset = lineHeight - baseline;
+            if (run.source.type === "fraction") {
+                const denominatorHeight = run.denominatorRange?.yLength() ?? 0;
+                if (tallestNonFractionRun && run.style.textHeight <= tallestNonFractionRun.style.textHeight) {
+                    // Shift fraction to baseline, then down by half the denominator height so it appears centered relative to any non-fraction text of the same height.
+                    yOffset = (lineHeight - baseline) - denominatorHeight / 2;
+                }
+                else {
+                    // If the fraction text height is greater than the largest non-fraction text, just center it in the line.
+                    yOffset = (lineHeight - runHeight) / 2;
+                }
+            }
+            const runOffset = { x: this.runRange.high.x, y: yOffset };
             run.offsetFromLine = runOffset;
             const runLayoutRange = run.range.cloneTranslated(runOffset);
-            this.range.extendRange(runLayoutRange);
+            this.runRange.extendRange(runLayoutRange);
             if ("linebreak" !== run.source.type) {
                 const runJustificationRange = run.justificationRange?.cloneTranslated(runOffset);
                 this.justificationRange.extendRange(runJustificationRange ?? runLayoutRange);
             }
-            if (run.source.type === "tab") {
+            if ("tab" === run.source.type) {
                 this.lengthFromLastTab = 0;
             }
             else {
                 this.lengthFromLastTab += run.range.xLength();
             }
         }
+        this.range.setFrom(this.runRange);
+        if (this._marker) {
+            const indentation = this.range.low.x;
+            const x = indentation - (this._marker.style.tabInterval / 2) - this._marker.range.xLength();
+            const runHeight = this._marker.range.yLength();
+            const runOffset = {
+                x,
+                y: (lineHeight - runHeight) / 2 // Center the marker vertically in the line.
+            };
+            this._marker.offsetFromLine = runOffset;
+            const markerRange = this._marker.range.cloneTranslated(this._marker.offsetFromLine);
+            this.range.extendRange(markerRange);
+        }
     }
-    toResult(textBlock) {
+    toResult() {
         return {
-            sourceParagraphIndex: textBlock.paragraphs.indexOf(this.source),
-            runs: this.runs.map((x) => x.toResult(this.source)),
+            runs: this.runs.map((x) => x.toResult()),
+            marker: this.marker?.toResult(),
             range: this.range.toJSON(),
             justificationRange: this.justificationRange.toJSON(),
             offsetFromDocument: this.offsetFromDocument,
@@ -493,12 +525,12 @@ export class TextBlockLayout {
             this.textRange.high.x = source.width;
         }
         this.populateLines(context);
-        this.justifyLines();
-        this.applyMargins(source.margins);
+        this.justifyLines(context);
+        this.applyMargins(context.textStyleResolver.blockSettings.margins);
     }
     toResult() {
         return {
-            lines: this.lines.map((x) => x.toResult(this.source)),
+            lines: this.lines.map((x) => x.toResult()),
             range: this.range.toJSON(),
         };
     }
@@ -512,72 +544,164 @@ export class TextBlockLayout {
     }
     populateLines(context) {
         const doc = this.source;
-        if (doc.paragraphs.length === 0) {
+        if (!doc.children || doc.children.length === 0) {
             return;
         }
-        const doWrap = doc.width > 0;
-        let curLine = new LineLayout(doc.paragraphs[0]);
-        for (let i = 0; i < doc.paragraphs.length; i++) {
-            const paragraph = doc.paragraphs[i];
-            if (i > 0) {
-                curLine = this.flushLine(context, curLine, paragraph);
-            }
-            let runs = paragraph.runs.map((run) => RunLayout.create(run, paragraph, context));
-            if (doWrap) {
-                runs = runs.map((run) => run.split(context)).flat();
-            }
-            for (const run of runs) {
-                if ("linebreak" === run.source.type) {
-                    curLine.append(run);
-                    curLine = this.flushLine(context, curLine);
-                    continue;
+        let curLine = new LineLayout(doc.children[0], doc.children[0].styleOverrides, context);
+        let childIndex = 0;
+        for (const child of doc.children) {
+            curLine = this.populateComponent(child, childIndex++, context, doc.width, curLine, doc, doc.styleOverrides);
+        }
+        if (curLine.runs.length > 0) {
+            this.flushLine(context, curLine, doc.styleOverrides);
+        }
+    }
+    populateComponent(component, componentIndex, context, docWidth, curLine, parent, cumulativeOverrides, depth = 0) {
+        cumulativeOverrides = { ...cumulativeOverrides, ...component.styleOverrides };
+        switch (component.type) {
+            case "list": {
+                // If we have any runs in the current line, flush it before starting the list.
+                if (curLine.runs.length > 0) {
+                    curLine = this.flushLine(context, curLine, cumulativeOverrides, component.children[0], true, depth + 1);
+                }
+                else {
+                    // If not, we need to apply the indentation for the list to the first line.
+                    curLine.offsetFromDocument.x = context.textStyleResolver.resolveIndentation(cumulativeOverrides, depth + 1);
+                    curLine.depth = depth + 1;
                 }
-                // If this is a tab, we need to apply the tab shift first, and then we can treat it like a text run.
-                applyTabShift(run, curLine, context);
-                // If our width is not set (doWrap is false), then we don't have to compute word wrapping, so just append the run, and continue.
-                if (!doWrap) {
-                    curLine.append(run);
-                    continue;
+                // Iterate through each list item, setting the marker and populating its contents.
+                component.children.forEach((child, index) => {
+                    const markerContent = context.textStyleResolver.resolveMarkerText(cumulativeOverrides, index + 1);
+                    const markerRun = TextRun.create({ content: markerContent });
+                    curLine.marker = RunLayout.create(markerRun, context, cumulativeOverrides);
+                    curLine = this.populateComponent(child, index, context, docWidth, curLine, component, cumulativeOverrides, depth + 1);
+                });
+                // Lastly flush the line.
+                const nextSibling = parent?.children[componentIndex + 1];
+                if (curLine && nextSibling) {
+                    curLine = this.flushLine(context, curLine, cumulativeOverrides, nextSibling, true, depth);
                 }
-                // Next, determine if we can append this run to the current line without exceeding the document width
-                const runWidth = run.range.xLength();
-                const lineWidth = curLine.range.xLength();
-                // If true, then no word wrapping is required, so we can append to the current line.
-                if (runWidth + lineWidth < doc.width || Geometry.isAlmostEqualNumber(runWidth + lineWidth, doc.width, Geometry.smallMetricDistance)) {
-                    curLine.append(run);
-                    continue;
+                break;
+            }
+            case "paragraph": {
+                // Iterate through each paragraph child (either a list or a run), populating its contents.
+                component.children.forEach((child, index) => {
+                    curLine = this.populateComponent(child, index, context, docWidth, curLine, component, cumulativeOverrides, depth);
+                });
+                // Lastly flush the line.
+                const nextSibling = parent?.children[componentIndex + 1];
+                if (curLine && nextSibling) {
+                    curLine = this.flushLine(context, curLine, cumulativeOverrides, nextSibling, true, depth);
                 }
-                // Do word wrapping
-                if (curLine.runs.length === 0) {
-                    curLine.append(run);
-                    // Lastly, flush line
-                    curLine = this.flushLine(context, curLine);
+                break;
+            }
+            case "text": {
+                const layout = RunLayout.create(component, context, cumulativeOverrides);
+                // Text can be word-wrapped, so we need to split it into multiple runs if necessary.
+                if (docWidth > 0) {
+                    layout.split(context).forEach(r => { curLine = this.populateRun(curLine, r, context, cumulativeOverrides, docWidth); });
                 }
                 else {
-                    // First, flush line
-                    curLine = this.flushLine(context, curLine);
-                    // Recompute tab shift if applicable
-                    applyTabShift(run, curLine, context);
-                    curLine.append(run);
+                    curLine = this.populateRun(curLine, layout, context, cumulativeOverrides, docWidth);
                 }
+                break;
+            }
+            case "fraction":
+            case "tab": {
+                const layout = RunLayout.create(component, context, cumulativeOverrides);
+                curLine = this.populateRun(curLine, layout, context, cumulativeOverrides, docWidth);
+                break;
             }
+            case "linebreak": {
+                const layout = RunLayout.create(component, context, cumulativeOverrides);
+                curLine.append(layout);
+                curLine = this.flushLine(context, curLine, cumulativeOverrides, undefined, undefined, depth);
+                break;
+            }
+            default: break;
         }
-        if (curLine.runs.length > 0) {
-            this.flushLine(context, curLine);
+        return curLine;
+    }
+    ;
+    populateRun(curLine, run, context, cumulativeOverrides, docWidth) {
+        // If this is a tab, we need to apply the tab shift first, and then we can treat it like a text run.
+        applyTabShift(run, curLine, context);
+        // If our width is not set, then we don't have to compute word wrapping, so just append the run, and continue.
+        if (docWidth <= 0) {
+            curLine.append(run);
+            return curLine;
+        }
+        // If not, we need to determine if we can append this run to the current line without exceeding the document width or if we need to word wrap.
+        const runWidth = run.justificationRange?.xLength() ?? run.range.xLength();
+        const lineWidth = curLine.runRange.xLength();
+        const newWidth = runWidth + lineWidth + curLine.offsetFromDocument.x;
+        // If true, then no word wrapping is required, so we can append to the current line.
+        if (newWidth < docWidth || Geometry.isAlmostEqualNumber(newWidth, docWidth, Geometry.smallMetricDistance)) {
+            curLine.append(run);
+            return curLine;
+        }
+        // If not, do word wrapping
+        if (curLine.runs.length === 0) {
+            curLine.append(run);
+            // Lastly, flush line
+            curLine = this.flushLine(context, curLine, cumulativeOverrides, undefined, undefined, curLine.depth);
+        }
+        else {
+            // First, flush line
+            curLine = this.flushLine(context, curLine, cumulativeOverrides, undefined, undefined, curLine.depth);
+            // Recompute tab shift if applicable
+            applyTabShift(run, curLine, context);
+            curLine.append(run);
+        }
+        return curLine;
+    }
+    ;
+    flushLine(context, curLine, cumulativeOverrides, next, newParagraph = false, depth = 0) {
+        next = next ?? curLine.source;
+        // We want to guarantee that each layout line has at least one run.
+        if (curLine.runs.length === 0) {
+            if (this.lines.length === 0 || this._back.runs.length === 0) {
+                return new LineLayout(next, cumulativeOverrides, context, depth);
+            }
+            if (curLine.source.type !== "linebreak") {
+                const newLine = new LineLayout(next, cumulativeOverrides, context, depth);
+                newLine.offsetFromDocument.y -= context.textStyleResolver.blockSettings.paragraphSpacingFactor * context.textStyleResolver.blockSettings.textHeight;
+                return newLine;
+            }
+            const run = curLine.source.clone();
+            curLine.append(RunLayout.create(run, context, cumulativeOverrides));
+        }
+        // Line origin is its baseline.
+        const lineOffset = { ...curLine.offsetFromDocument }; // Start with the line's original offset, which includes indentation.
+        lineOffset.y -= curLine.range.yLength(); // Shift down the baseline
+        // Place it below any existing lines
+        if (this.lines.length > 0) {
+            lineOffset.y += this._back.offsetFromDocument.y;
+            lineOffset.y -= context.textStyleResolver.blockSettings.lineSpacingFactor * context.textStyleResolver.blockSettings.textHeight;
+        }
+        curLine.offsetFromDocument = lineOffset;
+        // Update document range from computed line range and position
+        this.textRange.extendRange(curLine.range.cloneTranslated(lineOffset));
+        this.lines.push(curLine);
+        if (newParagraph) {
+            const newLine = new LineLayout(next, cumulativeOverrides, context, depth);
+            newLine.offsetFromDocument.y -= context.textStyleResolver.blockSettings.paragraphSpacingFactor * context.textStyleResolver.blockSettings.textHeight;
+            return newLine;
         }
+        return new LineLayout(next, cumulativeOverrides, context, depth);
     }
-    justifyLines() {
+    justifyLines(context) {
         // We don't want to justify empty text, or a single line of text whose width is 0. By default text is already left justified.
-        if (this.lines.length < 1 || (this.lines.length === 1 && this.source.width === 0) || "left" === this.source.justification) {
+        if (this.lines.length < 1 || (this.lines.length === 1 && this.source.width === 0) || "left" === context.textStyleResolver.blockSettings.justification) {
             return;
         }
         // This is the minimum width of the document's bounding box.
         const docWidth = this.source.width;
         let minOffset = Number.MAX_VALUE;
         for (const line of this.lines) {
-            const lineWidth = line.justificationRange.xLength();
+            const lineWidth = line.justificationRange.xLength() + line.offsetFromDocument.x;
             let offset = docWidth - lineWidth;
-            if ("center" === this.source.justification) {
+            if ("center" === context.textStyleResolver.blockSettings.justification) {
                 offset = offset / 2;
             }
             line.offsetFromDocument.x += offset;
@@ -589,34 +713,6 @@ export class TextBlockLayout {
             this.textRange.high.x += minOffset;
         }
     }
-    flushLine(context, line, nextParagraph) {
-        nextParagraph = nextParagraph ?? line.source;
-        // We want to guarantee that each layout line has at least one run.
-        if (line.runs.length === 0) {
-            // If we're empty, there should always be a preceding run, and it should be a line break.
-            if (this.lines.length === 0 || this._back.runs.length === 0) {
-                return new LineLayout(nextParagraph);
-            }
-            const prevRun = this._back.back.source;
-            assert(prevRun.type === "linebreak");
-            if (prevRun.type !== "linebreak") {
-                return new LineLayout(nextParagraph);
-            }
-            line.append(RunLayout.create(prevRun.clone(), line.source, context));
-        }
-        // Line origin is its baseline.
-        const lineOffset = { x: 0, y: -line.range.yLength() };
-        // Place it below any existing lines
-        if (this.lines.length > 0) {
-            lineOffset.y += this._back.offsetFromDocument.y;
-            lineOffset.y -= context.textStyleResolver.blockSettings.lineSpacingFactor * context.textStyleResolver.blockSettings.lineHeight;
-        }
-        line.offsetFromDocument = lineOffset;
-        // Update document range from computed line range and position
-        this.textRange.extendRange(line.range.cloneTranslated(lineOffset));
-        this.lines.push(line);
-        return new LineLayout(nextParagraph);
-    }
     applyMargins(margins) {
         this.range = this.textRange.clone();
         if (this.range.isNull)