Skip to main content

Endpoints

An endpoint models the appearance and behaviour of one end of an edge; it delegates its location to an underlying anchor.

JsPlumb ships with four endpoint implementations - Dot, Rectangle, Blank and Custom. The default endpoint type is Blank.

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

import { DotEndpoint } from "@jsplumbtoolkit/browser-ui"

view:{
    edges:{
        default:{
            endpoint: DotEndpoint.type
        }
    }
}

or by using its name and some constructor parameters:

import { DotEndpoint } from "@jsplumbtoolkit/browser-ui"

view:{
    edges:{
        default:{
            endpoint: {
                type:DotEndpoint.type,
                options:{
                    radius:5
                }
            }
        }
    }
}

Creating an Endpoint​

Endpoints are created automatically, as a result of one of a few different events:

  • a template/component is rendered that contains a <jtk-endpoint ..> element
  • the user drags a new connection from an element that is acting as a connection source.
  • an edge is added programmatically

Specifying endpoints​

Endpoint types can be specified in a few places:

  1. In an edge definition in a view
Vanilla JS
React
Angular
Vue
Svelte
toolkit.render(someElement, {
    ...,
    
    view:{
        edges:{
            default:{
                endpoint: {
                    type:DotEndpoint.type,
                    options:{
                        radius:5
                    }
                }
            },
            "bigdottype":{
                endpoint:{
                    type:DotEndpoint.type,
                    options:{
                        radius:15
                    }
                }
            }
        }
    },
    
    ...
})

Here, a Dot endpoint with radius 5 will be used for both ends of any edge whose type is "default" (which means every edge), but edges of type bigdottype will have Dot endpoints of radius 15.

  1. In the defaults section of the render options to a Surface
Vanilla JS
React
Angular
Vue
Svelte
toolkit.render(someElement, {
    ...,
    
    defaults:{
        endpoint: {
            type:DotEndpoint.type,
            options:{
                radius:5
            }
        }
    },
    
    ...
})
  1. In a UI State
Vanilla JS
React
Angular
Vue
Svelte
toolkit.render(someElement, {
    ...,
    
    states:{
        mintyGreenState: {
            endpoint:{
                type:DotEndpoint.type,
                options:{
                    radius:5
                }
            }
        }
    },
    
    ...
})

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:

{
    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