Anchor

Point of connection from an Edge to a Node

This component is only used when constructing custom Nodes

Description

Anchors are the ports or small circles ⚫ on a node that allow for the connection of edges(the connection strings).

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.