canvasengine 1.3.0 → 2.0.0-beta.2

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,13 @@
+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 { isObservable } from 'rxjs'

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,86 @@
+import { Texture, ImageSource, DOMAdapter, Matrix } from "pixi.js";
+
+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;
+
+  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
+      );
+    }
+  }
+
+  addColorStop(offset: number, color: string) {
+    if (this.gradient) {
+      this.gradient.addColorStop(offset, color);
+    }
+  }
+
+  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/.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

package/.npmignore

@@ -1,163 +0,0 @@
-#################
-## Eclipse
-#################
-
-*.pydevproject
-.project
-.metadata
-bin/
-tmp/
-*.tmp
-*.bak
-*.swp
-*~.nib
-local.properties
-.classpath
-.settings/
-.loadpath
-
-# External tool builders
-.externalToolBuilders/
-
-# Locally stored "Eclipse launch configurations"
-*.launch
-
-# CDT-specific
-.cproject
-
-# PDT-specific
-.buildpath
-
-
-#################
-## Visual Studio
-#################
-
-## Ignore Visual Studio temporary files, build results, and
-## files generated by popular Visual Studio add-ons.
-
-# User-specific files
-*.suo
-*.user
-*.sln.docstates
-
-# Build results
-[Dd]ebug/
-[Rr]elease/
-*_i.c
-*_p.c
-*.ilk
-*.meta
-*.obj
-*.pch
-*.pdb
-*.pgc
-*.pgd
-*.rsp
-*.sbr
-*.tlb
-*.tli
-*.tlh
-*.tmp
-*.vspscc
-.builds
-*.dotCover
-
-## TODO: If you have NuGet Package Restore enabled, uncomment this
-#packages/
-
-# Visual C++ cache files
-ipch/
-*.aps
-*.ncb
-*.opensdf
-*.sdf
-
-# Visual Studio profiler
-*.psess
-*.vsp
-
-# ReSharper is a .NET coding add-in
-_ReSharper*
-
-# Installshield output folder
-[Ee]xpress
-
-# DocProject is a documentation generator add-in
-DocProject/buildhelp/
-DocProject/Help/*.HxT
-DocProject/Help/*.HxC
-DocProject/Help/*.hhc
-DocProject/Help/*.hhk
-DocProject/Help/*.hhp
-DocProject/Help/Html2
-DocProject/Help/html
-
-# Click-Once directory
-publish
-
-# Others
-[Bb]in
-[Oo]bj
-sql
-TestResults
-*.Cache
-ClientBin
-stylecop.*
-~$*
-*.dbmdl
-Generated_Code #added for RIA/Silverlight projects
-
-# Backup & report files from converting an old project file to a newer
-# Visual Studio version. Backup files are not needed, because we have git ;-)
-_UpgradeReport_Files/
-Backup*/
-UpgradeLog*.XML
-
-
-
-############
-## Windows
-############
-
-# Windows image file caches
-Thumbs.db
-
-# Folder config file
-Desktop.ini
-
-
-#############
-## Python
-#############
-
-*.py[co]
-
-# Packages
-*.egg
-*.egg-info
-dist
-build
-eggs
-parts
-bin
-var
-sdist
-develop-eggs
-.installed.cfg
-
-# Installer logs
-pip-log.txt
-
-# Unit test / coverage reports
-.coverage
-.tox
-
-#Translations
-*.mo
-
-#Mr Developer
-.mr.developer.cfg
-
-# Mac crap
-.DS_Store