visualfries 0.1.0

package/dist/commands/CommandRunner.js

@@ -0,0 +1,81 @@
+import { CommandType } from './CommandTypes.js';
+// import type { HistoryCommand } from './HistoryCommand.js';
+import { PlayCommand } from './PlayCommand.js';
+import { PauseCommand } from './PauseCommand.js';
+import { SeekCommand } from './SeekCommand.js';
+import { UpdateComponentCommand } from './UpdateComponentCommand.js';
+import { RenderCommand } from './RenderCommand.js';
+import { ReplaceSourceOnTimeCommand } from './ReplaceSourceOnTimeCommand.js';
+import { RenderFrameCommand } from './RenderFrameCommand.js';
+export class CommandRunner {
+    playCommand;
+    pauseCommand;
+    seekCommand;
+    replaceSourceOnTimeCommand;
+    renderFrameCommand;
+    updateComponentCommand;
+    renderCommand;
+    constructor(cradle) {
+        this.playCommand = cradle.playCommand;
+        this.pauseCommand = cradle.pauseCommand;
+        this.seekCommand = cradle.seekCommand;
+        this.replaceSourceOnTimeCommand = cradle.replaceSourceOnTimeCommand;
+        this.renderFrameCommand = cradle.renderFrameCommand;
+        this.updateComponentCommand = cradle.updateComponentCommand;
+        this.renderCommand = cradle.renderCommand;
+    }
+    async run(commandType, props) {
+        let command; //  | HistoryCommand<T>
+        switch (commandType) {
+            case CommandType.PLAY:
+                command = this.playCommand;
+                break;
+            case CommandType.PAUSE:
+                command = this.pauseCommand;
+                break;
+            case CommandType.SEEK:
+                command = this.seekCommand;
+                break;
+            case CommandType.REPLACE_SOURCE_ON_TIME:
+                command = this.replaceSourceOnTimeCommand;
+                break;
+            case CommandType.RENDER_FRAME:
+                command = this.renderFrameCommand;
+                break;
+            case CommandType.UPDATE_COMPONENT:
+                command = this.updateComponentCommand;
+                break;
+            // ... add other cases as needed
+            case CommandType.RENDER:
+                throw new Error(`Render command should be run as runSync`);
+            default:
+                throw new Error(`Unknown command type: ${commandType}`);
+        }
+        if (!command) {
+            throw Error('Command not set ' + commandType);
+        }
+        const result = await command.execute(props);
+        if ('isHistoryCommand' in command && command.isHistoryCommand) {
+            // this.sceneBuilder.addToHistory(command);
+        }
+        return result;
+    }
+    runSync(commandType, props) {
+        let command;
+        switch (commandType) {
+            case CommandType.RENDER:
+                command = this.renderCommand;
+                break;
+            default:
+                throw new Error(`Unknown sync command type: ${commandType}`);
+        }
+        if (!command) {
+            throw Error('Command not set ' + commandType);
+        }
+        const result = command.execute(props);
+        if ('isHistoryCommand' in command && command.isHistoryCommand) {
+            // this.sceneBuilder.addToHistory(command);
+        }
+        return result;
+    }
+}

package/dist/commands/CommandTypes.d.ts

@@ -0,0 +1,11 @@
+export declare enum CommandType {
+    PLAY = "play",
+    PAUSE = "pause",
+    SEEK = "seek",
+    UPDATE_COMPONENT = "updateComponent",
+    UPDATE_ANIMATED_PROPERTY = "updateAnimatedProperty",
+    GET_COMPONENT_DATA = "getComponentData",
+    RENDER = "render",
+    REPLACE_SOURCE_ON_TIME = "replaceSourceOnTime",
+    RENDER_FRAME = "renderFrame"
+}

package/dist/commands/CommandTypes.js

@@ -0,0 +1,13 @@
+export var CommandType;
+(function (CommandType) {
+    CommandType["PLAY"] = "play";
+    CommandType["PAUSE"] = "pause";
+    CommandType["SEEK"] = "seek";
+    CommandType["UPDATE_COMPONENT"] = "updateComponent";
+    CommandType["UPDATE_ANIMATED_PROPERTY"] = "updateAnimatedProperty";
+    CommandType["GET_COMPONENT_DATA"] = "getComponentData";
+    CommandType["RENDER"] = "render";
+    CommandType["REPLACE_SOURCE_ON_TIME"] = "replaceSourceOnTime";
+    CommandType["RENDER_FRAME"] = "renderFrame";
+    // ... add other command types as needed
+})(CommandType || (CommandType = {}));

package/dist/commands/PauseCommand.d.ts

@@ -0,0 +1,4 @@
+import type { SyncCommand } from './Command.js';
+export declare class PauseCommand implements SyncCommand {
+    execute(): void;
+}

package/dist/commands/PauseCommand.js

@@ -0,0 +1,5 @@
+export class PauseCommand {
+    execute() {
+        // Implementation
+    }
+}

package/dist/commands/PlayCommand.d.ts

@@ -0,0 +1,4 @@
+import type { Command } from './Command.js';
+export declare class PlayCommand implements Command<void> {
+    execute(): Promise<void>;
+}

package/dist/commands/PlayCommand.js

@@ -0,0 +1,6 @@
+export class PlayCommand {
+    async execute() {
+        // Implementation
+        return;
+    }
+}

package/dist/commands/RenderCommand.d.ts

@@ -0,0 +1,15 @@
+import type { EventManager } from '../managers/EventManager.js';
+import type { RenderManager } from '../managers/RenderManager.js';
+import type { StateManager } from '../managers/StateManager.svelte.js';
+import type { SyncCommand } from './Command.js';
+export declare class RenderCommand implements SyncCommand<boolean | number> {
+    private eventManager;
+    private state;
+    private renderManager;
+    constructor(cradle: {
+        eventManager: EventManager;
+        stateManager: StateManager;
+        renderManager: RenderManager;
+    });
+    execute(): boolean | number;
+}

package/dist/commands/RenderCommand.js

@@ -0,0 +1,18 @@
+export class RenderCommand {
+    eventManager;
+    state;
+    renderManager;
+    constructor(cradle) {
+        this.eventManager = cradle.eventManager;
+        this.state = cradle.stateManager;
+        this.renderManager = cradle.renderManager;
+    }
+    execute() {
+        if (this.state.state === 'loading') {
+            return false;
+        }
+        this.eventManager.emit('beforerender');
+        this.renderManager.render();
+        return this.state.currentTime;
+    }
+}

package/dist/commands/RenderFrameCommand.d.ts

@@ -0,0 +1,17 @@
+import type { Command } from './Command.js';
+import { StateManager } from '../managers/StateManager.svelte.js';
+import { DomManager } from '../managers/DomManager.js';
+import { AppManager } from '../managers/AppManager.svelte.js';
+export declare class RenderFrameCommand implements Command<string | ArrayBuffer | Blob | null> {
+    private sceneState;
+    private domManager;
+    private appManager;
+    private lastRenderedFrame;
+    private lastRenderArgs;
+    constructor(cradle: {
+        stateManager: StateManager;
+        domManager: DomManager;
+        appManager: AppManager;
+    });
+    execute(args: unknown): Promise<string | ArrayBuffer | Blob | null>;
+}

package/dist/commands/RenderFrameCommand.js

@@ -0,0 +1,93 @@
+import { z } from 'zod';
+import { StateManager } from '../managers/StateManager.svelte.js';
+import { DomManager } from '../managers/DomManager.js';
+import { AppManager } from '../managers/AppManager.svelte.js';
+const replaceSourceOnTimeSchema = z.object({
+    format: z.enum(['arraybuffer', 'blob', 'png', 'jpg', 'jpeg']),
+    quality: z.number().min(0).max(1),
+    target: z.any()
+});
+export class RenderFrameCommand {
+    sceneState;
+    domManager;
+    appManager;
+    lastRenderedFrame = null;
+    lastRenderArgs = null;
+    constructor(cradle) {
+        this.sceneState = cradle.stateManager;
+        this.domManager = cradle.domManager;
+        this.appManager = cradle.appManager;
+    }
+    async execute(args) {
+        const check = replaceSourceOnTimeSchema.safeParse(args);
+        if (!check.success) {
+            return null;
+        }
+        const { format, quality, target } = check.data;
+        // Server optimization: Return cached frame if nothing changed visually and render args match
+        if (this.sceneState.environment === 'server' && !this.sceneState.isDirty) {
+            if (this.lastRenderedFrame && this.lastRenderArgs) {
+                // Check if render args match current args
+                const argsMatch = this.lastRenderArgs.format === format &&
+                    this.lastRenderArgs.quality === quality &&
+                    this.lastRenderArgs.target === target;
+                if (argsMatch) {
+                    return this.lastRenderedFrame;
+                }
+            }
+        }
+        let frame = null;
+        if (format === 'arraybuffer') {
+            frame = (await new Promise((resolve, reject) => {
+                requestAnimationFrame(() => {
+                    const context = this.domManager.canvas.getContext('2d');
+                    if (!context) {
+                        reject(new Error('Failed to get canvas context'));
+                        return;
+                    }
+                    const imagewidth = this.domManager.canvas.width;
+                    const imageheight = this.domManager.canvas.height;
+                    const imagedata = context.getImageData(0, 0, imagewidth, imageheight);
+                    const frame = imagedata.data.buffer;
+                    resolve(frame);
+                });
+            }));
+        }
+        if (format === 'blob') {
+            frame = (await new Promise((resolve) => {
+                requestAnimationFrame(() => {
+                    this.domManager.canvas.toBlob((blob) => {
+                        resolve(blob);
+                    });
+                });
+            }));
+        }
+        if (format === 'png' || format === 'jpg' || format === 'jpeg') {
+            frame =
+                this.sceneState.environment === 'server'
+                    ? (await new Promise((resolve) => {
+                        requestAnimationFrame(() => {
+                            const frame = format === 'jpg' || format === 'jpeg'
+                                ? this.domManager.canvas.toDataURL('image/jpeg', quality)
+                                : this.domManager.canvas.toDataURL();
+                            resolve(frame);
+                        });
+                    }))
+                    : (await new Promise((resolve) => {
+                        requestAnimationFrame(async () => {
+                            // Re-render in the RAF so video texture updates are included
+                            this.appManager.render();
+                            const b64 = await this.appManager.app.renderer.extract.base64(target || this.appManager.app.stage, format, quality);
+                            resolve(b64);
+                        });
+                    }));
+        }
+        // Cache frame and render args, then clear dirty flag after successful render
+        if (this.sceneState.environment === 'server') {
+            this.lastRenderedFrame = frame;
+            this.lastRenderArgs = { format, quality, target };
+            this.sceneState.clearDirty();
+        }
+        return frame;
+    }
+}

package/dist/commands/ReplaceSourceOnTimeCommand.d.ts

@@ -0,0 +1,4 @@
+import type { Command } from './Command.js';
+export declare class ReplaceSourceOnTimeCommand implements Command<void> {
+    execute(args: unknown): Promise<void>;
+}

package/dist/commands/ReplaceSourceOnTimeCommand.js

@@ -0,0 +1,22 @@
+import { z } from 'zod';
+const replaceSourceOnTimeSchema = z.object({
+    componentId: z.string(),
+    base64data: z.string(),
+    time: z.number()
+});
+export class ReplaceSourceOnTimeCommand {
+    async execute(args) {
+        // TODO: Complete implementation - this is work in progress
+        // if (this.sceneBuilder.environment != 'server') {
+        // 	this.sceneBuilder.log('replaceSource is only available in server environment');
+        // 	return;
+        // }
+        const check = replaceSourceOnTimeSchema.safeParse(args);
+        if (!check.success) {
+            // this.sceneBuilder.log('ReplaceSourceOnTimeCommand failed with error: ' + check.error);
+            return;
+        }
+        // WIP: Need to implement the actual source replacement logic
+        return;
+    }
+}

package/dist/commands/SeekCommand.d.ts

@@ -0,0 +1,15 @@
+import type { Command } from './Command.js';
+import { TimelineManager } from '../managers/TimelineManager.svelte.js';
+import { StateManager } from '../managers/StateManager.svelte.js';
+import { RenderManager } from '../managers/RenderManager.js';
+export declare class SeekCommand implements Command {
+    private timeline;
+    private state;
+    private renderManager;
+    constructor(cradle: {
+        timelineManager: TimelineManager;
+        stateManager: StateManager;
+        renderManager: RenderManager;
+    });
+    execute(args: unknown): Promise<void>;
+}

package/dist/commands/SeekCommand.js

@@ -0,0 +1,39 @@
+import { z } from 'zod';
+import { TimelineManager } from '../managers/TimelineManager.svelte.js';
+import { StateManager } from '../managers/StateManager.svelte.js';
+import { RenderManager } from '../managers/RenderManager.js';
+const seekSchema = z.object({
+    time: z.number()
+});
+export class SeekCommand {
+    timeline;
+    state;
+    renderManager;
+    constructor(cradle) {
+        this.timeline = cradle.timelineManager;
+        this.state = cradle.stateManager;
+        this.renderManager = cradle.renderManager;
+    }
+    async execute(args) {
+        const check = seekSchema.safeParse(args);
+        if (!check.success) {
+            return;
+        }
+        const time = Math.max(0, Math.min(check.data.time, this.state.duration));
+        this.timeline.seek(time);
+        // Ensure a deterministic render on server after seek to advance media frames
+        if (this.state.environment === 'server') {
+            // Try multiple render passes until loading state clears or attempts exhausted
+            const maxAttempts = 10;
+            for (let i = 0; i < maxAttempts; i += 1) {
+                await this.renderManager.render();
+                if (this.state.state !== 'loading')
+                    break;
+                await new Promise((resolve) => setTimeout(resolve, 30));
+            }
+            if (this.state.state === 'loading') {
+                console.warn('SeekCommand: Max render attempts exhausted while still loading');
+            }
+        }
+    }
+}

package/dist/commands/UpdateComponentCommand.d.ts

@@ -0,0 +1,4 @@
+import type { Command } from './Command.js';
+export declare class UpdateComponentCommand implements Command<boolean> {
+    execute(props: unknown): Promise<boolean>;
+}

package/dist/commands/UpdateComponentCommand.js

@@ -0,0 +1,17 @@
+import { ComponentShape } from '../schemas/scene/components.js';
+import { z } from 'zod';
+const replaceSourceOnTimeSchema = z.object({
+    componentId: z.string(),
+    data: ComponentShape
+});
+export class UpdateComponentCommand {
+    async execute(props) {
+        const check = replaceSourceOnTimeSchema.safeParse(props);
+        if (!check.success) {
+            // this.sceneBuilder.log('UpdateComponentCommand validation error: ' + check.error);
+            return false;
+        }
+        // should return true on successful component update, false otherwise (component not found etc.)
+        return false;
+    }
+}

package/dist/components/AnimatedGIF.d.ts

@@ -0,0 +1,201 @@
+import { Sprite } from "pixi.js-legacy";
+import { Renderer, SCALE_MODES } from "pixi.js-legacy";
+/** Represents a single frame of a GIF. Includes image and timing data. */
+interface FrameObject {
+    /** Image data for the current frame */
+    imageData: ImageData;
+    /** The start of the current frame, in milliseconds */
+    start: number;
+    /** The end of the current frame, in milliseconds */
+    end: number;
+}
+/** Default options for all AnimatedGIF objects. */
+interface AnimatedGIFOptions {
+    /** Whether to start playing right away */
+    autoPlay: boolean;
+    /**
+     * Scale Mode to use for the texture
+     * @type {PIXI.SCALE_MODES}
+     */
+    scaleMode: SCALE_MODES;
+    /** To enable looping */
+    loop: boolean;
+    /** Speed of the animation */
+    animationSpeed: number;
+    /** Set to `false` to manage updates yourself */
+    autoUpdate: boolean;
+    /** The completed callback, optional */
+    onComplete: null | (() => void);
+    /** The loop callback, optional */
+    onLoop: null | (() => void);
+    /** The frame callback, optional */
+    onFrameChange: null | ((currentFrame: number) => void);
+    /** Fallback FPS if GIF contains no time information */
+    fps?: number;
+}
+/** Options for the AnimatedGIF constructor. */
+interface AnimatedGIFSize {
+    /** Width of the GIF image */
+    width: number;
+    /** Height of the GIF image */
+    height: number;
+}
+/**
+ * Runtime object to play animated GIFs. This object is similar to an AnimatedSprite.
+ * It support playback (seek, play, stop) as well as animation speed and looping.
+ * @see Thanks to {@link https://github.com/matt-way/gifuct-js/ gifuct-js}
+ */
+declare class AnimatedGIF extends Sprite {
+    /**
+     * Default options for all AnimatedGIF objects.
+     * @property {PIXI.SCALE_MODES} [scaleMode=PIXI.SCALE_MODES.LINEAR] - Scale mode to use for the texture.
+     * @property {boolean} [loop=true] - To enable looping.
+     * @property {number} [animationSpeed=1] - Speed of the animation.
+     * @property {boolean} [autoUpdate=true] - Set to `false` to manage updates yourself.
+     * @property {boolean} [autoPlay=true] - To start playing right away.
+     * @property {Function} [onComplete=null] - The completed callback, optional.
+     * @property {Function} [onLoop=null] - The loop callback, optional.
+     * @property {Function} [onFrameChange=null] - The frame callback, optional.
+     * @property {number} [fps=30] - Fallback FPS if GIF contains no time information.
+     */
+    static defaultOptions: AnimatedGIFOptions;
+    /**
+     * The speed that the animation will play at. Higher is faster, lower is slower.
+     * @default 1
+     */
+    animationSpeed: number;
+    /**
+     * Whether or not the animate sprite repeats after playing.
+     * @default true
+     */
+    loop: boolean;
+    /**
+     * User-assigned function to call when animation finishes playing. This only happens
+     * if loop is set to `false`.
+     *
+     * @example
+     * animation.onComplete = () => {
+     *   // finished!
+     * };
+     */
+    onComplete?: () => void;
+    /**
+     * User-assigned function to call when animation changes which texture is being rendered.
+     *
+     * @example
+     * animation.onFrameChange = () => {
+     *   // updated!
+     * };
+     */
+    onFrameChange?: (currentFrame: number) => void;
+    /**
+     * User-assigned function to call when `loop` is true, and animation is played and
+     * loops around to start again. This only happens if loop is set to `true`.
+     *
+     * @example
+     * animation.onLoop = () => {
+     *   // looped!
+     * };
+     */
+    onLoop?: () => void;
+    /** The total duration of animation in milliseconds. */
+    readonly duration: number;
+    /** Whether to play the animation after constructing. */
+    readonly autoPlay: boolean;
+    /** Collection of frame to render. */
+    private _frames;
+    /** Drawing context reference. */
+    private _context;
+    /** Dirty means the image needs to be redrawn. Set to `true` to force redraw. */
+    dirty: boolean;
+    /** The current frame number (zero-based index). */
+    private _currentFrame;
+    /** `true` uses PIXI.Ticker.shared to auto update animation time.*/
+    private _autoUpdate;
+    /** `true` if the instance is currently connected to PIXI.Ticker.shared to auto update animation time. */
+    private _isConnectedToTicker;
+    /** If animation is currently playing. */
+    private _playing;
+    /** Current playback position in milliseconds. */
+    private _currentTime;
+    /**
+     * Create an animated GIF animation from a GIF image's ArrayBuffer. The easiest way to get
+     * the buffer is to use Assets.
+     * @example
+     * import { Assets } from 'pixi.js';
+     * import '@pixi/gif';
+     *
+     * const gif = await Assets.load('file.gif');
+     * @param buffer - GIF image arraybuffer from Assets.
+     * @param options - Options to use.
+     * @returns
+     */
+    static fromBuffer(buffer: ArrayBuffer, options?: Partial<AnimatedGIFOptions>): AnimatedGIF;
+    /**
+     * @param frames - Data of the GIF image.
+     * @param options - Options for the AnimatedGIF
+     */
+    constructor(frames: FrameObject[], options: Partial<AnimatedGIFOptions> & AnimatedGIFSize);
+    /** Stops the animation. */
+    stop(): void;
+    /** Plays the animation. */
+    play(): void;
+    /**
+     * Get the current progress of the animation from 0 to 1.
+     * @readonly
+     */
+    get progress(): number;
+    /** `true` if the current animation is playing */
+    get playing(): boolean;
+    /**
+     * Updates the object transform for rendering. You only need to call this
+     * if the `autoUpdate` property is set to `false`.
+     *
+     * @param deltaTime - Time since last tick.
+     */
+    update(deltaTime: number): void;
+    /**
+     * Redraw the current frame, is necessary for the animation to work when
+     */
+    private updateFrame;
+    /**
+     * Renders the object using the WebGL renderer
+     *
+     * @param {PIXI.Renderer} renderer - The renderer
+     * @private
+     */
+    _render(renderer: Renderer): void;
+    /**
+     * Renders the object using the WebGL renderer
+     *
+     * @param {PIXI.CanvasRenderer} renderer - The renderer
+     * @private
+     */
+    _renderCanvas(renderer: any): void;
+    /**
+     * Whether to use PIXI.Ticker.shared to auto update animation time.
+     * @default true
+     */
+    get autoUpdate(): boolean;
+    set autoUpdate(value: boolean);
+    /** Set the current frame number */
+    get currentFrame(): number;
+    set currentFrame(value: number);
+    /** Internally handle updating the frame index */
+    private updateFrameIndex;
+    /**
+     * Get the total number of frame in the GIF.
+     */
+    get totalFrames(): number;
+    /** Destroy and don't use after this. */
+    destroy(): void;
+    /**
+     * Cloning the animation is a useful way to create a duplicate animation.
+     * This maintains all the properties of the original animation but allows
+     * you to control playback independent of the original animation.
+     * If you want to create a simple copy, and not control independently,
+     * then you can simply create a new Sprite, e.g. `const sprite = new Sprite(animation.texture)`.
+     */
+    clone(): AnimatedGIF;
+}
+export { AnimatedGIF };