Minimap

JointJS+ provides an Navigator plugin that enables the ability to display a smaller view into a larger diagram.

Installation

Access Navigator via the ui namespace, and simply create an instance. Append the navigator DOM element to any container, and call the render() method.

import { ui } from '@joint/plus';

const nav = new ui.Navigator({
    paperScroller,
    width: 300,
    height: 200,
    padding: 10,
    zoomOptions: { max: 2, min: 0.2 }
});

document.getElementById('navigator').appendChild(nav.el);

nav.render();

There is also a UMD version available

Include joint.ui.navigator.js and joint.ui.navigator.css in your HTML:

index.html

<link rel="stylesheet" type="text/css" href="joint.ui.navigator.css">
<script src="joint.js"></script>
<script src="joint.ui.navigator.js"></script>

Access Navigator through the joint.ui namespace:

index.js

const nav = new joint.ui.Navigator({
    paperScroller,
    width: 300,
    height: 200,
    padding: 10,
    zoomOptions: { max: 2, min: 0.2 }
});

document.getElementById('navigator').appendChild(nav.el);

nav.render();

How does Navigator work?

Navigator is a UI widget that displays a smaller view into a larger diagram. It's a quick way for users to navigate in diagrams with a pannable and resizable rectangle. The navigator requires a ui.PaperScroller object as a parameter.

Navigator example

The following example creates an instance of Navigator, appends it to the DOM, and calls the render() method on it. The required paperScroller is also provided as an option. Users can pan and zoom via the rectangle in the minimap. Changing attributes such as position is also reflected in the minimap.

Open Sandbox