visualfries 0.1.0

package/dist/layers/Layer.svelte.js

@@ -0,0 +1,125 @@
+import { ComponentsManager } from '../managers/ComponentsManager.svelte.js';
+import { EventManager } from '../managers/EventManager.js';
+import { Container } from 'pixi.js-legacy';
+import md5 from 'md5';
+export class Layer {
+    #id;
+    #componentsInitData = [];
+    #isBuilt = false;
+    #displayObject;
+    components;
+    name;
+    order;
+    visible;
+    componentsManager;
+    eventManager;
+    constructor(cradle) {
+        const name = $state(cradle.layerData.name);
+        const order = $state(cradle.layerData.order);
+        const visible = $state(cradle.layerData.visible === false ? false : true);
+        const components = $state([]);
+        this.#id = cradle.layerData.id;
+        this.name = name ?? 'Layer';
+        this.order = order;
+        this.visible = visible;
+        this.#componentsInitData = cradle.layerData.components;
+        this.components = components;
+        this.componentsManager = cradle.componentsManager;
+        this.eventManager = cradle.eventManager;
+    }
+    async build() {
+        if (this.#isBuilt) {
+            return;
+        }
+        this.#isBuilt = true;
+        this.#displayObject = new Container();
+        for (const componentData of this.#componentsInitData) {
+            const component = await this.componentsManager.create(componentData);
+            if (component) {
+                this.addComponent(component);
+            }
+        }
+    }
+    #emit(event, props) {
+        this.eventManager.emit(event, props);
+    }
+    addComponent(component) {
+        this.components.push(component);
+        if (component.displayObject) {
+            this.#displayObject.addChild(component.displayObject);
+        }
+        // resort components
+        this.components.sort((a, b) => a.props.timeline.startAt - b.props.timeline.startAt);
+        this.#emit('layerschange');
+    }
+    removeComponent(component) {
+        const hasComponent = this.components.find((c) => c.id === component.id);
+        if (hasComponent) {
+            this.components = this.components.filter((c) => c.id !== component.id);
+            if (component.displayObject) {
+                this.#displayObject.removeChild(component.displayObject);
+            }
+            this.components.sort((a, b) => a.props.timeline.startAt - b.props.timeline.startAt);
+            this.#emit('layerschange');
+        }
+    }
+    update(props) {
+        let changed = false;
+        if (props.name) {
+            this.name = props.name;
+            changed = true;
+        }
+        if (props.order) {
+            this.order = props.order;
+            changed = true;
+        }
+        if (props.visible) {
+            this.visible = props.visible;
+            changed = true;
+        }
+        if (changed) {
+            this.#emit('layerschange');
+        }
+    }
+    setOrder(order) {
+        this.order = order;
+        this.#displayObject.zIndex = order;
+        this.#emit('layerschange');
+    }
+    getData() {
+        return {
+            id: this.id,
+            name: this.name,
+            // checksum: this.checksum,
+            order: this.order,
+            components: this.components.map((comp) => comp.props.getData()),
+            visible: this.visible,
+            muted: false
+        };
+    }
+    destroy() {
+        if (this.#displayObject) {
+            for (const component of this.components) {
+                component.destroy();
+            }
+            this.#displayObject.destroy();
+        }
+    }
+    get displayObject() {
+        return this.#displayObject;
+    }
+    get id() {
+        return this.#id;
+    }
+    get checksum() {
+        const checksums = this.components.map((comp) => comp.checksum);
+        const checksum = md5(this.order + checksums.join(','));
+        return this.id + '-' + checksum; // TODO generate checksum
+    }
+    get type() {
+        if (this.components.length) {
+            return this.components[0].type;
+        }
+        return undefined;
+    }
+}

package/dist/managers/AppManager.svelte.d.ts

@@ -0,0 +1,23 @@
+import * as PIXI from 'pixi.js-legacy';
+import { DomManager } from './DomManager.js';
+import { StateManager } from './StateManager.svelte.js';
+export declare class AppManager {
+    #private;
+    private state;
+    private dom;
+    private forceCanvas;
+    constructor(cradle: {
+        stateManager: StateManager;
+        domManager: DomManager;
+        forceCanvas: boolean;
+    });
+    get app(): PIXI.Application;
+    get stage(): PIXI.Container;
+    get screen(): PIXI.Rectangle;
+    initialize(): Promise<void>;
+    extractBase64(target?: PIXI.DisplayObject | PIXI.RenderTexture, format?: string, quality?: number): Promise<string>;
+    resize(width: number, height: number): void;
+    render(): void;
+    scale(scale: number): void;
+    destroy(): void;
+}

package/dist/managers/AppManager.svelte.js

@@ -0,0 +1,89 @@
+import * as PIXI from 'pixi.js-legacy';
+import { PIXI_DEFAULTS } from '../constants.js';
+import { registerGsapPlugins } from '../registers.js';
+import { DomManager } from './DomManager.js';
+import { StateManager } from './StateManager.svelte.js';
+export class AppManager {
+    #app;
+    #destroyed = false;
+    state;
+    dom;
+    forceCanvas; // ForceCanvas
+    constructor(cradle) {
+        this.state = cradle.stateManager;
+        this.dom = cradle.domManager;
+        this.forceCanvas = cradle.forceCanvas;
+    }
+    get app() {
+        return this.#app;
+    }
+    get stage() {
+        return this.#app.stage;
+    }
+    get screen() {
+        return this.#app.screen;
+    }
+    async initialize() {
+        if (this.#app && !this.#destroyed) {
+            return;
+        }
+        const { width, height, environment, scale } = this.state;
+        this.#destroyed = false;
+        const canvas = this.dom.canvas;
+        if (environment === 'server') {
+            const ctx = canvas.getContext('2d', { willReadFrequently: true });
+        }
+        const { PixiPlugin } = await registerGsapPlugins();
+        // give the plugin a reference to the PIXI object
+        PixiPlugin.registerPIXI(this.app);
+        const options = {
+            ...PIXI_DEFAULTS,
+            preserveDrawingBuffer: environment === 'server',
+            // clearBeforeRender: environment === 'server' ? false : true,
+            width,
+            height,
+            view: canvas,
+            forceCanvas: environment === 'server' || this.forceCanvas,
+            backgroundColor: environment === 'server' ? 'transparent' : '#ffffff',
+            backgroundAlpha: environment === 'server' ? 0 : 1
+        };
+        this.#app = new PIXI.Application(options);
+        if (scale !== 1) {
+            this.scale(scale);
+        }
+        // Stop the default ticker as we'll use GSAP's ticker
+        this.#app.ticker.stop();
+    }
+    async extractBase64(target, format = 'png', quality = 1) {
+        if (!this.#app)
+            throw new Error('App not initialized');
+        if ('extract' in this.#app.renderer) {
+            return this.#app.renderer.extract.base64(target, format, quality);
+        }
+        throw new Error('Extract not supported in current renderer');
+    }
+    resize(width, height) {
+        this.#app.renderer.resize(width, height);
+    }
+    render() {
+        if (!this.#app)
+            return;
+        this.#app.render();
+    }
+    scale(scale) {
+        if (!this.#app)
+            throw new Error('App not initialized');
+        this.#app.stage.scale.set(scale);
+        this.#app.render();
+    }
+    destroy() {
+        if (this.#app) {
+            this.#app.destroy(true, {
+                children: true,
+                texture: true,
+                baseTexture: true
+            });
+            this.#destroyed = true;
+        }
+    }
+}

package/dist/managers/ComponentsManager.svelte.d.ts

@@ -0,0 +1,49 @@
+import { StateManager } from './StateManager.svelte.js';
+import { EventManager } from './EventManager.js';
+import type { MediaComponent, ResourceManager, IComponent, ComponentData, ComponentRefreshType } from '..';
+import type { AppearanceInput } from '..';
+import { Component } from '../components/Component.svelte.js';
+import { type AwilixContainer } from 'awilix/browser';
+import type { LayersManager } from './LayersManager.svelte.js';
+export declare class ComponentsManager implements ResourceManager<IComponent, ComponentData, AppearanceInput> {
+    #private;
+    private components;
+    private isBuilding;
+    private state;
+    private eventManager;
+    private layersManager;
+    private container;
+    private debouncedRefreshSubtitles;
+    constructor(cradle: {
+        stateManager: StateManager;
+        eventManager: EventManager;
+        layersManager: LayersManager;
+        container: AwilixContainer;
+    });
+    private initializeEventListeners;
+    private isVisible;
+    getAll(): IComponent[];
+    getMediaComponents(): (Component & MediaComponent)[];
+    update(componentId: string, data: Partial<AppearanceInput>, refreshType?: ComponentRefreshType): Promise<void>;
+    get(componentId: string): IComponent | undefined;
+    delete(componentId: string): void;
+    create(componentData: ComponentData): Promise<IComponent | null>;
+    setOrder(id: string, order: number): void;
+    moveUp(id: string): void;
+    moveDown(id: string): void;
+    moveToTop(id: string): void;
+    moveToBottom(id: string): void;
+    moveAfter(id: string, targetId: string): void;
+    moveBefore(id: string, targetId: string): void;
+    bulkUpdate(updates: {
+        id: string;
+        data: Partial<AppearanceInput>;
+    }[]): void;
+    bulkDelete(ids: string[]): void;
+    hide(id: string): Promise<void>;
+    show(id: string): Promise<void>;
+    toggle(id: string): Promise<void>;
+    filter(predicate: (component: IComponent) => boolean): IComponent[];
+    isComponentVisible(componentId: string): boolean;
+    destroy(): void;
+}

package/dist/managers/ComponentsManager.svelte.js

@@ -0,0 +1,247 @@
+import { StateManager } from './StateManager.svelte.js';
+import { EventManager } from './EventManager.js';
+import { Component } from '../components/Component.svelte.js';
+import { ComponentDirector } from '../directors/ComponentDirector.js';
+import { PixiComponentBuilder } from '../builders/PixiComponentBuilder.js';
+import { ComponentState } from '../builders/_ComponentState.svelte.js';
+import { asClass, asValue } from 'awilix/browser';
+import { debounce } from 'lodash-es';
+// import { builtTextComponentForSubtitle } from '../utils/subtitles.js';
+export class ComponentsManager {
+    components = $state(new Map());
+    isBuilding = false;
+    state;
+    eventManager;
+    layersManager;
+    container;
+    debouncedRefreshSubtitles;
+    constructor(cradle) {
+        this.state = cradle.stateManager;
+        this.eventManager = cradle.eventManager;
+        this.layersManager = cradle.layersManager;
+        this.container = cradle.container;
+        // Debounce subtitle refreshes to batch rapid changes (16ms = ~60fps)
+        this.debouncedRefreshSubtitles = debounce(() => this.#scheduleSubtitleRefresh(), 16, {
+            leading: false,
+            trailing: true
+        });
+        this.initializeEventListeners();
+    }
+    initializeEventListeners() {
+        this.eventManager.on('subtitleschange', this.debouncedRefreshSubtitles.bind(this));
+    }
+    #scheduleSubtitleRefresh() {
+        // Schedule the refresh on the next animation frame to avoid blocking
+        requestAnimationFrame(() => {
+            const components = this.filter((c) => c.type === 'SUBTITLES');
+            components.forEach((c) => {
+                c.refresh();
+            });
+        });
+    }
+    isVisible(component) {
+        const { currentTime, duration } = this.state;
+        const startAt = component.props.timeline.startAt || 0;
+        const endAt = component.props.timeline.endAt || duration;
+        return currentTime >= startAt && currentTime <= endAt;
+    }
+    getAll() {
+        return Array.from(this.components.values());
+    }
+    getMediaComponents() {
+        return this.getAll().filter((component) => ['VIDEO', 'AUDIO'].includes(component.type));
+    }
+    #refreshComponent(component, refreshType = 'refresh') {
+        component.refresh();
+        if (refreshType != 'refresh') {
+            component.refresh(refreshType);
+        }
+    }
+    async update(componentId, data, refreshType = 'refresh') {
+        const component = this.get(componentId);
+        if (component) {
+            await component.props.updateAppearance(data);
+            // Only manually refresh if auto-refresh is not enabled
+            if (!component.autoRefresh) {
+                this.#refreshComponent(component, refreshType);
+            }
+        }
+    }
+    get(componentId) {
+        return this.components.get(componentId);
+    }
+    delete(componentId) {
+        const component = this.components.get(componentId);
+        if (component) {
+            const layers = this.layersManager.getAll();
+            const componentLayer = layers.find((layer) => layer.components.some((component) => component.id === componentId));
+            // manage parent layer
+            if (componentLayer) {
+                componentLayer.removeComponent(component);
+                if (!componentLayer.components.length) {
+                    this.layersManager.delete(componentLayer.id);
+                }
+            }
+            component.destroy();
+            this.components.delete(componentId);
+        }
+    }
+    async #buildComponent(componentData) {
+        // this.container.registerInstance('ComponentData', componentData);
+        // const director = this.container.resolve(ComponentDirector);
+        // const builder = this.container.resolve(PixiComponentBuilder);
+        const componentScope = this.container.createScope();
+        // Register component-specific data in the scope
+        componentScope.register({
+            componentData: asValue(componentData),
+            componentState: asClass(ComponentState)
+        });
+        const director = componentScope.resolve('componentDirector');
+        const builder = componentScope.resolve('pixiComponentBuilder');
+        director.setBuilder(builder);
+        director.setComponentData(componentData);
+        const component = director.constructAuto();
+        await component.setup();
+        await component.update();
+        return component;
+    }
+    async create(componentData) {
+        if (this.isBuilding) {
+            throw new Error('Attempted to create multiple components simultaneously. Construct one at the time.');
+        }
+        this.isBuilding = true;
+        let component = null;
+        try {
+            component = await this.#buildComponent(componentData);
+            this.components.set(componentData.id, component);
+        }
+        catch (err) {
+            console.error(err);
+        }
+        finally {
+            this.isBuilding = false;
+        }
+        return component;
+    }
+    setOrder(id, order) {
+        this.#reorderComponent(id, (components, index) => {
+            const [component] = components.splice(index, 1);
+            components.splice(order, 0, component);
+        });
+    }
+    moveUp(id) {
+        this.#reorderComponent(id, (components, index) => {
+            if (index <= 0)
+                return false;
+            [components[index - 1], components[index]] = [components[index], components[index - 1]];
+        });
+    }
+    moveDown(id) {
+        this.#reorderComponent(id, (components, index) => {
+            if (index >= components.length - 1)
+                return false;
+            [components[index], components[index + 1]] = [components[index + 1], components[index]];
+        });
+    }
+    moveToTop(id) {
+        this.#reorderComponent(id, (components, index) => {
+            if (index === 0)
+                return false;
+            const [component] = components.splice(index, 1);
+            components.unshift(component);
+        });
+    }
+    moveToBottom(id) {
+        this.#reorderComponent(id, (components, index) => {
+            if (index === components.length - 1)
+                return false;
+            const [component] = components.splice(index, 1);
+            components.push(component);
+        });
+    }
+    moveAfter(id, targetId) {
+        this.#reorderComponent(id, (components, index) => {
+            const targetIndex = components.findIndex((c) => c.id === targetId);
+            if (targetIndex === -1)
+                return false;
+            const [component] = components.splice(index, 1);
+            const newTargetIndex = components.findIndex((c) => c.id === targetId);
+            components.splice(newTargetIndex + 1, 0, component);
+        });
+    }
+    moveBefore(id, targetId) {
+        this.#reorderComponent(id, (components, index) => {
+            const targetIndex = components.findIndex((c) => c.id === targetId);
+            if (targetIndex === -1)
+                return false;
+            const [component] = components.splice(index, 1);
+            const newTargetIndex = components.findIndex((c) => c.id === targetId);
+            components.splice(newTargetIndex, 0, component);
+        });
+    }
+    #reorderComponent(id, reorderFn) {
+        const layer = this.#findLayerByComponentId(id);
+        if (!layer)
+            return;
+        const index = layer.components.findIndex((c) => c.id === id);
+        if (index === -1)
+            return;
+        const result = reorderFn(layer.components, index);
+        if (result !== false) {
+            this.#updateDisplayOrder(layer);
+        }
+    }
+    #findLayerByComponentId(componentId) {
+        const layers = this.layersManager.getAll();
+        return layers.find((layer) => layer.components.some((c) => c.id === componentId));
+    }
+    #updateDisplayOrder(layer) {
+        const displayObject = layer.displayObject;
+        if (!displayObject)
+            return;
+        // Sync displayObject children order with components array
+        layer.components.forEach((component, index) => {
+            if (component.displayObject) {
+                displayObject.setChildIndex(component.displayObject, index);
+            }
+        });
+    }
+    bulkUpdate(updates) {
+        updates.forEach(({ id, data }) => this.update(id, data));
+    }
+    bulkDelete(ids) {
+        ids.forEach((id) => this.delete(id));
+    }
+    async hide(id) {
+        const component = this.get(id);
+        if (component) {
+            await component.props.setVisible(false);
+        }
+    }
+    async show(id) {
+        const component = this.get(id);
+        if (component) {
+            await component.props.setVisible(true);
+        }
+    }
+    async toggle(id) {
+        const component = this.get(id);
+        if (component) {
+            await component.props.setVisible(!component.props.visible);
+        }
+    }
+    filter(predicate) {
+        return this.getAll().filter(predicate);
+    }
+    isComponentVisible(componentId) {
+        const component = this.get(componentId);
+        if (!component) {
+            return false;
+        }
+        return this.isVisible(component);
+    }
+    destroy() {
+        this.eventManager.removeEventListener('subtitleschange', this.debouncedRefreshSubtitles);
+        this.debouncedRefreshSubtitles.cancel(); // Cancel any pending debounced calls
+    }
+}

package/dist/managers/DomManager.d.ts

@@ -0,0 +1,18 @@
+import type { RenderEnvironment } from '..';
+import { StateManager } from './StateManager.svelte.js';
+export declare class DomManager {
+    #private;
+    private state;
+    private env;
+    private sceneContainer;
+    constructor(cradle: {
+        stateManager: StateManager;
+        environment: RenderEnvironment;
+        containerElement: HTMLDivElement;
+    });
+    get canvas(): HTMLCanvasElement;
+    get htmlContainer(): HTMLDivElement;
+    scale(scale: number): void;
+    destroy(): void;
+    removeLoader(): void;
+}

package/dist/managers/DomManager.js

@@ -0,0 +1,73 @@
+import { StateManager } from './StateManager.svelte.js';
+export class DomManager {
+    #canvas;
+    #htmlContainer;
+    #loader;
+    state;
+    env;
+    sceneContainer;
+    constructor(cradle) {
+        this.state = cradle.stateManager;
+        this.env = cradle.environment; // Environment
+        this.sceneContainer = cradle.containerElement; // ContainerElement
+        this.#initialize();
+    }
+    get canvas() {
+        return this.#canvas;
+    }
+    get htmlContainer() {
+        return this.#htmlContainer;
+    }
+    #initialize() {
+        this.#loader = this.sceneContainer.appendChild(document.createElement('div'));
+        this.#loader.style.width = '100%';
+        this.#loader.style.height = '100%';
+        this.#loader.style.position = 'absolute';
+        this.#loader.style.top = '0';
+        this.#loader.style.left = '0';
+        this.#loader.style.background = `
+            linear-gradient(
+                90deg,
+                #f0f0f0 0%,
+                #ccc 50%,
+                #f0f0f0 100%
+            )
+        `;
+        this.#loader.style.backgroundSize = '200% 100%';
+        this.#loader.style.animation = 'shimmer 4s infinite linear';
+        this.sceneContainer.style.overflow = 'hidden';
+        this.sceneContainer.style.position = 'relative';
+        this.#canvas = this.sceneContainer.appendChild(document.createElement('canvas'));
+        this.#canvas.style.position = 'absolute';
+        this.#canvas.style.pointerEvents = 'none';
+        this.#htmlContainer = this.sceneContainer.appendChild(document.createElement('div'));
+        this.#htmlContainer.style.transformOrigin = '0 0';
+        this.#htmlContainer.style.transform = `scale(${this.state.scale})`;
+        this.#htmlContainer.style.position = 'relative';
+        this.#htmlContainer.style.width = this.state.width + 'px';
+        this.#htmlContainer.style.height = this.state.height + 'px';
+        if (this.env === 'server') {
+            this.#htmlContainer.style.position = 'absolute';
+            this.#htmlContainer.style.top = '-10000px';
+            this.#htmlContainer.style.left = '-10000px';
+        }
+    }
+    scale(scale) {
+        const clampedScale = Math.max(0.01, Math.min(scale, 2));
+        this.state.setScale(clampedScale);
+        this.#htmlContainer.style.transform = `scale(${clampedScale})`;
+        const { width, height } = this.state;
+        this.sceneContainer.style.width = Math.round(width * clampedScale) + 'px';
+        this.sceneContainer.style.height = Math.round(height * clampedScale) + 'px';
+    }
+    destroy() {
+        this.#canvas.remove();
+        this.#htmlContainer.remove();
+        this.#loader?.remove();
+    }
+    removeLoader() {
+        if (this.#loader) {
+            this.#loader.remove();
+        }
+    }
+}

package/dist/managers/EventManager.d.ts

@@ -0,0 +1,7 @@
+import type { EventType, EventPayload, EventMap } from '..';
+export declare class EventManager extends EventTarget {
+    isReady: boolean;
+    constructor();
+    emit<T extends EventType>(event: T, props?: EventPayload<T>): void;
+    on<K extends keyof EventMap>(event: K, callback: (event: CustomEvent<EventMap[K]>) => void, options?: boolean | AddEventListenerOptions): void;
+}

package/dist/managers/EventManager.js

@@ -0,0 +1,22 @@
+export class EventManager extends EventTarget {
+    isReady = false;
+    constructor() {
+        super();
+    }
+    emit(event, props) {
+        if (!this.isReady) {
+            return;
+        }
+        // Note: 'subtitleschange' is NOT in this list - subtitle refreshes are handled
+        // by ComponentsManager with debouncing to avoid blocking the main thread
+        const rerenderableEvents = ['layerschange', 'componentschange', 'componentchange'];
+        if (rerenderableEvents.includes(event)) {
+            this.emit('rerender');
+        }
+        this.dispatchEvent(new CustomEvent(event, { detail: props }));
+    }
+    // "on" automatically returns the right type under event.details object
+    on(event, callback, options) {
+        this.addEventListener(event, ((e) => callback(e)), options);
+    }
+}