Skip to main content

The Miniview Plugin

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#

In 5.x, the Miniview widget is implemented as a Surface plugin. A Miniview can be specified on the render options for some Surface:

import { newInstance } from "@jsplumbtoolkit/browser-ui-vanilla"import { MiniviewPlugin } from "@jsplumbtoolkit/browser-ui-plugin-miniview"
const toolkit = newInstance()const surface = toolkit.render(document.getElementById("someElement"), {    ...,    plugins:[        {            type:MiniviewPlugin.type,            options:{                container:document.getElementById("someMiniContainerId")              }        }            ] })

TOP


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.

TOP

Options#

MiniviewPluginOptions

TOP

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

TOP

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 } from "@jsplumbtoolkit/core"import { newInstance } from "@jsplumbtoolkit/browser-ui-vanilla"import { MiniviewPlugin } from "@jsplumbtoolkit/browser-ui-plugin-miniview"
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