tegaki 0.2.2 → 0.3.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { layoutWithLines, prepareWithSegments } from "@chenglou/pretext";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/lib/effects.ts
@@ -179,20 +179,20 @@ function drawGlyph(ctx, glyph, pos, localTime, lineCap, color, effects = [], see
 		if (taperEnd > 0 && progress > 1 - taperEnd) m = Math.min(m, (1 - progress) / taperEnd);
 		return m;
 	};
-	for (const stroke of glyph.strokes) {
-		if (localTime < stroke.delay) continue;
-		const elapsed = localTime - stroke.delay;
-		const progress = Math.min(elapsed / stroke.animationDuration, 1);
-		const pts = stroke.points;
+	for (const stroke of glyph.s) {
+		if (localTime < stroke.d) continue;
+		const elapsed = localTime - stroke.d;
+		const progress = Math.min(elapsed / stroke.a, 1);
+		const pts = stroke.p;
 		if (pts.length === 0) continue;
-		const avgWidth = pts.reduce((s, p) => s + p.width, 0) / pts.length;
+		const avgWidth = pts.reduce((s, p) => s + p[2], 0) / pts.length;
 		const baseLineWidth = Math.max(avgWidth, .5) * scale;
 		if (pts.length === 1) {
 			if (progress <= 0) continue;
 			const p = pts[0];
-			const dotX = px(wobbleX(p.x, p.y, 0));
-			const dotY = py(wobbleY(p.x, p.y, 0));
-			let dotWidth = baseLineWidth + (Math.max(p.width, .5) * scale - baseLineWidth) * pressureAmount;
+			const dotX = px(wobbleX(p[0], p[1], 0));
+			const dotY = py(wobbleY(p[0], p[1], 0));
+			let dotWidth = baseLineWidth + (Math.max(p[2], .5) * scale - baseLineWidth) * pressureAmount;
 			dotWidth *= taperMultiplier(.5);
 			for (const glow of glowEffects) {
 				ctx.save();
@@ -217,8 +217,8 @@ function drawGlyph(ctx, glyph, pos, localTime, lineCap, color, effects = [], see
 		}
 		let totalLen = 0;
 		for (let j = 1; j < pts.length; j++) {
-			const dx = pts[j].x - pts[j - 1].x;
-			const dy = pts[j].y - pts[j - 1].y;
+			const dx = pts[j][0] - pts[j - 1][0];
+			const dy = pts[j][1] - pts[j - 1][1];
 			totalLen += Math.sqrt(dx * dx + dy * dy);
 		}
 		const drawLen = totalLen * progress;
@@ -228,32 +228,32 @@ function drawGlyph(ctx, glyph, pos, localTime, lineCap, color, effects = [], see
 		for (let j = 1; j < pts.length; j++) {
 			const prev = pts[j - 1];
 			const cur = pts[j];
-			const dx = cur.x - prev.x;
-			const dy = cur.y - prev.y;
+			const dx = cur[0] - prev[0];
+			const dy = cur[1] - prev[1];
 			const segLen = Math.sqrt(dx * dx + dy * dy);
 			if (accumulated + segLen <= drawLen) {
 				segments.push({
-					x0: px(wobbleX(prev.x, prev.y, j - 1)),
-					y0: py(wobbleY(prev.x, prev.y, j - 1)),
-					x1: px(wobbleX(cur.x, cur.y, j)),
-					y1: py(wobbleY(cur.x, cur.y, j)),
-					width0: prev.width,
-					width1: cur.width,
+					x0: px(wobbleX(prev[0], prev[1], j - 1)),
+					y0: py(wobbleY(prev[0], prev[1], j - 1)),
+					x1: px(wobbleX(cur[0], cur[1], j)),
+					y1: py(wobbleY(cur[0], cur[1], j)),
+					width0: prev[2],
+					width1: cur[2],
 					segProgress: (accumulated + segLen / 2) / totalLen
 				});
 				accumulated += segLen;
 			} else {
 				const remaining = drawLen - accumulated;
 				const frac = segLen > 0 ? remaining / segLen : 0;
-				const ix = prev.x + dx * frac;
-				const iy = prev.y + dy * frac;
-				const iw = prev.width + (cur.width - prev.width) * frac;
+				const ix = prev[0] + dx * frac;
+				const iy = prev[1] + dy * frac;
+				const iw = prev[2] + (cur[2] - prev[2]) * frac;
 				segments.push({
-					x0: px(wobbleX(prev.x, prev.y, j - 1)),
-					y0: py(wobbleY(prev.x, prev.y, j - 1)),
+					x0: px(wobbleX(prev[0], prev[1], j - 1)),
+					y0: py(wobbleY(prev[0], prev[1], j - 1)),
 					x1: px(wobbleX(ix, iy, j)),
 					y1: py(wobbleY(ix, iy, j)),
-					width0: prev.width,
+					width0: prev[2],
 					width1: iw,
 					segProgress: (accumulated + remaining / 2) / totalLen
 				});
@@ -488,13 +488,14 @@ function computeTimeline(text, font, config) {
 	const entries = [];
 	let offset = 0;
 	for (const char of chars) {
-		const hasSvg = char in font.glyphs;
-		const duration = hasSvg ? font.glyphTimings[char] ?? 1 : unknownDuration;
+		const glyph = font.glyphData[char];
+		const hasGlyph = !!glyph;
+		const duration = hasGlyph ? glyph.t ?? 1 : unknownDuration;
 		entries.push({
 			char,
 			offset,
 			duration,
-			hasSvg
+			hasGlyph
 		});
 		offset += duration;
 		if (char === "\n") offset += lineGap;
@@ -530,7 +531,7 @@ if (typeof CSS !== "undefined" && "registerProperty" in CSS) for (const prop of
 		initialValue: "0"
 	});
 } catch {}
-function TegakiRenderer({ font, text, children, time: timeProp, onComplete, mode = "canvas", effects, segmentSize, timing, showOverlay, ...props }) {
+function TegakiRenderer({ ref, font, text, children, time: timeProp, onComplete, effects, segmentSize, timing, showOverlay, ...props }) {
 	const resolvedText = text ?? coerceToString(children);
 	const resolvedEffects = useMemo(() => resolveEffects(effects), [effects]);
 	const [seed] = useState(() => Math.random() * 1e3);
@@ -543,24 +544,56 @@ function TegakiRenderer({ font, text, children, time: timeProp, onComplete, mode
 	const controlledTime = timeControl.mode === "controlled" ? timeControl.value : void 0;
 	const defaultTime = timeControl.mode === "uncontrolled" ? timeControl.initialTime ?? 0 : 0;
 	const speed = timeControl.mode === "uncontrolled" ? timeControl.speed ?? 1 : 1;
-	const playing = timeControl.mode === "uncontrolled" ? timeControl.playing ?? true : false;
+	const propPlaying = timeControl.mode === "uncontrolled" ? timeControl.playing ?? true : false;
 	const loop = timeControl.mode === "uncontrolled" ? timeControl.loop ?? false : false;
 	const catchUp = timeControl.mode === "uncontrolled" ? timeControl.catchUp ?? 0 : 0;
 	const onTimeChange = timeControl.mode === "uncontrolled" ? timeControl.onTimeChange : void 0;
+	const [playingOverride, setPlayingOverride] = useState(void 0);
+	const playing = playingOverride ?? propPlaying;
+	const prevPropPlaying = useRef(propPlaying);
+	if (prevPropPlaying.current !== propPlaying) {
+		prevPropPlaying.current = propPlaying;
+		setPlayingOverride(void 0);
+	}
 	const [internalTime, setInternalTime] = useState(defaultTime);
 	const [cssTime, setCssTime] = useState(0);
 	const currentTime = isCss ? cssTime : isControlled ? controlledTime : internalTime;
+	const currentTimeRef = useRef(currentTime);
+	currentTimeRef.current = currentTime;
+	const playingRef = useRef(playing);
+	playingRef.current = playing;
+	const isControlledRef = useRef(isControlled);
+	isControlledRef.current = isControlled;
 	const onTimeChangeRef = useRef(onTimeChange);
 	onTimeChangeRef.current = onTimeChange;
 	const onCompleteRef = useRef(onComplete);
 	onCompleteRef.current = onComplete;
+	const [fontReady, setFontReady] = useState(() => !!font && document.fonts.check(`16px "${font?.family}"`));
+	useEffect(() => {
+		if (!font) {
+			setFontReady(false);
+			return;
+		}
+		if (document.fonts.check(`16px "${font.family}"`)) {
+			setFontReady(true);
+			return;
+		}
+		setFontReady(false);
+		let cancelled = false;
+		font.registerFontFace().then(() => {
+			if (!cancelled) setFontReady(true);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [font]);
 	const fontFamily = font?.family;
 	const emHeight = font ? (font.ascender - font.descender) / font.unitsPerEm : 0;
-	const baselineOffset = font ? font.descender / font.unitsPerEm : 0;
 	const rootRef = useRef(null);
 	const [containerWidth, setContainerWidth] = useState(0);
 	const [fontSize, setFontSize] = useState(0);
 	const [lineHeight, setLineHeight] = useState(0);
+	const [currentColor, setCurrentColor] = useState("");
 	const timeline = useMemo(() => font && resolvedText ? computeTimeline(resolvedText, font, timing) : {
 		entries: [],
 		totalDuration: 0
@@ -580,11 +613,33 @@ function TegakiRenderer({ font, text, children, time: timeProp, onComplete, mode
 			onCompleteRef.current?.();
 		} else if (!isComplete) prevCompletedRef.current = false;
 	});
+	useImperativeHandle(ref, () => ({
+		getElement: () => rootRef.current,
+		getCurrentTime: () => currentTimeRef.current,
+		getDuration: () => totalDurationRef.current,
+		getIsPlaying: () => playingRef.current,
+		getIsComplete: () => totalDurationRef.current > 0 && currentTimeRef.current >= totalDurationRef.current,
+		play: () => {
+			if (!isControlledRef.current) setPlayingOverride(true);
+		},
+		pause: () => {
+			if (!isControlledRef.current) setPlayingOverride(false);
+		},
+		seek: (time) => {
+			if (!isControlledRef.current) setInternalTime(Math.max(0, Math.min(time, totalDurationRef.current)));
+		},
+		restart: () => {
+			if (!isControlledRef.current) {
+				setInternalTime(0);
+				setPlayingOverride(true);
+			}
+		}
+	}), []);
 	useEffect(() => {
 		if (!isControlled) onTimeChangeRef.current?.(internalTime);
 	}, [internalTime, isControlled]);
 	useEffect(() => {
-		if (isControlled || !playing || !font) return;
+		if (isControlled || !playing || !font || !fontReady) return;
 		smoothedBoostRef.current = 0;
 		let lastTs = null;
 		let raf;
@@ -622,32 +677,9 @@ function TegakiRenderer({ font, text, children, time: timeProp, onComplete, mode
 		speed,
 		loop,
 		catchUp,
-		font
+		font,
+		fontReady
 	]);
-	const svgRefs = useRef(/* @__PURE__ */ new Map());
-	const svgRefCallbacks = useRef(/* @__PURE__ */ new Map());
-	const makeSvgRef = useCallback((charIdx) => (node) => {
-		if (node) {
-			node.pauseAnimations();
-			svgRefs.current.set(charIdx, node);
-		} else svgRefs.current.delete(charIdx);
-	}, []);
-	const getSvgRef = useCallback((charIdx) => {
-		let cb = svgRefCallbacks.current.get(charIdx);
-		if (!cb) {
-			cb = makeSvgRef(charIdx);
-			svgRefCallbacks.current.set(charIdx, cb);
-		}
-		return cb;
-	}, [makeSvgRef]);
-	const prevFontRef = useRef(font);
-	const prevModeRef = useRef(mode);
-	if (prevFontRef.current !== font || prevModeRef.current !== mode) {
-		prevFontRef.current = font;
-		prevModeRef.current = mode;
-		svgRefs.current.clear();
-		svgRefCallbacks.current.clear();
-	}
 	useEffect(() => {
 		const el = rootRef.current;
 		if (!el) return;
@@ -657,6 +689,7 @@ function TegakiRenderer({ font, text, children, time: timeProp, onComplete, mode
 				const styles = getComputedStyle(el);
 				setFontSize(Number.parseFloat(styles.fontSize));
 				setLineHeight(Number.parseFloat(styles.lineHeight));
+				setCurrentColor(styles.color);
 			}
 		});
 		ro.observe(el);
@@ -672,15 +705,17 @@ function TegakiRenderer({ font, text, children, time: timeProp, onComplete, mode
 				setFontSize(Number.parseFloat(styles.fontSize));
 				setLineHeight(Number.parseFloat(styles.lineHeight));
 			}
+			if (e.propertyName === "color") setCurrentColor(styles.color);
 			if (e.propertyName === CSS_PROGRESS) setCssTime(Number(styles.getPropertyValue(CSS_PROGRESS)) * totalDurationRef.current);
 		};
 		el.addEventListener("transitionend", onTransition);
 		return () => el.removeEventListener("transitionend", onTransition);
 	}, []);
 	const layout = useMemo(() => {
-		if (!fontFamily || !fontSize || !containerWidth || !resolvedText) return null;
+		if (!fontReady || !fontFamily || !fontSize || !containerWidth || !resolvedText) return null;
 		return computeTextLayout(resolvedText, fontFamily, fontSize, lineHeight, containerWidth);
 	}, [
+		fontReady,
 		resolvedText,
 		fontFamily,
 		fontSize,
@@ -689,21 +724,8 @@ function TegakiRenderer({ font, text, children, time: timeProp, onComplete, mode
 	]);
 	const padH = PADDING_H_EM * fontSize;
 	const padV = fontSize ? Math.max(MIN_PADDING_V_EM * fontSize, (MIN_LINE_HEIGHT_EM * fontSize - lineHeight) / 2) : 0;
-	useLayoutEffect(() => {
-		if (mode !== "svg") return;
-		const entries = timeline.entries;
-		for (let i = 0; i < entries.length; i++) {
-			const entry = entries[i];
-			if (!entry.hasSvg) continue;
-			const svg = svgRefs.current.get(i);
-			if (!svg) continue;
-			const localTime = Math.max(0, Math.min(currentTime - entry.offset, entry.duration));
-			svg.setCurrentTime(localTime);
-		}
-	});
 	const canvasRef = useRef(null);
 	useLayoutEffect(() => {
-		if (mode !== "canvas") return;
 		const canvas = canvasRef.current;
 		if (!canvas || !font?.glyphData || !layout || !fontSize) return;
 		const dpr = window.devicePixelRatio || 1;
@@ -721,7 +743,7 @@ function TegakiRenderer({ font, text, children, time: timeProp, onComplete, mode
 		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
 		ctx.clearRect(0, 0, w, h);
 		ctx.translate(padH, padV);
-		const color = getComputedStyle(el).color;
+		const color = currentColor || getComputedStyle(el).color;
 		const halfLeading = (lineHeight - emHeight * fontSize) / 2;
 		const characters = graphemes(resolvedText);
 		let y = 0;
@@ -734,7 +756,7 @@ function TegakiRenderer({ font, text, children, time: timeProp, onComplete, mode
 				const charWidth = layout.charWidths[charIdx] ?? 0;
 				const kerning = layout.kernings[charIdx] ?? 0;
 				const glyph = font.glyphData[char];
-				if (glyph && entry.hasSvg) {
+				if (glyph && entry.hasGlyph) {
 					const localTime = Math.max(0, Math.min(currentTime - entry.offset, entry.duration));
 					const glyphY = y + halfLeading;
 					drawGlyph(ctx, glyph, {
@@ -745,7 +767,7 @@ function TegakiRenderer({ font, text, children, time: timeProp, onComplete, mode
 						ascender: font.ascender,
 						descender: font.descender
 					}, localTime, font.lineCap, color, resolvedEffects, seed + charIdx, segmentSize);
-				} else if (!entry.hasSvg && currentTime >= entry.offset + entry.duration) {
+				} else if (!entry.hasGlyph && currentTime >= entry.offset + entry.duration) {
 					const baseline = y + halfLeading + font.ascender / font.unitsPerEm * fontSize;
 					drawFallbackGlyph(ctx, char, x, baseline, fontSize, fontFamily, color, resolvedEffects, seed + charIdx);
 				}
@@ -754,7 +776,6 @@ function TegakiRenderer({ font, text, children, time: timeProp, onComplete, mode
 			y += lineHeight;
 		}
 	}, [
-		mode,
 		currentTime,
 		timeline,
 		layout,
@@ -766,71 +787,16 @@ function TegakiRenderer({ font, text, children, time: timeProp, onComplete, mode
 		emHeight,
 		padH,
 		padV,
+		currentColor,
 		resolvedEffects,
 		seed,
 		segmentSize
 	]);
-	const lineElements = useMemo(() => {
-		if (mode !== "svg" || !font || !resolvedText) return null;
-		const characters = graphemes(resolvedText);
-		const renderGlyph = (charIdx) => {
-			const char = characters[charIdx];
-			const entry = timeline.entries[charIdx];
-			const GlyphSvg = font.glyphs[char];
-			const width = layout?.charWidths[charIdx] ?? 1;
-			const kerning = layout?.kernings[charIdx];
-			if (char === "\n") return null;
-			if (GlyphSvg) return /* @__PURE__ */ jsx(GlyphSvg, {
-				ref: getSvgRef(charIdx),
-				style: {
-					display: "inline-block",
-					verticalAlign: `${baselineOffset}em`,
-					width: `${width}em`,
-					marginRight: kerning ? `${kerning}em` : void 0,
-					height: `${emHeight}em`,
-					overflow: "visible"
-				}
-			}, charIdx);
-			return /* @__PURE__ */ jsx("span", {
-				style: {
-					fontFamily,
-					visibility: currentTime >= entry.offset + entry.duration ? "visible" : "hidden"
-				},
-				children: char
-			}, charIdx);
-		};
-		if (layout) return layout.lines.map((lineIndices, lineIdx) => {
-			return /* @__PURE__ */ jsx("div", {
-				style: {
-					whiteSpace: "nowrap",
-					height: lineIndices.every((i) => characters[i] === "\n") ? "1lh" : void 0,
-					lineHeight: `${lineHeight}px`
-				},
-				children: lineIndices.map(renderGlyph)
-			}, lineIdx);
-		});
-		return characters.length > 0 ? /* @__PURE__ */ jsx("div", {
-			style: { whiteSpace: "nowrap" },
-			children: characters.map((_, i) => renderGlyph(i))
-		}) : null;
-	}, [
-		mode,
-		resolvedText,
-		timeline,
-		font,
-		layout,
-		getSvgRef,
-		baselineOffset,
-		emHeight,
-		currentTime,
-		fontFamily,
-		lineHeight
-	]);
-	if (!font || !resolvedText) return /* @__PURE__ */ jsx("div", {
+	if (!font || !resolvedText || !fontReady) return /* @__PURE__ */ jsx("div", {
 		ref: rootRef,
 		...props
 	});
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsx("div", {
 		ref: rootRef,
 		...props,
 		style: {
@@ -843,55 +809,49 @@ function TegakiRenderer({ font, text, children, time: timeProp, onComplete, mode
 			[CSS_TIME]: currentTime,
 			[CSS_PROGRESS]: timeline.totalDuration > 0 ? currentTime / timeline.totalDuration : 0
 		},
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				ref: sentinelRef,
-				"aria-hidden": true,
-				style: {
-					position: "absolute",
-					width: 0,
-					overflow: "hidden",
-					pointerEvents: "none",
-					fontSize: "inherit",
-					lineHeight: "inherit",
-					visibility: "hidden",
-					transition: isCss ? `font-size 0.001s, line-height 0.001s, ${CSS_PROGRESS} 0.001s` : "font-size 0.001s, line-height 0.001s"
-				},
-				children: "\xA0"
-			}),
-			mode === "canvas" ? /* @__PURE__ */ jsx("canvas", {
-				ref: canvasRef,
-				"aria-hidden": true,
-				style: {
-					position: "absolute",
-					inset: `${-padV}px ${-padH}px`,
-					width: `calc(100% + ${padH * 2}px)`,
-					height: `calc(100% + ${padV * 2}px)`,
-					pointerEvents: "none"
-				}
-			}) : /* @__PURE__ */ jsx("div", {
-				style: {
-					position: "absolute",
-					inset: 0,
-					pointerEvents: "none",
-					fontFamily
-				},
-				children: lineElements
-			}),
-			/* @__PURE__ */ jsx("div", {
-				style: {
-					userSelect: "auto",
-					whiteSpace: "pre-wrap",
-					overflowWrap: "break-word",
-					paddingRight: 1,
-					WebkitTextFillColor: showOverlay ? void 0 : "transparent",
-					fontFamily,
-					color: showOverlay ? "rgba(255, 0, 0, 0.4)" : void 0,
-					fontFeatureSettings: "'calt' 0, 'liga' 0"
-				},
-				children: resolvedText
-			})
-		]
+		children: /* @__PURE__ */ jsxs("div", {
+			style: { position: "relative" },
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					ref: sentinelRef,
+					"aria-hidden": true,
+					style: {
+						position: "absolute",
+						width: 0,
+						overflow: "hidden",
+						pointerEvents: "none",
+						fontSize: "inherit",
+						lineHeight: "inherit",
+						visibility: "hidden",
+						transition: isCss ? `font-size 0.001s, line-height 0.001s, color 0.001s, ${CSS_PROGRESS} 0.001s` : "font-size 0.001s, line-height 0.001s, color 0.001s"
+					},
+					children: "\xA0"
+				}),
+				/* @__PURE__ */ jsx("canvas", {
+					ref: canvasRef,
+					"aria-hidden": true,
+					style: {
+						position: "absolute",
+						inset: `${-padV}px ${-padH}px`,
+						width: `calc(100% + ${padH * 2}px)`,
+						height: `calc(100% + ${padV * 2}px)`,
+						pointerEvents: "none"
+					}
+				}),
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						userSelect: "auto",
+						whiteSpace: "pre-wrap",
+						overflowWrap: "break-word",
+						paddingRight: 1,
+						WebkitTextFillColor: showOverlay ? void 0 : "transparent",
+						fontFamily,
+						color: showOverlay ? "rgba(255, 0, 0, 0.4)" : void 0
+					},
+					children: resolvedText
+				})
+			]
+		})
 	});
 }
 //#endregion