@twick/2d 0.11.0

package/lib/components/Video.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 Video_1;
+import { BBox, DependencyContext, PlaybackState } from '@twick/core';
+import Hls from 'hls.js';
+import { computed, initial, nodeName, signal } from '../decorators';
+import { drawImage } from '../utils';
+import { ImageCommunication } from '../utils/video/ffmpeg-client';
+import { dropExtractor, getFrame } from '../utils/video/mp4-parser-manager';
+import { Media } from './Media';
+let Video = Video_1 = class Video extends Media {
+    constructor(props) {
+        super(props);
+        this.detectedFileType = 'unknown';
+        this.fileTypeWasDetected = false;
+        this.lastFrame = null;
+    }
+    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;
+    }
+    mediaElement() {
+        return this.video();
+    }
+    seekedMedia() {
+        return this.seekedVideo();
+    }
+    fastSeekedMedia() {
+        return this.fastSeekedVideo();
+    }
+    video() {
+        const src = this.src();
+        const key = `${this.key}/${src}`;
+        let video = Video_1.pool[key];
+        if (!video) {
+            video = document.createElement('video');
+            video.crossOrigin = 'anonymous';
+            const parsedSrc = new URL(src, window.location.origin);
+            if (parsedSrc.pathname.endsWith('.m3u8')) {
+                const hls = new Hls();
+                hls.loadSource(src);
+                hls.attachMedia(video);
+            }
+            else {
+                video.src = src;
+            }
+            Video_1.pool[key] = video;
+        }
+        const weNeedToWait = this.waitForCanPlayNecessary(video);
+        if (!weNeedToWait) {
+            return video;
+        }
+        DependencyContext.collectPromise(new Promise(resolve => {
+            this.waitForCanPlay(video, resolve);
+        }));
+        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();
+            }
+        }
+        // reseek when video is out of sync by more than one second
+        if (Math.abs(video.currentTime - time) > 1) {
+            this.setCurrentTime(time);
+        }
+        else if (!playing) {
+            video.currentTime = time;
+        }
+        return video;
+    }
+    async webcodecSeekedVideo() {
+        const video = this.video();
+        const time = this.clampTime(this.time());
+        video.playbackRate = this.playbackRate();
+        if (this.lastFrame && this.lastTime === time) {
+            return this.lastFrame;
+        }
+        const fps = this.view().fps() / this.playbackRate();
+        return getFrame(this.key, video.src, time, fps);
+    }
+    async ffmpegSeekedVideo() {
+        const video = this.video();
+        const time = this.clampTime(this.time());
+        const duration = this.getDuration();
+        video.playbackRate = this.playbackRate();
+        if (this.lastFrame && this.lastTime === time) {
+            return this.lastFrame;
+        }
+        const fps = this.view().fps() / this.playbackRate();
+        if (!Video_1.imageCommunication) {
+            throw new Error('ServerSeekedVideo can only be used with HMR.');
+        }
+        const frame = await Video_1.imageCommunication.getFrame(this.key, video.src, time, duration, fps);
+        this.lastFrame = frame;
+        this.lastTime = time;
+        return frame;
+    }
+    async seekFunction() {
+        const playbackState = this.view().playbackState();
+        // During playback
+        if (playbackState === PlaybackState.Playing ||
+            playbackState === PlaybackState.Presenting) {
+            return this.fastSeekedVideo();
+        }
+        if (playbackState === PlaybackState.Paused) {
+            return this.seekedVideo();
+        }
+        // During rendering, if set explicitly
+        if (this.decoder() === 'slow') {
+            return this.seekedVideo();
+        }
+        if (this.decoder() === 'ffmpeg') {
+            return this.ffmpegSeekedVideo();
+        }
+        if (this.decoder() === 'web') {
+            return this.webcodecSeekedVideo();
+        }
+        if (!this.fileTypeWasDetected) {
+            this.detectFileType();
+        }
+        // If not set explicitly, use detected file type to determine decoder
+        if (this.detectedFileType === 'webm') {
+            return this.ffmpegSeekedVideo();
+        }
+        if (this.detectedFileType === 'hls') {
+            return this.seekedVideo();
+        }
+        return this.webcodecSeekedVideo();
+    }
+    async draw(context) {
+        this.drawShape(context);
+        const alpha = this.alpha();
+        if (alpha > 0) {
+            const video = await this.seekFunction();
+            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());
+        }
+        await this.drawChildren(context);
+    }
+    applyFlex() {
+        super.applyFlex();
+        const video = this.video();
+        this.element.style.aspectRatio = (this.ratio() ?? video.videoWidth / video.videoHeight).toString();
+    }
+    remove() {
+        super.remove();
+        dropExtractor(this.key, this.video().src);
+        return this;
+    }
+    handleUnknownFileType(src) {
+        console.warn(`WARNING: Could not detect file type of video (${src}), will default to using mp4 decoder. If your video file is not an mp4 file, this will lead to an error - to fix this, reencode your video as an mp4 file (better performance) or specify a different decoder: https://docs.re.video/common-issues/slow-rendering#use-mp4-decoder`);
+        this.detectedFileType = 'unknown';
+        this.fileTypeWasDetected = true;
+    }
+    detectFileType() {
+        return DependencyContext.collectPromise((async () => {
+            const src = this.src();
+            const extension = src.split('?')[0].split('.').pop()?.toLowerCase();
+            if (extension === 'mp4' ||
+                extension === 'webm' ||
+                extension === 'mov') {
+                this.detectedFileType = extension;
+                this.fileTypeWasDetected = true;
+                return;
+            }
+            if (extension === 'm3u8') {
+                this.detectedFileType = 'hls';
+                this.fileTypeWasDetected = true;
+                return;
+            }
+            if (!src.startsWith('http://') && !src.startsWith('https://')) {
+                this.handleUnknownFileType(src);
+                return;
+            }
+            const response = await fetch(src, { method: 'HEAD' });
+            const contentType = response.headers.get('Content-Type');
+            if (!contentType) {
+                this.handleUnknownFileType(src);
+                return;
+            }
+            if (contentType.includes('video/mp4')) {
+                this.detectedFileType = 'mp4';
+                this.fileTypeWasDetected = true;
+                return;
+            }
+            if (contentType.includes('video/webm')) {
+                this.detectedFileType = 'webm';
+                this.fileTypeWasDetected = true;
+                return;
+            }
+            if (contentType.includes('video/quicktime')) {
+                this.detectedFileType = 'mov';
+                this.fileTypeWasDetected = true;
+                return;
+            }
+            if (contentType.includes('application/vnd.apple.mpegurl') ||
+                contentType.includes('application/x-mpegURL')) {
+                this.detectedFileType = 'hls';
+                this.fileTypeWasDetected = true;
+                return;
+            }
+            this.handleUnknownFileType(src);
+        })());
+    }
+};
+Video.pool = {};
+Video.imageCommunication = !import.meta.hot
+    ? null
+    : new ImageCommunication();
+__decorate([
+    initial(1),
+    signal()
+], Video.prototype, "alpha", void 0);
+__decorate([
+    initial(true),
+    signal()
+], Video.prototype, "smoothing", void 0);
+__decorate([
+    initial(null),
+    signal()
+], Video.prototype, "decoder", void 0);
+__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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVmlkZW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvVmlkZW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQUNBLE9BQU8sRUFBQyxJQUFJLEVBQUUsaUJBQWlCLEVBQUUsYUFBYSxFQUFDLE1BQU0sYUFBYSxDQUFDO0FBQ25FLE9BQU8sR0FBRyxNQUFNLFFBQVEsQ0FBQztBQUN6QixPQUFPLEVBQUMsUUFBUSxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBRWxFLE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSxVQUFVLENBQUM7QUFDbkMsT0FBTyxFQUFDLGtCQUFrQixFQUFDLE1BQU0sOEJBQThCLENBQUM7QUFDaEUsT0FBTyxFQUFDLGFBQWEsRUFBRSxRQUFRLEVBQUMsTUFBTSxtQ0FBbUMsQ0FBQztBQUUxRSxPQUFPLEVBQUMsS0FBSyxFQUFDLE1BQU0sU0FBUyxDQUFDO0FBa0J2QixJQUFNLEtBQUssYUFBWCxNQUFNLEtBQU0sU0FBUSxLQUFLO0lBa0Q5QixZQUFtQixLQUFpQjtRQUNsQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFYUixxQkFBZ0IsR0FDckIsU0FBUyxDQUFDO1FBQ0osd0JBQW1CLEdBQVksS0FBSyxDQUFDO1FBNkhuQyxjQUFTLEdBQXVCLElBQUksQ0FBQztJQW5IL0MsQ0FBQztJQUVrQixXQUFXO1FBQzVCLE1BQU0sTUFBTSxHQUFHLEtBQUssQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUNuQyxJQUFJLE1BQU0sQ0FBQyxDQUFDLEtBQUssSUFBSSxJQUFJLE1BQU0sQ0FBQyxDQUFDLEtBQUssSUFBSSxFQUFFLENBQUM7WUFDM0MsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1lBQzNCLE9BQU87Z0JBQ0wsQ0FBQyxFQUFFLEtBQUssQ0FBQyxVQUFVO2dCQUNuQixDQUFDLEVBQUUsS0FBSyxD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

package/lib/components/View2D.d.ts

@@ -0,0 +1,28 @@
+import type { SimpleSignal } from '@twick/core';
+import { PlaybackState } from '@twick/core';
+import type { Node } from './Node';
+import type { RectProps } from './Rect';
+import { Rect } 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 fps: SimpleSignal<number, this>;
+    readonly assetHash: SimpleSignal<string, this>;
+    constructor(props: View2DProps);
+    dispose(): void;
+    render(context: CanvasRenderingContext2D): Promise<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,KAAK,EAAC,YAAY,EAAC,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAO,MAAM,aAAa,CAAC;AAIhD,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AACjC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAE5B,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,qBACa,MAAO,SAAQ,IAAI;IAE9B,OAiBc,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,SAEwB,GAAG,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAExD,SACwB,SAAS,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;gBAE3C,KAAK,EAAE,WAAW;IAgBrB,OAAO;IAKD,MAAM,CAAC,OAAO,EAAE,wBAAwB;IAM9D;;;;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,93 @@
+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 '@twick/core';
+import { initial, signal } from '../decorators';
+import { nodeName } from '../decorators/nodeName';
+import { useScene2D } from '../scenes/useScene2D';
+import { Rect } from './Rect';
+let View2D = View2D_1 = class View2D extends Rect {
+    constructor(props) {
+        super({
+            composite: true,
+            fontFamily: 'Roboto',
+            fontSize: 48,
+            lineHeight: '120%',
+            textWrap: false,
+            fontStyle: 'normal',
+            ...props,
+        });
+        this.view2D = this;
+        View2D_1.shadowRoot.append(this.element);
+        this.applyFlex();
+    }
+    dispose() {
+        this.removeChildren();
+        super.dispose();
+    }
+    async render(context) {
+        this.computedSize();
+        this.computedPosition();
+        await 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([
+    initial(0),
+    signal()
+], View2D.prototype, "fps", void 0);
+__decorate([
+    signal()
+], View2D.prototype, "assetHash", void 0);
+__decorate([
+    lazy(() => {
+        const frameID = 'twick-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.fontFeatureSettings = 'normal'; // TODO: find solution that fully isolates CSS
+            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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVmlldzJELmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL1ZpZXcyRC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBQ0EsT0FBTyxFQUFDLGFBQWEsRUFBRSxJQUFJLEVBQUMsTUFBTSxhQUFhLENBQUM7QUFDaEQsT0FBTyxFQUFDLE9BQU8sRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDOUMsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLHdCQUF3QixDQUFDO0FBQ2hELE9BQU8sRUFBQyxVQUFVLEVBQUMsTUFBTSxzQkFBc0IsQ0FBQztBQUdoRCxPQUFPLEVBQUMsSUFBSSxFQUFDLE1BQU0sUUFBUSxDQUFDO0FBT3JCLElBQU0sTUFBTSxjQUFaLE1BQU0sTUFBTyxTQUFRLElBQUk7SUFvQzlCLFlBQW1CLEtBQWtCO1FBQ25DLEtBQUssQ0FBQztZQUNKLFNBQVMsRUFBRSxJQUFJO1lBQ2YsVUFBVSxFQUFFLFFBQVE7WUFDcEIsUUFBUSxFQUFFLEVBQUU7WUFDWixVQUFVLEVBQUUsTUFBTTtZQUNsQixRQUFRLEVBQUUsS0FBSztZQUNmLFNBQVMsRUFBRSxRQUFRO1lBQ25CLEdBQUcsS0FBSztTQUNULENBQUMsQ0FBQztRQUNILElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDO1FBRW5CLFFBQU0sQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUN2QyxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7SUFDbkIsQ0FBQztJQUVlLE9BQU87UUFDckIsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3RCLEtBQUssQ0FBQyxPQUFPLEVBQUUsQ0FBQztJQUNsQixDQUFDO0lBRWUsS0FBSyxDQUFDLE1BQU0sQ0FBQyxPQUFpQztRQUM1RCxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7UUFDcEIsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7UUFDeEIsTUFBTSxLQUFLLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQzlCLENBQUM7SUFFRDs7OztPQUlHO0lBQ0ksT0FBTyxDQUF3QixHQUFXO1FBQy9DLE9BQVEsVUFBVSxFQUFFLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBTyxJQUFJLElBQUksQ0FBQztJQUNsRCxDQUFDO0lBRWtCLG1CQUFtQjtRQUNwQyxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVrQixpQkFBaUI7UUFDbEMsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ25CLENBQUM7SUFFZSxJQUFJO1FBQ2xCLE9BQU8sSUFBSSxDQUFDO0lBQ2QsQ0FBQztDQUNGLENBQUE7QUE1RHlCO0lBRnZCLE9BQU8sQ0FBQyxhQUFhLENBQUMsTUFBTSxDQUFDO0lBQzdCLE1BQU0sRUFBRTs2Q0FDZ0U7QUFJakQ7SUFGdkIsT0FBTyxDQUFDLENBQUMsQ0FBQztJQUNWLE1BQU0sRUFBRTswQ0FDc0Q7QUFJdkM7SUFGdkIsT0FBTyxDQUFDLENBQUMsQ0FBQztJQUNWLE1BQU0sRUFBRTttQ0FDK0M7QUFHaEM7SUFEdkIsTUFBTSxFQUFFO3lDQUNxRDtBQWZoRDtJQWpCYixJQUFJLENBQUMsR0FBRyxFQUFFO1FBQ1QsTUFBTSxPQUFPLEdBQUcsZ0JBQWdCLENBQUM7UUFDakMsSUFBSSxLQUFLLEdBQUcsUUFBUSxDQUFDLGFBQWEsQ0FBaUIsSUFBSSxPQUFPLEVBQUUsQ0FBQyxDQUFDO1FBQ2xFLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztZQUNYLEtBQUssR0FBRyxRQUFRLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBQ3RDLEtBQUssQ0FBQyxFQUFFLEdBQUcsT0FBTyxDQUFDO1lBQ25CLEtBQUssQ0FBQyxLQUFLLENBQUMsUUFBUSxHQUFHLFVBQVUsQ0FBQztZQUNsQyxLQUFLLENBQUMsS0FBSyxDQUFDLGFBQWEsR0FBRyxNQUFNLENBQUM7WUFDbkMsS0FBSyxDQUFDLEtBQUssQ0FBQyxHQUFHLEdBQUcsR0FBRyxDQUFDO1lBQ3RCLEtBQUssQ0FBQyxLQUFLLENBQUMsSUFBSSxHQUFHLEdBQUcsQ0FBQztZQUN2QixLQUFLLENBQUMsS0FBSyxDQUFDLG1CQUFtQixHQUFHLFFBQVEsQ0FBQyxDQUFDLDhDQUE4QztZQUMxRixLQUFLLENBQUMsS0FBSyxDQUFDLE9BQU8sR0FBRyxHQUFHLENBQUM7WUFDMUIsS0FBSyxDQUFDLEtBQUssQ0FBQyxRQUFRLEdBQUcsUUFBUSxDQUFDO1lBQ2hDLFFBQVEsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQy9CLENBQUM7UUFDRCxPQUFPLEtBQUssQ0FBQyxVQUFVLElBQUksS0FBSyxDQUFDLFlBQVksQ0FBQyxFQUFDLElBQUksRUFBRSxNQUFNLEVBQUMsQ0FBQyxDQUFDO0lBQ2hFLENBQUMsQ0FBQztnQ0FDbUM7QUFuQjFCLE1BQU07SUFEbEIsUUFBUSxDQUFDLFFBQVEsQ0FBQztHQUNOLE1BQU0sQ0FtRmxCIn0=

package/lib/components/index.d.ts

@@ -0,0 +1,29 @@
+export * from './Audio';
+export * from './Bezier';
+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 './Media';
+export * from './Node';
+export * from './Path';
+export * from './Polygon';
+export * from './QuadBezier';
+export * from './Ray';
+export * from './Rect';
+export * from './Rive';
+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,SAAS,CAAC;AACxB,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,SAAS,CAAC;AACxB,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,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,29 @@
+export * from './Audio';
+export * from './Bezier';
+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 './Media';
+export * from './Node';
+export * from './Path';
+export * from './Polygon';
+export * from './QuadBezier';
+export * from './Ray';
+export * from './Rect';
+export * from './Rive';
+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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxTQUFTLENBQUM7QUFDeEIsY0FBYyxVQUFVLENBQUM7QUFDekIsY0FBYyxVQUFVLENBQUM7QUFDekIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxTQUFTLENBQUM7QUFDeEIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxPQUFPLENBQUM7QUFDdEIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxTQUFTLENBQUM7QUFDeEIsY0FBYyxVQUFVLENBQUM7QUFDekIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxTQUFTLENBQUM7QUFDeEIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxXQUFXLENBQUM7QUFDMUIsY0FBYyxjQUFjLENBQUM7QUFDN0IsY0FBYyxPQUFPLENBQUM7QUFDdEIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxTQUFTLENBQUM7QUFDeEIsY0FBYyxVQUFVLENBQUM7QUFDekIsY0FBYyxPQUFPLENBQUM7QUFDdEIsY0FBYyxPQUFPLENBQUM7QUFDdEIsY0FBYyxTQUFTLENBQUM7QUFDeEIsY0FBYyxTQUFTLENBQUM7QUFDeEIsY0FBYyxVQUFVLENBQUMifQ==

package/lib/components/types.d.ts

@@ -0,0 +1,17 @@
+import type { ReferenceReceiver } from '@twick/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,aAAa,CAAC;AACnD,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 '@twick/core';
+import type { 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,EAGR,MAAM,aAAa,CAAC;AAErB,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAC7C,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;IA8D5B,gBAAgB,CAAC,KAAK,EAAE,MAAM;IAQ9B,kBAAkB,CAAC,KAAK,EAAE,MAAM;IAQhC,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"}