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.
<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>
<script>
import { Svelvet, Node} from 'svelvet';
</script>
<Svelvet>
<Node/>
<MyControls slot="controls"/>
</Svelvet>
Props
Controls strength of zoom. Default of 0.1 means each button click zooms the canvas by 10% in or out.
Displays control buttons horizontally.
Functions
Used to trigger a zoom in on the canvas element.
Used to trigger a zoom out on the canvas element.
Adjusts scale and translation to fit all nodes within the viewport
Unhides all nodes. When using default Controls component, this button is only visible when Nodes are hidden.