Move to Renderer V2

packages/utils/src/motion/Callback.ts

@@ -0,0 +1,30 @@
+import { Motion } from './Motion';
+
+export class Callback extends Motion
+{
+    protected _callback: Function;
+
+    constructor(k: Function)
+    {
+        super(null);
+
+        this._callback = k;
+    }
+
+    public get running(): boolean
+    {
+        return (this._running && !!this._callback);
+    }
+
+    public tick(k: number): void
+    {
+        super.tick(k);
+
+        if(this._callback)
+        {
+            this._callback();
+
+            this._callback = null;
+        }
+    }
+}

packages/utils/src/motion/Combo.ts

@@ -0,0 +1,61 @@
+import { Motion } from './Motion';
+
+export class Combo extends Motion
+{
+    private _runningMotions: Motion[];
+    private _removedMotions: Motion[];
+
+    constructor(...motions: Motion[])
+    {
+        super((motions && motions.length) ? motions[0].target : null);
+
+        this._runningMotions = [];
+        this._removedMotions = [];
+
+        for(const motion of motions) this._runningMotions.push(motion);
+    }
+
+    public start(): void
+    {
+        super.start();
+
+        for(const motion of this._runningMotions) motion.start();
+    }
+
+    public tick(k: number): void
+    {
+        super.tick(k);
+
+        let motion: Motion = null;
+
+        while(((motion = this._removedMotions.pop()) !== null))
+        {
+            this._runningMotions.splice(this._removedMotions.indexOf(motion), 1);
+
+            if(motion.running) motion.stop();
+        }
+
+        for(const motion of this._runningMotions)
+        {
+            if(motion.running) motion.tick(k);
+
+            if(motion.complete) this._removedMotions.push(motion);
+        }
+
+        if(this._runningMotions.length > 0)
+        {
+            for(const motion of this._runningMotions)
+            {
+                this._target = motion.target;
+
+                if(this._target) break;
+            }
+
+            this._complete = false;
+        }
+        else
+        {
+            this._complete = true;
+        }
+    }
+}

packages/utils/src/motion/Dispose.ts

@@ -0,0 +1,21 @@
+import { Motion } from './Motion';
+
+export class Dispose extends Motion
+{
+    constructor(k: HTMLElement)
+    {
+        super(k);
+    }
+
+    public tick(k: number): void
+    {
+        super.tick(k);
+
+        if(this.target)
+        {
+            this.target.remove();
+
+            this.target = null;
+        }
+    }
+}

packages/utils/src/motion/DropBounce.ts

@@ -0,0 +1,60 @@
+import { Interval } from './Interval';
+
+export class DropBounce extends Interval
+{
+    private _height: number;
+    private _offset: number;
+
+    constructor(target: HTMLElement, duration: number, height: number)
+    {
+        super(target, duration);
+
+        this._height = height;
+    }
+
+    public start(): void
+    {
+        super.start();
+
+        this._offset = 0;
+
+        this.target.style.top = ((this._offset - this._height) + 'px');
+    }
+
+    public update(time: number): void
+    {
+        super.update(time);
+
+        this.target.style.top = (((this._offset - this._height) + (this.getBounceOffset(time) * this._height)) + 'px');
+    }
+
+    protected getBounceOffset(k: number): number
+    {
+        if(k < 0.364) return (7.5625 * k) * k;
+
+        if(k < 0.727)
+        {
+            k = (k - 0.545);
+
+            return ((7.5625 * k) * k) + 0.75;
+        }
+
+        if(k < 0.909)
+        {
+            k = (k - 0.9091);
+
+            return ((7.5625 * k) * k) + 0.9375;
+        }
+
+        k = (k - 0.955);
+
+        return ((7.5625 * k) * k) + 0.984375;
+    }
+
+    public stop(): void
+    {
+        this.target.style.top = (this._offset + 'px');
+
+        super.stop();
+    }
+}

packages/utils/src/motion/Ease.ts

@@ -0,0 +1,34 @@
+import { Interval } from './Interval';
+
+export class Ease extends Interval
+{
+    protected _interval: Interval;
+
+    constructor(k: Interval)
+    {
+        super(k.target, k.duration);
+
+        this._interval = k;
+    }
+
+    public start(): void
+    {
+        super.start();
+
+        this._interval.start();
+    }
+
+    public update(k: number): void
+    {
+        super.update(k);
+
+        this._interval.update(k);
+    }
+
+    public stop(): void
+    {
+        super.stop();
+
+        this._interval.stop();
+    }
+}

packages/utils/src/motion/EaseOut.ts

@@ -0,0 +1,15 @@
+import { EaseRate } from './EaseRate';
+import { Interval } from './Interval';
+
+export class EaseOut extends EaseRate
+{
+    constructor(k: Interval, _arg_2: number)
+    {
+        super(k, _arg_2);
+    }
+
+    public update(k: number): void
+    {
+        this._interval.update(Math.pow(k, (1 / this._rate)));
+    }
+}

packages/utils/src/motion/EaseRate.ts

@@ -0,0 +1,14 @@
+import { Ease } from './Ease';
+import { Interval } from './Interval';
+
+export class EaseRate extends Ease
+{
+    protected _rate: number;
+
+    constructor(k: Interval, _arg_2: number)
+    {
+        super(k);
+
+        this._rate = _arg_2;
+    }
+}

packages/utils/src/motion/Interval.ts

@@ -0,0 +1,47 @@
+import { GetTickerTime } from '../GetTickerTime';
+import { Motion } from './Motion';
+
+export class Interval extends Motion
+{
+    private _startTimeMs: number;
+    private _duration: number;
+
+    constructor(target: HTMLElement, duration: number)
+    {
+        super(target);
+
+        this._complete = false;
+        this._duration = duration;
+    }
+
+    public get duration(): number
+    {
+        return this._duration;
+    }
+
+    public start(): void
+    {
+        super.start();
+
+        this._complete = false;
+        this._startTimeMs = GetTickerTime();
+    }
+
+    public tick(time: number): void
+    {
+        super.tick(time);
+
+        const elapsed = ((time - this._startTimeMs) / this._duration);
+
+        if(elapsed < 1)
+        {
+            this.update(elapsed);
+        }
+        else
+        {
+            this.update(1);
+
+            this._complete = true;
+        }
+    }
+}

packages/utils/src/motion/JumpBy.ts

@@ -0,0 +1,37 @@
+import { Interval } from './Interval';
+
+export class JumpBy extends Interval
+{
+    protected _startX: number;
+    protected _startY: number;
+    protected _deltaX: number;
+    protected _deltaY: number;
+    protected _height: number;
+    protected _numJumps: number;
+
+    constructor(target: HTMLElement, duration: number, deltaX: number, deltaY: number, height: number, numJumps: number)
+    {
+        super(target, duration);
+
+        this._deltaX = deltaX;
+        this._deltaY = deltaY;
+        this._height = -(height);
+        this._numJumps = numJumps;
+    }
+
+    public start(): void
+    {
+        super.start();
+
+        this._startX = this.target.offsetLeft;
+        this._startY = this.target.offsetTop;
+    }
+
+    public update(k: number): void
+    {
+        super.update(k);
+
+        this.target.style.left = ((this._startX + (this._deltaX * k)) + 'px');
+        this.target.style.top = (((this._startY + (this._height * Math.abs(Math.sin(((k * Math.PI) * this._numJumps))))) + (this._deltaY * k)) + 'px');
+    }
+}

packages/utils/src/motion/Motion.ts

@@ -0,0 +1,61 @@
+export class Motion
+{
+    protected _target: HTMLElement;
+    protected _running: boolean;
+    protected _complete: boolean = true;
+    protected _tag: string;
+
+    constructor(target: HTMLElement)
+    {
+        this._target = target;
+    }
+
+    public get running(): boolean
+    {
+        return ((this._running) && (!!this._target));
+    }
+
+    public get complete(): boolean
+    {
+        return this._complete;
+    }
+
+    public set target(k: HTMLElement)
+    {
+        this._target = k;
+    }
+
+    public get target(): HTMLElement
+    {
+        return this._target;
+    }
+
+    public set tag(k: string)
+    {
+        this._tag = k;
+    }
+
+    public get tag(): string
+    {
+        return this._tag;
+    }
+
+    public start(): void
+    {
+        this._running = true;
+    }
+
+    public update(k: number): void
+    {
+    }
+
+    public stop(): void
+    {
+        this._target = null;
+        this._running = false;
+    }
+
+    public tick(k: number): void
+    {
+    }
+}

packages/utils/src/motion/Motions.ts

@@ -0,0 +1,194 @@
+import { GetTickerFPS } from '../GetTickerFPS';
+import { GetTickerTime } from '../GetTickerTime';
+import { Motion } from './Motion';
+
+export class Motions
+{
+    private static _QUEUED_MOTIONS: Motion[] = [];
+    private static _RUNNING_MOTIONS: Motion[] = [];
+    private static _REMOVED_MOTIONS: Motion[] = [];
+    private static _TIMER: ReturnType<typeof setInterval> = null;
+    private static _IS_UPDATING: boolean = false;
+
+    public static get TIMER_TIME(): number
+    {
+        return (1000 / GetTickerFPS());
+    }
+
+    public static runMotion(k: Motion): Motion
+    {
+        if(((Motions._RUNNING_MOTIONS.indexOf(k) === -1) && (Motions._QUEUED_MOTIONS.indexOf(k) === -1)))
+        {
+            if(Motions._IS_UPDATING)
+            {
+                Motions._QUEUED_MOTIONS.push(k);
+            }
+            else
+            {
+                Motions._RUNNING_MOTIONS.push(k);
+
+                k.start();
+            }
+
+            Motions.startTimer();
+        }
+
+        return k;
+    }
+
+    public static removeMotion(k: Motion): void
+    {
+        let _local_2: number = Motions._RUNNING_MOTIONS.indexOf(k);
+
+        if(_local_2 > -1)
+        {
+            if(Motions._IS_UPDATING)
+            {
+                _local_2 = Motions._REMOVED_MOTIONS.indexOf(k);
+
+                if(_local_2 == -1) Motions._REMOVED_MOTIONS.push(k);
+            }
+            else
+            {
+                Motions._RUNNING_MOTIONS.splice(_local_2, 1);
+
+                if(k.running) k.stop();
+
+                if(!Motions._RUNNING_MOTIONS.length) Motions.stopTimer();
+            }
+        }
+        else
+        {
+            _local_2 = Motions._QUEUED_MOTIONS.indexOf(k);
+
+            if(_local_2 > -1) Motions._QUEUED_MOTIONS.splice(_local_2, 1);
+        }
+    }
+
+    public static getMotionByTag(k: string): Motion
+    {
+        for(const _local_2 of Motions._RUNNING_MOTIONS)
+        {
+            if(_local_2.tag == k) return _local_2;
+        }
+
+        for(const _local_2 of Motions._QUEUED_MOTIONS)
+        {
+            if(_local_2.tag == k) return _local_2;
+        }
+
+        return null;
+    }
+
+    public static getMotionByTarget(k: HTMLElement): Motion
+    {
+        for(const _local_2 of Motions._RUNNING_MOTIONS)
+        {
+            if(_local_2.target == k) return _local_2;
+        }
+
+        for(const _local_2 of Motions._QUEUED_MOTIONS)
+        {
+            if(_local_2.target == k) return _local_2;
+        }
+
+        return null;
+    }
+
+    public static getMotionByTagAndTarget(k: string, _arg_2: HTMLElement): Motion
+    {
+        for(const _local_3 of Motions._RUNNING_MOTIONS)
+        {
+            if(((_local_3.tag == k) && (_local_3.target == _arg_2))) return _local_3;
+        }
+
+        for(const _local_3 of Motions._QUEUED_MOTIONS)
+        {
+            if(((_local_3.tag == k) && (_local_3.target == _arg_2))) return _local_3;
+        }
+
+        return null;
+    }
+
+    public static get isRunning(): boolean
+    {
+        return !!Motions._TIMER;
+    }
+
+    public static get isUpdating(): boolean
+    {
+        return Motions._IS_UPDATING;
+    }
+
+    private static onTick(): void
+    {
+        Motions._IS_UPDATING = true;
+
+        const _local_2: number = GetTickerTime();
+
+        let _local_3: Motion = null;
+
+        // eslint-disable-next-line no-cond-assign
+        while(_local_3 = Motions._QUEUED_MOTIONS.pop()) Motions._RUNNING_MOTIONS.push(_local_3);
+
+        // eslint-disable-next-line no-cond-assign
+        while(_local_3 = Motions._REMOVED_MOTIONS.pop())
+        {
+            Motions._RUNNING_MOTIONS.splice(Motions._RUNNING_MOTIONS.indexOf(_local_3), 1);
+
+            if(_local_3.running) _local_3.stop();
+        }
+
+        for(_local_3 of Motions._RUNNING_MOTIONS)
+        {
+            if(_local_3.running)
+            {
+                _local_3.tick(_local_2);
+
+                if(_local_3.complete)
+                {
+                    Motions.removeMotion(_local_3);
+                }
+            }
+            else
+            {
+                Motions.removeMotion(_local_3);
+            }
+        }
+
+        if(!Motions._RUNNING_MOTIONS.length) Motions.stopTimer();
+
+        Motions._IS_UPDATING = false;
+    }
+
+    private static startTimer(): void
+    {
+        if(!Motions._TIMER)
+        {
+            Motions._TIMER = setInterval(Motions.onTick, Motions.TIMER_TIME);
+        }
+    }
+
+    private static stopTimer(): void
+    {
+        if(Motions._TIMER)
+        {
+            clearInterval(Motions._TIMER);
+
+            Motions._TIMER = null;
+        }
+    }
+
+
+    public getNumRunningMotions(k: HTMLElement): number
+    {
+        let _local_2 = 0;
+
+        for(const _local_3 of Motions._RUNNING_MOTIONS)
+        {
+            if(_local_3.target === k) _local_2++;
+        }
+
+        return _local_2;
+    }
+}

packages/utils/src/motion/MoveBy.ts

@@ -0,0 +1,17 @@
+import { MoveTo } from './MoveTo';
+
+export class MoveBy extends MoveTo
+{
+    constructor(k: HTMLElement, _arg_2: number, _arg_3: number, _arg_4: number)
+    {
+        super(k, _arg_2, _arg_3, _arg_4);
+    }
+
+    public start(): void
+    {
+        this._endX = (this.target.offsetLeft + this._endX);
+        this._endY = (this.target.offsetTop + this._endY);
+
+        super.start();
+    }
+}

packages/utils/src/motion/MoveTo.ts

@@ -0,0 +1,35 @@
+import { Interval } from './Interval';
+
+export class MoveTo extends Interval
+{
+    protected _startX: number;
+    protected _startY: number;
+    protected _endX: number;
+    protected _endY: number;
+    protected _deltaX: number;
+    protected _deltaY: number;
+
+    constructor(k: HTMLElement, _arg_2: number, _arg_3: number, _arg_4: number)
+    {
+        super(k, _arg_2);
+
+        this._endX = _arg_3;
+        this._endY = _arg_4;
+    }
+
+    public start(): void
+    {
+        super.start();
+
+        this._startX = this.target.offsetLeft;
+        this._startY = this.target.offsetTop;
+        this._deltaX = (this._endX - this._startX);
+        this._deltaY = (this._endY - this._startY);
+    }
+
+    public update(k: number): void
+    {
+        this.target.style.left = ((this._startX + (this._deltaX * k)) + 'px');
+        this.target.style.top = ((this._startY + (this._deltaY * k)) + 'px');
+    }
+}

packages/utils/src/motion/Queue.ts

@@ -0,0 +1,71 @@
+import { Motion } from './Motion';
+
+export class Queue extends Motion
+{
+    private _motion: Motion;
+    private _queue: Motion[];
+
+    constructor(...motions: Motion[])
+    {
+        super((motions ? motions[0].target : null));
+
+        this._queue = [];
+
+        for(const motion of motions) this._queue.push(motion);
+
+        this._motion = motions[0];
+        this._complete = !this._motion;
+    }
+
+    public get running(): boolean
+    {
+        return ((this._running && this._motion) ? this._motion.running : false);
+    }
+
+    public start(): void
+    {
+        super.start();
+
+        this._motion.start();
+    }
+
+    public update(k: number): void
+    {
+        super.update(k);
+
+        if(this._motion.running) this._motion.update(k);
+    }
+
+    public stop(): void
+    {
+        super.stop();
+
+        this._motion.stop();
+    }
+
+    public tick(k: number): void
+    {
+        super.tick(k);
+
+        this._motion.tick(k);
+
+        if(this._motion.complete)
+        {
+            this._motion.stop();
+
+            const index = this._queue.indexOf(this._motion);
+
+            if(index < (this._queue.length - 1))
+            {
+                this._motion = this._queue[(index + 1)];
+                this._target = this._motion.target;
+
+                this._motion.start();
+            }
+            else
+            {
+                this._complete = true;
+            }
+        }
+    }
+}

packages/utils/src/motion/ResizeTo.ts

@@ -0,0 +1,35 @@
+import { Interval } from './Interval';
+
+export class ResizeTo extends Interval
+{
+    protected _startW: number;
+    protected _startH: number;
+    protected _endW: number;
+    protected _endH: number;
+    protected _deltaW: number;
+    protected _deltaH: number;
+
+    constructor(k: HTMLElement, _arg_2: number, _arg_3: number, _arg_4: number)
+    {
+        super(k, _arg_2);
+
+        this._endW = _arg_3;
+        this._endH = _arg_4;
+    }
+
+    public start(): void
+    {
+        super.start();
+
+        this._startW = this.target.offsetWidth;
+        this._startH = this.target.offsetHeight;
+        this._deltaW = (this._endW - this._startW);
+        this._deltaH = (this._endH - this._startH);
+    }
+
+    public update(k: number): void
+    {
+        this.target.style.width = ((this._startW + (this._deltaW * k)) + 'px');
+        this.target.style.height = ((this._startH + (this._deltaH * k)) + 'px');
+    }
+}

packages/utils/src/motion/Wait.ts

@@ -0,0 +1,37 @@
+import { GetTickerTime } from '../GetTickerTime';
+import { Motion } from './Motion';
+
+export class Wait extends Motion
+{
+    private _startTimeMs: number;
+    private _waitTimeMs: number;
+
+    constructor(k: number)
+    {
+        super(null);
+
+        this._waitTimeMs = k;
+    }
+
+    public get running(): boolean
+    {
+        return this._running;
+    }
+
+    public start(): void
+    {
+        super.start();
+
+        this._complete = false;
+        this._startTimeMs = GetTickerTime();
+    }
+
+    public tick(k: number): void
+    {
+        super.tick(k);
+
+        this._complete = ((k - this._startTimeMs) >= this._waitTimeMs);
+
+        if(this._complete) this.stop();
+    }
+}

packages/utils/src/motion/index.ts

@@ -0,0 +1,16 @@
+export * from './Callback';
+export * from './Combo';
+export * from './Dispose';
+export * from './DropBounce';
+export * from './Ease';
+export * from './EaseOut';
+export * from './EaseRate';
+export * from './Interval';
+export * from './JumpBy';
+export * from './Motion';
+export * from './Motions';
+export * from './MoveBy';
+export * from './MoveTo';
+export * from './Queue';
+export * from './ResizeTo';
+export * from './Wait';