UI / Basic UI Concepts

Basic UI Concepts

The underlying graph maps to several different concepts when rendered:

  • nodes and groups are rendered by a template, which ultimately results in a DOM element when running in the browser, and a virtual DOM element when running headless.

  • ports may be rendered either as part of the element for the node/group on which it resides, or as endpoints.

  • edges are represented by connectors


The visual representation of an edge. jsPlumb has four types of these available as defaults - a Bezier curve, a straight line, 'flowchart' connectors and 'state machine' connectors. You do not interact with Connectors; you just specify definitions of them when you need to. See the Connectors page for more detail.

The visual representation of one end of an edge.

A location, relative to an element's origin, at which an endpoint can exist.

Whenever you need to define a Connector, Endpoint, Anchor or Overlay, you must use a "definition" of it, rather than constructing one directly. This definition can be either a string that nominates the artifact you want to create:

endpoint:"Rectangle"

...or an array consisting of both the artifact's name and the arguments you want to pass to its constructor:

endpoint:[ "Rectangle", { 
  cssClass:"myEndpoint", 
  width:30, 
  height:10 
}]

There is also a three-argument method that allows you to specify two sets of parameters, which jsPlumb will merge together for you. The idea behind this is that you will often want to define common characteristics somewhere and reuse them across a bunch of different calls:

let common = {
    cssClass    :   "myCssClass",
    hoverClass  :   "myHoverClass"
};

...
   endpoint:[ "Rectangle", { width:30, height:10 }, common ]
...

This syntax is supported for all Endpoint, Connector, Anchor and Overlay definitions. Here's an example using definitions for all four:

let common = {
    cssClass:"myCssClass"
};

...

  anchor:[ "Continuous", { faces:["top","bottom"] }],
  endpoint:[ "Dot", { radius:5, hoverClass:"myEndpointHover" }, common ],
  connector:[ "Bezier", { curviness:100 }, common ],
  overlays: [
        [ "Arrow", { foldback:0.2 }, common ],
        [ "Label", { cssClass:"labelClass" } ]  
    ]
...

The allowed constructor parameters are different for each artifact you create, but every artifact takes a single JS object as argument, with the parameters as (key,value) pairs in that object.