✨ Adds a debug FPS widget

frontend/src/app/util/debug.cljs

@@ -1,6 +1,10 @@
 (ns app.util.debug
   "Debugging utils"
-  (:require [cljs.pprint :refer [pprint]]))
+  (:require
+   [app.util.timers :as timers]
+   [app.util.object :as obj]
+   [app.common.math :as mth]
+   [cljs.pprint :refer [pprint]]))
 
 (def debug-options #{:bounding-boxes :group :events :rotation-handler :resize-handler :selection-center #_:simple-selection})
 
@@ -51,3 +55,41 @@
   (set! (.-dbg ^js js/window) clj->js)
   (set! (.-pp ^js js/window) pprint))
 
+
+(defonce widget-style "
+  background: black;
+  bottom: 10px;
+  color: white;
+  height: 20px;
+  padding-left: 8px;
+  position: absolute;
+  right: 10px;
+  width: 40px;
+  z-index: 99999;
+  opacity: 0.5;
+")
+
+(defn ^:export fps
+  "Adds a widget to keep track of the average FPS's"
+  []
+  (let [last (volatile! (.now js/performance))
+        avg  (volatile! 0)
+        node (-> (.createElement js/document "div")
+                 (obj/set! "id" "fps")
+                 (obj/set! "style" widget-style))
+        body (obj/get js/document "body")
+
+        do-thing (fn do-thing []
+                   (timers/raf
+                    (fn []
+                      (let [cur (.now js/performance)
+                            ts (/ 1000 (* (- cur @last)))
+                            val (+ @avg (* (- ts @avg) 0.1))]
+
+                        (obj/set! node "innerText" (mth/precision val 0))
+                        (vreset! last cur)
+                        (vreset! avg val)
+                        (do-thing)))))]
+
+    (.appendChild body node)
+    (do-thing)))