@revideo/2d 0.1.0

package/lib/components/Code.js

@@ -0,0 +1,325 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { BBox, createSignal, ExperimentalError, lazy, map, unwrap, } from '@revideo/core';
+import { CodeCursor, codeSignal, CodeSignalContext, DefaultHighlightStyle, findAllCodeRanges, isPointInCodeSelection, LezerHighlighter, lines, parseCodeSelection, resolveScope, } from '../code';
+import { computed, initial, nodeName, parser, signal } from '../decorators';
+import { useScene2D } from '../scenes';
+import { Shape } from './Shape';
+/**
+ * A node for displaying and animating code.
+ *
+ * @experimental
+ *
+ * @preview
+ * ```tsx editor
+ * import {parser} from '@lezer/javascript';
+ * import {Code, LezerHighlighter, makeScene2D} from '@revideo/2d';
+ * import {createRef} from '@revideo/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   LezerHighlighter.registerParser(parser);
+ *   const code = createRef<Code>();
+ *
+ *   view.add(
+ *     <Code
+ *       ref={code}
+ *       offset={-1}
+ *       position={view.size().scale(-0.5).add(60)}
+ *       fontFamily={'JetBrains Mono, monospace'}
+ *       fontSize={36}
+ *       code={`\
+ * function hello() {
+ *   console.log('Hello');
+ * }`}
+ *     />,
+ *   );
+ *
+ *   yield* code()
+ *     .code(
+ *       `\
+ * function hello() {
+ *   console.warn('Hello World');
+ * }`,
+ *       1,
+ *     )
+ *     .wait(0.5)
+ *     .back(1)
+ *     .wait(0.5);
+ * });
+ * ```
+ */
+let Code = class Code extends Shape {
+    /**
+     * Create a standalone code signal.
+     *
+     * @param initial - The initial code.
+     * @param highlighter - Custom highlighter to use.
+     * @param dialect - Custom dialect to use.
+     */
+    static createSignal(initial, highlighter, dialect) {
+        return new CodeSignalContext(initial, undefined, highlighter, dialect).toSignal();
+    }
+    *tweenSelection(value, duration, timingFunction) {
+        this.oldSelection = this.selection();
+        this.selection(value);
+        this.selectionProgress(0);
+        yield* this.selectionProgress(1, duration, timingFunction);
+        this.selectionProgress(null);
+        this.oldSelection = null;
+    }
+    /**
+     * Get the currently displayed code as a string.
+     */
+    parsed() {
+        return resolveScope(this.code(), scope => unwrap(scope.progress) > 0.5);
+    }
+    highlighterCache() {
+        const highlighter = this.highlighter();
+        if (!highlighter || !highlighter.initialize())
+            return null;
+        const code = this.code();
+        const before = resolveScope(code, false);
+        const after = resolveScope(code, true);
+        const dialect = this.dialect();
+        return {
+            before: highlighter.prepare(before, dialect),
+            after: highlighter.prepare(after, dialect),
+        };
+    }
+    get cursor() {
+        this.cursorCache ?? (this.cursorCache = new CodeCursor(this));
+        return this.cursorCache;
+    }
+    constructor(props) {
+        super({
+            fontFamily: 'monospace',
+            ...props,
+        });
+        this.oldSelection = null;
+        this.selectionProgress = createSignal(null);
+        if (!useScene2D().experimentalFeatures) {
+            throw new ExperimentalError('The Code node is an experimental feature');
+        }
+    }
+    /**
+     * Create a child code signal.
+     *
+     * @param initial - The initial code.
+     */
+    createSignal(initial) {
+        return new CodeSignalContext(initial, this, this.highlighter, this.dialect).toSignal();
+    }
+    /**
+     * Find all code ranges that match the given pattern.
+     *
+     * @param pattern - Either a string or a regular expression to match.
+     */
+    findAllRanges(pattern) {
+        return findAllCodeRanges(this.parsed(), pattern);
+    }
+    /**
+     * Find the first code range that matches the given pattern.
+     *
+     * @param pattern - Either a string or a regular expression to match.
+     */
+    findFirstRange(pattern) {
+        return (findAllCodeRanges(this.parsed(), pattern, 1)[0] ?? [
+            [0, 0],
+            [0, 0],
+        ]);
+    }
+    /**
+     * Find the last code range that matches the given pattern.
+     *
+     * @param pattern - Either a string or a regular expression to match.
+     */
+    findLastRange(pattern) {
+        return (findAllCodeRanges(this.parsed(), pattern).at(-1) ?? [
+            [0, 0],
+            [0, 0],
+        ]);
+    }
+    /**
+     * Return the bounding box of the given point (character) in the code.
+     *
+     * @remarks
+     * The returned bound box is in local space of the `Code` node.
+     *
+     * @param point - The point to get the bounding box for.
+     */
+    getPointBbox(point) {
+        const [line, column] = point;
+        const drawingInfo = this.drawingInfo();
+        let match;
+        for (const info of drawingInfo.fragments) {
+            if (info.cursor.y < line) {
+                match = info;
+                continue;
+            }
+            if (info.cursor.y === line && info.cursor.x < column) {
+                match = info;
+                continue;
+            }
+            break;
+        }
+        if (!match)
+            return new BBox();
+        const size = this.computedSize();
+        return new BBox(match.position
+            .sub(size.scale(0.5))
+            .addX(match.characterSize.x * (column - match.cursor.x)), match.characterSize);
+    }
+    /**
+     * Return bounding boxes of all characters in the selection.
+     *
+     * @remarks
+     * The returned bound boxes are in local space of the `Code` node.
+     * Each line of code has a separate bounding box.
+     *
+     * @param selection - The selection to get the bounding boxes for.
+     */
+    getSelectionBbox(selection) {
+        const size = this.computedSize();
+        const range = parseCodeSelection(selection);
+        const drawingInfo = this.drawingInfo();
+        const bboxes = [];
+        let current = null;
+        let line = 0;
+        let column = 0;
+        for (const info of drawingInfo.fragments) {
+            if (info.cursor.y !== line) {
+                line = info.cursor.y;
+                if (current) {
+                    bboxes.push(current);
+                    current = null;
+                }
+            }
+            column = info.cursor.x;
+            for (let i = 0; i < info.text.length; i++) {
+                if (isPointInCodeSelection([line, column], range)) {
+                    const bbox = new BBox(info.position
+                        .sub(size.scale(0.5))
+                        .addX(info.characterSize.x * (column - info.cursor.x)), info.characterSize);
+                    if (!current) {
+                        current = bbox;
+                    }
+                    else {
+                        current = current.union(bbox);
+                    }
+                }
+                else if (current) {
+                    bboxes.push(current);
+                    current = null;
+                }
+                column++;
+            }
+        }
+        if (current) {
+            bboxes.push(current);
+        }
+        return bboxes;
+    }
+    drawingInfo() {
+        this.requestFontUpdate();
+        const context = this.cacheCanvas();
+        const code = this.code();
+        context.save();
+        this.applyStyle(context);
+        this.applyText(context);
+        this.cursor.setupDraw(context);
+        this.cursor.drawScope(code);
+        const info = this.cursor.getDrawingInfo();
+        context.restore();
+        return info;
+    }
+    desiredSize() {
+        this.requestFontUpdate();
+        const context = this.cacheCanvas();
+        const code = this.code();
+        context.save();
+        this.applyStyle(context);
+        this.applyText(context);
+        this.cursor.setupMeasure(context);
+        this.cursor.measureSize(code);
+        const size = this.cursor.getSize();
+        context.restore();
+        return size;
+    }
+    draw(context) {
+        this.requestFontUpdate();
+        this.applyStyle(context);
+        this.applyText(context);
+        const size = this.computedSize();
+        const drawingInfo = this.drawingInfo();
+        context.save();
+        context.translate(-size.width / 2, -size.height / 2 + drawingInfo.verticalOffset);
+        const drawHooks = this.drawHooks();
+        for (const info of drawingInfo.fragments) {
+            context.save();
+            context.globalAlpha *= info.alpha;
+            drawHooks.token(context, info.text, info.position, info.fill, info.time);
+            context.restore();
+        }
+        context.restore();
+        this.drawChildren(context);
+    }
+    applyText(context) {
+        super.applyText(context);
+        context.font = this.styles.font;
+        context.textBaseline = 'top';
+        if ('letterSpacing' in context) {
+            context.letterSpacing = this.styles.letterSpacing;
+        }
+    }
+    collectAsyncResources() {
+        super.collectAsyncResources();
+        this.highlighter()?.initialize();
+    }
+};
+__decorate([
+    initial(''),
+    signal()
+], Code.prototype, "dialect", void 0);
+__decorate([
+    initial(() => Code.defaultHighlighter),
+    signal()
+], Code.prototype, "highlighter", void 0);
+__decorate([
+    codeSignal()
+], Code.prototype, "code", void 0);
+__decorate([
+    initial({
+        token(ctx, text, position, color, selection) {
+            ctx.fillStyle = color;
+            ctx.globalAlpha *= map(0.2, 1, selection);
+            ctx.fillText(text, position.x, position.y);
+        },
+    }),
+    signal()
+], Code.prototype, "drawHooks", void 0);
+__decorate([
+    initial(lines(0, Infinity)),
+    parser(parseCodeSelection),
+    signal()
+], Code.prototype, "selection", void 0);
+__decorate([
+    computed()
+], Code.prototype, "parsed", null);
+__decorate([
+    computed()
+], Code.prototype, "highlighterCache", null);
+__decorate([
+    computed()
+], Code.prototype, "drawingInfo", null);
+__decorate([
+    lazy(() => new LezerHighlighter(DefaultHighlightStyle))
+], Code, "defaultHighlighter", void 0);
+Code = __decorate([
+    nodeName('CodeBlock')
+], Code);
+export { Code };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29kZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9Db2RlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBLE9BQU8sRUFDTCxJQUFJLEVBQ0osWUFBWSxFQUNaLGlCQUFpQixFQUNqQixJQUFJLEVBQ0osR0FBRyxFQU9ILE1BQU0sR0FFUCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQ0wsVUFBVSxFQU9WLFVBQVUsRUFDVixpQkFBaUIsRUFDakIscUJBQXFCLEVBQ3JCLGlCQUFpQixFQUNqQixzQkFBc0IsRUFDdEIsZ0JBQWdCLEVBQ2hCLEtBQUssRUFDTCxrQkFBa0IsRUFHbEIsWUFBWSxHQUNiLE1BQU0sU0FBUyxDQUFDO0FBQ2pCLE9BQU8sRUFBQyxRQUFRLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLEVBQUUsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBRTFFLE9BQU8sRUFBQyxVQUFVLEVBQUMsTUFBTSxXQUFXLENBQUM7QUFDckMsT0FBTyxFQUFDLEtBQUssRUFBYSxNQUFNLFNBQVMsQ0FBQztBQXlEMUM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTBDRztBQUVJLElBQU0sSUFBSSxHQUFWLE1BQU0sSUFBSyxTQUFRLEtBQUs7SUFDN0I7Ozs7OztPQU1HO0lBQ0ksTUFBTSxDQUFDLFlBQVksQ0FDeEIsT0FBMEIsRUFDMUIsV0FBMEMsRUFDMUMsT0FBNkI7UUFFN0IsT0FBTyxJQUFJLGlCQUFpQixDQUMxQixPQUFPLEVBQ1AsU0FBUyxFQUNULFdBQVcsRUFDWCxPQUFPLENBQ1IsQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUNmLENBQUM7SUE2SFMsQ0FBQyxjQUFjLENBQ3ZCLEtBQWtCLEVBQ2xCLFFBQWdCLEVBQ2hCLGNBQThCO1FBRTlCLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBQ3JD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

package/lib/components/CodeBlock.d.ts

@@ -0,0 +1,128 @@
+import { SerializedVector2, Signal, SignalValue, SimpleSignal, ThreadGenerator, TimingFunction, Vector2 } from '@revideo/core';
+import { Code, CodeStyle, CodeTree, Token } from 'code-fns';
+import { DesiredLength } from '../partials';
+import { Shape, ShapeProps } from './Shape';
+type CodePoint = [number, number];
+type CodeRange = [CodePoint, CodePoint];
+export interface CodeProps extends ShapeProps {
+    language?: string;
+    children?: Code;
+    code?: SignalValue<Code>;
+    selection?: CodeRange[];
+    theme?: CodeStyle;
+}
+export interface CodeModification {
+    from: Code;
+    to: Code;
+}
+export declare class CodeBlock extends Shape {
+    private static initialized;
+    readonly language: SimpleSignal<string, this>;
+    readonly code: Signal<Code, CodeTree, this>;
+    readonly theme: Signal<CodeStyle | null, CodeStyle, this>;
+    readonly selection: SimpleSignal<CodeRange[], this>;
+    protected tweenSelection(value: CodeRange[], duration: number, timingFunction: TimingFunction): ThreadGenerator;
+    readonly unselectedOpacity: SimpleSignal<number, this>;
+    private codeProgress;
+    private selectionProgress;
+    private oldSelection;
+    private diffed;
+    private currentLineCount;
+    private newLineCount;
+    protected getLineCountOfTokenArray(tokens: Token[]): number;
+    lineCount(): number;
+    protected parsed(): Token[];
+    constructor({ children, ...rest }: CodeProps);
+    protected characterSize(): Vector2;
+    protected desiredSize(): SerializedVector2<DesiredLength>;
+    protected getTokensSize(tokens: Token[]): {
+        x: number;
+        y: number;
+    };
+    protected collectAsyncResources(): void;
+    set(strings: string[], ...rest: any[]): void;
+    /**
+     * Smoothly edit the code.
+     *
+     * @remarks
+     * This method returns a tag function that should be used together with a
+     * template literal to define what to edit. Expressions can be used to either
+     * {@link insert}, {@link remove}, or {@link edit} the code.
+     *
+     * @example
+     * ```ts
+     * yield* codeBlock().edit()`
+     *   const ${edit('a', 'b')} = [${insert('1, 2, 3')}];${remove(`
+     *   // this comment will be removed`)}
+     * `;
+     * ```
+     *
+     * @param duration - The duration of the transition.
+     * @param changeSelection - When set to `true`, the selection will be modified
+     *                          to highlight the newly inserted code. Setting it
+     *                          to `false` leaves the selection untouched.
+     *                          Providing a custom {@link CodeRange} will select
+     *                          it instead.
+     */
+    edit(duration?: number, changeSelection?: CodeRange[] | boolean): (strings: TemplateStringsArray, ...rest: (Code | CodeModification)[]) => ThreadGenerator;
+    tweenCode(code: CodeTree, time: number, timingFunction: TimingFunction): Generator<void | ThreadGenerator | Promise<any> | import("@revideo/core").Promisable<any>, void, any>;
+    protected draw(context: CanvasRenderingContext2D): void;
+    protected selectionStrength(x: number, y: number): number;
+    protected static selectionStrength(selection: CodeRange[], x: number, y: number): number;
+}
+/**
+ * Create a code modification that inserts a piece of code.
+ *
+ * @remarks
+ * Should be used in conjunction with {@link CodeBlock.edit}.
+ *
+ * @param content - The code to insert.
+ */
+export declare function insert(content: Code): CodeModification;
+/**
+ * Create a code modification that removes a piece of code.
+ *
+ * @remarks
+ * Should be used in conjunction with {@link CodeBlock.edit}.
+ *
+ * @param content - The code to remove.
+ */
+export declare function remove(content: Code): CodeModification;
+/**
+ * Create a code modification that changes one piece of code into another.
+ *
+ * @remarks
+ * Should be used in conjunction with {@link CodeBlock.edit}.
+ *
+ * @param from - The code to change from.
+ * @param to - The code to change to.
+ */
+export declare function edit(from: Code, to: Code): CodeModification;
+/**
+ * Create a selection range that highlights the given lines.
+ *
+ * @param from - The line from which the selection starts.
+ * @param to - The line at which the selection ends. If omitted, the selection
+ *             will cover only one line.
+ */
+export declare function lines(from: number, to?: number): CodeRange[];
+/**
+ * Create a selection range that highlights the given word.
+ *
+ * @param line - The line at which the word appears.
+ * @param from - The column at which the word starts.
+ * @param length - The length of the word. If omitted, the selection will cover
+ *                 the rest of the line.
+ */
+export declare function word(line: number, from: number, length?: number): CodeRange[];
+/**
+ * Create a custom selection range.
+ *
+ * @param startLine - The line at which the selection starts.
+ * @param startColumn - The column at which the selection starts.
+ * @param endLine - The line at which the selection ends.
+ * @param endColumn - The column at which the selection ends.
+ */
+export declare function range(startLine: number, startColumn: number, endLine: number, endColumn: number): CodeRange[];
+export {};
+//# sourceMappingURL=CodeBlock.d.ts.map

package/lib/components/CodeBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/lib/components/CodeBlock.ts"],"names":[],"mappings":"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"}