pa_font 0.2.2 → 0.2.4

package/README.md

@@ -1,39 +0,0 @@
-# paFont
-
-`paFont`는 OpenType 폰트에서 텍스트 geometry를 만들고, 같은 폰트로 canvas 문단 레이아웃까지 처리하는 작은 라이브러리입니다.
-
-## 설치
-
-```sh
-npm install pa_font
-```
-
-## 빠른 예시
-
-```js
-import paFont from "pa_font";
-
-const font = await paFont.load("/assets/font.otf");
-
-const paragraph = font.paragraph("Canvas paragraph with fast wrapping.", {
-  x: 40,
-  y: 80,
-  size: 32,
-  width: 420,
-  wrap: "word",
-  padding: { x: 24, y: 20 },
-});
-
-paragraph.drawText(ctx, { fillStyle: "#111" });
-
-const shape = paragraph.toShape({ step: 6 });
-```
-
-## 문단 API 핵심
-
-- `wrap: "word" | "char" | "keep"`로 대부분의 줄바꿈 모드를 짧게 지정할 수 있습니다.
-- `padding` / `margin`은 `24`, `"24 32"`, `[24, 32]`, `{ x: 32, y: 24 }`, `{ top, right, bottom, left }`를 지원합니다.
-- 기본 문단 레이아웃은 `pretext` hot path를 우선 사용하고, 필요한 경우만 native 측정으로 fallback 합니다.
-- 실제 사용 엔진은 `paragraph.layoutEngine`에서 확인할 수 있습니다.
-
-자세한 사용법은 [USAGE.md](./USAGE.md)를 참고하세요.

package/USAGE.md

@@ -189,6 +189,10 @@ const shape = paragraph.toShape({
 
 문단 전체를 plain region 데이터로 반환합니다.
 
+### `paragraph.toRegionViews(options?)`
+
+문단 전체를 zero-copy region view로 반환합니다.
+
 ### `paragraph.toPoints(options?)`
 
 문단 전체를 점 샘플로 반환합니다.
@@ -234,6 +238,11 @@ const shape = paragraph.toShape({
 
 최종 polygon 데이터를 반환합니다.
 
+### `shape.toRegionViews({ step, openWidth })`
+
+내부 polygon을 복사하지 않는 read-only view를 반환합니다.
+반복 후처리나 시각화처럼 바로 순회만 할 때 `toRegions()`보다 가볍습니다.
+
 반환 형태:
 
 ```js

package/dist/paFont.cjs

@@ -560,13 +560,14 @@ function toArrayBuffer(value) {
 //#endregion
 //#region src/paFont/shape.js
 var PAShape = class {
-	constructor({ text, parts, contours, glyphs, bbox, metrics, edgeEpsilon }) {
+	constructor({ text, parts, contours, glyphs, bbox, metrics, edgeEpsilon, rawData }) {
 		this.text = text;
 		this.parts = parts;
 		this.bbox = bbox;
 		this.metrics = metrics;
 		this.edgeEpsilon = edgeEpsilon;
 		this.raw = {
+			...rawData ?? {},
 			contours,
 			glyphs
 		};
@@ -599,12 +600,23 @@ var PAShape = class {
 	toRegions(options = {}) {
 		return createRegionCollection(this.toShape(options));
 	}
+	toRegionViews(options = {}) {
+		return this.toShape(options)._getRegionViews();
+	}
 	openHoles(width) {
 		const slitWidth = normalizePositive(width, 0);
 		if (slitWidth <= 0 || !this.parts.some((part) => part.holes.length > 0)) return this;
 		const cacheKey = toCacheKey(slitWidth);
 		const cached = this._cache.openHoles.get(cacheKey);
 		if (cached) return cached;
+		const glyphVariant = createGlyphDerivedShape(this, {
+			openWidth: slitWidth,
+			step: 0
+		});
+		if (glyphVariant) {
+			this._cache.openHoles.set(cacheKey, glyphVariant);
+			return glyphVariant;
+		}
 		const geometryEpsilon = resolveGeometryEpsilon(slitWidth);
 		const shape = createDerivedShape(this, this.parts.map((part) => openPartWithSlit(part, slitWidth, geometryEpsilon)));
 		this._cache.openHoles.set(cacheKey, shape);
@@ -616,6 +628,14 @@ var PAShape = class {
 		const cacheKey = toCacheKey(spacing);
 		const cached = this._cache.resample.get(cacheKey);
 		if (cached) return cached;
+		const glyphVariant = createGlyphDerivedShape(this, {
+			openWidth: 0,
+			step: spacing
+		});
+		if (glyphVariant) {
+			this._cache.resample.set(cacheKey, glyphVariant);
+			return glyphVariant;
+		}
 		const shape = createDerivedShape(this, this.parts.map((part) => resamplePart(part, spacing)));
 		this._cache.resample.set(cacheKey, shape);
 		return shape;
@@ -677,8 +697,13 @@ function createTextShape(layout, opts, fontInstance) {
 	const parts = [];
 	const contours = [];
 	const glyphs = [];
+	const sourceLayoutGlyphs = Array.isArray(layout.glyphs) ? layout.glyphs.slice() : [];
+	const variantOptions = {
+		openWidth: normalizePositive(opts.openWidth, 0),
+		step: normalizePositive(opts.step, 0)
+	};
 	layout.glyphs.forEach((item, glyphPosition) => {
-		const translated = translateGlyphGeometry(fontInstance._getFlattenedGlyph(item.glyph, opts), item.x, item.y, glyphPosition);
+		const translated = translateGlyphGeometry(fontInstance._getGlyphGeometryVariant(item.glyph, opts), item.x, item.y, glyphPosition);
 		parts.push(...translated.parts);
 		contours.push(...translated.contours);
 		glyphs.push({
@@ -702,11 +727,21 @@ function createTextShape(layout, opts, fontInstance) {
 			...layout.metrics,
 			bbox
 		},
-		edgeEpsilon: opts.edgeEpsilon
+		edgeEpsilon: opts.edgeEpsilon,
+		rawData: {
+			fontInstance,
+			sourceLayout: {
+				glyphs: sourceLayoutGlyphs,
+				metrics: { ...layout.metrics }
+			},
+			sourceOptions: extractShapeSourceOptions(opts),
+			variantOptions
+		}
 	});
 }
 function createGlyphShape(shape, glyphPosition) {
 	const glyphMeta = shape.raw.glyphs?.[glyphPosition] ?? null;
+	const sourceGlyph = shape.raw.sourceLayout?.glyphs?.[glyphPosition] ?? null;
 	const parts = copyParts(shape.parts.filter((part) => part.glyphPosition === glyphPosition));
 	const contours = copyContours((shape.raw.contours ?? []).filter((contour) => contour.glyphPosition === glyphPosition));
 	const bbox = combineRects(parts.map((part) => part.bbox)) ?? (glyphMeta?.bbox ? { ...glyphMeta.bbox } : emptyRect());
@@ -727,14 +762,28 @@ function createGlyphShape(shape, glyphPosition) {
 			width: bbox.w,
 			bbox
 		},
-		edgeEpsilon: shape.edgeEpsilon
+		edgeEpsilon: shape.edgeEpsilon,
+		rawData: sourceGlyph && shape.raw.fontInstance ? {
+			fontInstance: shape.raw.fontInstance,
+			sourceLayout: {
+				glyphs: [sourceGlyph],
+				metrics: {
+					x: glyphMeta?.x ?? shape.metrics?.x ?? 0,
+					y: glyphMeta?.y ?? shape.metrics?.y ?? 0,
+					size: glyphMeta?.size ?? shape.metrics?.size ?? 0,
+					width: glyphMeta?.bbox?.w ?? bbox.w
+				}
+			},
+			sourceOptions: shape.raw.sourceOptions ?? null,
+			variantOptions: { ...shape.raw.variantOptions ?? zeroShapeVariant() }
+		} : void 0
 	});
 }
 function createDerivedShape(shape, parts) {
-	const copiedParts = copyParts(parts);
-	const bbox = combineRects(copiedParts.map((part) => part.bbox)) ?? emptyRect();
+	const bbox = combineRects(parts.map((part) => part.bbox)) ?? emptyRect();
+	const partsByGlyphPosition = groupPartsByGlyphPosition(parts);
 	const glyphs = (shape.raw.glyphs ?? []).map((glyph, glyphPosition) => {
-		const glyphParts = copiedParts.filter((part) => part.glyphPosition === glyphPosition);
+		const glyphParts = partsByGlyphPosition.get(glyphPosition) ?? [];
 		return {
 			...glyph,
 			bbox: combineRects(glyphParts.map((part) => part.bbox)) ?? (glyph.bbox ? { ...glyph.bbox } : emptyRect()),
@@ -743,7 +792,7 @@ function createDerivedShape(shape, parts) {
 	});
 	return new PAShape({
 		text: shape.text,
-		parts: copiedParts,
+		parts,
 		contours: [],
 		glyphs,
 		bbox,
@@ -751,7 +800,11 @@ function createDerivedShape(shape, parts) {
 			...shape.metrics,
 			bbox
 		},
-		edgeEpsilon: shape.edgeEpsilon
+		edgeEpsilon: shape.edgeEpsilon,
+		rawData: {
+			...shape.raw,
+			variantOptions: { ...shape.raw.variantOptions ?? zeroShapeVariant() }
+		}
 	});
 }
 function createRegionCollection(shape) {
@@ -780,6 +833,16 @@ function copyContours(contours) {
 		ring: copyRing(contour.ring)
 	}));
 }
+function groupPartsByGlyphPosition(parts) {
+	const grouped = /* @__PURE__ */ new Map();
+	parts.forEach((part) => {
+		if (typeof part.glyphPosition !== "number") return;
+		const bucket = grouped.get(part.glyphPosition) ?? [];
+		bucket.push(part);
+		grouped.set(part.glyphPosition, bucket);
+	});
+	return grouped;
+}
 function extractGlyphText(text, glyphPosition, glyphCount) {
 	if (glyphCount <= 1) return text;
 	return Array.from(text ?? "")[glyphPosition] ?? "";
@@ -808,6 +871,19 @@ function normalizeShapeOptions(options = {}) {
 		openWidth: normalizePositive(options.openWidth, 0)
 	};
 }
+function extractShapeSourceOptions(opts) {
+	return {
+		size: opts.size,
+		flatten: opts.flatten,
+		edgeEpsilon: opts.edgeEpsilon,
+		kerning: opts.kerning,
+		letterSpacing: opts.letterSpacing,
+		tracking: opts.tracking,
+		script: opts.script,
+		language: opts.language,
+		features: opts.features
+	};
+}
 function resolveShapeVariant(shape, options = {}) {
 	const normalized = normalizeShapeOptions(options);
 	if (normalized.step <= 0 && normalized.openWidth <= 0) return shape;
@@ -820,9 +896,51 @@ function resolveShapeVariant(shape, options = {}) {
 	shape._cache.shapes.set(cacheKey, next);
 	return next;
 }
+function deriveGlyphGeometryVariant(geometry, options = {}) {
+	const normalized = normalizeShapeOptions(options);
+	if (normalized.step <= 0 && normalized.openWidth <= 0) return geometry;
+	let parts = geometry.parts;
+	if (normalized.openWidth > 0) {
+		const geometryEpsilon = resolveGeometryEpsilon(normalized.openWidth);
+		parts = parts.map((part) => openPartWithSlit(part, normalized.openWidth, geometryEpsilon));
+	}
+	if (normalized.step > 0) parts = parts.map((part) => resamplePart(part, normalized.step));
+	return {
+		...geometry,
+		contours: [],
+		parts,
+		bbox: combineRects(parts.map((part) => part.bbox)) ?? emptyRect()
+	};
+}
 function toCacheKey(value) {
 	return normalizePositive(value, 0).toFixed(6);
 }
+function zeroShapeVariant() {
+	return {
+		openWidth: 0,
+		step: 0
+	};
+}
+function createGlyphDerivedShape(shape, variant) {
+	if (!canUseGlyphDerivedShape(shape)) return null;
+	return createTextShape({
+		text: shape.text,
+		glyphs: shape.raw.sourceLayout.glyphs,
+		metrics: shape.raw.sourceLayout.metrics
+	}, {
+		...shape.raw.sourceOptions,
+		...mergeShapeVariantOptions(shape.raw.variantOptions, variant)
+	}, shape.raw.fontInstance);
+}
+function canUseGlyphDerivedShape(shape) {
+	return shape.raw?.fontInstance != null && shape.raw?.sourceOptions != null && shape.raw?.sourceLayout != null && Array.isArray(shape.raw.sourceLayout.glyphs);
+}
+function mergeShapeVariantOptions(previous, next) {
+	return {
+		openWidth: normalizePositive(next.openWidth, previous?.openWidth ?? 0),
+		step: normalizePositive(next.step, previous?.step ?? 0)
+	};
+}
 function resolveGeometryEpsilon(width) {
 	return Math.max(1e-4, normalizePositive(width, 1) * .001);
 }
@@ -3184,9 +3302,11 @@ var DEFAULT_LINE_HEIGHT_RATIO = 1.2;
 var HUGE_LAYOUT_WIDTH = 1e9;
 var JUSTIFY_EPSILON = 1e-6;
 var QUOTE_RE = /"/g;
+var SHARED_MEASURE_CACHE_LIMIT = 2048;
 var sharedMeasureContext = null;
 var sharedWordSegmenter = null;
 var sharedGraphemeSegmenter = null;
+var sharedMeasureCaches = /* @__PURE__ */ new WeakMap();
 function layoutParagraph(fontInstance, text, options = {}, state = {}) {
 	const normalized = normalizeParagraphOptions(fontInstance, options);
 	const textValue = String(text ?? "");
@@ -3866,15 +3986,24 @@ function createTextMeasurer(fontInstance, options) {
 	const cache = /* @__PURE__ */ new Map();
 	const openTypeMeasurer = createOpenTypeMeasurer(fontInstance, options);
 	const context = getMeasureContext();
+	const sharedCache = getSharedMeasureCache(fontInstance, "canvas");
+	const sharedKeyPrefix = `${options.font}\u0000`;
 	return (value) => {
 		if (value.length === 0) return 0;
 		if (cache.has(value)) return cache.get(value);
+		const sharedKey = `${sharedKeyPrefix}${value}`;
+		const sharedWidth = readSharedMeasureCache(sharedCache, sharedKey);
+		if (sharedWidth != null) {
+			cache.set(value, sharedWidth);
+			return sharedWidth;
+		}
 		let width;
 		if (context) {
 			context.font = options.font;
 			width = context.measureText(value).width;
 		} else width = openTypeMeasurer(value);
 		cache.set(value, width);
+		writeSharedMeasureCache(sharedCache, sharedKey, width);
 		return width;
 	};
 }
@@ -3887,6 +4016,7 @@ function createLazyTextMeasurer(fontInstance, options) {
 }
 function createOpenTypeMeasurer(fontInstance, options) {
 	const cache = /* @__PURE__ */ new Map();
+	const sharedCache = getSharedMeasureCache(fontInstance, "openType");
 	const widthOptions = {
 		x: 0,
 		y: 0,
@@ -3900,11 +4030,19 @@ function createOpenTypeMeasurer(fontInstance, options) {
 		language: options.language,
 		features: options.features
 	};
+	const sharedKeyPrefix = createOpenTypeMeasureKeyPrefix(widthOptions);
 	return (value) => {
 		if (value.length === 0) return 0;
 		if (cache.has(value)) return cache.get(value);
+		const sharedKey = `${sharedKeyPrefix}${value}`;
+		const sharedWidth = readSharedMeasureCache(sharedCache, sharedKey);
+		if (sharedWidth != null) {
+			cache.set(value, sharedWidth);
+			return sharedWidth;
+		}
 		const width = measureAdvanceWidth(fontInstance.font, value, widthOptions);
 		cache.set(value, width);
+		writeSharedMeasureCache(sharedCache, sharedKey, width);
 		return width;
 	};
 }
@@ -3920,6 +4058,49 @@ function getMeasureContext() {
 	}
 	return null;
 }
+function getSharedMeasureCache(fontInstance, bucket) {
+	if (fontInstance == null || typeof fontInstance !== "object" && typeof fontInstance !== "function") return null;
+	let caches = sharedMeasureCaches.get(fontInstance);
+	if (!caches) {
+		caches = {
+			canvas: /* @__PURE__ */ new Map(),
+			openType: /* @__PURE__ */ new Map()
+		};
+		sharedMeasureCaches.set(fontInstance, caches);
+	}
+	return caches[bucket];
+}
+function readSharedMeasureCache(cache, key) {
+	if (!cache || !cache.has(key)) return null;
+	const value = cache.get(key);
+	cache.delete(key);
+	cache.set(key, value);
+	return value;
+}
+function writeSharedMeasureCache(cache, key, value) {
+	if (!cache) return;
+	if (cache.has(key)) cache.delete(key);
+	cache.set(key, value);
+	if (cache.size > SHARED_MEASURE_CACHE_LIMIT) {
+		const oldestKey = cache.keys().next().value;
+		cache.delete(oldestKey);
+	}
+}
+function createOpenTypeMeasureKeyPrefix(options) {
+	return [
+		options.size,
+		options.kerning ? 1 : 0,
+		options.letterSpacing ?? "",
+		options.tracking ?? "",
+		options.script ?? "",
+		options.language ?? "",
+		serializeMeasureFeatures(options.features)
+	].join("|") + "\0";
+}
+function serializeMeasureFeatures(features) {
+	if (!features || typeof features !== "object") return "";
+	return Object.keys(features).sort().map((key) => `${key}:${features[key]}`).join(",");
+}
 function getWordSegmenter() {
 	if (sharedWordSegmenter == null) sharedWordSegmenter = new Intl.Segmenter(void 0, { granularity: "word" });
 	return sharedWordSegmenter;
@@ -4015,6 +4196,10 @@ var paParagraph = class paParagraph {
 		const { layout = "current", ...shapeOptions } = normalizeParagraphShapeOptions(options, "toRegions()");
 		return this._getBaseShape(layout).toRegions(shapeOptions);
 	}
+	toRegionViews(options = {}) {
+		const { layout = "current", ...shapeOptions } = normalizeParagraphShapeOptions(options, "toRegionViews()");
+		return this._getBaseShape(layout).toRegionViews(shapeOptions);
+	}
 	toPoints(options = {}) {
 		const { layout = "current", ...pointOptions } = normalizeParagraphPointOptions(options);
 		return this._getBaseShape(layout).toPoints(pointOptions);
@@ -4150,6 +4335,7 @@ var paFont = class paFont {
 		this.canvasFamily = this.family;
 		this._glyphTopologyCache = /* @__PURE__ */ new Map();
 		this._glyphFlatCache = /* @__PURE__ */ new Map();
+		this._glyphVariantCache = /* @__PURE__ */ new Map();
 	}
 	static async load(source, options = {}) {
 		const opts = normalizeLoadOptions(options);
@@ -4227,10 +4413,27 @@ var paFont = class paFont {
 		}
 		return this._glyphFlatCache.get(key);
 	}
+	_getGlyphGeometryVariant(glyph, opts) {
+		const openWidth = normalizeShapeVariantValue(opts.openWidth);
+		const step = normalizeShapeVariantValue(opts.step);
+		if (openWidth <= 0 && step <= 0) return this._getFlattenedGlyph(glyph, opts);
+		const key = `${glyph.index}:${opts.size}:${opts.flatten}:${toShapeVariantKey(openWidth)}:${toShapeVariantKey(step)}`;
+		if (!this._glyphVariantCache.has(key)) this._glyphVariantCache.set(key, deriveGlyphGeometryVariant(this._getFlattenedGlyph(glyph, opts), {
+			openWidth,
+			step
+		}));
+		return this._glyphVariantCache.get(key);
+	}
 	_layoutText(value, opts) {
 		return layoutGlyphs(this.font, value, opts);
 	}
 };
+function normalizeShapeVariantValue(value) {
+	return Number.isFinite(value) && value > 0 ? Number(value) : 0;
+}
+function toShapeVariantKey(value) {
+	return normalizeShapeVariantValue(value).toFixed(6);
+}
 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}`);