@efxlab/motion-canvas-2d 4.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Ray.d.ts","sourceRoot":"","sources":["../../src/lib/components/Ray.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,eAAe,EACf,WAAW,EACX,aAAa,EACd,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAC,YAAY,EAAc,MAAM,WAAW,CAAC;AAGpD,OAAO,EAAC,KAAK,EAAE,UAAU,EAAC,MAAM,SAAS,CAAC;AAE1C,MAAM,WAAW,QAAS,SAAQ,UAAU;IAC1C;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAE5B;;OAEG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IAClC,GAAG,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B,GAAG,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBACa,GAAI,SAAQ,KAAK;IAC5B;;OAEG;IACH,SACwB,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAElD;;OAEG;IACH,SACwB,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;gBAE7B,KAAK,EAAE,QAAQ;cAIf,YAAY;IAIf,OAAO,IAAI,YAAY;IAUvB,WAAW,CACzB,OAAO,EAAE,wBAAwB,EACjC,MAAM,EAAE,SAAS;CAoCpB"}

package/lib/components/Ray.js

@@ -0,0 +1,95 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { BBox, } from '@efxlab/motion-canvas-core';
+import { LineSegment } from '../curves';
+import { nodeName, vector2Signal } from '../decorators';
+import { arc, drawLine, drawPivot } from '../utils';
+import { Curve } from './Curve';
+/**
+ * A node for drawing an individual line segment.
+ *
+ * @preview
+ * ```tsx editor
+ * import {makeScene2D} from '@efxlab/motion-canvas-2d';
+ * import {Ray} from '@efxlab/motion-canvas-2d';
+ * import {createRef} from '@efxlab/motion-canvas-core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const ray = createRef<Ray>();
+ *
+ *   view.add(
+ *     <Ray
+ *       ref={ray}
+ *       lineWidth={8}
+ *       endArrow
+ *       stroke={'lightseagreen'}
+ *       fromX={-200}
+ *       toX={200}
+ *     />,
+ *   );
+ *
+ *   yield* ray().start(1, 1);
+ *   yield* ray().start(0).end(0).start(1, 1);
+ * });
+ * ```
+ */
+let Ray = class Ray extends Curve {
+    constructor(props) {
+        super(props);
+    }
+    childrenBBox() {
+        return BBox.fromPoints(this.from(), this.to());
+    }
+    profile() {
+        const segment = new LineSegment(this.from(), this.to());
+        return {
+            arcLength: segment.arcLength,
+            minSin: 1,
+            segments: [segment],
+        };
+    }
+    drawOverlay(context, matrix) {
+        const box = this.childrenBBox().transformCorners(matrix);
+        const size = this.computedSize();
+        const offset = size.mul(this.offset()).scale(0.5).transformAsPoint(matrix);
+        const from = this.from().transformAsPoint(matrix);
+        const to = this.to().transformAsPoint(matrix);
+        context.fillStyle = 'white';
+        context.strokeStyle = 'black';
+        context.lineWidth = 1;
+        context.beginPath();
+        arc(context, from, 4);
+        context.fill();
+        context.stroke();
+        context.beginPath();
+        arc(context, to, 4);
+        context.fill();
+        context.stroke();
+        context.strokeStyle = 'white';
+        context.beginPath();
+        drawLine(context, [from, to]);
+        context.stroke();
+        context.beginPath();
+        drawPivot(context, offset);
+        context.stroke();
+        context.beginPath();
+        drawLine(context, box);
+        context.closePath();
+        context.stroke();
+    }
+};
+__decorate([
+    vector2Signal('from')
+], Ray.prototype, "from", void 0);
+__decorate([
+    vector2Signal('to')
+], Ray.prototype, "to", void 0);
+Ray = __decorate([
+    nodeName('Ray')
+], Ray);
+export { Ray };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmF5LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL1JheS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7QUFBQSxPQUFPLEVBQ0wsSUFBSSxHQUlMLE1BQU0sNEJBQTRCLENBQUM7QUFDcEMsT0FBTyxFQUFlLFdBQVcsRUFBQyxNQUFNLFdBQVcsQ0FBQztBQUNwRCxPQUFPLEVBQUMsUUFBUSxFQUFFLGFBQWEsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN0RCxPQUFPLEVBQUMsR0FBRyxFQUFFLFFBQVEsRUFBRSxTQUFTLEVBQUMsTUFBTSxVQUFVLENBQUM7QUFDbEQsT0FBTyxFQUFDLEtBQUssRUFBYSxNQUFNLFNBQVMsQ0FBQztBQWtCMUM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTJCRztBQUVJLElBQU0sR0FBRyxHQUFULE1BQU0sR0FBSSxTQUFRLEtBQUs7SUFhNUIsWUFBbUIsS0FBZTtRQUNoQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDZixDQUFDO0lBRWtCLFlBQVk7UUFDN0IsT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsRUFBRSxJQUFJLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQztJQUNqRCxDQUFDO0lBRWUsT0FBTztRQUNyQixNQUFNLE9BQU8sR0FBRyxJQUFJLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLEVBQUUsSUFBSSxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUM7UUFFeEQsT0FBTztZQUNMLFNBQVMsRUFBRSxPQUFPLENBQUMsU0FBUztZQUM1QixNQUFNLEVBQUUsQ0FBQztZQUNULFFBQVEsRUFBRSxDQUFDLE9BQU8sQ0FBQztTQUNwQixDQUFDO0lBQ0osQ0FBQztJQUVlLFdBQVcsQ0FDekIsT0FBaUMsRUFDakMsTUFBaUI7UUFFakIsTUFBTSxHQUFHLEdBQUcsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDLGdCQUFnQixDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ3pELE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQztRQUNqQyxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQyxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQyxnQkFBZ0IsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUMzRSxNQUFNLElBQUksR0FBRyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsZ0JBQWdCLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDbEQsTUFBTSxFQUFFLEdBQUcsSUFBSSxDQUFDLEVBQUUsRUFBRSxDQUFDLGdCQUFnQixDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBRTlDLE9BQU8sQ0FBQyxTQUFTLEdBQUcsT0FBTyxDQUFDO1FBQzVCLE9BQU8sQ0FBQyxXQUFXLEdBQUcsT0FBTyxDQUFDO1FBQzlCLE9BQU8sQ0FBQyxTQUFTLEdBQUcsQ0FBQyxDQUFDO1FBRXRCLE9BQU8sQ0FBQyxTQUFTLEVBQUUsQ0FBQztRQUNwQixHQUFHLENBQUMsT0FBTyxFQUFFLElBQUksRUFBRSxDQUFDLENBQUMsQ0FBQztRQUN0QixPQUFPLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDZixPQUFPLENBQUMsTUFBTSxFQUFFLENBQUM7UUFFakIsT0FBTyxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBQ3BCLEdBQUcsQ0FBQyxPQUFPLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBQ3BCLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNmLE9BQU8sQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUVqQixPQUFPLENBQUMsV0FBVyxHQUFHLE9BQU8sQ0FBQztRQUM5QixPQUFPLENBQUMsU0FBUyxFQUFFLENBQUM7UUFDcEIsUUFBUSxDQUFDLE9BQU8sRUFBRSxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBQzlCLE9BQU8sQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUVqQixPQUFPLENBQUMsU0FBUyxFQUFFLENBQUM7UUFDcEIsU0FBUyxDQUFDLE9BQU8sRUFBRSxNQUFNLENBQUMsQ0FBQztRQUMzQixPQUFPLENBQUMsTUFBTSxFQUFFLENBQUM7UUFFakIsT0FBTyxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBQ3BCLFFBQVEsQ0FBQyxPQUFPLEVBQUUsR0FBRyxDQUFDLENBQUM7UUFDdkIsT0FBTyxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBQ3BCLE9BQU8sQ0FBQyxNQUFNLEVBQUUsQ0FBQztJQUNuQixDQUFDO0NBQ0YsQ0FBQTtBQWhFeUI7SUFEdkIsYUFBYSxDQUFDLE1BQU0sQ0FBQztpQ0FDNEI7QUFNMUI7SUFEdkIsYUFBYSxDQUFDLElBQUksQ0FBQzsrQkFDNEI7QUFYckMsR0FBRztJQURmLFFBQVEsQ0FBQyxLQUFLLENBQUM7R0FDSCxHQUFHLENBcUVmIn0=

package/lib/components/Rect.d.ts

@@ -0,0 +1,112 @@
+import { BBox, PossibleSpacing, SerializedVector2, SignalValue, SimpleSignal, SpacingSignal } from '@efxlab/motion-canvas-core';
+import { DesiredLength } from '../partials';
+import { Curve, CurveProps } from './Curve';
+export interface RectProps extends CurveProps {
+    /**
+     * {@inheritDoc Rect.radius}
+     */
+    radius?: SignalValue<PossibleSpacing>;
+    /**
+     * {@inheritDoc Rect.smoothCorners}
+     */
+    smoothCorners?: SignalValue<boolean>;
+    /**
+     * {@inheritDoc Rect.cornerSharpness}
+     */
+    cornerSharpness?: SignalValue<number>;
+}
+export declare class Rect extends Curve {
+    /**
+     * Rounds the corners of this rectangle.
+     *
+     * @remarks
+     * The value represents the radius of the quarter circle that is used to round
+     * the corners. If the value is a number, the same radius is used for all
+     * corners. Passing an array of two to four numbers will set individual radii
+     * for each corner. Individual radii correspond to different corners depending
+     * on the number of values passed:
+     *
+     * ```ts
+     * // top-left-and-bottom-right | top-right-and-bottom-left
+     * [10, 30]
+     * // top-left | top-right-and-bottom-left | bottom-right
+     * [10, 20, 30]
+     * // top-left | top-right | bottom-right | bottom-left
+     * [10, 20, 30, 40]
+     * ```
+     *
+     * @example
+     * One uniform radius:
+     * ```tsx
+     * <Rect
+     *   size={320}
+     *   radius={40}
+     *   fill={'white'}
+     * />
+     * ```
+     * @example
+     * Individual radii for each corner:
+     * ```tsx
+     * <Rect
+     *   size={320}
+     *   radius={[10, 20, 30, 40]}
+     *   fill={'white'}
+     * />
+     * ```
+     */
+    readonly radius: SpacingSignal<this>;
+    /**
+     * Enables corner smoothing.
+     *
+     * @remarks
+     * This property only affects the way rounded corners are drawn. To control
+     * the corner radius use the {@link radius} property.
+     *
+     * When enabled, rounded corners are drawn continuously using Bézier curves
+     * rather than quarter circles. The sharpness of the curve can be controlled
+     * with {@link cornerSharpness}.
+     *
+     * You can read more about corner smoothing in
+     * [this article by Nick Lawrence](https://uxplanet.org/ui-ux-design-corner-smoothing-720509d1ae48).
+     *
+     * @example
+     * ```tsx
+     * <Rect
+     *   width={300}
+     *   height={300}
+     *   smoothCorners={true}
+     * />
+     * ```
+     */
+    readonly smoothCorners: SimpleSignal<boolean, this>;
+    /**
+     * Controls the sharpness of {@link smoothCorners}.
+     *
+     * @remarks
+     * This property only affects the way rounded corners are drawn. To control
+     * the corner radius use the {@link radius} property.
+     *
+     * Requires {@link smoothCorners} to be enabled to have any effect.
+     * By default, corner sharpness is set to `0.6` which represents a smooth,
+     * circle-like rounding. At `0` the edges are squared off.
+     *
+     * @example
+     * ```tsx
+     * <Rect
+     *   size={300}
+     *   smoothCorners={true}
+     *   cornerSharpness={0.7}
+     * />
+     * ```
+     */
+    readonly cornerSharpness: SimpleSignal<number, this>;
+    constructor(props: RectProps);
+    profile(): import("..").CurveProfile;
+    protected desiredSize(): SerializedVector2<DesiredLength>;
+    protected offsetComputedLayout(box: BBox): BBox;
+    protected childrenBBox(): BBox;
+    protected getPath(): Path2D;
+    protected getCacheBBox(): BBox;
+    protected getRipplePath(): Path2D;
+}
+//# sourceMappingURL=Rect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Rect.d.ts","sourceRoot":"","sources":["../../src/lib/components/Rect.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,eAAe,EACf,iBAAiB,EACjB,WAAW,EACX,YAAY,EACZ,aAAa,EACd,MAAM,4BAA4B,CAAC;AAIpC,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAC,KAAK,EAAE,UAAU,EAAC,MAAM,SAAS,CAAC;AAE1C,MAAM,WAAW,SAAU,SAAQ,UAAU;IAC3C;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IAEtC;;OAEG;IACH,aAAa,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAErC;;OAEG;IACH,eAAe,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CACvC;AAED,qBACa,IAAK,SAAQ,KAAK;IAC7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAqCG;IACH,SACwB,MAAM,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAEpD;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,SAEwB,aAAa,EAAE,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAEnE;;;;;;;;;;;;;;;;;;;OAmBG;IACH,SAEwB,eAAe,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;gBAEjD,KAAK,EAAE,SAAS;IAK5B,OAAO;cASK,WAAW,IAAI,iBAAiB,CAAC,aAAa,CAAC;cAO/C,oBAAoB,CAAC,GAAG,EAAE,IAAI,GAAG,IAAI;cAIrC,YAAY,IAAI,IAAI;cAIpB,OAAO,IAAI,MAAM;cAejB,YAAY,IAAI,IAAI;cAIpB,aAAa,IAAI,MAAM;CAW3C"}

package/lib/components/Rect.js

@@ -0,0 +1,76 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { BBox, } from '@efxlab/motion-canvas-core';
+import { getRectProfile } from '../curves/getRectProfile';
+import { computed, initial, nodeName, signal } from '../decorators';
+import { spacingSignal } from '../decorators/spacingSignal';
+import { drawRoundRect } from '../utils';
+import { Curve } from './Curve';
+let Rect = class Rect extends Curve {
+    constructor(props) {
+        super(props);
+    }
+    profile() {
+        return getRectProfile(this.childrenBBox(), this.radius(), this.smoothCorners(), this.cornerSharpness());
+    }
+    desiredSize() {
+        return {
+            x: this.width.context.getter(),
+            y: this.height.context.getter(),
+        };
+    }
+    offsetComputedLayout(box) {
+        return box;
+    }
+    childrenBBox() {
+        return BBox.fromSizeCentered(this.computedSize());
+    }
+    getPath() {
+        if (this.requiresProfile()) {
+            return this.curveDrawingInfo().path;
+        }
+        const path = new Path2D();
+        const radius = this.radius();
+        const smoothCorners = this.smoothCorners();
+        const cornerSharpness = this.cornerSharpness();
+        const box = BBox.fromSizeCentered(this.size());
+        drawRoundRect(path, box, radius, smoothCorners, cornerSharpness);
+        return path;
+    }
+    getCacheBBox() {
+        return super.getCacheBBox().expand(this.rippleSize());
+    }
+    getRipplePath() {
+        const path = new Path2D();
+        const rippleSize = this.rippleSize();
+        const radius = this.radius().addScalar(rippleSize);
+        const smoothCorners = this.smoothCorners();
+        const cornerSharpness = this.cornerSharpness();
+        const box = BBox.fromSizeCentered(this.size()).expand(rippleSize);
+        drawRoundRect(path, box, radius, smoothCorners, cornerSharpness);
+        return path;
+    }
+};
+__decorate([
+    spacingSignal('radius')
+], Rect.prototype, "radius", void 0);
+__decorate([
+    initial(false),
+    signal()
+], Rect.prototype, "smoothCorners", void 0);
+__decorate([
+    initial(0.6),
+    signal()
+], Rect.prototype, "cornerSharpness", void 0);
+__decorate([
+    computed()
+], Rect.prototype, "profile", null);
+Rect = __decorate([
+    nodeName('Rect')
+], Rect);
+export { Rect };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmVjdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9SZWN0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBLE9BQU8sRUFDTCxJQUFJLEdBTUwsTUFBTSw0QkFBNEIsQ0FBQztBQUNwQyxPQUFPLEVBQUMsY0FBYyxFQUFDLE1BQU0sMEJBQTBCLENBQUM7QUFDeEQsT0FBTyxFQUFDLFFBQVEsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUNsRSxPQUFPLEVBQUMsYUFBYSxFQUFDLE1BQU0sNkJBQTZCLENBQUM7QUFFMUQsT0FBTyxFQUFDLGFBQWEsRUFBQyxNQUFNLFVBQVUsQ0FBQztBQUN2QyxPQUFPLEVBQUMsS0FBSyxFQUFhLE1BQU0sU0FBUyxDQUFDO0FBb0JuQyxJQUFNLElBQUksR0FBVixNQUFNLElBQUssU0FBUSxLQUFLO0lBNkY3QixZQUFtQixLQUFnQjtRQUNqQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDZixDQUFDO0lBR00sT0FBTztRQUNaLE9BQU8sY0FBYyxDQUNuQixJQUFJLENBQUMsWUFBWSxFQUFFLEVBQ25CLElBQUksQ0FBQyxNQUFNLEVBQUUsRUFDYixJQUFJLENBQUMsYUFBYSxFQUFFLEVBQ3BCLElBQUksQ0FBQyxlQUFlLEVBQUUsQ0FDdkIsQ0FBQztJQUNKLENBQUM7SUFFa0IsV0FBVztRQUM1QixPQUFPO1lBQ0wsQ0FBQyxFQUFFLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLE1BQU0sRUFBRTtZQUM5QixDQUFDLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUMsTUFBTSxFQUFFO1NBQ2hDLENBQUM7SUFDSixDQUFDO0lBRWtCLG9CQUFvQixDQUFDLEdBQVM7UUFDL0MsT0FBTyxHQUFHLENBQUM7SUFDYixDQUFDO0lBRWtCLFlBQVk7UUFDN0IsT0FBTyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDLENBQUM7SUFDcEQsQ0FBQztJQUVrQixPQUFPO1FBQ3hCLElBQUksSUFBSSxDQUFDLGVBQWUsRUFBRSxFQUFFLENBQUM7WUFDM0IsT0FBTyxJQUFJLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQyxJQUFJLENBQUM7UUFDdEMsQ0FBQztRQUVELE1BQU0sSUFBSSxHQUFHLElBQUksTUFBTSxFQUFFLENBQUM7UUFDMUIsTUFBTSxNQUFNLEdBQUcsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBQzdCLE1BQU0sYUFBYSxHQUFHLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztRQUMzQyxNQUFNLGVBQWUsR0FBRyxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDL0MsTUFBTSxHQUFHLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDO1FBQy9DLGFBQWEsQ0FBQyxJQUFJLEVBQUUsR0FBRyxFQUFFLE1BQU0sRUFBRSxhQUFhLEVBQUUsZUFBZSxDQUFDLENBQUM7UUFFakUsT0FBTyxJQUFJLENBQUM7SUFDZCxDQUFDO0lBRWtCLFlBQVk7UUFDN0IsT0FBTyxLQUFLLENBQUMsWUFBWSxFQUFFLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQyxDQUFDO0lBQ3hELENBQUM7SUFFa0IsYUFBYTtRQUM5QixNQUFNLElBQUksR0FBRyxJQUFJLE1BQU0sRUFBRSxDQUFDO1FBQzFCLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztRQUNyQyxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsU0FBUyxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQ25ELE1BQU0sYUFBYSxHQUFHLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztRQUMzQyxNQUFNLGVBQWUsR0FBRyxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDL0MsTUFBTSxHQUFHLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUNsRSxhQUFhLENBQUMsSUFBSSxFQUFFLEdBQUcsRUFBRSxNQUFNLEVBQUUsYUFBYSxFQUFFLGVBQWUsQ0FBQyxDQUFDO1FBRWpFLE9BQU8sSUFBSSxDQUFDO0lBQ2QsQ0FBQztDQUNGLENBQUE7QUFoSHlCO0lBRHZCLGFBQWEsQ0FBQyxRQUFRLENBQUM7b0NBQzRCO0FBMkI1QjtJQUZ2QixPQUFPLENBQUMsS0FBSyxDQUFDO0lBQ2QsTUFBTSxFQUFFOzJDQUMwRDtBQXdCM0M7SUFGdkIsT0FBTyxDQUFDLEdBQUcsQ0FBQztJQUNaLE1BQU0sRUFBRTs2Q0FDMkQ7QUFPN0Q7SUFETixRQUFRLEVBQUU7bUNBUVY7QUF6R1UsSUFBSTtJQURoQixRQUFRLENBQUMsTUFBTSxDQUFDO0dBQ0osSUFBSSxDQXdKaEIifQ==

package/lib/components/SVG.d.ts

@@ -0,0 +1,175 @@
+import { SerializedVector2, SignalValue, SimpleSignal, ThreadGenerator, TimingFunction, Vector2 } from '@efxlab/motion-canvas-core';
+import { DesiredLength } from '../partials';
+import { Node, NodeProps } from './Node';
+import { Shape, ShapeProps } from './Shape';
+/**
+ * Represent SVG shape.
+ * This only used single time because `node` may have reference to parent SVG renderer.
+ */
+export interface SVGShape {
+    id: string;
+    shape: Node;
+}
+/**
+ * Data of SVGShape.
+ * This can used many times  because it do not reference parent SVG.
+ * This must build into SVGShape
+ */
+export interface SVGShapeData {
+    id: string;
+    type: new (props: NodeProps) => Node;
+    props: ShapeProps;
+    children?: SVGShapeData[];
+}
+/**
+ * Represent SVG document that contains SVG shapes.
+ * This only used single time because `nodes` have reference to parent SVG renderer.
+ */
+export interface SVGDocument {
+    size: Vector2;
+    nodes: SVGShape[];
+}
+/**
+ * Data of SVGDocument.
+ * This can used many times because it do not reference parent SVG.
+ * This must build into SVGDocument
+ */
+export interface SVGDocumentData {
+    size: Vector2;
+    nodes: SVGShapeData[];
+}
+export interface SVGProps extends ShapeProps {
+    svg: SignalValue<string>;
+}
+/**
+A Node for drawing and animating SVG images.
+
+@remarks
+If you're not interested in animating SVG, you can use {@link Img} instead.
+ */
+export declare class SVG extends Shape {
+    protected static containerElement: HTMLDivElement;
+    private static svgNodesPool;
+    /**
+     * SVG string to be rendered
+     */
+    readonly svg: SimpleSignal<string, this>;
+    /**
+     * Child to wrap all SVG node
+     */
+    wrapper: Node;
+    private lastTweenTargetSrc;
+    private lastTweenTargetDocument;
+    constructor(props: SVGProps);
+    /**
+     * Get all SVG nodes with the given id.
+     * @param id - An id to query.
+     */
+    getChildrenById(id: string): Node[];
+    protected desiredSize(): SerializedVector2<DesiredLength>;
+    protected getCurrentSize(): {
+        x: number | null;
+        y: number | null;
+    };
+    protected calculateWrapperScale(documentSize: Vector2, parentSize: SerializedVector2<number | null>): Vector2;
+    /**
+     * Convert `SVGDocumentData` to `SVGDocument`.
+     * @param data - `SVGDocumentData` to convert.
+     */
+    protected buildDocument(data: SVGDocumentData): SVGDocument;
+    /**
+     * Convert `SVGShapeData` to `SVGShape`.
+     * @param data - `SVGShapeData` to convert.
+     */
+    protected buildShape({ id, type, props, children }: SVGShapeData): SVGShape;
+    /**
+     * Convert an SVG string to `SVGDocument`.
+     * @param svg - An SVG string to be parsed.
+     */
+    protected parseSVG(svg: string): SVGDocument;
+    /**
+     * Create a tweening list to tween between two SVG nodes.
+     * @param from - The initial node,
+     * @param to - The final node.
+     * @param duration - The duration of the tween.
+     * @param timing - The timing function.
+     */
+    protected generateTransformer(from: Node, to: Node, duration: number, timing: TimingFunction): Generator<ThreadGenerator>;
+    protected tweenSvg(value: SignalValue<string>, time: number, timingFunction: TimingFunction): Generator<void | ThreadGenerator | Promise<any> | import("@efxlab/motion-canvas-core").Promisable<any>, void, any>;
+    private wrapperScale;
+    /**
+     * Get the current `SVGDocument`.
+     */
+    private document;
+    /**
+     * Get current document nodes.
+     */
+    private documentNodes;
+    /**
+     * Convert SVG colors in Shape properties to Motion Canvas colors.
+     * @param param - Shape properties.
+     * @returns Converted Shape properties.
+     */
+    private processElementStyle;
+    /**
+     * Parse an SVG string as `SVGDocumentData`.
+     * @param svg - And SVG string to be parsed.
+     * @returns `SVGDocumentData` that can be used to build SVGDocument.
+     */
+    protected static parseSVGData(svg: string): SVGDocumentData;
+    /**
+     * Get position, rotation and scale from Matrix transformation as Shape properties
+     * @param transform - Matrix transformation
+     * @returns MotionCanvas Shape properties
+     */
+    protected static getMatrixTransformation(transform: DOMMatrix): ShapeProps;
+    /**
+     * Convert an SVG color into a Motion Canvas color.
+     * @param color - SVG color.
+     * @returns Motion Canvas color.
+     */
+    private static processSVGColor;
+    /**
+     * Get the final transformation matrix for the given SVG element.
+     * @param element - SVG element.
+     * @param parentTransform - The transformation matrix of the parent.
+     */
+    private static getElementTransformation;
+    private static parseLineCap;
+    private static parseLineJoin;
+    private static parseLineDash;
+    private static parseDashOffset;
+    private static parseOpacity;
+    /**
+     * Convert the SVG element's style to a Motion Canvas Shape properties.
+     * @param element - An SVG element whose style should be converted.
+     * @param inheritedStyle - The parent style that should be inherited.
+     */
+    private static getElementStyle;
+    /**
+     * Extract `SVGShapeData` list from the SVG element's children.
+     * This will not extract the current element's shape.
+     * @param element - An element whose children will be extracted.
+     * @param svgRoot - The SVG root ("svg" tag) of the element.
+     * @param parentTransform - The transformation matrix applied to the parent.
+     * @param inheritedStyle - The style of the current SVG `element` that the children should inherit.
+     */
+    private static extractGroupNodes;
+    /**
+     * Parse a number from an SVG element attribute.
+     * @param element - SVG element whose attribute will be parsed.
+     * @param name - The name of the attribute to parse.
+     * @returns a parsed number or `0` if the attribute is not defined.
+     */
+    private static parseNumberAttribute;
+    /**
+     * Extract `SVGShapeData` list from the SVG element.
+     * This will also recursively extract shapes from its children.
+     * @param child - An SVG element to extract.
+     * @param svgRoot - The SVG root ("svg" tag) of the element.
+     * @param parentTransform - The transformation matrix applied to the parent.
+     * @param inheritedStyle - The style of the parent SVG element that the element should inherit.
+     */
+    private static extractElementNodes;
+}
+//# sourceMappingURL=SVG.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SVG.d.ts","sourceRoot":"","sources":["../../src/lib/components/SVG.ts"],"names":[],"mappings":"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"}