Release 6.17.0
Release 6.17.0 contains a few nice updates to the miniview component:
Zoom to canvas location
In the images below keep your eye on the mouse pointer over the miniview - when it is stationary, we are performing a wheel zoom. From 6.17.0 onwards the surface is zoomed in/out at the same point as the miniview:
Click to center nodes/groups
You can now click a node/group in a miniview and JsPlumb will scroll the related node/group in the surface to the center of the viewport - in the gif below, our user is clicking on individual elements in the miniview with the mouse (it also works with touch devices of course) :
This behaviour can be controlled via the clickToCenter flag in your miniview options. See below for a link to the miniview docs.
Tracking dragged elements
A further nice update in 6.17.0 is that the miniview now actively updates the view as nodes/groups are dragged in the related surface - watch the miniview in the image below:
This behaviour can be controlled via the activeTracking flag in your miniview options. See below for a link to the miniview docs.
Further reading
- Read more about the miniview here: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/miniview
Start a free trial
Interested in the concepts discussed in this article? JsPlumb is now in maintenance mode, but the good news is that we've released a bigger and better library - VisuallyJs. If you can do it in JsPlumb you can do it more easily in VisuallyJs.
To read more about VisuallyJs, check out the home page, or if you want to get started on a trial right now, head over to the trial page at https://visuallyjs.com/trial
Get in touch!
If you'd like to discuss any of the ideas/concepts in this article we'd love to hear from you - drop us a line at hello@jsplumbtoolkit.com.