@stll/folio-core 0.8.0 → 0.9.0

package/dist/layout-painter/renderPage.js

@@ -1,12 +1,13 @@
 import { eighthsToPixels, pointsToPixels } from "../utils/units.js";
 import { resolveFontFamily } from "../utils/fontResolver.js";
+import { borderToStyle } from "../utils/formatToStyle.js";
 import { floatingTextBoxReservesBand, floatingTextBoxWrapsText, isFloatingImageRun, isFloatingTextBoxBlock, isTextWrappingFloatingImageRun } from "../layout-engine/types.js";
 import { rectsToFloatingZones } from "../layout-engine/measure/floatingZones.js";
 import { measureParagraph } from "../layout-engine/measure/measureParagraph.js";
-import { borderToStyle } from "../utils/formatToStyle.js";
+import { emuToPixels } from "./renderUtils.js";
+import { resolveAnchoredImagePosition as resolveAnchoredImagePosition$1 } from "./anchoredImagePosition.js";
 import { renderFragment } from "./renderFragment.js";
 import { applyImageVisualAttrs, hasImageVisualAttrs, renderImageFragment } from "./renderImage.js";
-import { emuToPixels } from "./renderUtils.js";
 import { renderParagraphFragment } from "./renderParagraph.js";
 import { renderTextBoxFragment } from "./renderTextBox.js";
 import { renderTableFragment } from "./renderTable.js";
@@ -33,6 +34,7 @@ const PAGE_CLASS_NAMES = {
 	header: "layout-page-header",
 	footer: "layout-page-footer"
 };
+const HEADER_FOOTER_RULE_CLIP_MARGIN = pointsToPixels(1.5);
 const getDefaultPageFontFamily = () => resolveFontFamily("Calibri").cssFallback;
 /**
 * Apply page styles to an element
@@ -271,57 +273,6 @@ function applyFragmentStyles(element, fragment, margins) {
 	element.style.width = `${fragment.width}px`;
 	if ("height" in fragment) element.style.height = `${fragment.height}px`;
 }
-function resolveHorizontalBand(relativeTo, geometry) {
-	switch (relativeTo) {
-		case "page": return {
-			baseX: -geometry.marginLeft,
-			bandWidth: geometry.pageWidth
-		};
-		case "leftMargin":
-		case "insideMargin": return {
-			baseX: -geometry.marginLeft,
-			bandWidth: geometry.marginLeft
-		};
-		case "rightMargin":
-		case "outsideMargin": return {
-			baseX: geometry.contentWidth,
-			bandWidth: geometry.marginRight
-		};
-		case "character": return {
-			baseX: 0,
-			bandWidth: 0
-		};
-		default: return {
-			baseX: 0,
-			bandWidth: geometry.contentWidth
-		};
-	}
-}
-function resolveVerticalBand(relativeTo, fragmentY, geometry) {
-	switch (relativeTo) {
-		case "page": return {
-			baseY: -geometry.marginTop,
-			bandHeight: geometry.pageHeight
-		};
-		case "topMargin": return {
-			baseY: -geometry.marginTop,
-			bandHeight: geometry.marginTop
-		};
-		case "bottomMargin": return {
-			baseY: geometry.contentHeight,
-			bandHeight: geometry.marginBottom
-		};
-		case "paragraph":
-		case "line": return {
-			baseY: fragmentY,
-			bandHeight: 0
-		};
-		default: return {
-			baseY: 0,
-			bandHeight: geometry.contentHeight
-		};
-	}
-}
 /**
 * Resolve the on-page coordinates of an anchored floating image.
 *
@@ -337,47 +288,7 @@ function resolveVerticalBand(relativeTo, fragmentY, geometry) {
 * picked by `relativeFrom`.
 */
 function resolveAnchoredImagePosition(imgRun, fragmentY, geometry) {
-	const position = imgRun.position;
-	const contentWidth = geometry.contentWidth;
-	let side = "left";
-	let x = 0;
-	if (position?.horizontal) {
-		const h = position.horizontal;
-		const { baseX, bandWidth } = resolveHorizontalBand(h.relativeTo, geometry);
-		const horizontalHasBand = h.relativeTo !== "character";
-		if (h.align === "right" || h.align === "outside") {
-			side = "right";
-			x = horizontalHasBand ? baseX + bandWidth - imgRun.width : 0;
-		} else if (h.align === "left" || h.align === "inside") {
-			side = "left";
-			x = baseX;
-		} else if (h.align === "center") {
-			side = "left";
-			x = horizontalHasBand ? baseX + (bandWidth - imgRun.width) / 2 : 0;
-		} else if (h.posOffset !== void 0) {
-			x = baseX + emuToPixels(h.posOffset);
-			side = x > contentWidth / 2 ? "right" : "left";
-		} else x = baseX;
-	} else if (imgRun.cssFloat === "right") {
-		side = "right";
-		x = contentWidth - imgRun.width;
-	}
-	let y;
-	if (position?.vertical) {
-		const v = position.vertical;
-		const { baseY, bandHeight } = resolveVerticalBand(v.relativeTo, fragmentY, geometry);
-		const verticalHasBand = v.relativeTo !== "paragraph" && v.relativeTo !== "line";
-		if (v.align === "top" || v.align === "inside") y = baseY;
-		else if (v.align === "center") y = verticalHasBand ? baseY + (bandHeight - imgRun.height) / 2 : fragmentY;
-		else if (v.align === "bottom" || v.align === "outside") y = verticalHasBand ? baseY + bandHeight - imgRun.height : fragmentY;
-		else if (v.posOffset !== void 0) y = baseY + emuToPixels(v.posOffset);
-		else y = verticalHasBand ? baseY : fragmentY;
-	} else y = fragmentY;
-	return {
-		x,
-		y,
-		side
-	};
+	return resolveAnchoredImagePosition$1(imgRun, fragmentY, geometry);
 }
 /**
 * Extract floating images from a paragraph block and determine their page-level positions.
@@ -1011,7 +922,10 @@ function renderPage(page, context, options = {}) {
 				});
 				prevParagraphBorders = paragraphBlock.attrs?.borders;
 			} else if (fragment.kind === "table" && blockData?.block.kind === "table" && blockData.measure.kind === "table") {
-				fragmentEl = renderTableFragment(fragment, blockData.block, blockData.measure, fragmentContext, { document: doc });
+				fragmentEl = renderTableFragment(fragment, blockData.block, blockData.measure, fragmentContext, {
+					document: doc,
+					pageGeometry
+				});
 				prevParagraphBorders = void 0;
 			} else if (fragment.kind === "image" && blockData?.block.kind === "image" && blockData.measure.kind === "image") {
 				fragmentEl = renderImageFragment(fragment, blockData.block, blockData.measure, fragmentContext, { document: doc });
@@ -1086,7 +1000,6 @@ function renderPage(page, context, options = {}) {
 		headerEl.style.width = `${headerContentWidth}px`;
 		headerEl.style.height = `${interactiveHeaderHeight}px`;
 		headerEl.style.minHeight = `${interactiveHeaderHeight}px`;
-		headerEl.style.opacity = "0.62";
 		let shouldClipHeader = !headerOverflows && headerContentFitsBox;
 		if (options.headerContent && options.headerContent.blocks.length > 0) {
 			const headerContentEl = renderHeaderFooterContent(options.headerContent, {
@@ -1107,7 +1020,8 @@ function renderPage(page, context, options = {}) {
 		}
 		if (shouldClipHeader) {
 			headerEl.style.maxHeight = `${availableHeaderHeight}px`;
-			headerEl.style.overflow = "hidden";
+			headerEl.style.overflow = "clip";
+			headerEl.style.overflowClipMargin = `${HEADER_FOOTER_RULE_CLIP_MARGIN}px`;
 		}
 		pageEl.append(headerEl);
 		moveBehindHeaderFooterElementsToPage(headerEl, pageEl, headerDistance, page.margins.left);
@@ -1132,7 +1046,6 @@ function renderPage(page, context, options = {}) {
 		footerEl.style.width = `${footerContentWidth}px`;
 		footerEl.style.height = `${interactiveFooterHeight}px`;
 		footerEl.style.minHeight = `${interactiveFooterHeight}px`;
-		footerEl.style.opacity = "0.62";
 		const footerContentFitsBox = footerVisualBottom - footerVisualTop <= interactiveFooterHeight;
 		let shouldClipFooter = !footerOverflows && footerContentFitsBox;
 		if (options.footerContent && options.footerContent.blocks.length > 0) {
@@ -1154,7 +1067,8 @@ function renderPage(page, context, options = {}) {
 		}
 		if (shouldClipFooter) {
 			footerEl.style.maxHeight = `${availableFooterHeight}px`;
-			footerEl.style.overflow = "hidden";
+			footerEl.style.overflow = "clip";
+			footerEl.style.overflowClipMargin = `${HEADER_FOOTER_RULE_CLIP_MARGIN}px`;
 		}
 		pageEl.append(footerEl);
 		moveBehindHeaderFooterElementsToPage(footerEl, pageEl, footerNaturalTop, page.margins.left);

package/dist/layout-painter/renderParagraph.js

@@ -1,19 +1,22 @@
 import { parseXmlDocument } from "../docx/xmlParser.js";
 import { resolveFontFamily } from "../utils/fontResolver.js";
+import { detectBaseDirection } from "../utils/baseDirection.js";
+import { AUTHOR_COLORS, getAuthorColorIdx } from "../utils/authorColors.js";
 import "../utils/fontWeights.js";
+import { FONT_KERNING_MODE, countCompressibleSpaces, getFontKerningMode, getRunFontKerningMode } from "../layout-engine/measure/textMeasurementPolicy.js";
+import "../layout-engine/measure/measureHelpers.js";
 import { calculateTabWidth } from "../prosemirror/utils/tabCalculator.js";
 import { inlineImageBoundingBox, parseRotationDegrees, rotatedBoundingBox } from "../utils/rotationBoundingBox.js";
 import { hasCjk, segmentByScript } from "../utils/scriptSegments.js";
 import { isFloatingImageRun } from "../layout-engine/types.js";
 import { getListMarkerInlineWidth, getListMarkerVisualOffset } from "../layout-engine/measure/listMarkerWidth.js";
+import { resolveImageLineAlign } from "./renderUtils.js";
 import { applySdtDataAttrs } from "./sdtBoundary.js";
 import { applyImageVisualAttrs, hasImageVisualAttrs, wrapImageWithCrop } from "./renderImage.js";
 import { ommlToMathml } from "../docx/mathToMathml.js";
 import { evaluateFieldInstruction } from "../fields/evaluateField.js";
-import { AUTHOR_COLORS, getAuthorColorIdx } from "../utils/authorColors.js";
-import { detectBaseDirection } from "../utils/baseDirection.js";
+import { borderStrokeToCss, resolveParagraphBorderHorizontalOutsets } from "./borderStroke.js";
 import { getAutomaticTextColorForBackground } from "./documentColors.js";
-import { resolveImageLineAlign } from "./renderUtils.js";
 //#region src/layout-painter/renderParagraph.ts
 /**
 * Paragraph Fragment Renderer
@@ -128,9 +131,7 @@ function applyRunStyles(element, run) {
 		element.style.transform = `scaleX(${run.horizontalScale / 100})`;
 		element.style.transformOrigin = "left center";
 	}
-	if (run.kerningMinPt && run.kerningMinPt > 0) {
-		if ((run.fontSize ?? 11) >= run.kerningMinPt) element.style.fontKerning = "normal";
-	}
+	element.style.fontKerning = getRunFontKerningMode(run, 11);
 	if (run.emboss) element.style.textShadow = "1px 1px 1px rgba(255,255,255,0.5), -1px -1px 1px rgba(0,0,0,0.3)";
 	if (run.imprint) element.style.textShadow = "-1px -1px 1px rgba(255,255,255,0.5), 1px 1px 1px rgba(0,0,0,0.3)";
 	if (run.textShadow && !run.emboss && !run.imprint) element.style.textShadow = "1px 1px 2px rgba(0,0,0,0.3)";
@@ -785,19 +786,14 @@ const startsAfterSoftWrap = (block, line) => {
 * must trigger within this slack.
 */
 const RIGHT_EDGE_EPSILON_PX = .5;
-function countShrinkableSpaces(runs) {
+function countShrinkableSpaces(runs, context) {
 	let count = 0;
-	for (const run of runs) if (isTextRun(run)) {
-		for (const char of run.text ?? "") if (char === " ") count++;
-	} else if (isFieldRun(run)) {
-		for (const char of run.fallback ?? "") if (char === " ") count++;
-	} else if (isMathRun(run)) {
-		for (const char of run.plainText ?? "") if (char === " ") count++;
-	}
+	for (const run of runs) if (isTextRun(run)) count += countCompressibleSpaces(run.text ?? "");
+	else if (isFieldRun(run)) count += countCompressibleSpaces(resolveFieldText(run, context));
 	return count;
 }
 /**
-* Build a TextMeasureStyle from a TextRun or FieldRun's relevant fields.
+* Build the shared measurement style from a paintable text run.
 */
 function runMeasureStyle(run) {
 	return {
@@ -805,7 +801,8 @@ function runMeasureStyle(run) {
 		...run.italic !== void 0 ? { italic: run.italic } : {},
 		...run.letterSpacing !== void 0 ? { letterSpacing: run.letterSpacing } : {},
 		...run.smallCaps !== void 0 ? { smallCaps: run.smallCaps } : {},
-		...run.eastAsiaFontFamily !== void 0 ? { eastAsiaFontFamily: run.eastAsiaFontFamily } : {}
+		...run.eastAsiaFontFamily !== void 0 ? { eastAsiaFontFamily: run.eastAsiaFontFamily } : {},
+		kerning: getRunFontKerningMode(run, 11) === FONT_KERNING_MODE.enabled
 	};
 }
 /**
@@ -910,6 +907,7 @@ function createTextMeasurer(doc) {
 	const ctx = doc.createElement("canvas").getContext("2d");
 	return (text, fontSize = 11, fontFamily = "Calibri", style = {}) => {
 		if (!ctx) return applyLetterSpacingToMeasuredWidth(text.length * 7, text, style.letterSpacing);
+		ctx.fontKerning = getFontKerningMode(style);
 		const cssFallback = resolveFontFamily(fontFamily).cssFallback;
 		const fontSizePx = fontSize * 96 / 72;
 		const fontPrefixParts = [];
@@ -996,7 +994,7 @@ function renderLine(block, line, alignment, doc, options) {
 			const firstLineHangingExpansionPx = hasVisibleListMarker ? Math.min(firstLineHangingPx, Math.max(0, options.leftIndentPx ?? 0)) : firstLineHangingPx;
 			const justifyCapacityPx = options.availableWidth + firstLineHangingExpansionPx;
 			const overfullPx = line.width - justifyCapacityPx;
-			const shrinkableSpaces = countShrinkableSpaces(runsForLine.filter((run) => !isTextRun(run) || !isCollapsedLineEdgeSpaceRun(run)));
+			const shrinkableSpaces = countShrinkableSpaces(runsForLine.filter((run) => !isTextRun(run) || !isCollapsedLineEdgeSpaceRun(run)), options.context);
 			if (overfullPx > RIGHT_EDGE_EPSILON_PX && shrinkableSpaces > 0) {
 				lineEl.style.textAlign = "left";
 				lineEl.style.textAlignLast = "auto";
@@ -1134,6 +1132,20 @@ function renderLine(block, line, alignment, doc, options) {
 			lineEl.append(runEl);
 		}
 	}
+	if (line.discretionaryHyphen) {
+		const sourceRun = block.runs[line.discretionaryHyphen.runIndex];
+		if (sourceRun && isTextRun(sourceRun)) {
+			const hyphenRun = {
+				...sourceRun,
+				text: "-"
+			};
+			Reflect.deleteProperty(hyphenRun, "pmStart");
+			Reflect.deleteProperty(hyphenRun, "pmEnd");
+			const hyphenEl = renderTextRun(hyphenRun, doc);
+			hyphenEl.dataset["discretionaryHyphen"] = "true";
+			lineEl.append(hyphenEl);
+		}
+	}
 	const inFlowRuns = runsForLine.filter((run) => !(isImageRun(run) && isFloatingImageRun(run)));
 	const blankBreakRun = inFlowRuns.length > 0 && inFlowRuns.every(isLineBreakRun) ? inFlowRuns.find(isLineBreakRun) : void 0;
 	if (blankBreakRun?.pmStart !== void 0) {
@@ -1239,7 +1251,10 @@ function renderParagraphFragment(fragment, block, measure, context, options = {}
 			}
 		};
 		fragmentEl.style.boxSizing = "border-box";
-		const borderToCss = (b) => `${b.width}px ${borderStyleToCss(b.style)} ${b.color}`;
+		const borderToCss = (border) => borderStrokeToCss({
+			...border,
+			style: borderStyleToCss(border.style)
+		});
 		const groupedWithPrev = bordersFormGroup(options.prevBorders, borders);
 		const groupedWithNext = bordersFormGroup(borders, options.nextBorders);
 		const renderedTopBorder = groupedWithPrev ? borders.between : borders.top;
@@ -1249,8 +1264,9 @@ function renderParagraphFragment(fragment, block, measure, context, options = {}
 		borderBox.style.position = "absolute";
 		borderBox.style.pointerEvents = "none";
 		borderBox.style.boxSizing = "border-box";
-		borderBox.style.left = `${indentLeft - (borders.left?.space ?? 0) - (borders.left?.width ?? 0)}px`;
-		borderBox.style.right = `${indentRight - (borders.right?.space ?? 0) - (borders.right?.width ?? 0)}px`;
+		const horizontalOutsets = resolveParagraphBorderHorizontalOutsets(borders, renderedTopBorder !== void 0 || renderedBottomBorder !== void 0);
+		borderBox.style.left = `${indentLeft - horizontalOutsets.left}px`;
+		borderBox.style.right = `${indentRight - horizontalOutsets.right}px`;
 		borderBox.style.top = `${-(renderedTopBorder?.space ?? 0) - (renderedTopBorder?.width ?? 0)}px`;
 		borderBox.style.bottom = `${-(renderedBottomBorder?.space ?? 0) - (renderedBottomBorder?.width ?? 0)}px`;
 		if (renderedTopBorder) borderBox.style.borderTop = borderToCss(renderedTopBorder);
@@ -1342,7 +1358,7 @@ function renderParagraphFragment(fragment, block, measure, context, options = {}
 			lineEl.style.paddingLeft = `${Math.max(0, markerStart)}px`;
 			lineEl.style.textIndent = "0";
 			let firstTextRun;
-			if (!block.attrs.listMarkerFontFamily || !block.attrs.listMarkerFontSize) for (let ri = line.fromRun; ri <= line.toRun; ri++) {
+			if (!block.attrs.listMarkerFontFamily || !block.attrs.listMarkerFontSize || block.attrs.listMarkerBold === void 0) for (let ri = line.fromRun; ri <= line.toRun; ri++) {
 				const r = block.runs[ri];
 				if (r && r.kind === "text") {
 					firstTextRun = r;
@@ -1351,7 +1367,8 @@ function renderParagraphFragment(fragment, block, measure, context, options = {}
 			}
 			const markerFontFamily = block.attrs.listMarkerFontFamily ?? firstTextRun?.fontFamily ?? block.attrs.defaultFontFamily;
 			const markerFontSize = block.attrs.listMarkerFontSize ?? firstTextRun?.fontSize ?? block.attrs.defaultFontSize;
-			const marker = renderListMarker(block.attrs.listMarker, getListMarkerInlineWidth(block), getListMarkerVisualOffset(block), doc, markerFontFamily, markerFontSize, block.attrs.listMarkerRevision, block.attrs.listMarkerSecondSlotOffsetTwips);
+			const markerBold = block.attrs.listMarkerBold ?? firstTextRun?.bold;
+			const marker = renderListMarker(block.attrs.listMarker, getListMarkerInlineWidth(block), getListMarkerVisualOffset(block), doc, markerFontFamily, markerFontSize, markerBold, block.attrs.listMarkerRevision, block.attrs.listMarkerSecondSlotOffsetTwips);
 			const markerMarginLeft = markerStart - Math.min(indentLeft, 0);
 			if (markerMarginLeft < 0) marker.style.marginLeft = `${markerMarginLeft}px`;
 			lineEl.prepend(marker);
@@ -1368,12 +1385,13 @@ function renderParagraphFragment(fragment, block, measure, context, options = {}
 * tab grid. Long markers like "1.1.1." therefore grow to the next stop
 * instead of butting against the body text.
 */
-function renderListMarker(marker, inlineWidth, visualOffset, doc, fontFamily, fontSize, revision, secondSlotOffsetTwips) {
+function renderListMarker(marker, inlineWidth, visualOffset, doc, fontFamily, fontSize, bold, revision, secondSlotOffsetTwips) {
 	const span = doc.createElement("span");
 	span.className = "layout-list-marker";
 	span.style.display = "inline-block";
 	if (fontFamily) span.style.fontFamily = resolveFontFamily(fontFamily).cssFallback;
 	if (fontSize) span.style.fontSize = `${fontSize * 96 / 72}px`;
+	if (bold !== void 0) span.style.fontWeight = bold ? "800" : "normal";
 	span.style.textAlign = "left";
 	span.style.textAlignLast = "left";
 	span.style.boxSizing = "border-box";

package/dist/layout-painter/renderTable.d.ts

@@ -1,5 +1,6 @@
 import { TableBlock, TableFragment, TableMeasure } from "../layout-engine/types.js";
 import { RenderContext } from "./renderUtils.js";
+import { PageGeometry } from "./anchoredImagePosition.js";
 
 //#region src/layout-painter/renderTable.d.ts
 /**
@@ -20,6 +21,7 @@ declare const TABLE_CLASS_NAMES: {
  */
 type RenderTableFragmentOptions = {
   document?: Document;
+  pageGeometry?: PageGeometry;
 };
 /**
  * Render a table fragment to DOM