add slicing/preview stats to dev hover stats

src/kiri/app/function.js

@@ -291,6 +291,7 @@ function prepareSlices(callback, scale = 1, offset = 0) {
         // print stats
         segtimes.total = Date.now() - mark;
         console.log(segtimes);
+        api.visuals.update_stats(segtimes);
         if (callback && typeof callback === 'function') {
             callback();
         }
@@ -428,6 +429,7 @@ function preparePreview(callback, scale = 1, offset = 0) {
         // print stats
         segtimes.total = Date.now() - mark;
         console.log(segtimes);
+        api.visuals.update_stats(segtimes);
 
         event.emit('print', pMode);
         event.emit('preview.end', pMode);

src/kiri/app/visuals.js

@@ -262,8 +262,10 @@ function setProgress(value = 0, msg) {
 }
 
 let statsTimer;
+let statsAdd;
 
-function updateStats() {
+function updateStats(add) {
+    statsAdd = add ? { ...add, 'hr': 1 } : {};
     clearTimeout(statsTimer);
     let { div, fps, rms, rnfo } = api.ui.stats;
     if (api.devel.enabled === false) {
@@ -285,8 +287,16 @@ function updateStats() {
             rms.innerText = nrms;
         }
         if (rnfo.offsetParent !== null) {
-            rnfo.innerHTML = Object.entries({ ...memory, ...render, render_ms: nrms, frames_sec: nfps }).map(row => {
-                return `<div>${row[0]}</div><label>${base.util.comma(row[1])}</label>`
+            rnfo.innerHTML = Object.entries({
+                ...statsAdd,
+                ...memory,
+                ...render,
+                render_ms: nrms,
+                frames_sec: nfps
+            }).map(row => {
+                return row[0] === 'hr' ?
+                    '<hr><hr>' :
+                    `<div>${row[0]}</div><label>${base.util.comma(row[1])}</label>` ;
             }).join('');
         }
     }, 100);

web/kiri/index.css

@@ -2536,6 +2536,9 @@ details[open] summary::after {
     flex-direction: column;
     align-items: flex-end;
 }
+#stats hr {
+    width: 100%;
+}
 #stats:hover #rnfo {
     display: grid;
 }