@itwin/core-backend 5.2.0-dev.31 → 5.2.0-dev.33

package/lib/esm/annotations/TextBlockLayout.js

@@ -5,7 +5,7 @@
 /** @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";
@@ -53,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);
@@ -121,29 +120,27 @@ export class TextStyleResolver {
         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;
-    }
-    /** 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 {
@@ -233,9 +230,9 @@ 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 tabEndX = interval - lengthFromLastTab % interval;
         const range = new Range2d(0, 0, 0, style.lineHeight);
         range.extendXY(tabEndX, range.low.y);
         return range;
@@ -291,8 +288,8 @@ export class RunLayout {
         this.style = props.style;
         this.fontId = props.fontId;
     }
-    static create(source, parentParagraph, context) {
-        const style = context.textStyleResolver.resolveRunSettings(parentParagraph, source);
+    static create(source, context, cumulativeOverrides) {
+        const style = context.textStyleResolver.resolveSettings(cumulativeOverrides);
         const fontId = context.findFontId(style.fontName);
         const charOffset = 0;
         const offsetFromLine = { x: 0, y: 0 };
@@ -361,9 +358,8 @@ export class RunLayout {
             });
         });
     }
-    toResult(paragraph) {
+    toResult() {
         const result = {
-            sourceRunIndex: paragraph.runs.indexOf(this.source),
             fontId: this.fontId,
             characterOffset: this.charOffset,
             characterCount: this.numChars,
@@ -392,32 +388,47 @@ 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();
+        this.runRange.low.setZero();
+        this.runRange.high.setZero();
+        this.lengthFromLastTab = 0;
         // Some runs (fractions) are taller than others.
         // We want to center each run vertically inside the line.
         let lineHeight = 0;
@@ -426,26 +437,39 @@ export class LineLayout {
         }
         for (const run of this._runs) {
             const runHeight = run.range.yLength();
-            const runOffset = { x: this.range.high.x, y: (lineHeight - runHeight) / 2 };
+            const runOffset = { x: this.runRange.high.x, y: (lineHeight - runHeight) / 2 };
             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,
@@ -479,7 +503,7 @@ export class TextBlockLayout {
     }
     toResult() {
         return {
-            lines: this.lines.map((x) => x.toResult(this.source)),
+            lines: this.lines.map((x) => x.toResult()),
             range: this.range.toJSON(),
         };
     }
@@ -493,59 +517,151 @@ 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);
                 }
-                // 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;
+                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;
                 }
-                // 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;
+                // 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);
                 }
-                // Do word wrapping
-                if (curLine.runs.length === 0) {
-                    curLine.append(run);
-                    // Lastly, flush line
-                    curLine = this.flushLine(context, curLine);
+                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);
+                }
+                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.lineHeight;
+                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.lineHeight;
+        }
+        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.lineHeight;
+            return newLine;
+        }
+        return new LineLayout(next, cumulativeOverrides, context, depth);
     }
     justifyLines() {
         // 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.
@@ -556,7 +672,7 @@ export class TextBlockLayout {
         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) {
                 offset = offset / 2;
@@ -570,34 +686,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)