Debug | Display | Mafs: React components for interactive math

Mafs provides a few utilities for debugging or experimentation, underneath the Debug namespace.

import { Debug } from "mafs"

Transform widget

This is a little widget that allows you to test applying transforms (translation, rotation, and scale) to components by wrapping them in Debug.TransformWrapper. It's mainly useful when building new custom components.

import { Mafs, CartesianCoordinates, Debug } from "mafs"
import * as React from "react"

function Example() {
  return (
    <Mafs viewBox={{ y: [-1, 1], x: [-1, 1] }}>
      <CartesianCoordinates />

      <Debug.TransformWidget>
        <PizzaSlice />
      </Debug.TransformWidget>
    </Mafs>
  )
}

function PizzaSlice() {
  const maskId = `pizza-slice-mask-${React.useId()}`

  return (
    <g
      style={{
        transform: `var(--mafs-view-transform) var(--mafs-user-transform)`,
      }}
    >
      <defs>
        <mask id={maskId}>
          <polyline points={`0,0 ${1},${1 / 2} ${1},${-1 / 2}`} fill="white" />
        </mask>
      </defs>

      <g mask={`url(#${maskId})`}>
        <circle cx={0} cy={0} r={1} fill="brown" />
        <circle cx={0} cy={0} r={1 * 0.85} fill="yellow" />
        <circle cx={0.4} cy={1 * 0.1} r={0.11} fill="red" />
        <circle cx={0.2} cy={-1 * 0.1} r={0.09} fill="red" />
        <circle cx={0.5} cy={-1 * 0.15} r={0.1} fill="red" />
        <circle cx={0.7} cy={1 * 0.05} r={0.11} fill="red" />
        <circle cx={0.65} cy={1 * 0.35} r={0.1} fill="red" />
        <circle cx={0.65} cy={-1 * 0.37} r={0.08} fill="red" />
      </g>
    </g>
  )
}

Props

<Debug.TransformWidget>...</Debug.TransformWidget>

Name	Description	Default
`children`	The components to transform `ReactNode`	—

Viewport info

This component displays Mafs' understanding of the world space that's in view, showing both the minimum and maximum x and y values, as well as what panes are visible according to the pane context.

import { Mafs, CartesianCoordinates, Debug } from "mafs"

function Example() {
  return (
    <Mafs viewBox={{ x: [-1, 1], y: [-1, 1] }}>
      <CartesianCoordinates />
      <Debug.ViewportInfo />
    </Mafs>
  )
}

Props

<Debug.ViewportInfo ... />

Name	Description	Default
`precision`	The number of decimal places to which to round the displayed values. `number`	`3`