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

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.