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
.
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.
- in the
defaults
section of the render options to a Surface
toolkit.render(someElement, {
views:{
...
},
defaults:{
endpoint: {
type:DotEndpoint.type,
options:{
radius:5
}
}
},
...
})
- in a UI State
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.
{
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.
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.