Anchor
Point of connection from an Edge to a Node
Description
Anchors are passed as children to a Node component and can be placed anywhere using CSS.
The visual representation of an Anchor can be customized by passing an HTML element or Svelte component as a child.
Properties representing the state of the Anchor are exposed via the let directive. The booleans can control CSS styling of custom anchors using the class directive.
When using Svelvet as a data flow system, Anchors also accept input and output stores as props. Connections made between Anchors will also connect the stores.
Anchors can be created as inputs, outputs or default. This specification controls connection logic and directionality of the corresponding Edges.
Finally, Edge connections can be specified at runtime by passing an array of tuples via the connections prop. Each tuple represents a corresponding user-defined Node and Anchor ID.
<script lang="ts">
import { Node, Anchor } from 'svelvet';
import type { Connections } from 'svelvet';
import CustomAnchor from './CustomAnchor' // A Svelte component or HTML element of your creation
const connections: Connections = [["node1", "4"],["node2", "3"]]
</script>
<Node let:selected>
<div class:selected>
<div class="input-anchors">
<Anchor bgColor="red" id="data-connection" input />
<Anchor multiple input nodeConnect/>
</div>
<div class="output-anchors">
<Anchor let:linked let:hovering let:connecting output >
<CustomAnchor {linked} {hovering} {connecting} />
</Anchor>
<Anchor direction="east" {connections} output />
</div>
</div>
</Node>
Props
Identification for the Anchor. If not passed, defaults to an incrementing integer starting at 1 for each Node. Used as the HTML id value for the element taking the form A-id/N-id
Prevents the default Anchor from rendering. When passing custom Anchors as children, it is not necessary to set this prop to true. Usually used in combination with the nodeConnect prop.
Boolean that determines whether mouse up events on the parent Node should trigger connections to the Anchor. When this value is true for multiple Anchors, connections will be made to open Anchors in order.
Boolean that specifies the anchor can only connect to output or no-preference anchors. When not passed, anchor allows all connections.
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.
Enables dynamic Anchor positioning based on relative position of connected Nodes
An Edge component associated with the Anchor. Every connection made from this Anchor will render out the corresponding Edge.
When not passing a custom Edge component, this prop can be used to set the label for all Edges initiated from the Anchor
This prop accepts a store value associated with a CSS Color String. It applies to both default and
custom Edges so long as the latter do not render out a custom path or pass a color
prop.
Used to specify Node connections ahead of time. Array of tuples representing a node/anchor pair or of nodeIds themselves. IDs can be strings or numbers. When specifying nodeIds only, connections are spread evenly across the input anchors of the target.
Prevents Anchor from being connected/disconnected
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.
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.
Key associated with the input store.
Used for styling the default anchor
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.