Endpoints
#
Endpoints#
IntroductionAn 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 EndpointIn 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 endpointsEndpoints 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#
DotThis 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;}
#
RectangleDraws 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.
#
BlankDoes 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.