Skip to main content

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.

Miniview component - jsPlumb Toolkit, leading alternative to GoJS and JointJS

Instantiation

The miniview component 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. The Toolkit 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

Home > @jsplumbtoolkit/browser-ui > MiniviewPluginOptions

MiniviewPluginOptions interface

Signature:

export interface MiniviewPluginOptions extends SurfacePluginOptions 

Extends: SurfacePluginOptions

Properties

PropertyModifiersTypeDescription
collapsible?boolean(Optional)
containerBrowserElement
elementFilter?(v: Vertex) => boolean(Optional)
enableWheelZoom?boolean(Optional)
suspended?boolean(Optional)
typeFunction?(v: Node | Group) => string(Optional)
visible?boolean(Optional)
wheelReverse?boolean(Optional)
wheelSensitivity?number(Optional)

CSS

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

ClassDescription
jtk-miniviewAssigned to an element that is acting as a Miniview's container
jtk-miniview-canvasAssigned to the work area in the Miniview
jtk-miniview-pannerAssigned to the element used to pan the Surface from the Miniview
jtk-miniview-elementAssigned to all elements on the Miniview's canvas

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:

import { ObjectData, 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"),
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 (which is the backing data from the related vertex) 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".

TOP