Skip to main content

Endpoints

Introduction#

An Endpoint models the appearance and behaviour of one end of a Connection; it delegates its location to an underlying Anchor.

jsPlumb comes with three Endpoint implementations - Dot, Rectangle and Blank. 2.x versions of jsPlumb also shipped with an Image endpoint, but 5.x does not have this endpoint. Instead, you are encouraged to use the cssClass property along with a CSS rule to create endpoints with images.

Endpoints are specified using the same syntax used to specify connectors and overlays - either using its name:

import { DotEndpoint } from "@jsplumb/browser-ui"
instance.addEndpoint(someElement, {    endpoint: DotEndpoint.type})
instance.addEndpoint(someElement, {    endpoint: "Dot"})

or by using its name and some constructor parameters:

import { DotEndpoint } from "@jsplumb/browser-ui"
instance.addEndpoint(someElement, {    endpoint: {        type: DotEndpoint.type,        options:{            radius: 5        }    }})

Creating an Endpoint#

Endpoints are created in a number of different ways:

  • when you call connect(..) on a jsPlumb instance and pass an element id or DOM element as source/target, a new endpoint is created and assigned.
  • when you call addEndpoint(...) on a jsPlumb instance a new Endpoint is created (and returned from the call)
  • when you have configured draggable connectivity using addSourceSelector(...) on a jsPlumb instance and subsequently drag a connection from a matching element, a new Endpoint is created and assigned.

In each of these different cases, the parameters you can use to specify the Endpoint you wish to have created are exactly the same.

Endpoint types#

Dot#

This Endpoint draws a dot on the screen. It supports three constructor parameters:

  • radius - Optional; defaults to 5 pixels. Defines the radius of the dot.
  • cssClass - Optional. A CSS class to attach to the element the Endpoint creates.
  • hoverClass - Optional. A CSS class to attach to the element the Endpoint creates whenever the mouse is hovering over the element or an attached Connection.
Dot endpoint with default size
Dot endpoint with 10 pixel endpoint
There is no limit on the size of the endpoint. So for instance you could combine a very large radius with a `Center` anchor to produce something like this:
Dot endpoint with large radius
The white dots in the center here are the actual element and the dark gray dots are the endpoint. The code looks like this:
instance.addEndpoint(someElement, {    anchor:"Center",    endpoint: { type:"Dot", options:{radius:60}}})

...with of course a little CSS on those elements:

.someClass {    background-color:white;    border-radius:50%;    width:40px;    height:40px;    z-index:10;}

Rectangle#

Draws a rectangle. Supported constructor parameters are:

  • width Optional; defaults to 20 pixels. Defines the width of the rectangle.
  • height Optional; defaults to 20 pixels. Defines the height of the rectangle.
  • cssClass Optional. A CSS class to attach to the element the Endpoint creates.
  • hoverClass Optional. A CSS class to attach to the element the Endpoint creates whenever the mouse is hovering over the element or an attached Connection.
Rectangle endpoint with default size
Rectangle endpoint of size 20x30

Blank#

Does not draw anything visible to the user. This Endpoint is probably not what you want if you need your users to be able to drag existing connections - for that, use a Rectangle or Dot Endpoint and assign to it a CSS class that causes it to be transparent.

Blank endpoint