pa_font 0.3.3 → 0.3.5

package/dist/paFont.js

@@ -275,7 +275,7 @@ function mod(value, divisor) {
 function layoutGlyphs(font, value, opts) {
 	const glyphs = [];
 	const renderOptions = toRenderOptions(opts);
-	return {
+	return applyAnchorToGlyphLayout(font, value, {
 		text: value,
 		glyphs,
 		metrics: {
@@ -292,19 +292,43 @@ function layoutGlyphs(font, value, opts) {
 			y: opts.y,
 			size: opts.size
 		}
+	}, opts);
+}
+function applyAnchorToGlyphLayout(font, value, layout, opts) {
+	if (opts.anchor == null || layout.glyphs.length === 0) return layout;
+	const { bbox } = measureText(font, value, {
+		...opts,
+		anchor: null
+	});
+	const tx = opts.x - (bbox.x + bbox.w * opts.anchor.x);
+	const ty = opts.y - (bbox.y + bbox.h * opts.anchor.y);
+	if (tx === 0 && ty === 0) return layout;
+	return {
+		text: value,
+		glyphs: layout.glyphs.map((glyph) => ({
+			...glyph,
+			x: glyph.x + tx,
+			y: glyph.y + ty
+		})),
+		metrics: {
+			...layout.metrics,
+			x: layout.metrics.x + tx,
+			y: layout.metrics.y + ty
+		}
 	};
 }
 function measureText(font, value, opts) {
 	const renderOptions = toRenderOptions(opts);
-	const box = font.getPath(value, opts.x, opts.y, opts.size, renderOptions).getBoundingBox();
+	const bbox = resolveMeasuredBBox(font.getPath(value, opts.x, opts.y, opts.size, renderOptions).getBoundingBox(), opts.x, opts.y);
+	if (opts.anchor == null) return {
+		width: measureAdvanceWidth(font, value, opts),
+		bbox
+	};
+	const tx = opts.x - (bbox.x + bbox.w * opts.anchor.x);
+	const ty = opts.y - (bbox.y + bbox.h * opts.anchor.y);
 	return {
 		width: measureAdvanceWidth(font, value, opts),
-		bbox: {
-			x: box.x1,
-			y: box.y1,
-			w: box.x2 - box.x1,
-			h: box.y2 - box.y1
-		}
+		bbox: translateRect(bbox, tx, ty)
 	};
 }
 function measureAdvanceWidth(font, value, opts) {
@@ -522,6 +546,7 @@ function translateGlyphGeometry(geometry, tx, ty, glyphPosition) {
 }
 function normalizeTextOptions(options = {}) {
 	const size = normalizePositive(options.size, 72);
+	const anchor = normalizeAnchor(options.anchor);
 	return {
 		x: normalizeNumber(options.x, 0),
 		y: normalizeNumber(options.y, 0),
@@ -531,11 +556,60 @@ function normalizeTextOptions(options = {}) {
 		kerning: options.kerning !== false,
 		letterSpacing: options.letterSpacing == null ? void 0 : normalizeNumber(options.letterSpacing, 0),
 		tracking: options.tracking == null ? void 0 : normalizeNumber(options.tracking, 0),
+		anchor,
 		script: options.script,
 		language: options.language,
 		features: options.features
 	};
 }
+function normalizeAnchor(value) {
+	if (value == null) return null;
+	if (Number.isFinite(value)) {
+		const next = Number(value);
+		return {
+			x: next,
+			y: next
+		};
+	}
+	if (Array.isArray(value)) {
+		if (value.length === 1 && Number.isFinite(value[0])) {
+			const next = Number(value[0]);
+			return {
+				x: next,
+				y: next
+			};
+		}
+		if (value.length >= 2 && Number.isFinite(value[0]) && Number.isFinite(value[1])) return {
+			x: Number(value[0]),
+			y: Number(value[1])
+		};
+		return null;
+	}
+	if (typeof value === "object") {
+		const hasX = Number.isFinite(value.x);
+		const hasY = Number.isFinite(value.y);
+		if (!hasX && !hasY) return null;
+		return {
+			x: hasX ? Number(value.x) : 0,
+			y: hasY ? Number(value.y) : 0
+		};
+	}
+	return null;
+}
+function resolveMeasuredBBox(box, fallbackX, fallbackY) {
+	if (Number.isFinite(box?.x1) && Number.isFinite(box?.y1) && Number.isFinite(box?.x2) && Number.isFinite(box?.y2)) return {
+		x: box.x1,
+		y: box.y1,
+		w: box.x2 - box.x1,
+		h: box.y2 - box.y1
+	};
+	return {
+		x: normalizeNumber(fallbackX, 0),
+		y: normalizeNumber(fallbackY, 0),
+		w: 0,
+		h: 0
+	};
+}
 function defaultEdgeEpsilon(size) {
 	return Math.min(1, Math.max(.01, size * .0025));
 }
@@ -3314,7 +3388,7 @@ function layoutParagraph(fontInstance, text, options = {}, state = {}) {
 	const layoutState = pretextState != null && canUsePretextLayout(pretextState, normalized) ? pretextState : layoutParagraphsWithNative(fontInstance, paragraphs, normalized, layoutBox);
 	const measureWidth = createLazyTextMeasurer(fontInstance, normalized);
 	const lines = positionLines(fontInstance, applyOverflowClamping(layoutState.lines, normalized, layoutBox, measureWidth), normalized, layoutBox, measureWidth);
-	const textBBox = combineRects(lines.map((line) => line.bbox)) ?? emptyRect();
+	const textBBox = normalized.anchor == null ? combineRects(lines.map((line) => line.bbox)) ?? emptyRect() : measurePositionedTextBBox(fontInstance, lines, normalized);
 	const textWidth = lines.reduce((max, line) => Math.max(max, line.width), 0);
 	const textHeight = resolvePositionedTextHeight(lines, layoutBox.contentY);
 	const anchoredLayout = applyParagraphAnchor(lines, textBBox, finalizeLayoutBox(layoutBox, normalized, textHeight), normalized.anchor);
@@ -3374,10 +3448,7 @@ function normalizeParagraphOptions(fontInstance, options = {}) {
 		width,
 		height,
 		gap: gap ?? DEFAULT_PARAGRAPH_GAP,
-		anchor: anchor ?? {
-			x: 0,
-			y: 0
-		},
+		anchor,
 		lineHeight: resolveLineHeight(options.lineHeight, textOptions.size),
 		align: normalizeEnum(options.align, [
 			"left",
@@ -3819,13 +3890,13 @@ function finalizeLayoutBox(layoutBox, options, textHeight) {
 	};
 }
 function applyParagraphAnchor(lines, textBBox, layoutBox, anchor) {
-	if (anchor == null || Math.abs(anchor.x) <= JUSTIFY_EPSILON && Math.abs(anchor.y) <= JUSTIFY_EPSILON) return {
+	if (anchor == null) return {
 		lines,
 		textBBox,
 		layoutBox
 	};
-	const tx = -layoutBox.contentBox.w * anchor.x;
-	const ty = -layoutBox.contentBox.h * anchor.y;
+	const tx = layoutBox.contentX - (textBBox.x + textBBox.w * anchor.x);
+	const ty = layoutBox.contentY - (textBBox.y + textBBox.h * anchor.y);
 	return {
 		lines: translatePositionedLines(lines, tx, ty),
 		textBBox: translateRect(textBBox, tx, ty),
@@ -3856,6 +3927,35 @@ function translateLayoutBox(layoutBox, tx, ty) {
 		clipBox: translateRect(layoutBox.clipBox, tx, ty)
 	};
 }
+function measurePositionedTextBBox(fontInstance, lines, options) {
+	const visibleBoxes = [];
+	const measureOptions = {
+		x: 0,
+		y: 0,
+		size: options.size,
+		flatten: options.flatten,
+		edgeEpsilon: options.edgeEpsilon,
+		kerning: options.kerning,
+		letterSpacing: options.letterSpacing,
+		tracking: options.tracking,
+		anchor: null,
+		script: options.script,
+		language: options.language,
+		features: options.features
+	};
+	lines.forEach((line) => {
+		line.fragments.forEach((fragment) => {
+			if (fragment.text.length === 0) return;
+			const { bbox } = measureText(fontInstance.font, fragment.text, {
+				...measureOptions,
+				x: fragment.x,
+				y: line.baseline
+			});
+			if (bbox.w > 0 || bbox.h > 0) visibleBoxes.push(bbox);
+		});
+	});
+	return combineRects(visibleBoxes) ?? combineRects(lines.map((line) => line.bbox)) ?? emptyRect();
+}
 function resolveContainerDimension(explicit, fallback) {
 	if (Number.isFinite(explicit) && explicit > 0) return explicit;
 	if (Number.isFinite(fallback) && fallback > 0) return fallback;
@@ -3884,40 +3984,6 @@ function normalizeDimension(value) {
 function normalizeGap(value) {
 	return Number.isFinite(value) && value >= 0 ? Number(value) : null;
 }
-function normalizeAnchor(value) {
-	if (value == null) return null;
-	if (Number.isFinite(value)) {
-		const next = Number(value);
-		return {
-			x: next,
-			y: next
-		};
-	}
-	if (Array.isArray(value)) {
-		if (value.length === 1 && Number.isFinite(value[0])) {
-			const next = Number(value[0]);
-			return {
-				x: next,
-				y: next
-			};
-		}
-		if (value.length >= 2 && Number.isFinite(value[0]) && Number.isFinite(value[1])) return {
-			x: Number(value[0]),
-			y: Number(value[1])
-		};
-		return null;
-	}
-	if (typeof value === "object") {
-		const hasX = Number.isFinite(value.x);
-		const hasY = Number.isFinite(value.y);
-		if (!hasX && !hasY) return null;
-		return {
-			x: hasX ? Number(value.x) : 0,
-			y: hasY ? Number(value.y) : 0
-		};
-	}
-	return null;
-}
 function normalizeSpacing(value) {
 	if (value == null) return zeroSpacing();
 	if (Number.isFinite(value)) {
@@ -4528,13 +4594,16 @@ var paFont = class paFont {
 	}
 	text(value, options = {}) {
 		const opts = normalizeTextOptions(options);
+		assertValidAnchorOption("font.text()", options, opts.anchor);
 		return createTextShape(this._layoutText(String(value ?? ""), opts), opts, this);
 	}
 	glyph(value, options = {}) {
 		const opts = normalizeTextOptions(options);
-		const glyph = this.font.charToGlyph(String(value ?? ""));
-		return createTextShape({
-			text: String(value ?? ""),
+		assertValidAnchorOption("font.glyph()", options, opts.anchor);
+		const text = Array.from(String(value ?? ""))[0] ?? "";
+		const glyph = this.font.charToGlyph(text);
+		const layout = {
+			text,
 			glyphs: [{
 				glyph,
 				x: opts.x,
@@ -4548,10 +4617,12 @@ var paFont = class paFont {
 				y: opts.y,
 				size: opts.size
 			}
-		}, opts, this);
+		};
+		return createTextShape(anchorSingleGlyphLayout(this.font, text, layout, opts), opts, this);
 	}
 	metrics(value, options = {}) {
 		const opts = normalizeTextOptions(options);
+		assertValidAnchorOption("font.metrics()", options, opts.anchor);
 		return measureText(this.font, String(value ?? ""), opts);
 	}
 	paragraph(value, options = {}) {
@@ -4606,6 +4677,32 @@ function normalizeShapeVariantValue(value) {
 function toShapeVariantKey(value) {
 	return normalizeShapeVariantValue(value).toFixed(6);
 }
+function assertValidAnchorOption(methodName, sourceOptions, anchor) {
+	if (sourceOptions?.anchor != null && anchor == null) throw new TypeError(`${methodName} option "anchor" must be a number, [x, y], or { x, y }.`);
+}
+function anchorSingleGlyphLayout(font, text, layout, opts) {
+	if (opts.anchor == null || text.length === 0) return layout;
+	const { bbox } = measureText(font, text, {
+		...opts,
+		anchor: null
+	});
+	const tx = opts.x - (bbox.x + bbox.w * opts.anchor.x);
+	const ty = opts.y - (bbox.y + bbox.h * opts.anchor.y);
+	if (tx === 0 && ty === 0) return layout;
+	return {
+		...layout,
+		glyphs: layout.glyphs.map((glyph) => ({
+			...glyph,
+			x: glyph.x + tx,
+			y: glyph.y + ty
+		})),
+		metrics: {
+			...layout.metrics,
+			x: layout.metrics.x + tx,
+			y: layout.metrics.y + ty
+		}
+	};
+}
 async function fetchFontBytes(source) {
 	const response = await fetch(source);
 	if (!response.ok) throw new Error(`Failed to load font from ${source}: ${response.status} ${response.statusText}`);