Skip to main content

Endpoints

Endpoints#

Introduction#

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.

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

import { DotEndpoint } from "@jsplumb/core"
view:{    edges:{        default:{            endpoint: DotEndpoint.type        }    }}
view:{    edges:{        default:{            endpoint: "Dot"        }    }}

or by using its name and some constructor parameters:

import { DotEndpoint } from "@jsplumb/core"
view:{    edges:{        default:{            endpoint: {                type:DotEndpoint.type,                options:{                    radius:5                }            }        }    }}

Creating an Endpoint#

In the Community edition, endpoints are created either via a direct addEndpoint call, or as part of a connect call or connection drag, but in the Toolkit edition endpoints are always created automatically, as a result of one of a few different events:

  • a template 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#

Endpoints can be specified in a few places:

  • in an edge definition in a view
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.

toolkit.render(someElement, {    views:{        ...    },        defaults:{        endpoint: {            type:DotEndpoint.type,            options:{                radius:5            }        }    },        ...})
toolkit.render(someElement, {    views:{        ...    },        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