vevet 1.4.27 → 2.0.1-dev.3

package/src/ts/components/animation-frame/AnimationFrame.ts

@@ -0,0 +1,264 @@
+import { Component, NComponent } from '../../base/Component';
+import { boundVal } from '../../utils/math';
+import { RequiredModuleProp } from '../../utils/types/utility';
+
+
+
+export namespace NAnimationFrame {
+
+    /**
+     * Static properties
+     */
+    export interface StaticProp extends NComponent.StaticProp { }
+
+    /**
+     * Changeable properties
+     */
+    export interface ChangeableProp extends NComponent.ChangeableProp {
+        /**
+         * Frames per second
+         * @default 140
+         */
+        fps?: number;
+        /**
+         * If need to start the frame
+         * @default true
+         */
+        run?: boolean;
+    }
+
+    /**
+     * Available callbacks
+     */
+    export interface CallbacksTypes extends NComponent.CallbacksTypes {
+        'frame': {
+            fps: number;
+            realFPS: number;
+            prevFrameDuration: number;
+        };
+    }
+
+}
+
+
+
+/**
+ * Launch an animation frame with a certain FPS
+ */
+export class AnimationFrame <
+    StaticProp extends NAnimationFrame.StaticProp = NAnimationFrame.StaticProp,
+    ChangeableProp extends NAnimationFrame.ChangeableProp = NAnimationFrame.ChangeableProp,
+    CallbacksTypes extends NAnimationFrame.CallbacksTypes = NAnimationFrame.CallbacksTypes,
+> extends Component <
+    StaticProp,
+    ChangeableProp,
+    CallbacksTypes
+> {
+    /**
+     * If the frame is launched
+     */
+    protected _isPlaying: boolean;
+    get isPlaying () {
+        return this._isPlaying;
+    }
+
+    /**
+     * The animation frame
+     */
+    protected _frame: number | null;
+
+
+    /**
+     * Previous frame segment
+     */
+     protected _frameIndex: number;
+
+    /**
+     * Timestamp
+     */
+    protected _timeStamp: null | number;
+    /**
+     * Previous frame duration
+     */
+    protected _prevFrameTime: null | number;
+
+
+
+    constructor (
+        initialProp?: (StaticProp & ChangeableProp),
+        init = true,
+    ) {
+        super(initialProp, false);
+
+        this._isPlaying = false;
+        this._frame = null;
+        this._frameIndex = -1;
+        this._timeStamp = null;
+        this._prevFrameTime = null;
+
+        if (init) {
+            this.init();
+        }
+    }
+
+    /**
+     * Get default properties
+     */
+    protected _getDefaultProp <
+        T extends RequiredModuleProp<StaticProp & ChangeableProp>
+    > (): T {
+        return {
+            ...super._getDefaultProp(),
+            fps: 140,
+            run: false,
+        };
+    }
+
+    // Extra constructor
+    protected _constructor () {
+        super._constructor();
+        this._create();
+    }
+
+
+
+    /**
+     * Create the frame
+     */
+    protected _create () {
+        if (this.prop.run) {
+            this.play();
+        }
+    }
+
+    protected _onPropMutate () {
+        this._frameIndex = -1;
+        this._timeStamp = null;
+        this._prevFrameTime = null;
+        if (this.prop.run) {
+            this._play();
+        } else {
+            this._pause();
+        }
+    }
+
+
+
+    /**
+     * Launch the animation frame.
+     */
+    public play () {
+        if (this.destroyed) {
+            return;
+        }
+        if (this.prop.run) {
+            return;
+        }
+        this.changeProp({
+            run: true,
+        } as ChangeableProp);
+    }
+
+    /**
+     * Launch the animation frame.
+     */
+    protected _play () {
+        // check if already playing
+        if (this.isPlaying) {
+            return;
+        }
+        this._isPlaying = true;
+        // launch animation
+        this._frame = window.requestAnimationFrame(this._animate.bind(this));
+    }
+
+
+
+    /**
+     * Stop the animation frame
+     */
+    public pause () {
+        if (!this.prop.run) {
+            return;
+        }
+        this.changeProp({
+            run: false,
+        } as ChangeableProp);
+    }
+
+    /**
+     * Stop the animation frame
+     */
+    protected _pause () {
+        if (!this.isPlaying) {
+            return;
+        }
+        // cancel animation frame
+        if (this._frame) {
+            window.cancelAnimationFrame(this._frame);
+            this._frame = null;
+        }
+        // bool
+        this._isPlaying = false;
+    }
+
+
+
+    /**
+     * Launch the animation frame.
+     */
+    protected _animate (
+        timestamp: number,
+    ) {
+        if (!this._isPlaying) {
+            return;
+        }
+
+        // launch animation
+        this._frame = window.requestAnimationFrame(this._animate.bind(this));
+
+        // update variables
+        const currentTime = +new Date();
+        if (this._timeStamp == null) {
+            this._timeStamp = timestamp;
+        }
+        if (this._prevFrameTime == null) {
+            this._prevFrameTime = currentTime;
+        }
+
+        // calculate frame index
+        const newFrameIndex = Math.floor((timestamp - this._timeStamp) / (1000 / this.prop.fps));
+        if (newFrameIndex <= this._frameIndex) {
+            return;
+        }
+
+        // update frame index
+        this._frameIndex = newFrameIndex;
+
+        // calculate real fps
+        const timeDiff = currentTime - this._prevFrameTime;
+        const realFPS = boundVal(
+            timeDiff === 0 ? 1000 / 60 : Math.floor(1000 / timeDiff),
+            [1, Infinity],
+        );
+
+        // launch callbacks
+        this.callbacks.tbt('frame', {
+            fps: this.prop.fps,
+            realFPS,
+            prevFrameDuration: currentTime - this._prevFrameTime,
+        });
+
+        this._prevFrameTime = +new Date();
+    }
+
+
+
+    /**
+     * Destroy the animation frame
+     */
+    protected _destroy () {
+        this.pause();
+        super._destroy();
+    }
+}

package/src/ts/components/canvas/Ctx2D.ts

@@ -0,0 +1,260 @@
+import { createElement } from 'vevet-dom';
+import { Component, NComponent } from '../../base/Component';
+import { NViewport } from '../../app/events/Viewport';
+import { RequiredModuleProp } from '../../utils/types/utility';
+
+
+
+export namespace NCtx2D {
+
+    /**
+     * Static properties
+     */
+    export interface StaticProp extends NComponent.StaticProp {
+        /**
+         * The parent element of the canvas. If false, it will be Window.
+         * @default false
+         */
+        container?: false | Element;
+        /**
+         * Defines if you need to append the canvas element to the parent.
+         * @default true
+         */
+        append?: boolean;
+        /**
+         * Update sizes on resize
+         * @default false
+         */
+        updateOnResize?: boolean | keyof NViewport.CallbacksTypes;
+    }
+
+    /**
+     * Changeable properties
+     */
+    export interface ChangeableProp extends NComponent.ChangeableProp {
+        /**
+         * The width of the canvas (dpr = 1).
+         * If false, the width will be the same as of the parent.
+         * @default false
+         */
+        width?: false | number;
+        /**
+         * The height of the canvas (dpr = 1).
+         * If false, the height will be the same as of the parent.
+         * @default false
+         */
+        height?: false | number;
+        /**
+         * Device pixel ratio.
+         * If false, the value will be calculated automatically.
+         * @default false
+         */
+        dpr?: false | number;
+    }
+
+    /**
+     * Available callbacks
+     */
+    export interface CallbacksTypes extends NComponent.CallbacksTypes {
+        'resize': false;
+    }
+
+}
+
+
+
+/**
+ * Makes working with canvas easier.
+ * It creates an HTML5 Canvas element and its 2d context and can
+ * implement automatic resize.
+ */
+export class Ctx2D <
+    StaticProp extends NCtx2D.StaticProp = NCtx2D.StaticProp,
+    ChangeableProp extends NCtx2D.ChangeableProp = NCtx2D.ChangeableProp,
+    CallbacksTypes extends NCtx2D.CallbacksTypes = NCtx2D.CallbacksTypes,
+> extends Component <
+    StaticProp,
+    ChangeableProp,
+    CallbacksTypes
+> {
+    /**
+     * The parent container of the canvas
+     */
+    get container () {
+        return this.prop.container;
+    }
+
+    /**
+     * The Canvas element itself
+     */
+    protected _canvas: HTMLCanvasElement;
+    get canvas () {
+        return this._canvas;
+    }
+
+    /**
+     * 2D Context
+     */
+    protected _ctx: CanvasRenderingContext2D;
+    get ctx () {
+        return this._ctx;
+    }
+
+    /**
+     * The width of the canvas
+     */
+    protected _width: number;
+    get width () {
+        return this._width;
+    }
+    /**
+     * Canvas width without DPR
+     */
+    get nonDPRWidth () {
+        return this.width / this.dpr;
+    }
+
+    /**
+     * The height of the canvas
+     */
+    protected _height: number;
+    get height () {
+        return this._height;
+    }
+    /**
+     * Canvas height without DPR
+     */
+    get nonDPRHeight () {
+        return this.height / this.dpr;
+    }
+
+    /**
+     * Device pixel ratio
+     */
+    protected _dpr: number;
+    get dpr () {
+        return this._dpr;
+    }
+
+
+
+    constructor (
+        initialProp?: (StaticProp & ChangeableProp),
+        init = true,
+    ) {
+        super(initialProp, false);
+
+        // set default values
+        this._width = 0;
+        this._height = 0;
+        this._dpr = 1;
+
+        // create canvas
+        const { append, container } = this.prop;
+        const parent = (append && container) ? container as Element : undefined;
+        this._canvas = createElement('canvas', {
+            parent,
+        });
+        this._ctx = this._canvas.getContext('2d')!;
+        // and resize it for the first time
+        this.resize();
+
+        // initialize the class
+        if (init) {
+            this.init();
+        }
+    }
+
+    protected _getDefaultProp <
+        T extends RequiredModuleProp<StaticProp & ChangeableProp>
+    > (): T {
+        return {
+            ...super._getDefaultProp(),
+            container: false,
+            append: true,
+            updateOnResize: false,
+            width: false,
+            height: false,
+            dpr: false,
+        };
+    }
+
+    // Set Module Events
+    protected _setEvents () {
+        super._setEvents();
+        if (this.prop.updateOnResize !== false) {
+            const viewportTarget: keyof NViewport.CallbacksTypes = typeof this.prop.updateOnResize === 'boolean' ? '' : this.prop.updateOnResize;
+            this.addViewportCallback(viewportTarget, () => {
+                this.resize();
+            });
+            this.resize();
+        }
+    }
+
+    protected _onPropMutate () {
+        super._onPropMutate();
+        this.resize();
+    }
+
+
+
+    /**
+     * Resize the canvas
+     */
+    public resize () {
+        // vars
+        const { prop, canvas } = this;
+        if (!canvas) {
+            return;
+        }
+        const app = this._app;
+        const { viewport } = app;
+
+        // calculate dpr
+        if (typeof prop.dpr === 'number') {
+            this._dpr = prop.dpr;
+        } else {
+            this._dpr = viewport.dpr;
+        }
+        const dpr = this._dpr;
+
+        // calculate new width & height
+        let newWidth = 0;
+        let newHeight = 0;
+        if (typeof prop.width === 'number' && typeof prop.height === 'number') {
+            newWidth = prop.width;
+            newHeight = prop.height;
+        } else if (this.container) {
+            newWidth = this.container.clientWidth;
+            newHeight = this.container.clientHeight;
+        } else {
+            newWidth = viewport.width;
+            newHeight = viewport.height;
+        }
+        newWidth *= dpr;
+        newHeight *= dpr;
+
+        // update sizes
+        this._width = newWidth;
+        this._height = newHeight;
+
+        // apply sizes
+        canvas.width = newWidth;
+        canvas.height = newHeight;
+
+        this.callbacks.tbt('resize', false);
+    }
+
+
+
+    /**
+     * Destroy the module
+     */
+    protected _destroy () {
+        super._destroy();
+
+        if (this.canvas) {
+            this.canvas.remove();
+        }
+    }
+}

package/src/ts/components/canvas/Ctx2DPrerender.ts

@@ -0,0 +1,96 @@
+import { getPos, BaseProp, PosRule } from 'get-image-pos';
+import { RequiredModuleProp } from '../../utils/types/utility';
+import { Ctx2D, NCtx2D } from './Ctx2D';
+
+
+
+export namespace NCtx2DPrerender {
+
+    /**
+     * Static properties
+     */
+    export interface StaticProp extends NCtx2D.StaticProp {
+        /**
+         * Media element
+         */
+        media: BaseProp['source'] | false;
+    }
+
+    /**
+     * Changeable properties
+     */
+    export interface ChangeableProp extends NCtx2D.ChangeableProp {
+        /**
+         * Media position rule
+         */
+        posRule?: PosRule;
+    }
+
+    /**
+     * Available callbacks
+     */
+    export interface CallbacksTypes extends NCtx2D.CallbacksTypes {
+        'prerender': false
+    }
+
+}
+
+
+
+/**
+ * The class allows you to prerender media for further use with reduced payloads.
+ */
+export class Ctx2DPrerender <
+    StaticProp extends NCtx2DPrerender.StaticProp = NCtx2DPrerender.StaticProp,
+    ChangeableProp extends NCtx2DPrerender.ChangeableProp = NCtx2DPrerender.ChangeableProp,
+    CallbacksTypes extends NCtx2DPrerender.CallbacksTypes = NCtx2DPrerender.CallbacksTypes,
+> extends Ctx2D <
+    StaticProp,
+    ChangeableProp,
+    CallbacksTypes
+> {
+    protected _getDefaultProp <
+        T extends RequiredModuleProp<StaticProp & ChangeableProp>
+    > (): T {
+        return {
+            ...super._getDefaultProp(),
+            media: false,
+            posRule: 'cover',
+        };
+    }
+
+    /**
+     * Resize the canvas
+     */
+    public resize () {
+        super.resize();
+        this._prerender();
+    }
+
+    protected _prerender () {
+        // check if media exists
+        const { media } = this.prop;
+        if (!media) {
+            return;
+        }
+
+        // get media sizes
+        const size = getPos({
+            source: media,
+            rule: this.prop.posRule,
+            scale: 1,
+            width: this.width,
+            height: this.height,
+        });
+        this._ctx.clearRect(0, 0, this.width, this.height);
+        // render the media
+        this._ctx.drawImage(
+            media,
+            0, 0,
+            size.sourceWidth, size.sourceHeight,
+            size.x, size.y, size.width, size.height,
+        );
+        // launch callbacks on prerender
+        this.callbacks.tbt('prerender', false);
+    }
+}