UI / Direct Rendering

The vast majority of use cases of the jsPlumb Toolkit involve a UI that a user can pan and zoom, and drag objects around etc. However the Toolkit also supports UIs in which the generated view is more static. We call this feature "direct rendering". The diagram on the left was drawn using direct rendering, and placed into an element that is floated left, so the text can wrap around it.

Once the content has been rendered (at full size), the size of the container is adjusted so all the content fits inside. In this first example we have only a few nodes, so the resulting tree does not take up very much space on the page.

Once the dataset gets a little larger, though, the computed size of the content can become too large, as in the example here on the right - we'd ideally limit the height of this tree so that it can all be seen at once.

In this case you can use CSS to specify a max-width or max-height property for the container. The Toolkit checks for these via getComputedStyle. When either, or both, of these are present, the Toolkit will adjust the size of the container where necessary to ensure these values are not exceeded. The content pane is zoomed accordingly so that all of the content is visible.

Here we show the same dataset rendered into a container with max-height:200px set.

One cool thing to keep in mind is that these direct rendered visualisations can be updated in-place. Here we see the same dataset as before, but if you click on this link we'll add random child nodes.