endpoints

Endpoints

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

jsPlumb comes with four Endpoint implementations - Dot, Rectangle, Blank and Image. You optionally specify Endpoint properties using the endpoint parameter in a call to jsPlumb.connect, jsPlumb.addEndpoint, jsPlumb.makeSource or jsPlumb.makeTarget.

As with Connectors and Overlays, you specify Endpoints using the syntax described the page on basic concepts.

Creating an Endpoint

Endpoints are created in a number of different ways:

• when you call jsPlumb.connect(..) and pass an element id or DOM element as source/target, a new Endpoint is created and assigned.
• when you call jsPlumb.addEndpoint(...) a new Endpoint is created (and returned from the call)
• when you have configured an element using jsPlumb.makeSource(...) and subsequently drag a connection from that 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.

Specifying Endpoint parameters

Endpoint types

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

  • radius - Optional; defaults to 10 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.

• 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.

• Image Draws an image from a given URL. This Endpoint supports three constructor parameters:

  • src Required. Specifies the URL of the image to use
  • 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.