canvasengine 1.3.0 → 2.0.0-beta.10

package/src/components/Video.ts

@@ -0,0 +1,110 @@
+import { Texture } from "pixi.js";
+import { h, mount } from "../engine/signal";
+import { useDefineProps } from "../hooks/useProps";
+import { Sprite } from "./Sprite";
+import { effect, Signal, signal } from "@signe/reactive";
+
+interface VideoProps {
+    src: string;
+    paused?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    loader?: {
+        onComplete?: (texture: Texture) => void;
+        onProgress?: (progress: number) => void;
+    };
+}
+
+export function Video(props: VideoProps) {
+    const eventsMap = {
+        audioprocess: null,
+        canplay: null,
+        canplaythrough: null,
+        complete: null,
+        durationchange: null,
+        emptied: null,
+        ended: null,
+        loadeddata: null,
+        loadedmetadata: null,
+        pause: null,
+        play: null,
+        playing: null,
+        progress: null,
+        ratechange: null,
+        seeked: null,
+        seeking: null,
+        stalled: null,
+        suspend: null,
+        timeupdate: null,
+        volumechange: null,
+        waiting: null
+    }
+
+    const video: Signal<HTMLVideoElement | null> = signal(null)
+    const defineProps = useDefineProps(props)
+    const { play, loop, muted } = defineProps({
+        play: {
+            type: Boolean,
+            default: true
+        },
+        loop: {
+            type: Boolean,
+            default: false
+        },
+        muted: {
+            type: Boolean,
+            default: false
+        }
+    })
+
+    effect(() => {
+        const _video = video()
+        const state = play()
+        if (_video && state !== undefined) {
+            if (state) {
+                _video.play()
+            } else {
+                _video.pause()
+            }
+        }
+        if (_video && loop()) {
+            _video.loop = loop()
+        }
+        if (_video && muted()) {
+            _video.muted = muted()
+        }
+    })
+
+    mount(() => {
+        return () => {
+            for (let event in eventsMap) {
+                if (eventsMap[event]) {
+                    video().removeEventListener(event, eventsMap[event])
+                }
+            }
+        }
+    })
+
+    return h(Sprite, {
+        ...props,
+        image: props.src,
+        loader: {
+            onComplete: (texture) => {
+                const source = texture.source.resource
+                video.set(source)
+                if (props?.loader?.onComplete) {
+                    props.loader.onComplete(texture)
+                }
+                for (let event in eventsMap) {
+                    if (props[event]) {
+                        const cb = (ev) => {
+                            props[event](ev)
+                        }
+                        eventsMap[event] = cb
+                        source.addEventListener(event, cb)
+                    }
+                }
+            }
+        }
+    })
+}

package/src/components/Viewport.ts

@@ -0,0 +1,159 @@
+import { Viewport as PixiViewport } from 'pixi-viewport';
+import { Subscription } from 'rxjs';
+import { createComponent, registerComponent } from '../engine/reactive';
+import { DisplayObject } from './DisplayObject';
+import { effect } from '@signe/reactive';
+
+const EVENTS = [
+    'bounce-x-end',
+    'bounce-x-start',
+    'bounce-y-end',
+    'bounce-y-start',
+    'clicked',
+    'drag-end',
+    'drag-start',
+    'frame-end',
+    'mouse-edge-end',
+    'mouse-edge-start',
+    'moved',
+    'moved-end',
+    'pinch-end',
+    'pinch-start',
+    'snap-end',
+    'snap-start',
+    'snap-zoom-end',
+    'snap-zoom-start',
+    'wheel-scroll',
+    'zoomed',
+    'zoomed-end'
+]
+
+export class CanvasViewport extends DisplayObject(PixiViewport) {
+    private tickSubscription: Subscription
+    overrideProps = ['wheel']
+
+    constructor() {
+        const defaultOptions = {
+            noTicker: true,
+            events: {
+                domElement: {
+                    addEventListener: () => {}
+                }
+            },
+        }
+        // @ts-ignore
+        super(defaultOptions) 
+    }
+
+    onInit(props) {
+        super.onInit(props)
+        for (let event of EVENTS) {
+            const camelCaseEvent = event.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+            if (props[camelCaseEvent]) {
+                this.on(event, props[camelCaseEvent])
+            }
+        }
+    }
+
+    onMount(element) {
+        super.onMount(element)
+        const { tick, renderer, canvasSize } = element.props.context
+        let isDragging = false
+        
+        effect(() => {
+            this.screenWidth = canvasSize().width
+            this.screenHeight = canvasSize().height
+        })
+
+        renderer.events.domElement.addEventListener(
+            'wheel',
+            this.input.wheelFunction
+        );
+        this.options.events = renderer.events
+ 
+        this.tickSubscription = tick.observable.subscribe(({ value }) => {
+            this.update(value.timestamp)
+        })
+
+        element.props.context.viewport = this
+        this.updateViewportSettings(element.props)
+    }
+
+    onUpdate(props) {
+        super.onUpdate(props)
+        this.updateViewportSettings(props)
+    }
+
+    private updateViewportSettings(props) {
+        if (props.screenWidth !== undefined) {
+            this.screenWidth = props.screenWidth
+        }
+        if (props.screenHeight !== undefined) {
+            this.screenHeight = props.screenHeight
+        }
+        if (props.worldWidth !== undefined) {
+            this.worldWidth = props.worldWidth
+        }
+        if (props.worldHeight !== undefined) {
+            this.worldHeight = props.worldHeight
+        }
+        // if (props.drag) {
+        //     if (props.drag === true) {
+                
+        //     } else {
+        //         this.drag(props.drag)
+        //     }
+        // }
+        if (props.clamp) {
+            this.clamp(props.clamp)
+        }
+        if (props.wheel) {
+            if (props.wheel === true) {
+                this.wheel()
+            } else {
+                this.wheel(props.wheel)
+            }
+        }
+        if (props.decelerate) {
+            if (props.decelerate === true) {
+                this.decelerate()
+            } else {
+                this.decelerate(props.decelerate)
+            }
+        }
+        if (props.pinch) {
+            if (props.pinch === true) {
+                this.pinch()
+            } else {
+                this.pinch(props.pinch)
+            }
+        }
+    }
+
+    onDestroy(): void {
+        super.onDestroy()
+        this.tickSubscription.unsubscribe()
+    }
+}
+
+export interface CanvasViewport extends PixiViewport { }
+
+registerComponent('Viewport', CanvasViewport)
+
+export interface ViewportProps {
+    screenWidth?: number;
+    screenHeight?: number;
+    worldWidth?: number;
+    worldHeight?: number;
+    clamp?: boolean | {
+        left?: number;
+        right?: number;
+        top?: number;
+        bottom?: number;
+    };
+    [key: string]: any;
+}
+
+export function Viewport(props: ViewportProps) {
+    return createComponent('Viewport', props);
+}

package/src/components/index.ts

@@ -0,0 +1,12 @@
+export { Canvas } from './Canvas'
+export { Container } from './Container'
+export { Graphics, Rect, Circle, Ellipse, Triangle, Svg as svg } from './Graphic'
+export { Scene } from './Scene'
+export { ParticlesEmitter } from './ParticleEmitter'
+export { Sprite } from './Sprite'
+export { Video } from './Video'
+export { Text } from './Text'
+export { TilingSprite } from './TilingSprite'
+export { Viewport } from './Viewport'
+export { NineSliceSprite } from './NineSliceSprite'
+export { type ComponentInstance } from './DisplayObject'

package/src/components/types/DisplayObject.ts

@@ -0,0 +1,70 @@
+import * as PIXI from "pixi.js";
+import { SignalOrPrimitive } from ".";
+
+export type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+export type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
+export type AlignContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
+export type Size = number | `${number}%`
+export type EdgeSize = SignalOrPrimitive<Size | [Size, Size] | [Size, Size, Size, Size]>
+
+export interface DisplayObjectProps {
+    attach?: any;
+    ref?: string;
+    x?: SignalOrPrimitive<number>;
+    y?: SignalOrPrimitive<number>;
+    width?: SignalOrPrimitive<Size>;
+    height?: SignalOrPrimitive<Size>;
+    children?: any[];
+    flexDirection?: FlexDirection;
+    justifyContent?: JustifyContent;
+    alpha?: SignalOrPrimitive<number>;
+    margin?: EdgeSize;
+    padding?: EdgeSize;
+    border?: EdgeSize;
+    absolute?: SignalOrPrimitive<boolean>;
+    scale?: SignalOrPrimitive<{ x: number, y: number } | number>;
+    anchor?: SignalOrPrimitive<{ x: number, y: number }>;
+    skew?: SignalOrPrimitive<{ x: number, y: number }>;
+    tint?: SignalOrPrimitive<number>;
+    rotation?: SignalOrPrimitive<number>;
+    angle?: SignalOrPrimitive<number>;
+    zIndex?: SignalOrPrimitive<number>;
+    roundPixels?: SignalOrPrimitive<boolean>;
+    cursor?: SignalOrPrimitive<string>;
+    visible?: SignalOrPrimitive<boolean>;
+    pivot?: SignalOrPrimitive<{ x: number, y: number }>;
+    filters?: any[];
+    blendMode?: SignalOrPrimitive<PIXI.BLEND_MODES>;
+    blur?: SignalOrPrimitive<number>;
+
+    click?: PIXI.FederatedEventHandler;
+    mousedown?: PIXI.FederatedEventHandler;
+    mouseenter?: PIXI.FederatedEventHandler;
+    mouseleave?: PIXI.FederatedEventHandler;
+    mousemove?: PIXI.FederatedEventHandler;
+    mouseout?: PIXI.FederatedEventHandler;
+    mouseover?: PIXI.FederatedEventHandler;
+    mouseup?: PIXI.FederatedEventHandler;
+    mouseupoutside?: PIXI.FederatedEventHandler;
+    pointercancel?: PIXI.FederatedEventHandler;
+    pointerdown?: PIXI.FederatedEventHandler;
+    pointerenter?: PIXI.FederatedEventHandler;
+    pointerleave?: PIXI.FederatedEventHandler;
+    pointermove?: PIXI.FederatedEventHandler;
+    pointerout?: PIXI.FederatedEventHandler;
+    pointerover?: PIXI.FederatedEventHandler;
+    pointertap?: PIXI.FederatedEventHandler;
+    pointerup?: PIXI.FederatedEventHandler;
+    pointerupoutside?: PIXI.FederatedEventHandler;
+    rightclick?: PIXI.FederatedEventHandler;
+    rightdown?: PIXI.FederatedEventHandler;
+    rightup?: PIXI.FederatedEventHandler;
+    rightupoutside?: PIXI.FederatedEventHandler;
+    tap?: PIXI.FederatedEventHandler;
+    touchcancel?: PIXI.FederatedEventHandler;
+    touchend?: PIXI.FederatedEventHandler;
+    touchendoutside?: PIXI.FederatedEventHandler;
+    touchmove?: PIXI.FederatedEventHandler;
+    touchstart?: PIXI.FederatedEventHandler;
+    wheel?: PIXI.FederatedEventHandler<PIXI.FederatedWheelEvent>;
+}

package/src/components/types/MouseEvent.ts

@@ -0,0 +1,3 @@
+export interface MouseEvent {
+    click?: (e: any) => void
+}