canvasengine 1.3.0 → 2.0.1-beta.1

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,14 @@
+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 './presets/Bar'
+export * from './presets/Particle'
+export * from './utils/Ease'

package/src/presets/Bar.ts

@@ -0,0 +1,89 @@
+import { Graphics } from "../components";
+import { h } from "../engine/signal";
+import * as PIXI from "pixi.js";
+import { useProps } from "../hooks/useProps";
+
+interface BarProps {
+  backgroundColor?: string;
+  foregroundColor?: string;
+  value: number;
+  maxValue: number;
+  width: number;
+  height: number;
+}
+
+function componentToHex(c) {
+  var hex = c.toString(16);
+  return hex.length == 1 ? "0" + hex : hex;
+}
+
+function rgbToHex(r, g, b) {
+  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
+}
+
+export function Bar(opts: BarProps) {
+  const {
+    width,
+    height,
+    value,
+    maxValue,
+    backgroundColor,
+    foregroundColor,
+    border,
+    innerMargin,
+    borderRadius,
+  } = useProps(opts, {
+    backgroundColor: "#000000",
+    foregroundColor: "#FFFFFF",
+    innerMargin: 0,
+    borderRadius: 0,
+  });
+
+  return h(
+    Graphics,
+    {
+      ...opts,
+      width,
+      height,
+      draw(g: PIXI.Graphics) {
+        if (borderRadius()) {
+          g.roundRect(0, 0, width(), height(), borderRadius());
+        } else {
+          g.rect(0, 0, width(), height());
+        }
+        if (border) {
+          g.stroke(border);
+        }
+        g.fill(backgroundColor());
+      },
+    },
+    h(Graphics, {
+      width,
+      height,
+      draw(g: PIXI.Graphics) {
+        const margin = innerMargin();
+        const _borderRadius = borderRadius();
+        const w = Math.max(
+          0,
+          Math.min(
+            width() - 2 * margin,
+            (value() / maxValue()) * (width() - 2 * margin)
+          )
+        );
+        const h = height() - 2 * margin;
+        if (borderRadius) {
+          g.roundRect(margin, margin, w, h, _borderRadius);
+        } else {
+          g.rect(margin, margin, w, h);
+        }
+        const color = foregroundColor();
+        if (color.startsWith("rgba")) {
+          const [r, g, b, a] = color.match(/\d+(\.\d+)?/g).map(Number);
+          g.fill({ color: rgbToHex(r, g, b), alpha: a });
+        } else {
+          g.fill(color);
+        }
+      },
+    })
+  );
+}

package/src/presets/Joystick.ts

@@ -0,0 +1,286 @@
+/*
+ * Joystick
+ *
+ * Inspired by https://github.com/endel/pixi-virtual-joystick
+ */
+
+import * as PIXI from "pixi.js";
+import { Container, Graphics, Sprite } from "../components";
+import { h } from "../engine/signal";
+import { signal } from "@signe/reactive";
+
+export interface JoystickChangeEvent {
+  angle: number;
+  direction: Direction;
+  power: number;
+}
+
+export enum Direction {
+  LEFT = "left",
+  TOP = "top",
+  BOTTOM = "bottom",
+  RIGHT = "right",
+  TOP_LEFT = "top_left",
+  TOP_RIGHT = "top_right",
+  BOTTOM_LEFT = "bottom_left",
+  BOTTOM_RIGHT = "bottom_right",
+}
+
+export interface JoystickSettings {
+  outer?: string;
+  inner?: string;
+  outerScale?: { x: number; y: number };
+  innerScale?: { x: number; y: number };
+  onChange?: (data: JoystickChangeEvent) => void;
+  onStart?: () => void;
+  onEnd?: () => void;
+}
+
+export function Joystick(opts: JoystickSettings = {}) {
+  const settings = Object.assign(
+    {
+      outerScale: { x: 1, y: 1 },
+      innerScale: { x: 1, y: 1 },
+    },
+    opts
+  );
+
+  let outerRadius = 70;
+  let innerRadius = 10;
+  const innerAlphaStandby = 0.5;
+
+  let dragging = false;
+  let startPosition: PIXI.PointData | null = null;
+  let power = 0;
+
+  const innerPositionX = signal(0);
+  const innerPositionY = signal(0);
+  const innerAlpha = signal(innerAlphaStandby);
+
+  function getPower(centerPoint: PIXI.Point) {
+    const a = centerPoint.x - 0;
+    const b = centerPoint.y - 0;
+    return Math.min(1, Math.sqrt(a * a + b * b) / outerRadius);
+  }
+
+  function getDirection(center: PIXI.Point) {
+    let rad = Math.atan2(center.y, center.x); // [-PI, PI]
+    if ((rad >= -Math.PI / 8 && rad < 0) || (rad >= 0 && rad < Math.PI / 8)) {
+      return Direction.RIGHT;
+    } else if (rad >= Math.PI / 8 && rad < (3 * Math.PI) / 8) {
+      return Direction.BOTTOM_RIGHT;
+    } else if (rad >= (3 * Math.PI) / 8 && rad < (5 * Math.PI) / 8) {
+      return Direction.BOTTOM;
+    } else if (rad >= (5 * Math.PI) / 8 && rad < (7 * Math.PI) / 8) {
+      return Direction.BOTTOM_LEFT;
+    } else if (
+      (rad >= (7 * Math.PI) / 8 && rad < Math.PI) ||
+      (rad >= -Math.PI && rad < (-7 * Math.PI) / 8)
+    ) {
+      return Direction.LEFT;
+    } else if (rad >= (-7 * Math.PI) / 8 && rad < (-5 * Math.PI) / 8) {
+      return Direction.TOP_LEFT;
+    } else if (rad >= (-5 * Math.PI) / 8 && rad < (-3 * Math.PI) / 8) {
+      return Direction.TOP;
+    } else {
+      return Direction.TOP_RIGHT;
+    }
+  }
+
+  function handleDragStart(event: PIXI.FederatedPointerEvent) {
+    startPosition = event.getLocalPosition(this);
+    dragging = true;
+    innerAlpha.set(1);
+    settings.onStart?.();
+  }
+
+  function handleDragEnd() {
+    if (!dragging) return;
+    innerPositionX.set(0);
+    innerPositionY.set(0);
+    dragging = false;
+    innerAlpha.set(innerAlphaStandby);
+    settings.onEnd?.();
+  }
+
+  function handleDragMove(event: PIXI.FederatedPointerEvent) {
+    if (dragging == false) {
+      return;
+    }
+
+    let newPosition = event.getLocalPosition(this);
+
+    let sideX = newPosition.x - (startPosition?.x ?? 0);
+    let sideY = newPosition.y - (startPosition?.y ?? 0);
+
+    let centerPoint = new PIXI.Point(0, 0);
+    let angle = 0;
+
+    if (sideX == 0 && sideY == 0) {
+      return;
+    }
+
+    let calRadius = 0;
+
+    if (sideX * sideX + sideY * sideY >= outerRadius * outerRadius) {
+      calRadius = outerRadius;
+    } else {
+      calRadius = outerRadius - innerRadius;
+    }
+
+    /**
+     * x:   -1 <-> 1
+     * y:   -1 <-> 1
+     *          Y
+     *          ^
+     *          |
+     *     180  |  90
+     *    ------------> X
+     *     270  |  360
+     *          |
+     *          |
+     */
+
+    let direction = Direction.LEFT;
+
+    if (sideX == 0) {
+      if (sideY > 0) {
+        centerPoint.set(0, sideY > outerRadius ? outerRadius : sideY);
+        angle = 270;
+        direction = Direction.BOTTOM;
+      } else {
+        centerPoint.set(
+          0,
+          -(Math.abs(sideY) > outerRadius ? outerRadius : Math.abs(sideY))
+        );
+        angle = 90;
+        direction = Direction.TOP;
+      }
+      innerPositionX.set(centerPoint.x);
+      innerPositionY.set(centerPoint.y);
+      power = getPower(centerPoint);
+      settings.onChange?.({ angle, direction, power });
+      return;
+    }
+
+    if (sideY == 0) {
+      if (sideX > 0) {
+        centerPoint.set(
+          Math.abs(sideX) > outerRadius ? outerRadius : Math.abs(sideX),
+          0
+        );
+        angle = 0;
+        direction = Direction.LEFT;
+      } else {
+        centerPoint.set(
+          -(Math.abs(sideX) > outerRadius ? outerRadius : Math.abs(sideX)),
+          0
+        );
+        angle = 180;
+        direction = Direction.RIGHT;
+      }
+
+      innerPositionX.set(centerPoint.x);
+      innerPositionY.set(centerPoint.y);
+      power = getPower(centerPoint);
+      settings.onChange?.({ angle, direction, power });
+      return;
+    }
+
+    let tanVal = Math.abs(sideY / sideX);
+    let radian = Math.atan(tanVal);
+    angle = (radian * 180) / Math.PI;
+
+    let centerX = 0;
+    let centerY = 0;
+
+    if (sideX * sideX + sideY * sideY >= outerRadius * outerRadius) {
+      centerX = outerRadius * Math.cos(radian);
+      centerY = outerRadius * Math.sin(radian);
+    } else {
+      centerX = Math.abs(sideX) > outerRadius ? outerRadius : Math.abs(sideX);
+      centerY = Math.abs(sideY) > outerRadius ? outerRadius : Math.abs(sideY);
+    }
+
+    if (sideY < 0) {
+      centerY = -Math.abs(centerY);
+    }
+    if (sideX < 0) {
+      centerX = -Math.abs(centerX);
+    }
+
+    if (sideX > 0 && sideY < 0) {
+      // < 90
+    } else if (sideX < 0 && sideY < 0) {
+      // 90 ~ 180
+      angle = 180 - angle;
+    } else if (sideX < 0 && sideY > 0) {
+      // 180 ~ 270
+      angle = angle + 180;
+    } else if (sideX > 0 && sideY > 0) {
+      // 270 ~ 369
+      angle = 360 - angle;
+    }
+    centerPoint.set(centerX, centerY);
+    power = getPower(centerPoint);
+
+    direction = getDirection(centerPoint);
+    innerPositionX.set(centerPoint.x);
+    innerPositionY.set(centerPoint.y);
+
+    settings.onChange?.({ angle, direction, power });
+  }
+
+  let innerElement;
+  let outerElement;
+
+  if (!settings.outer) {
+    outerElement = h(Graphics, {
+      draw: (g) => {
+        g.circle(0, 0, outerRadius).fill(0x000000);
+      },
+      alpha: 0.5,
+    });
+  } else {
+    outerElement = h(Sprite, {
+      image: settings.outer,
+      anchor: { x: 0.5, y: 0.5 },
+      scale: settings.outerScale,
+    });
+  }
+
+  const innerOptions: any = {
+    scale: settings.innerScale,
+    x: innerPositionX,
+    y: innerPositionY,
+    alpha: innerAlpha,
+  };
+
+  if (!settings.inner) {
+    innerElement = h(Graphics, {
+      draw: (g) => {
+        g.circle(0, 0, innerRadius * 2.5).fill(0x000000);
+      },
+      ...innerOptions,
+    });
+  } else {
+    innerElement = h(Sprite, {
+      image: settings.inner,
+      anchor: { x: 0.5, y: 0.5 },
+      ...innerOptions,
+    });
+  }
+
+  return h(
+    Container,
+    {
+      ...opts,
+      pointerdown: handleDragStart,
+      pointerup: handleDragEnd,
+      pointerupoutside: handleDragEnd,
+      pointermove: handleDragMove,
+    },
+    outerElement,
+    innerElement
+  );
+}

package/src/presets/NightAmbiant.ts

@@ -0,0 +1,122 @@
+import { Container, Graphics } from "../components";
+import { h, mount } from "../engine/signal";
+import { animatedSignal } from "../engine/animation";
+import { RadialGradient } from "../utils/RadialGradient";
+import { effect, isSignal, signal } from "@signe/reactive";
+import { useProps } from "../hooks/useProps";
+import { isObservable } from "rxjs";
+
+export function LightSpot(opts) {
+  const { radius } = useProps(opts);
+  const scale = animatedSignal(1);
+
+  const minScale = 1;
+  const maxScale = 2; // Reduced max scale for subtler effect
+  const scintillationSpeed = 0.001; // Significantly reduced for slower scintillation
+
+  const animate = () => {
+    // Use time-based animation for smoother, slower scintillation
+    const time = Date.now() * scintillationSpeed;
+
+    // Combine multiple sine waves for a more natural, less predictable effect
+    const scintillationFactor =
+      (Math.sin(time) + Math.sin(time * 1.3) + Math.sin(time * 0.7)) / 3;
+
+    // Map the scintillation factor to the scale range
+    const newScale =
+      minScale + (maxScale - minScale) * (scintillationFactor * 0.5 + 0.5);
+
+    scale.update(() => newScale);
+
+    requestAnimationFrame(animate);
+  };
+
+  animate();
+
+  const draw = (g) => {
+    const size = radius() * 2;
+    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)");
+
+    const translate = size / 2;
+
+    g.rect(-translate, -translate, size, size).fill(
+      gradient.render({ translate: { x: translate, y: translate } })
+    );
+  };
+
+  return h(Graphics, {
+    draw,
+    ...opts,
+    scale,
+  });
+}
+
+export function NightAmbiant(props) {
+  const { children } = props;
+  let el
+  const width = signal(0);
+  const height = signal(0);
+  let subscription
+  const draw = (rectAndHole) => {
+    const margin = 80
+    rectAndHole.rect(-margin, -margin, width() + margin*2, height() + margin*2);
+    rectAndHole.fill(0x000000);
+    const applyChildren = (child) => {
+      const x = isSignal(child.propObservables.x)
+        ? child.propObservables.x()
+        : child.props.x;
+      const y = isSignal(child.propObservables.y)
+        ? child.propObservables.y()
+        : child.props.y;
+      const radius = isSignal(child.propObservables.radius)
+        ? child.propObservables.radius()
+        : child.props.radius;
+      rectAndHole.circle(x, y, radius);
+      rectAndHole.cut();
+    }
+    for (let child of children) {
+      if (isObservable(child)) {
+        if (subscription) {
+          subscription.unsubscribe()
+        }
+        subscription = child.subscribe((event) => {
+           for (let child of event.fullElements) {
+            applyChildren(child)
+           }
+        })
+        return
+      }
+      applyChildren(child)
+    }
+  };
+
+  mount((el) => {
+    effect(() => {
+      const { displayWidth, displayHeight } = el.componentInstance
+      const w = +displayWidth()
+      const h = +displayHeight()
+      setTimeout(() => {
+        width.update(() => w)
+        height.update(() => h)
+      }, 0) // hack
+    });
+  });
+
+  return h(
+    Container,
+    {
+      width: "100%",
+      height: "100%",
+      ...props,
+    },
+    h(Graphics, {
+      draw,
+      alpha: 0.8,
+      blur: 80,
+    }),
+    ...children
+  );
+}