@twick/2d 0.14.19 → 0.14.21

package/lib/components/Video.js

@@ -0,0 +1,342 @@
+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();
+        // Use a temporary key for undefined src to avoid conflicts
+        const key = `${this.key}/${src || 'pending'}`;
+        let video = Video_1.pool[key];
+        if (!video) {
+            video = document.createElement('video');
+            video.crossOrigin = 'anonymous';
+            // Only set src if it's valid, otherwise leave it empty
+            if (src && src !== 'undefined') {
+                try {
+                    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;
+                    }
+                }
+                catch (error) {
+                    // Fallback to direct assignment
+                    video.src = src;
+                }
+            }
+            Video_1.pool[key] = video;
+        }
+        else if (src && src !== 'undefined' && video.src !== src) {
+            // Update existing video element if src has changed and is now valid
+            try {
+                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;
+                }
+            }
+            catch (error) {
+                // Fallback to direct assignment
+                video.src = src;
+            }
+            // Move video to correct pool key
+            delete Video_1.pool[key];
+            const newKey = `${this.key}/${src}`;
+            Video_1.pool[newKey] = video;
+        }
+        // If src is still undefined, wait for it to become available
+        if (!src || src === 'undefined') {
+            DependencyContext.collectPromise(new Promise(resolve => {
+                // Check periodically for valid src
+                const checkSrc = () => {
+                    const currentSrc = this.src();
+                    if (currentSrc && currentSrc !== 'undefined') {
+                        resolve();
+                    }
+                    else {
+                        setTimeout(checkSrc, 10);
+                    }
+                };
+                checkSrc();
+            }));
+        }
+        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) {
+        // Auto-start playback if Twick is playing but media isn't
+        this.autoPlayBasedOnTwick();
+        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();
+        try {
+            const video = this.video();
+            // Only set aspect ratio if video element is available and has valid dimensions
+            if (video && video.videoWidth > 0 && video.videoHeight > 0) {
+                this.element.style.aspectRatio = (this.ratio() ?? video.videoWidth / video.videoHeight).toString();
+            }
+        }
+        catch (error) {
+            // If video element is not ready yet, skip setting aspect ratio
+            // It will be set later when the video becomes available
+        }
+    }
+    remove() {
+        super.remove();
+        dropExtractor(this.key, this.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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVmlkZW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvVmlkZW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQUNBLE9BQU8sRUFBQyxJQUFJLEVBQUUsaUJBQWlCLEVBQUUsYUFBYSxFQUFDLE1BQU0sYUFBYSxDQUFDO0FBQ25FLE9BQU8sR0FBRyxNQUFNLFFBQVEsQ0FBQztBQUN6QixPQUFPLEVBQUMsUUFBUSxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBRWxFLE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSxVQUFVLENBQUM7QUFDbkMsT0FBTyxFQUFDLGtCQUFrQixFQUFDLE1BQU0sOEJBQThCLENBQUM7QUFDaEUsT0FBTyxFQUFDLGFBQWEsRUFBRSxRQUFRLEVBQUMsTUFBTSxtQ0FBbUMsQ0FBQztBQUUxRSxPQUFPLEVBQUMsS0FBSyxFQUFDLE1BQU0sU0FBUyxDQUFDO0FBa0J2QixJQUFNLEtBQUssYUFBWCxNQUFNLEtBQU0sU0FBUSxLQUFLO0lBa0Q5QixZQUFtQixLQUFpQjtRQUNsQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFYUixxQkFBZ0IsR0FDckIsU0FBUyxDQUFDO1FBQ0osd0JBQW1CLEdBQVksS0FBSyxDQUFDO1FBa0xuQyxjQUFTLEdBQXVCLElBQUksQ0FBQztJQXhLL0MsQ0FBQztJQUVrQixXQUFXO1FBQzVCLE1BQU0sTUFBTSxHQUFHLEtBQUssQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUNuQyxJQUFJLE1BQU0sQ0FBQyxDQUFDLEtBQUssSUFBSSxJQUFJLE1BQU0sQ0FBQyxDQUFDLEtBQUssSUFBSSxFQUFFLENBQUM7WUFDM0MsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1lBQzNCLE9BQU87Z0JBQ0wsQ0FBQyxFQUFFLEtBQUssQ0FBQyxVQUFVO2dCQUNuQixDQUFDLEVBQUUsS0FBSyxD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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"}