Merge pull request #58 from kateter-platform/fix-timer-issue

Fix timer issue

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kateter-platform/graphica-gemini",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "source": "./src/index.ts",
   "description": "A tool for advanced graphing and visualization",
   "license": "MIT",
@@ -28,6 +28,7 @@
     "parcel": "^2.9.3",
     "prettier": "^2.8.8",
     "process": "^0.11.10",
+    "stats.js": "^0.17.0",
     "ts-loader": "^9.4.3",
     "typescript": "^5.1.3",
     "webpack": "^5.88.0",

src/Graphica.ts

@@ -7,6 +7,7 @@ import {
   Object3D,
   Clock,
 } from "three";
+import Stats from "stats.js";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
 import { CSS3DRenderer } from "three/examples/jsm/renderers/CSS3DRenderer";
 import {
@@ -48,7 +49,9 @@ const defaultGraphicaOptions: GraphicaOptions = {
 class Graphica {
   components: Component[];
   draggables: Component[];
+  updateComponents: Component[];
 
+  stats?: Stats;
   renderer: WebGLRenderer;
   domRenderer: CSS3DRenderer;
   camera: OrthographicCamera;
@@ -58,6 +61,8 @@ class Graphica {
   guiRoot: HTMLElement;
   clock: Clock;
 
+  onUpdateFunction?: (elapsedTime: number) => void;
+
   constructor(options?: GraphicaOptions) {
     const {
       root,
@@ -117,6 +122,12 @@ class Graphica {
 
     this.components = [];
     this.draggables = [];
+    this.updateComponents = [];
+    if (process.env.NODE_ENV === "development") {
+      this.stats = new Stats();
+      this.stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
+      document.body.appendChild(this.stats.dom);
+    }
 
     const dragControls = new DragControls(
       this.draggables,
@@ -186,29 +197,22 @@ class Graphica {
     window.addEventListener("resize", onWindowResize);
   }
 
-  run(
-    onUpdate?: (elapsedTime: number) => void,
-    clockState?: { conditional: boolean }
-  ) {
-    clockState = clockState ?? { conditional: true };
-
-    if (!this.clock.running && clockState.conditional) {
-      this.clock.start();
-    } else if (this.clock.running && !clockState.conditional) {
-      this.clock.stop();
-    }
-    requestAnimationFrame(this.run.bind(this, onUpdate, clockState));
-    this.scene.traverse((child: Object3D) => {
-      if (!(child instanceof Component)) {
-        return;
-      }
-      if (child.update) {
-        child.update(this.camera);
-      }
+  doRun = () => {
+    this.stats?.begin();
+    requestAnimationFrame(this.doRun);
+    this.updateComponents.forEach((component) => {
+      if (component.update) component.update(this.camera);
     });
-    if (onUpdate) onUpdate(this.clock.getElapsedTime());
+    if (this.onUpdateFunction)
+      this.onUpdateFunction(this.clock.getElapsedTime());
     this.domRenderer.render(this.scene, this.camera);
     this.renderer.render(this.scene, this.camera);
+    this.stats?.end();
+  };
+
+  run(onUpdate?: (elapsedTime: number) => void) {
+    this.onUpdateFunction = onUpdate;
+    this.doRun();
   }
 
   add(component: Component) {
@@ -218,6 +222,15 @@ class Graphica {
       this.draggables.push(component);
     }
     this.components.push(component);
+
+    this.scene.traverse((child: Object3D) => {
+      if (!(child instanceof Component)) {
+        return;
+      }
+      if (child.update && !this.updateComponents.includes(child)) {
+        this.updateComponents.push(child);
+      }
+    });
   }
 
   remove(component: Component) {
@@ -237,6 +250,14 @@ class Graphica {
     this.guiRoot.removeChild(component.htmlElement);
   }
 
+  startClock(): void {
+    this.clock.start();
+  }
+
+  stopClock(): void {
+    this.clock.stop();
+  }
+
   enableControls() {
     this.controls.enabled = true;
   }

yarn.lock

@@ -5351,6 +5351,11 @@ stable@^0.1.8:
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
   integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
 
+stats.js@^0.17.0:
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/stats.js/-/stats.js-0.17.0.tgz#b1c3dc46d94498b578b7fd3985b81ace7131cc7d"
+  integrity sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==
+
 [email protected]:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"