@efxlab/motion-canvas-2d 4.0.0

package/lib/components/Video.js

@@ -0,0 +1,267 @@
+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 Video_1;
+import { BBox, DependencyContext, PlaybackState, clamp, isReactive, useLogger, useThread, } from '@efxlab/motion-canvas-core';
+import { computed, initial, nodeName, signal } from '../decorators';
+import { drawImage } from '../utils';
+import { Rect } from './Rect';
+let Video = class Video extends Rect {
+    static { Video_1 = this; }
+    static pool = {};
+    lastTime = -1;
+    constructor({ play, ...props }) {
+        super(props);
+        if (play) {
+            this.play();
+        }
+    }
+    /**
+     * {@inheritDoc Curve.completion}
+     */
+    curveCompletion() {
+        return super.completion();
+    }
+    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: image.videoWidth,
+                y: image.videoHeight,
+            };
+        }
+        return custom;
+    }
+    /**
+     * The completion of this video in the range from 0 to 1.
+     *
+     * @remarks
+     * To get the percentage of the stroke that's currently visible, use
+     * {@link Video.curveCompletion} instead.
+     */
+    completion() {
+        return this.clampTime(this.time()) / this.video().duration;
+    }
+    video() {
+        const src = this.src();
+        const key = `${this.key}/${src}`;
+        let video = Video_1.pool[key];
+        if (!video) {
+            video = document.createElement('video');
+            video.src = src;
+            Video_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() {
+        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;
+        }
+        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();
+            }
+        }
+        if (Math.abs(video.currentTime - time) > 0.2) {
+            this.setCurrentTime(time);
+        }
+        else if (!playing) {
+            video.currentTime = time;
+        }
+        return video;
+    }
+    draw(context) {
+        this.drawShape(context);
+        const alpha = this.alpha();
+        if (alpha > 0) {
+            const playbackState = this.view().playbackState();
+            const video = playbackState === PlaybackState.Playing ||
+                playbackState === PlaybackState.Presenting
+                ? this.fastSeekedVideo()
+                : this.seekedVideo();
+            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();
+        }
+        if (this.clip()) {
+            context.clip(this.getPath());
+        }
+        this.drawChildren(context);
+    }
+    applyFlex() {
+        super.applyFlex();
+        const video = this.video();
+        this.element.style.aspectRatio = (this.ratio() ?? video.videoWidth / video.videoHeight).toString();
+    }
+    setCurrentTime(value) {
+        const video = this.video();
+        if (video.readyState < 2)
+            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) {
+        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;
+        }
+        return clamp(0, duration, time);
+    }
+    collectAsyncResources() {
+        super.collectAsyncResources();
+        this.seekedVideo();
+    }
+};
+__decorate([
+    signal()
+], Video.prototype, "src", void 0);
+__decorate([
+    initial(1),
+    signal()
+], Video.prototype, "alpha", void 0);
+__decorate([
+    initial(true),
+    signal()
+], Video.prototype, "smoothing", void 0);
+__decorate([
+    initial(false),
+    signal()
+], Video.prototype, "loop", void 0);
+__decorate([
+    initial(1),
+    signal()
+], Video.prototype, "playbackRate", void 0);
+__decorate([
+    initial(0),
+    signal()
+], Video.prototype, "time", void 0);
+__decorate([
+    initial(false),
+    signal()
+], Video.prototype, "playing", void 0);
+__decorate([
+    computed()
+], Video.prototype, "completion", null);
+__decorate([
+    computed()
+], Video.prototype, "video", null);
+__decorate([
+    computed()
+], Video.prototype, "seekedVideo", null);
+__decorate([
+    computed()
+], Video.prototype, "fastSeekedVideo", null);
+Video = Video_1 = __decorate([
+    nodeName('Video')
+], Video);
+export { Video };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVmlkZW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvVmlkZW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQUFBLE9BQU8sRUFDTCxJQUFJLEVBQ0osaUJBQWlCLEVBQ2pCLGFBQWEsRUFJYixLQUFLLEVBQ0wsVUFBVSxFQUNWLFNBQVMsRUFDVCxTQUFTLEdBQ1YsTUFBTSw0QkFBNEIsQ0FBQztBQUNwQyxPQUFPLEVBQUMsUUFBUSxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBRWxFLE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSxVQUFVLENBQUM7QUFDbkMsT0FBTyxFQUFDLElBQUksRUFBWSxNQUFNLFFBQVEsQ0FBQztBQWdDaEMsSUFBTSxLQUFLLEdBQVgsTUFBTSxLQUFNLFNBQVEsSUFBSTs7SUFDckIsTUFBTSxDQUFVLElBQUksR0FBcUMsRUFBRSxDQUFDO0lBb0U1RCxRQUFRLEdBQUcsQ0FBQyxDQUFDLENBQUM7SUFFdEIsWUFBbUIsRUFBQyxJQUFJLEVBQUUsR0FBRyxLQUFLLEVBQWE7UUFDN0MsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ2IsSUFBSSxJQUFJLEVBQUUsQ0FBQztZQUNULElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNkLENBQUM7SUFDSCxDQUFDO0lBRUQ7O09BRUc7SUFDSSxlQUFlO1FBQ3BCLE9BQU8sS0FBSyxDQUFDLFVBQVUsRUFBRSxDQUFDO0lBQzVCLENBQUM7SUFFTSxTQUFTO1FBQ2QsT0FBTyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDeEIsQ0FBQztJQUVNLGNBQWM7UUFDbkIsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDO0lBQ3JDLENBQUM7SUFFTSxXQUFXO1FBQ2hCLE9BQU8sSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLFFBQVEs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

package/lib/components/View2D.d.ts

@@ -0,0 +1,25 @@
+import { PlaybackState, SimpleSignal } from '@efxlab/motion-canvas-core';
+import type { Node } from './Node';
+import { Rect, RectProps } from './Rect';
+export interface View2DProps extends RectProps {
+    assetHash: string;
+}
+export declare class View2D extends Rect {
+    static shadowRoot: ShadowRoot;
+    readonly playbackState: SimpleSignal<PlaybackState, this>;
+    readonly globalTime: SimpleSignal<number, this>;
+    readonly assetHash: SimpleSignal<string, this>;
+    constructor(props: View2DProps);
+    dispose(): void;
+    render(context: CanvasRenderingContext2D): void;
+    /**
+     * Find a node by its key.
+     *
+     * @param key - The key of the node.
+     */
+    findKey<T extends Node = Node>(key: string): T | null;
+    protected requestLayoutUpdate(): void;
+    protected requestFontUpdate(): void;
+    view(): View2D;
+}
+//# sourceMappingURL=View2D.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"View2D.d.ts","sourceRoot":"","sources":["../../src/lib/components/View2D.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAE,YAAY,EAAO,MAAM,4BAA4B,CAAC;AAI7E,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAC,IAAI,EAAE,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEvC,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,qBACa,MAAO,SAAQ,IAAI;IAC9B,OAgBc,UAAU,EAAE,UAAU,CAAC;IAErC,SAEwB,aAAa,EAAE,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;IAEzE,SAEwB,UAAU,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAE/D,SACwB,SAAS,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;gBAE3C,KAAK,EAAE,WAAW;IAWrB,OAAO;IAKP,MAAM,CAAC,OAAO,EAAE,wBAAwB;IAMxD;;;;OAIG;IACI,OAAO,CAAC,CAAC,SAAS,IAAI,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,CAAC,GAAG,IAAI;cAIzC,mBAAmB;cAInB,iBAAiB;IAIpB,IAAI,IAAI,MAAM;CAG/B"}

package/lib/components/View2D.js

@@ -0,0 +1,85 @@
+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 View2D_1;
+import { PlaybackState, lazy } from '@efxlab/motion-canvas-core';
+import { initial, signal } from '../decorators';
+import { nodeName } from '../decorators/nodeName';
+import { useScene2D } from '../scenes/useScene2D';
+import { Rect } from './Rect';
+let View2D = class View2D extends Rect {
+    static { View2D_1 = this; }
+    static shadowRoot;
+    constructor(props) {
+        super({
+            composite: true,
+            ...props,
+        });
+        this.view2D = this;
+        View2D_1.shadowRoot.append(this.element);
+        this.applyFlex();
+    }
+    dispose() {
+        this.removeChildren();
+        super.dispose();
+    }
+    render(context) {
+        this.computedSize();
+        this.computedPosition();
+        super.render(context);
+    }
+    /**
+     * Find a node by its key.
+     *
+     * @param key - The key of the node.
+     */
+    findKey(key) {
+        return useScene2D().getNode(key) ?? null;
+    }
+    requestLayoutUpdate() {
+        this.updateLayout();
+    }
+    requestFontUpdate() {
+        this.applyFont();
+    }
+    view() {
+        return this;
+    }
+};
+__decorate([
+    initial(PlaybackState.Paused),
+    signal()
+], View2D.prototype, "playbackState", void 0);
+__decorate([
+    initial(0),
+    signal()
+], View2D.prototype, "globalTime", void 0);
+__decorate([
+    signal()
+], View2D.prototype, "assetHash", void 0);
+__decorate([
+    lazy(() => {
+        const frameID = 'motion-canvas-2d-frame';
+        let frame = document.querySelector(`#${frameID}`);
+        if (!frame) {
+            frame = document.createElement('div');
+            frame.id = frameID;
+            frame.style.position = 'absolute';
+            frame.style.pointerEvents = 'none';
+            frame.style.top = '0';
+            frame.style.left = '0';
+            frame.style.opacity = '0';
+            frame.style.overflow = 'hidden';
+            document.body.prepend(frame);
+        }
+        return frame.shadowRoot ?? frame.attachShadow({ mode: 'open' });
+    })
+], View2D, "shadowRoot", void 0);
+View2D = View2D_1 = __decorate([
+    nodeName('View2D')
+], View2D);
+export { View2D };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVmlldzJELmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL1ZpZXcyRC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBQUEsT0FBTyxFQUFDLGFBQWEsRUFBZ0IsSUFBSSxFQUFDLE1BQU0sNEJBQTRCLENBQUM7QUFDN0UsT0FBTyxFQUFDLE9BQU8sRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDOUMsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLHdCQUF3QixDQUFDO0FBQ2hELE9BQU8sRUFBQyxVQUFVLEVBQUMsTUFBTSxzQkFBc0IsQ0FBQztBQUVoRCxPQUFPLEVBQUMsSUFBSSxFQUFZLE1BQU0sUUFBUSxDQUFDO0FBT2hDLElBQU0sTUFBTSxHQUFaLE1BQU0sTUFBTyxTQUFRLElBQUk7O0lBaUJoQixBQUFQLE1BQU0sQ0FBQyxVQUFVLENBQWE7SUFhckMsWUFBbUIsS0FBa0I7UUFDbkMsS0FBSyxDQUFDO1lBQ0osU0FBUyxFQUFFLElBQUk7WUFDZixHQUFHLEtBQUs7U0FDVCxDQUFDLENBQUM7UUFDSCxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQztRQUVuQixRQUFNLENBQUMsVUFBVSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDdkMsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ25CLENBQUM7SUFFZSxPQUFPO1FBQ3JCLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUN0QixLQUFLLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDbEIsQ0FBQztJQUVlLE1BQU0sQ0FBQyxPQUFpQztRQUN0RCxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7UUFDcEIsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7UUFDeEIsS0FBSyxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUN4QixDQUFDO0lBRUQ7Ozs7T0FJRztJQUNJLE9BQU8sQ0FBd0IsR0FBVztRQUMvQyxPQUFRLFVBQVUsRUFBRSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQU8sSUFBSSxJQUFJLENBQUM7SUFDbEQsQ0FBQztJQUVrQixtQkFBbUI7UUFDcEMsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO0lBQ3RCLENBQUM7SUFFa0IsaUJBQWlCO1FBQ2xDLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNuQixDQUFDO0lBRWUsSUFBSTtRQUNsQixPQUFPLElBQUksQ0FBQztJQUNkLENBQUM7Q0FDRixDQUFBO0FBbkR5QjtJQUZ2QixPQUFPLENBQUMsYUFBYSxDQUFDLE1BQU0sQ0FBQztJQUM3QixNQUFNLEVBQUU7NkNBQ2dFO0FBSWpEO0lBRnZCLE9BQU8sQ0FBQyxDQUFDLENBQUM7SUFDVixNQUFNLEVBQUU7MENBQ3NEO0FBR3ZDO0lBRHZCLE1BQU0sRUFBRTt5Q0FDcUQ7QUFYaEQ7SUFoQmIsSUFBSSxDQUFDLEdBQUcsRUFBRTtRQUNULE1BQU0sT0FBTyxHQUFHLHdCQUF3QixDQUFDO1FBQ3pDLElBQUksS0FBSyxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQWlCLElBQUksT0FBTyxFQUFFLENBQUMsQ0FBQztRQUNsRSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDWCxLQUFLLEdBQUcsUUFBUSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUN0QyxLQUFLLENBQUMsRUFBRSxHQUFHLE9BQU8sQ0FBQztZQUNuQixLQUFLLENBQUMsS0FBSyxDQUFDLFFBQVEsR0FBRyxVQUFVLENBQUM7WUFDbEMsS0FBSyxDQUFDLEtBQUssQ0FBQyxhQUFhLEdBQUcsTUFBTSxDQUFDO1lBQ25DLEtBQUssQ0FBQyxLQUFLLENBQUMsR0FBRyxHQUFHLEdBQUcsQ0FBQztZQUN0QixLQUFLLENBQUMsS0FBSyxDQUFDLElBQUksR0FBRyxHQUFHLENBQUM7WUFDdkIsS0FBSyxDQUFDLEtBQUssQ0FBQyxPQUFPLEdBQUcsR0FBRyxDQUFDO1lBQzFCLEtBQUssQ0FBQyxLQUFLLENBQUMsUUFBUSxHQUFHLFFBQVEsQ0FBQztZQUNoQyxRQUFRLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUMvQixDQUFDO1FBQ0QsT0FBTyxLQUFLLENBQUMsVUFBVSxJQUFJLEtBQUssQ0FBQyxZQUFZLENBQUMsRUFBQyxJQUFJLEVBQUUsTUFBTSxFQUFDLENBQUMsQ0FBQztJQUNoRSxDQUFDLENBQUM7Z0NBQ21DO0FBakIxQixNQUFNO0lBRGxCLFFBQVEsQ0FBQyxRQUFRLENBQUM7R0FDTixNQUFNLENBd0VsQiJ9

package/lib/components/index.d.ts

@@ -0,0 +1,27 @@
+export * from './Bezier';
+export * from './Camera';
+export * from './Circle';
+export * from './Code';
+export * from './CubicBezier';
+export * from './Curve';
+export * from './Grid';
+export * from './Icon';
+export * from './Img';
+export * from './Knot';
+export * from './Latex';
+export * from './Layout';
+export * from './Line';
+export * from './Node';
+export * from './Path';
+export * from './Polygon';
+export * from './QuadBezier';
+export * from './Ray';
+export * from './Rect';
+export * from './Shape';
+export * from './Spline';
+export * from './SVG';
+export * from './Txt';
+export * from './types';
+export * from './Video';
+export * from './View2D';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}

package/lib/components/index.js

@@ -0,0 +1,27 @@
+export * from './Bezier';
+export * from './Camera';
+export * from './Circle';
+export * from './Code';
+export * from './CubicBezier';
+export * from './Curve';
+export * from './Grid';
+export * from './Icon';
+export * from './Img';
+export * from './Knot';
+export * from './Latex';
+export * from './Layout';
+export * from './Line';
+export * from './Node';
+export * from './Path';
+export * from './Polygon';
+export * from './QuadBezier';
+export * from './Ray';
+export * from './Rect';
+export * from './Shape';
+export * from './Spline';
+export * from './SVG';
+export * from './Txt';
+export * from './types';
+export * from './Video';
+export * from './View2D';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxVQUFVLENBQUM7QUFDekIsY0FBYyxVQUFVLENBQUM7QUFDekIsY0FBYyxVQUFVLENBQUM7QUFDekIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxTQUFTLENBQUM7QUFDeEIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxPQUFPLENBQUM7QUFDdEIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxTQUFTLENBQUM7QUFDeEIsY0FBYyxVQUFVLENBQUM7QUFDekIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxXQUFXLENBQUM7QUFDMUIsY0FBYyxjQUFjLENBQUM7QUFDN0IsY0FBYyxPQUFPLENBQUM7QUFDdEIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxTQUFTLENBQUM7QUFDeEIsY0FBYyxVQUFVLENBQUM7QUFDekIsY0FBYyxPQUFPLENBQUM7QUFDdEIsY0FBYyxPQUFPLENBQUM7QUFDdEIsY0FBYyxTQUFTLENBQUM7QUFDeEIsY0FBYyxTQUFTLENBQUM7QUFDeEIsY0FBYyxVQUFVLENBQUMifQ==

package/lib/components/types.d.ts

@@ -0,0 +1,17 @@
+import type { ReferenceReceiver } from '@efxlab/motion-canvas-core';
+import type { Node } from './Node';
+export type ComponentChild = Node | object | string | number | bigint | boolean | null | undefined;
+export type ComponentChildren = ComponentChild | ComponentChild[];
+export type NodeChildren = Node | Node[];
+export type PropsOf<T> = T extends NodeConstructor<infer P> ? P : T extends FunctionComponent<infer P> ? P : never;
+export interface JSXProps {
+    children?: ComponentChildren;
+    ref?: ReferenceReceiver<Node>;
+}
+export interface FunctionComponent<T = any> {
+    (props: T): Node | null;
+}
+export interface NodeConstructor<TProps = any, TNode = Node> {
+    new (props: TProps): TNode;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/components/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAEjC,MAAM,MAAM,cAAc,GACtB,IAAI,GACJ,MAAM,GACN,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,GACP,IAAI,GACJ,SAAS,CAAC;AAEd,MAAM,MAAM,iBAAiB,GAAG,cAAc,GAAG,cAAc,EAAE,CAAC;AAClE,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,EAAE,CAAC;AAEzC,MAAM,MAAM,OAAO,CAAC,CAAC,IACnB,CAAC,SAAS,eAAe,CAAC,MAAM,CAAC,CAAC,GAC9B,CAAC,GACD,CAAC,SAAS,iBAAiB,CAAC,MAAM,CAAC,CAAC,GAClC,CAAC,GACD,KAAK,CAAC;AAEd,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,GAAG,CAAC,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC;CAC/B;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC,GAAG,GAAG;IACxC,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;CACzB;AAED,MAAM,WAAW,eAAe,CAAC,MAAM,GAAG,GAAG,EAAE,KAAK,GAAG,IAAI;IACzD,KAAK,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC;CAC5B"}

package/lib/components/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvdHlwZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiJ9

package/lib/curves/ArcSegment.d.ts

@@ -0,0 +1,26 @@
+import { Vector2 } from '@efxlab/motion-canvas-core';
+import { CurvePoint } from './CurvePoint';
+import { Segment } from './Segment';
+export declare class ArcSegment extends Segment {
+    readonly startPoint: Vector2;
+    readonly radius: Vector2;
+    readonly xAxisRotationDegree: number;
+    readonly largeArcFlag: number;
+    readonly sweepFlag: number;
+    readonly endPoint: Vector2;
+    private static el;
+    readonly center: Vector2;
+    readonly startAngle: number;
+    readonly deltaAngle: number;
+    readonly xAxisRotation: number;
+    private xAxisRotationMatrix;
+    readonly points: Vector2[];
+    private length;
+    constructor(startPoint: Vector2, radius: Vector2, xAxisRotationDegree: number, largeArcFlag: number, sweepFlag: number, endPoint: Vector2);
+    getAnglePosition(angle: number): Vector2;
+    getAngleDerivative(angle: number): Vector2;
+    draw(context: CanvasRenderingContext2D | Path2D, start: number, end: number, move: boolean): [CurvePoint, CurvePoint];
+    getPoint(distance: number): CurvePoint;
+    get arcLength(): number;
+}
+//# sourceMappingURL=ArcSegment.d.ts.map

package/lib/curves/ArcSegment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArcSegment.d.ts","sourceRoot":"","sources":["../../src/lib/curves/ArcSegment.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,OAAO,EAER,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAElC,qBAAa,UAAW,SAAQ,OAAO;aAmBnB,UAAU,EAAE,OAAO;aACnB,MAAM,EAAE,OAAO;aACf,mBAAmB,EAAE,MAAM;aAC3B,YAAY,EAAE,MAAM;aACpB,SAAS,EAAE,MAAM;aACjB,QAAQ,EAAE,OAAO;IAhBnC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAiB;IAClC,SAAgB,MAAM,EAAE,OAAO,CAAC;IAEhC,SAAgB,UAAU,EAAE,MAAM,CAAC;IACnC,SAAgB,UAAU,EAAE,MAAM,CAAC;IACnC,SAAgB,aAAa,EAAE,MAAM,CAAC;IACtC,OAAO,CAAC,mBAAmB,CAAY;IACvC,SAAyB,MAAM,EAAE,OAAO,EAAE,CAAC;IAC3C,OAAO,CAAC,MAAM,CAAS;gBAGL,UAAU,EAAE,OAAO,EACnB,MAAM,EAAE,OAAO,EACf,mBAAmB,EAAE,MAAM,EAC3B,YAAY,EAAE,MAAM,EACpB,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,OAAO;IA6D5B,gBAAgB,CAAC,KAAK,EAAE,MAAM;IAO9B,kBAAkB,CAAC,KAAK,EAAE,MAAM;IAOhC,IAAI,CACT,OAAO,EAAE,wBAAwB,GAAG,MAAM,EAC1C,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,OAAO,GACZ,CAAC,UAAU,EAAE,UAAU,CAAC;IAsBpB,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU;IAc7C,IAAW,SAAS,IAAI,MAAM,CAE7B;CACF"}

package/lib/curves/ArcSegment.js

@@ -0,0 +1,116 @@
+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, DEG2RAD, Matrix2D, Vector2, lazy, } from '@efxlab/motion-canvas-core';
+import { View2D } from '../components/View2D';
+import { Segment } from './Segment';
+export class ArcSegment extends Segment {
+    startPoint;
+    radius;
+    xAxisRotationDegree;
+    largeArcFlag;
+    sweepFlag;
+    endPoint;
+    static el;
+    center;
+    // angle in radian
+    startAngle;
+    deltaAngle;
+    xAxisRotation;
+    xAxisRotationMatrix;
+    points;
+    length;
+    constructor(startPoint, radius, xAxisRotationDegree, largeArcFlag, sweepFlag, endPoint) {
+        super();
+        this.startPoint = startPoint;
+        this.radius = radius;
+        this.xAxisRotationDegree = xAxisRotationDegree;
+        this.largeArcFlag = largeArcFlag;
+        this.sweepFlag = sweepFlag;
+        this.endPoint = endPoint;
+        this.xAxisRotation = this.xAxisRotationDegree * DEG2RAD;
+        this.radius = new Vector2(Math.abs(radius.x), Math.abs(radius.y));
+        const pAccent = startPoint
+            .sub(endPoint)
+            .div(2)
+            .transform(Matrix2D.fromRotation(-xAxisRotationDegree).domMatrix);
+        const L = (pAccent.x * pAccent.x) / (radius.x * radius.x) +
+            (pAccent.y * pAccent.y) / (radius.y * radius.y);
+        if (L > 1) {
+            const Lsqrt = Math.sqrt(L);
+            radius.x = Lsqrt * radius.x;
+            radius.y = Lsqrt * radius.y;
+        }
+        const cAccent = new Vector2(radius.ctg * pAccent.y, radius.perpendicular.ctg * pAccent.x).scale(Math.sqrt(1 /
+            ((pAccent.x * pAccent.x) / (radius.x * radius.x) +
+                (pAccent.y * pAccent.y) / (radius.y * radius.y)) -
+            1) * (largeArcFlag === sweepFlag ? -1 : 1));
+        this.xAxisRotationMatrix =
+            Matrix2D.fromRotation(xAxisRotationDegree).domMatrix;
+        this.center = cAccent
+            .transform(this.xAxisRotationMatrix)
+            .add(startPoint.add(endPoint).div(2));
+        const q = pAccent.sub(cAccent).div(radius);
+        const s = pAccent.scale(-1).sub(cAccent).div(radius);
+        this.startAngle = q.radians;
+        this.deltaAngle = Vector2.angleBetween(q, s) % (Math.PI * 2);
+        if (this.sweepFlag === 0 && this.deltaAngle > 0) {
+            this.deltaAngle -= Math.PI * 2;
+        }
+        if (this.sweepFlag === 1 && this.deltaAngle < 0) {
+            this.deltaAngle += Math.PI * 2;
+        }
+        ArcSegment.el.setAttribute('d', `M ${this.startPoint.x} ${this.startPoint.y} A ${this.radius.x} ${this.radius.y} ${this.xAxisRotationDegree} ${this.largeArcFlag} ${this.sweepFlag} ${this.endPoint.x} ${this.endPoint.y}`);
+        this.length = ArcSegment.el.getTotalLength();
+        const bbox = new BBox(ArcSegment.el.getBBox());
+        this.points = [bbox.topLeft, bbox.bottomRight];
+    }
+    getAnglePosition(angle) {
+        return this.radius
+            .mul(Vector2.fromRadians(angle))
+            .transform(this.xAxisRotationMatrix)
+            .add(this.center);
+    }
+    getAngleDerivative(angle) {
+        return new Vector2(-this.radius.x * Math.sin(angle), this.radius.y * Math.cos(angle)).transform(this.xAxisRotationMatrix);
+    }
+    draw(context, start, end, move) {
+        const startAngle = this.startAngle + this.deltaAngle * start;
+        const endAngle = this.startAngle + this.deltaAngle * end;
+        const startPos = this.getPoint(start);
+        const endPos = this.getPoint(end);
+        if (move)
+            context.moveTo(startPos.position.x, startPos.position.y);
+        context.ellipse(this.center.x, this.center.y, this.radius.x, this.radius.y, this.xAxisRotation, startAngle, endAngle, this.sweepFlag === 0);
+        return [startPos, endPos];
+    }
+    getPoint(distance) {
+        const angle = this.startAngle + distance * this.deltaAngle;
+        const tangent = this.getAngleDerivative(angle).normalized;
+        return {
+            position: distance === 0
+                ? this.startPoint
+                : distance === 1
+                    ? this.endPoint
+                    : this.getAnglePosition(angle),
+            tangent,
+            normal: tangent.perpendicular,
+        };
+    }
+    get arcLength() {
+        return this.length;
+    }
+}
+__decorate([
+    lazy(() => {
+        const root = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        const el = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        root.appendChild(el);
+        View2D.shadowRoot.appendChild(root);
+        return el;
+    })
+], ArcSegment, "el", void 0);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQXJjU2VnbWVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY3VydmVzL0FyY1NlZ21lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7O0FBQUEsT0FBTyxFQUNMLElBQUksRUFDSixPQUFPLEVBQ1AsUUFBUSxFQUNSLE9BQU8sRUFDUCxJQUFJLEdBQ0wsTUFBTSw0QkFBNEIsQ0FBQztBQUNwQyxPQUFPLEVBQUMsTUFBTSxFQUFDLE1BQU0sc0JBQXNCLENBQUM7QUFFNUMsT0FBTyxFQUFDLE9BQU8sRUFBQyxNQUFNLFdBQVcsQ0FBQztBQUVsQyxNQUFNLE9BQU8sVUFBVyxTQUFRLE9BQU87SUFtQm5CO0lBQ0E7SUFDQTtJQUNBO0lBQ0E7SUFDQTtJQWhCSCxBQUFQLE1BQU0sQ0FBQyxFQUFFLENBQWlCO0lBQ2xCLE1BQU0sQ0FBVTtJQUNoQyxrQkFBa0I7SUFDRixVQUFVLENBQVM7SUFDbkIsVUFBVSxDQUFTO0lBQ25CLGFBQWEsQ0FBUztJQUM5QixtQkFBbUIsQ0FBWTtJQUNkLE1BQU0sQ0FBWTtJQUNuQyxNQUFNLENBQVM7SUFFdkIsWUFDa0IsVUFBbUIsRUFDbkIsTUFBZSxFQUNmLG1CQUEyQixFQUMzQixZQUFvQixFQUNwQixTQUFpQixFQUNqQixRQUFpQjtRQUVqQyxLQUFLLEVBQUUsQ0FBQztRQVBRLGVBQVUsR0FBVixVQUFVLENBQVM7UUFDbkIsV0FBTSxHQUFOLE1BQU0sQ0FBUztRQUNmLHdCQUFtQixHQUFuQixtQkFBbUIsQ0FBUTtRQUMzQixpQkFBWSxHQUFaLFlBQVksQ0FBUTtRQUNwQixjQUFTLEdBQVQsU0FBUyxDQUFRO1FBQ2pCLGFBQVEsR0FBUixRQUFRLENBQVM7UUFJakMsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsbUJBQW1CLEdBQUcsT0FBTyxDQUFDO1FBQ3hELElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxPQUFPLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxNQUFNLENB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