visualfries 0.1.0

package/dist/components/hooks/VerifyMediaHook.js

@@ -0,0 +1,21 @@
+import { VideoComponentShape } from '../..';
+export class VerifyMediaHook {
+    types = ['setup', 'refresh'];
+    priority = 1;
+    #context;
+    async #handleSetup() {
+        const data = VideoComponentShape.safeParse(this.#context.contextData);
+        if (!data.success) {
+            console.error('Video Compoponent verify failed: ' + data.error.message);
+            this.#context.disabled = true;
+            return;
+        }
+        this.#context.setResource('mediaShape', data.data);
+    }
+    async handle(type, context) {
+        this.#context = context;
+        if (type === 'setup' || type === 'refresh') {
+            return await this.#handleSetup();
+        }
+    }
+}

package/dist/components/hooks/shapes/progress/CustomProgressRenderer.d.ts

@@ -0,0 +1,8 @@
+import type { IComponentContext } from '../../../..';
+import type { CustomProgressConfig } from '../../../..';
+import { ProgressRenderer } from './ProgressRenderer.js';
+export declare class CustomProgressRenderer extends ProgressRenderer {
+    private config;
+    constructor(context: IComponentContext, width: number, height: number, config: CustomProgressConfig);
+    update(progress: number): void;
+}

package/dist/components/hooks/shapes/progress/CustomProgressRenderer.js

@@ -0,0 +1,53 @@
+import * as PIXI from 'pixi.js-legacy';
+import { ProgressRenderer } from './ProgressRenderer.js';
+export class CustomProgressRenderer extends ProgressRenderer {
+    config;
+    constructor(context, width, height, config) {
+        super(context, width, height);
+        this.config = config;
+    }
+    update(progress) {
+        // Use original dimensions, not the scaled display object dimensions
+        const displayWidth = this.width;
+        const displayHeight = this.height;
+        // Progress bars only support solid colors - graphics drawing
+        const graphics = this.displayObject;
+        graphics.clear();
+        const color = this.getSolidColor();
+        const strokeWidth = this.config.strokeWidth || 4;
+        // For custom progress, we'll create a simple implementation
+        // that draws a path-based progress indicator
+        // In a full implementation, you'd parse the SVG path data
+        // and create a custom progress visualization
+        graphics.lineStyle({
+            width: strokeWidth,
+            color: color,
+            cap: this.config.capStyle === 'butt'
+                ? PIXI.LINE_CAP.BUTT
+                : this.config.capStyle === 'square'
+                    ? PIXI.LINE_CAP.SQUARE
+                    : PIXI.LINE_CAP.ROUND
+        });
+        // Simple implementation: draw a custom shape that fills based on progress
+        // This is a placeholder - in practice you'd parse the pathData
+        const centerX = displayWidth / 2;
+        const centerY = displayHeight / 2;
+        const radius = Math.min(displayWidth, displayHeight) / 4;
+        // Draw a custom progress indicator
+        // For now, we'll draw a star-like shape that fills based on progress
+        const points = 5;
+        const outerRadius = radius * 2;
+        const innerRadius = radius;
+        graphics.beginFill(color);
+        graphics.moveTo(centerX, centerY - outerRadius * progress);
+        for (let i = 0; i < points * 2; i++) {
+            const angle = (Math.PI * i) / points - Math.PI / 2;
+            const currentRadius = i % 2 === 0 ? outerRadius * progress : innerRadius * progress;
+            const x = centerX + Math.cos(angle) * currentRadius;
+            const y = centerY + Math.sin(angle) * currentRadius;
+            graphics.lineTo(x, y);
+        }
+        graphics.closePath();
+        graphics.endFill();
+    }
+}

package/dist/components/hooks/shapes/progress/DoubleProgressRenderer.d.ts

@@ -0,0 +1,8 @@
+import type { IComponentContext } from '../../../..';
+import type { DoubleProgressConfig } from '../../../..';
+import { ProgressRenderer } from './ProgressRenderer.js';
+export declare class DoubleProgressRenderer extends ProgressRenderer {
+    private config;
+    constructor(context: IComponentContext, width: number, height: number, config: DoubleProgressConfig);
+    update(progress: number): void;
+}

package/dist/components/hooks/shapes/progress/DoubleProgressRenderer.js

@@ -0,0 +1,69 @@
+import * as PIXI from 'pixi.js-legacy';
+import { ProgressRenderer } from './ProgressRenderer.js';
+export class DoubleProgressRenderer extends ProgressRenderer {
+    config;
+    constructor(context, width, height, config) {
+        super(context, width, height);
+        this.config = config;
+    }
+    update(progress) {
+        // Use original dimensions, not the scaled display object dimensions
+        const displayWidth = this.width;
+        const displayHeight = this.height;
+        // Progress bars only support solid colors - graphics drawing
+        const graphics = this.displayObject;
+        graphics.clear();
+        const color = this.getSolidColor();
+        const strokeWidth = 4; // Default stroke width for double progress
+        graphics.lineStyle({
+            width: strokeWidth,
+            color: color,
+            cap: PIXI.LINE_CAP.ROUND
+        });
+        // Draw each progress path
+        this.config.paths.forEach((path) => {
+            const pathProgress = progress; // Could be different for each path in the future
+            const offset = path.offset || 0;
+            let startX = 0, startY = 0, endX = 0, endY = 0;
+            // Calculate path coordinates based on position
+            switch (path.position) {
+                case 'top':
+                    startX = 0;
+                    startY = offset;
+                    endX = displayWidth;
+                    endY = offset;
+                    break;
+                case 'bottom':
+                    startX = 0;
+                    startY = displayHeight - offset;
+                    endX = displayWidth;
+                    endY = displayHeight - offset;
+                    break;
+                case 'left':
+                    startX = offset;
+                    startY = 0;
+                    endX = offset;
+                    endY = displayHeight;
+                    break;
+                case 'right':
+                    startX = displayWidth - offset;
+                    startY = 0;
+                    endX = displayWidth - offset;
+                    endY = displayHeight;
+                    break;
+            }
+            // Apply reverse if needed
+            if (path.reverse) {
+                [startX, startY, endX, endY] = [endX, endY, startX, startY];
+            }
+            // Calculate progress point
+            const progressDistance = pathProgress * Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
+            const ratio = progressDistance / Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
+            const progressX = startX + (endX - startX) * ratio;
+            const progressY = startY + (endY - startY) * ratio;
+            // Draw the progress line
+            graphics.moveTo(startX, startY);
+            graphics.lineTo(progressX, progressY);
+        });
+    }
+}

package/dist/components/hooks/shapes/progress/LinearProgressRenderer.d.ts

@@ -0,0 +1,8 @@
+import type { IComponentContext } from '../../../..';
+import type { LinearProgressConfig } from '../../../..';
+import { ProgressRenderer } from './ProgressRenderer.js';
+export declare class LinearProgressRenderer extends ProgressRenderer {
+    private config;
+    constructor(context: IComponentContext, width: number, height: number, config: LinearProgressConfig);
+    update(progress: number): void;
+}

package/dist/components/hooks/shapes/progress/LinearProgressRenderer.js

@@ -0,0 +1,60 @@
+import * as PIXI from 'pixi.js-legacy';
+import { ProgressRenderer } from './ProgressRenderer.js';
+export class LinearProgressRenderer extends ProgressRenderer {
+    config;
+    constructor(context, width, height, config) {
+        super(context, width, height);
+        this.config = config;
+    }
+    update(progress) {
+        const amount = this.config.reverse ? 1 - progress : progress;
+        // current dimensions after placement
+        const displayWidth = this.width;
+        const displayHeight = this.height;
+        const color = this.getSolidColor();
+        // solid color graphics
+        const graphics = this.displayObject;
+        graphics.clear();
+        // fix for legacy pixi renderer - without this it does not work as expected!!! this sets the right boundaries for rects to work
+        // graphics.beginFill(color);
+        graphics.beginFill(0x00000001, 0.0000000001);
+        graphics.drawRect(0, 0, displayWidth, displayHeight);
+        graphics.endFill();
+        const originalX = graphics.x;
+        const originalY = graphics.y;
+        let x = 0, y = 0, w = 0, h = 0;
+        if (this.config.direction === 'horizontal') {
+            w = displayWidth * amount;
+            h = displayHeight;
+            switch (this.config.anchor) {
+                case 'center':
+                    x = originalX + (displayWidth - w) / 2;
+                    break;
+                case 'end':
+                    x = originalX + displayWidth - w;
+                    break;
+                default:
+                    x = originalX;
+            }
+            y = originalY;
+        }
+        else {
+            w = displayWidth;
+            h = displayHeight * amount;
+            switch (this.config.anchor) {
+                case 'center':
+                    y = originalY + (displayHeight - h) / 2;
+                    break;
+                case 'end':
+                    y = originalY + displayHeight - h;
+                    break;
+                default:
+                    y = originalY;
+            }
+            x = originalX;
+        }
+        if (w > 0 && h > 0) {
+            graphics.beginFill(color).drawRect(0, 0, w, h).endFill();
+        }
+    }
+}

package/dist/components/hooks/shapes/progress/PerimeterProgressRenderer.d.ts

@@ -0,0 +1,9 @@
+import type { IComponentContext } from '../../../..';
+import type { PerimeterProgressConfig } from '../../../..';
+import { ProgressRenderer } from './ProgressRenderer.js';
+export declare class PerimeterProgressRenderer extends ProgressRenderer {
+    private config;
+    constructor(context: IComponentContext, width: number, height: number, config: PerimeterProgressConfig);
+    update(progress: number): void;
+    private getRectanglesForStartCorner;
+}

package/dist/components/hooks/shapes/progress/PerimeterProgressRenderer.js

@@ -0,0 +1,213 @@
+import * as PIXI from 'pixi.js-legacy';
+import { ProgressRenderer } from './ProgressRenderer.js';
+export class PerimeterProgressRenderer extends ProgressRenderer {
+    config;
+    constructor(context, width, height, config) {
+        super(context, width, height);
+        this.config = config;
+    }
+    update(progress) {
+        const displayWidth = this.width;
+        const displayHeight = this.height;
+        const graphics = this.displayObject;
+        // fix for legacy pixi renderer - without this it does not work as expected!!! this sets the right boundaries for rects to work
+        // graphics.clear();
+        // graphics.beginFill(0x00000001, 0.0000000001);
+        // graphics.drawRect(0, 0, displayWidth, displayHeight);
+        // graphics.endFill();
+        const strokeWidth = this.config.strokeWidth || 4;
+        const clockwise = this.config.clockwise !== false;
+        const startCorner = this.config.startCorner || 'top-left';
+        const color = this.getSolidColor();
+        const perimeter = 2 * (displayWidth + displayHeight);
+        let remainingDistance = progress * perimeter;
+        const rectangles = this.getRectanglesForStartCorner(startCorner, displayWidth, displayHeight, strokeWidth, clockwise);
+        let drawnLength = 0;
+        for (const rect of rectangles) {
+            if (remainingDistance <= 0)
+                break;
+            const edgeLength = rect.length;
+            const isPartial = remainingDistance < edgeLength;
+            if (isPartial) {
+                const ratio = remainingDistance / edgeLength;
+                graphics.beginFill(color);
+                if (rect.isHorizontal) {
+                    const partialWidth = rect.width * ratio;
+                    if (rect.reverse) {
+                        const startX = rect.x + rect.width - partialWidth;
+                        graphics.drawRect(startX, rect.y, partialWidth, rect.height);
+                    }
+                    else {
+                        graphics.drawRect(rect.x, rect.y, partialWidth, rect.height);
+                    }
+                }
+                else {
+                    // Vertical
+                    const partialHeight = rect.height * ratio;
+                    if (rect.reverse) {
+                        const startY = rect.y + rect.height - partialHeight;
+                        graphics.drawRect(rect.x, startY, rect.width, partialHeight);
+                    }
+                    else {
+                        graphics.drawRect(rect.x, rect.y, rect.width, partialHeight);
+                    }
+                }
+                graphics.endFill();
+                remainingDistance = 0;
+            }
+            else {
+                graphics.beginFill(color);
+                graphics.drawRect(rect.x, rect.y, rect.width, rect.height);
+                graphics.endFill();
+                remainingDistance -= edgeLength;
+            }
+            drawnLength += edgeLength;
+        }
+    }
+    getRectanglesForStartCorner(startCorner, width, height, strokeWidth, clockwise) {
+        // Define 4 rectangles, one for each edge
+        const allRectangles = {
+            // Top rectangle (left to right)
+            topLR: {
+                x: 0,
+                y: 0,
+                width: width,
+                height: strokeWidth,
+                length: width,
+                isHorizontal: true,
+                reverse: false
+            },
+            // Top rectangle (right to left)
+            topRL: {
+                x: 0,
+                y: 0,
+                width: width,
+                height: strokeWidth,
+                length: width,
+                isHorizontal: true,
+                reverse: true
+            },
+            // Right rectangle (top to bottom)
+            rightTB: {
+                x: width - strokeWidth,
+                y: 0,
+                width: strokeWidth,
+                height: height,
+                length: height,
+                isHorizontal: false,
+                reverse: false
+            },
+            // Right rectangle (bottom to top)
+            rightBT: {
+                x: width - strokeWidth,
+                y: 0,
+                width: strokeWidth,
+                height: height,
+                length: height,
+                isHorizontal: false,
+                reverse: true
+            },
+            // Bottom rectangle (right to left)
+            bottomRL: {
+                x: 0,
+                y: height - strokeWidth,
+                width: width,
+                height: strokeWidth,
+                length: width,
+                isHorizontal: true,
+                reverse: true
+            },
+            // Bottom rectangle (left to right)
+            bottomLR: {
+                x: 0,
+                y: height - strokeWidth,
+                width: width,
+                height: strokeWidth,
+                length: width,
+                isHorizontal: true,
+                reverse: false
+            },
+            // Left rectangle (bottom to top)
+            leftBT: {
+                x: 0,
+                y: 0,
+                width: strokeWidth,
+                height: height,
+                length: height,
+                isHorizontal: false,
+                reverse: true
+            },
+            // Left rectangle (top to bottom)
+            leftTB: {
+                x: 0,
+                y: 0,
+                width: strokeWidth,
+                height: height,
+                length: height,
+                isHorizontal: false,
+                reverse: false
+            }
+        };
+        // Define rectangle sequences for each starting corner and direction
+        const rectangleSequences = {
+            'top-left': {
+                clockwise: [
+                    allRectangles.topLR,
+                    allRectangles.rightTB,
+                    allRectangles.bottomRL,
+                    allRectangles.leftBT
+                ],
+                counterclockwise: [
+                    allRectangles.leftTB,
+                    allRectangles.bottomLR,
+                    allRectangles.rightBT,
+                    allRectangles.topRL
+                ]
+            },
+            'top-right': {
+                clockwise: [
+                    allRectangles.rightTB,
+                    allRectangles.bottomRL,
+                    allRectangles.leftBT,
+                    allRectangles.topLR
+                ],
+                counterclockwise: [
+                    allRectangles.topRL,
+                    allRectangles.leftTB,
+                    allRectangles.bottomLR,
+                    allRectangles.rightBT
+                ]
+            },
+            'bottom-right': {
+                clockwise: [
+                    allRectangles.bottomRL,
+                    allRectangles.leftBT,
+                    allRectangles.topLR,
+                    allRectangles.rightTB
+                ],
+                counterclockwise: [
+                    allRectangles.rightBT,
+                    allRectangles.topRL,
+                    allRectangles.leftTB,
+                    allRectangles.bottomLR
+                ]
+            },
+            'bottom-left': {
+                clockwise: [
+                    allRectangles.leftBT,
+                    allRectangles.topLR,
+                    allRectangles.rightTB,
+                    allRectangles.bottomRL
+                ],
+                counterclockwise: [
+                    allRectangles.bottomLR,
+                    allRectangles.rightBT,
+                    allRectangles.topRL,
+                    allRectangles.leftTB
+                ]
+            }
+        };
+        const direction = clockwise ? 'clockwise' : 'counterclockwise';
+        return rectangleSequences[startCorner][direction];
+    }
+}

package/dist/components/hooks/shapes/progress/ProgressRenderer.d.ts

@@ -0,0 +1,17 @@
+import * as PIXI from 'pixi.js-legacy';
+import type { IComponentContext } from '../../../..';
+/**
+ * Base class for progress renderers
+ */
+export declare abstract class ProgressRenderer {
+    #private;
+    protected context: IComponentContext;
+    protected displayObject: PIXI.Container;
+    protected width: number;
+    protected height: number;
+    protected isGradient: boolean;
+    constructor(context: IComponentContext, width: number, height: number);
+    protected getSolidColor(): string | 0 | undefined;
+    abstract update(progress: number): void;
+    getDisplayObject(): PIXI.Container;
+}

package/dist/components/hooks/shapes/progress/ProgressRenderer.js

@@ -0,0 +1,75 @@
+import * as PIXI from 'pixi.js-legacy';
+import { PixiColorTransformer } from '../../../../transformers/PixiColorTransformer.js';
+/**
+ * Base class for progress renderers
+ */
+export class ProgressRenderer {
+    context;
+    displayObject;
+    width;
+    height;
+    isGradient;
+    constructor(context, width, height) {
+        this.context = context;
+        this.width = width;
+        this.height = height;
+        this.isGradient = this.#checkIsGradient();
+        this.displayObject = this.#createDisplayObject();
+    }
+    #checkIsGradient() {
+        const background = this.context.data.appearance.background;
+        const isGradient = PixiColorTransformer.isGradient(background);
+        // For now, progress bars don't support gradients - fallback to solid color
+        if (isGradient) {
+            console.warn('Progress bars currently only support solid colors. Using fallback color.');
+            return false;
+        }
+        return isGradient;
+    }
+    #createDisplayObject() {
+        // TODO - implement always active background
+        // const background = (this.context.data as ShapeComponent).appearance.background;
+        // For progress bars, always use Graphics (solid colors only)
+        const graphics = new PIXI.Graphics();
+        // // Get solid color - if gradient is passed, extract first color as fallback
+        // if (PixiColorTransformer.isGradient(background)) {
+        // 	// Extract first color from gradient as fallback
+        // 	if (
+        // 		typeof background === 'object' &&
+        // 		background &&
+        // 		'stops' in background &&
+        // 		background.stops &&
+        // 		background.stops.length > 0
+        // 	) {
+        // 		const firstStop = background.stops[0];
+        // 		if (firstStop && 'color' in firstStop) {
+        // 			const colorResult = PixiColorTransformer.transform(
+        // 				firstStop.color,
+        // 				this.width,
+        // 				this.height
+        // 			);
+        // 			color = colorResult.color || 0x000000;
+        // 		}
+        // 	}
+        // } else {
+        // 	// Use solid color normally
+        // 	const colorResult = PixiColorTransformer.transform(background, this.width, this.height);
+        // 	color = colorResult.color || 0x000000;
+        // }
+        graphics.beginFill(0x00000001, 0.0000000001);
+        graphics.drawRect(0, 0, this.width, this.height);
+        return graphics;
+    }
+    getSolidColor() {
+        const defaulColor = 0x000000;
+        const background = this.context.data.appearance.color;
+        if (PixiColorTransformer.isGradient(background)) {
+            console.warn('Progress bars currently only support solid colors. Using fallback color.');
+            return defaulColor;
+        }
+        return background;
+    }
+    getDisplayObject() {
+        return this.displayObject;
+    }
+}

package/dist/components/hooks/shapes/progress/RadialProgressRenderer.d.ts

@@ -0,0 +1,8 @@
+import type { IComponentContext } from '../../../..';
+import type { RadialProgressConfig } from '../../../..';
+import { ProgressRenderer } from './ProgressRenderer.js';
+export declare class RadialProgressRenderer extends ProgressRenderer {
+    private config;
+    constructor(context: IComponentContext, width: number, height: number, config: RadialProgressConfig);
+    update(progress: number): void;
+}

package/dist/components/hooks/shapes/progress/RadialProgressRenderer.js

@@ -0,0 +1,50 @@
+import * as PIXI from 'pixi.js-legacy';
+import { ProgressRenderer } from './ProgressRenderer.js';
+export class RadialProgressRenderer extends ProgressRenderer {
+    config;
+    constructor(context, width, height, config) {
+        super(context, width, height);
+        this.config = config;
+    }
+    update(progress) {
+        // Use original dimensions, not the scaled display object dimensions
+        const displayWidth = this.width;
+        const displayHeight = this.height;
+        // Progress bars only support solid colors - graphics drawing
+        const graphics = this.displayObject;
+        graphics.clear();
+        const centerX = displayWidth / 2;
+        const centerY = displayHeight / 2;
+        const radius = Math.min(displayWidth, displayHeight) / 2;
+        const innerRadius = (this.config.innerRadius || 0) * radius;
+        const strokeWidth = this.config.strokeWidth || 4;
+        // Convert start angle from degrees to radians
+        const startAngleRad = ((this.config.startAngle || -90) * Math.PI) / 180;
+        const clockwise = this.config.clockwise !== false; // default to true
+        // Calculate the end angle based on progress
+        const angleRange = 2 * Math.PI; // Full circle
+        const endAngleRad = startAngleRad + (clockwise ? progress : -progress) * angleRange;
+        const color = this.getSolidColor();
+        if (innerRadius > 0) {
+            // Ring style - draw arc
+            graphics.lineStyle({
+                width: strokeWidth,
+                color: color,
+                cap: this.config.capStyle === 'butt'
+                    ? PIXI.LINE_CAP.BUTT
+                    : this.config.capStyle === 'square'
+                        ? PIXI.LINE_CAP.SQUARE
+                        : PIXI.LINE_CAP.ROUND
+            });
+            graphics.arc(centerX, centerY, radius, startAngleRad, endAngleRad, !clockwise);
+        }
+        else {
+            // Filled circle style - draw pie slice
+            graphics.beginFill(color);
+            graphics.moveTo(centerX, centerY);
+            graphics.arc(centerX, centerY, radius, startAngleRad, endAngleRad, !clockwise);
+            graphics.lineTo(centerX, centerY);
+            graphics.endFill();
+        }
+    }
+}

package/dist/components/hooks/shapes/progress/index.d.ts

@@ -0,0 +1,6 @@
+export { ProgressRenderer } from './ProgressRenderer.js';
+export { LinearProgressRenderer } from './LinearProgressRenderer.js';
+export { RadialProgressRenderer } from './RadialProgressRenderer.js';
+export { PerimeterProgressRenderer } from './PerimeterProgressRenderer.js';
+export { DoubleProgressRenderer } from './DoubleProgressRenderer.js';
+export { CustomProgressRenderer } from './CustomProgressRenderer.js';

package/dist/components/hooks/shapes/progress/index.js

@@ -0,0 +1,6 @@
+export { ProgressRenderer } from './ProgressRenderer.js';
+export { LinearProgressRenderer } from './LinearProgressRenderer.js';
+export { RadialProgressRenderer } from './RadialProgressRenderer.js';
+export { PerimeterProgressRenderer } from './PerimeterProgressRenderer.js';
+export { DoubleProgressRenderer } from './DoubleProgressRenderer.js';
+export { CustomProgressRenderer } from './CustomProgressRenderer.js';