@efxlab/motion-canvas-2d 4.0.0

package/lib/components/Shape.js

@@ -0,0 +1,134 @@
+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 { createSignal, easeOutExpo, linear, map, threadable, } from '@efxlab/motion-canvas-core';
+import { computed, initial, nodeName, signal } from '../decorators';
+import { canvasStyleSignal, } from '../decorators/canvasStyleSignal';
+import { resolveCanvasStyle } from '../utils';
+import { Layout } from './Layout';
+let Shape = class Shape extends Layout {
+    rippleStrength = createSignal(0);
+    rippleSize() {
+        return easeOutExpo(this.rippleStrength(), 0, 50);
+    }
+    constructor(props) {
+        super(props);
+    }
+    applyText(context) {
+        context.direction = this.textDirection();
+        this.element.dir = this.textDirection();
+    }
+    applyStyle(context) {
+        context.fillStyle = resolveCanvasStyle(this.fill(), context);
+        context.strokeStyle = resolveCanvasStyle(this.stroke(), context);
+        context.lineWidth = this.lineWidth();
+        context.lineJoin = this.lineJoin();
+        context.lineCap = this.lineCap();
+        context.setLineDash(this.lineDash());
+        context.lineDashOffset = this.lineDashOffset();
+        if (!this.antialiased()) {
+            // from https://stackoverflow.com/a/68372384
+            context.filter =
+                'url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9ImZpbHRlciIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj48ZmVDb21wb25lbnRUcmFuc2Zlcj48ZmVGdW5jUiB0eXBlPSJpZGVudGl0eSIvPjxmZUZ1bmNHIHR5cGU9ImlkZW50aXR5Ii8+PGZlRnVuY0IgdHlwZT0iaWRlbnRpdHkiLz48ZmVGdW5jQSB0eXBlPSJkaXNjcmV0ZSIgdGFibGVWYWx1ZXM9IjAgMSIvPjwvZmVDb21wb25lbnRUcmFuc2Zlcj48L2ZpbHRlcj48L3N2Zz4=#filter)';
+        }
+    }
+    draw(context) {
+        this.drawShape(context);
+        if (this.clip()) {
+            context.clip(this.getPath());
+        }
+        this.drawChildren(context);
+    }
+    drawShape(context) {
+        const path = this.getPath();
+        const hasStroke = this.lineWidth() > 0 && this.stroke() !== null;
+        const hasFill = this.fill() !== null;
+        context.save();
+        this.applyStyle(context);
+        this.drawRipple(context);
+        if (this.strokeFirst()) {
+            hasStroke && context.stroke(path);
+            hasFill && context.fill(path);
+        }
+        else {
+            hasFill && context.fill(path);
+            hasStroke && context.stroke(path);
+        }
+        context.restore();
+    }
+    getCacheBBox() {
+        return super.getCacheBBox().expand(this.lineWidth() / 2);
+    }
+    getPath() {
+        return new Path2D();
+    }
+    getRipplePath() {
+        return new Path2D();
+    }
+    drawRipple(context) {
+        const rippleStrength = this.rippleStrength();
+        if (rippleStrength > 0) {
+            const ripplePath = this.getRipplePath();
+            context.save();
+            context.globalAlpha *= map(0.54, 0, rippleStrength);
+            context.fill(ripplePath);
+            context.restore();
+        }
+    }
+    *ripple(duration = 1) {
+        this.rippleStrength(0);
+        yield* this.rippleStrength(1, duration, linear);
+        this.rippleStrength(0);
+    }
+};
+__decorate([
+    canvasStyleSignal()
+], Shape.prototype, "fill", void 0);
+__decorate([
+    canvasStyleSignal()
+], Shape.prototype, "stroke", void 0);
+__decorate([
+    initial(false),
+    signal()
+], Shape.prototype, "strokeFirst", void 0);
+__decorate([
+    initial(0),
+    signal()
+], Shape.prototype, "lineWidth", void 0);
+__decorate([
+    initial('miter'),
+    signal()
+], Shape.prototype, "lineJoin", void 0);
+__decorate([
+    initial('butt'),
+    signal()
+], Shape.prototype, "lineCap", void 0);
+__decorate([
+    initial([]),
+    signal()
+], Shape.prototype, "lineDash", void 0);
+__decorate([
+    initial(0),
+    signal()
+], Shape.prototype, "lineDashOffset", void 0);
+__decorate([
+    initial(true),
+    signal()
+], Shape.prototype, "antialiased", void 0);
+__decorate([
+    computed()
+], Shape.prototype, "rippleSize", null);
+__decorate([
+    computed()
+], Shape.prototype, "getPath", null);
+__decorate([
+    threadable()
+], Shape.prototype, "ripple", null);
+Shape = __decorate([
+    nodeName('Shape')
+], Shape);
+export { Shape };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2hhcGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvU2hhcGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7O0FBQUEsT0FBTyxFQUlMLFlBQVksRUFDWixXQUFXLEVBQ1gsTUFBTSxFQUNOLEdBQUcsRUFDSCxVQUFVLEdBQ1gsTUFBTSw0QkFBNEIsQ0FBQztBQUNwQyxPQUFPLEVBQUMsUUFBUSxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ2xFLE9BQU8sRUFFTCxpQkFBaUIsR0FDbEIsTUFBTSxpQ0FBaUMsQ0FBQztBQUV6QyxPQUFPLEVBQUMsa0JBQWtCLEVBQUMsTUFBTSxVQUFVLENBQUM7QUFDNUMsT0FBTyxFQUFDLE1BQU0sRUFBYyxNQUFNLFVBQVUsQ0FBQztBQWV0QyxJQUFlLEtBQUssR0FBcEIsTUFBZSxLQUFNLFNBQVEsTUFBTTtJQTJCckIsY0FBYyxHQUFHLFlBQVksQ0FBZSxDQUFDLENBQUMsQ0FBQztJQUd4RCxVQUFVO1FBQ2xCLE9BQU8sV0FBVyxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUUsRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUM7SUFDbkQsQ0FBQztJQUVELFlBQW1CLEtBQWlCO1FBQ2xDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNmLENBQUM7SUFFUyxTQUFTLENBQUMsT0FBaUM7UUFDbkQsT0FBTyxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDekMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQzFDLENBQUM7SUFFUyxVQUFVLENBQUMsT0FBaUM7UUFDcEQsT0FBTyxDQUFDLFNBQVMsR0FBRyxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLEVBQUUsT0FBTyxDQUFDLENBQUM7UUFDN0QsT0FBTyxDQUFD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

package/lib/components/Spline.d.ts

@@ -0,0 +1,87 @@
+import { BBox, PossibleVector2, SerializedVector2, SignalValue, SimpleSignal } from '@efxlab/motion-canvas-core';
+import { CurveProfile, KnotInfo } from '../curves';
+import { DesiredLength } from '../partials';
+import { Curve, CurveProps } from './Curve';
+export interface SplineProps extends CurveProps {
+    /**
+     * {@inheritDoc Spline.smoothness}
+     */
+    smoothness?: SignalValue<number>;
+    /**
+     * {@inheritDoc Spline.points}
+     */
+    points?: SignalValue<SignalValue<PossibleVector2[]>>;
+}
+/**
+ * A node for drawing a smooth line through a number of points.
+ *
+ * @remarks
+ * This node uses Bézier curves for drawing each segment of the spline.
+ *
+ * @example
+ * Defining knots using the `points` property. This will automatically
+ * calculate the handle positions for each knot do draw a smooth curve. You
+ * can control the smoothness of the resulting curve via the
+ * {@link Spline.smoothness} property:
+ *
+ * ```tsx
+ * <Spline
+ *   lineWidth={4}
+ *   stroke={'white'}
+ *   smoothness={0.4}
+ *   points={[
+ *     [-400, 0],
+ *     [-200, -300],
+ *     [0, 0],
+ *     [200, -300],
+ *     [400, 0],
+ *   ]}
+ * />
+ * ```
+ *
+ * Defining knots with {@link Knot} nodes:
+ *
+ * ```tsx
+ * <Spline lineWidth={4} stroke={'white'}>
+ *   <Knot position={[-400, 0]} />
+ *   <Knot position={[-200, -300]} />
+ *   <Knot
+ *     position={[0, 0]}
+ *     startHandle={[-100, 200]}
+ *     endHandle={[100, 200]}
+ *   />
+ *   <Knot position={[200, -300]} />
+ *   <Knot position={[400, 0]} />
+ * </Spline>
+ * ```
+ */
+export declare class Spline extends Curve {
+    /**
+     * The smoothness of the spline when using auto-calculated handles.
+     *
+     * @remarks
+     * This property is only applied to knots that don't use explicit handles.
+     *
+     * @defaultValue 0.4
+     */
+    readonly smoothness: SimpleSignal<number>;
+    /**
+     * The knots of the spline as an array of knots with auto-calculated handles.
+     *
+     * @remarks
+     * You can control the smoothness of the resulting curve
+     * via the {@link smoothness} property.
+     */
+    readonly points: SimpleSignal<SignalValue<PossibleVector2>[] | null, this>;
+    constructor(props: SplineProps);
+    profile(): CurveProfile;
+    knots(): KnotInfo[];
+    protected childrenBBox(): BBox;
+    protected lineWidthCoefficient(): number;
+    protected desiredSize(): SerializedVector2<DesiredLength>;
+    protected offsetComputedLayout(box: BBox): BBox;
+    private getTightBBox;
+    drawOverlay(context: CanvasRenderingContext2D, matrix: DOMMatrix): void;
+    private isKnot;
+}
+//# sourceMappingURL=Spline.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spline.d.ts","sourceRoot":"","sources":["../../src/lib/components/Spline.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,eAAe,EACf,iBAAiB,EACjB,WAAW,EACX,YAAY,EAIb,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAEL,YAAY,EACZ,QAAQ,EAET,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAU1C,OAAO,EAAC,KAAK,EAAE,UAAU,EAAC,MAAM,SAAS,CAAC;AAK1C,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAEjC;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC;CACtD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qBAAa,MAAO,SAAQ,KAAK;IAC/B;;;;;;;OAOG;IACH,SAEwB,UAAU,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAEzD;;;;;;OAMG;IACH,SAEwB,MAAM,EAAE,YAAY,CAC1C,WAAW,CAAC,eAAe,CAAC,EAAE,GAAG,IAAI,EACrC,IAAI,CACL,CAAC;gBAEiB,KAAK,EAAE,WAAW;IAqBrB,OAAO,IAAI,YAAY;IAShC,KAAK,IAAI,QAAQ,EAAE;IAsB1B,SAAS,CAAC,YAAY;cAOH,oBAAoB,IAAI,MAAM;cAiB9B,WAAW,IAAI,iBAAiB,CAAC,aAAa,CAAC;cAI/C,oBAAoB,CAAC,GAAG,EAAE,IAAI,GAAG,IAAI;IAMxD,OAAO,CAAC,YAAY;IAOJ,WAAW,CACzB,OAAO,EAAE,wBAAwB,EACjC,MAAM,EAAE,SAAS;IAwGnB,OAAO,CAAC,MAAM;CAGf"}

package/lib/components/Spline.js

@@ -0,0 +1,230 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { BBox, Vector2, unwrap, useLogger, } from '@efxlab/motion-canvas-core';
+import { CubicBezierSegment, getBezierSplineProfile, } from '../curves';
+import { computed, initial, signal } from '../decorators';
+import { arc, bezierCurveTo, drawLine, drawPivot, lineTo, moveTo, quadraticCurveTo, } from '../utils';
+import { Curve } from './Curve';
+import { Knot } from './Knot';
+/**
+ * A node for drawing a smooth line through a number of points.
+ *
+ * @remarks
+ * This node uses Bézier curves for drawing each segment of the spline.
+ *
+ * @example
+ * Defining knots using the `points` property. This will automatically
+ * calculate the handle positions for each knot do draw a smooth curve. You
+ * can control the smoothness of the resulting curve via the
+ * {@link Spline.smoothness} property:
+ *
+ * ```tsx
+ * <Spline
+ *   lineWidth={4}
+ *   stroke={'white'}
+ *   smoothness={0.4}
+ *   points={[
+ *     [-400, 0],
+ *     [-200, -300],
+ *     [0, 0],
+ *     [200, -300],
+ *     [400, 0],
+ *   ]}
+ * />
+ * ```
+ *
+ * Defining knots with {@link Knot} nodes:
+ *
+ * ```tsx
+ * <Spline lineWidth={4} stroke={'white'}>
+ *   <Knot position={[-400, 0]} />
+ *   <Knot position={[-200, -300]} />
+ *   <Knot
+ *     position={[0, 0]}
+ *     startHandle={[-100, 200]}
+ *     endHandle={[100, 200]}
+ *   />
+ *   <Knot position={[200, -300]} />
+ *   <Knot position={[400, 0]} />
+ * </Spline>
+ * ```
+ */
+export class Spline extends Curve {
+    constructor(props) {
+        super(props);
+        if ((props.children === undefined ||
+            !Array.isArray(props.children) ||
+            props.children.length < 2) &&
+            (props.points === undefined ||
+                (typeof props.points !== 'function' && props.points.length < 2)) &&
+            props.spawner === undefined) {
+            useLogger().warn({
+                message: 'Insufficient number of knots specified for spline. A spline needs at least two knots.',
+                remarks: "<p>The spline won&#39;t be visible unless you specify at least two knots:</p>\n<pre class=\"\"><code class=\"language-tsx\">&lt;<span class=\"hljs-title class_\">Spline</span>\n  stroke=<span class=\"hljs-string\">&quot;#fff&quot;</span>\n  lineWidth={<span class=\"hljs-number\">8</span>}\n  points={[\n    [<span class=\"hljs-number\">100</span>, <span class=\"hljs-number\">0</span>],\n    [<span class=\"hljs-number\">0</span>, <span class=\"hljs-number\">0</span>],\n    [<span class=\"hljs-number\">0</span>, <span class=\"hljs-number\">100</span>],\n  ]}\n/&gt;</code></pre><p>For more control over the knot handles, you can alternatively provide the knots\nas children to the spline using the <code>Knot</code> component:</p>\n<pre class=\"\"><code class=\"language-tsx\">&lt;<span class=\"hljs-title class_\">Spline</span> stroke=<span class=\"hljs-string\">&quot;#fff&quot;</span> lineWidth={<span class=\"hljs-number\">8</span>}&gt;\n  <span class=\"language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Knot</span> <span class=\"hljs-attr\">x</span>=<span class=\"hljs-string\">{100}</span> <span class=\"hljs-attr\">endHandle</span>=<span class=\"hljs-string\">{[-50,</span> <span class=\"hljs-attr\">0</span>]} /&gt;</span></span>\n  <span class=\"language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Knot</span> /&gt;</span></span>\n  <span class=\"language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Knot</span> <span class=\"hljs-attr\">y</span>=<span class=\"hljs-string\">{100}</span> <span class=\"hljs-attr\">startHandle</span>=<span class=\"hljs-string\">{[-100,</span> <span class=\"hljs-attr\">50</span>]} /&gt;</span></span>\n&lt;/<span class=\"hljs-title class_\">Spline</span>&gt;</code></pre>",
+                inspect: this.key,
+            });
+        }
+    }
+    profile() {
+        return getBezierSplineProfile(this.knots(), this.closed(), this.smoothness());
+    }
+    knots() {
+        const points = this.points();
+        if (points) {
+            return points.map(signal => {
+                const point = new Vector2(unwrap(signal));
+                return {
+                    position: point,
+                    startHandle: point,
+                    endHandle: point,
+                    auto: { start: 1, end: 1 },
+                };
+            });
+        }
+        return this.children()
+            .filter(this.isKnot)
+            .map(knot => knot.points());
+    }
+    childrenBBox() {
+        const points = this.profile().segments.flatMap(segment => segment.points);
+        return BBox.fromPoints(...points);
+    }
+    lineWidthCoefficient() {
+        const join = this.lineJoin();
+        let coefficient = super.lineWidthCoefficient();
+        if (join !== 'miter') {
+            return coefficient;
+        }
+        const { minSin } = this.profile();
+        if (minSin > 0) {
+            coefficient = Math.max(coefficient, 0.5 / minSin);
+        }
+        return coefficient;
+    }
+    desiredSize() {
+        return this.getTightBBox().size;
+    }
+    offsetComputedLayout(box) {
+        box.position = box.position.sub(this.getTightBBox().center);
+        return box;
+    }
+    getTightBBox() {
+        const bounds = this.profile().segments.map(segment => segment.getBBox());
+        return BBox.fromBBoxes(...bounds);
+    }
+    drawOverlay(context, matrix) {
+        const size = this.computedSize();
+        const box = this.childrenBBox().transformCorners(matrix);
+        const offset = size.mul(this.offset()).scale(0.5).transformAsPoint(matrix);
+        const segments = this.profile().segments;
+        context.lineWidth = 1;
+        context.strokeStyle = 'white';
+        context.fillStyle = 'white';
+        const splinePath = new Path2D();
+        // Draw the actual spline first so that all control points get drawn on top of it.
+        for (let i = 0; i < segments.length; i++) {
+            const segment = segments[i];
+            const [from, startHandle, endHandle, to] = segment.transformPoints(matrix);
+            moveTo(splinePath, from);
+            if (segment instanceof CubicBezierSegment) {
+                bezierCurveTo(splinePath, startHandle, endHandle, to);
+            }
+            else {
+                quadraticCurveTo(splinePath, startHandle, endHandle);
+            }
+        }
+        context.stroke(splinePath);
+        for (let i = 0; i < segments.length; i++) {
+            const segment = segments[i];
+            context.fillStyle = 'white';
+            const [from, startHandle, endHandle, to] = segment.transformPoints(matrix);
+            const handlePath = new Path2D();
+            context.globalAlpha = 0.5;
+            // Line from p0 to p1
+            moveTo(handlePath, from);
+            lineTo(handlePath, startHandle);
+            if (segment instanceof CubicBezierSegment) {
+                // Line from p2 to p3
+                moveTo(handlePath, endHandle);
+                lineTo(handlePath, to);
+                context.beginPath();
+                context.stroke(handlePath);
+            }
+            else {
+                // Line from p1 to p2
+                lineTo(handlePath, endHandle);
+                context.beginPath();
+                context.stroke(handlePath);
+            }
+            context.globalAlpha = 1;
+            context.lineWidth = 2;
+            // Draw first point of segment
+            moveTo(context, from);
+            context.beginPath();
+            arc(context, from, 4);
+            context.closePath();
+            context.stroke();
+            context.fill();
+            // Draw final point of segment only if we're on the last segment.
+            // Otherwise, it will get drawn as the start point of the next segment.
+            if (i === segments.length - 1) {
+                if (to !== undefined) {
+                    moveTo(context, to);
+                    context.beginPath();
+                    arc(context, to, 4);
+                    context.closePath();
+                    context.stroke();
+                    context.fill();
+                }
+            }
+            // Draw the control points
+            context.fillStyle = 'black';
+            for (const point of [startHandle, endHandle]) {
+                if (point.magnitude > 0) {
+                    moveTo(context, point);
+                    context.beginPath();
+                    arc(context, point, 4);
+                    context.closePath();
+                    context.fill();
+                    context.stroke();
+                }
+            }
+        }
+        context.lineWidth = 1;
+        context.beginPath();
+        drawPivot(context, offset);
+        context.stroke();
+        context.beginPath();
+        drawLine(context, box);
+        context.closePath();
+        context.stroke();
+    }
+    isKnot(node) {
+        return node instanceof Knot;
+    }
+}
+__decorate([
+    initial(0.4),
+    signal()
+], Spline.prototype, "smoothness", void 0);
+__decorate([
+    initial(null),
+    signal()
+], Spline.prototype, "points", void 0);
+__decorate([
+    computed()
+], Spline.prototype, "profile", null);
+__decorate([
+    computed()
+], Spline.prototype, "knots", null);
+__decorate([
+    computed()
+], Spline.prototype, "childrenBBox", null);
+__decorate([
+    computed()
+], Spline.prototype, "getTightBBox", null);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3BsaW5lLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL1NwbGluZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7QUFBQSxPQUFPLEVBQ0wsSUFBSSxFQUtKLE9BQU8sRUFDUCxNQUFNLEVBQ04sU0FBUyxHQUNWLE1BQU0sNEJBQTRCLENBQUM7QUFDcEMsT0FBTyxFQUNMLGtCQUFrQixFQUdsQixzQkFBc0IsR0FDdkIsTUFBTSxXQUFXLENBQUM7QUFFbkIsT0FBTyxFQUFDLFFBQVEsRUFBRSxPQUFPLEVBQUUsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBRXhELE9BQU8sRUFDTCxHQUFHLEVBQ0gsYUFBYSxFQUNiLFFBQVEsRUFDUixTQUFTLEVBQ1QsTUFBTSxFQUNOLE1BQU0sRUFDTixnQkFBZ0IsR0FDakIsTUFBTSxVQUFVLENBQUM7QUFDbEIsT0FBTyxFQUFDLEtBQUssRUFBYSxNQUFNLFNBQVMsQ0FBQztBQUMxQyxPQUFPLEVBQUMsSUFBSSxFQUFDLE1BQU0sUUFBUSxDQUFDO0FBZ0I1Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBMENHO0FBQ0gsTUFBTSxPQUFPLE1BQU8sU0FBUSxLQUFLO0lBMkIvQixZQUFtQixLQUFrQjtRQUNuQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFFYixJQUNFLENBQUMsS0FBSyxDQUFDLFFBQVEsS0FBSyxTQUFTO1lBQzNCLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsUUFBUSxDQUFDO1lBQzlCLEtBQUssQ0FBQyxRQUFRLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQztZQUM1QixDQUFDLEtBQUssQ0FBQyxNQUFNLEtBQUssU0FBUztnQkFDekIsQ0FBQyxPQUFPLEtBQUssQ0FBQyxNQUFNLEtBQUssVUFBVSxJQUFJLEtBQUssQ0FBQyxNQUFNLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDO1lBQ2xFLEtBQUssQ0FBQyxPQUFPLEtBQUssU0FBUyxFQUMzQixDQUFDO1lBQ0QsU0FBUyxFQUFFLENBQUMsSUFBSSxDQUFDO2dCQUNmLE9BQU8sRUFDTCx1RkFBdUY7Z0JBQ3pGLE9BQU8sK3VEQUE2QjtnQkFDcEMsT0FBTyxFQUFFLElBQUksQ0FBQyxHQUFHO2FBQ2xCLENBQUMsQ0FBQztRQUNMLENBQUM7SUFDSCxDQUFDO0lBR2UsT0FBTztRQUNyQixPQUFPLHNCQUFzQixDQUMzQixJQUFJLENBQUMsS0FBSyxFQUFFLEVBQ1osSUFBSSxDQUFDLE1BQU0sRUFBRSxFQUNiLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FDbEIsQ0FBQztJQUNKLENBQUM7SUFHTSxLQUFLO1FBQ1YsTUFBTSxNQUFNLEdBQUcsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBRTdCLElBQUksTUFBTSxFQUFFLENBQUM7WUFDWCxPQUFPLE1BQU0sQ0FBQyxHQUFHLENBQUMsTUFBTSxDQUFDLEVBQUU7Z0JBQ3pCLE1BQU0sS0FBSyxHQUFHLElBQUksT0FBTyxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDO2dCQUUxQyxPQUFPO29CQUNMLFFBQVEsRUFBRSxLQUFLO29CQUNmLFdBQVcsRUFBRSxLQUFLO29CQUNsQixTQUFTLEVBQUUsS0FBSztvQkFDaEIsSUFBSSxFQUFFLEVBQUMsS0FBSyxFQUFFLENBQUMsRUFBRSxHQUFHLEVBQUUsQ0FBQyxFQUFDO2lCQUN6QixDQUFDO1lBQ0osQ0FBQyxDQUFDLENBQUM7UUFDTCxDQUFDO1FBRUQsT0FBTyxJQUFJLENBQUMsUUFBUSxFQUFFO2FBQ25CLE1BQU0sQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDO2FBQ25CLEdBQUcsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQyxDQUFDO0lBQ2hDLENBQUM7SUFHUyxZQUFZO1FBQ3BCLE1BQU0sTUFBTSxHQUFJLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQyxRQUFnQyxDQUFDLE9BQU8sQ0FDckUsT0FBTyxDQUFDLEVBQUUsQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUMxQixDQUFDO1FBQ0YsT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDLEdBQUcsTUFBTSxDQUFDLENBQUM7SUFDcEMsQ0FBQztJQUVrQixvQkFBb0I7UUFDckMsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO1FBRTdCLElBQUksV0FBVyxHQUFHLEtBQUssQ0FBQyxvQkFBb0IsRUFBRSxDQUFDO1FBRS9DLElBQUksSUFBSSxLQUFLLE9BQU8sRUFBRSxDQUFDO1lBQ3JCLE9BQU8sV0FBVyxDQUFDO1FBQ3JCLENBQUM7UUFFRCxNQUFNLEVBQUMsTUFBTSxFQUFDLEdBQUcsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO1FBQ2hDLElBQUksTUFBTSxHQUFHLENBQUMsRUFBRSxDQUFDO1lBQ2YsV0FBVyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsV0FBVyxFQUFFLEdBQUcsR0FBRyxNQUFNLENBQUMsQ0FBQztRQUNwRCxDQUFDO1FBRUQsT0FBTyxXQUFXLENBQUM7SUFDckIsQ0FBQztJQUVrQixXQUFXO1FBQzVCLE9BQU8sSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDLElBQUksQ0FBQztJQUNsQyxDQUFDO0lBRWtCLG9CQUFvQixDQUFDLEdBQVM7UUFDL0MsR0FBRyxDQUFDLFFBQVEsR0FBRyxHQUFHLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDNUQsT0FBTyxHQUFHLENBQUM7SUFDYixDQUFDO0lBR08sWUFBWTtRQUNsQixNQUFNLE1BQU0sR0FBSSxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUMsUUFBZ0MsQ0FBQyxHQUFHLENBQ2pFLE9BQU8sQ0FBQyxFQUFFLENBQUMsT0FBTyxDQUFDLE9BQU8sRUFBRSxDQUM3QixDQUFDO1FBQ0YsT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDLEdBQUcsTUFBTSxDQUFDLENBQUM7SUFDcEMsQ0FBQztJQUVlLFdBQVcsQ0FDekIsT0FBaUMsRUFDakMsTUFBaUI7UUFFakIsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ2pDLE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQyxnQkFBZ0IsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUN6RCxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQyxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQyxnQkFBZ0IsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUMzRSxNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUMsUUFBK0IsQ0FBQztRQUVoRSxPQUFPLENBQUMsU0FBUyxHQUFHLENBQUMsQ0FBQztRQUN0QixPQUFPLENBQUMsV0FBVyxHQUFHLE9BQU8sQ0FBQztRQUM5QixPQUFPLENBQUMsU0FBUyxHQUFHLE9BQU8sQ0FBQztRQUU1QixNQUFNLFVBQVUsR0FBRyxJQUFJLE1BQU0sRUFBRSxDQUFDO1FBRWhDLGtGQUFrRjtRQUNsRixLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsUUFBUSxDQUFDLE1BQU0sRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDO1lBQ3pDLE1BQU0sT0FBTyxHQUFHLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUM1QixNQUFNLENBQUMsSUFBSSxFQUFFLFdBQVcsRUFBRSxTQUFTLEVBQUUsRUFBRSxDQUFDLEdBQ3RDLE9BQU8sQ0FBQyxlQUFlLENBQUMsTUFBTSxDQUFDLENBQUM7WUFFbEMsTUFBTSxDQUFDLFVBQVUsRUFBRSxJQUFJLENBQUMsQ0FBQztZQUN6QixJQUFJLE9BQU8sWUFBWSxrQkFBa0IsRUFBRSxDQUFDO2dCQUMxQyxhQUFhLENBQUMsVUFBVSxFQUFFLFdBQVcsRUFBRSxTQUFTLEVBQUUsRUFBYSxDQUFDLENBQUM7WUFDbkUsQ0FBQztpQkFBTSxDQUFDO2dCQUNOLGdCQUFnQixDQUFDLFVBQVUsRUFBRSxXQUFXLEVBQUUsU0FBUyxDQUFDLENBQUM7WUFDdkQsQ0FBQztRQUNILENBQUM7UUFDRCxPQUFPLENBQUMsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBRTNCLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxRQUFRLENBQUMsTUFBTSxFQUFFLENBQUMsRUFBRSxFQUFFLENBQUM7WUFDekMsTUFBTSxPQUFPLEdBQUcsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBQzVCLE9BQU8sQ0FBQyxTQUFTLEdBQUcsT0FBTyxDQUFDO1lBRTVCLE1BQU0sQ0FBQyxJQUFJLEVBQUUsV0FBVyxFQUFFLFNBQVMsRUFBRSxFQUFFLENBQUMsR0FDdEMsT0FBTyxDQUFDLGVBQWUsQ0FBQyxNQUFNLENBQUMsQ0FBQztZQUVsQyxNQUFNLFVBQVUsR0FBRyxJQUFJLE1BQU0sRUFBRSxDQUFDO1lBRWhDLE9BQU8sQ0FBQyxXQUFXLEdBQUcsR0FBRyxDQUFDO1lBQzFCLHFCQUFxQjtZQUNyQixNQUFNLENBQUMsVUFBVSxFQUFFLElBQUksQ0FBQyxDQUFDO1lBQ3pCLE1BQU0sQ0FBQyxVQUFVLEVBQUUsV0FBVyxDQUFDLENBQUM7WUFFaEMsSUFBSSxPQUFPLFlBQVksa0JBQWtCLEVBQUUsQ0FBQztnQkFDMUMscUJBQXFCO2dCQUNyQixNQUFNLENBQUMsVUFBVSxFQUFFLFNBQVMsQ0FBQyxDQUFDO2dCQUM5QixNQUFNLENBQUMsVUFBVSxFQUFFLEVBQWEsQ0FBQyxDQUFDO2dCQUNsQyxPQUFPLENBQUMsU0FBUyxFQUFFLENBQUM7Z0JBQ3BCLE9BQU8sQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7WUFDN0IsQ0FBQztpQkFBTSxDQUFDO2dCQUNOLHFCQUFxQjtnQkFDckIsTUFBTSxDQUFDLFVBQVUsRUFBRSxTQUFTLENBQUMsQ0FBQztnQkFDOUIsT0FBTyxDQUFDLFNBQVMsRUFBRSxDQUFDO2dCQUNwQixPQUFPLENBQUMsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1lBQzdCLENBQUM7WUFFRCxPQUFPLENBQUMsV0FBVyxHQUFHLENBQUMsQ0FBQztZQUN4QixPQUFPLENBQUMsU0FBUyxHQUFHLENBQUMsQ0FBQztZQUV0Qiw4QkFBOEI7WUFDOUIsTUFBTSxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsQ0FBQztZQUN0QixPQUFPLENBQUMsU0FBUyxFQUFFLENBQUM7WUFDcEIsR0FBRyxDQUFDLE9BQU8sRUFBRSxJQUFJLEVBQUUsQ0FBQyxDQUFDLENBQUM7WUFDdEIsT0FBTyxDQUFDLFNBQVMsRUFBRSxDQUFDO1lBQ3BCLE9BQU8sQ0FBQyxNQUFNLEVBQUUsQ0FBQztZQUNqQixPQUFPLENBQUMsSUFBSSxFQUFFLENBQUM7WUFFZixpRUFBaUU7WUFDakUsdUVBQXVFO1lBQ3ZFLElBQUksQ0FBQyxLQUFLLFFBQVEsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFLENBQUM7Z0JBQzlCLElBQUksRUFBRSxLQUFLLFNBQVMsRUFBRSxDQUFDO29CQUNyQixNQUFNLENBQUMsT0FBTyxFQUFFLEVBQUUsQ0FBQyxDQUFDO29CQUNwQixPQUFPLENBQUMsU0FBUyxFQUFFLENBQUM7b0JBQ3BCLEdBQUcsQ0FBQyxPQUFPLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDO29CQUNwQixPQUFPLENBQUMsU0FBUyxFQUFFLENBQUM7b0JBQ3BCLE9BQU8sQ0FBQyxNQUFNLEVBQUUsQ0FBQztvQkFDakIsT0FBTyxDQUFDLElBQUksRUFBRSxDQUFDO2dCQUNqQixDQUFDO1lBQ0gsQ0FBQztZQUVELDBCQUEwQjtZQUMxQixPQUFPLENBQUMsU0FBUyxHQUFHLE9BQU8sQ0FBQztZQUM1QixLQUFLLE1BQU0sS0FBSyxJQUFJLENBQUMsV0FBVyxFQUFFLFNBQVMsQ0FBQyxFQUFFLENBQUM7Z0JBQzdDLElBQUksS0FBSyxDQUFDLFNBQVMsR0FBRyxDQUFDLEVBQUUsQ0FBQztvQkFDeEIsTUFBTSxDQUFDLE9BQU8sRUFBRSxLQUFLLENBQUMsQ0FBQztvQkFDdkIsT0FBTyxDQUFDLFNBQVMsRUFBRSxDQUFDO29CQUNwQixHQUFHLENBQUMsT0FBTyxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FBQztvQkFDdkIsT0FBTyxDQUFDLFNBQVMsRUFBRSxDQUFDO29CQUNwQixPQUFPLENBQUMsSUFBSSxFQUFFLENBQUM7b0JBQ2YsT0FBTyxDQUFDLE1BQU0sRUFBRSxDQUFDO2dCQUNuQixDQUFDO1lBQ0gsQ0FBQztRQUNILENBQUM7UUFFRCxPQUFPLENBQUMsU0FBUyxHQUFHLENBQUMsQ0FBQztRQUN0QixPQUFPLENBQUMsU0FBUyxFQUFFLENBQUM7UUFDcEIsU0FBUyxDQUFDLE9BQU8sRUFBRSxNQUFNLENBQUMsQ0FBQztRQUMzQixPQUFPLENBQUMsTUFBTSxFQUFFLENBQUM7UUFFakIsT0FBTyxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBQ3BCLFFBQVEsQ0FBQyxPQUFPLEVBQUUsR0FBRyxDQUFDLENBQUM7UUFDdkIsT0FBTyxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBQ3BCLE9BQU8sQ0FBQyxNQUFNLEVBQUUsQ0FBQztJQUNuQixDQUFDO0lBRU8sTUFBTSxDQUFDLElBQVU7UUFDdkIsT0FBTyxJQUFJLFlBQVksSUFBSSxDQUFDO0lBQzlCLENBQUM7Q0FDRjtBQTFOeUI7SUFGdkIsT0FBTyxDQUFDLEdBQUcsQ0FBQztJQUNaLE1BQU0sRUFBRTswQ0FDZ0Q7QUFXakM7SUFGdkIsT0FBTyxDQUFDLElBQUksQ0FBQztJQUNiLE1BQU0sRUFBRTtzQ0FJUDtBQXVCYztJQURmLFFBQVEsRUFBRTtxQ0FPVjtBQUdNO0lBRE4sUUFBUSxFQUFFO21DQW9CVjtBQUdTO0lBRFQsUUFBUSxFQUFFOzBDQU1WO0FBNkJPO0lBRFAsUUFBUSxFQUFFOzBDQU1WIn0=

package/lib/components/Txt.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Txt.d.ts","sourceRoot":"","sources":["../../src/lib/components/Txt.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,qBAAqB,EACrB,WAAW,EACX,YAAY,EACZ,eAAe,EACf,cAAc,EAIf,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAC,KAAK,EAAE,UAAU,EAAC,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,OAAO,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAE1C,KAAK,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;AACrD,KAAK,MAAM,GAAG,GAAG,GAAG,OAAO,CAAC;AAE5B,MAAM,WAAW,QAAS,SAAQ,UAAU;IAC1C,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC5B;AAED,qBACa,GAAI,SAAQ,KAAK;IAC5B;;;;;;;;;;OAUG;WACW,CAAC,CAAC,KAAK,EAAE,QAAQ;IAI/B;;;;;;;;;;OAUG;WACW,CAAC,CAAC,KAAK,EAAE,QAAQ;IAI/B,SAEwB,IAAI,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAEzD,SAAS,CAAC,OAAO,IAAI,MAAM;IAI3B,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC;cAsBzB,WAAW,CAAC,KAAK,EAAE,WAAW,CAAC,iBAAiB,CAAC;IAapE,SAAS,CAAE,SAAS,CAClB,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,EAC1B,IAAI,EAAE,MAAM,EACZ,cAAc,EAAE,cAAc,EAC9B,qBAAqB,EAAE,qBAAqB,CAAC,MAAM,CAAC,GACnD,eAAe;IA6BlB,SAAS,CAAC,SAAS,IAAI,OAAO;gBAIX,EAAC,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,QAAQ;IAMvD,SAAS,CAAC,SAAS,IAAI,MAAM;IAW7B,SAAS,CAAC,SAAS;cAKA,aAAa,CAAC,QAAQ,EAAE,iBAAiB,GAAG,MAAM,EAAE;cAcpD,SAAS;cAOT,IAAI,CAAC,OAAO,EAAE,wBAAwB;CAG1D"}