@motionscript/code 0.1.0-alpha.0 → 0.1.0-alpha.10

package/src/nodes.ts

@@ -4,15 +4,13 @@ import { Code } from "./node";
  * Every node type this package publishes.
  *
  * A host registers these by handing the array to an engine —
- * `new Engine(platform, { nodes: NODES })` — which reads each class's `@node()`
- * key. The decorator only *declares* that key: nothing is registered by the mere
- * act of importing a module, so a registry holds exactly what its owner asked
- * for and two engines in one process can differ about it.
+ * `new Engine(platform, { nodes: NODES })` — which reads each component's key.
+ * Defining a component only *declares* that key: nothing is registered by
+ * importing a module, so a registry holds exactly what its owner asked for.
  *
- * Listing class **values** is also what survives bundling. This package declares
- * `sideEffects: false`, which licenses a bundler to drop a module nothing
- * imports a value from, and a document names a node type by string — so
- * `import "./node"` for its side effect is exactly what gets shaken out, where an
- * array of bindings is a data dependency that cannot be.
+ * Listing the component **values** is also what survives bundling: this package
+ * declares `sideEffects: false`, and a document names a node type by string, so
+ * an import kept only for its side effect is exactly what gets shaken out.
  */
-export const NODES = [Code];
+// Typed by name, so the declaration names each component rather than spelling out its type through core.
+export const NODES: (typeof Code)[] = [Code];

package/src/render.ts

@@ -1,8 +1,8 @@
-import { RenderContext2D, Graphics2D, NormalizedColor, parseColor, lerpNumber } from "@motionscript/core";
+import { RenderContext2D, Graphics2D, NormalizedColor, parseColor, lerpNumber } from "@motionscript/sdk";
 import type { CodeLayout, CodeMetrics } from "./layout";
 import type { IdLine } from "./tokens";
 import { windowProgress, moveProgress } from "./transitions";
-import type { TokenState, StructuralTransition } from "./transitions";
+import type { TokenState, StructuralTransition, RowBand, RowsTransition } from "./transitions";
 import type { TokenAdvanceCache } from "./measure-cache";
 
 /** Colour of a token the grammar had no opinion about. */
@@ -63,8 +63,16 @@ export interface DrawCodeState {
     tokenStates: Map<number, TokenState>;
     /** Whether a highlight (persistent dim, or a highlight()/resetHighlight() cross-fade) is currently engaged. */
     highlightActive: boolean;
+    /** The settled row bands, and the change between two sets of them in flight, if any. */
+    rowBands?: RowBand[];
+    rowsEdit?: RowsTransition | null;
+    /** The node's laid-out width, which a band spans when it is wider than the block. */
+    boxW?: number;
 }
 
+/** What a frame is drawn onto: somewhere to draw, and the face's measurements. A render context is one. */
+export type CodeCanvas = Pick<RenderContext2D, "draw" | "measureText">;
+
 /**
  * Draw one frame of a code listing: the settled structure, or — mid
  * structural edit — the two structures it is interpolating between (what
@@ -72,7 +80,7 @@ export interface DrawCodeState {
  * fades/slides in where it lands). Pure over `state`; touches nothing but
  * `draw`.
  */
-export function drawCode(draw: RenderContext2D, state: DrawCodeState): void {
+export function drawCode(draw: CodeCanvas, state: DrawCodeState): void {
     const { tokenLines, metrics, advanceCache, from, to, edit, tokenStates: dim } = state;
 
     const progress = edit ? edit.progress : 1;
@@ -87,6 +95,8 @@ export function drawCode(draw: RenderContext2D, state: DrawCodeState): void {
     // code text begins.
     const numberRight = -blockW / 2 + metrics.padding.left + gutter - gutterGap;
 
+    drawRowBands(draw, state, Math.max(blockW, state.boxW ?? 0), pMove);
+
     const drawNumber = (label: string, y: number, opacity: number): void => {
         if (opacity <= 0) return;
         const labelW = advanceCache.advance(draw, label, metrics.fontSize, metrics.fontFamily, 0);
@@ -201,6 +211,64 @@ export function drawCode(draw: RenderContext2D, state: DrawCodeState): void {
     if (metrics.showLineNumbers) drawLineNumbers(state, drawNumber, pMove, pIn, pOut);
 }
 
+/** A band's top and bottom edge this frame, or `null` when neither of its rows is in the listing any more. */
+function bandEdges(band: RowBand, state: DrawCodeState, pMove: number): { top: number; bottom: number } | null {
+    const { from, to, metrics } = state;
+    const half = (metrics.fontSize * metrics.lineHeight) / 2;
+    const centre = (id: number): number | null => {
+        const toIndex = to.lineIndex.get(id);
+        const fromIndex = from.lineIndex.get(id);
+        if (toIndex !== undefined && fromIndex !== undefined) return lerpNumber(from.lineY[fromIndex], to.lineY[toIndex], pMove);
+        if (toIndex !== undefined) return to.lineY[toIndex];
+        return fromIndex === undefined ? null : from.lineY[fromIndex];
+    };
+    const first = centre(band.startId);
+    const last = centre(band.endId);
+    if (first === null && last === null) return null;
+    return { top: (first ?? last as number) + half, bottom: (last ?? first as number) - half };
+}
+
+/**
+ * Draw the row bands, under the text and across the whole block. A band rides
+ * its rows through a structural edit; between two sets, bands paired by position
+ * slide and recolour while an unpaired one fades.
+ */
+function drawRowBands(draw: CodeCanvas, state: DrawCodeState, width: number, pMove: number): void {
+    const { rowBands = [], rowsEdit = null } = state;
+    const paint = (top: number, bottom: number, color: NormalizedColor, radius: number, opacity: number): void => {
+        if (opacity <= 0 || top <= bottom) return;
+        draw.draw(new Graphics2D()
+            .rect({ x: 0, y: (top + bottom) / 2, width, height: top - bottom, cornerRadius: radius })
+            .fill([{ type: "solid", color, opacity }]));
+    };
+
+    if (!rowsEdit) {
+        for (const band of rowBands) {
+            const edges = bandEdges(band, state, pMove);
+            if (edges) paint(edges.top, edges.bottom, band.color, band.radius, 1);
+        }
+        return;
+    }
+
+    const p = rowsEdit.progress;
+    for (let i = 0; i < Math.max(rowsEdit.from.length, rowsEdit.to.length); i++) {
+        const was = rowsEdit.from[i];
+        const next = rowsEdit.to[i];
+        const a = was ? bandEdges(was, state, pMove) : null;
+        const b = next ? bandEdges(next, state, pMove) : null;
+        if (a && b) {
+            paint(
+                lerpNumber(a.top, b.top, p), lerpNumber(a.bottom, b.bottom, p),
+                lerpColor(was.color, next.color, p), lerpNumber(was.radius, next.radius, p), 1,
+            );
+        } else if (a) {
+            paint(a.top, a.bottom, was.color, was.radius, 1 - p);
+        } else if (b) {
+            paint(b.top, b.bottom, next.color, next.radius, p);
+        }
+    }
+}
+
 /**
  * Draw the gutter — one number per *slot*, not one per row.
  *

package/src/style.ts

@@ -22,7 +22,7 @@ export interface CodeStyleRule {
  * `@lezer/highlight`'s {@link tagHighlighter} resolves precedence.
  */
 export interface CodeHighlightStyle {
-    /** Stable name, used as the highlighter cache key. */
+    /** Stable name, used to register the style and to refer to it from a `theme` prop. */
     name: string;
     /** Color applied to text with no matching tag. */
     defaultColor: string;
@@ -231,21 +231,25 @@ export type CodeThemeName = keyof typeof BUILTIN_THEMES;
  */
 export type CodeTheme = CodeThemeName | (string & {}) | CodeHighlightStyle;
 
-// Cache one compiled Highlighter per style name. Compiling builds a tag-rule
+// Cache one compiled Highlighter per style *object*. Compiling builds a tag-rule
 // matcher; the parsed result is pure data so it's safe to share across Code nodes.
-const compiledByName = new Map<string, Highlighter>();
+// Keyed by the object rather than its `name`: two styles may share a name (an
+// inline theme, or one re-registered under the same name with new colours), and
+// the second must not colour with the first one's rules. A WeakMap, so a style
+// nothing refers to any more takes its matcher with it.
+const compiledByStyle = new WeakMap<CodeHighlightStyle, Highlighter>();
 
 /**
  * Compile a {@link CodeHighlightStyle} into a `@lezer/highlight` {@link Highlighter}
- * whose "class" output is the literal color string for each tag. Cached by style
- * name so repeated lookups (every tokenize) don't rebuild the matcher.
+ * whose "class" output is the literal color string for each tag. Cached per style
+ * object so repeated lookups (every tokenize) don't rebuild the matcher.
  */
 export function compileStyle(style: CodeHighlightStyle): Highlighter {
-    const cached = compiledByName.get(style.name);
+    const cached = compiledByStyle.get(style);
     if (cached) return cached;
     const highlighter = tagHighlighter(
         style.rules.map(rule => ({ tag: rule.tag, class: rule.color })),
     );
-    compiledByName.set(style.name, highlighter);
+    compiledByStyle.set(style, highlighter);
     return highlighter;
 }

package/src/tokens.ts

@@ -1,4 +1,4 @@
-import { canHighlight, highlightToTokens } from "./highlight";
+import { canHighlight, highlightToTokens, normalizeSource, resolveTheme } from "./highlight";
 import { CodeTheme } from "./style";
 
 // IdToken is our internal wrapper around a highlighter token that gives every
@@ -36,7 +36,11 @@ export function tokenizeCodeToIdLines(code: string, language: string, theme: Cod
     // Until the language parser has loaded (it streams in via the asset loader),
     // fall back to flat, uncolored lines instead of throwing on an unloaded
     // grammar. The node re-tokenizes once the load completes.
+    code = normalizeSource(code);
     if (!canHighlight(language, theme)) {
+        // Resolved for its warning: an unknown theme is reported whether or not
+        // the grammar has landed yet.
+        resolveTheme(theme);
         return code.split('\n').map(line => makeIdLine([makeIdToken(line, '#d1d5db')]));
     }
     return highlightToTokens(code, language, theme).map(line =>

package/src/transitions.ts

@@ -1,3 +1,4 @@
+import type { NormalizedColor } from "@motionscript/sdk";
 import type { CodeLayout } from "./layout";
 import { IdLine } from "./tokens";
 
@@ -77,7 +78,26 @@ export interface StructuralTransition {
     toLayout: CodeLayout | null;
 }
 
-export type CodeTransition = DimTransition | StructuralTransition;
+/** A filled band behind whole rows: the first and last line it covers, by line id so it follows them through an edit, and its paint. */
+export interface RowBand {
+    startId: number;
+    endId: number;
+    color: NormalizedColor;
+    radius: number;
+}
+
+/**
+ * One set of row bands becoming another. Bands at the same position in both
+ * lists travel and recolour; one with no counterpart fades.
+ */
+export interface RowsTransition {
+    kind: "rows";
+    from: RowBand[];
+    to: RowBand[];
+    progress: number;
+}
+
+export type CodeTransition = DimTransition | StructuralTransition | RowsTransition;
 
 /**
  * Decides *when* (in normalized transition time) each part of a structural