canvasengine 1.3.0 → 2.0.0-beta.10

package/src/engine/utils.ts

@@ -0,0 +1,211 @@
+import { ObservablePoint } from "pixi.js"
+
+/**
+ * Checks if code is running in a browser environment
+ * @returns {boolean} True if running in browser, false otherwise
+ */
+export function isBrowser(): boolean {
+    return typeof window !== 'undefined'
+}
+
+/**
+ * Returns current high-resolution timestamp
+ * @returns {number} Current time in milliseconds
+ */
+export function preciseNow(): number {
+    return typeof performance !== 'undefined' ? performance.now() : Date.now()
+}
+
+/**
+ * Converts frames per second to milliseconds
+ * @param {number} fps - Frames per second
+ * @returns {number} Milliseconds per frame
+ */
+export function fps2ms(fps: number): number {
+    return 1000 / fps
+}
+
+/**
+ * Checks if a value is a Promise
+ * @param {any} value - Value to check
+ * @returns {boolean} True if value is a Promise, false otherwise
+ */
+export function isPromise(value: any): boolean {
+    return value && value instanceof Promise
+}
+
+export function arrayEquals(a: any[], b: any[]): boolean {
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+        const v = a[i];
+        const bv = b[i];
+        if (typeof v === 'object' && v !== null) {
+            if (typeof bv !== 'object' || bv === null) return false;
+            if (Array.isArray(v)) {
+                if (!Array.isArray(bv) || !arrayEquals(v, bv)) return false;
+            } else if (!objectEquals(v, bv)) {
+                return false;
+            }
+        } else if (v !== bv) {
+            return false;
+        }
+    }
+    return true;
+}
+
+function objectEquals(a: object, b: object): boolean {
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    if (keysA.length !== keysB.length) return false;
+    for (let key of keysA) {
+        if (!b.hasOwnProperty(key)) return false;
+        if (!deepEquals(a[key], b[key])) return false;
+    }
+    return true;
+}
+
+function deepEquals(a: any, b: any): boolean {
+    if (a === b) return true;
+    if (typeof a !== typeof b) return false;
+    if (typeof a === 'object' && a !== null) {
+        if (Array.isArray(a)) {
+            return Array.isArray(b) && arrayEquals(a, b);
+        }
+        return objectEquals(a, b);
+    }
+    return false;
+}
+
+/**
+ * Checks if a value is a function
+ * @param {unknown} val - Value to check
+ * @returns {boolean} True if value is a function, false otherwise
+ */
+export function isFunction(val: unknown): boolean {
+    return {}.toString.call(val) === '[object Function]'
+}
+
+/**
+ * Checks if a value is a plain object
+ * @param {unknown} val - Value to check
+ * @returns {boolean} True if value is an object (not null and not array), false otherwise
+ */
+export function isObject(val: unknown): boolean {
+    return typeof val == 'object' && val != null && !Array.isArray(val)
+}
+
+/**
+ * Sets a value in an object using a dot notation path
+ * @param {Record<string, any>} obj - Target object
+ * @param {string | string[]} path - Path to set value at (e.g., 'a.b.c' or ['a', 'b', 'c'])
+ * @param {any} value - Value to set
+ * @param {boolean} onlyPlainObject - If true, only creates plain objects in path
+ * @returns {Record<string, any>} Modified object
+ */
+export function set(
+    obj: Record<string, any>, 
+    path: string | string[], 
+    value: any, 
+    onlyPlainObject = false
+): Record<string, any> {
+    if (Object(obj) !== obj) return obj;
+
+    if (typeof path === 'string') {
+        path = path.split('.');
+    }
+
+    let len = path.length;
+    if (!len) return obj;
+
+    let current = obj;
+    for (let i = 0; i < len - 1; i++) {
+        let segment = path[i];
+        let nextSegment: number | string = path[i + 1];
+        let isNextNumeric = !isNaN(Number(nextSegment)) && isFinite(Number(nextSegment));
+
+        if (!current[segment] || typeof current[segment] !== 'object') {
+            current[segment] = (isNextNumeric && !onlyPlainObject) ? [] : {};
+        }
+
+        current = current[segment];
+    }
+
+    current[path[len - 1]] = value;
+
+    return obj;
+}
+
+/**
+ * Gets a value from an object using a dot notation path
+ * @param {Record<string, any>} obj - Source object
+ * @param {string} path - Path to get value from (e.g., 'a.b.c')
+ * @returns {any} Value at path or undefined if not found
+ */
+export function get(obj: Record<string, any>, path: string): any {
+    const keys = path.split('.');
+    let current = obj;
+
+    for (let key of keys) {
+        if (current[key] === undefined) {
+            return undefined;
+        }
+        current = current[key];
+    }
+
+    return current;
+}
+
+/**
+ * Logs a message to console
+ * @param {any} text - Message to log
+ */
+export function log(text: any): void {
+    console.log(text)
+}
+
+/**
+ * Logs an error message to console
+ * @param {any} text - Error message to log
+ */
+export function error(text: any): void {
+    console.error(text)
+}
+
+/**
+ * Sets the position of an ObservablePoint using various input formats
+ * @param {ObservablePoint} observablePoint - The point to modify
+ * @param {Object | number | [number, number]} point - New position value
+ */
+export function setObservablePoint(
+    observablePoint: ObservablePoint, 
+    point: { x: number, y: number } | number | [number, number]
+): void {
+    if (typeof point === 'number') {
+        observablePoint.set(point);
+    }
+    else if (Array.isArray(point)) {
+        observablePoint.set(point[0], point[1]);
+    }
+    else {
+        observablePoint.set(point.x, point.y);
+    }
+}
+
+/**
+ * Calculates the Euclidean distance between two points
+ * @param {number} x1 - X coordinate of first point
+ * @param {number} y1 - Y coordinate of first point
+ * @param {number} x2 - X coordinate of second point
+ * @param {number} y2 - Y coordinate of second point
+ * @returns {number} Distance between the points
+ */
+export function calculateDistance(
+    x1: number, 
+    y1: number, 
+    x2: number, 
+    y2: number
+): number {
+    const dx = x1 - x2;
+    const dy = y1 - y2;
+    return Math.sqrt(dx * dx + dy * dy);
+}

package/src/hooks/addContext.ts

@@ -0,0 +1,6 @@
+export const addContext = (element, key, value) => {
+    element.props.context = {
+        ...(element.props.context ?? {}),
+        [key]: value
+    }
+}

package/src/hooks/useProps.ts

@@ -0,0 +1,155 @@
+import { isSignal, signal } from "@signe/reactive"
+import { isPrimitive } from "../engine/reactive"
+
+/**
+ * Converts props into reactive signals if they are primitive values.
+ * 
+ * @param {object} props - The properties to convert.
+ * @param {object} [defaults={}] - Default values for properties.
+ * @returns {object} An object with reactive signals.
+ * 
+ * @example
+ * const props = useProps({ count: 0, name: "John" });
+ * console.log(props.count()); // 0
+ * props.count.set(1);
+ * console.log(props.count()); // 1
+ */
+export const useProps = (props, defaults = {}): any => {
+    if (isSignal(props)) {
+        return props()
+    }
+    const obj = {}
+    for (let key in props) {
+        const value = props[key]
+        obj[key] = isPrimitive(value) ? signal(value) : value
+    }
+    for (let key in defaults) {
+        if (!(key in obj)) {
+            obj[key] = signal(defaults[key])
+        }
+    }
+    return obj
+}
+
+type PropType = NumberConstructor | StringConstructor | BooleanConstructor | 
+                FunctionConstructor | ObjectConstructor | ArrayConstructor | 
+                null | (new (...args: any[]) => any);
+
+interface PropConfig {
+    type?: PropType | PropType[];
+    required?: boolean;
+    default?: any | ((props: any) => any);
+    validator?: (value: any, props: any) => boolean;
+}
+
+type PropSchema = {
+    [key: string]: PropType | PropType[] | PropConfig;
+}
+
+/**
+ * Validates and defines properties based on a schema.
+ * 
+ * @param {object} props - The properties to validate.
+ * @returns {function} A function that takes a schema and returns validated properties.
+ * 
+ * @example
+ * const schema = {
+ *   age: { type: Number, required: true },
+ *   name: { type: String, default: "Anonymous" }
+ * };
+ * const validatedProps = useDefineProps({ age: 25 })(schema);
+ * console.log(validatedProps.age()); // 25
+ * console.log(validatedProps.name()); // "Anonymous"
+ */
+export const useDefineProps = (props: any) => {
+    return (schema?: PropSchema) => {
+        const rawProps = isSignal(props) ? props() : props
+        const validatedProps: { [key: string]: any } = {}
+
+        for (const key in schema) {
+            const propConfig = schema[key]
+            const value = rawProps[key]
+            let validatedValue: any
+
+            // Handle simple type definition
+            if (typeof propConfig === 'function') {
+                validateType(key, value, [propConfig])
+                validatedValue = value
+            }
+            // Handle array of types
+            else if (Array.isArray(propConfig)) {
+                validateType(key, value, propConfig)
+                validatedValue = value
+            }
+            // Handle detailed configuration object
+            else if (propConfig && typeof propConfig === 'object') {
+                // Check required prop
+                if (propConfig.required && value === undefined) {
+                    throw new Error(`Missing required prop: ${key}`)
+                }
+                
+                // Validate type if specified
+                if (propConfig.type) {
+                    const types = Array.isArray(propConfig.type) ? propConfig.type : [propConfig.type]
+                    validateType(key, value, types)
+                }
+                
+                // Run custom validator if provided
+                if (propConfig.validator && !propConfig.validator(value, rawProps)) {
+                    throw new Error(`Invalid prop: custom validation failed for prop "${key}"`)
+                }
+                
+                // Set default value if value is undefined
+                if (value === undefined && 'default' in propConfig) {
+                    validatedValue = typeof propConfig.default === 'function' 
+                        ? propConfig.default(rawProps)
+                        : propConfig.default
+                } else {
+                    validatedValue = value
+                }
+            }
+
+            validatedProps[key] = isSignal(validatedValue) 
+                ? validatedValue 
+                : signal(validatedValue)
+        }
+        
+        return {
+            ...useProps(rawProps),
+            ...validatedProps
+        }
+    }
+}
+
+/**
+ * Validates the type of a property.
+ * 
+ * @param {string} key - The property key.
+ * @param {any} value - The property value.
+ * @param {any[]} types - The expected types.
+ * @throws Will throw an error if the type check fails.
+ */
+function validateType(key: string, value: any, types: any[]) {
+    if (value === undefined || value === null) return
+    
+    // Si c'est un signal, on vérifie la valeur du signal
+    const valueToCheck = isSignal(value) ? value() : value
+    
+    const valid = types.some(type => {
+        if (type === Number) return typeof valueToCheck === 'number'
+        if (type === String) return typeof valueToCheck === 'string'
+        if (type === Boolean) return typeof valueToCheck === 'boolean'
+        if (type === Function) return typeof valueToCheck === 'function'
+        if (type === Object) return typeof valueToCheck === 'object'
+        if (type === Array) return Array.isArray(valueToCheck)
+        if (type === null) return valueToCheck === null
+        return valueToCheck instanceof type
+    })
+    
+    if (!valid) {
+        throw new Error(
+            `Invalid prop: type check failed for prop "${key}". ` +
+            `Expected ${types.map(t => t.name).join(' or ')}`
+        )
+    }
+}

package/src/hooks/useRef.ts

@@ -0,0 +1,21 @@
+import { Element } from "../engine/reactive";
+import { ComponentInstance } from "../components/DisplayObject";
+
+export function useRef(element: Element<ComponentInstance>, ref: string): Element<ComponentInstance> | null {
+    const { props } = element;
+    if (props.ref == ref) {
+        return element;
+    }
+    // Recursive search for the component with the given id
+    if (props.children) {
+        for (const child of props.children) {
+            const result = useRef(child, ref);
+            if (result) {
+                return result;
+            }
+        }
+    }
+
+    // If not found, return undefined
+    return null;
+}

package/src/index.ts

@@ -0,0 +1,15 @@
+import './directives'
+export * from '@signe/reactive'
+export { Howler } from 'howler'
+export * from './components'
+export * from './engine/reactive'
+export * from './engine/signal'
+export * from './engine/trigger'
+export * from './engine/bootstrap'
+export * from './engine/animation'
+export { useProps, useDefineProps } from './hooks/useProps'
+export * from './utils/Ease'
+export * from './utils/RadialGradient'
+export * from './components/DisplayObject'
+export { isObservable } from 'rxjs'
+export * as Utils from './engine/utils'

package/src/utils/Ease.ts

@@ -0,0 +1,33 @@
+import { 
+    linear,
+    easeIn,
+    easeInOut,
+    easeOut,
+    circIn,
+    circInOut,
+    circOut,
+    backIn,
+    backInOut,
+    backOut,
+    anticipate,
+    bounceIn,
+    bounceInOut,
+    bounceOut
+} from "popmotion"
+
+export const Easing = {
+    linear,
+    easeIn,
+    easeInOut,
+    easeOut,
+    circIn,
+    circInOut,
+    circOut,
+    backIn,
+    backInOut,
+    backOut,
+    anticipate,
+    bounceIn,
+    bounceInOut,
+    bounceOut
+}

package/src/utils/RadialGradient.ts

@@ -0,0 +1,115 @@
+import { Texture, ImageSource, DOMAdapter, Matrix } from "pixi.js";
+
+/**
+ * Creates a radial gradient texture that can be used in PixiJS.
+ * @example
+ * const gradient = new RadialGradient(size, size, 0, size, size, 0);
+ * gradient.addColorStop(0, "rgba(255, 255, 0, 1)");
+ * gradient.addColorStop(0.5, "rgba(255, 255, 0, 0.3)");
+ * gradient.addColorStop(0.8, "rgba(255, 255, 0, 0)");
+ */
+export class RadialGradient {
+  private canvas: HTMLCanvasElement;
+  private ctx: CanvasRenderingContext2D | null;
+  private gradient: CanvasGradient | null = null;
+  private texture: Texture | null = null;
+  public transform: Matrix;
+
+  public size = 600;
+
+  /**
+   * Creates a new RadialGradient instance
+   * @param x0 - The x-coordinate of the starting circle
+   * @param y0 - The y-coordinate of the starting circle
+   * @param x1 - The x-coordinate of the ending circle
+   * @param y1 - The y-coordinate of the ending circle
+   * @param x2 - The x-coordinate for gradient transformation
+   * @param y2 - The y-coordinate for gradient transformation
+   * @param focalPoint - The focal point of the gradient (0-1), defaults to 0
+   */
+  constructor(
+    private x0: number,
+    private y0: number,
+    private x1: number,
+    private y1: number,
+    private x2: number,
+    private y2: number,
+    private focalPoint: number = 0
+  ) {
+    this.size = x0;
+    const halfSize = this.size * 0.5;
+
+    this.canvas = DOMAdapter.get().createCanvas() as any;
+    this.canvas.width = this.size;
+    this.canvas.height = this.size;
+    this.ctx = this.canvas.getContext("2d");
+
+    if (this.ctx) {
+      this.gradient = this.ctx.createRadialGradient(
+        halfSize * (1 - focalPoint),
+        halfSize,
+        0,
+        halfSize,
+        halfSize,
+        halfSize - 0.5
+      );
+    }
+  }
+
+  /**
+   * Adds a color stop to the gradient
+   * @param offset - The position of the color stop (0-1)
+   * @param color - The color value (any valid CSS color string)
+   */
+  addColorStop(offset: number, color: string) {
+    if (this.gradient) {
+      this.gradient.addColorStop(offset, color);
+    }
+  }
+
+  /**
+   * Renders the gradient and returns the texture with its transformation matrix
+   * @param options - Render options
+   * @param options.translate - Optional translation coordinates
+   * @returns Object containing the texture and transformation matrix
+   */
+  render({ translate }: { translate?: { x: number; y: number } } = {}) {
+    const { x0, y0, x1, y1, x2, y2, focalPoint } = this;
+    const defaultSize = this.size;
+    if (this.ctx && this.gradient) {
+      this.ctx.fillStyle = this.gradient;
+      this.ctx.fillRect(0, 0, defaultSize, defaultSize);
+
+      this.texture = new Texture({
+        source: new ImageSource({
+          resource: this.canvas,
+          addressModeU: "clamp-to-edge",
+          addressModeV: "clamp-to-edge",
+        }),
+      });
+
+      const m = new Matrix();
+      const dx = Math.sqrt((x1 - x0) * (x1 - x0) + (y1 - y0) * (y1 - y0));
+      const dy = Math.sqrt((x2 - x0) * (x2 - x0) + (y2 - y0) * (y2 - y0));
+      const angle = Math.atan2(y1 - y0, x1 - x0);
+
+      // Calculate the scale factors correctly
+      const scaleX = dx / defaultSize;
+      const scaleY = dy / defaultSize;
+
+      // Apply transformations in the correct order
+      m.rotate(-angle);
+      m.scale(scaleX, scaleY);
+      if (translate) {
+        m.translate(translate.x, translate.y);
+      }
+
+      this.transform = m;
+    }
+
+    return {
+      texture: this.texture,
+      matrix: this.transform,
+    };
+  }
+}

package/testing/index.ts

@@ -0,0 +1,11 @@
+import { bootstrapCanvas, Canvas, ComponentInstance, Element, h } from "canvasengine";
+
+export class TestBed {
+    static async createComponent(component: any, props: any = {}, children: any = []): Promise<Element<ComponentInstance>> {
+        const comp = () => h(Canvas, {
+            tickStart: false
+        }, h(component, props, children))
+        const canvas = await bootstrapCanvas(document.getElementById('root'), comp)
+        return canvas.props.children?.[0]
+    }
+}

package/.gitattributes

@@ -1,22 +0,0 @@
-# Auto detect text files and perform LF normalization
-* text=auto
-
-# Custom for Visual Studio
-*.cs     diff=csharp
-*.sln    merge=union
-*.csproj merge=union
-*.vbproj merge=union
-*.fsproj merge=union
-*.dbproj merge=union
-
-# Standard to msysgit
-*.doc	 diff=astextplain
-*.DOC	 diff=astextplain
-*.docx diff=astextplain
-*.DOCX diff=astextplain
-*.dot  diff=astextplain
-*.DOT  diff=astextplain
-*.pdf  diff=astextplain
-*.PDF	 diff=astextplain
-*.rtf	 diff=astextplain
-*.RTF	 diff=astextplain