Components
Node

The props interface for the Node component is available by importing the NodeConfig type

Description

A Node can be configured in two primary ways.

First, you can customize the default node by passing props to control color, border, size, position, etc.

Second, you can wrap your own custom components with our Node component and use the exposed actions, properties and events however you choose. Pass the entire component as a child of the Svelvet component to render it on the canvas.

<script lang="ts">
  import { Node } from 'svelvet';

function handleClick(e: CustomEvent) {
const { detail } = e;
detail.node.set.bgColor('red');
}

</script>

<Node id="55" let:grabHandle let:selected on:nodeClicked="{handleClick}">
  <div use:grabHandle class:selected class="my-component">
    <span>Click Me</span>
  </div>
</Node>
+page.svelte
<script>
  import { Node, Svelvet } from 'svelvet';
  import MyNode from './MyNode.svelte';
</script>

<Svelvet>
	<MyNode />
	<Node id="alpha" bgColor="red" label="Default Node" />
</Svelvet>

When creating custom nodes, styling should be handled entirely within the context of your component. Passing props to the Node wrapper may not result in your intended styling. If you’d like the Node to be resizable, you can set initial dimensions via props, but set your CSS width and height to 100%

Props

positionDefault: "{x: 0, y: 0}"
{x: number, y: number}

Initial position of the node. Coordinate is relative to the top/left point of the canvas.

dimensionsDefault: "{ width: 200, height: 100 }"
{ width: number, height: number }

Initial dimensions of the node. Pixel value based on initial scale.

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

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.

idDefault: "incrementing integer"
number | string

Identification for the node. If not passed, defaults to an incrementing integer. Used as the HTML id value for the element taking the form N-id.

edge
Edge Component

A custom Edge component to be used as the default Edge style for the Node. Can be overriden at the Anchor level.

inputsDefault: "1"
number

Number of input anchors placed on the node.

outputsDefault: "1"
number

Number of output anchors placed on the node.

dropDefault: "false"
'cursor' | 'center'

When passed a value, the initial drop position of the Node is set to the current relative cursor position or the current viewport center.

useDefaultsDefault: "false"
boolean

When creating custom Nodes, pass the useDefaults prop to use Svelvet’s default Node styling.

bgColorDefault: "theme dependent"
CSS Color String

The initial background color of the node. Default changes based on theme.

borderColorDefault: "theme dependent"
CSS Color String

The initial border color of the node. Default changes based on theme.

rotationDefault: "0"
number

Initial roation of node. Can be set dynamically when the Node is resizable.

borderWidthDefault: "1"
number

Pixel value of the border at default scale.

textColorDefault: "theme dependent"
CSS Color String

The initial text color of the node. Default changes based on theme.

selectionColorDefault: "theme dependent"
CSS Color String

Color of the border when the node is selected.

labelDefault: ""
string

Label for the default node. Centered horizontally and vertically

TDDefault: "false"
boolean

Controls the default direction of the canvas. When true, input anchors on top and output anchors on the bottom. If neither TD or LR are passed, node direction defaults to canvas direction.

LRDefault: "false"
boolean

Controls the default direction of the canvas. When true, input anchors are placed on left and output anchors on the right. If neither TD or LR are passed, node direction defaults to canvas direction.

zIndexDefault: "1"
number | Infinity | -Infinity

Initial stacking placement of the node. To force a node to the top or bottom at all times, pass Infinity or -Infinity.

editableDefault: "false"
boolean

Determines whether the node properties can be edited via right click.

lockedDefault: "false"
boolean

Prevents node from being moved. Can be set at the canvas level.

centerDefault: "false"
boolean

When true, the Node is mounted in the optical center of the viewport

dynamicDefault: "false"
boolean

Enables dynamic Anchor positioning based on relative posiiton of conneted Nodes

Actions

let:grabHandle

Accessed via the let directive. Placed on an element (use:grabHandle) you would like to control movement and selection of the Node.

Events

on:nodeClicked
Fires when the node is clicked.
on:nodeReleased

Fires when when a mouse up event occurs on the Node. Does not fire if the Node has been dragged and then released.

on:connection

Fires whenever an Anmchor on the Node is connected.

on:disconnection

Fires whenever an Anchor on the Node is disconnected.

on:duplicate

Fires whenever a Node is selected and the user triggers a modifier key command with the ‘D’ key pressed.

Properties

let:selected
boolean

Boolean representing whether or not the node is currently selected. Toggle classes by passing to an element using the class directive (class:selected).

let:node
object

The Node object from the Svelvet internal store.

Functions

let:connect

Use to programatically create connections from Nodes. Accepts a single Node ID or a [Node ID, Anchor ID] tuple.

let:disconnect

Use to programatically remove connections from Nodes. Accepts a single Node ID or a [Node ID, Anchor ID] tuple.