CSS

Introduction

The jsPlumb Toolkit attaches a number of CSS classes to the elements with which it interacts, allowing you a high degree of control over the look and feel of your interface.

It is also recommended that you read the jsPlumb CSS documentation, as everything discussed on that page applies when working with the jsPlumb Toolkit. In particular you might like to read the "Z Index" and "Preventing selection while dragging" sections.

Nodes

When you build an application with the jsPlumb Toolkit you will generally supply client side templates to render your Nodes, so you are free to write the markup as you please, and CSS is completely under your control.

Important It is expected, if the Nodes in your UI are draggable, that they will have a CSS position value of absolute. Relative positioning does not work well with the dragging mechanisms used by the libraries upon which the jsPlumb Toolkit runs.

Hover Effects etc

jsPlumb writes a number of different classes to the DOM elements involved in any given Connection. Upon hover, to take one example, the source element is assigned a class to indicate its Connection is being hovered upon, and also a class to indicate that it is the source in a Connection being hovered upon.

These classes provide a powerful way of adding dynamic behaviour to your UI without having to resort to Javascript.

A full discussion of these can be found in the Interactive CSS Classes section in the jsPlumb CSS documentation.

Note: Wherever you see 'Connection' discussed in the jsPlumb documentation, remember that a jsPlumb Connection is the visual artefact representing an Edge in the Toolkit. Similarly, when you see a reference to an "element", the analog in the Toolkit is either a Node or a Port.

Edges

You can use CSS to style the SVG edges. The aforelinked CSS jsPlumb page contains information about how to style an SVG Connection.

Widgets

You will also most likely wish to style the Toolkit widgets you are using in your app. Both the Miniview and the Surface expose an comprehensive set of classes that you can use - these are listed below.

Default CSS File

Your licensed copy of the jsPlumb Toolkit shipped with a CSS file containing appropriate default values for all of the classes used by the Toolkit. This file can be found at:

/css/jsPlumbToolkit-defaults.css

To get a prototype up and running it is recommended you include this file in your HTML page.


CSS Class Reference

This is a complete list of classes the jsPlumb Toolkit uses throughout the rendering lifecycle.

Surface
jtk-surfaceAssigned to the container element of a Surface (the original element)
jtk-surface-nopanAssigned to the container element of a Surface when `enablePan` is set to false. This class sets overflow to scroll, rather than hidden, which will cause scrollbars to appear when the content overflows.
jtk-surface-canvasAssigned to the element in the Surface on which elements are drawn
jtk-surface-panAssigned to the pan buttons which are positioned against the edges of a Surface
jtk-surface-pan-topAssigned to the pan button which is positioned against the top edge of a Surface
jtk-surface-pan-bottomAssigned to the pan button which is positioned against the bottom edge of a Surface
jtk-surface-pan-leftAssigned to the pan button which is positioned against the left edge of a Surface
jtk-surface-pan-rightAssigned to the pan button which is positioned against the right edge of a Surface
jtk-surface-pan-activeAssigned to a pan button either when it is being clicked, or when the mouse is held on it and auto-pan is in effect.
jtk-surface-panningAssigned to the container element of a Surface whenever the Surface is being panned with the mouse or with a touch event
jtk-surface-selected-elementAssigned to any elements in a Surface that are currently selected (by a lasso selection with the mouse)
jtk-nodeAssigned to all Nodes
jtk-groupAssigned to all Groups
jtk-group-expandedAssigned to all Groups when they are in expanded state
jtk-group-collapsedAssigned to all Groups when they are in collapsed state
jtk-portAssigned to all Ports
Miniview
jtk-miniviewAssigned to the container element of a Miniview
jtk-miniview-canvasAssigned to the element in the Miniview on which elements are drawn
jtk-miniview-pannerAssigned to the element in the Miniview that you can drag to pan the associated Surface.
jtk-miniview-panningAssigned to the container of the Miniview when its panner element is being dragged by the mouse
jtk-miniview-elementAssigned to all elements drawn inside the Miniview
jtk-miniview-collapseAssigned to the collapse button of a Miniview.
jtk-miniview-collapsedAssigned to the container of a Miniview when it is collapsed.
Lasso
jtk-lassoAssigned to the lasso mask that is drawn when selecting multiple items with the mouse.
jtk-lasso-select-defeatAssigned to the body when the lasso is in operation. You can use this to disable text selection (the default jsPlumb Toolkit css file does this)