add fps counter (if VUE_APP_DEMO is set), rename svg hidden class

app/.env

@@ -0,0 +1 @@
+VUE_APP_DEMO=true

app/package.json

@@ -10,10 +10,12 @@
     "core-js": "^3.6.5",
     "normalize.css": "^8.0.1",
     "panzoom": "^9.4.1",
+    "stats.js": "^0.17.0",
     "vue": "^3.0.0",
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
+    "@types/stats.js": "^0.17.0",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-typescript": "~4.5.0",
     "@vue/cli-plugin-vuex": "~4.5.0",

app/src/components/SVGContent.vue

@@ -12,6 +12,7 @@ import {defineComponent, onMounted, reactive, ref} from "vue";
 import createPanZoom, {PanZoom} from "panzoom";
 import VideoScroll, {VideoScrollDef, VideoScrollDirection} from "@/components/VideoScroll.vue";
 import AudioArea, {AudioAreaDef} from "@/components/AudioArea.vue";
+import Stats from "stats.js";
 
 export default defineComponent({
   name: "SVGContent",
@@ -173,6 +174,19 @@ export default defineComponent({
       });
     });
 
+    if (process.env.VUE_APP_DEMO) {
+      const stats = new Stats();
+      document.body.appendChild(stats.dom);
+
+      function noop() {
+        stats.begin();
+        stats.end();
+        requestAnimationFrame(noop);
+      }
+
+      requestAnimationFrame(noop);
+    }
+
     return {
       root,
       panzoom,
@@ -193,7 +207,7 @@ function processAnchors(document: XMLDocument): SVGRectElement[] {
     if (anchor === null) {
       break;
     }
-    anchor.classList.add("hidden");
+    anchor.classList.add("internal");
     result.push(anchor);
     i++;
   }
@@ -236,7 +250,7 @@ function processAudio(svg: XMLDocument): AudioAreaDef[] {
   return Array.from(svg.getElementsByTagName("circle"))
       .filter((el) => Array.from(el.children).some((el) => el.tagName == "desc"))
       .map((el) => {
-        el.classList.add("hidden");
+        el.classList.add("internal");
 
         const descNode = el.children[0]; // to fix
         const audioSrc = descNode.textContent!.trim();
@@ -253,7 +267,7 @@ function processAudio(svg: XMLDocument): AudioAreaDef[] {
 function processStart(svg: XMLDocument): SVGRectElement | null {
   const start = svg.getElementById("start");
   if (start) {
-    start.classList.add("hidden");
+    start.classList.add("internal");
   }
   return start as (SVGRectElement | null);
 }
@@ -262,7 +276,7 @@ function processStart(svg: XMLDocument): SVGRectElement | null {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style>
-.hidden {
+svg .internal {
   visibility: hidden;
 }
 </style>