visualfries 0.1.0

package/dist/components/ComponentContext.svelte.js

@@ -0,0 +1,105 @@
+import { StateManager } from '../managers/StateManager.svelte.js';
+import { EventManager } from '../managers/EventManager.js';
+export class ComponentContext {
+    #data;
+    // context data replacement, useful for modifiing context of subtitles
+    #contextData;
+    disabled = false;
+    resources = new Map();
+    state;
+    eventManager;
+    constructor(cradle) {
+        this.state = cradle.stateManager;
+        this.eventManager = cradle.eventManager;
+    }
+    setComponentProps(props) {
+        this.#data = props;
+        this.#contextData = undefined;
+    }
+    get duration() {
+        // TODO maybe we will need to get duration from the contextData
+        return this.#data.duration;
+    }
+    get contextData() {
+        return this.#contextData ? this.#contextData : this.#data.getData();
+    }
+    get data() {
+        return this.#data.getData();
+    }
+    get id() {
+        return this.data.id;
+    }
+    get type() {
+        return this.data.type;
+    }
+    get isActive() {
+        const currentTime = this.sceneState.currentTime;
+        const startAt = this.data.timeline.startAt;
+        const endAt = this.data.timeline.endAt;
+        // Add small tolerance to handle floating point precision issues
+        const tolerance = 1e-10;
+        return currentTime >= startAt - tolerance && currentTime <= endAt + tolerance;
+    }
+    get progress() {
+        const currentTime = this.sceneState.currentTime;
+        const startAt = this.data.timeline.startAt;
+        const endAt = this.data.timeline.endAt;
+        const duration = endAt - startAt;
+        if (duration === 0)
+            return 0;
+        // Calculate progress as percentage (0-1)
+        const progress = Math.max(0, Math.min(1, (currentTime - startAt) / duration));
+        return progress;
+    }
+    get currentComponentTime() {
+        const startAt = this.state.transformTime(this.data.timeline.startAt);
+        let startAtModifier = 0;
+        if (this.data.type === 'VIDEO') {
+            startAtModifier = this.data.source.startAt ?? 0;
+        }
+        // Calculate relative time from start of component
+        const relativeTime = this.sceneState.currentTime - startAt;
+        // Add starting_time modifier
+        return this.state.transformTime(startAtModifier, true) + relativeTime;
+    }
+    get componentTimelineTime() {
+        const startAt = this.data.timeline.startAt;
+        const endAt = this.data.timeline.endAt;
+        const duration = endAt - startAt;
+        const relativeTime = this.sceneState.currentTime - startAt;
+        if (relativeTime < 0 || relativeTime > duration) {
+            return undefined;
+        }
+        return this.state.transformTime(relativeTime);
+    }
+    get currentTime() {
+        return this.state.currentTime;
+    }
+    get sceneState() {
+        return this.state;
+    }
+    updateContextData(data) {
+        this.#contextData = data;
+    }
+    resetContextData() {
+        this.#contextData = undefined;
+    }
+    getResource(type) {
+        return this.resources.get(type);
+    }
+    setResource(type, resource) {
+        this.resources.set(type, resource);
+    }
+    removeResource(type) {
+        this.resources.delete(type);
+    }
+    async runHooks(hooks, type) {
+        // Sort handlers by priority (low to high, meaning 1 has higher priority then 100)
+        const sortedHooks = [...hooks].sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
+        for (let i = 0; i < sortedHooks.length; i += 1) {
+            const handler = sortedHooks[i];
+            await handler.handle(type, this);
+        }
+    }
+    destroy() { }
+}

package/dist/components/hooks/AnimationHook.d.ts

@@ -0,0 +1,25 @@
+import type { IComponentContext, IComponentHook, HookType } from '../..';
+import { TimelineManager } from '../../managers/TimelineManager.svelte.js';
+import type { ComponentAnimationTransformer } from '../../animations/transformers/AnimationReferenceTransformer.js';
+import { SplitTextCache } from '../../animations/SplitTextCache.js';
+/**
+ * Animation hook for managing component animations
+ * This hook can be applied to any component type and handles animation lifecycle
+ */
+export declare class AnimationHook implements IComponentHook {
+    #private;
+    private timeline;
+    private splitTextCache;
+    types: HookType[];
+    priority: number;
+    animTransformer: ComponentAnimationTransformer;
+    constructor(cradle: {
+        timelineManager: TimelineManager;
+        componentAnimationTransformer: ComponentAnimationTransformer;
+        splitTextCache: SplitTextCache;
+    });
+    /**
+     * Hook handle method
+     */
+    handle(type: HookType, context: IComponentContext): Promise<void>;
+}

package/dist/components/hooks/AnimationHook.js

@@ -0,0 +1,180 @@
+import { AnimationPresetShape } from '../..';
+import { TimelineManager } from '../../managers/TimelineManager.svelte.js';
+import { AnimationContext } from '../../animations/AnimationContext.js';
+import { GsapEngineAdaptor } from '../../animations/engines/GSAPEngineAdaptor.js';
+import { AnimationBuilder } from '../../animations/animationBuilder.js';
+import { AnimationPreset } from '../../animations/animationPreset.js';
+import { gsap } from 'gsap';
+import { SplitTextCache } from '../../animations/SplitTextCache.js';
+import { WordHighlighterAnimationBuilder } from '../../animations/builders/WordHighlighterAnimationBuilder.js';
+import { LineHighlighterAnimationBuilder } from '../../animations/builders/LineHighlighterAnimationBuilder.js';
+/**
+ * Animation hook for managing component animations
+ * This hook can be applied to any component type and handles animation lifecycle
+ */
+export class AnimationHook {
+    #handlers = {
+        setup: this.#handleSetup.bind(this),
+        destroy: this.#handleDestroy.bind(this),
+        update: this.#handleUpdate.bind(this),
+        refresh: this.#handleRefresh.bind(this),
+        'refresh:animation': this.#handleRefresh.bind(this)
+    };
+    #context;
+    #currentId = undefined;
+    #componentTimeline = undefined;
+    #animationsBuilt = false;
+    timeline;
+    splitTextCache;
+    types = Object.keys(this.#handlers);
+    priority = 1;
+    animTransformer;
+    constructor(cradle) {
+        this.timeline = cradle.timelineManager;
+        this.animTransformer = cradle.componentAnimationTransformer;
+        this.splitTextCache = cradle.splitTextCache;
+    }
+    #getComponentAnimations() {
+        const target = this.#context.resources.get('animationTarget');
+        const animationData = this.#context.resources.get('animationData') ??
+            {};
+        const animations = [...(this.#context.contextData.animations.list ?? [])];
+        const customAnimations = WordHighlighterAnimationBuilder.build(this.#context.contextData, target, animationData, this.splitTextCache);
+        const lineAnimations = LineHighlighterAnimationBuilder.build(this.#context.contextData, target, animationData, this.splitTextCache);
+        animations.push(...customAnimations);
+        animations.push(...lineAnimations);
+        return animations;
+    }
+    /**
+     * Handle hook setup
+     */
+    async #handleSetup() {
+        if (this.#componentTimeline !== undefined) {
+            return;
+        }
+        // Get component animations
+        if (!this.#context.data.animations.enabled) {
+            return;
+        }
+        const target = this.#context.resources.get('animationTarget');
+        if (!target) {
+            // console.warn("Animation target not specified. Skipping animations")
+            return;
+        }
+        const animations = this.#getComponentAnimations();
+        if (!animations?.length) {
+            return;
+        }
+        // if (this.#animationsBuilt) {
+        // 	return;
+        // }
+        this.#currentId = this.#context.contextData.id;
+        const animationTimes = animations.map((anim) => {
+            return {
+                id: anim.id,
+                startAt: anim.startAt ?? 0
+            };
+        });
+        // first we need to transform / normalize strings or simplified animations into animations
+        const anims = animations
+            .map((anim) => {
+            const animation = this.animTransformer.handle(anim.animation);
+            if (animation) {
+                animation.id = anim.id;
+                return animation;
+            }
+        })
+            .filter((anim) => anim !== null);
+        // build timeline and add it to the main timeline
+        const animationData = this.#context.resources.get('animationData') ??
+            {};
+        const animationsTimeline = gsap.timeline();
+        let hasAnimations = false;
+        for (const anim of anims) {
+            try {
+                if (!anim) {
+                    continue;
+                }
+                const parsedPreset = AnimationPresetShape.safeParse(anim);
+                if (!parsedPreset.success) {
+                    continue;
+                }
+                const animationPreset = new AnimationPreset(anim);
+                const animationContext = new AnimationContext(target, animationPreset, this.splitTextCache, {
+                    ...animationData
+                });
+                animationContext.setAnimationTargetDuration(this.#context.duration);
+                // 3. Instantiate Engine Adaptor
+                const gsapAdaptor = new GsapEngineAdaptor();
+                // 4. Build the Animation
+                const builder = new AnimationBuilder(animationContext, gsapAdaptor);
+                const animation = builder.build();
+                if (animation) {
+                    // pass in animation start time so it starts at the correct time, relative to the component
+                    const animationTime = animationTimes.find((at) => at.id === anim.id)?.startAt;
+                    animationsTimeline.add(animation, animationTime ?? 0);
+                    hasAnimations = true;
+                }
+                this.#animationsBuilt = true;
+            }
+            catch (error) {
+                console.error('Error building animation', error, anim);
+            }
+        }
+        if (hasAnimations) {
+            this.#componentTimeline = animationsTimeline;
+            this.timeline.addLabel(this.#context.contextData.id, this.#context.contextData.timeline.startAt);
+            this.timeline.add(this.#componentTimeline, this.#context.contextData.id);
+        }
+    }
+    /**
+     * Handle animation refresh
+     */
+    async #handleRefresh() {
+        await this.#handleDestroy();
+        await this.#handleSetup();
+    }
+    /**
+     * Handle component updates
+     */
+    async #handleUpdate() {
+        // Check if component ID has changed
+        if (this.#context.isActive && this.#currentId !== this.#context.contextData.id) {
+            await this.#handleRefresh();
+        }
+        // Setup if component becomes active and animations aren't set up
+        if (this.#context.isActive) {
+            //  && !this.#controls
+            await this.#handleSetup();
+        }
+    }
+    /**
+     * Handle hook destruction
+     */
+    async #handleDestroy() {
+        // this.#controls
+        this.#currentId = undefined;
+        this.#componentTimeline?.revert();
+        this.#componentTimeline?.kill();
+        this.#componentTimeline = undefined;
+        if (this.#context.resources.get('animationTarget') instanceof HTMLElement) {
+            // clear cache for the animation target so it works on rewind / fast forward as underlying instances were destroyed by revert
+            this.splitTextCache.clearCache(this.#context.resources.get('animationTarget'));
+        }
+    }
+    /**
+     * Hook handle method
+     */
+    async handle(type, context) {
+        this.#context = context;
+        // Skip if component is disabled
+        if (this.#context.disabled) {
+            return;
+        }
+        // Call the appropriate handler
+        const handler = this.#handlers[type];
+        if (handler) {
+            await handler();
+        }
+    }
+}

package/dist/components/hooks/CanvasShapeHook.d.ts

@@ -0,0 +1,12 @@
+import type { IComponentContext, IComponentHook, HookType } from '../..';
+import { StateManager } from '../../managers/StateManager.svelte.js';
+export declare class CanvasShapeHook implements IComponentHook {
+    #private;
+    types: HookType[];
+    priority: number;
+    private state;
+    constructor(cradle: {
+        stateManager: StateManager;
+    });
+    handle(type: HookType, context: IComponentContext): Promise<void>;
+}

package/dist/components/hooks/CanvasShapeHook.js

@@ -0,0 +1,229 @@
+import { computeXYAngle } from '../../utils/canvas.js';
+import { StateManager } from '../../managers/StateManager.svelte.js';
+export class CanvasShapeHook {
+    types = ['setup', 'update', 'destroy'];
+    priority = 1;
+    #context;
+    #resource;
+    #width;
+    #height;
+    state;
+    constructor(cradle) {
+        this.state = cradle.stateManager;
+    }
+    #shapeRenderers = new Map([
+        ['rectangle', this.#renderRectangle.bind(this)],
+        ['circle', this.#renderCircle.bind(this)],
+        ['triangle', this.#renderTriangle.bind(this)],
+        ['star', this.#renderStar.bind(this)],
+        ['ellipse', this.#renderEllipse.bind(this)],
+        ['polygon', this.#renderPolygon.bind(this)],
+        ['path', this.#renderPath.bind(this)]
+    ]);
+    #renderShape(ctx) {
+        if (this.#context.data.type !== 'SHAPE')
+            return;
+        const shapeData = this.#context.data;
+        const renderer = this.#shapeRenderers.get(shapeData.shape.type);
+        if (renderer) {
+            renderer(ctx);
+        }
+    }
+    #renderRectangle(ctx) {
+        this.#applyFill(ctx);
+        ctx.fillRect(0, 0, this.#width, this.#height);
+    }
+    #renderEllipse(ctx) {
+        this.#applyFill(ctx);
+        const centerX = this.#width / 2;
+        const centerY = this.#height / 2;
+        const radiusX = this.#width / 2;
+        const radiusY = this.#height / 2;
+        ctx.beginPath();
+        ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, Math.PI * 2);
+        ctx.fill();
+    }
+    #renderPolygon(ctx) {
+        if (this.#context.data.type !== 'SHAPE')
+            return;
+        const shapeData = this.#context.data;
+        // Handle new schema structure
+        const points = 'points' in shapeData.shape ? shapeData.shape.points : [];
+        if (!points || points.length < 3)
+            return;
+        this.#applyFill(ctx);
+        ctx.beginPath();
+        ctx.moveTo(points[0].x, points[0].y);
+        for (let i = 1; i < points.length; i++) {
+            ctx.lineTo(points[i].x, points[i].y);
+        }
+        ctx.closePath();
+        ctx.fill();
+    }
+    #renderPath(ctx) {
+        if (this.#context.data.type !== 'SHAPE')
+            return;
+        const shapeData = this.#context.data;
+        // Handle new schema structure
+        const pathData = 'pathData' in shapeData.shape ? shapeData.shape.pathData : '';
+        if (!pathData)
+            return;
+        this.#applyFill(ctx);
+        const path = new Path2D(pathData);
+        ctx.fill(path);
+    }
+    #renderCircle(ctx) {
+        this.#applyFill(ctx);
+        const centerX = this.#width / 2;
+        const centerY = this.#height / 2;
+        const radius = Math.min(this.#width, this.#height) / 2;
+        ctx.beginPath();
+        ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+        ctx.fill();
+    }
+    #renderTriangle(ctx) {
+        this.#applyFill(ctx);
+        ctx.beginPath();
+        ctx.moveTo(this.#width / 2, 0);
+        ctx.lineTo(this.#width, this.#height);
+        ctx.lineTo(0, this.#height);
+        ctx.closePath();
+        ctx.fill();
+    }
+    #renderStar(ctx) {
+        this.#applyFill(ctx);
+        const centerX = this.#width / 2;
+        const centerY = this.#height / 2;
+        const outerRadius = Math.min(this.#width, this.#height) / 2;
+        const innerRadius = outerRadius * 0.4;
+        const spikes = 5;
+        ctx.beginPath();
+        ctx.moveTo(centerX, centerY - outerRadius);
+        for (let i = 0; i < spikes * 2; i++) {
+            const radius = i % 2 === 0 ? outerRadius : innerRadius;
+            const angle = (Math.PI * i) / spikes - Math.PI / 2;
+            const x = centerX + Math.cos(angle) * radius;
+            const y = centerY + Math.sin(angle) * radius;
+            ctx.lineTo(x, y);
+        }
+        ctx.closePath();
+        ctx.fill();
+    }
+    #applyFill(ctx) {
+        if (this.#context.data.type !== 'SHAPE')
+            return;
+        const shapeData = this.#context.data;
+        const appearance = shapeData.appearance;
+        const background = appearance.background;
+        // If background is a gradient object
+        if (background &&
+            typeof background === 'object' &&
+            'colors' in background &&
+            Array.isArray(background.colors) &&
+            background.colors.length > 1) {
+            const { colors, angle } = background;
+            const { x1, y1, x2, y2 } = computeXYAngle(angle, this.#width, this.#height);
+            const gradient = ctx.createLinearGradient(x1, y1, x2, y2);
+            gradient.addColorStop(0, colors[0]);
+            gradient.addColorStop(1, colors[1]);
+            ctx.fillStyle = gradient;
+            return;
+        }
+        const fill = appearance.fill;
+        const color = appearance.color;
+        if (fill) {
+            ctx.fillStyle = fill;
+        }
+        else if (color) {
+            ctx.fillStyle = color;
+        }
+        else {
+            ctx.fillStyle = '#000000'; // Default to black if no fill specified
+        }
+    }
+    async #handleSetup() {
+        if (this.#resource) {
+            return;
+        }
+        if (this.#context.data.type !== 'SHAPE')
+            return;
+        const shapeData = this.#context.data;
+        const { width, height } = shapeData.appearance;
+        this.#width = width;
+        this.#height = height;
+        const resource = document.createElement('canvas');
+        resource.width = width;
+        resource.height = height;
+        const ctx = resource.getContext('2d');
+        ctx?.clearRect(0, 0, width, height);
+        // this logic will differ by the type of element type given
+        if (ctx) {
+            this.#renderShape(ctx);
+        }
+        this.#resource = resource;
+        this.#context.setResource('pixiResource', resource);
+    }
+    async #handleDestroy() {
+        // remove event listeners from video
+        this.#resource.remove();
+    }
+    async #handleUpdate() {
+        if (!this.#resource) {
+            // Recreate the canvas if it doesn't exist
+            await this.#handleSetup();
+        }
+        if (this.#context.data.type !== 'SHAPE')
+            return;
+        const shapeData = this.#context.data;
+        // Skip progress shapes - they're handled by PixiProgressShapeHook
+        if (shapeData.shape.type === 'progress')
+            return;
+        const ctx = this.#resource.getContext('2d');
+        if (ctx) {
+            // Only static shapes need texture updates (for dynamic content like animations)
+            // Clear and re-render if needed
+            ctx.clearRect(0, 0, this.#width, this.#height);
+            this.#renderShape(ctx);
+            // Force PIXI texture update
+            const pixiTexture = this.#context.getResource('pixiTexture');
+            if (pixiTexture) {
+                pixiTexture.update();
+                // Mark dirty when shape is re-rendered
+                this.state.markDirty();
+            }
+        }
+    }
+    async handle(type, context) {
+        this.#context = context;
+        if (this.#context.data.type !== 'SHAPE')
+            return;
+        const shapeData = this.#context.data;
+        // Skip progress shapes - they're handled by PixiProgressShapeHook
+        if (shapeData.shape.type === 'progress')
+            return;
+        const supportedTypes = [
+            'rectangle',
+            'triangle',
+            'circle',
+            'star',
+            'ellipse',
+            'polygon',
+            'path'
+        ];
+        if (!supportedTypes.includes(shapeData.shape.type)) {
+            console.error('CanvasShapeHook: Unsupported shape type: ' +
+                shapeData.shape.type +
+                '. Supported types are ' +
+                supportedTypes.join(', ') +
+                '. Progress shapes are handled by PixiProgressShapeHook.');
+            return;
+        }
+        if (type === 'setup') {
+            return await this.#handleSetup();
+        }
+        else if (type === 'destroy') {
+            return await this.#handleDestroy();
+        }
+        await this.#handleUpdate();
+    }
+}

package/dist/components/hooks/HtmlAnimationHook.d.ts

@@ -0,0 +1,8 @@
+import type { IComponentContext, IComponentHook, HookType } from '../..';
+export declare class HtmlAnimationHook implements IComponentHook {
+    #private;
+    types: HookType[];
+    priority: number;
+    private buildTimeline;
+    handle(type: HookType, context: IComponentContext): Promise<void>;
+}

package/dist/components/hooks/HtmlAnimationHook.js

@@ -0,0 +1,70 @@
+export class HtmlAnimationHook {
+    #handlers = {
+        // setup: this.#handleSetup.bind(this),
+        destroy: this.#handleDestroy.bind(this),
+        refresh: this.#handleRefresh.bind(this),
+        update: this.#handleUpdate.bind(this),
+        'refresh:animation': this.#handleRefresh.bind(this)
+    };
+    #context;
+    #htmlEl = undefined;
+    #tl = false;
+    #currentId = undefined;
+    types = Object.keys(this.#handlers);
+    priority = 1;
+    buildTimeline() {
+        if (this.#tl) {
+            return;
+        }
+        if (!this.#htmlEl) {
+            throw new Error('html element not found for animation hook of component: ' + this.#context.contextData.id);
+        }
+    }
+    async #handleSetup() {
+        if (this.#htmlEl) {
+            return;
+        }
+        const el = this.#context.getResource('htmlEl');
+        if (!el) {
+            throw new Error('HtmlAnimationHandler: Html el resource not found: ' + this.#context.contextData.id);
+        }
+        this.#htmlEl = el;
+        // this is a gsap animation that might utilize gsap text splitter and other complex animations and apply them to htmlEl
+        this.buildTimeline();
+        this.#currentId = this.#context.contextData.id;
+    }
+    async #handleRefresh() {
+        await this.#handleDestroy();
+        await this.#handleSetup();
+    }
+    // update on context id change, for example, subtitle changed so id changed as well
+    async #handleUpdate() {
+        if (this.#context.isActive && this.#currentId !== this.#context.contextData.id) {
+            await this.#handleRefresh();
+        }
+        if (this.#context.isActive && !this.#htmlEl) {
+            await this.#handleSetup();
+        }
+    }
+    async #handleDestroy() {
+        // remove event listeners from video
+        if (this.#tl) {
+            this.#tl = false;
+            // this.timeline.getTimeline().remove(this.#tl);
+            // this.#tl.kill();
+            // this.#tl = undefined;
+        }
+        this.#htmlEl = undefined;
+    }
+    // we need to set context here and not inject it is bound to component and we can update any of the components at any time
+    async handle(type, context) {
+        this.#context = context;
+        if (this.#context.disabled) {
+            return;
+        }
+        const handler = this.#handlers[type];
+        if (handler) {
+            await handler();
+        }
+    }
+}

package/dist/components/hooks/HtmlTextHook.d.ts

@@ -0,0 +1,16 @@
+import type { IComponentContext, IComponentHook, HookType } from '../..';
+import type { DomManager } from '../../managers/DomManager.js';
+import type { ComponentsManager } from '../../managers/ComponentsManager.svelte.js';
+export declare class HtmlTextHook implements IComponentHook {
+    #private;
+    types: HookType[];
+    priority: number;
+    private domManager;
+    private componentsManager;
+    constructor(cradle: {
+        domManager: DomManager;
+        componentsManager: ComponentsManager;
+    });
+    private buildHtmlElements;
+    handle(type: HookType, context: IComponentContext): Promise<void>;
+}