Components
Minimap
Components
Minimap
Plugin component that displays a map of all nodes on the canvas
Getting started
The Minimap component can be rendered by either passing the shorthand prop minimap to the Svelvet component or by passing the entire Minimap component as a child, allowing further configuration via props.
Nodes can be hidden/unhidden on the Minimap if you pass the hideable prop.
When passing the component to Svelvet, you must specify slot=“minimap”
App.svelte
<script>
import { Svelvet } from 'svelvet';
</script>
<Svelvet>
<Minimap width="{100}" corner="NE" mapColor="blue" slot="minimap" />
</Svelvet>
Props
cornerDefault: "SE"
enum
Controls corner placement of the Minimap component.
widthDefault: "100"
number
Width dimension of the Minimap component.
heightDefault: "0"
number
Height dimension of the Minimap component. If not passed, Minimap will render out as a square with both dimensions equal to the width value.
hideableDefault: "false"
boolean
Boolean controlling whether Nodes can be hidden by clicking on their Minimap representation.
mapColorDefault: "theme dependent"
CSS Color String
Background color of minimap.
nodeColorDefault: "Node Color"
CSS Color String
Color of the minimap node elements. Defaults to actual node color.
borderColorDefault: "theme dependent"
CSS Color String
Border color of the Minimap wrapper.