@twick/2d 0.11.0

package/lib/components/Icon.d.ts

@@ -0,0 +1,59 @@
+import type { ColorSignal, PossibleColor, SignalValue, SimpleSignal } from '@twick/core';
+import type { ImgProps } from './Img';
+import { Img } 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,KAAK,EACV,WAAW,EACX,aAAa,EACb,WAAW,EACX,YAAY,EACb,MAAM,aAAa,CAAC;AAGrB,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AACpC,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAE1B,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 '@twick/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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9JY29uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OztBQU1BLE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSxhQUFhLENBQUM7QUFDdEMsT0FBTyxFQUFDLFdBQVcsRUFBRSxRQUFRLEVBQUUsT0FBTyxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUVyRSxPQUFPLEVBQUMsR0FBRyxFQUFDLE1BQU0sT0FBTyxDQUFDO0FBYzFCOzs7R0FHRztBQUNILE1BQU0sT0FBTyxJQUFLLFNBQVEsR0FBRztJQThCM0IsWUFBbUIsS0FBZ0I7UUFDakMsS0FBSyxDQUFDO1lBQ0osR0FBRyxLQUFLO1lBQ1IsR0FBRyxFQUFFLElBQUk7U0FDVixDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQ7OztPQUdHO0lBRU8sTUFBTTtRQUNkLE1BQU0sZUFBZSxHQUFHLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxPQUFPLENBQUMsR0FBRyxFQUFFLEdBQUcsQ0FBQyxDQUFDO1FBQ3RELE1BQU0saUJBQWlCLEdBQUcsa0JBQWtCLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLEdBQUcsRUFBRSxDQUFDLENBQUM7UUFDakUsaUZBQWlGO1FBQ2pGLE9BQU8sOEJBQThCLGVBQWUsY0FBYyxpQkFBaUIsRUFBRSxDQUFDO0lBQ3hGLENBQUM7SUFFRDs7T0FFRztJQUNPLE1BQU07UUFDZCxPQUFPLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztJQUN2QixDQUFDO0lBRUQ7OztPQUdHO0lBQ08sTUFBTSxDQUFDLEdBQWtCO1FBQ2pDLElBQUksR0FBRyxLQUFLLElBQUksRUFBRSxDQUFDO1lBQ2pCLE9BQU87UUFDVCxDQUFDO1FBQ0QsU0FBUyxFQUFFLENBQUMsSUFBSSxDQUNkLDBHQUEwRyxDQUMzRyxDQUFDO0lBQ0osQ0FBQztDQUNGO0FBeERnQjtJQURkLE1BQU0sRUFBRTtrQ0FDdUM7QUFnQmpDO0lBRmQsT0FBTyxDQUFDLE9BQU8sQ0FBQztJQUNoQixXQUFXLEVBQUU7bUNBQzBCO0FBYzlCO0lBRFQsUUFBUSxFQUFFO2tDQU1WIn0=

package/lib/components/Img.d.ts

@@ -0,0 +1,118 @@
+import type { PossibleVector2, SerializedVector2, SignalValue, SimpleSignal } from '@twick/core';
+import { Color, Vector2 } from '@twick/core';
+import type { DesiredLength } from '../partials';
+import type { RectProps } from './Rect';
+import { Rect } 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 '@twick/2d';
+ * import {all, waitFor} from '@twick/core';
+ * import {createRef} from '@twick/core';
+ * import {makeScene2D} from '@twick/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): Promise<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,KAAK,EACV,eAAe,EACf,iBAAiB,EACjB,WAAW,EACX,YAAY,EACb,MAAM,aAAa,CAAC;AACrB,OAAO,EAEL,KAAK,EAGL,OAAO,EAER,MAAM,aAAa,CAAC;AAErB,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE/C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAsB5B,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;IA2CnC,SAAS,CAAC,WAAW,IAAI,wBAAwB;IAYjD,SAAS,CAAC,iBAAiB;cAWF,IAAI,CAAC,OAAO,EAAE,wBAAwB;cAsB5C,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,245 @@
+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, } from '@twick/core';
+import { computed, initial, nodeName, signal } from '../decorators';
+import { drawImage } from '../utils';
+import { Rect } from './Rect';
+const imageWithoutSource = `
+The image won't be visible unless you specify a source:
+
+\`\`\`tsx
+import myImage from './example.png';
+// ...
+<Img src={myImage} />;
+\`\`\`
+
+If you did this intentionally, and don't want to see this warning, set the \`src\`
+property to \`null\`:
+
+\`\`\`tsx
+<Img src={null} />
+\`\`\`
+
+[Learn more](https://motioncanvas.io/docs/media#images) about working with
+images.
+`;
+/**
+ * A node for displaying images.
+ *
+ * @preview
+ * ```tsx editor
+ * import {Img} from '@twick/2d';
+ * import {all, waitFor} from '@twick/core';
+ * import {createRef} from '@twick/core';
+ * import {makeScene2D} from '@twick/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 = Img_1 = class Img extends Rect {
+    constructor(props) {
+        super(props);
+        if (!('src' in props)) {
+            useLogger().warn({
+                message: 'No source specified for the image',
+                remarks: imageWithoutSource,
+                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 src = this.src();
+        const url = new URL(src, window.location.origin);
+        if (url.origin === window.location.origin) {
+            const hash = this.view().assetHash();
+            url.searchParams.set('asset-hash', hash);
+        }
+        let image = Img_1.pool[src];
+        if (!image) {
+            image = document.createElement('img');
+            image.crossOrigin = 'anonymous';
+            image.src = src;
+            Img_1.pool[src] = image;
+        }
+        if (!image.complete) {
+            DependencyContext.collectPromise(new Promise((resolve, reject) => {
+                image.addEventListener('load', resolve);
+                image.addEventListener('error', () => 
+                // TODO: example for error handling inside DependencyContext (this shouldn't be UI specific)
+                reject(new DetailedError({
+                    message: `Failed to load an image`,
+                    remarks: `\
+The <code>src</code> property was set to:
+<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;
+    }
+    async 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());
+        }
+        await 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();
+    }
+};
+Img.pool = {};
+(() => {
+    if (import.meta.hot) {
+        import.meta.hot.on('twick:assets', ({ urls }) => {
+            for (const url of urls) {
+                if (Img_1.pool[url]) {
+                    delete Img_1.pool[url];
+                }
+            }
+        });
+    }
+})();
+__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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSW1nLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL0ltZy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBTUEsT0FBTyxFQUNMLElBQUksRUFDSixLQUFLLEVBQ0wsaUJBQWlCLEVBQ2pCLGFBQWEsRUFDYixPQUFPLEVBQ1AsU0FBUyxHQUNWLE1BQU0sYUFBYSxDQUFDO0FBQ3JCLE9BQU8sRUFBQyxRQUFRLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFFbEUsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLFVBQVUsQ0FBQztBQUVuQyxPQUFPLEVBQUMsSUFBSSxFQUFDLE1BQU0sUUFBUSxDQUFDO0FBRTVCLE1BQU0sa0JBQWtCLEdBQUc7Ozs7Ozs7Ozs7Ozs7Ozs7OztDQWtCMUIsQ0FBQztBQWlCRjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FnQ0c7QUFFSSxJQUFNLEdBQUcsV0FBVCxNQUFNLEdBQUksU0FBUSxJQUFJO0lBeUQzQixZQUFtQixLQUFlO1FBQ2hDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNiLElBQUksQ0FBQyxDQUFDLEtBQUssSUFBSSxLQUFLLENBQUMsRUFBRSxDQUFDO1lBQ3RCLFNBQVMsRUFBRSxDQUFDLElBQUksQ0FBQztnQkFDZixPQUFPLEVBQUUsbUNBQW1DO2dCQUM1QyxPQUFPLEVBQUUsa0JBQWtCO2dCQUMzQixPQUFPLEVBQUUsSUFBSSxDQUFDLEdBQUc7YUFDbEIsQ0FBQyxDQUFDO1FBQ0wsQ0FBQztJQUNILENBQUM7SUFFa0IsV0FBVztRQUM1QixNQUFNLE1BQU0sR0FBRyxLQUFLLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDbkMsSUFBSSxNQUFNLENBQUMsQ0FBQyxLQUFLLElBQUksSUFBSSxNQUFNLENBQUMsQ0FBQyxLQUFLLElBQUksRUFBRSxDQUFDO1lBQzNDLE1BQU0sS0FBSyxHQUFH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

package/lib/components/Knot.d.ts

@@ -0,0 +1,90 @@
+import type { PossibleVector2, Signal, SignalValue, Vector2Signal } from '@twick/core';
+import type { KnotInfo } from '../curves';
+import type { NodeProps } from './Node';
+import { Node } 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("@twick/core").SignalContext<number, number, this>>;
+    get endHandleAuto(): Signal<number, number, this, import("@twick/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,KAAK,EACV,eAAe,EACf,MAAM,EACN,WAAW,EACX,aAAa,EACd,MAAM,aAAa,CAAC;AAErB,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,WAAW,CAAC;AAUxC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAE5B,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,4FAEzB;IACD,IAAW,aAAa,4FAEvB;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 { transformVectorAsPoint, Vector2 } from '@twick/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: transformVectorAsPoint(startHandle, this.localToParent()),
+            endHandle: transformVectorAsPoint(endHandle, 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiS25vdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9Lbm90LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OztBQU1BLE9BQU8sRUFBQyxzQkFBc0IsRUFBRSxPQUFPLEVBQUMsTUFBTSxhQUFhLENBQUM7QUFFNUQsT0FBTyxFQUNMLFNBQVMsRUFDVCxRQUFRLEVBQ1IsUUFBUSxFQUNSLE9BQU8sRUFDUCxNQUFNLEVBQ04sTUFBTSxFQUNOLE9BQU8sR0FDUixNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUMsSUFBSSxFQUFDLE1BQU0sUUFBUSxDQUFDO0FBOEI1Qjs7R0FFRztBQUNILE1BQU0sT0FBTyxJQUFLLFNBQVEsSUFBSTtJQW9FNUIsSUFBVyxlQUFlO1FBQ3hCLE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUM7SUFDL0IsQ0FBQztJQUNELElBQVcsYUFBYTtRQUN0QixPQUFPLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDO0lBQzdCLENBQUM7SUFFRCxZQUFtQixLQUFnQjtRQUNqQyxLQUFLLENBQ0gsS0FBSyxDQUFDLFdBQVcsS0FBSyxTQUFTLElBQUksS0FBSyxDQUFDLFNBQVMsS0FBSyxTQUFTO1lBQzlELENBQUMsQ0FBQyxFQUFDLElBQUksRUFBRSxDQUFDLEVBQUUsR0FBRyxLQUFLLEVBQUM7WUFDckIsQ0FBQyxDQUFDLEtBQUssQ0FDVixDQUFDO0lBQ0osQ0FBQztJQUdNLE1BQU07UUFDWCxNQUFNLGtCQUFrQixHQUN0QixDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsU0FBUyxFQUFFLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBQy9ELE1BQU0sV0FBVyxHQUFHLGtCQUFrQixDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUM7UUFDM0UsTUFBTSxTQUFTLEdBQUcsa0JBQWtCLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQztRQUV2RSxPQUFPO1lBQ0wsUUFBUSxFQUFFLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDekIsV0FBVyxFQUFFLHNCQUFzQixDQUFDLFdBQVcsRUFBRSxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7WUFDdEUsU0FBUyxFQUFFLHNCQUFzQixDQUFDLFNBQVMsRUFBRSxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7WUFDbEUsSUFBSSxFQUFFLEVBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxlQUFlLEVBQUUsRUFBRSxHQUFHLEVBQUUsSUFBSSxDQUFDLGFBQWEsRUFBRSxFQUFDO1NBQ2pFLENBQUM7SUFDSixDQUFDO0lBRU8sbUJBQW1CO1FBQ3pCLE9BQU8sSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDLE9BQU8sQ0FBQztJQUNwQyxDQUFDO0lBRU8scUJBQXFCO1FBQzNCLE9BQU8sSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDLE9BQU8sQ0FBQztJQUNsQyxDQUFDO0NBQ0Y7QUFwRnlCO0lBRnZCLE9BQU8sQ0FBQyxPQUFPLENBQUM7SUFDaEIsTUFBTSxFQUFFO3lDQUNnRDtBQXNCakM7SUFGdkIsT0FBTyxDQUFDLE9BQU8sQ0FBQztJQUNoQixNQUFNLEVBQUU7dUNBQzhDO0FBd0IvQjtJQVp2QixTQUFTLENBQUMsS0FBSyxDQUFDO0lBQ2hCLE9BQU8sQ0FBQyxHQUFHLEVBQUUsQ0FBQyxDQUFDLEVBQUMsV0FBVyxFQUFFLENBQUMsRUFBRSxTQUFTLEVBQUUsQ0FBQyxFQUFDLENBQUMsQ0FBQztJQUMvQyxNQUFNLENBQUMsQ0FBQyxLQUF1QixFQUFFLEVBQUU7UUFDbEMsSUFBSSxPQUFPLEtBQUssS0FBSyxRQUFRLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUM7WUFDdkQsT0FBTyxLQUFLLENBQUM7UUFDZixDQUFDO1FBQ0QsSUFBSSxPQUFPLEtBQUssS0FBSyxRQUFRLEVBQUUsQ0FBQztZQUM5QixLQUFLLEdBQUcsQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLENBQUM7UUFDekIsQ0FBQztRQUNELE9BQU8sRUFBQyxXQUFXLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FBQyxFQUFFLFNBQVMsRUFBRSxLQUFLLENBQUMsQ0FBQyxDQUFDLEVBQUMsQ0FBQztJQUN0RCxDQUFDLENBQUM7SUFDRCxRQUFRLENBQUMsRUFBQyxXQUFXLEVBQUUsaUJBQWlCLEVBQUUsU0FBUyxFQUFFLGVBQWUsRUFBQyxDQUFDO2tDQUNwQjtBQWlCNUM7SUFETixRQUFRLEVBQUU7a0NBYVYifQ==