​
Description

The Drawer is a self-wrapping parent component which renders out a Svelvet component and a Drawer Controller on the canvas.

The drawer controller provides an interactive UI with drag and drop functionality for creating and customizing Svelvet components before adding them to the canvas.

The styling of Nodes, Edges and Anchors are fully configurable by selecting the props that are available to these components to change their visualization and interaction behavior.

All the props that are available to the Svelvet component are available to be passed on to the Drawer component. See Svelvet For the list of available props to be passed on to the Drawer component.

When customizing props for Anchors and Edges, the props such as Label, Default Anchors & Anchor position for creating a Node will no longer apply.

MyDrawer.svelte
<script>
    import {Drawer, ThemeToggle} from 'svelvet';
</script>

<Drawer height={1200} zoom={0.70} controls>
   <ThemeToggle main='light' alt='dark' slot='toggle'/>
</Drawer>

​
Notes

Adding an anchor will create a custom node and override all default node settings.

The anchor direction prop functions differently from a typical anchor component by modifying both its position and the rendered edge directions.

Check out the video demo of the drawer functionality.

EdgeGroup