@revideo/2d 0.1.0

package/lib/components/AudioTest.js

@@ -0,0 +1,283 @@
+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 AudioTest_1;
+import { BBox, DependencyContext, PlaybackState, clamp, isReactive, useLogger, useThread, } from '@revideo/core';
+import { computed, initial, nodeName, signal } from '../decorators';
+import { Rect } from './Rect';
+let AudioTest = AudioTest_1 = class AudioTest extends Rect {
+    constructor({ play, ...props }) {
+        super(props);
+        this.lastTime = -1;
+        if (play) {
+            this.play();
+        }
+    }
+    isPlaying() {
+        return this.playing();
+    }
+    getCurrentTime() {
+        return this.clampTime(this.time());
+    }
+    getDuration() {
+        return this.video().duration;
+    }
+    desiredSize() {
+        const custom = super.desiredSize();
+        if (custom.x === null && custom.y === null) {
+            const image = this.video();
+            return {
+                x: 300,
+                y: 300,
+            };
+        }
+        return custom;
+    }
+    completion() {
+        console.log("completion of video");
+        return this.clampTime(this.time()) / this.video().duration;
+    }
+    video() {
+        const src = this.src();
+        console.log("src video", src);
+        const key = `${this.key}/${src}`;
+        let video = AudioTest_1.pool[key];
+        if (!video) {
+            console.log("before creating video element");
+            video = document.createElement('video');
+            document.body.appendChild(video);
+            video.addEventListener('ended', () => {
+                console.log('Video ended, triggered by event listener haha');
+                this.playing(false); // Update the playing state
+                // Additional logic for when audio ends
+            });
+            console.log("after creating video element");
+            video.src = src;
+            AudioTest_1.pool[key] = video;
+        }
+        if (video.readyState < 2) {
+            DependencyContext.collectPromise(new Promise(resolve => {
+                const listener = () => {
+                    resolve();
+                    video.removeEventListener('canplay', listener);
+                };
+                video.addEventListener('canplay', listener);
+            }));
+        }
+        return video;
+    }
+    seekedVideo() {
+        console.log("in seekedVideo");
+        const video = this.video();
+        const time = this.clampTime(this.time());
+        video.playbackRate = this.playbackRate();
+        if (!video.paused) {
+            video.pause();
+        }
+        if (this.lastTime === time) {
+            return video;
+        }
+        this.setCurrentTime(time);
+        return video;
+    }
+    fastSeekedVideo() {
+        const video = this.video();
+        const time = this.clampTime(this.time());
+        video.playbackRate = this.playbackRate();
+        if (this.lastTime === time) {
+            return video;
+        }
+        console.log("calculating if playing:", this.playing(), time < video.duration, video.playbackRate);
+        console.log("time", time);
+        console.log("this.duration", video.duration);
+        if (time < video.duration) {
+            console.log("oh shit, we're over tiem!");
+            this.pause();
+            this.remove();
+        }
+        const playing = this.playing() && time < video.duration && video.playbackRate > 0;
+        if (playing) {
+            if (video.paused) {
+                DependencyContext.collectPromise(video.play());
+            }
+        }
+        else {
+            if (!video.paused) {
+                video.pause();
+            }
+        }
+        console.log("video difference", Math.abs(video.currentTime - time) > 0.3);
+        if (Math.abs(video.currentTime - time) > 0.3) {
+            this.setCurrentTime(time);
+        }
+        else if (!playing) {
+            video.currentTime = time;
+        }
+        return video;
+    }
+    draw(context) {
+        console.log("drawing video");
+        this.drawShape(context);
+        const alpha = this.alpha();
+        if (alpha > 0) {
+            const playbackState = this.view().playbackState();
+            console.log("in video playbackState", playbackState);
+            const video = playbackState === PlaybackState.Playing ||
+                playbackState === PlaybackState.Presenting
+                ? this.fastSeekedVideo()
+                : this.seekedVideo();
+            console.log("in video video", video);
+            const box = BBox.fromSizeCentered(this.computedSize());
+            context.save();
+            context.clip(this.getPath());
+            if (alpha < 1) {
+                context.globalAlpha *= alpha;
+            }
+            context.imageSmoothingEnabled = this.smoothing();
+            //drawImage(context, video, box);
+            context.restore();
+        }
+        console.log("this.clip() video", this.clip());
+        if (this.clip()) {
+            context.clip(this.getPath());
+        }
+        this.drawChildren(context);
+    }
+    applyFlex() {
+        super.applyFlex();
+        const video = this.video();
+        this.element.style.aspectRatio = (this.ratio() ?? 300 / 300).toString();
+    }
+    setCurrentTime(value) {
+        console.log("setcurrenttime called on video with value", value);
+        const video = this.video();
+        console.log("setcurrenttime this.video", video);
+        console.log("setcurrenttime this.video.readyState", video.readyState);
+        if (video.readyState < 2) {
+            console.log("some fucking failure haha bruder");
+            return;
+        }
+        video.currentTime = value;
+        this.lastTime = value;
+        if (video.seeking) {
+            DependencyContext.collectPromise(new Promise(resolve => {
+                const listener = () => {
+                    resolve();
+                    video.removeEventListener('seeked', listener);
+                };
+                video.addEventListener('seeked', listener);
+            }));
+        }
+    }
+    setPlaybackRate(playbackRate) {
+        let value;
+        if (isReactive(playbackRate)) {
+            value = playbackRate();
+            useLogger().warn({
+                message: 'Invalid value set as the playback rate',
+                remarks: "<p>The <code>playbackRate</code> of a <code>Video</code> cannot be reactive.</p>\n<p>Make sure to use a concrete value and not a function:</p>\n<pre class=\"wrong\"><code class=\"language-ts\">video.<span class=\"hljs-title function_\">playbackRate</span>(<span class=\"hljs-function\">() =&gt;</span> <span class=\"hljs-number\">7</span>);</code></pre><pre class=\"correct\"><code class=\"language-ts\">video.<span class=\"hljs-title function_\">playbackRate</span>(<span class=\"hljs-number\">7</span>);</code></pre><p>If you&#39;re using a signal, extract its value before passing it to the property:</p>\n<pre class=\"wrong\"><code class=\"language-ts\">video.<span class=\"hljs-title function_\">playbackRate</span>(mySignal);</code></pre><pre class=\"correct\"><code class=\"language-ts\">video.<span class=\"hljs-title function_\">playbackRate</span>(<span class=\"hljs-title function_\">mySignal</span>());</code></pre>",
+                inspect: this.key,
+                stack: new Error().stack,
+            });
+        }
+        else {
+            value = playbackRate;
+        }
+        this.playbackRate.context.setter(value);
+        if (this.playing()) {
+            if (value === 0) {
+                this.pause();
+            }
+            else {
+                const time = useThread().time;
+                const start = time();
+                const offset = this.time();
+                this.time(() => this.clampTime(offset + (time() - start) * value));
+            }
+        }
+    }
+    play() {
+        const time = useThread().time;
+        const start = time();
+        const offset = this.time();
+        const playbackRate = this.playbackRate();
+        this.playing(true);
+        this.time(() => this.clampTime(offset + (time() - start) * playbackRate));
+    }
+    pause() {
+        this.playing(false);
+        this.time.save();
+        this.video().pause();
+    }
+    seek(time) {
+        console.log("seek called on video");
+        const playing = this.playing();
+        this.time(this.clampTime(time));
+        if (playing) {
+            this.play();
+        }
+        else {
+            this.pause();
+        }
+    }
+    clampTime(time) {
+        const duration = this.video().duration;
+        if (this.loop()) {
+            time %= duration;
+        }
+        console.log(`in clamptime (VIDEO), calling clamp(0, ${duration}, ${time}`);
+        return clamp(0, duration, time);
+    }
+    collectAsyncResources() {
+        super.collectAsyncResources();
+        this.seekedVideo();
+    }
+};
+AudioTest.pool = {};
+__decorate([
+    signal()
+], AudioTest.prototype, "src", void 0);
+__decorate([
+    initial(1),
+    signal()
+], AudioTest.prototype, "alpha", void 0);
+__decorate([
+    initial(true),
+    signal()
+], AudioTest.prototype, "smoothing", void 0);
+__decorate([
+    initial(false),
+    signal()
+], AudioTest.prototype, "loop", void 0);
+__decorate([
+    initial(1),
+    signal()
+], AudioTest.prototype, "playbackRate", void 0);
+__decorate([
+    initial(0),
+    signal()
+], AudioTest.prototype, "time", void 0);
+__decorate([
+    initial(false),
+    signal()
+], AudioTest.prototype, "playing", void 0);
+__decorate([
+    computed()
+], AudioTest.prototype, "completion", null);
+__decorate([
+    computed()
+], AudioTest.prototype, "video", null);
+__decorate([
+    computed()
+], AudioTest.prototype, "seekedVideo", null);
+__decorate([
+    computed()
+], AudioTest.prototype, "fastSeekedVideo", null);
+AudioTest = AudioTest_1 = __decorate([
+    nodeName('AudioTest')
+], AudioTest);
+export { AudioTest };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQXVkaW9UZXN0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL0F1ZGlvVGVzdC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBQUEsT0FBTyxFQUNILElBQUksRUFDSixpQkFBaUIsRUFDakIsYUFBYSxFQUliLEtBQUssRUFDTCxVQUFVLEVBQ1YsU0FBUyxFQUNULFNBQVMsR0FDVixNQUFNLHFCQUFxQixDQUFDO0FBQzdCLE9BQU8sRUFBQyxRQUFRLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFHbEUsT0FBTyxFQUFDLElBQUksRUFBWSxNQUFNLFFBQVEsQ0FBQztBQWdDaEMsSUFBTSxTQUFTLGlCQUFmLE1BQU0sU0FBVSxTQUFRLElBQUk7SUF1RWpDLFlBQW1CLEVBQUMsSUFBSSxFQUFFLEdBQUcsS0FBSyxFQUFpQjtRQUNqRCxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFIUCxhQUFRLEdBQUcsQ0FBQyxDQUFDLENBQUM7UUFJcEIsSUFBSSxJQUFJLEVBQUU7WUFDUixJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7U0FDYjtJQUNILENBQUM7SUFFTSxTQUFTO1FBQ2QsT0FBTyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDeEIsQ0FBQztJQUVNLGNBQWM7UUFDbkIsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDO0lBQ3JDLENBQUM7SUFFTSxXQUFXO1FBQ2hCLE9BQU8sSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLFFBQVEsQ0FBQztJQUMvQixDQUFDO0lBRWtCLFdBQVc7UUFDNUIsTUFBTSxNQUFNLEdBQUcsS0FBSyxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ25DLElBQUksTUFBTSxDQUFDLENBQUMsS0FBSyxJQUFJLElBQUksTUFBTSxDQUFDLENBQUMsS0FBSyxJQUFJLEVBQUU7WUFD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

package/lib/components/Bezier.d.ts

@@ -0,0 +1,22 @@
+import { BBox, SerializedVector2, Vector2 } from '@revideo/core';
+import { CurveProfile } from '../curves';
+import { PolynomialSegment } from '../curves/PolynomialSegment';
+import { DesiredLength } from '../partials';
+import { Curve } from './Curve';
+export interface BezierOverlayInfo {
+    curve: Path2D;
+    handleLines: Path2D;
+    controlPoints: Vector2[];
+    startPoint: Vector2;
+    endPoint: Vector2;
+}
+export declare abstract class Bezier extends Curve {
+    profile(): CurveProfile;
+    protected abstract segment(): PolynomialSegment;
+    protected abstract overlayInfo(matrix: DOMMatrix): BezierOverlayInfo;
+    protected childrenBBox(): BBox;
+    protected desiredSize(): SerializedVector2<DesiredLength>;
+    protected offsetComputedLayout(box: BBox): BBox;
+    drawOverlay(context: CanvasRenderingContext2D, matrix: DOMMatrix): void;
+}
+//# sourceMappingURL=Bezier.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Bezier.d.ts","sourceRoot":"","sources":["../../src/lib/components/Bezier.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAE,iBAAiB,EAAE,OAAO,EAAC,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAC,YAAY,EAAC,MAAM,WAAW,CAAC;AACvC,OAAO,EAAC,iBAAiB,EAAC,MAAM,6BAA6B,CAAC;AAE9D,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAE9B,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,OAAO,EAAE,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,8BAAsB,MAAO,SAAQ,KAAK;IACxB,OAAO,IAAI,YAAY;IASvC,SAAS,CAAC,QAAQ,CAAC,OAAO,IAAI,iBAAiB;IAE/C,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,MAAM,EAAE,SAAS,GAAG,iBAAiB;IAGpE,SAAS,CAAC,YAAY,IAAI,IAAI;cAIX,WAAW,IAAI,iBAAiB,CAAC,aAAa,CAAC;cAI/C,oBAAoB,CAAC,GAAG,EAAE,IAAI,GAAG,IAAI;IAKxC,WAAW,CACzB,OAAO,EAAE,wBAAwB,EACjC,MAAM,EAAE,SAAS;CAwDpB"}

package/lib/components/Bezier.js

@@ -0,0 +1,80 @@
+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 '@revideo/core';
+import { computed } from '../decorators';
+import { arc, drawLine, drawPivot, moveTo } from '../utils';
+import { Curve } from './Curve';
+export class Bezier extends Curve {
+    profile() {
+        const segment = this.segment();
+        return {
+            segments: [segment],
+            arcLength: segment.arcLength,
+            minSin: 0,
+        };
+    }
+    childrenBBox() {
+        return BBox.fromPoints(...this.segment().points);
+    }
+    desiredSize() {
+        return this.segment().getBBox().size;
+    }
+    offsetComputedLayout(box) {
+        box.position = box.position.sub(this.segment().getBBox().center);
+        return box;
+    }
+    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 overlayInfo = this.overlayInfo(matrix);
+        context.lineWidth = 1;
+        context.strokeStyle = 'white';
+        context.fillStyle = 'white';
+        // Draw the curve itself first so everything else gets drawn on top of it
+        context.stroke(overlayInfo.curve);
+        context.fillStyle = 'white';
+        context.globalAlpha = 0.5;
+        context.beginPath();
+        context.stroke(overlayInfo.handleLines);
+        context.globalAlpha = 1;
+        context.lineWidth = 2;
+        // Draw start and end points
+        for (const point of [overlayInfo.startPoint, overlayInfo.endPoint]) {
+            moveTo(context, point);
+            context.beginPath();
+            arc(context, point, 4);
+            context.closePath();
+            context.stroke();
+            context.fill();
+        }
+        // Draw the control points
+        context.fillStyle = 'black';
+        for (const point of overlayInfo.controlPoints) {
+            moveTo(context, point);
+            context.beginPath();
+            arc(context, point, 4);
+            context.closePath();
+            context.fill();
+            context.stroke();
+        }
+        // Draw the offset marker
+        context.lineWidth = 1;
+        context.beginPath();
+        drawPivot(context, offset);
+        context.stroke();
+        // Draw the bounding box
+        context.beginPath();
+        drawLine(context, box);
+        context.closePath();
+        context.stroke();
+    }
+}
+__decorate([
+    computed()
+], Bezier.prototype, "childrenBBox", null);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQmV6aWVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL0Jlemllci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7QUFBQSxPQUFPLEVBQUMsSUFBSSxFQUE2QixNQUFNLGVBQWUsQ0FBQztBQUcvRCxPQUFPLEVBQUMsUUFBUSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBRXZDLE9BQU8sRUFBQyxHQUFHLEVBQUUsUUFBUSxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUMsTUFBTSxVQUFVLENBQUM7QUFDMUQsT0FBTyxFQUFDLEtBQUssRUFBQyxNQUFNLFNBQVMsQ0FBQztBQVU5QixNQUFNLE9BQWdCLE1BQU8sU0FBUSxLQUFLO0lBQ3hCLE9BQU87UUFDckIsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO1FBQy9CLE9BQU87WUFDTCxRQUFRLEVBQUUsQ0FBQyxPQUFPLENBQUM7WUFDbkIsU0FBUyxFQUFFLE9BQU8sQ0FBQyxTQUFTO1lBQzVCLE1BQU0sRUFBRSxDQUFDO1NBQ1YsQ0FBQztJQUNKLENBQUM7SUFPUyxZQUFZO1FBQ3BCLE9BQU8sSUFBSSxDQUFDLFVBQVUsQ0FBQyxHQUFHLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUNuRCxDQUFDO0lBRWtCLFdBQVc7UUFDNUIsT0FBTyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUMsT0FBTyxFQUFFLENBQUMsSUFBSSxDQUFDO0lBQ3ZDLENBQUM7SUFFa0Isb0JBQW9CLENBQUMsR0FBUztRQUMvQyxHQUFHLENBQUMsUUFBUSxHQUFHLEdBQUcsQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQyxPQUFPLEVBQUUsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUNqRSxPQUFPLEdBQUcsQ0FBQztJQUNiLENBQUM7SUFFZSxXQUFXLENBQ3pCLE9BQWlDLEVBQ2pDLE1BQWlC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

package/lib/components/Circle.d.ts

@@ -0,0 +1,191 @@
+import { BBox, SerializedVector2, SignalValue, SimpleSignal } from '@revideo/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 '@revideo/2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Circle
+ *       size={160}
+ *       fill={'lightseagreen'}
+ *     />
+ *    );
+ * });
+ *
+ * // snippet Ellipse
+ * import {makeScene2D, Circle} from '@revideo/2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Circle
+ *       width={160}
+ *       height={80}
+ *       fill={'lightseagreen'}
+ *     />
+ *   );
+ * });
+ *
+ * // snippet Sector (pie chart):
+ * import {makeScene2D, Circle} from '@revideo/2d';
+ * import {createRef} from '@revideo/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 '@revideo/2d';
+ * import {createRef} from '@revideo/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 '@revideo/2d';
+ * import {all, createRef, easeInCubic, easeOutCubic} from '@revideo/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,eAAe,CAAC;AACvB,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"}