Components
Group
A Group of Nodes represented by a bounding box
Description
A Group component can be used to wrap a set of a Nodes and limit their movement to within the bounds of the Group. These can be created dynamically using Shift + Meta + Click, but can be specified ahead of time using the Group component.
App.svelte
<script>
import { Svelvet, Group, Node } from 'svelvet';
</script>
<Svelvet>
<Group color="lightblue" groupName="my-group" position={{x: 300, y: 400}} width={600} height={200}>
<Node/>
<Node/>
</Group>
</Svelvet>
Props
groupName
string | number
requiredIdentification for the Group.
width
number
requiredWidth of the bounding box relative to a scale of 1.
height
number
requiredHeight of the bounding box relative to a scale of 1.
position
{x: number, y: number}
default: "{x: 0, y: 0}"The position of the Group.
color
CSS Color String
default: "random color"The color of the group box.