@glissade/scene 0.5.0-pre.3 → 0.5.0-pre.5

package/dist/index.d.ts

@@ -80,11 +80,25 @@ interface EditMark {
   /** the full visible string AFTER this keystroke */
   value: string;
 }
+/** One edit step's phrase boundary — for driving sibling UI (a counter chip, a
+ * progress dot) off the same source instead of recomputing wall-clock spans. */
+interface StepMark {
+  /** index of the step in the edit script */
+  index: number;
+  /** time this step began (before its first keystroke) */
+  start: number;
+  /** time this step completed (after its last keystroke and its hold) */
+  end: number;
+  /** the full visible string after this step */
+  value: string;
+}
 interface TypewriterResult {
   /** hold-key string track for the Text node's `<id>/text` target */
   track: Track<string>;
   /** every keystroke (insert + delete), for keystroke SFX */
   marks: EditMark[];
+  /** one entry per edit step, with its start/end times — phrase boundaries */
+  steps: StepMark[];
   /** time of the last keystroke or hold — the performance's end */
   duration: number;
 }
@@ -133,7 +147,8 @@ declare function pointAtLength(path: PathValue, s: number): Vec2;
 interface FollowPathProps extends NodeProps {
   /** the node to move along the path; its position (and rotation, if orient) is owned by this */
   target: Node;
-  path: PathValue;
+  /** a static PathValue, or a Path node followed LIVE (re-sampled as its `data` morphs) */
+  path: PathValue | Path;
   /** 0→1 position along the path's arc length; default 1 (the end). Track `<id>/progress`. */
   progress?: PropInit<number>;
   /** rotate the target to the path tangent — a cursor that points where it heads; default false */
@@ -154,7 +169,8 @@ declare class FollowPath extends Node {
   constructor(props: FollowPathProps);
   protected draw(): void;
 }
-/** `children: [route, cursor, followPath(cursor, route, { orient: true })]` — cursor traces the route. */
+/** `children: [route, cursor, followPath(cursor, route, { orient: true })]` — cursor traces the route.
+ * Pass the Path *node* to follow it as it morphs; pass a PathValue for a fixed route. */
 declare function followPath(target: Node, path: PathValue | Path, props?: Omit<FollowPathProps, 'target' | 'path'>): FollowPath;
 //#endregion
 //#region src/tokenHighlight.d.ts
@@ -399,4 +415,4 @@ declare function bindScene(scene: Scene, doc: Timeline): BindingCacheEntry;
  */
 declare function evaluate(scene: Scene, doc: Timeline, t: number): DisplayList;
 //#endregion
-export { type AnchorSpec, type BindablePropTarget, type BlendMode, type CanvasLike, Circle, ColdAssetError, type Ctx2DLike, type DisplayList, type DisplayListBuilder, type DrawCommand, DuplicateNodeIdError, type EditMark, type EvalContext, type FilterSpec, FilterValidationError, FollowPath, type FollowPathProps, type FontSpec, Group, Highlight, type HighlightProps, type HitArea, IDENTITY, type ImageHandle, ImageNode, type ImageProps, type LayoutBox, type LayoutChildSpec, type LayoutContainerSpec, type LayoutEngine, LayoutEngineMissingError, type LineBox, type Mat2x3, Node, type NodeProps, type Paint, Path, type PathLike, type PathProps, type PathSampler, type PathSeg, type PropInit, Raster2D, type Raster2DHost, Rect, type Rect$1 as RectShape, type Resource, type ResourceId, type RevealMark, type Scene, type SceneInit, type SceneModule, type ShaderCaps, ShaderEffect, type ShaderEffectProps, type ShaderRef, type ShapeProps, type StrokeStyle, Text, TextCursor, type TextCursorProps, type TextMeasurer, type TextMetricsLite, type TextProps, TokenHighlight, type TokenHighlightProps, TokenMatchError, type TokenRange, type TypeEdit, type TypewriterResult, Video, type VideoFrameSource, type VideoProps, type WordBox, applyToPoint, bindScene, breakLines, createDisplayListBuilder, createScene, estimatingMeasurer, evaluate, filtersToCanvasFilter, followPath, fontString, fromTRS, getLayoutEngine, glow, highlight, invert, matEquals, matchTokenRun, motionPath, multiply, pathLength, pointAtLength, quantize, requireLayoutEngine, resolveAnchor, revealSchedule, roundedRectSegs, segmentGraphemes, segmentWords, setDefaultMeasurer, setLayoutEngine, textCursor, tokenHighlight, typewriter, validateFilters };
+export { type AnchorSpec, type BindablePropTarget, type BlendMode, type CanvasLike, Circle, ColdAssetError, type Ctx2DLike, type DisplayList, type DisplayListBuilder, type DrawCommand, DuplicateNodeIdError, type EditMark, type EvalContext, type FilterSpec, FilterValidationError, FollowPath, type FollowPathProps, type FontSpec, Group, Highlight, type HighlightProps, type HitArea, IDENTITY, type ImageHandle, ImageNode, type ImageProps, type LayoutBox, type LayoutChildSpec, type LayoutContainerSpec, type LayoutEngine, LayoutEngineMissingError, type LineBox, type Mat2x3, Node, type NodeProps, type Paint, Path, type PathLike, type PathProps, type PathSampler, type PathSeg, type PropInit, Raster2D, type Raster2DHost, Rect, type Rect$1 as RectShape, type Resource, type ResourceId, type RevealMark, type Scene, type SceneInit, type SceneModule, type ShaderCaps, ShaderEffect, type ShaderEffectProps, type ShaderRef, type ShapeProps, type StepMark, type StrokeStyle, Text, TextCursor, type TextCursorProps, type TextMeasurer, type TextMetricsLite, type TextProps, TokenHighlight, type TokenHighlightProps, TokenMatchError, type TokenRange, type TypeEdit, type TypewriterResult, Video, type VideoFrameSource, type VideoProps, type WordBox, applyToPoint, bindScene, breakLines, createDisplayListBuilder, createScene, estimatingMeasurer, evaluate, filtersToCanvasFilter, followPath, fontString, fromTRS, getLayoutEngine, glow, highlight, invert, matEquals, matchTokenRun, motionPath, multiply, pathLength, pointAtLength, quantize, requireLayoutEngine, resolveAnchor, revealSchedule, roundedRectSegs, segmentGraphemes, segmentWords, setDefaultMeasurer, setLayoutEngine, textCursor, tokenHighlight, typewriter, validateFilters };

package/dist/index.js

@@ -185,7 +185,10 @@ function typewriter(target, edits, opts = {}) {
 	const shown = [];
 	const keys = [key(start, "", { interp: "hold" })];
 	const marks = [];
-	for (const edit of edits) {
+	const steps = [];
+	for (let ei = 0; ei < edits.length; ei++) {
+		const edit = edits[ei];
+		const stepStart = t;
 		const per = edit.perChar ?? globalPer;
 		if (edit.type !== void 0) for (const g of segmentGraphemes(edit.type)) {
 			t += per;
@@ -212,10 +215,17 @@ function typewriter(target, edits, opts = {}) {
 			});
 		}
 		if (edit.hold !== void 0) t += edit.hold;
+		steps.push({
+			index: ei,
+			start: stepStart,
+			end: t,
+			value: shown.join("")
+		});
 	}
 	return {
 		track: track(target, "string", keys),
 		marks,
+		steps,
 		duration: t
 	};
 }
@@ -355,25 +365,36 @@ var FollowPath = class extends Node {
 		if (typeof props.progress === "function") this.progress.bindSource(props.progress);
 		else if (props.progress !== void 0) this.progress.set(props.progress);
 		this.registerTarget("progress", this.progress);
-		const sampler = motionPath(props.path, props.samplesPerSegment !== void 0 ? { samplesPerSegment: props.samplesPerSegment } : {});
-		props.target.position.bindSource(() => sampler.atProgress(this.progress()));
+		const sOpts = props.samplesPerSegment !== void 0 ? { samplesPerSegment: props.samplesPerSegment } : {};
+		const getPath = props.path instanceof Path ? () => props.path.data() : () => props.path;
+		let cachedPath = getPath();
+		let cachedSampler = motionPath(cachedPath, sOpts);
+		const sampler = () => {
+			const pv = getPath();
+			if (pv !== cachedPath) {
+				cachedPath = pv;
+				cachedSampler = motionPath(pv, sOpts);
+			}
+			return cachedSampler;
+		};
+		props.target.position.bindSource(() => sampler().atProgress(this.progress()));
 		if (props.orient) {
 			const offset = props.orientOffset ?? 0;
 			props.target.rotation.bindSource(() => {
-				const t = sampler.tangentAtProgress(this.progress());
+				const t = sampler().tangentAtProgress(this.progress());
 				return Math.atan2(t[1], t[0]) * 180 / Math.PI + offset;
 			});
 		}
 	}
 	draw() {}
 };
-/** `children: [route, cursor, followPath(cursor, route, { orient: true })]` — cursor traces the route. */
+/** `children: [route, cursor, followPath(cursor, route, { orient: true })]` — cursor traces the route.
+* Pass the Path *node* to follow it as it morphs; pass a PathValue for a fixed route. */
 function followPath(target, path, props = {}) {
-	const pv = path instanceof Path ? path.data() : path;
 	return new FollowPath({
 		...props,
 		target,
-		path: pv
+		path
 	});
 }
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glissade/scene",
-  "version": "0.5.0-pre.3",
+  "version": "0.5.0-pre.5",
   "description": "glissade scene graph: nodes, transforms, DisplayList emission. Renderer-agnostic; zero DOM/Node dependencies.",
   "license": "Apache-2.0",
   "type": "module",
@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "yoga-layout": "^3.2.1",
-    "@glissade/core": "0.5.0-pre.3"
+    "@glissade/core": "0.5.0-pre.5"
   },
   "repository": {
     "type": "git",