CSS
The various components and plugins in the Toolkit offer a rich set of CSS classes that you can use to customize your UI. The Toolkit ships several CSS files (inside the /css directory of the @jsplumbtoolkit/browser-ui package) that contain sane defaults:
jsplumbtoolkit.css Styles for the UI core, including such things as absolute positioning for nodes/groups, styles to setup a surface widget and its various plugins, etc. You should include this stylesheet in your cascade when you start working with the Toolkit.
jsplumbtoolkit-connector-editors.css Styles for the various edge path editors.
jsplumbtoolkit-controls.css Styles for the controls helper component
jsplumbtoolkit-dialogs.css Styles for the dialogs
jsplumbtoolkit-edge-type-picker.css Styles for the edge type picker, as seen in the flowchart builder starter app
Surface
This is a full list of CSS classes used by the surface widget. These are published in jsplumbtoolkit.css.
| Class | Description |
|---|---|
| jtk-surface | Assigned to an element that is acting as a surface widget |
| jtk-surface-touch-device | Assigned to an element that is acting as a surface widget when the device supports touch events |
| jtk-surface-pointer-device | Assigned to an element that is acting as a surface widget when the device supports pointer events |
| jtk-surface-direct-render | Assigned to an element that is acting as a surface widget in "direct render" mode, ie. readonly. |
| jtk-surface-nopan | Assigned to a surface for which enablePan was set to false in the render args |
| jtk-surface-canvas | Assigned to the work area of a surface widget. This canvas element will have been created automatically by the surface and is not normally something you will need to style. If you do attach some styles, you should be careful to ensure that this element always has position:relative; set. |
| jtk-surface-lasso | Assigned to the "lasso" element used when selecting elements in a surface using the mouse. |
| jtk-surface-pan | Assigned to all of the pan buttons in a surface, regardless of which direction they control |
| jtk-surface-pan-top | Assigned to the pan button that appears on the top edge of the surface. |
| jtk-surface-pan-left | Assigned to the pan button that appears on the topleft edge of the surface. |
| jtk-surface-pan-right | Assigned to the pan button that appears on the right edge of the surface. |
| jtk-surface-pan-bottom | Assigned to the pan button that appears on the bottom edge of the surface. |
| jtk-surface-selected-element | Assigned to any element that is part of some surface's current selection. |
| jtk-lasso | Assigned to the selection lasso element |
Element dragging
| Class | Description |
|---|---|
| jtk-drag-active | Assigned to a group element that is a candidate drop target for a node or group that is currently being dragged |
| jtk-drag-hover | Assigned to a group element that is the current drop target for a node or group that is being dragged |
| jtk-drag-original-group | Assigned to a group element when one of its children is being dragged. This can be useful to help manage z-index: we recommend using this class to set a z-index for the drag parent group above that of the other groups, which will ensure that the element you are dragging will appear on top of other groups. |
Miniview
These are the classes you can use to style the Miniview widget. These are published in jsplumbtoolkit.css. Note that vertices in the Miniview are sized to be identical to their mapped vertices in the related Surface (but the Miniview is zoomed out, so they are not 1:1 in size with their related vertices). You could of course use CSS to force a size for vertices in the Miniview, but this is not recommended: if your Surface contains vertices of various sizes but the Miniview uses a uniform size, the user may experience a certain discontinuity between the two views.
| Class | Description |
|---|---|
| jtk-miniview | Assigned to an element that is acting as a Miniview's container |
| jtk-miniview-canvas | Assigned to the work area in the Miniview |
| jtk-miniview-panner | Assigned to the element used to pan the Surface from the Miniview |
| jtk-miniview-element | Assigned to all elements on the Miniview's canvas |
Drawing Tools
These are published in jsplumbtoolkit.css.
| Class | Description |
|---|---|
| jtk-draw-skeleton | Assigned to the outline of the drawing tools attached to some element |
| jtk-draw-handle | Assigned to the individual resize handles |
| jtk-draw-handle-tl | Assigned to the top left resize handle |
| jtk-draw-handle-tr | Assigned to the top right resize handle |
| jtk-draw-handle-br | Assigned to the bottom right resize handle |
| jtk-draw-handle-bl | Assigned to the bottom left resize handle |
Snaplines plugin
These are published in jsplumbtoolkit.css.
| Class | Description |
|---|---|
| jtk-snapline | Assigned to both horizontal and vertical snaplines when active |
| jtk-snapline-horizontal | Assigned to horizontal snaplines when active |
| jtk-snapline-vertical | Assigned to vertical snaplines when active |
| jtk-snapline-exact | Assigned to both horizontal and vertical snaplines when the elements are exactly aligned |
| jtk-snapline-active | Assigned to an element attached to an active snapline |
| jtk-snapline-active-exact | Assigned to an element attached to an active snapline and the elements on the snapline are exactly aligned |
Edge path editors
These styles are published in the stylesheet jsplumbtoolkit-connector-editors.css.
| Class | Assigned To | Purpose |
|---|---|---|
| jtk-orthogonal-handle | Segment drag handles in orthogonal editor | Segments can be dragged by these handles |
| jtk-orthogonal-segment-drag | Segment drag handles in orthogonal editor | Segments can be dragged by these handles |
| jtk-orthogonal-segment-drag-ns | Segment drag handles on horizontal segments | Indicates a segment can be dragged in the Y axis |
| jtk-orthogonal-segment-drag-ew | Segment drag handles on vertical segments | Indicates a segment can be dragged in the X axis |
| jtk-bezier-handle | Control point drag handles in bezier editor | Control points can be dragged by these handles |
| jtk-bezier-handle-control-point | Control point drag handles in bezier editor | Control points can be dragged by these handles |
| jtk-bezier-handle-control-point-1 | First control point handle, bezier editor only | In the StateMachine editor this is not assigned |
| jtk-bezier-handle-control-point-2 | Second control point handle, bezier editor only | In the StateMachine editor this is not assigned |
| jtk-bezier-guideline | Guidelines in the Bezier/StateMachine editors | |
| jtk-anchor-placeholder | Anchor drag placeholders | Added to the element placed at the location of an anchor for a connection that is being edited. This applies to both dynamic and continuous anchors |
| jtk-anchor-candidate | Drag candidates for anchors | Added to the elements drawn to show where a certain anchor may be relocated to (for dynamic anchors) |
| jtk-edge-delete | Delete button | Assigned to the optional delete button overlay that the edge path editor can add |