Miniview

A Miniview is a small window displaying the structure of the UI, which is independently pannable and zoomable, and which controls the viewport of its related surface. It is zoomed out to such an extent that all of the vertices in the surface are visible within its viewport, and contains a "panner" element that maps the current visible viewport of the surface to which it is related.

Instantiation

Vanilla JS

React

Angular

Vue

Svelte

The miniview is implemented as a surface plugin. A miniview can be specified on the render options for some surface:

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

const toolkit = newInstance()
const surface = toolkit.render(document.getElementById("someElement"), {
    ...,
    plugins:[
        {
            type:MiniviewPlugin.type,
            options:{
                container:document.getElementById("someMiniContainerId")  
            }
        }        
    ]
 
})

..or it can be registered on an existing surface after it has been created:

surface.addPlugin({
  type:MiniviewPlugin.type,
  options:{
      container:document.getElementById("someMiniContainerId")  
  }
})

Configuration

The size of a miniview is something you set yourself, either through CSS, or via inline styles on the miniview's container element. JsPlumb uses the size of a miniview's container combined with the extents of the visible content in the related Surface to compute the appropriate zoom level for the miniview.

The zoom wheel can be used to zoom in and out on a Surface via its associated miniview. When this occurs, the visible vertex set does not change - the miniview always shows the entire dataset - but the panner element changes size to reflect the fact that the vertices that are visible in the related Surface's viewport have changed.

Options

Vanilla JS

React

Angular

Vue

Svelte

Interface MiniviewPluginOptions

Name	Type	Description
activeTracking?	boolean	Defaults to true, meaning the miniview actively updates as nodes/groups are dragged on the related surface. If this is set to false, the miniview only updates after mouseup.
clickToCenter?	boolean	Defaults to true, meaning a click on a node/group in the miniview will cause that node/group to be centered in the related surface.
collapsible?	boolean	Defaults to true, determines whether or not the miniview can be collapsed.
container	BrowserElement	Element to render into. When using a library integration you do not provide this.
elementFilter?		Optional filter for elements to display. Defaults to undefined - all elements displayed.
enableWheelZoom?	boolean	Defaults to true, Whether or not to enable the wheel zoom.
suspended?	boolean	Defaults to false. Whether or not to suspend rendering after load.
typeFunction?		Optional function to use to derive a type for each rendered node/group. This is written onto the corresponding element as the value of the data-jtk-miniview-type attribute, and can be useful for styling.
visible?	boolean	Defaults to true. Whether or not the miniview is initially visible.
wheelReverse?	boolean	Defaults to false. Whether or not to reverse the zoom direction in response to a wheel event.
wheelSensitivity?	number	Optional overide for how sensitive the wheel zoom should be.

Tracking elements

By default the miniview will update itself as a node/group is dragged on the related surface. This can be switched off via the activeTracking flag in the Miniview options.

CSS

These are the classes you can use to style the Miniview. 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.

Default values specified in the jsplumbtoolkit.css stylesheet

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-panning	Assigned to the element used to pan the surface as it is being dragged
jtk-miniview-element	Assigned to all elements on the Miniview's canvas
jtk-miniview-group-element	Assigned to all group elements on the miniview's canvas (they also get `.jtk-miniview-element`)
jtk-miniview-collapse	Assigned to a miniview's collapse/expand element
jtk-miniview-collapsed	Assigned to a miniview when it is collapsed
jtk-miniview-click-to-center	Assigned to a miniview's container when `clickToCenter` is enabled on the miniview. The default stylesheet uses this to set a pointer cursor on miniview elements.

Node type in Miniview

To give you an extra degree of control over the rendering of elements in the Miniview, you can supply a typeFunction, which will be called whenever a vertex is rendered, and whose result value is written as the jtk-miniview-type attribute on the DOM element in the Miniview. The typeFunction is given each object's backing data and is expected to return a string supplying the type to use:

typeFunction:(obj:ObjectData) => {
   return "foo";
} 

Here we'd end up with an element like:

<div jtk-miniview-type="foo">...</div>

Of course in a real world scenario you'd like inspect the contents of obj to figure out what value to write. We use an attribute here rather than class because it keeps things simple for the Miniview renderer. If you have not yet encountered this, it is possible to style an element using "attribute selectors".