Direct Rendering

Direct rendering is a mode in which the Surface disables panning, zooming and dragging and automatically adjusts the display so that every node is visible within the viewport. You can use this mode to embed a diagram in a page, and what's super cool about it is that the diagram is "live" - any changes to the dataset will be reflected in the UI.

The diagram is inside a div with a fixed width of 350px and is floated left. Text can flow alongside the diagram. We can also manipulate the contents of the diagram without disrupting the flow of the page - click to add a new node.

Did you click it? Notice how the new node was added and the diagram was adjusted to ensure everything is still visible. If the size of the container changes the diagram will also adapt - to change the width of the container.

In direct render mode the Toolkit will render the contents of the dataset into the container you specify, honouring the dimensions of that container as determined by the page layout.

Setup

Switching on direct rendering requires that you pass a directRender flag to the parameters used to construct the surface:

import { newInstance } from '@jsplumbtoolkit/browser-ui"

const tk = newInstance()
const surface = tk.render(someContainer, {
  view:{ ... },
  directRender:true
})

caution

The Surface does not disable event handlers when in direct render mode. So if you have mapped any events on specific nodes or edges, or on the canvas itself, these handlers will still be registered.

CSS

A surface in direct render mode will have the css class jtk-surface-direct-render assigned to the container into which the surface was rendered. The default stylesheet that ships with the toolkit has a rule for this class:

.jtk-surface-direct-render {
    overflow:visible;
}

This rule takes into account that the content on the surface canvas is positioned and zoomed to fill up as much of the container as possible, right to the edge of the container. If you have elements with borders or outlines this rule will ensure the borders/outlines are not truncated when their element is right on the edge of the container.

If you do not include the toolkit's default stylesheet you may wish to consider adding this rule to your own CSS.

Zoom Limits

In direct render mode, the surface does not restrict zoom to whatever levels zooming would otherwise be restricted to.