feat: add format support to graph controls

pex-gl · Nov 22, 2024 · 506553a · 506553a
1 parent 1373b6b
commit 506553a
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/examples/all-controls.js b/examples/all-controls.js
@@ -25,7 +25,7 @@ export default async function addAllControls(gui, ctx) {
       (name, value) => ({
         name,
         value,
-      })
+      }),
     ),
     checkboxValue: false,
     message: "Message",
@@ -55,7 +55,7 @@ export default async function addAllControls(gui, ctx) {
             mipmap: true,
             min: ctx.Filter.LinearMipmapLinear,
             aniso: 16,
-          })
+          }),
         )
       : images,
   };
@@ -72,7 +72,7 @@ export default async function addAllControls(gui, ctx) {
     "Radio list",
     State,
     "currentRadioListChoice",
-    State.radioListChoices
+    State.radioListChoices,
   );
 
   gui.addSeparator();
@@ -117,7 +117,7 @@ export default async function addAllControls(gui, ctx) {
     State.textures.map((texture, value) => ({
       texture,
       value,
-    }))
+    })),
   );
   if (isPexGl) gui.addTextureCube("Cube", State.cubeTexture, { level: 2 }); // gui.addParam("Cube", State, "cubeTexture", { level: 2 });
 
@@ -129,8 +129,9 @@ export default async function addAllControls(gui, ctx) {
       item.options.t += 0.01;
     },
     redraw(item) {
-      item.values.push(+Math.sin(item.options.t).toFixed(3));
+      item.values.push(Math.sin(item.options.t));
     },
+    format: (value) => value?.toFixed(3) || "",
   });
   gui.addFPSMeeter();
   gui.addHeader("Stats");

diff --git a/index.js b/index.js
@@ -974,7 +974,10 @@ class GUI {
     const ctrl = new GUIControl({
       type: "graph",
       title,
-      options,
+      options: {
+        format: (value) => value,
+        ...options,
+      },
       activeArea: [
         [0, 0],
         [0, 0],
@@ -1021,8 +1024,9 @@ class GUI {
         item.options.time.update(now);
       },
       redraw(item) {
-        item.values.push(Math.round(item.options.time.fps));
+        item.values.push(item.options.time.fps);
       },
+      format: (value) => (Number.isFinite(value) ? Math.round(value) : ""),
     });
 
     return ctrl;

diff --git a/renderers/CanvasRenderer.js b/renderers/CanvasRenderer.js
@@ -486,10 +486,14 @@ class CanvasRenderer {
         ctx.textAlign = "right";
         const textX = x + width - padding;
         if (item.max !== undefined) {
-          ctx.fillText(item.max, textX, y + padding * 2.5);
+          ctx.fillText(item.options.format(item.max), textX, y + padding * 2.5);
         }
         if (item.min !== undefined) {
-          ctx.fillText(item.min, textX, y + height - padding * 2.5);
+          ctx.fillText(
+            item.options.format(item.min),
+            textX,
+            y + height - padding * 2.5,
+          );
         }
         ctx.restore();
 
@@ -505,7 +509,7 @@ class CanvasRenderer {
         ctx.stroke();
 
         ctx.fillText(
-          `${item.title}: ${item.values[item.values.length - 1] ?? ""}`,
+          `${item.title}: ${item.options.format(item.values[item.values.length - 1])}`,
           x + textPadding,
           dy + textY,
         );