j-templates 6.1.4 → 6.1.6

package/DOM/domNodeConfig.js

@@ -10,26 +10,33 @@ const createPropertyAssignment_2 = require("./createPropertyAssignment");
 let pendingUpdates = list_1.List.Create();
 let updateScheduled = false;
 const frameTime = 16;
-let lastUpdate = 0;
+let frameStart = 0;
 function processUpdates() {
-    lastUpdate = Date.now();
     list_1.List.Add(pendingUpdates, null);
     let callback;
     while ((callback = list_1.List.Pop(pendingUpdates)))
         callback();
+    const now = Date.now();
     if (pendingUpdates.size === 0)
         updateScheduled = false;
-    else
+    else if (now - frameStart < frameTime)
+        queueMicrotask(processUpdates);
+    else {
+        frameStart = now;
         window_1.wndw.requestAnimationFrame(processUpdates);
+    }
 }
 function scheduleUpdate(callback) {
     list_1.List.Add(pendingUpdates, callback);
     if (!updateScheduled) {
+        const now = Date.now();
         updateScheduled = true;
-        if (Date.now() - lastUpdate < frameTime)
+        if (now - frameStart < frameTime)
             queueMicrotask(processUpdates);
-        else
+        else {
+            frameStart = now;
             window_1.wndw.requestAnimationFrame(processUpdates);
+        }
     }
 }
 exports.DOMNodeConfig = {

package/Utils/animation_v2.d.ts

@@ -0,0 +1,28 @@
+import { IDestroyable } from "./utils.types";
+export declare enum AnimationTypeV2 {
+    Linear = 0,
+    EaseIn = 1
+}
+export declare class AnimationV2 implements IDestroyable {
+    private type;
+    private running;
+    private start;
+    private end;
+    private enabled;
+    private animationStart;
+    private animationDuration;
+    private animationUpdate;
+    private animationRun;
+    get Running(): boolean;
+    get Start(): number;
+    get End(): number;
+    get Enabled(): boolean;
+    constructor(type: AnimationTypeV2, duration: number, update: {
+        (next: number): void;
+    });
+    Animate(start: number, end: number): Promise<void>;
+    Disable(): void;
+    Enable(): void;
+    Cancel(): void;
+    Destroy(): void;
+}

package/Utils/animation_v2.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnimationV2 = exports.AnimationTypeV2 = void 0;
+const domNodeConfig_1 = require("../DOM/domNodeConfig");
+var StepFunctions;
+(function (StepFunctions) {
+    function EaseIn(start, duration) {
+        const elapsed = Date.now() - start;
+        const percent = Math.min(elapsed / duration, 1);
+        return (1 - percent) * (1 - percent) * (1 - percent) * 0 + 3 * (1 - percent) * (1 - percent) * percent * 1 + 3 * (1 - percent) * percent * percent * 1 + percent * percent * percent * 1;
+    }
+    StepFunctions.EaseIn = EaseIn;
+    function Linear(start, duration) {
+        const elapsed = Date.now() - start;
+        const percent = Math.min(elapsed / duration, 1);
+        return percent;
+    }
+    StepFunctions.Linear = Linear;
+})(StepFunctions || (StepFunctions = {}));
+var AnimationTypeV2;
+(function (AnimationTypeV2) {
+    AnimationTypeV2[AnimationTypeV2["Linear"] = 0] = "Linear";
+    AnimationTypeV2[AnimationTypeV2["EaseIn"] = 1] = "EaseIn";
+})(AnimationTypeV2 || (exports.AnimationTypeV2 = AnimationTypeV2 = {}));
+class AnimationV2 {
+    get Running() {
+        return this.running;
+    }
+    get Start() {
+        return this.start;
+    }
+    get End() {
+        return this.end;
+    }
+    get Enabled() {
+        return this.enabled;
+    }
+    constructor(type, duration, update) {
+        this.animationStart = 0;
+        this.animationRun = null;
+        this.running = false;
+        this.start = null;
+        this.end = null;
+        this.enabled = true;
+        this.type = type;
+        this.animationDuration = duration;
+        this.animationUpdate = update;
+    }
+    Animate(start, end) {
+        if (!this.enabled)
+            return;
+        const diff = end - start;
+        if (diff === 0)
+            return;
+        this.Cancel();
+        this.animationStart = Date.now();
+        this.running = true;
+        this.start = start;
+        this.end = end;
+        return new Promise(resolve => {
+            const stepFunc = StepFunctions[AnimationTypeV2[this.type]];
+            const animationRun = () => {
+                if (this.animationRun !== animationRun)
+                    return;
+                const percent = stepFunc(this.animationStart, this.animationDuration);
+                const step = percent * diff;
+                const next = this.start + step;
+                this.animationUpdate(next);
+                if (percent < 1)
+                    domNodeConfig_1.DOMNodeConfig.scheduleUpdate(this.animationRun);
+                else {
+                    resolve();
+                }
+            };
+            this.animationRun = animationRun;
+            domNodeConfig_1.DOMNodeConfig.scheduleUpdate(this.animationRun);
+        }).then(() => {
+            this.Cancel();
+        });
+    }
+    Disable() {
+        this.Cancel();
+        this.enabled = false;
+    }
+    Enable() {
+        this.enabled = true;
+    }
+    Cancel() {
+        this.running = false;
+        this.start = null;
+        this.end = null;
+        this.animationRun = null;
+    }
+    Destroy() {
+        this.Cancel();
+    }
+}
+exports.AnimationV2 = AnimationV2;

package/Utils/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./decorators";
 export * from "./animation";
+export * from "./animation_v2";

package/Utils/index.js

@@ -16,3 +16,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./decorators"), exports);
 __exportStar(require("./animation"), exports);
+__exportStar(require("./animation_v2"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "j-templates",
-  "version": "6.1.4",
+  "version": "6.1.6",
   "description": "j-templates",
   "license": "MIT",
   "repository": "https://github.com/TypesInCode/jTemplates",