Svelvet home pagelight logo
Components
Resizer
This component is only used when constructing custom Nodes

​
Description

The Resizer component can be passed to a custom Node to enable dynamic resizing and rotation. Dimensions allowed for resizing and minimum dimensions can be set via props.

MyNode.svelte
<script>
	import { Node, Resizer } from 'svelvet'
</script>

<Node let:selected dimensions={{ width: 400, height: 100 }}>
	<div class="node" class:selected>
    	<Resizer width height rotation/>
    </div>
</Node>

<style>
	.node {
		width: 100%;
		height: 100%;
		background-color: red;
		border-radius: 8px;
		border: 2px solid black;
	}
	.selected {
		border: 2px solid white;
	}
</style>

When using the Resizier component. You must specify your root level HTML element width and height as 100%. Set initial size via Node props.

​
Props

widthDefault: "false"
number

Boolean controlling whether the Node can be resized along its width.

heightDefault: "false"
number

Boolean controlling whether the Node can be resized along its height.

rotationDefault: "false"
boolean

Boolean controlling whether the Node can be rotated via the top left corner.

minWidthDefault: "200"
number

Pixel value reprsenting the minimum alowed height when resizing.

minHeightDefault: "100"
number

Pixel value representing the minimum allowed width when resizing.