Group
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.
<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
Identification for the Group.
Width of the bounding box relative to a scale of 1.
Boolean that specifies the anchor can only connect to inputs or no-preference anchors. When not passed, anchor allows all connections.
Boolean used to control whether input anchors can have multiple connections. This is false for input anchors and true for output and no-preference anchors.
Enum used to control the “directionality” of the anchor. By default, an input anchor on the left side of the node has a directionality of “west”. This is used to control the curvature of the edge.
An Edge component meant to be associated with the Anchor. Every connection made from this Anchor, will render out the corresponding Edge.
Array of anchors to connect to. Edges can be created dynamically, but this used to specify Edges ahead of time.
When using our data flow system, this is the store of possible inputs for the Node and is the return value of the function generateInputs.
Key associated with the input.
When using our data flow system, this is the store associated with a data output of a node. It is return value of the function generateOutput.
Properties
True when the Anchor has an active connection.
True when the Anchor is rendering a temporary Edge connected to the cursor.
True when the cursor is over the Anchor element.