Implementing pan and zoom in jsPlumb

问题

I am working on a project that involves creating flowcharts using *jsPlumb(*Community edition). The community edition does not have pan/zoom functionality built in. he project doesn't require all the features offered by the paid version(Toolkit Edition).So, investing a hefty amount on the paid version is not an option. Are there any proven ways to accomplish pan/zoom using the community edition?

回答1:

Here is an example of pan/zoom in jsPlumb Community Edition implemented with jquery.panzoom plugin

Also used jQueryUI/draggable and Dagre.

You need to wrap your diagram by div which will be panned/scaled (it has 'panzoom' class in this example)

$panzoom = $container.find('.panzoom').panzoom({
  minScale: minScale,
  maxScale: maxScale,
  increment: incScale,
  cursor: "",
});

jQueryUI used to drag nodes instead built in draggable, to compensate panzoom scale and double offset issues. Disable pan while dragging node and consider scale factor:

var currentScale = 1;
$container.find(".diagram .item").draggable({
  start: function(e){
    var pz = $container.find(".panzoom");
    currentScale = pz.panzoom("getMatrix")[0];
    $(this).css("cursor","move");
    pz.panzoom("disable");
  },
  drag:function(e,ui){
    ui.position.left = ui.position.left/currentScale;
    ui.position.top = ui.position.top/currentScale;
    if($(this).hasClass("jsplumb-connected"))
    {
      plumb.repaint($(this).attr('id'),ui.position);
    }
  },
  stop: function(e,ui){
    var nodeId = $(this).attr('id');
    if($(this).hasClass("jsplumb-connected"))
    {
      plumb.repaint(nodeId,ui.position);
    }
    $(this).css("cursor","");
    $container.find(".panzoom").panzoom("enable");
  }
});

回答2:

Maybe you should have a look at http://jaukia.github.io/zoomooz/

This library provides zooming options on HTML elements, so it should do the trick.

来源：https://stackoverflow.com/questions/34267069/implementing-pan-and-zoom-in-jsplumb

标签

javascript

jquery

jsplumb

flowchart