@revideo/2d 0.1.0

package/lib/components/Circle.js

@@ -0,0 +1,178 @@
+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, DEG2RAD, } from '@revideo/core';
+import { getCircleProfile } from '../curves';
+import { computed, initial, nodeName, signal } from '../decorators';
+import { Curve } from './Curve';
+/**
+ * A node for drawing circular shapes.
+ *
+ * @remarks
+ * This node can be used to render shapes such as: circle, ellipse, arc, and
+ * sector (pie chart).
+ *
+ * @preview
+ * ```tsx editor
+ * // snippet Simple circle
+ * import {makeScene2D, Circle} from '@revideo/2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Circle
+ *       size={160}
+ *       fill={'lightseagreen'}
+ *     />
+ *    );
+ * });
+ *
+ * // snippet Ellipse
+ * import {makeScene2D, Circle} from '@revideo/2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Circle
+ *       width={160}
+ *       height={80}
+ *       fill={'lightseagreen'}
+ *     />
+ *   );
+ * });
+ *
+ * // snippet Sector (pie chart):
+ * import {makeScene2D, Circle} from '@revideo/2d';
+ * import {createRef} from '@revideo/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const ref = createRef<Circle>();
+ *   view.add(
+ *     <Circle
+ *       ref={ref}
+ *       size={160}
+ *       fill={'lightseagreen'}
+ *       startAngle={30}
+ *       endAngle={270}
+ *       closed={true}
+ *     />
+ *   );
+ *
+ *   yield* ref().startAngle(270, 2).to(30, 2);
+ * });
+ *
+ * // snippet Arc:
+ * import {makeScene2D, Circle} from '@revideo/2d';
+ * import {createRef} from '@revideo/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const ref = createRef<Circle>();
+ *   view.add(
+ *     <Circle
+ *       ref={ref}
+ *       size={160}
+ *       stroke={'lightseagreen'}
+ *       lineWidth={8}
+ *       startAngle={-90}
+ *       endAngle={90}
+ *     />
+ *   );
+ *
+ *   yield* ref().startAngle(-270, 2).to(-90, 2);
+ * });
+ *
+ * // snippet Curve properties:
+ * import {makeScene2D, Circle} from '@revideo/2d';
+ * import {all, createRef, easeInCubic, easeOutCubic} from '@revideo/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const ref = createRef<Circle>();
+ *   view.add(
+ *     <Circle
+ *       ref={ref}
+ *       size={160}
+ *       stroke={'lightseagreen'}
+ *       lineWidth={8}
+ *       endAngle={270}
+ *       endArrow
+ *     />,
+ *   );
+ *
+ *   yield* all(ref().start(1, 1), ref().rotation(180, 1, easeInCubic));
+ *   ref().start(0).end(0);
+ *   yield* all(ref().end(1, 1), ref().rotation(360, 1, easeOutCubic));
+ * });
+ * ```
+ */
+let Circle = class Circle extends Curve {
+    constructor(props) {
+        super(props);
+    }
+    profile() {
+        return getCircleProfile(this.size().scale(0.5), this.startAngle() * DEG2RAD, this.endAngle() * DEG2RAD, this.closed(), this.counterclockwise());
+    }
+    desiredSize() {
+        return {
+            x: this.width.context.getter(),
+            y: this.height.context.getter(),
+        };
+    }
+    offsetComputedLayout(box) {
+        return box;
+    }
+    childrenBBox() {
+        return BBox.fromSizeCentered(this.computedSize());
+    }
+    getPath() {
+        if (this.requiresProfile()) {
+            return this.curveDrawingInfo().path;
+        }
+        return this.createPath();
+    }
+    getRipplePath() {
+        return this.createPath(this.rippleSize());
+    }
+    getCacheBBox() {
+        return super.getCacheBBox().expand(this.rippleSize());
+    }
+    createPath(expand = 0) {
+        const path = new Path2D();
+        const start = this.startAngle() * DEG2RAD;
+        let end = this.endAngle() * DEG2RAD;
+        const size = this.size().scale(0.5).add(expand);
+        const closed = this.closed();
+        if (end > start + Math.PI * 2) {
+            const loops = Math.floor((end - start) / (Math.PI * 2));
+            end -= Math.PI * 2 * loops;
+        }
+        if (closed) {
+            path.moveTo(0, 0);
+        }
+        path.ellipse(0, 0, size.x, size.y, 0, start, end, this.counterclockwise());
+        if (closed) {
+            path.closePath();
+        }
+        return path;
+    }
+};
+__decorate([
+    initial(0),
+    signal()
+], Circle.prototype, "startAngle", void 0);
+__decorate([
+    initial(360),
+    signal()
+], Circle.prototype, "endAngle", void 0);
+__decorate([
+    initial(false),
+    signal()
+], Circle.prototype, "counterclockwise", void 0);
+__decorate([
+    computed()
+], Circle.prototype, "profile", null);
+Circle = __decorate([
+    nodeName('Circle')
+], Circle);
+export { Circle };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2lyY2xlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL0NpcmNsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7QUFBQSxPQUFPLEVBQ0wsSUFBSSxFQUNKLE9BQU8sR0FJUixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQWUsZ0JBQWdCLEVBQUMsTUFBTSxXQUFXLENBQUM7QUFDekQsT0FBTyxFQUFDLFFBQVEsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUVsRSxPQUFPLEVBQUMsS0FBSyxFQUFhLE1BQU0sU0FBUyxDQUFDO0FBcUIxQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBZ0dHO0FBRUksSUFBTSxNQUFNLEdBQVosTUFBTSxNQUFPLFNBQVEsS0FBSztJQXVFL0IsWUFBbUIsS0FBa0I7UUFDbkMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2YsQ0FBQztJQUdNLE9BQU87UUFDWixPQUFPLGdCQUFnQixDQUNyQixJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxFQUN0QixJQUFJLENBQUMsVUFBVSxFQUFFLEdBQUcsT0FBTyxFQUMzQixJQUFJLENBQUMsUUFBUSxFQUFFLEdBQUcsT0FBTyxFQUN6QixJQUFJLENBQUMsTUFBTSxFQUFFLEVBQ2IsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQ3hCLENBQUM7SUFDSixDQUFDO0lBRWtCLFdBQVc7UUFDNUIsT0FBTztZQUNMLENBQUMsRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxNQUFNLEVBQUU7WUFDOUIsQ0FBQyxFQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLE1BQU0sRUFBRTtTQUNo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

package/lib/components/Code.d.ts

@@ -0,0 +1,265 @@
+import { BBox, SerializedVector2, Signal, SignalValue, SimpleSignal, ThreadGenerator, TimingFunction, Vector2 } from '@revideo/core';
+import { CodeFragmentDrawingInfo, CodeHighlighter, CodePoint, CodeRange, CodeSelection, CodeSignal, LezerHighlighter, PossibleCodeScope, PossibleCodeSelection } from '../code';
+import { DesiredLength } from '../partials';
+import { Shape, ShapeProps } from './Shape';
+export interface DrawTokenHook {
+    (ctx: CanvasRenderingContext2D, text: string, position: Vector2, color: string, selection: number): void;
+}
+/**
+ * Describes custom drawing logic used by the Code node.
+ */
+export interface DrawHooks {
+    /**
+     * Custom drawing logic for individual code tokens.
+     *
+     * @example
+     * ```ts
+     * token(ctx, text, position, color, selection) {
+     *   const blur = map(3, 0, selection);
+     *   const alpha = map(0.5, 1, selection);
+     *   ctx.globalAlpha *= alpha;
+     *   ctx.filter = `blur(${blur}px)`;
+     *   ctx.fillStyle = color;
+     *   ctx.fillText(text, position.x, position.y);
+     * }
+     * ```
+     */
+    token: DrawTokenHook;
+}
+export interface CodeProps extends ShapeProps {
+    /**
+     * {@inheritDoc Code.highlighter}
+     */
+    highlighter?: SignalValue<CodeHighlighter | null>;
+    /**
+     * {@inheritDoc Code.dialect}
+     */
+    dialect?: SignalValue<string>;
+    /**
+     * {@inheritDoc Code.code}
+     */
+    code?: SignalValue<PossibleCodeScope>;
+    /**
+     * {@inheritDoc Code.selection}
+     */
+    selection?: SignalValue<PossibleCodeSelection>;
+    /**
+     * {@inheritDoc Code.drawHooks}
+     */
+    drawHooks?: SignalValue<DrawHooks>;
+}
+/**
+ * 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);
+ * });
+ * ```
+ */
+export declare 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: PossibleCodeScope, highlighter?: SignalValue<CodeHighlighter>, dialect?: SignalValue<string>): CodeSignal<void>;
+    static readonly defaultHighlighter: LezerHighlighter;
+    /**
+     * The dialect to use for highlighting the code.
+     *
+     * @remarks
+     * This value will be passed to the {@link code.CodeHighlighter}
+     * defined by the {@link highlighter} property. Different highlighters may use
+     * it differently.
+     *
+     * The default {@link code.LezerHighlighter} uses it to select
+     * the language parser to use. The parser for the given dialect can be
+     * registered as follows:
+     * ```tsx
+     * // Import the lezer parser:
+     * import {parser} from '@lezer/javascript';
+     *
+     * // Register it in the highlighter:
+     * LezerHighlighter.registerParser(parser, 'js');
+     *
+     * // Use the dialect in a code node:
+     * <Code dialect="js" code="const a = 7;" />
+     * ```
+     * When no dialect is provided, the highlighter will use the default
+     * parser:
+     * ```tsx
+     * // Register the default parser by omitting the dialect:
+     * LezerHighlighter.registerParser(parser);
+     *
+     * // Code nodes with no dialect will now use the default parser:
+     * <Code code="const a = 7;" />
+     * ```
+     */
+    readonly dialect: SimpleSignal<string, this>;
+    /**
+     * The code highlighter to use for this code node.
+     *
+     * @remarks
+     * Defaults to a shared {@link code.LezerHighlighter}.
+     */
+    readonly highlighter: SimpleSignal<CodeHighlighter, this>;
+    /**
+     * The code to display.
+     */
+    readonly code: CodeSignal<this>;
+    /**
+     * Custom drawing logic for the code.
+     *
+     * @remarks
+     * Check out {@link DrawHooks} for available render hooks.
+     *
+     * @example
+     * Make the unselected code blurry and transparent:
+     * ```tsx
+     * <Code
+     *   drawHooks={{
+     *     token(ctx, text, position, color, selection) {
+     *       const blur = map(3, 0, selection);
+     *       const alpha = map(0.5, 1, selection);
+     *       ctx.globalAlpha *= alpha;
+     *       ctx.filter = `blur(${blur}px)`;
+     *       ctx.fillStyle = color;
+     *       ctx.fillText(text, position.x, position.y);
+     *     },
+     *   }}
+     *   // ...
+     * />
+     * ```
+     */
+    readonly drawHooks: SimpleSignal<DrawHooks, this>;
+    /**
+     * The currently selected code range.
+     *
+     * @remarks
+     * Either a single {@link code.CodeRange} or an array of them
+     * describing which parts of the code should be visually emphasized.
+     *
+     * You can use {@link code.word} and
+     * {@link code.lines} to quickly create ranges.
+     *
+     * @example
+     * The following will select the word "console" in the code.
+     * Both lines and columns are 0-based. So it will select a 7-character-long
+     * (`7`) word in the second line (`1`) starting at the third character (`2`).
+     * ```tsx
+     * <Code
+     *   selection={word(1, 2, 7)}
+     *   code={`\
+     * function hello() => {
+     *   console.log('Hello');
+     * }`}
+     *   // ...
+     * />
+     * ```
+     */
+    readonly selection: Signal<PossibleCodeSelection, CodeSelection, this>;
+    oldSelection: CodeSelection | null;
+    selectionProgress: SimpleSignal<number | null, void>;
+    protected tweenSelection(value: CodeRange[], duration: number, timingFunction: TimingFunction): ThreadGenerator;
+    /**
+     * Get the currently displayed code as a string.
+     */
+    parsed(): string;
+    highlighterCache(): {
+        before: unknown;
+        after: unknown;
+    } | null;
+    private cursorCache;
+    private get cursor();
+    constructor(props: CodeProps);
+    /**
+     * Create a child code signal.
+     *
+     * @param initial - The initial code.
+     */
+    createSignal(initial: PossibleCodeScope): CodeSignal<this>;
+    /**
+     * Find all code ranges that match the given pattern.
+     *
+     * @param pattern - Either a string or a regular expression to match.
+     */
+    findAllRanges(pattern: string | RegExp): CodeRange[];
+    /**
+     * Find the first code range that matches the given pattern.
+     *
+     * @param pattern - Either a string or a regular expression to match.
+     */
+    findFirstRange(pattern: string | RegExp): CodeRange;
+    /**
+     * Find the last code range that matches the given pattern.
+     *
+     * @param pattern - Either a string or a regular expression to match.
+     */
+    findLastRange(pattern: string | RegExp): CodeRange;
+    /**
+     * 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: CodePoint): BBox;
+    /**
+     * 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: PossibleCodeSelection): BBox[];
+    protected drawingInfo(): {
+        fragments: CodeFragmentDrawingInfo[];
+        verticalOffset: number;
+        fontHeight: number;
+    };
+    protected desiredSize(): SerializedVector2<DesiredLength>;
+    protected draw(context: CanvasRenderingContext2D): void;
+    protected applyText(context: CanvasRenderingContext2D): void;
+    protected collectAsyncResources(): void;
+}
+//# sourceMappingURL=Code.d.ts.map

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

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