​
Description

Svelvet is the wrapping parent component that renders out nodes and edges. It is configurable via props, but no props are required. Many props can be set globally at this level and then overriden at the Node, Edge or Anchor level.

App.svelte
<script>
  import { Node, Svelvet, Minimap, Controls } from 'svelvet';
</script>

<Svelvet id="my-canvas" width="{500}" height="{500}" TD minimap controls locked>
  <Node />
  <Node id="alpha" bgColor="red" label="Default Node" />
</Svelvet>

​
Props

width
number
default: "size of wrapping element"

Width of the canvas window on the DOM. If not passed, element will fill its wrapping container.

height
number
default: "size of wrapping element"

Height of the canvas window on the DOM. If not passed, element will fill its wrapping container.

id
number | string
default: "incrementing integer"

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

minimap
boolean
default: "false"

Boolean used to render the default Minimap component. Just pass “minimap” rather than minimap= .

translation
{x: number, y: number}
default: "{x: 0, y: 0}"

Initial translation of the graph. Does not currently feature two-way data binding.

controls
boolean
default: "false"

Boolean used to render the default Controls component. Just pass “controls” rather than controls= .

edge
Edge Component

A custom Edge component to be used as the global Edge style for the canvas. Can be overridden at the Node and Anchor level.

edgeStyle
bezier | step | straight
default: "bezier"

Enum representing the global edge style for the canvas. Overriden when passing custom Edges.

endStyles
['arrow' | null , 'arrow' | null]
default: "[null , null]"

Enum representing the global end styles for the canvas. First element in array will be applied to the start of the edge, second element in array will be applied to the end of the edge. Overriden when passing custom Edges.

snapTo
number
default: "1"

Pixel value at default scale that Nodes should snap to when being moved.

fixedZoom
boolean
default: "false"

Prevents zooming on the canvas.

pannable
boolean
default: "false"

Prevents panning on the canvas.

editable
boolean
default: "true"

Allows the Node properties to be edited via CTRL+click.

fitView
boolean
default: "false"

Adjusts scale and translation to fit all Nodes in view on mount.

locked
boolean
default: "false"

Locks node movement, but still allows the canvas to be panned.

initialZoom
number
default: "1"

Sets the initial zoom level for the canvas. Below 1 zooms out, above 1 zooms in.

theme
string
default: "light"

A string associated with a custom theme created using a :root[svelvet-theme="theme-name"] CSS selector. Svelvet reserves light and dark.

mermaid
string
default: ""

canvas representation using Mermaid-inspired string syntax. Great for quickly developing simple Nodes and Edges.

mermaidConfig
string

An object of key value pairs where the key is a Node ID and the value a Node configuration object. Used only when creating canvases via the Mermaid syntax.

TD
boolean
default: "false"

Boolean controlling the directionality of the canvas. TD being set false by default means that the canvas direction is inherently left-to-right. Pass “TD” as a prop to change the direction to top-down.

disableSelection
boolean
default: "false"

Boolean controlling whether or not Shift + Click enables the selection of multiple components. This feature is enabled by default.

edgesAboveNode
boolean | 'all'
default: "false"

Sets whether Edges should, by default, be placed above or below connected Nodes. Can be set to all to force Edges above all nodes. Otherwise, true essentially turns on raiseEdgesOnSelect, but places the edges at higher z-Index than the Node.

raiseEdgesOnSelect
boolean | 'source' | 'target'
default: "false"

When a Node is selected, this prop controls whether the z-index of a connected edge should be raised. Setting to true raises the edge regardless of if the source or target is selected.

modifier
'alt' | 'ctrl' | 'meta' | 'shift'
default: "meta"

Sets global key modifier used to detect select all and duplicate events.

trackpadPan
boolean
default: "false"

When using a trackpadPan, setting this prop to true enables two finger pan on the Graph and pinch to zoom. Will conflict with scroll behavior on mice. This mode of navigation can be enabled dynamically by hodling down the meta key.

​
Events

on:edgeDrop

Fires when an Edge connection is started and not completed. Does not fire on drops after a disconnection.

on:connection
Fires whenever a new Edge is created.
on:disconnection
Fires whenever an Edge is removed.
StylingNode