canvasengine 1.3.0 → 2.0.1-beta.1

package/src/directives/Scheduler.ts

@@ -0,0 +1,112 @@
+import { WritableSignal } from '@signe/reactive';
+import Stats from 'stats.js';
+import { Directive, registerDirective } from '../engine/directive';
+import { Element } from '../engine/reactive';
+import * as Utils from '../engine/utils';
+
+export interface Tick {
+    timestamp: number
+    deltaTime: number
+    frame: number
+    deltaRatio: number
+}
+
+export class Scheduler extends Directive {
+    private maxFps?: number
+    private fps: number = 60
+    private deltaTime: number = 0
+    public frame: number = 0
+    private timestamp: number = 0
+    private requestedDelay: number = 0
+    private lastTimestamp: number = 0
+    private _stop: boolean = false
+    private tick: WritableSignal<Tick | null>
+    
+    private stats = new Stats()
+
+    onInit(element: Element) { 
+        this.tick = element.propObservables?.tick as any
+    }
+
+    onDestroy() { }
+    onMount(element: Element) { }
+    onUpdate(props: any) { }
+
+    nextTick(timestamp: number) {
+        this.lastTimestamp = this.lastTimestamp || this.timestamp // first
+        this.deltaTime = Utils.preciseNow() - this.timestamp
+        this.timestamp = timestamp
+        this.stats.begin()
+        this.tick.set({
+            timestamp: this.timestamp,
+            deltaTime: this.deltaTime,
+            frame: this.frame,
+            deltaRatio: ~~this.deltaTime / ~~Utils.fps2ms(this.fps)
+        })
+        this.stats.end()
+        this.lastTimestamp = this.timestamp
+        this.frame++
+    }
+
+    private showPanel() {
+        this.stats.showPanel(0)
+    }
+
+    /**
+     * start the schedule
+     * @return {Scheduler} returns this scheduler instance
+     */
+    start(options: {
+        maxFps?: number
+        fps?: number,
+        delay?: number
+    } = {}) {
+        if (options.maxFps) this.maxFps = options.maxFps
+        if (options.fps) this.fps = options.fps
+        if (options.delay) this.requestedDelay = options.delay
+        this.showPanel()
+        const requestAnimationFrame = (fn: (timestamp: number) => void) => {
+            if (Utils.isBrowser()) {
+                window.requestAnimationFrame(fn.bind(this))
+            }
+            else {
+                setTimeout(() => {
+                    this.requestedDelay = 0
+                    fn(Utils.preciseNow())
+                }, Utils.fps2ms(this.fps) + this.requestedDelay)
+            }
+        }
+
+        if (!this.maxFps) {
+            const loop = (timestamp: number) => {
+                requestAnimationFrame(loop)
+                this.nextTick(timestamp)
+            }
+            requestAnimationFrame(loop)
+        }
+        else {
+            const msInterval = Utils.fps2ms(this.maxFps)
+            let now = Utils.preciseNow()
+            let then = Utils.preciseNow()
+            const loop = (timestamp: number) => {
+                if (this._stop) return
+                requestAnimationFrame(loop)
+                now = Utils.preciseNow()
+                const elapsed = now - then
+                if (elapsed > msInterval) {
+                    then = now - (elapsed % msInterval)
+                    this.nextTick(timestamp)
+                }
+            }
+            requestAnimationFrame(loop)
+        }
+
+        return this;
+    }
+
+    stop() {
+        this._stop = true
+    }
+}
+
+registerDirective('tick', Scheduler)

package/src/directives/Sound.ts

@@ -0,0 +1,91 @@
+import { effect } from '@signe/reactive';
+import { Howl } from 'howler';
+import { Container } from 'pixi.js';
+import { Subscription } from 'rxjs';
+import { Directive, registerDirective } from '../engine/directive';
+import { Element } from '../engine/reactive';
+import { calculateDistance, error } from '../engine/utils';
+
+const EVENTS = ['load', 'loaderror', 'playerror', 'play', 'end', 'pause', 'stop', 'mute', 'volume', 'rate', 'seek', 'fade', 'unlock']
+
+export class Sound extends Directive {
+    private sound: Howl
+    private eventsFn: ((...args: any[]) => void)[] = []
+    private maxVolume: number = 1
+    private maxDistance: number = 100
+    private tickSubscription?: Subscription 
+
+    onInit(element: Element<Container>) { }
+
+    onMount(element: Element<Container>) {
+        const { props } = element
+        const tick = props.context.tick
+        const { src, autoplay, loop, volume, spatial } = props.sound
+        this.sound = new Howl({
+            src,
+            autoplay,
+            loop,
+            volume
+        })
+        for (let event of EVENTS) {
+            if (!props.sound[event]) continue
+            const fn = props.sound[event]
+            this.eventsFn.push(fn)
+            this.sound.on(event, fn);
+        }
+
+        if (spatial) {
+            const { soundListenerPosition } = props.context
+            if (!soundListenerPosition) {
+                throw new error('SoundListenerPosition directive is required for spatial sound in component parent')
+            }
+            const { x: listenerX, y: listenerY } = soundListenerPosition
+            this.tickSubscription = effect(() => {
+                tick()
+                const { x, y } = element.componentInstance
+                const distance = calculateDistance(x, y, listenerX(), listenerY());
+                const volume = Math.max(this.maxVolume - (distance / this.maxDistance), 0)
+                this.sound.volume(volume)
+            }).subscription
+        }
+    }
+
+    onUpdate(props: any) {
+        const { volume, loop, mute, seek, playing, rate, spatial } = props
+        if (volume != undefined) this.sound.volume(volume)
+        if (loop != undefined) this.sound.loop(loop)
+        if (mute != undefined) this.sound.mute(mute)
+        if (seek != undefined) this.sound.seek(seek)
+        if (playing != undefined) {
+            if (playing) this.sound.play()
+            else this.sound.pause()
+        }
+        if (spatial) {
+            this.maxVolume = spatial.maxVolume ?? this.maxVolume
+            this.maxDistance = spatial.maxDistance ?? this.maxDistance
+        }
+        if (rate != undefined) this.sound.rate(rate)
+    }
+
+    onDestroy() {
+        this.sound.stop()
+        this.tickSubscription?.unsubscribe()
+        for (let event of EVENTS) {
+            if (this.eventsFn[event]) {
+                this.sound.off(event, this.eventsFn[event]);
+            }
+        }
+    }
+}
+
+class SoundListenerPosition extends Directive {
+    onMount(element: Element<any>) {
+        element.props.context.soundListenerPosition = element.propObservables?.soundListenerPosition
+    }
+    onInit(element: Element<any>) { }
+    onUpdate(props: any) { }
+    onDestroy() { }
+}
+
+registerDirective('sound', Sound)
+registerDirective('soundListenerPosition', SoundListenerPosition)

package/src/directives/Transition.ts

@@ -0,0 +1,45 @@
+import { Container, DisplacementFilter, Sprite, Texture, WRAP_MODES } from 'pixi.js';
+import { animate } from 'popmotion';
+import { Directive, registerDirective } from '../engine/directive';
+import { Element } from '../engine/reactive';
+
+
+export class Transition extends Directive {
+   
+
+    onInit(element: Element<Container>) {
+    }
+
+    onMount(element: Element<Container>) {
+        const { image } = element.props.transition
+        const displacementSprite = new Sprite(Texture.from(image))
+        displacementSprite.texture.baseTexture.wrapMode = WRAP_MODES.REPEAT
+        const displacementFilter = new DisplacementFilter(displacementSprite)
+        const instance = element.componentInstance
+        instance.filters = [displacementFilter]
+
+        instance.addChild(displacementSprite)
+
+        setTimeout(() => {
+            animate({
+                from: 0,
+                to: 1,
+                duration: 500,
+                onUpdate: (progress) => {
+                    displacementFilter.scale.x = progress
+                    displacementFilter.scale.y = progress
+                }
+            })
+        }, 5000)
+    }
+
+    onUpdate(props: any) {
+
+    }
+
+    onDestroy() {
+
+    }
+}
+
+registerDirective('transition', Transition)

package/src/directives/ViewportCull.ts

@@ -0,0 +1,40 @@
+import { effect } from '@signe/reactive';
+import { Simple } from "pixi-cull";
+import { Container } from 'pixi.js';
+import { Directive, registerDirective } from '../engine/directive';
+import { Element } from '../engine/reactive';
+import { error } from '../engine/utils';
+
+export class ViewportCull extends Directive {
+    private cull: Simple
+
+    onInit(element) {
+        this.cull = new Simple({
+            dirtyTest: false,
+        })
+    }
+    onMount(element: Element<Container>) {
+        const tick = element.props.context.tick
+        const { viewportCull } = element.props
+        const { viewport } = element.props.context
+        if (!viewport) {
+            throw error('ViewportCull directive requires a Viewport component to be mounted in the same context')
+        }
+
+        element.props.children[0].subscribe((val) => {
+            this.cull.lists[0] = val.fullElements.map((el: any) => el.componentInstance)
+        })
+
+        effect(() => {
+            tick()
+            if (viewport.dirty) {
+                this.cull.cull(viewport.getVisibleBounds())
+                viewport.dirty = false
+            }
+        })
+    }
+    onUpdate(props: any) { }
+    onDestroy() { }
+}
+
+registerDirective('viewportCull', ViewportCull)

package/src/directives/ViewportFollow.ts

@@ -0,0 +1,26 @@
+import { ComponentInstance } from '../components/DisplayObject';
+import { Directive, registerDirective } from '../engine/directive';
+import { Element } from '../engine/reactive';
+import { error } from '../engine/utils';
+
+export class ViewportFollow extends Directive {
+    onInit(element: Element<ComponentInstance>) {
+
+    }
+    onMount(element: Element) {
+        const { viewportFollow } = element.props
+        const { viewport } = element.props.context
+        if (!viewport) {
+            throw error('ViewportFollow directive requires a Viewport component to be mounted in the same context')
+        }
+        viewport.follow(element.componentInstance)
+    }
+    onUpdate(props: any) {
+
+    }
+    onDestroy() {
+
+    }
+}
+
+registerDirective('viewportFollow', ViewportFollow)

package/src/directives/index.ts

@@ -0,0 +1,7 @@
+import './KeyboardControls'
+import './Scheduler'
+import './ViewportFollow'
+//import './ViewportCull'
+import './Sound'
+import './Drag'
+import './Transition'

package/src/engine/animation.ts

@@ -0,0 +1,113 @@
+import { effect, signal, type WritableSignal } from "@signe/reactive";
+import { animate as animatePopmotion } from "popmotion";
+
+interface AnimateOptions<T> {
+  duration?: number;
+  ease?: (t: number) => number;
+  onUpdate?: (value: T) => void;
+}
+
+export interface AnimatedState<T> {
+  current: T;
+  start: T;
+  end: T;
+}
+
+export interface AnimatedSignal<T> extends Omit<WritableSignal<T>, 'set'> {
+  (): T;
+  set: (newValue: T) => void;
+  animatedState: WritableSignal<AnimatedState<T>>;
+  update: (updater: (value: T) => T) => void;
+}
+
+export function isAnimatedSignal(signal: WritableSignal<any>): boolean {
+  return (signal as unknown as AnimatedSignal<any>).animatedState !== undefined;
+}
+
+/**
+ * Creates an animated signal with the given initial value and animation options.
+ * It's a writable signal that can be animated using popmotion. Properties of the animated signal are:
+ * - current: the current value of the signal.
+ * - start: the start value of the animation.
+ * - end: the end value of the animation.
+ * 
+ * @param initialValue The initial value of the signal.
+ * @param options The animation options.
+ * @returns The animated signal.
+ * @example
+ * const animatedValue = animatedSignal(0, { duration: 1000 });
+ * animatedValue.set(10);
+ * animatedValue.update((value) => value + 1);
+ * console.log(animatedValue()); // 11
+ * 
+ * animatedValue.animatedState() // { current: 10, start: 10, end: 11 }
+ */
+export function animatedSignal<T>(initialValue: T, options: AnimateOptions<T> = {}): AnimatedSignal<T> {
+  const state: AnimatedState<T> = {
+    current: initialValue,
+    start: initialValue,
+    end: initialValue,
+  };
+  let animation
+
+  const publicSignal = signal(initialValue);
+  const privateSignal = signal(state);
+
+  effect(() => {
+    const currentState = privateSignal();
+    publicSignal.set(currentState.current);
+  });
+
+  function animatedSignal(): AnimatedState<T>;
+  function animatedSignal(newValue: T): void;
+  function animatedSignal(newValue?: T): AnimatedState<T> | void {
+    if (newValue === undefined) {
+      return privateSignal();
+    }
+    
+    const prevState = privateSignal();
+    const newState: AnimatedState<T> = {
+      current: prevState.current,
+      start: prevState.current,
+      end: newValue,
+    };
+
+    privateSignal.set(newState);
+
+    if (animation) {
+      animation.stop();
+    }
+
+    animation = animatePopmotion({
+       // TODO
+       duration: 20,
+      ...options,
+      from: prevState.current,
+      to: newValue,
+      onUpdate: (value) => {
+        privateSignal.update(s => ({ ...s, current: value as T }));
+        if (options.onUpdate) {
+          options.onUpdate(value as T);
+        }
+      },
+    });
+  }
+
+  const fn = function() {
+    return privateSignal().current
+  }
+
+  for (const key in publicSignal) {
+    fn[key] = publicSignal[key]
+  }
+
+  fn.animatedState = privateSignal
+  fn.update = (updater: (value: T) => any) => {
+    animatedSignal(updater(privateSignal().current));
+  }
+  fn.set = (newValue: T) => {
+    animatedSignal(newValue);
+  }
+
+  return fn as any
+}

package/src/engine/bootstrap.ts

@@ -0,0 +1,19 @@
+import { ComponentFunction, h } from "./signal";
+
+/**
+ * Bootstraps a canvas element and renders it to the DOM.
+ * 
+ * @param rootElement - The HTML element where the canvas will be rendered. Can be null.
+ * @param canvas - A Promise that resolves to an Element representing the canvas component.
+ * @returns A Promise that resolves to the rendered canvas element.
+ * @throws {Error} If the provided element is not a Canvas component.
+ */
+export const bootstrapCanvas = async (rootElement: HTMLElement | null, canvas: ComponentFunction<any>) => {
+  const canvasElement = await h(canvas);
+  if (canvasElement.tag != 'Canvas') {
+    throw new Error('Canvas is required');
+  }
+  (canvasElement as any).render(rootElement);
+
+  return canvasElement;
+};

package/src/engine/directive.ts

@@ -0,0 +1,23 @@
+import { Element } from "./reactive"
+
+export const directives: { [key: string]: any } = {}
+
+export abstract class Directive {
+    abstract onDestroy();
+    abstract onInit(element:  Element<any>);
+    abstract onMount(element: Element<any>);
+    abstract onUpdate(props: any);
+}
+
+export function registerDirective(name: string, directive: any) {
+    directives[name] = directive
+}
+
+export function applyDirective(element: Element, directiveName: string) {
+    if (!directives[directiveName]) {
+        return null
+    }
+    const directive = new directives[directiveName]()
+    directive.onInit?.(element)
+    return directive
+}