@revideo/2d 0.2.3 → 0.2.4-alpha.894

package/lib/components/Rect.js

@@ -1,76 +1,82 @@
-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;
+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, } from '@revideo/core';
-import { getRectProfile } from '../curves/getRectProfile';
-import { computed, initial, nodeName, signal } from '../decorators';
-import { spacingSignal } from '../decorators/spacingSignal';
-import { drawRoundRect } from '../utils';
-import { Curve } from './Curve';
+  };
+import {BBox} from '@revideo/core';
+import {getRectProfile} from '../curves/getRectProfile';
+import {computed, initial, nodeName, signal} from '../decorators';
+import {spacingSignal} from '../decorators/spacingSignal';
+import {drawRoundRect} from '../utils';
+import {Curve} from './Curve';
 let Rect = class Rect extends Curve {
-    constructor(props) {
-        super(props);
-    }
-    profile() {
-        return getRectProfile(this.childrenBBox(), this.radius(), this.smoothCorners(), this.cornerSharpness());
-    }
-    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;
-        }
-        const path = new Path2D();
-        const radius = this.radius();
-        const smoothCorners = this.smoothCorners();
-        const cornerSharpness = this.cornerSharpness();
-        const box = BBox.fromSizeCentered(this.size());
-        drawRoundRect(path, box, radius, smoothCorners, cornerSharpness);
-        return path;
-    }
-    getCacheBBox() {
-        return super.getCacheBBox().expand(this.rippleSize());
-    }
-    getRipplePath() {
-        const path = new Path2D();
-        const rippleSize = this.rippleSize();
-        const radius = this.radius().addScalar(rippleSize);
-        const smoothCorners = this.smoothCorners();
-        const cornerSharpness = this.cornerSharpness();
-        const box = BBox.fromSizeCentered(this.size()).expand(rippleSize);
-        drawRoundRect(path, box, radius, smoothCorners, cornerSharpness);
-        return path;
+  constructor(props) {
+    super(props);
+  }
+  profile() {
+    return getRectProfile(
+      this.childrenBBox(),
+      this.radius(),
+      this.smoothCorners(),
+      this.cornerSharpness(),
+    );
+  }
+  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;
     }
+    const path = new Path2D();
+    const radius = this.radius();
+    const smoothCorners = this.smoothCorners();
+    const cornerSharpness = this.cornerSharpness();
+    const box = BBox.fromSizeCentered(this.size());
+    drawRoundRect(path, box, radius, smoothCorners, cornerSharpness);
+    return path;
+  }
+  getCacheBBox() {
+    return super.getCacheBBox().expand(this.rippleSize());
+  }
+  getRipplePath() {
+    const path = new Path2D();
+    const rippleSize = this.rippleSize();
+    const radius = this.radius().addScalar(rippleSize);
+    const smoothCorners = this.smoothCorners();
+    const cornerSharpness = this.cornerSharpness();
+    const box = BBox.fromSizeCentered(this.size()).expand(rippleSize);
+    drawRoundRect(path, box, radius, smoothCorners, cornerSharpness);
+    return path;
+  }
 };
-__decorate([
-    spacingSignal('radius')
-], Rect.prototype, "radius", void 0);
-__decorate([
-    initial(false),
-    signal()
-], Rect.prototype, "smoothCorners", void 0);
-__decorate([
-    initial(0.6),
-    signal()
-], Rect.prototype, "cornerSharpness", void 0);
-__decorate([
-    computed()
-], Rect.prototype, "profile", null);
-Rect = __decorate([
-    nodeName('Rect')
-], Rect);
-export { Rect };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmVjdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9SZWN0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBLE9BQU8sRUFDTCxJQUFJLEdBTUwsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLGNBQWMsRUFBQyxNQUFNLDBCQUEwQixDQUFDO0FBQ3hELE9BQU8sRUFBQyxRQUFRLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDbEUsT0FBTyxFQUFDLGFBQWEsRUFBQyxNQUFNLDZCQUE2QixDQUFDO0FBRTFELE9BQU8sRUFBQyxhQUFhLEVBQUMsTUFBTSxVQUFVLENBQUM7QUFDdkMsT0FBTyxFQUFDLEtBQUssRUFBYSxNQUFNLFNBQVMsQ0FBQztBQW9CbkMsSUFBTSxJQUFJLEdBQVYsTUFBTSxJQUFLLFNBQVEsS0FBSztJQTZGN0IsWUFBbUIsS0FBZ0I7UUFDakMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2YsQ0FBQztJQUdNLE9BQU87UUFDWixPQUFPLGNBQWMsQ0FDbkIsSUFBSSxDQUFDLFlBQVksRUFBRSxFQUNuQixJQUFJLENBQUMsTUFBTSxFQUFFLEVBQ2IsSUFBSSxDQUFDLGFBQWEsRUFBRSxFQUNwQixJQUFJLENBQUMsZUFBZSxFQUFFLENBQ3ZCLENBQUM7SUFDSixDQUFDO0lBRWtCLFdBQVc7UUFDNUIsT0FBTztZQUNMLENBQUMsRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxNQUFNLEVBQUU7WUFDOUIsQ0FBQyxFQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLE1BQU0sRUFBRTtTQUNoQyxDQUFDO0lBQ0osQ0FBQztJQUVrQixvQkFBb0IsQ0FBQyxHQUFTO1FBQy9DLE9BQU8sR0FBRyxDQUFDO0lBQ2IsQ0FBQztJQUVrQixZQUFZO1FBQzdCLE9BQU8sSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQyxDQUFDO0lBQ3BELENBQUM7SUFFa0IsT0FBTztRQUN4QixJQUFJLElBQUksQ0FBQyxlQUFlLEVBQUUsRUFBRSxDQUFDO1lBQzNCLE9BQU8sSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUMsSUFBSSxDQUFDO1FBQ3RDLENBQUM7UUFFRCxNQUFNLElBQUksR0FBRyxJQUFJLE1BQU0sRUFBRSxDQUFDO1FBQzFCLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUM3QixNQUFNLGFBQWEsR0FBRyxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDM0MsTUFBTSxlQUFlLEdBQUcsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQy9DLE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQztRQUMvQyxhQUFhLENBQUMsSUFBSSxFQUFFLEdBQUcsRUFBRSxNQUFNLEVBQUUsYUFBYSxFQUFFLGVBQWUsQ0FBQyxDQUFDO1FBRWpFLE9BQU8sSUFBSSxDQUFDO0lBQ2QsQ0FBQztJQUVrQixZQUFZO1FBQzdCLE9BQU8sS0FBSyxDQUFDLFlBQVksRUFBRSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUMsQ0FBQztJQUN4RCxDQUFDO0lBRWtCLGFBQWE7UUFDOUIsTUFBTSxJQUFJLEdBQUcsSUFBSSxNQUFNLEVBQUUsQ0FBQztRQUMxQixNQUFNLFVBQVUsR0FBRyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7UUFDckMsTUFBTSxNQUFNLEdBQUcsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLFNBQVMsQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUNuRCxNQUFNLGFBQWEsR0FBRyxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDM0MsTUFBTSxlQUFlLEdBQUcsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQy9DLE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7UUFDbEUsYUFBYSxDQUFDLElBQUksRUFBRSxHQUFHLEVBQUUsTUFBTSxFQUFFLGFBQWEsRUFBRSxlQUFlLENBQUMsQ0FBQztRQUVqRSxPQUFPLElBQUksQ0FBQztJQUNkLENBQUM7Q0FDRixDQUFBO0FBaEh5QjtJQUR2QixhQUFhLENBQUMsUUFBUSxDQUFDO29DQUM0QjtBQTJCNUI7SUFGdkIsT0FBTyxDQUFDLEtBQUssQ0FBQztJQUNkLE1BQU0sRUFBRTsyQ0FDMEQ7QUF3QjNDO0lBRnZCLE9BQU8sQ0FBQyxHQUFHLENBQUM7SUFDWixNQUFNLEVBQUU7NkNBQzJEO0FBTzdEO0lBRE4sUUFBUSxFQUFFO21DQVFWO0FBekdVLElBQUk7SUFEaEIsUUFBUSxDQUFDLE1BQU0sQ0FBQztHQUNKLElBQUksQ0F3SmhCIn0=
+__decorate([spacingSignal('radius')], Rect.prototype, 'radius', void 0);
+__decorate([initial(false), signal()], Rect.prototype, 'smoothCorners', void 0);
+__decorate([initial(0.6), signal()], Rect.prototype, 'cornerSharpness', void 0);
+__decorate([computed()], Rect.prototype, 'profile', null);
+Rect = __decorate([nodeName('Rect')], Rect);
+export {Rect};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmVjdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9SZWN0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBLE9BQU8sRUFDTCxJQUFJLEdBTUwsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLGNBQWMsRUFBQyxNQUFNLDBCQUEwQixDQUFDO0FBQ3hELE9BQU8sRUFBQyxRQUFRLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDbEUsT0FBTyxFQUFDLGFBQWEsRUFBQyxNQUFNLDZCQUE2QixDQUFDO0FBRTFELE9BQU8sRUFBQyxhQUFhLEVBQUMsTUFBTSxVQUFVLENBQUM7QUFDdkMsT0FBTyxFQUFDLEtBQUssRUFBYSxNQUFNLFNBQVMsQ0FBQztBQW9CbkMsSUFBTSxJQUFJLEdBQVYsTUFBTSxJQUFLLFNBQVEsS0FBSztJQTZGN0IsWUFBbUIsS0FBZ0I7UUFDakMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2YsQ0FBQztJQUdNLE9BQU87UUFDWixPQUFPLGNBQWMsQ0FDbkIsSUFBSSxDQUFDLFlBQVksRUFBRSxFQUNuQixJQUFJLENBQUMsTUFBTSxFQUFFLEVBQ2IsSUFBSSxDQUFDLGFBQWEsRUFBRSxFQUNwQixJQUFJLENBQUMsZUFBZSxFQUFFLENBQ3ZCLENBQUM7SUFDSixDQUFDO0lBRWtCLFdBQVc7UUFDNUIsT0FBTztZQUNMLENBQUMsRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxNQUFNLEVBQUU7WUFDOUIsQ0FBQyxFQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLE1BQU0sRUFBRTtTQUNoQyxDQUFDO0lBQ0osQ0FBQztJQUVrQixvQkFBb0IsQ0FBQyxHQUFTO1FBQy9DLE9BQU8sR0FBRyxDQUFDO0lBQ2IsQ0FBQztJQUVrQixZQUFZO1FBQzdCLE9BQU8sSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQyxDQUFDO0lBQ3BELENBQUM7SUFFa0IsT0FBTztRQUN4QixJQUFJLElBQUksQ0FBQyxlQUFlLEVBQUUsRUFBRSxDQUFDO1lBQzNCLE9BQU8sSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUMsSUFBSSxDQUFDO1FBQ3RDLENBQUM7UUFFRCxNQUFNLElBQUksR0FBRyxJQUFJLE1BQU0sRUFBRSxDQUFDO1FBQzFCLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUM3QixNQUFNLGFBQWEsR0FBRyxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDM0MsTUFBTSxlQUFlLEdBQUcsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQy9DLE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQztRQUMvQyxhQUFhLENBQUMsSUFBSSxFQUFFLEdBQUcsRUFBRSxNQUFNLEVBQUUsYUFBYSxFQUFFLGVBQWUsQ0FBQyxDQUFDO1FBRWpFLE9BQU8sSUFBSSxDQUFDO0lBQ2QsQ0FBQztJQUVrQixZQUFZO1FBQzdCLE9BQU8sS0FBSyxDQUFDLFlBQVksRUFBRSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUMsQ0FBQztJQUN4RCxDQUFDO0lBRWtCLGFBQWE7UUFDOUIsTUFBTSxJQUFJLEdBQUcsSUFBSSxNQUFNLEVBQUUsQ0FBQztRQUMxQixNQUFNLFVBQVUsR0FBRyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7UUFDckMsTUFBTSxNQUFNLEdBQUcsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLFNBQVMsQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUNuRCxNQUFNLGFBQWEsR0FBRyxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDM0MsTUFBTSxlQUFlLEdBQUcsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQy9DLE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7UUFDbEUsYUFBYSxDQUFDLElBQUksRUFBRSxHQUFHLEVBQUUsTUFBTSxFQUFFLGFBQWEsRUFBRSxlQUFlLENBQUMsQ0FBQztRQUVqRSxPQUFPLElBQUksQ0FBQztJQUNkLENBQUM7Q0FDRixDQUFBO0FBaEh5QjtJQUR2QixhQUFhLENBQUMsUUFBUSxDQUFDO29DQUM0QjtBQTJCNUI7SUFGdkIsT0FBTyxDQUFDLEtBQUssQ0FBQztJQUNkLE1BQU0sRUFBRTsyQ0FDMEQ7QUF3QjNDO0lBRnZCLE9BQU8sQ0FBQyxHQUFHLENBQUM7SUFDWixNQUFNLEVBQUU7NkNBQzJEO0FBTzdEO0lBRE4sUUFBUSxFQUFFO21DQVFWO0FBekdVLElBQUk7SUFEaEIsUUFBUSxDQUFDLE1BQU0sQ0FBQztHQUNKLElBQUksQ0F3SmhCIn0=

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
+    | 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;
 }
-//# sourceMappingURL=SVG.d.ts.map
+//# sourceMappingURL=SVG.d.ts.map