From 27edd8a2846b850d78b08ecb3879f6e233b5bd67 Mon Sep 17 00:00:00 2001
From: Davide Tantillo <iamdjj@gmail.com>
Date: Thu, 26 Sep 2024 17:08:31 +0200
Subject: [PATCH] Made span fps display configurable.

---
 .../spine-webgl/example/webcomponent.html     |  3 +++
 .../src/SpineWebComponentWidget.ts            | 24 ++++++++++++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/spine-ts/spine-webgl/example/webcomponent.html b/spine-ts/spine-webgl/example/webcomponent.html
index 913ed9935..a00aad89d 100644
--- a/spine-ts/spine-webgl/example/webcomponent.html
+++ b/spine-ts/spine-webgl/example/webcomponent.html
@@ -1847,6 +1847,9 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
     /////////////////////
     -->
 
+<script>
+    spine.SpineWebComponentWidget.SHOW_FPS = true;
+</script>
 
 
 <script>
diff --git a/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts b/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts
index bf99d2a2b..049f58651 100644
--- a/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts
+++ b/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts
@@ -152,7 +152,12 @@ interface WidgetInternalProperties {
     debugDragDiv: HTMLDivElement
 }
 
-class SpineWebComponentWidget extends HTMLElement implements WidgetAttributes, WidgetOverridableMethods, WidgetInternalProperties, Partial<WidgetPublicProperties> {
+export class SpineWebComponentWidget extends HTMLElement implements WidgetAttributes, WidgetOverridableMethods, WidgetInternalProperties, Partial<WidgetPublicProperties> {
+
+    /**
+     * If true, enables a top-left span showing FPS (it has black text)
+     */
+    public static SHOW_FPS = false;
 
     /**
      * The URL of the skeleton atlas file (.atlas)
@@ -833,6 +838,7 @@ class SpineWebComponentOverlay extends HTMLElement {
     private div: HTMLDivElement;
     private canvas:HTMLCanvasElement;
     private fps: HTMLSpanElement;
+    private fpsAppended = false;
 
     public skeletonList = new Array<SpineWebComponentWidget>();
 
@@ -886,7 +892,6 @@ class SpineWebComponentOverlay extends HTMLElement {
         this.fps.style.position = "fixed";
 		this.fps.style.top = "0";
 		this.fps.style.left = "0";
-        this.root.appendChild(this.fps);
 
         const context = new ManagedWebGLRenderingContext(this.canvas, { alpha: true });
 		this.renderer = new SceneRenderer(this.canvas, context);
@@ -950,7 +955,20 @@ class SpineWebComponentOverlay extends HTMLElement {
                     }
                 }
             });
-            this.fps.innerText = this.time.framesPerSecond.toFixed(2) + " fps";
+
+            // fps top-left span
+            if (SpineWebComponentWidget.SHOW_FPS) {
+                if (!this.fpsAppended) {
+                    this.root.appendChild(this.fps);
+                    this.fpsAppended = true;
+                }
+                this.fps.innerText = this.time.framesPerSecond.toFixed(2) + " fps";
+            } else {
+                if (this.fpsAppended) {
+                    this.root.removeChild(this.fps);
+                    this.fpsAppended = false;
+                }
+            }
         };
 
         const clear = (r: number, g: number, b: number, a: number) => {