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

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

Interface MiniviewPluginOptions

Options for the miniview plugin.

Members

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

Defauts 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:

plugins:[
    
    {
        type:MiniviewPlugin.type,
        options:{
            container:someElement,
            activeTracking:false
        }
    }
]

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.

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:

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

---