@efxlab/motion-canvas-2d 4.0.0

package/lib/components/Camera.d.ts

@@ -0,0 +1,172 @@
+import { InterpolationFunction, PossibleVector2, Reference, SignalValue, SimpleSignal, ThreadGenerator, TimingFunction, Vector2 } from '@efxlab/motion-canvas-core';
+import { Curve } from './Curve';
+import { Node, NodeProps } from './Node';
+import { Rect, RectProps } from './Rect';
+export interface CameraProps extends NodeProps {
+    /**
+     * {@inheritDoc Camera.scene}
+     */
+    scene?: Node;
+    /**
+     * {@inheritDoc Camera.zoom}
+     */
+    zoom?: SignalValue<number>;
+}
+/**
+ * A node representing an orthographic camera.
+ *
+ * @preview
+ * ```tsx editor
+ * import {Camera, Circle, makeScene2D, Rect} from '@efxlab/motion-canvas-2d';
+ * import {all, createRef} from '@efxlab/motion-canvas-core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const camera = createRef<Camera>();
+ *   const rect = createRef<Rect>();
+ *   const circle = createRef<Circle>();
+ *
+ *   view.add(
+ *     <>
+ *       <Camera ref={camera}>
+ *         <Rect
+ *           ref={rect}
+ *           fill={'lightseagreen'}
+ *           size={100}
+ *           position={[100, -50]}
+ *         />
+ *         <Circle
+ *           ref={circle}
+ *           fill={'hotpink'}
+ *           size={120}
+ *           position={[-100, 50]}
+ *         />
+ *       </Camera>
+ *     </>,
+ *   );
+ *
+ *   yield* all(
+ *     camera().centerOn(rect(), 3),
+ *     camera().rotation(180, 3),
+ *     camera().zoom(1.8, 3),
+ *   );
+ *   yield* camera().centerOn(circle(), 2);
+ *   yield* camera().reset(1);
+ * });
+ * ```
+ */
+export declare class Camera extends Node {
+    /**
+     * The scene node that the camera is rendering.
+     */
+    readonly scene: SimpleSignal<Node, this>;
+    constructor({ children, ...props }: CameraProps);
+    /**
+     * The zoom level of the camera.
+     *
+     * @defaultValue 1
+     */
+    readonly zoom: SimpleSignal<number, this>;
+    protected getZoom(): number;
+    protected setZoom(value: SignalValue<number>): void;
+    protected getDefaultZoom(): SignalValue<number> | undefined;
+    protected tweenZoom(value: SignalValue<number>, duration: number, timingFunction: TimingFunction, interpolationFunction: InterpolationFunction<number>): ThreadGenerator;
+    /**
+     * Resets the camera's position, rotation and zoom level to their original
+     * values.
+     *
+     * @param duration - The duration of the tween.
+     * @param timingFunction - The timing function to use for the tween.
+     */
+    reset(duration: number, timingFunction?: TimingFunction): ThreadGenerator;
+    /**
+     * Centers the camera on the specified position without changing the zoom
+     * level.
+     *
+     * @param position - The position to center the camera on.
+     * @param duration - The duration of the tween.
+     * @param timingFunction - The timing function to use for the tween.
+     * @param interpolationFunction - The interpolation function to use for the
+     * tween.
+     */
+    centerOn(position: PossibleVector2, duration: number, timingFunction?: TimingFunction, interpolationFunction?: InterpolationFunction<Vector2>): ThreadGenerator;
+    /**
+     * Centers the camera on the specified node without changing the zoom level.
+     *
+     * @param node - The node to center the camera on.
+     * @param duration - The duration of the tween.
+     * @param timingFunction - The timing function to use for the tween.
+     * @param interpolationFunction - The interpolation function to use for the
+     * tween.
+     */
+    centerOn(node: Node, duration: number, timingFunction?: TimingFunction, interpolationFunction?: InterpolationFunction<Vector2>): ThreadGenerator;
+    /**
+     * Makes the camera follow a path specified by the provided curve.
+     *
+     * @remarks
+     * This will not change the orientation of the camera. To make the camera
+     * orient itself along the curve, use {@link followCurveWithRotation} or
+     * {@link followCurveWithRotationReverse}.
+     *
+     * If you want to follow the curve in reverse, use {@link followCurveReverse}.
+     *
+     * @param curve - The curve to follow.
+     * @param duration - The duration of the tween.
+     * @param timing - The timing function to use for the tween.
+     */
+    followCurve(curve: Curve, duration: number, timing?: TimingFunction): ThreadGenerator;
+    /**
+     * Makes the camera follow a path specified by the provided curve in reverse.
+     *
+     * @remarks
+     * This will not change the orientation of the camera. To make the camera
+     * orient itself along the curve, use {@link followCurveWithRotation} or
+     * {@link followCurveWithRotationReverse}.
+     *
+     * If you want to follow the curve forward, use {@link followCurve}.
+     *
+     * @param curve - The curve to follow.
+     * @param duration - The duration of the tween.
+     * @param timing - The timing function to use for the tween.
+     */
+    followCurveReverse(curve: Curve, duration: number, timing?: TimingFunction): Generator<void | ThreadGenerator | Promise<any> | import("@efxlab/motion-canvas-core").Promisable<any>, void, any>;
+    /**
+     * Makes the camera follow a path specified by the provided curve while
+     * pointing the camera the direction of the tangent.
+     *
+     * @remarks
+     * To make the camera follow the curve without changing its orientation, use
+     * {@link followCurve} or {@link followCurveReverse}.
+     *
+     * If you want to follow the curve in reverse, use
+     * {@link followCurveWithRotationReverse}.
+     *
+     * @param curve - The curve to follow.
+     * @param duration - The duration of the tween.
+     * @param timing - The timing function to use for the tween.
+     */
+    followCurveWithRotation(curve: Curve, duration: number, timing?: TimingFunction): Generator<void | ThreadGenerator | Promise<any> | import("@efxlab/motion-canvas-core").Promisable<any>, void, any>;
+    /**
+     * Makes the camera follow a path specified by the provided curve in reverse
+     * while pointing the camera the direction of the tangent.
+     *
+     * @remarks
+     * To make the camera follow the curve without changing its orientation, use
+     * {@link followCurve} or {@link followCurveReverse}.
+     *
+     * If you want to follow the curve forward, use
+     * {@link followCurveWithRotation}.
+     *
+     * @param curve - The curve to follow.
+     * @param duration - The duration of the tween.
+     * @param timing - The timing function to use for the tween.
+     */
+    followCurveWithRotationReverse(curve: Curve, duration: number, timing?: TimingFunction): Generator<void | ThreadGenerator | Promise<any> | import("@efxlab/motion-canvas-core").Promisable<any>, void, any>;
+    protected transformContext(context: CanvasRenderingContext2D): void;
+    hit(position: Vector2): Node | null;
+    protected drawChildren(context: CanvasRenderingContext2D): void;
+    static Stage({ children, cameraRef, scene, ...props }: RectProps & {
+        cameraRef?: Reference<Camera>;
+        scene?: Node;
+    }): Rect;
+}
+//# sourceMappingURL=Camera.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Camera.d.ts","sourceRoot":"","sources":["../../src/lib/components/Camera.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,qBAAqB,EAErB,eAAe,EACf,SAAS,EACT,WAAW,EACX,YAAY,EAEZ,eAAe,EACf,cAAc,EAGd,OAAO,EACR,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAC,IAAI,EAAE,SAAS,EAAC,MAAM,QAAQ,CAAC;AACvC,OAAO,EAAC,IAAI,EAAE,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEvC,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C;;OAEG;IACH,KAAK,CAAC,EAAE,IAAI,CAAC;IAEb;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,qBAAa,MAAO,SAAQ,IAAI;IAC9B;;OAEG;IACH,SACwB,KAAK,EAAE,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;gBAErC,EAAC,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,WAAW;IAYpD;;;;OAIG;IACH,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;IAI5C,SAAS,CAAC,cAAc;IAIxB,SAAS,CAAE,SAAS,CAClB,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,EAC1B,QAAQ,EAAE,MAAM,EAChB,cAAc,EAAE,cAAc,EAC9B,qBAAqB,EAAE,qBAAqB,CAAC,MAAM,CAAC,GACnD,eAAe;IASlB;;;;;;OAMG;IAEK,KAAK,CACX,QAAQ,EAAE,MAAM,EAChB,cAAc,GAAE,cAA+B,GAC9C,eAAe;IAQlB;;;;;;;;;OASG;IACI,QAAQ,CACb,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,MAAM,EAChB,cAAc,CAAC,EAAE,cAAc,EAC/B,qBAAqB,CAAC,EAAE,qBAAqB,CAAC,OAAO,CAAC,GACrD,eAAe;IAClB;;;;;;;;OAQG;IACI,QAAQ,CACb,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,MAAM,EAChB,cAAc,CAAC,EAAE,cAAc,EAC/B,qBAAqB,CAAC,EAAE,qBAAqB,CAAC,OAAO,CAAC,GACrD,eAAe;IAiBlB;;;;;;;;;;;;;OAaG;IAEK,WAAW,CACjB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,MAAM,EAChB,MAAM,GAAE,cAA+B,GACtC,eAAe;IAWlB;;;;;;;;;;;;;OAaG;IAEK,kBAAkB,CACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,MAAM,EAChB,MAAM,GAAE,cAA+B;IAYzC;;;;;;;;;;;;;;OAcG;IAEK,uBAAuB,CAC7B,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,MAAM,EAChB,MAAM,GAAE,cAA+B;IAazC;;;;;;;;;;;;;;OAcG;IAEK,8BAA8B,CACpC,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,MAAM,EAChB,MAAM,GAAE,cAA+B;cAatB,gBAAgB,CAAC,OAAO,EAAE,wBAAwB;IAYrD,GAAG,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI;cAKhC,YAAY,CAAC,OAAO,EAAE,wBAAwB;WAKnD,KAAK,CAAC,EAClB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,SAAS,GAAG;QAAC,SAAS,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;QAAC,KAAK,CAAC,EAAE,IAAI,CAAA;KAAC;CAW7D"}

package/lib/components/Camera.js

@@ -0,0 +1,239 @@
+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 { all, DEFAULT, easeInOutCubic, modify, threadable, tween, unwrap, Vector2, } from '@efxlab/motion-canvas-core';
+import { cloneable, signal } from '../decorators';
+import { Node } from './Node';
+import { Rect } from './Rect';
+/**
+ * A node representing an orthographic camera.
+ *
+ * @preview
+ * ```tsx editor
+ * import {Camera, Circle, makeScene2D, Rect} from '@efxlab/motion-canvas-2d';
+ * import {all, createRef} from '@efxlab/motion-canvas-core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const camera = createRef<Camera>();
+ *   const rect = createRef<Rect>();
+ *   const circle = createRef<Circle>();
+ *
+ *   view.add(
+ *     <>
+ *       <Camera ref={camera}>
+ *         <Rect
+ *           ref={rect}
+ *           fill={'lightseagreen'}
+ *           size={100}
+ *           position={[100, -50]}
+ *         />
+ *         <Circle
+ *           ref={circle}
+ *           fill={'hotpink'}
+ *           size={120}
+ *           position={[-100, 50]}
+ *         />
+ *       </Camera>
+ *     </>,
+ *   );
+ *
+ *   yield* all(
+ *     camera().centerOn(rect(), 3),
+ *     camera().rotation(180, 3),
+ *     camera().zoom(1.8, 3),
+ *   );
+ *   yield* camera().centerOn(circle(), 2);
+ *   yield* camera().reset(1);
+ * });
+ * ```
+ */
+export class Camera extends Node {
+    constructor({ children, ...props }) {
+        super(props);
+        if (!this.scene()) {
+            this.scene(new Node({}));
+        }
+        if (children) {
+            this.scene().add(children);
+        }
+    }
+    getZoom() {
+        return 1 / this.scale.x();
+    }
+    setZoom(value) {
+        this.scale(modify(value, unwrapped => 1 / unwrapped));
+    }
+    getDefaultZoom() {
+        return this.scale.x.context.getInitial();
+    }
+    *tweenZoom(value, duration, timingFunction, interpolationFunction) {
+        const from = this.scale.x();
+        yield* tween(duration, v => {
+            this.zoom(1 / interpolationFunction(from, 1 / unwrap(value), timingFunction(v)));
+        });
+    }
+    /**
+     * Resets the camera's position, rotation and zoom level to their original
+     * values.
+     *
+     * @param duration - The duration of the tween.
+     * @param timingFunction - The timing function to use for the tween.
+     */
+    *reset(duration, timingFunction = easeInOutCubic) {
+        yield* all(this.position(DEFAULT, duration, timingFunction), this.zoom(DEFAULT, duration, timingFunction), this.rotation(DEFAULT, duration, timingFunction));
+    }
+    *centerOn(positionOrNode, duration, timing = easeInOutCubic, interpolationFunction = Vector2.lerp) {
+        const position = positionOrNode instanceof Node
+            ? positionOrNode
+                .absolutePosition()
+                .transformAsPoint(this.scene().worldToLocal())
+            : positionOrNode;
+        yield* this.position(position, duration, timing, interpolationFunction);
+    }
+    /**
+     * Makes the camera follow a path specified by the provided curve.
+     *
+     * @remarks
+     * This will not change the orientation of the camera. To make the camera
+     * orient itself along the curve, use {@link followCurveWithRotation} or
+     * {@link followCurveWithRotationReverse}.
+     *
+     * If you want to follow the curve in reverse, use {@link followCurveReverse}.
+     *
+     * @param curve - The curve to follow.
+     * @param duration - The duration of the tween.
+     * @param timing - The timing function to use for the tween.
+     */
+    *followCurve(curve, duration, timing = easeInOutCubic) {
+        yield* tween(duration, value => {
+            const t = timing(value);
+            const point = curve
+                .getPointAtPercentage(t)
+                .position.transformAsPoint(curve.localToWorld());
+            this.position(point);
+        });
+    }
+    /**
+     * Makes the camera follow a path specified by the provided curve in reverse.
+     *
+     * @remarks
+     * This will not change the orientation of the camera. To make the camera
+     * orient itself along the curve, use {@link followCurveWithRotation} or
+     * {@link followCurveWithRotationReverse}.
+     *
+     * If you want to follow the curve forward, use {@link followCurve}.
+     *
+     * @param curve - The curve to follow.
+     * @param duration - The duration of the tween.
+     * @param timing - The timing function to use for the tween.
+     */
+    *followCurveReverse(curve, duration, timing = easeInOutCubic) {
+        yield* tween(duration, value => {
+            const t = 1 - timing(value);
+            const point = curve
+                .getPointAtPercentage(t)
+                .position.transformAsPoint(curve.localToWorld());
+            this.position(point);
+        });
+    }
+    /**
+     * Makes the camera follow a path specified by the provided curve while
+     * pointing the camera the direction of the tangent.
+     *
+     * @remarks
+     * To make the camera follow the curve without changing its orientation, use
+     * {@link followCurve} or {@link followCurveReverse}.
+     *
+     * If you want to follow the curve in reverse, use
+     * {@link followCurveWithRotationReverse}.
+     *
+     * @param curve - The curve to follow.
+     * @param duration - The duration of the tween.
+     * @param timing - The timing function to use for the tween.
+     */
+    *followCurveWithRotation(curve, duration, timing = easeInOutCubic) {
+        yield* tween(duration, value => {
+            const t = timing(value);
+            const { position, normal } = curve.getPointAtPercentage(t);
+            const point = position.transformAsPoint(curve.localToWorld());
+            const angle = normal.flipped.perpendicular.degrees;
+            this.position(point);
+            this.rotation(angle);
+        });
+    }
+    /**
+     * Makes the camera follow a path specified by the provided curve in reverse
+     * while pointing the camera the direction of the tangent.
+     *
+     * @remarks
+     * To make the camera follow the curve without changing its orientation, use
+     * {@link followCurve} or {@link followCurveReverse}.
+     *
+     * If you want to follow the curve forward, use
+     * {@link followCurveWithRotation}.
+     *
+     * @param curve - The curve to follow.
+     * @param duration - The duration of the tween.
+     * @param timing - The timing function to use for the tween.
+     */
+    *followCurveWithRotationReverse(curve, duration, timing = easeInOutCubic) {
+        yield* tween(duration, value => {
+            const t = 1 - timing(value);
+            const { position, normal } = curve.getPointAtPercentage(t);
+            const point = position.transformAsPoint(curve.localToWorld());
+            const angle = normal.flipped.perpendicular.degrees;
+            this.position(point);
+            this.rotation(angle);
+        });
+    }
+    transformContext(context) {
+        const matrix = this.localToParent().inverse();
+        context.transform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
+    }
+    hit(position) {
+        const local = position.transformAsPoint(this.localToParent());
+        return this.scene().hit(local);
+    }
+    drawChildren(context) {
+        this.scene().drawChildren(context);
+    }
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    static Stage({ children, cameraRef, scene, ...props }) {
+        const camera = new Camera({ scene: scene, children });
+        cameraRef?.(camera);
+        return new Rect({
+            clip: true,
+            ...props,
+            children: [camera],
+        });
+    }
+}
+__decorate([
+    signal()
+], Camera.prototype, "scene", void 0);
+__decorate([
+    cloneable(false),
+    signal()
+], Camera.prototype, "zoom", void 0);
+__decorate([
+    threadable()
+], Camera.prototype, "reset", null);
+__decorate([
+    threadable()
+], Camera.prototype, "centerOn", null);
+__decorate([
+    threadable()
+], Camera.prototype, "followCurve", null);
+__decorate([
+    threadable()
+], Camera.prototype, "followCurveReverse", null);
+__decorate([
+    threadable()
+], Camera.prototype, "followCurveWithRotation", null);
+__decorate([
+    threadable()
+], Camera.prototype, "followCurveWithRotationReverse", null);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2FtZXJhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL0NhbWVyYS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7QUFBQSxPQUFPLEVBQ0wsR0FBRyxFQUNILE9BQU8sRUFDUCxjQUFjLEVBRWQsTUFBTSxFQUtOLFVBQVUsRUFHVixLQUFLLEVBQ0wsTUFBTSxFQUNOLE9BQU8sR0FDUixNQUFNLDRCQUE0QixDQUFDO0FBQ3BDLE9BQU8sRUFBQyxTQUFTLEVBQUUsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBRWhELE9BQU8sRUFBQyxJQUFJLEVBQVksTUFBTSxRQUFRLENBQUM7QUFDdkMsT0FBTyxFQUFDLElBQUksRUFBWSxNQUFNLFFBQVEsQ0FBQztBQWN2Qzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0F5Q0c7QUFDSCxNQUFNLE9BQU8sTUFBTyxTQUFRLElBQUk7SUFPOUIsWUFBbUIsRUFBQyxRQUFRLEVBQUUsR0FBRyxLQUFLLEVBQWM7UUFDbEQsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBRWIsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDO1lBQ2xCLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztRQUMzQixDQUFDO1FBRUQsSUFBSSxRQUFRLEVBQUUsQ0FBQztZQUNiLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxHQUFHLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDN0IsQ0FBQztJQUNILENBQUM7SUFXUyxPQUFPO1FBQ2YsT0FBTyxDQUFDLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBRVMsT0FBTyxDQUFDLEtBQTBCO1FBQzFDLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLEtBQUssRUFBRSxTQUFTLENBQUMsRUFB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

package/lib/components/Circle.d.ts

@@ -0,0 +1,191 @@
+import { BBox, SerializedVector2, SignalValue, SimpleSignal } from '@efxlab/motion-canvas-core';
+import { CurveProfile } from '../curves';
+import { DesiredLength } from '../partials';
+import { Curve, CurveProps } from './Curve';
+export interface CircleProps extends CurveProps {
+    /**
+     * {@inheritDoc Circle.startAngle}
+     */
+    startAngle?: SignalValue<number>;
+    /**
+     * {@inheritDoc Circle.endAngle}
+     */
+    endAngle?: SignalValue<number>;
+    /**
+     * {@inheritDoc Circle.counterclockwise}
+     */
+    counterclockwise?: SignalValue<boolean>;
+    /**
+     * {@inheritDoc Circle.closed}
+     */
+    closed?: SignalValue<boolean>;
+}
+/**
+ * A node for drawing circular shapes.
+ *
+ * @remarks
+ * This node can be used to render shapes such as: circle, ellipse, arc, and
+ * sector (pie chart).
+ *
+ * @preview
+ * ```tsx editor
+ * // snippet Simple circle
+ * import {makeScene2D, Circle} from '@efxlab/motion-canvas-2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Circle
+ *       size={160}
+ *       fill={'lightseagreen'}
+ *     />
+ *    );
+ * });
+ *
+ * // snippet Ellipse
+ * import {makeScene2D, Circle} from '@efxlab/motion-canvas-2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Circle
+ *       width={160}
+ *       height={80}
+ *       fill={'lightseagreen'}
+ *     />
+ *   );
+ * });
+ *
+ * // snippet Sector (pie chart):
+ * import {makeScene2D, Circle} from '@efxlab/motion-canvas-2d';
+ * import {createRef} from '@efxlab/motion-canvas-core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const ref = createRef<Circle>();
+ *   view.add(
+ *     <Circle
+ *       ref={ref}
+ *       size={160}
+ *       fill={'lightseagreen'}
+ *       startAngle={30}
+ *       endAngle={270}
+ *       closed={true}
+ *     />
+ *   );
+ *
+ *   yield* ref().startAngle(270, 2).to(30, 2);
+ * });
+ *
+ * // snippet Arc:
+ * import {makeScene2D, Circle} from '@efxlab/motion-canvas-2d';
+ * import {createRef} from '@efxlab/motion-canvas-core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const ref = createRef<Circle>();
+ *   view.add(
+ *     <Circle
+ *       ref={ref}
+ *       size={160}
+ *       stroke={'lightseagreen'}
+ *       lineWidth={8}
+ *       startAngle={-90}
+ *       endAngle={90}
+ *     />
+ *   );
+ *
+ *   yield* ref().startAngle(-270, 2).to(-90, 2);
+ * });
+ *
+ * // snippet Curve properties:
+ * import {makeScene2D, Circle} from '@efxlab/motion-canvas-2d';
+ * import {all, createRef, easeInCubic, easeOutCubic} from '@efxlab/motion-canvas-core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const ref = createRef<Circle>();
+ *   view.add(
+ *     <Circle
+ *       ref={ref}
+ *       size={160}
+ *       stroke={'lightseagreen'}
+ *       lineWidth={8}
+ *       endAngle={270}
+ *       endArrow
+ *     />,
+ *   );
+ *
+ *   yield* all(ref().start(1, 1), ref().rotation(180, 1, easeInCubic));
+ *   ref().start(0).end(0);
+ *   yield* all(ref().end(1, 1), ref().rotation(360, 1, easeOutCubic));
+ * });
+ * ```
+ */
+export declare class Circle extends Curve {
+    /**
+     * The starting angle in degrees for the circle sector.
+     *
+     * @remarks
+     * This property can be used together with {@link startAngle} to turn this
+     * circle into a sector (when using fill) or an arc (when using stroke).
+     *
+     * @defaultValue 0
+     */
+    readonly startAngle: SimpleSignal<number, this>;
+    /**
+     * The ending angle in degrees for the circle sector.
+     *
+     * @remarks
+     * This property can be used together with {@link endAngle} to turn this
+     * circle into a sector (when using fill) or an arc (when using stroke).
+     *
+     * @defaultValue 360
+     */
+    readonly endAngle: SimpleSignal<number, this>;
+    /**
+     * Whether the circle sector should be drawn counterclockwise.
+     *
+     * @remarks
+     * By default, the circle begins at {@link startAngle} and is drawn clockwise
+     * until reaching {@link endAngle}. Setting this property to true will reverse
+     * this direction.
+     */
+    readonly counterclockwise: SimpleSignal<boolean, this>;
+    /**
+     * Whether the path of this circle should be closed.
+     *
+     * @remarks
+     * When set to true, the path of this circle will start and end at the center.
+     * This can be used to fine-tune how sectors are rendered.
+     *
+     * @example
+     * A closed circle will look like a pie chart:
+     * ```tsx
+     * <Circle
+     *   size={300}
+     *   fill={'lightseagreen'}
+     *   endAngle={230}
+     *   closed={true}
+     * />
+     * ```
+     * An open one will look like an arc:
+     * ```tsx
+     * <Circle
+     *   size={300}
+     *   stroke={'lightseagreen'}
+     *   lineWidth={8}
+     *   endAngle={230}
+     *   closed={false}
+     * />
+     * ```
+     *
+     * @defaultValue false
+     */
+    readonly closed: SimpleSignal<boolean, this>;
+    constructor(props: CircleProps);
+    profile(): CurveProfile;
+    protected desiredSize(): SerializedVector2<DesiredLength>;
+    protected offsetComputedLayout(box: BBox): BBox;
+    protected childrenBBox(): BBox;
+    protected getPath(): Path2D;
+    protected getRipplePath(): Path2D;
+    protected getCacheBBox(): BBox;
+    protected createPath(expand?: number): Path2D;
+}
+//# sourceMappingURL=Circle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Circle.d.ts","sourceRoot":"","sources":["../../src/lib/components/Circle.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EAEJ,iBAAiB,EACjB,WAAW,EACX,YAAY,EACb,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAC,YAAY,EAAmB,MAAM,WAAW,CAAC;AAEzD,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAC,KAAK,EAAE,UAAU,EAAC,MAAM,SAAS,CAAC;AAE1C,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B;;OAEG;IACH,gBAAgB,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IACxC;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAC/B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgGG;AACH,qBACa,MAAO,SAAQ,KAAK;IAC/B;;;;;;;;OAQG;IACH,SAEwB,UAAU,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAE/D;;;;;;;;OAQG;IACH,SAEwB,QAAQ,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAE7D;;;;;;;OAOG;IACH,SAEwB,gBAAgB,EAAE,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAEtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6BG;IACH,SAAwB,MAAM,EAAE,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;gBAEzC,KAAK,EAAE,WAAW;IAK9B,OAAO,IAAI,YAAY;cAUX,WAAW,IAAI,iBAAiB,CAAC,aAAa,CAAC;cAO/C,oBAAoB,CAAC,GAAG,EAAE,IAAI,GAAG,IAAI;cAIrC,YAAY,IAAI,IAAI;cAIpB,OAAO,IAAI,MAAM;cAQjB,aAAa,IAAI,MAAM;cAIvB,YAAY,IAAI,IAAI;IAIvC,SAAS,CAAC,UAAU,CAAC,MAAM,SAAI;CAsBhC"}