This component is only used when constructing custom Nodes

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

MyNode.svelte
<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

​
id
string | number
default: "incrementing integer"

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

​
invisible
boolean
default: "false"

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.

​
nodeConnect
boolean
default: "false"

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.

​
input
boolean
default: "false"

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

​
output
boolean
default: "false"

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

​
multiple
boolean
default: "input/output dependent"

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.

​
direction
north | south | east | west
default: "canvas direction dependent"

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.

​
dynamic
boolean
default: "false"

Enables dynamic Anchor positioning based on relative position of connected Nodes

​
edge
Svelte Component | null
default: "null"

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

​
edgeLabel
string
default: ""

When not passing a custom Edge component, this prop can be used to set the label for all Edges initiated from the Anchor

​
edgeColor
Writable<CSS Color String>
default: "theme dependent"

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.

​
connections
Array<[nodeId, anchorId] | nodeId>
default: "[]"

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.

​
locked
boolean
default: "false"

Prevents Anchor from being connected/disconnected

​
inputsStore
ReturnType<typeof generateInputs> | null
default: "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.

​
outputStore
Readable<unknown> | null
default: " 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.

​
key
string | null
default: "null"

Key associated with the input store.

​
bgColor
CSS Color String
default: "theme dependent"

Used for styling the default anchor

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

NodeEdge