@efxlab/motion-canvas-2d 4.0.0

package/lib/components/Icon.d.ts

@@ -0,0 +1,58 @@
+import { ColorSignal, PossibleColor, SignalValue, SimpleSignal } from '@efxlab/motion-canvas-core';
+import { Img, ImgProps } from './Img';
+export interface IconProps extends ImgProps {
+    /**
+     * {@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;
+}
+//# sourceMappingURL=Icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/lib/components/Icon.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,aAAa,EACb,WAAW,EACX,YAAY,EAEb,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAC,GAAG,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;OAEG;IACH,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAE1B;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC;CACpC;AAED;;;GAGG;AACH,qBAAa,IAAK,SAAQ,GAAG;IAC3B;;;;;;;;;OASG;IAEY,IAAI,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAEhD;;;;;;;;;;;OAWG;IAGY,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;gBAErB,KAAK,EAAE,SAAS;IAOnC;;;OAGG;IAEH,SAAS,CAAC,MAAM,IAAI,MAAM;IAO1B;;OAEG;IACH,SAAS,CAAC,MAAM,IAAI,MAAM;IAI1B;;;OAGG;IACH,SAAS,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;CAQpC"}

package/lib/components/Icon.js

@@ -0,0 +1,58 @@
+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 '@efxlab/motion-canvas-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.");
+    }
+}
+__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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9JY29uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBLE9BQU8sRUFLTCxTQUFTLEdBQ1YsTUFBTSw0QkFBNEIsQ0FBQztBQUNwQyxPQUFPLEVBQUMsV0FBVyxFQUFFLFFBQVEsRUFBRSxPQUFPLEVBQUUsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ3JFLE9BQU8sRUFBQyxHQUFHLEVBQVcsTUFBTSxPQUFPLENBQUM7QUFjcEM7OztHQUdHO0FBQ0gsTUFBTSxPQUFPLElBQUssU0FBUSxHQUFHO0lBOEIzQixZQUFtQixLQUFnQjtRQUNqQyxLQUFLLENBQUM7WUFDSixHQUFHLEtBQUs7WUFDUixHQUFHLEVBQUUsSUFBSTtTQUNWLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRDs7O09BR0c7SUFFTyxNQUFNO1FBQ2QsTUFBTSxlQUFlLEdBQUcsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDLE9BQU8sQ0FBQyxHQUFHLEVBQUUsR0FBRyxDQUFDLENBQUM7UUFDdEQsTUFBTSxpQkFBaUIsR0FBRyxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsR0FBRyxFQUFFLENBQUMsQ0FBQztRQUNqRSxpRkFBaUY7UUFDakYsT0FBTyw4QkFBOEIsZUFBZSxjQUFjLGlCQUFpQixFQUFFLENBQUM7SUFDeEYsQ0FBQztJQUVEOztPQUVHO0lBQ08sTUFBTTtRQUNkLE9BQU8sSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDO0lBQ3ZCLENBQUM7SUFFRDs7O09BR0c7SUFDTyxNQUFNLENBQUMsR0FBa0I7UUFDakMsSUFBSSxHQUFHLEtBQUssSUFBSSxFQUFFLENBQUM7WUFDakIsT0FBTztRQUNULENBQUM7UUFDRCxTQUFTLEVBQUUsQ0FBQyxJQUFJLENBQ2QsMEdBQTBHLENBQzNHLENBQUM7SUFDSixDQUFDO0NBQ0Y7QUF4RGdCO0lBRGQsTUFBTSxFQUFFO2tDQUN1QztBQWdCakM7SUFGZCxPQUFPLENBQUMsT0FBTyxDQUFDO0lBQ2hCLFdBQVcsRUFBRTttQ0FDMEI7QUFjOUI7SUFEVCxRQUFRLEVBQUU7a0NBTVYifQ==

package/lib/components/Img.d.ts

@@ -0,0 +1,116 @@
+import { Color, PossibleVector2, SerializedVector2, SignalValue, SimpleSignal, Vector2 } from '@efxlab/motion-canvas-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>;
+}
+/**
+ * A node for displaying images.
+ *
+ * @preview
+ * ```tsx editor
+ * import {Img} from '@efxlab/motion-canvas-2d';
+ * import {all, waitFor} from '@efxlab/motion-canvas-core';
+ * import {createRef} from '@efxlab/motion-canvas-core';
+ * import {makeScene2D} from '@efxlab/motion-canvas-2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const ref = createRef<Img>();
+ *   yield view.add(
+ *     <Img
+ *       ref={ref}
+ *       src="https://images.unsplash.com/photo-1679218407381-a6f1660d60e9"
+ *       width={300}
+ *       radius={20}
+ *     />,
+ *   );
+ *
+ *   // set the background using the color sampled from the image:
+ *   ref().fill(ref().getColorAtPoint(0));
+ *
+ *   yield* all(
+ *     ref().size([100, 100], 1).to([300, null], 1),
+ *     ref().radius(50, 1).to(20, 1),
+ *     ref().alpha(0, 1).to(1, 1),
+ *   );
+ *   yield* waitFor(0.5);
+ * });
+ * ```
+ */
+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;
+}
+//# sourceMappingURL=Img.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Img.d.ts","sourceRoot":"","sources":["../../src/lib/components/Img.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,EAGL,eAAe,EACf,iBAAiB,EACjB,WAAW,EACX,YAAY,EACZ,OAAO,EAGR,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAC,IAAI,EAAE,SAAS,EAAC,MAAM,QAAQ,CAAC;AAGvC,MAAM,WAAW,QAAS,SAAQ,SAAS;IACzC;;OAEG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAClC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,qBACa,GAAI,SAAQ,IAAI;IAC3B,OAAO,CAAC,MAAM,CAAC,IAAI,CAAwC;IAc3D;;;;;;;;;;;;;;OAcG;IACH,SACwB,GAAG,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAExD;;;;;;OAMG;IACH,SAEwB,KAAK,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAE1D;;;;;;;;OAQG;IACH,SAEwB,SAAS,EAAE,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;gBAE5C,KAAK,EAAE,QAAQ;cAWf,WAAW,IAAI,iBAAiB,CAAC,aAAa,CAAC;IAclE,SAAS,CAAC,KAAK,IAAI,gBAAgB;IAkDnC,SAAS,CAAC,WAAW,IAAI,wBAAwB;IAYjD,SAAS,CAAC,iBAAiB;cAWR,IAAI,CAAC,OAAO,EAAE,wBAAwB;cAsBtC,SAAS;IAQ5B;;;;OAIG;IACI,eAAe,CAAC,QAAQ,EAAE,eAAe,GAAG,KAAK;IAWxD;;;;;;OAMG;IAEI,WAAW;IAKlB;;;;OAIG;IACI,aAAa,CAAC,QAAQ,EAAE,eAAe,GAAG,KAAK;cAanC,qBAAqB;CAIzC"}

package/lib/components/Img.js

@@ -0,0 +1,233 @@
+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;
+};
+var Img_1;
+import { BBox, Color, DependencyContext, DetailedError, Vector2, useLogger, viaProxy, } from '@efxlab/motion-canvas-core';
+import { computed, initial, nodeName, signal } from '../decorators';
+import { drawImage } from '../utils';
+import { Rect } from './Rect';
+/**
+ * A node for displaying images.
+ *
+ * @preview
+ * ```tsx editor
+ * import {Img} from '@efxlab/motion-canvas-2d';
+ * import {all, waitFor} from '@efxlab/motion-canvas-core';
+ * import {createRef} from '@efxlab/motion-canvas-core';
+ * import {makeScene2D} from '@efxlab/motion-canvas-2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const ref = createRef<Img>();
+ *   yield view.add(
+ *     <Img
+ *       ref={ref}
+ *       src="https://images.unsplash.com/photo-1679218407381-a6f1660d60e9"
+ *       width={300}
+ *       radius={20}
+ *     />,
+ *   );
+ *
+ *   // set the background using the color sampled from the image:
+ *   ref().fill(ref().getColorAtPoint(0));
+ *
+ *   yield* all(
+ *     ref().size([100, 100], 1).to([300, null], 1),
+ *     ref().radius(50, 1).to(20, 1),
+ *     ref().alpha(0, 1).to(1, 1),
+ *   );
+ *   yield* waitFor(0.5);
+ * });
+ * ```
+ */
+let Img = class Img extends Rect {
+    static { Img_1 = this; }
+    static pool = {};
+    static {
+        if (import.meta.hot) {
+            import.meta.hot.on('motion-canvas:assets', ({ urls }) => {
+                for (const url of urls) {
+                    if (Img_1.pool[url]) {
+                        delete Img_1.pool[url];
+                    }
+                }
+            });
+        }
+    }
+    constructor(props) {
+        super(props);
+        if (!('src' in props)) {
+            useLogger().warn({
+                message: 'No source specified for the image',
+                remarks: "<p>The image won&#39;t be visible unless you specify a source:</p>\n<pre class=\"\"><code class=\"language-tsx\"><span class=\"hljs-keyword\">import</span> myImage <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&#x27;./example.png&#x27;</span>;\n<span class=\"hljs-comment\">// ...</span>\n<span class=\"language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Img</span> <span class=\"hljs-attr\">src</span>=<span class=\"hljs-string\">{myImage}</span> /&gt;</span></span>;</code></pre><p>If you did this intentionally, and don&#39;t want to see this warning, set the <code>src</code>\nproperty to <code>null</code>:</p>\n<pre class=\"\"><code class=\"language-tsx\">&lt;<span class=\"hljs-title class_\">Img</span> src={<span class=\"hljs-literal\">null</span>} /&gt;</code></pre><p><a href='https://motioncanvas.io/docs/media#images' target='_blank'>Learn more</a> about working with\nimages.</p>\n",
+                inspect: this.key,
+            });
+        }
+    }
+    desiredSize() {
+        const custom = super.desiredSize();
+        if (custom.x === null && custom.y === null) {
+            const image = this.image();
+            return {
+                x: image.naturalWidth,
+                y: image.naturalHeight,
+            };
+        }
+        return custom;
+    }
+    image() {
+        const rawSrc = this.src();
+        let src = '';
+        let key = '';
+        if (rawSrc) {
+            key = viaProxy(rawSrc);
+            const url = new URL(key, window.location.origin);
+            if (url.origin === window.location.origin) {
+                const hash = this.view().assetHash();
+                url.searchParams.set('asset-hash', hash);
+            }
+            src = url.toString();
+        }
+        let image = Img_1.pool[key];
+        if (!image) {
+            image = document.createElement('img');
+            image.crossOrigin = 'anonymous';
+            image.src = src;
+            Img_1.pool[key] = image;
+        }
+        if (!image.complete) {
+            DependencyContext.collectPromise(new Promise((resolve, reject) => {
+                image.addEventListener('load', resolve);
+                image.addEventListener('error', () => reject(new DetailedError({
+                    message: `Failed to load an image`,
+                    remarks: `\
+The <code>src</code> property was set to:
+<pre><code>${rawSrc}</code></pre>
+...which resolved to the following url:
+<pre><code>${src}</code></pre>
+Make sure that source is correct and that the image exists.<br/>
+<a target='_blank' href='https://motioncanvas.io/docs/media#images'>Learn more</a>
+about working with images.`,
+                    inspect: this.key,
+                })));
+            }));
+        }
+        return image;
+    }
+    imageCanvas() {
+        const canvas = document
+            .createElement('canvas')
+            .getContext('2d', { willReadFrequently: true });
+        if (!canvas) {
+            throw new Error('Could not create an image canvas');
+        }
+        return canvas;
+    }
+    filledImageCanvas() {
+        const context = this.imageCanvas();
+        const image = this.image();
+        context.canvas.width = image.naturalWidth;
+        context.canvas.height = image.naturalHeight;
+        context.imageSmoothingEnabled = this.smoothing();
+        context.drawImage(image, 0, 0);
+        return context;
+    }
+    draw(context) {
+        this.drawShape(context);
+        const alpha = this.alpha();
+        if (alpha > 0) {
+            const box = BBox.fromSizeCentered(this.computedSize());
+            context.save();
+            context.clip(this.getPath());
+            if (alpha < 1) {
+                context.globalAlpha *= alpha;
+            }
+            context.imageSmoothingEnabled = this.smoothing();
+            drawImage(context, this.image(), box);
+            context.restore();
+        }
+        if (this.clip()) {
+            context.clip(this.getPath());
+        }
+        this.drawChildren(context);
+    }
+    applyFlex() {
+        super.applyFlex();
+        const image = this.image();
+        this.element.style.aspectRatio = (this.ratio() ?? image.naturalWidth / image.naturalHeight).toString();
+    }
+    /**
+     * Get color of the image at the given position.
+     *
+     * @param position - The position in local space at which to sample the color.
+     */
+    getColorAtPoint(position) {
+        const size = this.computedSize();
+        const naturalSize = this.naturalSize();
+        const pixelPosition = new Vector2(position)
+            .add(this.computedSize().scale(0.5))
+            .mul(naturalSize.div(size).safe);
+        return this.getPixelColor(pixelPosition);
+    }
+    /**
+     * 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() {
+        const image = this.image();
+        return new Vector2(image.naturalWidth, image.naturalHeight);
+    }
+    /**
+     * Get color of the image at the given pixel.
+     *
+     * @param position - The pixel's position.
+     */
+    getPixelColor(position) {
+        const context = this.filledImageCanvas();
+        const vector = new Vector2(position);
+        const data = context.getImageData(vector.x, vector.y, 1, 1).data;
+        return new Color({
+            r: data[0],
+            g: data[1],
+            b: data[2],
+            a: data[3] / 255,
+        });
+    }
+    collectAsyncResources() {
+        super.collectAsyncResources();
+        this.image();
+    }
+};
+__decorate([
+    signal()
+], Img.prototype, "src", void 0);
+__decorate([
+    initial(1),
+    signal()
+], Img.prototype, "alpha", void 0);
+__decorate([
+    initial(true),
+    signal()
+], Img.prototype, "smoothing", void 0);
+__decorate([
+    computed()
+], Img.prototype, "image", null);
+__decorate([
+    computed()
+], Img.prototype, "imageCanvas", null);
+__decorate([
+    computed()
+], Img.prototype, "filledImageCanvas", null);
+__decorate([
+    computed()
+], Img.prototype, "naturalSize", null);
+Img = Img_1 = __decorate([
+    nodeName('Img')
+], Img);
+export { Img };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSW1nLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL0ltZy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBQUEsT0FBTyxFQUNMLElBQUksRUFDSixLQUFLLEVBQ0wsaUJBQWlCLEVBQ2pCLGFBQWEsRUFLYixPQUFPLEVBQ1AsU0FBUyxFQUNULFFBQVEsR0FDVCxNQUFNLDRCQUE0QixDQUFDO0FBQ3BDLE9BQU8sRUFBQyxRQUFRLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFFbEUsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLFVBQVUsQ0FBQztBQUNuQyxPQUFPLEVBQUMsSUFBSSxFQUFZLE1BQU0sUUFBUSxDQUFDO0FBa0J2Qzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FnQ0c7QUFFSSxJQUFNLEdBQUcsR0FBVCxNQUFNLEdBQUksU0FBUSxJQUFJOztJQUNuQixNQUFNLENBQUMsSUFBSSxHQUFxQyxFQUFFLENBQUM7SUFFM0Q7UUFDRSxJQUFJLE1BQU0sQ0FBQyxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUM7WUFDcEIsTUFBTSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLHNCQUFzQixFQUFFLENBQUMsRUFBQyxJQUFJLEVBQUMsRUFBRSxFQUFFO2dCQUNwRCxLQUFLLE1BQU0sR0FBRyxJQUFJLElBQUksRUFBRSxDQUFDO29CQUN2QixJQUFJLEtBQUcsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQzt3QkFDbEIsT0FBTyxLQUFHLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO29CQUN2QixDQUFDO2dCQUNILENBQUM7WUFDSCxDQUFDLENBQUMsQ0FBQztRQUNMLENBQUM7SUFDSCxDQUFDO0lBNENELFlBQW1CLEtBQWU7UUFDaEMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ2IsSUFB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

package/lib/components/Knot.d.ts

@@ -0,0 +1,89 @@
+import { PossibleVector2, Signal, SignalValue, Vector2Signal } from '@efxlab/motion-canvas-core';
+import { KnotInfo } from '../curves';
+import { Node, NodeProps } from './Node';
+export interface KnotProps extends NodeProps {
+    /**
+     * {@inheritDoc Knot.startHandle}
+     */
+    startHandle?: SignalValue<PossibleVector2>;
+    /**
+     * {@inheritDoc Knot.endHandle}
+     */
+    endHandle?: SignalValue<PossibleVector2>;
+    /**
+     * {@inheritDoc Knot.auto}
+     */
+    auto?: SignalValue<PossibleKnotAuto>;
+    startHandleAuto?: SignalValue<number>;
+    endHandleAuto?: SignalValue<number>;
+}
+export type KnotAuto = {
+    startHandle: number;
+    endHandle: number;
+};
+export type PossibleKnotAuto = KnotAuto | number | [number, number];
+export type KnotAutoSignal<TOwner> = Signal<PossibleKnotAuto, KnotAuto, TOwner> & {
+    endHandle: Signal<number, number, TOwner>;
+    startHandle: Signal<number, number, TOwner>;
+};
+/**
+ * A node representing a knot of a {@link Spline}.
+ */
+export declare class Knot extends Node {
+    /**
+     * The position of the knot's start handle. The position is provided relative
+     * to the knot's position.
+     *
+     * @remarks
+     * By default, the position of the start handle will be the mirrored position
+     * of the {@link endHandle}.
+     *
+     * If neither an end handle nor a start handle is provided, the positions of
+     * the handles gets calculated automatically to create smooth curve through
+     * the knot. The smoothness of the resulting curve can be controlled via the
+     * {@link Spline.smoothness} property.
+     *
+     * It is also possible to blend between a user-defined position and the
+     * auto-calculated position by using the {@link auto} property.
+     *
+     * @defaultValue Mirrored position of the endHandle.
+     */
+    readonly startHandle: Vector2Signal<this>;
+    /**
+     * The position of the knot's end handle. The position is provided relative
+     * to the knot's position.
+     *
+     * @remarks
+     * By default, the position of the end handle will be the mirrored position
+     * of the {@link startHandle}.
+     *
+     * If neither an end handle nor a start handle is provided, the positions of
+     * the handles gets calculated automatically to create smooth curve through
+     * the knot. The smoothness of the resulting curve can be controlled via the
+     * {@link Spline.smoothness} property.
+     *
+     * It is also possible to blend between a user-defined position and the
+     * auto-calculated position by using the {@link auto} property.
+     *
+     * @defaultValue Mirrored position of the startHandle.
+     */
+    readonly endHandle: Vector2Signal<this>;
+    /**
+     * How much to blend between the user-provided handles and the auto-calculated
+     * handles.
+     *
+     * @remarks
+     * This property has no effect if no explicit handles are provided for the
+     * knot.
+     *
+     * @defaultValue 0
+     */
+    readonly auto: KnotAutoSignal<this>;
+    get startHandleAuto(): Signal<number, number, this, import("@efxlab/motion-canvas-core").SignalContext<number, number, this>>;
+    get endHandleAuto(): Signal<number, number, this, import("@efxlab/motion-canvas-core").SignalContext<number, number, this>>;
+    constructor(props: KnotProps);
+    points(): KnotInfo;
+    private getDefaultEndHandle;
+    private getDefaultStartHandle;
+}
+//# sourceMappingURL=Knot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Knot.d.ts","sourceRoot":"","sources":["../../src/lib/components/Knot.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,MAAM,EACN,WAAW,EAEX,aAAa,EACd,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAC,QAAQ,EAAC,MAAM,WAAW,CAAC;AAUnC,OAAO,EAAC,IAAI,EAAE,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEvC,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IAC3C;;OAEG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IACzC;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;IACrC,eAAe,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACtC,aAAa,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CACrC;AAED,MAAM,MAAM,QAAQ,GAAG;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAC,CAAC;AAChE,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AACpE,MAAM,MAAM,cAAc,CAAC,MAAM,IAAI,MAAM,CACzC,gBAAgB,EAChB,QAAQ,EACR,MAAM,CACP,GAAG;IACF,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;CAC7C,CAAC;AAEF;;GAEG;AACH,qBAAa,IAAK,SAAQ,IAAI;IAC5B;;;;;;;;;;;;;;;;;OAiBG;IACH,SAEwB,WAAW,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAEzD;;;;;;;;;;;;;;;;;OAiBG;IACH,SAEwB,SAAS,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAEvD;;;;;;;;;OASG;IACH,SAYwB,IAAI,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;IACnD,IAAW,eAAe,2GAEzB;IACD,IAAW,aAAa,2GAEvB;gBAEkB,KAAK,EAAE,SAAS;IAS5B,MAAM,IAAI,QAAQ;IAczB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,qBAAqB;CAG9B"}

package/lib/components/Knot.js

@@ -0,0 +1,68 @@
+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 { Vector2, } from '@efxlab/motion-canvas-core';
+import { cloneable, compound, computed, initial, parser, signal, wrapper, } from '../decorators';
+import { Node } from './Node';
+/**
+ * A node representing a knot of a {@link Spline}.
+ */
+export class Knot extends Node {
+    get startHandleAuto() {
+        return this.auto.startHandle;
+    }
+    get endHandleAuto() {
+        return this.auto.endHandle;
+    }
+    constructor(props) {
+        super(props.startHandle === undefined && props.endHandle === undefined
+            ? { auto: 1, ...props }
+            : props);
+    }
+    points() {
+        const hasExplicitHandles = !this.startHandle.isInitial() || !this.endHandle.isInitial();
+        const startHandle = hasExplicitHandles ? this.startHandle() : Vector2.zero;
+        const endHandle = hasExplicitHandles ? this.endHandle() : Vector2.zero;
+        return {
+            position: this.position(),
+            startHandle: startHandle.transformAsPoint(this.localToParent()),
+            endHandle: endHandle.transformAsPoint(this.localToParent()),
+            auto: { start: this.startHandleAuto(), end: this.endHandleAuto() },
+        };
+    }
+    getDefaultEndHandle() {
+        return this.startHandle().flipped;
+    }
+    getDefaultStartHandle() {
+        return this.endHandle().flipped;
+    }
+}
+__decorate([
+    wrapper(Vector2),
+    signal()
+], Knot.prototype, "startHandle", void 0);
+__decorate([
+    wrapper(Vector2),
+    signal()
+], Knot.prototype, "endHandle", void 0);
+__decorate([
+    cloneable(false),
+    initial(() => ({ startHandle: 0, endHandle: 0 })),
+    parser((value) => {
+        if (typeof value === 'object' && !Array.isArray(value)) {
+            return value;
+        }
+        if (typeof value === 'number') {
+            value = [value, value];
+        }
+        return { startHandle: value[0], endHandle: value[1] };
+    }),
+    compound({ startHandle: 'startHandleAuto', endHandle: 'endHandleAuto' })
+], Knot.prototype, "auto", void 0);
+__decorate([
+    computed()
+], Knot.prototype, "points", null);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiS25vdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9Lbm90LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBLE9BQU8sRUFJTCxPQUFPLEdBRVIsTUFBTSw0QkFBNEIsQ0FBQztBQUVwQyxPQUFPLEVBQ0wsU0FBUyxFQUNULFFBQVEsRUFDUixRQUFRLEVBQ1IsT0FBTyxFQUNQLE1BQU0sRUFDTixNQUFNLEVBQ04sT0FBTyxHQUNSLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxJQUFJLEVBQVksTUFBTSxRQUFRLENBQUM7QUE4QnZDOztHQUVHO0FBQ0gsTUFBTSxPQUFPLElBQUssU0FBUSxJQUFJO0lBb0U1QixJQUFXLGVBQWU7UUFDeEIsT0FBTyxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQztJQUMvQixDQUFDO0lBQ0QsSUFBVyxhQUFhO1FBQ3RCLE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUM7SUFDN0IsQ0FBQztJQUVELFlBQW1CLEtBQWdCO1FBQ2pDLEtBQUssQ0FDSCxLQUFLLENBQUMsV0FBVyxLQUFLLFNBQVMsSUFBSSxLQUFLLENBQUMsU0FBUyxLQUFLLFNBQVM7WUFDOUQsQ0FBQyxDQUFDLEVBQUMsSUFBSSxFQUFFLENBQUMsRUFBRSxHQUFHLEtBQUssRUFBQztZQUNyQixDQUFDLENBQUMsS0FBSyxDQUNWLENBQUM7SUFDSixDQUFDO0lBR00sTUFBTTtRQUNYLE1BQU0sa0JBQWtCLEdBQ3RCLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxTQUFTLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsU0FBUyxFQUFFLENBQUM7UUFDL0QsTUFBTSxXQUFXLEdBQUcsa0JBQWtCLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQztRQUMzRSxNQUFNLFNBQVMsR0FBRyxrQkFBa0IsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDO1FBRXZFLE9BQU87WUFDTCxRQUFRLEVBQUUsSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUN6QixXQUFXLEVBQUUsV0FBVyxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztZQUMvRCxTQUFTLEVBQUUsU0FBUyxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztZQUMzRCxJQUFJLEVBQUUsRUFBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLGVBQWUsRUFBRSxFQUFFLEdBQUcsRUFBRSxJQUFJLENBQUMsYUFBYSxFQUFFLEVBQUM7U0FDakUsQ0FBQztJQUNKLENBQUM7SUFFTyxtQkFBbUI7UUFDekIsT0FBTyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUMsT0FBTyxDQUFDO0lBQ3BDLENBQUM7SUFFTyxxQkFBcUI7UUFDM0IsT0FBTyxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUMsT0FBTyxDQUFDO0lBQ2xDLENBQUM7Q0FDRjtBQXBGeUI7SUFGdkIsT0FBTyxDQUFDLE9BQU8sQ0FBQztJQUNoQixNQUFNLEVBQUU7eUNBQ2dEO0FBc0JqQztJQUZ2QixPQUFPLENBQUMsT0FBTyxDQUFDO0lBQ2hCLE1BQU0sRUFBRTt1Q0FDOEM7QUF3Qi9CO0lBWnZCLFNBQVMsQ0FBQyxLQUFLLENBQUM7SUFDaEIsT0FBTyxDQUFDLEdBQUcsRUFBRSxDQUFDLENBQUMsRUFBQyxXQUFXLEVBQUUsQ0FBQyxFQUFFLFNBQVMsRUFBRSxDQUFDLEVBQUMsQ0FBQyxDQUFDO0lBQy9DLE1BQU0sQ0FBQyxDQUFDLEtBQXVCLEVBQUUsRUFBRTtRQUNsQyxJQUFJLE9BQU8sS0FBSyxLQUFLLFFBQVEsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQztZQUN2RCxPQUFPLEtBQUssQ0FBQztRQUNmLENBQUM7UUFDRCxJQUFJLE9BQU8sS0FBSyxLQUFLLFFBQVEsRUFBRSxDQUFDO1lBQzlCLEtBQUssR0FBRyxDQUFDLEtBQUssRUFBRSxLQUFLLENBQUMsQ0FBQztRQUN6QixDQUFDO1FBQ0QsT0FBTyxFQUFDLFdBQVcsRUFBRSxLQUFLLENBQUMsQ0FBQyxDQUFDLEVBQUUsU0FBUyxFQUFFLEtBQUssQ0FBQyxDQUFDLENBQUMsRUFBQyxDQUFDO0lBQ3RELENBQUMsQ0FBQztJQUNELFFBQVEsQ0FBQyxFQUFDLFdBQVcsRUFBRSxpQkFBaUIsRUFBRSxTQUFTLEVBQUUsZUFBZSxFQUFDLENBQUM7a0NBQ3BCO0FBaUI1QztJQUROLFFBQVEsRUFBRTtrQ0FhViJ9