Svelvet home pagelight logo
Components
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.

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

groupNamerequired
string | number

Identification for the Group.

widthrequired
number

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

outputDefault: "false"
boolean

Boolean that specifies the anchor can only connect to inputs or no-preference anchors. When not passed, anchor allows all connections.

multipleDefault: "input/output dependent"
boolean

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.

directionDefault: "canvas direction dependent"
north | south | east | west

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.

edgeDefault: "null"
Svelte Component | null

An Edge component meant to be associated with the Anchor. Every connection made from this Anchor, will render out the corresponding Edge.

connectionsDefault: "[]"
Array<[nodeId, anchorId]>

Array of anchors to connect to. Edges can be created dynamically, but this used to specify Edges ahead of time.

inputsStoreDefault: "null"
ReturnType<typeof generateInputs> | null

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.

keyDefault: "null"
string | null

Key associated with the input.

outputStoreDefault: " null"
Readable<unknown> | null

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

let:linked
boolean

True when the Anchor has an active connection.

let:connecting
boolean

True when the Anchor is rendering a temporary Edge connected to the cursor.

let:hovering
boolean

True when the cursor is over the Anchor element.