@revideo/2d 0.1.10 → 0.2.1-alpha.891

package/lib/components/Grid.d.ts

@@ -1,18 +1,23 @@
-import { PossibleVector2, SignalValue, SimpleSignal, Vector2Signal } from '@revideo/core';
-import { Shape, ShapeProps } from './Shape';
+import {
+  PossibleVector2,
+  SignalValue,
+  SimpleSignal,
+  Vector2Signal,
+} from '@revideo/core';
+import {Shape, ShapeProps} from './Shape';
 export interface GridProps extends ShapeProps {
-    /**
-     * {@inheritDoc Grid.spacing}
-     */
-    spacing?: SignalValue<PossibleVector2>;
-    /**
-     * {@inheritDoc Grid.start}
-     */
-    start?: SignalValue<number>;
-    /**
-     * {@inheritDoc Grid.end}
-     */
-    end?: SignalValue<number>;
+  /**
+   * {@inheritDoc Grid.spacing}
+   */
+  spacing?: SignalValue<PossibleVector2>;
+  /**
+   * {@inheritDoc Grid.start}
+   */
+  start?: SignalValue<number>;
+  /**
+   * {@inheritDoc Grid.end}
+   */
+  end?: SignalValue<number>;
 }
 /**
  * A node for drawing a two-dimensional grid.
@@ -44,32 +49,32 @@ export interface GridProps extends ShapeProps {
  * ```
  */
 export declare class Grid extends Shape {
-    /**
-     * The spacing between the grid lines.
-     */
-    readonly spacing: Vector2Signal<this>;
-    /**
-     * The percentage that should be clipped from the beginning of each grid line.
-     *
-     * @remarks
-     * The portion of each grid line that comes before the given percentage will
-     * be made invisible.
-     *
-     * This property is useful for animating the grid appearing on-screen.
-     */
-    readonly start: SimpleSignal<number, this>;
-    /**
-     * The percentage that should be clipped from the end of each grid line.
-     *
-     * @remarks
-     * The portion of each grid line that comes after the given percentage will
-     * be made invisible.
-     *
-     * This property is useful for animating the grid appearing on-screen.
-     */
-    readonly end: SimpleSignal<number, this>;
-    constructor(props: GridProps);
-    protected drawShape(context: CanvasRenderingContext2D): void;
-    private mapPoints;
+  /**
+   * The spacing between the grid lines.
+   */
+  readonly spacing: Vector2Signal<this>;
+  /**
+   * The percentage that should be clipped from the beginning of each grid line.
+   *
+   * @remarks
+   * The portion of each grid line that comes before the given percentage will
+   * be made invisible.
+   *
+   * This property is useful for animating the grid appearing on-screen.
+   */
+  readonly start: SimpleSignal<number, this>;
+  /**
+   * The percentage that should be clipped from the end of each grid line.
+   *
+   * @remarks
+   * The portion of each grid line that comes after the given percentage will
+   * be made invisible.
+   *
+   * This property is useful for animating the grid appearing on-screen.
+   */
+  readonly end: SimpleSignal<number, this>;
+  constructor(props: GridProps);
+  protected drawShape(context: CanvasRenderingContext2D): void;
+  private mapPoints;
 }
-//# sourceMappingURL=Grid.d.ts.map
+//# sourceMappingURL=Grid.d.ts.map

package/lib/components/Grid.js

@@ -1,12 +1,25 @@
-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 { map, } from '@revideo/core';
-import { initial, nodeName, signal, vector2Signal } from '../decorators';
-import { Shape } from './Shape';
+  };
+import {map} from '@revideo/core';
+import {initial, nodeName, signal, vector2Signal} from '../decorators';
+import {Shape} from './Shape';
 /**
  * A node for drawing a two-dimensional grid.
  *
@@ -37,55 +50,49 @@ import { Shape } from './Shape';
  * ```
  */
 let Grid = class Grid extends Shape {
-    constructor(props) {
-        super(props);
+  constructor(props) {
+    super(props);
+  }
+  drawShape(context) {
+    context.save();
+    this.applyStyle(context);
+    this.drawRipple(context);
+    const spacing = this.spacing();
+    const size = this.computedSize().scale(0.5);
+    const steps = size.div(spacing).floored;
+    for (let x = -steps.x; x <= steps.x; x++) {
+      const [from, to] = this.mapPoints(-size.height, size.height);
+      context.beginPath();
+      context.moveTo(spacing.x * x, from);
+      context.lineTo(spacing.x * x, to);
+      context.stroke();
     }
-    drawShape(context) {
-        context.save();
-        this.applyStyle(context);
-        this.drawRipple(context);
-        const spacing = this.spacing();
-        const size = this.computedSize().scale(0.5);
-        const steps = size.div(spacing).floored;
-        for (let x = -steps.x; x <= steps.x; x++) {
-            const [from, to] = this.mapPoints(-size.height, size.height);
-            context.beginPath();
-            context.moveTo(spacing.x * x, from);
-            context.lineTo(spacing.x * x, to);
-            context.stroke();
-        }
-        for (let y = -steps.y; y <= steps.y; y++) {
-            const [from, to] = this.mapPoints(-size.width, size.width);
-            context.beginPath();
-            context.moveTo(from, spacing.y * y);
-            context.lineTo(to, spacing.y * y);
-            context.stroke();
-        }
-        context.restore();
+    for (let y = -steps.y; y <= steps.y; y++) {
+      const [from, to] = this.mapPoints(-size.width, size.width);
+      context.beginPath();
+      context.moveTo(from, spacing.y * y);
+      context.lineTo(to, spacing.y * y);
+      context.stroke();
     }
-    mapPoints(start, end) {
-        let from = map(start, end, this.start());
-        let to = map(start, end, this.end());
-        if (to < from) {
-            [from, to] = [to, from];
-        }
-        return [from, to];
+    context.restore();
+  }
+  mapPoints(start, end) {
+    let from = map(start, end, this.start());
+    let to = map(start, end, this.end());
+    if (to < from) {
+      [from, to] = [to, from];
     }
+    return [from, to];
+  }
 };
-__decorate([
-    initial(80),
-    vector2Signal('spacing')
-], Grid.prototype, "spacing", void 0);
-__decorate([
-    initial(0),
-    signal()
-], Grid.prototype, "start", void 0);
-__decorate([
-    initial(1),
-    signal()
-], Grid.prototype, "end", void 0);
-Grid = __decorate([
-    nodeName('Grid')
-], Grid);
-export { Grid };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiR3JpZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9HcmlkLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBLE9BQU8sRUFLTCxHQUFHLEdBQ0osTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFFLGFBQWEsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN2RSxPQUFPLEVBQUMsS0FBSyxFQUFhLE1BQU0sU0FBUyxDQUFDO0FBaUIxQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTRCRztBQUVJLElBQU0sSUFBSSxHQUFWLE1BQU0sSUFBSyxTQUFRLEtBQUs7SUFrQzdCLFlBQW1CLEtBQWdCO1FBQ2pDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNmLENBQUM7SUFFa0IsU0FBUyxDQUFDLE9BQWlDO1FBQzVELE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNmLElBQUksQ0FBQyxVQUFVLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDekIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUV6QixNQUFNLE9BQU8sR0FBRyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7UUFDL0IsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUM1QyxNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLE9BQU8sQ0FBQyxDQUFDLE9BQU8sQ0FBQztRQUV4QyxLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLElBQUksS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDO1lBQ3pDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1lBRTdELE9BQU8sQ0FBQyxTQUFTLEVBQUUsQ0FBQztZQUNwQixPQUFPLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDLEdBQUcsQ0FBQyxFQUFFLElBQUksQ0FBQyxDQUFDO1lBQ3BDLE9BQU8sQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUMsR0FBRyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUM7WUFDbEMsT0FBTyxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBQ25CLENBQUM7UUFFRCxLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLElBQUksS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDO1lBQ3pDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBRTNELE9BQU8sQ0FBQyxTQUFTLEVBQUUsQ0FBQztZQUNwQixPQUFPLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRSxPQUFPLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDO1lBQ3BDLE9BQU8sQ0FBQyxNQUFNLENBQUMsRUFBRSxFQUFFLE9BQU8sQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7WUFDbEMsT0FBTyxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBQ25CLENBQUM7UUFFRCxPQUFPLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUVPLFNBQVMsQ0FBQyxLQUFhLEVBQUUsR0FBVztRQUMxQyxJQUFJLElBQUksR0FBRyxHQUFHLENBQUMsS0FBSyxFQUFFLEdBQUcsRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQztRQUN6QyxJQUFJLEVBQUUsR0FBRyxHQUFHLENBQUMsS0FBSyxFQUFFLEdBQUcsRUFBRSxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUMsQ0FBQztRQUVyQyxJQUFJLEVBQUUsR0FBRyxJQUFJLEVBQUUsQ0FBQztZQUNkLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxHQUFHLENBQUMsRUFBRSxFQUFFLElBQUksQ0FBQyxDQUFDO1FBQzFCLENBQUM7UUFFRCxPQUFPLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBQ3BCLENBQUM7Q0FDRixDQUFBO0FBeEV5QjtJQUZ2QixPQUFPLENBQUMsRUFBRSxDQUFDO0lBQ1gsYUFBYSxDQUFDLFNBQVMsQ0FBQztxQ0FDNEI7QUFhN0I7SUFGdkIsT0FBTyxDQUFDLENBQUMsQ0FBQztJQUNWLE1BQU0sRUFBRTttQ0FDaUQ7QUFhbEM7SUFGdkIsT0FBTyxDQUFDLENBQUMsQ0FBQztJQUNWLE1BQU0sRUFBRTtpQ0FDK0M7QUFoQzdDLElBQUk7SUFEaEIsUUFBUSxDQUFDLE1BQU0sQ0FBQztHQUNKLElBQUksQ0E4RWhCIn0=
+__decorate(
+  [initial(80), vector2Signal('spacing')],
+  Grid.prototype,
+  'spacing',
+  void 0,
+);
+__decorate([initial(0), signal()], Grid.prototype, 'start', void 0);
+__decorate([initial(1), signal()], Grid.prototype, 'end', void 0);
+Grid = __decorate([nodeName('Grid')], Grid);
+export {Grid};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiR3JpZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9HcmlkLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBLE9BQU8sRUFLTCxHQUFHLEdBQ0osTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFFLGFBQWEsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN2RSxPQUFPLEVBQUMsS0FBSyxFQUFhLE1BQU0sU0FBUyxDQUFDO0FBaUIxQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTRCRztBQUVJLElBQU0sSUFBSSxHQUFWLE1BQU0sSUFBSyxTQUFRLEtBQUs7SUFrQzdCLFlBQW1CLEtBQWdCO1FBQ2pDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNmLENBQUM7SUFFa0IsU0FBUyxDQUFDLE9BQWlDO1FBQzVELE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNmLElBQUksQ0FBQyxVQUFVLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDekIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUV6QixNQUFNLE9BQU8sR0FBRyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7UUFDL0IsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUM1QyxNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLE9BQU8sQ0FBQyxDQUFDLE9BQU8sQ0FBQztRQUV4QyxLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLElBQUksS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDO1lBQ3pDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1lBRTdELE9BQU8sQ0FBQyxTQUFTLEVBQUUsQ0FBQztZQUNwQixPQUFPLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDLEdBQUcsQ0FBQyxFQUFFLElBQUksQ0FBQyxDQUFDO1lBQ3BDLE9BQU8sQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUMsR0FBRyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUM7WUFDbEMsT0FBTyxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBQ25CLENBQUM7UUFFRCxLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLElBQUksS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDO1lBQ3pDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBRTNELE9BQU8sQ0FBQyxTQUFTLEVBQUUsQ0FBQztZQUNwQixPQUFPLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRSxPQUFPLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDO1lBQ3BDLE9BQU8sQ0FBQyxNQUFNLENBQUMsRUFBRSxFQUFFLE9BQU8sQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7WUFDbEMsT0FBTyxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBQ25CLENBQUM7UUFFRCxPQUFPLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUVPLFNBQVMsQ0FBQyxLQUFhLEVBQUUsR0FBVztRQUMxQyxJQUFJLElBQUksR0FBRyxHQUFHLENBQUMsS0FBSyxFQUFFLEdBQUcsRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQztRQUN6QyxJQUFJLEVBQUUsR0FBRyxHQUFHLENBQUMsS0FBSyxFQUFFLEdBQUcsRUFBRSxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUMsQ0FBQztRQUVyQyxJQUFJLEVBQUUsR0FBRyxJQUFJLEVBQUUsQ0FBQztZQUNkLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxHQUFHLENBQUMsRUFBRSxFQUFFLElBQUksQ0FBQyxDQUFDO1FBQzFCLENBQUM7UUFFRCxPQUFPLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBQ3BCLENBQUM7Q0FDRixDQUFBO0FBeEV5QjtJQUZ2QixPQUFPLENBQUMsRUFBRSxDQUFDO0lBQ1gsYUFBYSxDQUFDLFNBQVMsQ0FBQztxQ0FDNEI7QUFhN0I7SUFGdkIsT0FBTyxDQUFDLENBQUMsQ0FBQztJQUNWLE1BQU0sRUFBRTttQ0FDaUQ7QUFhbEM7SUFGdkIsT0FBTyxDQUFDLENBQUMsQ0FBQztJQUNWLE1BQU0sRUFBRTtpQ0FDK0M7QUFoQzdDLElBQUk7SUFEaEIsUUFBUSxDQUFDLE1BQU0sQ0FBQztHQUNKLElBQUksQ0E4RWhCIn0=

package/lib/components/Icon.d.ts

@@ -1,58 +1,63 @@
-import { ColorSignal, PossibleColor, SignalValue, SimpleSignal } from '@revideo/core';
-import { Img, ImgProps } from './Img';
+import {
+  ColorSignal,
+  PossibleColor,
+  SignalValue,
+  SimpleSignal,
+} from '@revideo/core';
+import {Img, ImgProps} from './Img';
 export interface IconProps extends ImgProps {
-    /**
-     * {@inheritDoc Icon.icon}
-     */
-    icon: SignalValue<string>;
-    /**
-     * {@inheritDoc Icon.color}
-     */
-    color?: SignalValue<PossibleColor>;
+  /**
+   * {@inheritDoc Icon.icon}
+   */
+  icon: SignalValue<string>;
+  /**
+   * {@inheritDoc Icon.color}
+   */
+  color?: SignalValue<PossibleColor>;
 }
 /**
  * An Icon Component that provides easy access to over 150k icons.
  * See https://icones.js.org/collection/all for all available Icons.
  */
 export declare class Icon extends Img {
-    /**
-     * The identifier of the icon.
-     *
-     * @remarks
-     * You can find identifiers on [Icônes](https://icones.js.org).
-     * They can look like this:
-     * * `mdi:language-typescript`
-     * * `ph:anchor-simple-bold`
-     * * `ph:activity-bold`
-     */
-    icon: SimpleSignal<string, this>;
-    /**
-     * The color of the icon
-     *
-     * @remarks
-     * Provide the color in one of the following formats:
-     * * named color like `red`, `darkgray`, …
-     * * hexadecimal string with # like `#bada55`, `#141414`
-     *   Value can be either RGB or RGBA: `#bada55`, `#bada55aa` (latter is partially transparent)
-     *   The shorthand version (e.g. `#abc` for `#aabbcc` is also possible.)
-     *
-     * @defaultValue 'white'
-     */
-    color: ColorSignal<this>;
-    constructor(props: IconProps);
-    /**
-     * Create the URL that will be used as the Image source
-     * @returns Address to Iconify API for the requested Icon.
-     */
-    protected svgUrl(): string;
-    /**
-     * overrides `Image.src` getter
-     */
-    protected getSrc(): string;
-    /**
-     * overrides `Image.src` setter to warn the user that the value
-     * is not used
-     */
-    protected setSrc(src: string | null): void;
+  /**
+   * The identifier of the icon.
+   *
+   * @remarks
+   * You can find identifiers on [Icônes](https://icones.js.org).
+   * They can look like this:
+   * * `mdi:language-typescript`
+   * * `ph:anchor-simple-bold`
+   * * `ph:activity-bold`
+   */
+  icon: SimpleSignal<string, this>;
+  /**
+   * The color of the icon
+   *
+   * @remarks
+   * Provide the color in one of the following formats:
+   * * named color like `red`, `darkgray`, …
+   * * hexadecimal string with # like `#bada55`, `#141414`
+   *   Value can be either RGB or RGBA: `#bada55`, `#bada55aa` (latter is partially transparent)
+   *   The shorthand version (e.g. `#abc` for `#aabbcc` is also possible.)
+   *
+   * @defaultValue 'white'
+   */
+  color: ColorSignal<this>;
+  constructor(props: IconProps);
+  /**
+   * Create the URL that will be used as the Image source
+   * @returns Address to Iconify API for the requested Icon.
+   */
+  protected svgUrl(): string;
+  /**
+   * overrides `Image.src` getter
+   */
+  protected getSrc(): string;
+  /**
+   * overrides `Image.src` setter to warn the user that the value
+   * is not used
+   */
+  protected setSrc(src: string | null): void;
 }
-//# sourceMappingURL=Icon.d.ts.map
+//# sourceMappingURL=Icon.d.ts.map

package/lib/components/Icon.js

@@ -1,58 +1,66 @@
-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 { useLogger, } from '@revideo/core';
-import { colorSignal, computed, initial, signal } from '../decorators';
-import { Img } from './Img';
+  };
+import {useLogger} from '@revideo/core';
+import {colorSignal, computed, initial, signal} from '../decorators';
+import {Img} from './Img';
 /**
  * An Icon Component that provides easy access to over 150k icons.
  * See https://icones.js.org/collection/all for all available Icons.
  */
 export class Icon extends Img {
-    constructor(props) {
-        super({
-            ...props,
-            src: null,
-        });
-    }
-    /**
-     * Create the URL that will be used as the Image source
-     * @returns Address to Iconify API for the requested Icon.
-     */
-    svgUrl() {
-        const iconPathSegment = this.icon().replace(':', '/');
-        const encodedColorValue = encodeURIComponent(this.color().hex());
-        // Iconify API is documented here: https://docs.iconify.design/api/svg.html#color
-        return `https://api.iconify.design/${iconPathSegment}.svg?color=${encodedColorValue}`;
-    }
-    /**
-     * overrides `Image.src` getter
-     */
-    getSrc() {
-        return this.svgUrl();
-    }
-    /**
-     * overrides `Image.src` setter to warn the user that the value
-     * is not used
-     */
-    setSrc(src) {
-        if (src === null) {
-            return;
-        }
-        useLogger().warn("The Icon Component does not accept setting the `src`. If you need access to `src`, use '<Img/>` instead.");
+  constructor(props) {
+    super({
+      ...props,
+      src: null,
+    });
+  }
+  /**
+   * Create the URL that will be used as the Image source
+   * @returns Address to Iconify API for the requested Icon.
+   */
+  svgUrl() {
+    const iconPathSegment = this.icon().replace(':', '/');
+    const encodedColorValue = encodeURIComponent(this.color().hex());
+    // Iconify API is documented here: https://docs.iconify.design/api/svg.html#color
+    return `https://api.iconify.design/${iconPathSegment}.svg?color=${encodedColorValue}`;
+  }
+  /**
+   * overrides `Image.src` getter
+   */
+  getSrc() {
+    return this.svgUrl();
+  }
+  /**
+   * overrides `Image.src` setter to warn the user that the value
+   * is not used
+   */
+  setSrc(src) {
+    if (src === null) {
+      return;
     }
+    useLogger().warn(
+      "The Icon Component does not accept setting the `src`. If you need access to `src`, use '<Img/>` instead.",
+    );
+  }
 }
-__decorate([
-    signal()
-], Icon.prototype, "icon", void 0);
-__decorate([
-    initial('white'),
-    colorSignal()
-], Icon.prototype, "color", void 0);
-__decorate([
-    computed()
-], Icon.prototype, "svgUrl", null);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9JY29uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBLE9BQU8sRUFLTCxTQUFTLEdBQ1YsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLFdBQVcsRUFBRSxRQUFRLEVBQUUsT0FBTyxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUNyRSxPQUFPLEVBQUMsR0FBRyxFQUFXLE1BQU0sT0FBTyxDQUFDO0FBY3BDOzs7R0FHRztBQUNILE1BQU0sT0FBTyxJQUFLLFNBQVEsR0FBRztJQThCM0IsWUFBbUIsS0FBZ0I7UUFDakMsS0FBSyxDQUFDO1lBQ0osR0FBRyxLQUFLO1lBQ1IsR0FBRyxFQUFFLElBQUk7U0FDVixDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQ7OztPQUdHO0lBRU8sTUFBTTtRQUNkLE1BQU0sZUFBZSxHQUFHLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxPQUFPLENBQUMsR0FBRyxFQUFFLEdBQUcsQ0FBQyxDQUFDO1FBQ3RELE1BQU0saUJBQWlCLEdBQUcsa0JBQWtCLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLEdBQUcsRUFBRSxDQUFDLENBQUM7UUFDakUsaUZBQWlGO1FBQ2pGLE9BQU8sOEJBQThCLGVBQWUsY0FBYyxpQkFBaUIsRUFBRSxDQUFDO0lBQ3hGLENBQUM7SUFFRDs7T0FFRztJQUNPLE1BQU07UUFDZCxPQUFPLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztJQUN2QixDQUFDO0lBRUQ7OztPQUdHO0lBQ08sTUFBTSxDQUFDLEdBQWtCO1FBQ2pDLElBQUksR0FBRyxLQUFLLElBQUksRUFBRSxDQUFDO1lBQ2pCLE9BQU87UUFDVCxDQUFDO1FBQ0QsU0FBUyxFQUFFLENBQUMsSUFBSSxDQUNkLDBHQUEwRyxDQUMzRyxDQUFDO0lBQ0osQ0FBQztDQUNGO0FBeERnQjtJQURkLE1BQU0sRUFBRTtrQ0FDdUM7QUFnQmpDO0lBRmQsT0FBTyxDQUFDLE9BQU8sQ0FBQztJQUNoQixXQUFXLEVBQUU7bUNBQzBCO0FBYzlCO0lBRFQsUUFBUSxFQUFFO2tDQU1WIn0=
+__decorate([signal()], Icon.prototype, 'icon', void 0);
+__decorate([initial('white'), colorSignal()], Icon.prototype, 'color', void 0);
+__decorate([computed()], Icon.prototype, 'svgUrl', null);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9JY29uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBLE9BQU8sRUFLTCxTQUFTLEdBQ1YsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLFdBQVcsRUFBRSxRQUFRLEVBQUUsT0FBTyxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUNyRSxPQUFPLEVBQUMsR0FBRyxFQUFXLE1BQU0sT0FBTyxDQUFDO0FBY3BDOzs7R0FHRztBQUNILE1BQU0sT0FBTyxJQUFLLFNBQVEsR0FBRztJQThCM0IsWUFBbUIsS0FBZ0I7UUFDakMsS0FBSyxDQUFDO1lBQ0osR0FBRyxLQUFLO1lBQ1IsR0FBRyxFQUFFLElBQUk7U0FDVixDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQ7OztPQUdHO0lBRU8sTUFBTTtRQUNkLE1BQU0sZUFBZSxHQUFHLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxPQUFPLENBQUMsR0FBRyxFQUFFLEdBQUcsQ0FBQyxDQUFDO1FBQ3RELE1BQU0saUJBQWlCLEdBQUcsa0JBQWtCLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLEdBQUcsRUFBRSxDQUFDLENBQUM7UUFDakUsaUZBQWlGO1FBQ2pGLE9BQU8sOEJBQThCLGVBQWUsY0FBYyxpQkFBaUIsRUFBRSxDQUFDO0lBQ3hGLENBQUM7SUFFRDs7T0FFRztJQUNPLE1BQU07UUFDZCxPQUFPLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztJQUN2QixDQUFDO0lBRUQ7OztPQUdHO0lBQ08sTUFBTSxDQUFDLEdBQWtCO1FBQ2pDLElBQUksR0FBRyxLQUFLLElBQUksRUFBRSxDQUFDO1lBQ2pCLE9BQU87UUFDVCxDQUFDO1FBQ0QsU0FBUyxFQUFFLENBQUMsSUFBSSxDQUNkLDBHQUEwRyxDQUMzRyxDQUFDO0lBQ0osQ0FBQztDQUNGO0FBeERnQjtJQURkLE1BQU0sRUFBRTtrQ0FDdUM7QUFnQmpDO0lBRmQsT0FBTyxDQUFDLE9BQU8sQ0FBQztJQUNoQixXQUFXLEVBQUU7bUNBQzBCO0FBYzlCO0lBRFQsUUFBUSxFQUFFO2tDQU1WIn0=

package/lib/components/Img.d.ts

@@ -1,19 +1,26 @@
-import { Color, PossibleVector2, SerializedVector2, SignalValue, SimpleSignal, Vector2 } from '@revideo/core';
-import { DesiredLength } from '../partials';
-import { Rect, RectProps } from './Rect';
+import {
+  Color,
+  PossibleVector2,
+  SerializedVector2,
+  SignalValue,
+  SimpleSignal,
+  Vector2,
+} from '@revideo/core';
+import {DesiredLength} from '../partials';
+import {Rect, RectProps} from './Rect';
 export interface ImgProps extends RectProps {
-    /**
-     * {@inheritDoc Img.src}
-     */
-    src?: SignalValue<string | null>;
-    /**
-     * {@inheritDoc Img.alpha}
-     */
-    alpha?: SignalValue<number>;
-    /**
-     * {@inheritDoc Img.smoothing}
-     */
-    smoothing?: SignalValue<boolean>;
+  /**
+   * {@inheritDoc Img.src}
+   */
+  src?: SignalValue<string | null>;
+  /**
+   * {@inheritDoc Img.alpha}
+   */
+  alpha?: SignalValue<number>;
+  /**
+   * {@inheritDoc Img.smoothing}
+   */
+  smoothing?: SignalValue<boolean>;
 }
 /**
  * A node for displaying images.
@@ -49,68 +56,68 @@ export interface ImgProps extends RectProps {
  * ```
  */
 export declare class Img extends Rect {
-    private static pool;
-    /**
-     * The source of this image.
-     *
-     * @example
-     * Using a local image:
-     * ```tsx
-     * import image from './example.png';
-     * // ...
-     * view.add(<Img src={image} />)
-     * ```
-     * Loading an image from the internet:
-     * ```tsx
-     * view.add(<Img src="https://example.com/image.png" />)
-     * ```
-     */
-    readonly src: SimpleSignal<string, this>;
-    /**
-     * The alpha value of this image.
-     *
-     * @remarks
-     * Unlike opacity, the alpha value affects only the image itself, leaving the
-     * fill, stroke, and children intact.
-     */
-    readonly alpha: SimpleSignal<number, this>;
-    /**
-     * Whether the image should be smoothed.
-     *
-     * @remarks
-     * When disabled, the image will be scaled using the nearest neighbor
-     * interpolation with no smoothing. The resulting image will appear pixelated.
-     *
-     * @defaultValue true
-     */
-    readonly smoothing: SimpleSignal<boolean, this>;
-    constructor(props: ImgProps);
-    protected desiredSize(): SerializedVector2<DesiredLength>;
-    protected image(): HTMLImageElement;
-    protected imageCanvas(): CanvasRenderingContext2D;
-    protected filledImageCanvas(): CanvasRenderingContext2D;
-    protected draw(context: CanvasRenderingContext2D): void;
-    protected applyFlex(): void;
-    /**
-     * Get color of the image at the given position.
-     *
-     * @param position - The position in local space at which to sample the color.
-     */
-    getColorAtPoint(position: PossibleVector2): Color;
-    /**
-     * The natural size of this image.
-     *
-     * @remarks
-     * The natural size is the size of the source image unaffected by the size
-     * and scale properties.
-     */
-    naturalSize(): Vector2;
-    /**
-     * Get color of the image at the given pixel.
-     *
-     * @param position - The pixel's position.
-     */
-    getPixelColor(position: PossibleVector2): Color;
-    protected collectAsyncResources(): void;
+  private static pool;
+  /**
+   * The source of this image.
+   *
+   * @example
+   * Using a local image:
+   * ```tsx
+   * import image from './example.png';
+   * // ...
+   * view.add(<Img src={image} />)
+   * ```
+   * Loading an image from the internet:
+   * ```tsx
+   * view.add(<Img src="https://example.com/image.png" />)
+   * ```
+   */
+  readonly src: SimpleSignal<string, this>;
+  /**
+   * The alpha value of this image.
+   *
+   * @remarks
+   * Unlike opacity, the alpha value affects only the image itself, leaving the
+   * fill, stroke, and children intact.
+   */
+  readonly alpha: SimpleSignal<number, this>;
+  /**
+   * Whether the image should be smoothed.
+   *
+   * @remarks
+   * When disabled, the image will be scaled using the nearest neighbor
+   * interpolation with no smoothing. The resulting image will appear pixelated.
+   *
+   * @defaultValue true
+   */
+  readonly smoothing: SimpleSignal<boolean, this>;
+  constructor(props: ImgProps);
+  protected desiredSize(): SerializedVector2<DesiredLength>;
+  protected image(): HTMLImageElement;
+  protected imageCanvas(): CanvasRenderingContext2D;
+  protected filledImageCanvas(): CanvasRenderingContext2D;
+  protected draw(context: CanvasRenderingContext2D): void;
+  protected applyFlex(): void;
+  /**
+   * Get color of the image at the given position.
+   *
+   * @param position - The position in local space at which to sample the color.
+   */
+  getColorAtPoint(position: PossibleVector2): Color;
+  /**
+   * The natural size of this image.
+   *
+   * @remarks
+   * The natural size is the size of the source image unaffected by the size
+   * and scale properties.
+   */
+  naturalSize(): Vector2;
+  /**
+   * Get color of the image at the given pixel.
+   *
+   * @param position - The pixel's position.
+   */
+  getPixelColor(position: PossibleVector2): Color;
+  protected collectAsyncResources(): void;
 }
-//# sourceMappingURL=Img.d.ts.map
+//# sourceMappingURL=Img.d.ts.map