Mafs

Appearance

On this page

Mafs ​

This component is the entrypoint into rendering visualizations. It must wrap all other Mafs components. On its own, it renders a blank canvas.

Code
vue
<script setup lang="ts">
import { Mafs, Text } from 'mafs-vue'
</script>
<template>
    <Mafs :height="200">
        <Text :x="0" :y="0">I love math!</Text>
    </Mafs>
</template>

Props

<Mafs ... />

NameDescriptionDefault
width
number | "auto"
—
height
number
—
pan
boolean

Whether to enable panning with the mouse and keyboard

true
zoom
boolean | { min: number; max: number; }

whether to enable zooming with the mouse and keyboard. This can also be an object with min and max properties to set the scale limits.

  • minshould be in the range (0, 1).
  • maxshould be in the range [1, ∞).
false
viewBox
{ x?: Vector2; y?: Vector2; padding?: number | undefined; } | undefined

A way to declare the "area of interest" of your visualizations. Mafs will center and zoom to this area.

{ x: [-3, 3], y: [-3, 3] }
preserveAspectRatio
false | "contain"

Whether to squish the graph to fill the Mafs viewport or to preserve the aspect ratio of the coordinate space.

contain
onClick
((point: Vector2, event: MouseEvent) => void)

Called when the view is clicked on, and passed the point where it was clicked.

undefined
ssr
boolean

Enable rendering on the server side. If false, an empty view will still be rendered, with nothing in it.

Note that server-side rendering complicated graphs can really bloat your HTML.

false

Sizing ​

Mafs accepts a width and height prop. width defaults to auto, which means that Mafs will scale to the width of its container. height defaults to 500px, and cannot be set to "auto".

Zooming and panning ​

Mafs can be zoomed and panned by end users using a variety of input methods. Zooming and panning can be enabled, disabled, and configured via the zoom and pan props.

  • The mouse wheel zooms the viewport.
  • Pressing and dragging pans the viewport.
  • The "pinch" gesture zooms and pans the viewport simultaneously.
  • The arrow, -, and + keys pan and zoom the viewport, with the option, meta, and shift keys adjusting the speed.

Panning is enabled by default, but zooming is opt-in. The default zoom limits are 0.5-5

Code
vue
<script setup lang="ts">
import { Mafs, Cartesian, Circle, Text, CardinalDirection } from 'mafs-vue'
</script>
<template>
    <Mafs :height="400" :viewBox="{ x: [-0.25, 0.25], y: [-0.25, 0.25], padding: 0, }" :zoom="{ min: 0.1, max: 2 }">
        <Cartesian :subdivisions="5" />
        <Circle :center="[0, 0]" :radius="1" />
        <Text :x="1.1" :y="0.1" :attach="CardinalDirection.NE">
            Oh hi!
        </Text>
    </Mafs>
</template>

Viewbox ​

When showing a visualization, it's useful to think of your content as having a useful "viewbox" designating the region in which interesting things are happening. Mafs allows you to specify this with the viewBox prop.

Code
vue
<script setup lang="ts">
import { Mafs, Cartesian, Polygon } from 'mafs-vue'
</script>
<template>
    <Mafs :viewBox="{ x: [-5, 5], y: [-5, 5] }" :height="400">
        <Cartesian />
        <Polygon :points="[[-5, -5], [5, -5], [5, 5], [-5, 5]]" />
    </Mafs>
</template>

Aspect ratio preservation ​

The preserveAspectRatio prop changes how the viewbox is mapped to the Mafs viewport. Setting it to false will stretch the viewbox to fit the viewport, tossing aside the aspect ratio preservation.

Code
vue
<script setup lang="ts">
import { Mafs, Cartesian, Polygon } from 'mafs-vue'
</script>
<template>
    <Mafs :height="400" :viewBox="{ x: [-5, 5], y: [-5, 5] }" :preserveAspectRatio="false">
        <Cartesian />
        <Polygon :points="[[-5, -5], [5, -5], [5, 5], [-5, 5]]" />
    </Mafs>
</template>

The only other option is "contain" for now, which is also the default.

Padding ​

Mafs adds a padding of 0.5 to all visualizations by default. To change or remove padding, you can specify padding in the viewBox object.

vue
<Mafs viewBox={{ ..., padding: 0 }}>
    {/* ... */}
</Mafs>