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

required

Identification for the Group.

width

number

required

Width of the bounding box relative to a scale of 1.

height

number

required

Height 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.