Mafs

Appearance

On this page

Debug ​

Mafs provides a few utilities for debugging or experimentation, TransformWrapper and ViewportInfo.

VUE
<script setup lang="ts">
import { TransformWrapper, ViewportInfo } from "mafs-vue"
</script>

Transform widget ​

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

Code
vue
<script setup lang="ts">
import PizzaSlice from './PizzaSlice.vue'
import { Mafs, Cartesian, TransformWidget } from 'mafs-vue'

</script>
<template>
    <Mafs :height="300" :viewBox="{ y: [-1, 1], x: [-3, 3] }">
        <Cartesian />
        <TransformWidget>
            <PizzaSlice />
        </TransformWidget>
    </Mafs>
</template>

Slots

<TransformWidget> ...</TransformWidget>

NameDescriptionDefault
defaultThe components to transform
—

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.

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

Props

<ViewportInfo .../>

NameDescriptionDefault
precision
number

The number of decimal places to which to round of the displayed values.

3