Add debug prop to Mafs

Author: stevenpetryk

docs/app/guides/display/debug/page.tsx

@@ -5,6 +5,7 @@ import Link from "next/link"
 import CodeAndExample from "components/CodeAndExample"
 
 import PizzaSliceExample from "guide-examples/custom/pizza-slice"
+import DebugExample from "guide-examples/debug/DebugExample"
 import Example from "guide-examples/debug/PaneVisualizerExample"
 import type { Metadata } from "next"
 
@@ -16,8 +17,23 @@ export default function DebugPage() {
   return (
     <>
       <p>
-        Mafs provides a few utilities for debugging or experimentation, underneath the{" "}
-        <code>Debug</code> namespace.
+        Mafs provides several utilities for debugging your visualizations. Perhaps the most useful
+        utility the <code>debug</code> prop on <code>Mafs</code>. Adding this prop will force a
+        larger SVG viewBox and add a red border around the <em>actual</em> viewBox.
+      </p>
+
+      <CodeAndExample example={DebugExample} />
+
+      <p>
+        In the above example, you can gain an insight into how Mafs lazy-loads the coordinate grid
+        and the function being visualized. In the bottom left corner, there is also some debug
+        information pinned to the viewport. More on that below.
+      </p>
+
+      <h2>Other utilities</h2>
+
+      <p>
+        Mafs also provides some debug components under the <code>Debug</code> namespace.
       </p>
 
       <Code source={`import { Debug } from "mafs"`} language="tsx" />

docs/components/guide-examples/debug/DebugExample.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Mafs, Coordinates, Plot } from "mafs"
+
+export default function Example() {
+  const [debug, setDebug] = React.useState(true)
+
+  return (
+    <div>
+      {/* Set the `debug` prop on Mafs to get a bird's eye view. */}
+      <Mafs debug={debug} height={400}>
+        <Coordinates.Cartesian />
+        <Plot.OfX y={(x) => Math.sin(x * Math.PI)} />
+      </Mafs>
+      <label className="p-4 bg-black flex gap-2 pointer">
+        <input
+          type="checkbox"
+          checked={debug}
+          onChange={(e) => setDebug(e.target.checked)}
+        />
+        Debug
+      </label>
+    </div>
+  )
+}

src/view/Mafs.tsx

@@ -12,6 +12,7 @@ import invariant from "tiny-invariant"
 import { useCamera } from "../gestures/useCamera"
 import { useWheelEnabler } from "../gestures/useWheelEnabler"
 import { TestContext } from "../context/TestContext"
+import { Debug } from "../debug"
 
 export type MafsProps = React.PropsWithChildren<{
   width?: number | "auto"
@@ -49,6 +50,9 @@ export type MafsProps = React.PropsWithChildren<{
    * this prop is now ignored.
    */
   ssr?: boolean
+
+  /** Take a peek outside the viewbox to make sure things are rendering properly. */
+  debug?: boolean
 }>
 
 export function Mafs({
@@ -60,6 +64,7 @@ export function Mafs({
   preserveAspectRatio = "contain",
   children,
   ssr = false,
+  debug = false,
   onClick = undefined,
 }: MafsProps) {
   const testContext = React.useContext(TestContext)
@@ -92,6 +97,7 @@ export function Mafs({
           preserveAspectRatio={preserveAspectRatio}
           ssr={ssr}
           onClick={onClick}
+          debug={debug}
         >
           {children}
         </MafsCanvas>
@@ -105,7 +111,9 @@ type MafsCanvasProps = {
   height: number
   desiredCssWidth: string
   rootRef: React.RefObject<HTMLDivElement>
-} & Required<Pick<MafsProps, "pan" | "zoom" | "viewBox" | "preserveAspectRatio" | "ssr">> &
+} & Required<
+  Pick<MafsProps, "pan" | "zoom" | "viewBox" | "preserveAspectRatio" | "ssr" | "debug">
+> &
   Pick<MafsProps, "children" | "onClick">
 
 function MafsCanvas({
@@ -119,6 +127,7 @@ function MafsCanvas({
   preserveAspectRatio,
   children,
   onClick,
+  debug,
 }: MafsCanvasProps) {
   let minZoom = 1
   let maxZoom = 1
@@ -306,7 +315,12 @@ function MafsCanvas({
             <svg
               width={width}
               height={height}
-              viewBox={`${viewBoxX} ${viewBoxY} ${width} ${height}`}
+              viewBox={[
+                viewBoxX - (debug ? 150 : 0),
+                viewBoxY - (debug ? 150 : 0),
+                width + (debug ? 300 : 0),
+                height + (debug ? 300 : 0),
+              ].join(" ")}
               preserveAspectRatio="xMidYMin"
               style={{
                 width: desiredCssWidth,
@@ -318,6 +332,18 @@ function MafsCanvas({
               }}
             >
               {children}
+              {debug && (
+                <rect
+                  x={viewBoxX}
+                  y={viewBoxY}
+                  width={width}
+                  height={height}
+                  fill="none"
+                  stroke="red"
+                  style={{ outline: "9999px solid #f002" }}
+                />
+              )}
+              {debug && <Debug.ViewportInfo />}
             </svg>
           </PaneManager>
         </TransformContext.Provider>