​
Description

The Controls component can be rendered using defaults by passing the “controls” prop to the Svelvet componet.

Customize the Controls component by wrapping it around custom buttons. Zoom increment and position are configurable via props. Trigger the exposed functions via mouse, keyboard and touch events.

MyControls.svelte
<script>
	import { Controls } from 'svelvet';
</script>

<Controls let:zoomIn let:zoomOut let:fitView let:unhideAll corner="SW">
  <button class="my-zoom-in" on:click|stopPropagation={zoomIn}/>
  <button on:click|stopPropagation={zoomOut}/>
  <button on:click|stopPropagation={fitView}/>
  <button on:click|stopPropagation={unhideAll}/>
</Controls>

<style>
.my-zoom-in {
    border: none;
    background-color: black;
}
</style>
When passing the component to Svelvet, you must specify slot=“controls”
MyControls.svelte
<script>
	import { Svelvet, Node} from 'svelvet';
</script>

<Svelvet>
    <Node/>
    <MyControls slot="controls"/>
</Svelvet>

​
Props

increment
number
default: "0.1"

Controls strength of zoom. Default of 0.1 means each button click zooms the canvas by 10% in or out.

horizontal
boolean
default: "false"

Displays control buttons horizontally.

​
Functions

let:zoomIn
function

Used to trigger a zoom in on the canvas element.

let:zoomOut
function

Used to trigger a zoom out on the canvas element.

let:fitView
function

Adjusts scale and translation to fit all nodes within the viewport

let:unhideAll
function

Unhides all nodes. When using default Controls component, this button is only visible when Nodes are hidden.

MinimapBackground