@revideo/2d 0.3.5-alpha.966 → 0.3.5-beta.967

package/lib/components/SVG.d.ts

@@ -1,14 +1,21 @@
-import { SerializedVector2, SignalValue, SimpleSignal, ThreadGenerator, TimingFunction, Vector2 } from '@revideo/core';
-import { DesiredLength } from '../partials';
-import { Node, NodeProps } from './Node';
-import { Shape, ShapeProps } from './Shape';
+import {
+  SerializedVector2,
+  SignalValue,
+  SimpleSignal,
+  ThreadGenerator,
+  TimingFunction,
+  Vector2,
+} from '@revideo/core';
+import {DesiredLength} from '../partials';
+import {Node, NodeProps} from './Node';
+import {Shape, ShapeProps} from './Shape';
 /**
  * Represent SVG shape.
  * This only used single time because `node` may have reference to parent SVG renderer.
  */
 export interface SVGShape {
-    id: string;
-    shape: Node;
+  id: string;
+  shape: Node;
 }
 /**
  * Data of SVGShape.
@@ -16,18 +23,18 @@ export interface SVGShape {
  * This must build into SVGShape
  */
 export interface SVGShapeData {
-    id: string;
-    type: new (props: NodeProps) => Node;
-    props: ShapeProps;
-    children?: SVGShapeData[];
+  id: string;
+  type: new (props: NodeProps) => Node;
+  props: ShapeProps;
+  children?: SVGShapeData[];
 }
 /**
  * Represent SVG document that contains SVG shapes.
  * This only used single time because `nodes` have reference to parent SVG renderer.
  */
 export interface SVGDocument {
-    size: Vector2;
-    nodes: SVGShape[];
+  size: Vector2;
+  nodes: SVGShape[];
 }
 /**
  * Data of SVGDocument.
@@ -35,11 +42,11 @@ export interface SVGDocument {
  * This must build into SVGDocument
  */
 export interface SVGDocumentData {
-    size: Vector2;
-    nodes: SVGShapeData[];
+  size: Vector2;
+  nodes: SVGShapeData[];
 }
 export interface SVGProps extends ShapeProps {
-    svg: SignalValue<string>;
+  svg: SignalValue<string>;
 }
 /**
 A Node for drawing and animating SVG images.
@@ -48,128 +55,147 @@ A Node for drawing and animating SVG images.
 If you're not interested in animating SVG, you can use {@link Img} instead.
  */
 export declare class SVG extends Shape {
-    protected static containerElement: HTMLDivElement;
-    private static svgNodesPool;
-    /**
-     * SVG string to be rendered
-     */
-    readonly svg: SimpleSignal<string, this>;
-    /**
-     * Child to wrap all SVG node
-     */
-    wrapper: Node;
-    private lastTweenTargetSrc;
-    private lastTweenTargetDocument;
-    constructor(props: SVGProps);
-    /**
-     * Get all SVG nodes with the given id.
-     * @param id - An id to query.
-     */
-    getChildrenById(id: string): Node[];
-    protected desiredSize(): SerializedVector2<DesiredLength>;
-    protected getCurrentSize(): {
-        x: number | null;
-        y: number | null;
-    };
-    protected calculateWrapperScale(documentSize: Vector2, parentSize: SerializedVector2<number | null>): Vector2;
-    /**
-     * Convert `SVGDocumentData` to `SVGDocument`.
-     * @param data - `SVGDocumentData` to convert.
-     */
-    protected buildDocument(data: SVGDocumentData): SVGDocument;
-    /**
-     * Convert `SVGShapeData` to `SVGShape`.
-     * @param data - `SVGShapeData` to convert.
-     */
-    protected buildShape({ id, type, props, children }: SVGShapeData): SVGShape;
-    /**
-     * Convert an SVG string to `SVGDocument`.
-     * @param svg - An SVG string to be parsed.
-     */
-    protected parseSVG(svg: string): SVGDocument;
-    /**
-     * Create a tweening list to tween between two SVG nodes.
-     * @param from - The initial node,
-     * @param to - The final node.
-     * @param duration - The duration of the tween.
-     * @param timing - The timing function.
-     */
-    protected generateTransformer(from: Node, to: Node, duration: number, timing: TimingFunction): Generator<ThreadGenerator>;
-    protected tweenSvg(value: SignalValue<string>, time: number, timingFunction: TimingFunction): Generator<void | ThreadGenerator | Promise<any> | import("@revideo/core").Promisable<any>, void, any>;
-    private wrapperScale;
-    /**
-     * Get the current `SVGDocument`.
-     */
-    private document;
-    /**
-     * Get current document nodes.
-     */
-    private documentNodes;
-    /**
-     * Convert SVG colors in Shape properties to Motion Canvas colors.
-     * @param param - Shape properties.
-     * @returns Converted Shape properties.
-     */
-    private processElementStyle;
-    /**
-     * Parse an SVG string as `SVGDocumentData`.
-     * @param svg - And SVG string to be parsed.
-     * @returns `SVGDocumentData` that can be used to build SVGDocument.
-     */
-    protected static parseSVGData(svg: string): SVGDocumentData;
-    /**
-     * Get position, rotation and scale from Matrix transformation as Shape properties
-     * @param transform - Matrix transformation
-     * @returns MotionCanvas Shape properties
-     */
-    protected static getMatrixTransformation(transform: DOMMatrix): ShapeProps;
-    /**
-     * Convert an SVG color into a Motion Canvas color.
-     * @param color - SVG color.
-     * @returns Motion Canvas color.
-     */
-    private static processSVGColor;
-    /**
-     * Get the final transformation matrix for the given SVG element.
-     * @param element - SVG element.
-     * @param parentTransform - The transformation matrix of the parent.
-     */
-    private static getElementTransformation;
-    private static parseLineCap;
-    private static parseLineJoin;
-    private static parseLineDash;
-    private static parseDashOffset;
-    private static parseOpacity;
-    /**
-     * Convert the SVG element's style to a Motion Canvas Shape properties.
-     * @param element - An SVG element whose style should be converted.
-     * @param inheritedStyle - The parent style that should be inherited.
-     */
-    private static getElementStyle;
-    /**
-     * Extract `SVGShapeData` list from the SVG element's children.
-     * This will not extract the current element's shape.
-     * @param element - An element whose children will be extracted.
-     * @param svgRoot - The SVG root ("svg" tag) of the element.
-     * @param parentTransform - The transformation matrix applied to the parent.
-     * @param inheritedStyle - The style of the current SVG `element` that the children should inherit.
-     */
-    private static extractGroupNodes;
-    /**
-     * Parse a number from an SVG element attribute.
-     * @param element - SVG element whose attribute will be parsed.
-     * @param name - The name of the attribute to parse.
-     * @returns a parsed number or `0` if the attribute is not defined.
-     */
-    private static parseNumberAttribute;
-    /**
-     * Extract `SVGShapeData` list from the SVG element.
-     * This will also recursively extract shapes from its children.
-     * @param child - An SVG element to extract.
-     * @param svgRoot - The SVG root ("svg" tag) of the element.
-     * @param parentTransform - The transformation matrix applied to the parent.
-     * @param inheritedStyle - The style of the parent SVG element that the element should inherit.
-     */
-    private static extractElementNodes;
+  protected static containerElement: HTMLDivElement;
+  private static svgNodesPool;
+  /**
+   * SVG string to be rendered
+   */
+  readonly svg: SimpleSignal<string, this>;
+  /**
+   * Child to wrap all SVG node
+   */
+  wrapper: Node;
+  private lastTweenTargetSrc;
+  private lastTweenTargetDocument;
+  constructor(props: SVGProps);
+  /**
+   * Get all SVG nodes with the given id.
+   * @param id - An id to query.
+   */
+  getChildrenById(id: string): Node[];
+  protected desiredSize(): SerializedVector2<DesiredLength>;
+  protected getCurrentSize(): {
+    x: number | null;
+    y: number | null;
+  };
+  protected calculateWrapperScale(
+    documentSize: Vector2,
+    parentSize: SerializedVector2<number | null>,
+  ): Vector2;
+  /**
+   * Convert `SVGDocumentData` to `SVGDocument`.
+   * @param data - `SVGDocumentData` to convert.
+   */
+  protected buildDocument(data: SVGDocumentData): SVGDocument;
+  /**
+   * Convert `SVGShapeData` to `SVGShape`.
+   * @param data - `SVGShapeData` to convert.
+   */
+  protected buildShape({id, type, props, children}: SVGShapeData): SVGShape;
+  /**
+   * Convert an SVG string to `SVGDocument`.
+   * @param svg - An SVG string to be parsed.
+   */
+  protected parseSVG(svg: string): SVGDocument;
+  /**
+   * Create a tweening list to tween between two SVG nodes.
+   * @param from - The initial node,
+   * @param to - The final node.
+   * @param duration - The duration of the tween.
+   * @param timing - The timing function.
+   */
+  protected generateTransformer(
+    from: Node,
+    to: Node,
+    duration: number,
+    timing: TimingFunction,
+  ): Generator<ThreadGenerator>;
+  protected tweenSvg(
+    value: SignalValue<string>,
+    time: number,
+    timingFunction: TimingFunction,
+  ): Generator<
+    | void
+    | Promise<any>
+    | ThreadGenerator
+    | import('@revideo/core').Promisable<any>,
+    void,
+    any
+  >;
+  private wrapperScale;
+  /**
+   * Get the current `SVGDocument`.
+   */
+  private document;
+  /**
+   * Get current document nodes.
+   */
+  private documentNodes;
+  /**
+   * Convert SVG colors in Shape properties to Motion Canvas colors.
+   * @param param - Shape properties.
+   * @returns Converted Shape properties.
+   */
+  private processElementStyle;
+  /**
+   * Parse an SVG string as `SVGDocumentData`.
+   * @param svg - And SVG string to be parsed.
+   * @returns `SVGDocumentData` that can be used to build SVGDocument.
+   */
+  protected static parseSVGData(svg: string): SVGDocumentData;
+  /**
+   * Get position, rotation and scale from Matrix transformation as Shape properties
+   * @param transform - Matrix transformation
+   * @returns MotionCanvas Shape properties
+   */
+  protected static getMatrixTransformation(transform: DOMMatrix): ShapeProps;
+  /**
+   * Convert an SVG color into a Motion Canvas color.
+   * @param color - SVG color.
+   * @returns Motion Canvas color.
+   */
+  private static processSVGColor;
+  /**
+   * Get the final transformation matrix for the given SVG element.
+   * @param element - SVG element.
+   * @param parentTransform - The transformation matrix of the parent.
+   */
+  private static getElementTransformation;
+  private static parseLineCap;
+  private static parseLineJoin;
+  private static parseLineDash;
+  private static parseDashOffset;
+  private static parseOpacity;
+  /**
+   * Convert the SVG element's style to a Motion Canvas Shape properties.
+   * @param element - An SVG element whose style should be converted.
+   * @param inheritedStyle - The parent style that should be inherited.
+   */
+  private static getElementStyle;
+  /**
+   * Extract `SVGShapeData` list from the SVG element's children.
+   * This will not extract the current element's shape.
+   * @param element - An element whose children will be extracted.
+   * @param svgRoot - The SVG root ("svg" tag) of the element.
+   * @param parentTransform - The transformation matrix applied to the parent.
+   * @param inheritedStyle - The style of the current SVG `element` that the children should inherit.
+   */
+  private static extractGroupNodes;
+  /**
+   * Parse a number from an SVG element attribute.
+   * @param element - SVG element whose attribute will be parsed.
+   * @param name - The name of the attribute to parse.
+   * @returns a parsed number or `0` if the attribute is not defined.
+   */
+  private static parseNumberAttribute;
+  /**
+   * Extract `SVGShapeData` list from the SVG element.
+   * This will also recursively extract shapes from its children.
+   * @param child - An SVG element to extract.
+   * @param svgRoot - The SVG root ("svg" tag) of the element.
+   * @param parentTransform - The transformation matrix applied to the parent.
+   * @param inheritedStyle - The style of the parent SVG element that the element should inherit.
+   */
+  private static extractElementNodes;
 }
-//# sourceMappingURL=SVG.d.ts.map
+//# sourceMappingURL=SVG.d.ts.map

package/lib/components/Shape.d.ts

@@ -1,39 +1,48 @@
-import { BBox, SignalValue, SimpleSignal } from '@revideo/core';
-import { CanvasStyleSignal } from '../decorators/canvasStyleSignal';
-import { PossibleCanvasStyle } from '../partials';
-import { Layout, LayoutProps } from './Layout';
+import {BBox, SignalValue, SimpleSignal} from '@revideo/core';
+import {CanvasStyleSignal} from '../decorators/canvasStyleSignal';
+import {PossibleCanvasStyle} from '../partials';
+import {Layout, LayoutProps} from './Layout';
 export interface ShapeProps extends LayoutProps {
-    fill?: SignalValue<PossibleCanvasStyle>;
-    stroke?: SignalValue<PossibleCanvasStyle>;
-    strokeFirst?: SignalValue<boolean>;
-    lineWidth?: SignalValue<number>;
-    lineJoin?: SignalValue<CanvasLineJoin>;
-    lineCap?: SignalValue<CanvasLineCap>;
-    lineDash?: SignalValue<number[]>;
-    lineDashOffset?: SignalValue<number>;
-    antialiased?: SignalValue<boolean>;
+  fill?: SignalValue<PossibleCanvasStyle>;
+  stroke?: SignalValue<PossibleCanvasStyle>;
+  strokeFirst?: SignalValue<boolean>;
+  lineWidth?: SignalValue<number>;
+  lineJoin?: SignalValue<CanvasLineJoin>;
+  lineCap?: SignalValue<CanvasLineCap>;
+  lineDash?: SignalValue<number[]>;
+  lineDashOffset?: SignalValue<number>;
+  antialiased?: SignalValue<boolean>;
 }
 export declare abstract class Shape extends Layout {
-    readonly fill: CanvasStyleSignal<this>;
-    readonly stroke: CanvasStyleSignal<this>;
-    readonly strokeFirst: SimpleSignal<boolean, this>;
-    readonly lineWidth: SimpleSignal<number, this>;
-    readonly lineJoin: SimpleSignal<CanvasLineJoin, this>;
-    readonly lineCap: SimpleSignal<CanvasLineCap, this>;
-    readonly lineDash: SimpleSignal<number[], this>;
-    readonly lineDashOffset: SimpleSignal<number, this>;
-    readonly antialiased: SimpleSignal<boolean, this>;
-    protected readonly rippleStrength: SimpleSignal<number, this>;
-    protected rippleSize(): number;
-    constructor(props: ShapeProps);
-    protected applyText(context: CanvasRenderingContext2D): void;
-    protected applyStyle(context: CanvasRenderingContext2D): void;
-    protected draw(context: CanvasRenderingContext2D): Promise<void>;
-    protected drawShape(context: CanvasRenderingContext2D): void;
-    protected getCacheBBox(): BBox;
-    protected getPath(): Path2D;
-    protected getRipplePath(): Path2D;
-    protected drawRipple(context: CanvasRenderingContext2D): void;
-    ripple(duration?: number): Generator<void | import("@revideo/core").ThreadGenerator | Promise<any> | import("@revideo/core").Promisable<any>, void, any>;
+  readonly fill: CanvasStyleSignal<this>;
+  readonly stroke: CanvasStyleSignal<this>;
+  readonly strokeFirst: SimpleSignal<boolean, this>;
+  readonly lineWidth: SimpleSignal<number, this>;
+  readonly lineJoin: SimpleSignal<CanvasLineJoin, this>;
+  readonly lineCap: SimpleSignal<CanvasLineCap, this>;
+  readonly lineDash: SimpleSignal<number[], this>;
+  readonly lineDashOffset: SimpleSignal<number, this>;
+  readonly antialiased: SimpleSignal<boolean, this>;
+  protected readonly rippleStrength: SimpleSignal<number, this>;
+  protected rippleSize(): number;
+  constructor(props: ShapeProps);
+  protected applyText(context: CanvasRenderingContext2D): void;
+  protected applyStyle(context: CanvasRenderingContext2D): void;
+  protected draw(context: CanvasRenderingContext2D): Promise<void>;
+  protected drawShape(context: CanvasRenderingContext2D): void;
+  protected getCacheBBox(): BBox;
+  protected getPath(): Path2D;
+  protected getRipplePath(): Path2D;
+  protected drawRipple(context: CanvasRenderingContext2D): void;
+  ripple(
+    duration?: number,
+  ): Generator<
+    | void
+    | Promise<any>
+    | import('@revideo/core').ThreadGenerator
+    | import('@revideo/core').Promisable<any>,
+    void,
+    any
+  >;
 }
-//# sourceMappingURL=Shape.d.ts.map
+//# sourceMappingURL=Shape.d.ts.map

package/lib/components/Spline.d.ts

@@ -1,16 +1,22 @@
-import { BBox, PossibleVector2, SerializedVector2, SignalValue, SimpleSignal } from '@revideo/core';
-import { CurveProfile, KnotInfo } from '../curves';
-import { DesiredLength } from '../partials';
-import { Curve, CurveProps } from './Curve';
+import {
+  BBox,
+  PossibleVector2,
+  SerializedVector2,
+  SignalValue,
+  SimpleSignal,
+} from '@revideo/core';
+import {CurveProfile, KnotInfo} from '../curves';
+import {DesiredLength} from '../partials';
+import {Curve, CurveProps} from './Curve';
 export interface SplineProps extends CurveProps {
-    /**
-     * {@inheritDoc Spline.smoothness}
-     */
-    smoothness?: SignalValue<number>;
-    /**
-     * {@inheritDoc Spline.points}
-     */
-    points?: SignalValue<SignalValue<PossibleVector2[]>>;
+  /**
+   * {@inheritDoc Spline.smoothness}
+   */
+  smoothness?: SignalValue<number>;
+  /**
+   * {@inheritDoc Spline.points}
+   */
+  points?: SignalValue<SignalValue<PossibleVector2[]>>;
 }
 /**
  * A node for drawing a smooth line through a number of points.
@@ -56,32 +62,32 @@ export interface SplineProps extends CurveProps {
  * ```
  */
 export declare class Spline extends Curve {
-    /**
-     * The smoothness of the spline when using auto-calculated handles.
-     *
-     * @remarks
-     * This property is only applied to knots that don't use explicit handles.
-     *
-     * @defaultValue 0.4
-     */
-    readonly smoothness: SimpleSignal<number>;
-    /**
-     * The knots of the spline as an array of knots with auto-calculated handles.
-     *
-     * @remarks
-     * You can control the smoothness of the resulting curve
-     * via the {@link smoothness} property.
-     */
-    readonly points: SimpleSignal<SignalValue<PossibleVector2>[] | null, this>;
-    constructor(props: SplineProps);
-    profile(): CurveProfile;
-    knots(): KnotInfo[];
-    protected childrenBBox(): BBox;
-    protected lineWidthCoefficient(): number;
-    protected desiredSize(): SerializedVector2<DesiredLength>;
-    protected offsetComputedLayout(box: BBox): BBox;
-    private getTightBBox;
-    drawOverlay(context: CanvasRenderingContext2D, matrix: DOMMatrix): void;
-    private isKnot;
+  /**
+   * The smoothness of the spline when using auto-calculated handles.
+   *
+   * @remarks
+   * This property is only applied to knots that don't use explicit handles.
+   *
+   * @defaultValue 0.4
+   */
+  readonly smoothness: SimpleSignal<number>;
+  /**
+   * The knots of the spline as an array of knots with auto-calculated handles.
+   *
+   * @remarks
+   * You can control the smoothness of the resulting curve
+   * via the {@link smoothness} property.
+   */
+  readonly points: SimpleSignal<SignalValue<PossibleVector2>[] | null, this>;
+  constructor(props: SplineProps);
+  profile(): CurveProfile;
+  knots(): KnotInfo[];
+  protected childrenBBox(): BBox;
+  protected lineWidthCoefficient(): number;
+  protected desiredSize(): SerializedVector2<DesiredLength>;
+  protected offsetComputedLayout(box: BBox): BBox;
+  private getTightBBox;
+  drawOverlay(context: CanvasRenderingContext2D, matrix: DOMMatrix): void;
+  private isKnot;
 }
-//# sourceMappingURL=Spline.d.ts.map
+//# sourceMappingURL=Spline.d.ts.map

package/lib/components/Txt.d.ts

@@ -1,51 +1,62 @@
-import { InterpolationFunction, SignalValue, SimpleSignal, ThreadGenerator, TimingFunction } from '@revideo/core';
-import { Node } from './Node';
-import { Shape, ShapeProps } from './Shape';
-import { TxtLeaf } from './TxtLeaf';
-import { ComponentChildren } from './types';
+import {
+  InterpolationFunction,
+  SignalValue,
+  SimpleSignal,
+  ThreadGenerator,
+  TimingFunction,
+} from '@revideo/core';
+import {Node} from './Node';
+import {Shape, ShapeProps} from './Shape';
+import {TxtLeaf} from './TxtLeaf';
+import {ComponentChildren} from './types';
 type TxtChildren = string | Node | (string | Node)[];
 type AnyTxt = Txt | TxtLeaf;
 export interface TxtProps extends ShapeProps {
-    children?: TxtChildren;
-    text?: SignalValue<string>;
+  children?: TxtChildren;
+  text?: SignalValue<string>;
 }
 export declare class Txt extends Shape {
-    /**
-     * Create a bold text node.
-     *
-     * @remarks
-     * This is a shortcut for
-     * ```tsx
-     * <Txt fontWeight={700} />
-     * ```
-     *
-     * @param props - Additional text properties.
-     */
-    static b(props: TxtProps): Txt;
-    /**
-     * Create an italic text node.
-     *
-     * @remarks
-     * This is a shortcut for
-     * ```tsx
-     * <Txt fontStyle={'italic'} />
-     * ```
-     *
-     * @param props - Additional text properties.
-     */
-    static i(props: TxtProps): Txt;
-    readonly text: SimpleSignal<string, this>;
-    protected getText(): string;
-    protected setText(value: SignalValue<string>): void;
-    protected setChildren(value: SignalValue<ComponentChildren>): void;
-    protected tweenText(value: SignalValue<string>, time: number, timingFunction: TimingFunction, interpolationFunction: InterpolationFunction<string>): ThreadGenerator;
-    protected getLayout(): boolean;
-    constructor({ children, text, ...props }: TxtProps);
-    protected innerText(): string;
-    protected parentTxt(): Txt | null;
-    protected parseChildren(children: ComponentChildren): AnyTxt[];
-    protected applyFlex(): void;
-    protected draw(context: CanvasRenderingContext2D): Promise<void>;
+  /**
+   * Create a bold text node.
+   *
+   * @remarks
+   * This is a shortcut for
+   * ```tsx
+   * <Txt fontWeight={700} />
+   * ```
+   *
+   * @param props - Additional text properties.
+   */
+  static b(props: TxtProps): Txt;
+  /**
+   * Create an italic text node.
+   *
+   * @remarks
+   * This is a shortcut for
+   * ```tsx
+   * <Txt fontStyle={'italic'} />
+   * ```
+   *
+   * @param props - Additional text properties.
+   */
+  static i(props: TxtProps): Txt;
+  readonly text: SimpleSignal<string, this>;
+  protected getText(): string;
+  protected setText(value: SignalValue<string>): void;
+  protected setChildren(value: SignalValue<ComponentChildren>): void;
+  protected tweenText(
+    value: SignalValue<string>,
+    time: number,
+    timingFunction: TimingFunction,
+    interpolationFunction: InterpolationFunction<string>,
+  ): ThreadGenerator;
+  protected getLayout(): boolean;
+  constructor({children, text, ...props}: TxtProps);
+  protected innerText(): string;
+  protected parentTxt(): Txt | null;
+  protected parseChildren(children: ComponentChildren): AnyTxt[];
+  protected applyFlex(): void;
+  protected draw(context: CanvasRenderingContext2D): Promise<void>;
 }
 export {};
-//# sourceMappingURL=Txt.d.ts.map
+//# sourceMappingURL=Txt.d.ts.map