@revideo/2d 0.4.7-two.1024 → 0.4.8-alpha.1032

package/lib/components/Code.d.ts

@@ -1,77 +1,52 @@
-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';
+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;
+    (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;
+    /**
+     * 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>;
+    /**
+     * {@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.
@@ -117,182 +92,174 @@ export interface CodeProps extends ShapeProps {
  * ```
  */
 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): Promise<void>;
-  protected applyText(context: CanvasRenderingContext2D): void;
-  protected collectAsyncResources(): void;
+    /**
+     * 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): Promise<void>;
+    protected applyText(context: CanvasRenderingContext2D): void;
+    protected collectAsyncResources(): void;
 }
-//# sourceMappingURL=Code.d.ts.map
+//# sourceMappingURL=Code.d.ts.map

package/lib/components/CodeBlock.d.ts

@@ -65,7 +65,7 @@ export declare class CodeBlock extends Shape {
      *                          it instead.
      */
     edit(duration?: number, changeSelection?: CodeRange[] | boolean): (strings: TemplateStringsArray, ...rest: (Code | CodeModification)[]) => ThreadGenerator;
-    tweenCode(code: CodeTree, time: number, timingFunction: TimingFunction): Generator<void | Promise<any> | ThreadGenerator | import("@revideo/core").Promisable<any>, void, any>;
+    tweenCode(code: CodeTree, time: number, timingFunction: TimingFunction): Generator<void | ThreadGenerator | Promise<any> | import("@revideo/core").Promisable<any>, void, any>;
     protected draw(context: CanvasRenderingContext2D): Promise<void>;
     protected selectionStrength(x: number, y: number): number;
     protected static selectionStrength(selection: CodeRange[], x: number, y: number): number;

package/lib/components/CubicBezier.d.ts

@@ -1,20 +1,20 @@
-import {PossibleVector2, SignalValue, Vector2Signal} from '@revideo/core';
-import {PolynomialSegment} from '../curves/PolynomialSegment';
-import {Bezier, BezierOverlayInfo} from './Bezier';
-import {CurveProps} from './Curve';
+import { PossibleVector2, SignalValue, Vector2Signal } from '@revideo/core';
+import { PolynomialSegment } from '../curves/PolynomialSegment';
+import { Bezier, BezierOverlayInfo } from './Bezier';
+import { CurveProps } from './Curve';
 export interface CubicBezierProps extends CurveProps {
-  p0?: SignalValue<PossibleVector2>;
-  p0X?: SignalValue<number>;
-  p0Y?: SignalValue<number>;
-  p1?: SignalValue<PossibleVector2>;
-  p1X?: SignalValue<number>;
-  p1Y?: SignalValue<number>;
-  p2?: SignalValue<PossibleVector2>;
-  p2X?: SignalValue<number>;
-  p2Y?: SignalValue<number>;
-  p3?: SignalValue<PossibleVector2>;
-  p3X?: SignalValue<number>;
-  p3Y?: SignalValue<number>;
+    p0?: SignalValue<PossibleVector2>;
+    p0X?: SignalValue<number>;
+    p0Y?: SignalValue<number>;
+    p1?: SignalValue<PossibleVector2>;
+    p1X?: SignalValue<number>;
+    p1Y?: SignalValue<number>;
+    p2?: SignalValue<PossibleVector2>;
+    p2X?: SignalValue<number>;
+    p2Y?: SignalValue<number>;
+    p3?: SignalValue<PossibleVector2>;
+    p3X?: SignalValue<number>;
+    p3Y?: SignalValue<number>;
 }
 /**
  * A node for drawing a cubic Bézier curve.
@@ -46,24 +46,24 @@ export interface CubicBezierProps extends CurveProps {
  * ```
  */
 export declare class CubicBezier extends Bezier {
-  /**
-   * The start point of the Bézier curve.
-   */
-  readonly p0: Vector2Signal<this>;
-  /**
-   * The first control point of the Bézier curve.
-   */
-  readonly p1: Vector2Signal<this>;
-  /**
-   * The second control point of the Bézier curve.
-   */
-  readonly p2: Vector2Signal<this>;
-  /**
-   * The end point of the Bézier curve.
-   */
-  readonly p3: Vector2Signal<this>;
-  constructor(props: CubicBezierProps);
-  protected segment(): PolynomialSegment;
-  protected overlayInfo(matrix: DOMMatrix): BezierOverlayInfo;
+    /**
+     * The start point of the Bézier curve.
+     */
+    readonly p0: Vector2Signal<this>;
+    /**
+     * The first control point of the Bézier curve.
+     */
+    readonly p1: Vector2Signal<this>;
+    /**
+     * The second control point of the Bézier curve.
+     */
+    readonly p2: Vector2Signal<this>;
+    /**
+     * The end point of the Bézier curve.
+     */
+    readonly p3: Vector2Signal<this>;
+    constructor(props: CubicBezierProps);
+    protected segment(): PolynomialSegment;
+    protected overlayInfo(matrix: DOMMatrix): BezierOverlayInfo;
 }
-//# sourceMappingURL=CubicBezier.d.ts.map
+//# sourceMappingURL=CubicBezier.d.ts.map