Components
Controls
Components
Controls
Optional component offering zoom, fit-in-view, lock and unhide functionality. Configurable via props or by passing your own custom buttons as children
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
incrementDefault: "0.1"
number
Controls strength of zoom. Default of 0.1 means each button click zooms the canvas by 10% in or out.
horizontalDefault: "false"
boolean
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.