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

​
width
number
default:"false"
Boolean controlling whether the Node can be resized along its width.
​
height
number
default:"false"
Boolean controlling whether the Node can be resized along its height.
​
rotation
boolean
default:"false"
Boolean controlling whether the Node can be rotated via the top left corner.
​
minWidth
number
default:"200"
Pixel value reprsenting the minimum alowed height when resizing.
​
minHeight
number
default:"100"
Pixel value representing the minimum allowed width when resizing.