@stll/folio-core 0.45.0 → 0.47.0

package/dist/display-list/build/paragraphPrimitives.js

@@ -6,17 +6,17 @@ import { countCompressibleSpaces, toPaintedText } from "../../layout-engine/meas
 import { isFloatingImageRun } from "../../layout-engine/types.js";
 import { resolveParagraphBorderHorizontalOutsets } from "../../layout-painter/borderStroke.js";
 import { getAutomaticTextColorForBackground } from "../../layout-painter/documentColors.js";
-import { getLeaderChar, getRenderableTextColor, sliceRunsForLine, splitCollapsibleLineEdgeSpaces, splitTextRunsByEastAsia, startsAfterSoftWrap } from "../../layout-painter/renderParagraph.js";
+import { UNICODE_BIDI_BY_WRAPPER_CONTROL, getLeaderChar, getRenderableTextColor, paragraphHasTrackedChanges, sliceRunsForLine, splitCollapsibleLineEdgeSpaces, splitTextRunsByEastAsia, startsAfterSoftWrap } from "../../layout-painter/renderParagraph.js";
 import { getHorizontalScaleFactor } from "../../utils/horizontalScale.js";
 import { resolvePhysicalParagraphInlineLayout } from "../../utils/paragraphInlineLayout.js";
 import { inlineImageBoundingBox } from "../../utils/rotationBoundingBox.js";
 import { sanitizeExternalUrl } from "../../utils/urlSecurity.js";
-import { HIT_REGION_KINDS } from "../primitives.js";
+import { HIT_REGION_KINDS, strokeCrossExtentPx } from "../primitives.js";
 import { trackedChangeColor } from "./buildContext.js";
 import { DOC_CANVAS_TEXT, parseDisplayColor } from "./colors.js";
 import { buildGlyphs, glyphRunText } from "./glyphs.js";
 import { paintImage } from "./imagePrimitives.js";
-import { decorationPatternForStyle, resolveBorderStroke } from "./strokes.js";
+import { resolveBorderStroke, underlinePattern, underlineStrokeCount, underlineWeight } from "./strokes.js";
 import { strikethroughCenterYPx, underlineCenterYPx, underlineThicknessPx } from "./textDecorations.js";
 import { UNSUPPORTED_CONSTRUCT } from "./unsupported.js";
 //#region src/display-list/build/paragraphPrimitives.ts
@@ -66,6 +66,14 @@ const SUBSCRIPT_DROP_RATIO = .2;
 const WIDTH_EPSILON_PX = .5;
 /** `w:pBdr` bar borders hang this far left of the text (`renderParagraph.ts:3072`). */
 const BAR_BORDER_OFFSET_PX = 8;
+/** Word's review indicator sits in the page margin outside the paragraph. */
+const REVIEW_BAR_OFFSET_PX = 24;
+const REVIEW_BAR_COLOR = {
+	r: 0,
+	g: 0,
+	b: 0,
+	a: 1
+};
 const AUTOMATIC_TEXT_COLOR_VALUES = /* @__PURE__ */ new Set(["auto", "windowtext"]);
 /** `w:color w:val="auto"` and its `windowtext` spelling, normalized as the painter normalizes them. */
 const isAutomaticTextColor = (color) => AUTOMATIC_TEXT_COLOR_VALUES.has(color.trim().toLowerCase().replace(/^#/u, ""));
@@ -151,6 +159,18 @@ const paintParagraphChrome = ({ fragment, block, context, prevBorders, nextBorde
 		});
 		else context.unsupported.report(UNSUPPORTED_CONSTRUCT.unresolvedColor, context.pageIndex, `paragraph shading ${shading}`);
 	}
+	if (paragraphHasTrackedChanges(block)) primitives.push({
+		kind: "line",
+		x1Px: fragment.x - REVIEW_BAR_OFFSET_PX,
+		y1Px: fragment.y,
+		x2Px: fragment.x - REVIEW_BAR_OFFSET_PX,
+		y2Px: fragment.y + fragment.height,
+		stroke: {
+			color: REVIEW_BAR_COLOR,
+			thicknessPx: 2,
+			pattern: "solid"
+		}
+	});
 	const borders = block.attrs?.borders;
 	if (!borders) return primitives;
 	const topBorder = bordersFormGroup(prevBorders, borders) ? borders.between : borders.top;
@@ -278,6 +298,23 @@ const modelRangeOf = (run, context) => run.pmStart === void 0 || run.pmEnd === v
 	story: context.story
 };
 /**
+* The base direction one run's glyphs are laid out in.
+*
+* A bidirectional wrapper the author wrote around the run states it, and is
+* nearer than the paragraph's own base direction: an override (`w:bdo`) lays
+* every character out that way, and an embedding (`w:dir`) opens a level in
+* that direction. A wrapper with no `w:val` states nothing, and the paragraph
+* decides as before.
+*/
+const runGlyphDirection = (run, paragraphIsRtl) => run.bidiWrapper?.direction ?? (paragraphIsRtl ? "rtl" : "ltr");
+/**
+* The wrapper's control, for the backend that resolves the order itself.
+*
+* The direction alone does not separate the two: an override forces the
+* order, an embedding leaves the algorithm to resolve within it.
+*/
+const runUnicodeBidi = (run) => run.bidiWrapper === void 0 ? void 0 : UNICODE_BIDI_BY_WRAPPER_CONTROL[run.bidiWrapper.control];
+/**
 * One `glyphRun` plus everything painted around it: the run's background rect
 * first, then the glyphs, then the decorations whose geometry CSS would have
 * derived from the font.
@@ -342,6 +379,7 @@ const emitGlyphRun = ({ sink, context, run, glyphs, style, paintXPx, baselineYPx
 		thicknessPx: 1,
 		pattern: "solid"
 	} : void 0;
+	const unicodeBidi = runUnicodeBidi(run);
 	sink.glyphs.push({
 		kind: "glyphRun",
 		font,
@@ -350,7 +388,8 @@ const emitGlyphRun = ({ sink, context, run, glyphs, style, paintXPx, baselineYPx
 		xPx: paintXPx,
 		baselineYPx: runBaselineYPx,
 		...glyphRunText(glyphs),
-		direction: isRtl ? "rtl" : "ltr",
+		direction: runGlyphDirection(run, isRtl),
+		...unicodeBidi === void 0 ? {} : { unicodeBidi },
 		...stroke === void 0 ? {} : { stroke },
 		...pmRange === void 0 ? {} : { pmRange },
 		...collapsedEdge === void 0 ? {} : { collapsedEdge }
@@ -361,7 +400,7 @@ const emitGlyphRun = ({ sink, context, run, glyphs, style, paintXPx, baselineYPx
 		color,
 		context,
 		xPx: paintXPx,
-		widthPx: glyphs.widthPx,
+		glyphs,
 		baselineYPx: runBaselineYPx,
 		fontSizePx
 	});
@@ -380,23 +419,83 @@ const emitGlyphRun = ({ sink, context, run, glyphs, style, paintXPx, baselineYPx
 	}
 	reportRunEffects(run, context);
 };
-const emitDecorations = ({ sink, run, color, context, xPx, widthPx, baselineYPx, fontSizePx }) => {
+/**
+* The ordinary space, the only character `words` breaks an underline at.
+*
+* It is the same character justification stretches (`countCompressibleSpaces`):
+* a no-break space holds two words together, so Word underlines through it.
+*/
+const WORD_SEPARATOR = " ";
+/**
+* Where an underline is drawn under a run: the whole run, or one span per word.
+*
+* Word's `words` member underlines the words and not the gaps between them.
+* CSS cannot express that, so the editor underlines the run whole
+* (`text-decoration-skip-ink` skips descender ink, and
+* `text-decoration-skip: spaces` never shipped). A display list carries one
+* advance per code point, so here the member is exact rather than approximated.
+*/
+const underlineSpans = (glyphs, xPx, perWord) => {
+	if (!perWord) return [{
+		xPx,
+		widthPx: glyphs.widthPx
+	}];
+	const spans = [];
+	let cursorPx = xPx;
+	let wordStartPx;
+	let index = 0;
+	const pushWord = (endPx) => {
+		if (wordStartPx !== void 0 && endPx > wordStartPx) spans.push({
+			xPx: wordStartPx,
+			widthPx: endPx - wordStartPx
+		});
+		wordStartPx = void 0;
+	};
+	for (const char of glyphs.text) {
+		const advancePx = glyphs.advancesPx[index] ?? 0;
+		index += 1;
+		if (char === WORD_SEPARATOR) pushWord(cursorPx);
+		else if (wordStartPx === void 0) wordStartPx = cursorPx;
+		cursorPx += advancePx;
+	}
+	pushWord(cursorPx);
+	return spans;
+};
+/**
+* Where each stroke of a stacked decoration sits, relative to the path.
+*
+* One stroke sits on the path. Two are pushed apart by the band each occupies
+* plus the gap a `double` stroke leaves between its rules, so `wavyDouble`'s
+* waves clear each other by the same margin and stay centred on the underline.
+*/
+const stackedStrokeOffsetsPx = (stroke, count) => {
+	if (count < 2) return [0];
+	const separationPx = strokeCrossExtentPx(stroke) + 1 * stroke.thicknessPx;
+	return Array.from({ length: count }, (_, index) => (index - (count - 1) / 2) * separationPx);
+};
+const emitDecorations = ({ sink, run, color, context, xPx, glyphs, baselineYPx, fontSizePx }) => {
+	const { widthPx } = glyphs;
 	if (widthPx <= 0) return;
-	const thicknessPx = underlineThicknessPx(fontSizePx);
+	const plainThicknessPx = underlineThicknessPx(fontSizePx);
 	const trackedColor = run.isInsertion || run.isDeletion ? trackedChangeColor(context.authorColors, run.changeAuthor, run.isSuggestion) : void 0;
 	if (Boolean(run.underline) && !isNoteReferenceRun(run) || run.isInsertion) {
 		const authored = typeof run.underline === "object" ? run.underline : void 0;
 		const authoredColor = authored?.color === void 0 ? void 0 : parseDisplayColor(authored.color);
-		const pattern = run.isSuggestion ? "dotted" : decorationPatternForStyle(authored?.style);
-		sink.decorations.push(horizontalLine(xPx, widthPx, underlineCenterYPx(baselineYPx, fontSizePx), {
-			color: trackedColor ?? authoredColor ?? color,
-			thicknessPx,
-			pattern
-		}));
+		const style = run.isSuggestion ? void 0 : authored?.style;
+		const pattern = run.isSuggestion ? "dotted" : underlinePattern(style);
+		if (pattern !== "none") {
+			const stroke = {
+				color: trackedColor ?? authoredColor ?? color,
+				thicknessPx: plainThicknessPx * underlineWeight(style),
+				pattern
+			};
+			const centerYPx = underlineCenterYPx(baselineYPx, fontSizePx);
+			for (const span of underlineSpans(glyphs, xPx, style === "words")) for (const offsetPx of stackedStrokeOffsetsPx(stroke, underlineStrokeCount(style))) sink.decorations.push(horizontalLine(span.xPx, span.widthPx, centerYPx + offsetPx, stroke));
+		}
 	}
 	if (run.strike || run.isDeletion) sink.decorations.push(horizontalLine(xPx, widthPx, strikethroughCenterYPx(baselineYPx, fontSizePx), {
 		color: trackedColor ?? color,
-		thicknessPx,
+		thicknessPx: plainThicknessPx,
 		pattern: run.isSuggestion ? "dotted" : "solid"
 	}));
 };

package/dist/display-list/build/previewPrimitives.d.ts

@@ -0,0 +1,10 @@
+import { document_d_exports } from "../../types/document.js";
+import { DisplayPrimitive, DisplayRect } from "../types.js";
+//#region src/display-list/build/previewPrimitives.d.ts
+/**
+ * The marks a descriptor makes inside `box`, back to front: the backdrop, then
+ * each shape in the order the drawing lists them.
+ */
+declare const paintPreview: (descriptor: document_d_exports.PreviewDescriptor, box: DisplayRect) => readonly DisplayPrimitive[];
+//#endregion
+export { paintPreview };

package/dist/display-list/build/previewPrimitives.js

@@ -0,0 +1,89 @@
+import { parseDisplayColor } from "./colors.js";
+import { panic } from "better-result";
+//#region src/display-list/build/previewPrimitives.ts
+/**
+* The primitives a preview descriptor draws.
+*
+* A drawing with no image data used to be given one: a megapixel PNG built the
+* moment something was about to paint it, which the DOM backend showed as an
+* `<img>` and the PDF exporter embedded as a bitmap — a photograph of a
+* drawing that is nothing but flat rectangles.
+*
+* The descriptor already holds those rectangles, in the drawing's own
+* coordinate space, and `rect` is a primitive both backends draw natively. So
+* the preview is drawn rather than sampled: the extent maps affinely onto the
+* image's box, every shape becomes a filled rectangle inside it, and no raster
+* exists at any point. The DOM backend paints each one as the absolutely
+* positioned div it paints every other `rect` as, and the PDF backend emits
+* `re`/`f` operators, so the drawing stays a drawing at any zoom.
+*/
+/** The flat backdrop a preview is drawn on, behind every shape. */
+const PREVIEW_BACKGROUND = {
+	r: 238,
+	g: 242,
+	b: 247,
+	a: 1
+};
+/** A shape whose `a:srgbClr` was missing or is not a colour. */
+const PREVIEW_SHAPE_FILL = {
+	r: 232,
+	g: 238,
+	b: 247,
+	a: 1
+};
+const clampFraction = (value) => Math.min(1, Math.max(0, value));
+/**
+* One shape's box, as the fraction of the extent it covers applied to the
+* image's box. `undefined` for a shape the box keeps nothing of, which is the
+* clip the raster did by clamping to its own bounds.
+*/
+const shapeRect = ({ shape, extent, box }) => {
+	const left = clampFraction(shape.x / extent.width);
+	const right = clampFraction((shape.x + shape.width) / extent.width);
+	const top = clampFraction(shape.y / extent.height);
+	const bottom = clampFraction((shape.y + shape.height) / extent.height);
+	if (right <= left || bottom <= top) return;
+	return {
+		xPx: box.xPx + left * box.widthPx,
+		yPx: box.yPx + top * box.heightPx,
+		widthPx: (right - left) * box.widthPx,
+		heightPx: (bottom - top) * box.heightPx
+	};
+};
+/**
+* The marks a descriptor makes inside `box`, back to front: the backdrop, then
+* each shape in the order the drawing lists them.
+*/
+const paintPreview = (descriptor, box) => {
+	switch (descriptor.kind) {
+		case "diagram": {
+			const primitives = [{
+				kind: "rect",
+				rect: box,
+				fill: PREVIEW_BACKGROUND
+			}];
+			const { extent } = descriptor;
+			if (!(extent.width > 0 && extent.height > 0)) return primitives;
+			for (const shape of descriptor.shapes) {
+				const rect = shapeRect({
+					shape,
+					extent,
+					box
+				});
+				if (rect === void 0) continue;
+				primitives.push({
+					kind: "rect",
+					rect,
+					fill: parseDisplayColor(shape.color) ?? PREVIEW_SHAPE_FILL
+				});
+			}
+			return primitives;
+		}
+		default: {
+			const unreachable = descriptor.kind;
+			return panic(`unhandled preview kind: ${String(unreachable)}`);
+		}
+	}
+};
+//#endregion
+export { paintPreview };

package/dist/display-list/build/strokes.d.ts

@@ -1,19 +1,188 @@
-import { BorderStyle } from "../../layout-engine/types.js";
+import { CssBorderStyle } from "../../utils/borderCss.js";
 import { DisplayStroke, DisplayStrokePattern } from "../types.js";
+import { PresetLineDashVal, UnderlineStyle } from "@stll/docx-core/model";
 //#region src/display-list/build/strokes.d.ts
-type BorderInput = Pick<BorderStyle, "color" | "style" | "width">;
+/** A pattern, or the absence of a line: an edge that paints nothing. */
+type StrokePattern = DisplayStrokePattern | "none";
+type BorderInput = {
+  color?: string | undefined;
+  style?: CssBorderStyle | undefined;
+  width?: number | undefined;
+};
+/**
+ * Every CSS `border-style` folio paints, as a display-list pattern.
+ *
+ * The bevelled keywords have no display-list pattern, and Word draws
+ * `threeDEmboss`/`threeDEngrave` as a plain line where the shading is
+ * unavailable, so they stroke solid.
+ */
+declare const CSS_BORDER_STROKE_PATTERNS: {
+  readonly none: "none";
+  readonly solid: "solid";
+  readonly double: "double";
+  readonly dotted: "dotted";
+  readonly dashed: "dashed";
+  readonly groove: "solid";
+  readonly ridge: "solid";
+  readonly inset: "solid";
+  readonly outset: "solid";
+};
+/**
+ * Every `ST_PresetLineDashVal` member, as a display-list pattern.
+ *
+ * DrawingML distinguishes dash length (`lgDash`) and the system patterns
+ * (`sysDash`) from the plain ones; a display list has three periodic patterns,
+ * so the distinction collapses to dotted or dashed. It collapses here, once,
+ * rather than at whichever consumer happened to know the spelling.
+ */
+declare const PRESET_DASH_STROKE_PATTERNS: {
+  readonly solid: "solid";
+  readonly dot: "dotted";
+  readonly dash: "dashed";
+  readonly lgDash: "dashed";
+  readonly dashDot: "dashed";
+  readonly lgDashDot: "dashed";
+  readonly lgDashDotDot: "dashed";
+  readonly sysDash: "dashed";
+  readonly sysDot: "dotted";
+  readonly sysDashDot: "dashed";
+  readonly sysDashDotDot: "dashed";
+};
+/**
+ * Every `ST_Underline` member the model carries, one row per member.
+ *
+ * The three fields are one decision and belong on one line: `wavyDouble` is
+ * Word's two waves, which is the `wavy` pattern drawn twice rather than the
+ * `double` pattern, so a reader who has the pattern without the count has half
+ * the member. `double` is one stroke, because the display list's `double`
+ * pattern already carries the second rule and the gap between them. CSS can
+ * draw neither two waves nor `words`, so the editor approximates them; the page
+ * and the PDF do not have to.
+ *
+ * Word draws `thick` and the seven `*Heavy` members at twice the rule the font
+ * asks for, and the rest at the plain rule. Without the weight the display list
+ * strokes every member at the plain thickness, so `dottedHeavy` and `dotted`
+ * come out as the same line on the page and in the PDF while the editor draws
+ * them apart. The DOM spells this same weight as a
+ * `text-decoration-thickness` length (`utils/formatToStyle.ts`), so which
+ * members are heavy is decided here and nowhere else.
+ *
+ * `none` states no decoration: a run whose underline says so paints nothing,
+ * and its weight and stroke count are the plain ones by default rather than by
+ * decision.
+ */
+declare const UNDERLINE_STROKES: {
+  readonly none: {
+    readonly pattern: "none";
+    readonly weight: 1;
+    readonly strokes: 1;
+  };
+  readonly single: {
+    readonly pattern: "solid";
+    readonly weight: 1;
+    readonly strokes: 1;
+  };
+  readonly words: {
+    readonly pattern: "solid";
+    readonly weight: 1;
+    readonly strokes: 1;
+  };
+  readonly double: {
+    readonly pattern: "double";
+    readonly weight: 1;
+    readonly strokes: 1;
+  };
+  readonly thick: {
+    readonly pattern: "solid";
+    readonly weight: 2;
+    readonly strokes: 1;
+  };
+  readonly dotted: {
+    readonly pattern: "dotted";
+    readonly weight: 1;
+    readonly strokes: 1;
+  };
+  readonly dottedHeavy: {
+    readonly pattern: "dotted";
+    readonly weight: 2;
+    readonly strokes: 1;
+  };
+  readonly dash: {
+    readonly pattern: "dashed";
+    readonly weight: 1;
+    readonly strokes: 1;
+  };
+  readonly dashedHeavy: {
+    readonly pattern: "dashed";
+    readonly weight: 2;
+    readonly strokes: 1;
+  };
+  readonly dashLong: {
+    readonly pattern: "dashed";
+    readonly weight: 1;
+    readonly strokes: 1;
+  };
+  readonly dashLongHeavy: {
+    readonly pattern: "dashed";
+    readonly weight: 2;
+    readonly strokes: 1;
+  };
+  readonly dotDash: {
+    readonly pattern: "dashed";
+    readonly weight: 1;
+    readonly strokes: 1;
+  };
+  readonly dashDotHeavy: {
+    readonly pattern: "dashed";
+    readonly weight: 2;
+    readonly strokes: 1;
+  };
+  readonly dotDotDash: {
+    readonly pattern: "dashed";
+    readonly weight: 1;
+    readonly strokes: 1;
+  };
+  readonly dashDotDotHeavy: {
+    readonly pattern: "dashed";
+    readonly weight: 2;
+    readonly strokes: 1;
+  };
+  readonly wave: {
+    readonly pattern: "wavy";
+    readonly weight: 1;
+    readonly strokes: 1;
+  };
+  readonly wavyHeavy: {
+    readonly pattern: "wavy";
+    readonly weight: 2;
+    readonly strokes: 1;
+  };
+  readonly wavyDouble: {
+    readonly pattern: "wavy";
+    readonly weight: 1;
+    readonly strokes: 2;
+  };
+};
 type ResolveStrokeResult = {
   readonly stroke?: DisplayStroke;
   /** The authored colour, when it could not be parsed. Report it, do not paint. */
   readonly unresolvedColor?: string;
 };
 /**
- * Turn an authored border into a paintable stroke. `undefined` stroke means
- * "draw nothing": an explicit `none`/`nil` style, a non-positive width, or a
- * colour this producer cannot resolve.
+ * Turn an authored CSS border into a paintable stroke. `undefined` stroke means
+ * "draw nothing": an explicit `none` style, a non-positive width, or a colour
+ * this producer cannot resolve.
  */
 declare const resolveBorderStroke: (border: BorderInput) => ResolveStrokeResult;
-/** CSS `text-decoration-style` → the display list's stroke patterns. */
-declare const decorationPatternForStyle: (style: string | undefined) => DisplayStrokePattern;
+type OutlineInput = {
+  color?: string;
+  dash?: PresetLineDashVal;
+  width?: number;
+};
+/** Turn a shape or text-box outline into a paintable stroke. */
+declare const resolveOutlineStroke: (outline: OutlineInput) => ResolveStrokeResult;
+declare const underlinePattern: (style: UnderlineStyle | undefined) => StrokePattern;
+declare const underlineWeight: (style: UnderlineStyle | undefined) => number;
+declare const underlineStrokeCount: (style: UnderlineStyle | undefined) => number;
 //#endregion
-export { ResolveStrokeResult, decorationPatternForStyle, resolveBorderStroke };
+export { CSS_BORDER_STROKE_PATTERNS, PRESET_DASH_STROKE_PATTERNS, ResolveStrokeResult, UNDERLINE_STROKES, resolveBorderStroke, resolveOutlineStroke, underlinePattern, underlineStrokeCount, underlineWeight };