你能为流程图的minimap组件建议库吗？

Question

我正在使用jsPlumb创建流程图编辑器，我希望实现类似于此Screenshot的迷你地图功能。

你能建议使用HOW-TO或使用什么插件吗？另外我不是使用canvas，而是使用jquery + SVG + css作为jsPlumb定义。

Answer 1

试试这个插件，他们甚至有一个JsPlump的例子

插件：http://www.magnoliyan.com/mini-map/

示例：http://www.magnoliyan.com/mini-map/demos/window.html

//init jsPlumb toolkit
jsPlumb.bind("ready", function() {
    jsPlumb.setRenderMode(jsPlumb.SVG);
    jsPlumbDemo.init();
    // make all the element divs draggable
    jsPlumb.draggable(jsPlumb.getSelector(".element"), {
        stop: function( event, ui ) {
            //update MiniMap after an element is moved
            $(window).mgMiniMap('update');
        }
    });
});
$(window).load(function(){
    //init MiniMap
    $(window).mgMiniMap({elements: '.element',draggable: true});
});