@openglobus/og 0.20.2 → 0.20.4

package/lib/js/webgl/Handler.js

@@ -6,6 +6,7 @@ import { ImageCanvas } from "../ImageCanvas";
 import { Vec2 } from "../math/Vec2";
 import { ProgramController } from "./ProgramController";
 import { Stack } from "../Stack";
+import { throttle } from "../utils/shared";
 const vendorPrefixes = ["", "WEBKIT_", "MOZ_"];
 const CONTEXT_TYPE = ["webgl2", "webgl"];
 // Maximal mipmap levels
@@ -25,7 +26,35 @@ class Handler {
     constructor(canvasTarget, params = {}) {
         this.framebufferStack = new Stack();
         this._requestAnimationFrameId = 0;
+        /**
+         * Draw single frame.
+         * @public
+         */
+        this.drawFrame = () => {
+            /** Calculating frame time */
+            let now = window.performance.now();
+            this.deltaTime = now - this._lastAnimationFrameTime;
+            this._lastAnimationFrameTime = now;
+            this.defaultClock.tick(this.deltaTime);
+            for (let i = 0; i < this._clocks.length; i++) {
+                this._clocks[i].tick(this.deltaTime);
+            }
+            /** Canvas resize checking */
+            let canvas = this.canvas;
+            if (Math.floor(canvas.clientWidth * this._params.pixelRatio) !== canvas.width || Math.floor(canvas.clientHeight * this._params.pixelRatio) !== canvas.height) {
+                if (canvas.clientWidth === 0 || canvas.clientHeight === 0) {
+                    this.stop();
+                }
+                else if (!document.hidden) {
+                    this.start();
+                    this.setSize(canvas.clientWidth, canvas.clientHeight);
+                }
+            }
+            /** Draw frame */
+            this._frameCallback();
+        };
         this.events = createEvents(["visibilitychange", "resize"]);
+        this._throttledDrawFrame = this.drawFrame;
         this.defaultClock = new Clock();
         this._clocks = [];
         this.deltaTime = 0;
@@ -69,6 +98,14 @@ class Handler {
             this.initialize();
         }
     }
+    set frameDelay(delay) {
+        if (delay === 0) {
+            this._throttledDrawFrame = this.drawFrame;
+        }
+        else {
+            this._throttledDrawFrame = throttle(this.drawFrame, delay);
+        }
+    }
     isInitialized() {
         return this._initialized;
     }
@@ -786,33 +823,6 @@ class Handler {
         let c = this.canvas;
         return c ? new Vec2(Math.round(c.width * 0.5), Math.round(c.height * 0.5)) : new Vec2();
     }
-    /**
-     * Draw single frame.
-     * @public
-     */
-    drawFrame() {
-        /** Calculating frame time */
-        let now = window.performance.now();
-        this.deltaTime = now - this._lastAnimationFrameTime;
-        this._lastAnimationFrameTime = now;
-        this.defaultClock.tick(this.deltaTime);
-        for (let i = 0; i < this._clocks.length; i++) {
-            this._clocks[i].tick(this.deltaTime);
-        }
-        /** Canvas resize checking */
-        let canvas = this.canvas;
-        if (Math.floor(canvas.clientWidth * this._params.pixelRatio) !== canvas.width || Math.floor(canvas.clientHeight * this._params.pixelRatio) !== canvas.height) {
-            if (canvas.clientWidth === 0 || canvas.clientHeight === 0) {
-                this.stop();
-            }
-            else if (!document.hidden) {
-                this.start();
-                this.setSize(canvas.clientWidth, canvas.clientHeight);
-            }
-        }
-        /** Draw frame */
-        this._frameCallback();
-    }
     /**
      * Clearing gl frame.
      * @public
@@ -853,7 +863,7 @@ class Handler {
      */
     _animationFrameCallback() {
         this._requestAnimationFrameId = window.requestAnimationFrame(() => {
-            this.drawFrame();
+            this._throttledDrawFrame();
             this._requestAnimationFrameId && this._animationFrameCallback();
         });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openglobus/og",
-  "version": "0.20.2",
+  "version": "0.20.4",
   "description": "[openglobus](https://www.openglobus.org/) is a javascript/typescript library designed to display interactive 3d maps and planets with map tiles, imagery and vector data, markers, and 3D objects. It uses the WebGL technology, open source, and completely free.",
   "directories": {
     "example": "./sandbox"