@efxlab/motion-canvas-2d 4.0.0

package/lib/components/Code.js

@@ -0,0 +1,331 @@
+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;
+};
+var Code_1;
+import { BBox, createSignal, experimentalLog, map, unwrap, useLogger, useScene, } from '@efxlab/motion-canvas-core';
+import { CodeCursor, codeSignal, CodeSignalContext, findAllCodeRanges, isPointInCodeSelection, lines, parseCodeSelection, resolveScope, } from '../code';
+import { computed, initial, nodeName, parser, signal } from '../decorators';
+import { Shape } from './Shape';
+/**
+ * A node for displaying and animating code.
+ *
+ * @preview
+ * ```tsx editor
+ * import {Code, makeScene2D} from '@efxlab/motion-canvas-2d';
+ * import {createRef} from '@efxlab/motion-canvas-core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   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 {
+    static { Code_1 = this; }
+    /**
+     * Create a standalone code signal.
+     *
+     * @param initial - The initial code.
+     * @param highlighter - Custom highlighter to use.
+     */
+    static createSignal(initial, highlighter) {
+        return new CodeSignalContext(initial, undefined, highlighter).toSignal();
+    }
+    static defaultHighlighter = null;
+    setDrawHooks(value) {
+        if (!useScene().experimentalFeatures &&
+            value !== this.drawHooks.context.getInitial()) {
+            useLogger().log({
+                ...experimentalLog(`Code uses experimental draw hooks.`),
+                inspect: this.key,
+            });
+        }
+        else {
+            this.drawHooks.context.setter(value);
+        }
+    }
+    oldSelection = null;
+    selectionProgress = createSignal(null);
+    *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);
+        return {
+            before: highlighter.prepare(before),
+            after: highlighter.prepare(after),
+        };
+    }
+    cursorCache;
+    get cursor() {
+        this.cursorCache ??= new CodeCursor(this);
+        return this.cursorCache;
+    }
+    constructor(props) {
+        super({
+            fontFamily: 'monospace',
+            highlighter: Code_1.defaultHighlighter,
+            ...props,
+        });
+    }
+    /**
+     * Create a child code signal.
+     *
+     * @param initial - The initial code.
+     */
+    createSignal(initial) {
+        return new CodeSignalContext(initial, this, this.highlighter).toSignal();
+    }
+    /**
+     * Find all code ranges that match the given pattern.
+     *
+     * @param pattern - Either a string or a regular expression to search for.
+     *                  When a string is passed, it looks for **exact matches**.
+     *                  When a RegExp object is passed, it will match against it.
+     */
+    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 search for.
+     *                  When a string is passed, it looks for **exact matches**.
+     *                  When a RegExp object is passed, it will match against it.
+     */
+    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 search for.
+     *                  When a string is passed, it looks for **exact matches**.
+     *                  When a RegExp object is passed, it will match against it.
+     */
+    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 bounding 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(() => 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);
+Code = Code_1 = __decorate([
+    nodeName('CodeBlock')
+], Code);
+export { Code };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29kZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9Db2RlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQSxPQUFPLEVBQ0wsSUFBSSxFQUNKLFlBQVksRUFDWixlQUFlLEVBQ2YsR0FBRyxFQU9ILE1BQU0sRUFDTixTQUFTLEVBQ1QsUUFBUSxHQUVULE1BQU0sNEJBQTRCLENBQUM7QUFDcEMsT0FBTyxFQUNMLFVBQVUsRUFPVixVQUFVLEVBQ1YsaUJBQWlCLEVBQ2pCLGlCQUFpQixFQUNqQixzQkFBc0IsRUFDdEIsS0FBSyxFQUNMLGtCQUFrQixFQUdsQixZQUFZLEdBQ2IsTUFBTSxTQUFTLENBQUM7QUFDakIsT0FBTyxFQUFDLFFBQVEsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFFMUUsT0FBTyxFQUFDLEtBQUssRUFBYSxNQUFNLFNBQVMsQ0FBQztBQTBEMUM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBc0NHO0FBRUksSUFBTSxJQUFJLEdBQVYsTUFBTSxJQUFLLFNBQVEsS0FBSzs7SUFDN0I7Ozs7O09BS0c7SUFDSSxNQUFNLENBQUMsWUFBWSxDQUN4QixPQUF1QyxFQUN2QyxXQUEwQztRQUUxQyxPQUFPLElBQUksaUJBQWlCLENBQzFCLE9BQU8sRUFDUCxTQUFTLEVBQ1QsV0FBVyxDQUNaLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDZixDQUFDO0lBRU0sTUFBTSxDQUFDLGtCQUFrQixHQUEyQixJQUFJLENBQUM7SUF5RHRELFlBQVksQ0FBQyxLQUFnQjtRQUNyQyxJQUNFLENBQUMsUUFBUSxFQUFFLENBQUMsb0JBQW9CO1lBQ2hDLEtBQUssS0FBSyxJQUFJLENBQUMsU0FBUyxDQUFDLE9BQU8sQ0FBQyxVQUFVLEVBQUUsRUFDN0MsQ0FBQztZQUNELFNBQVMsRUFBRSxDQUFDLEdBQUcs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

package/lib/components/CodeBlock.d.ts

@@ -0,0 +1,131 @@
+import { SerializedVector2, Signal, SignalValue, SimpleSignal, ThreadGenerator, TimingFunction, Vector2 } from '@efxlab/motion-canvas-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;
+}
+/**
+ * @deprecated Use {@link Code} instead.
+ */
+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("@efxlab/motion-canvas-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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"}