javascript - プロセス図のミニマップ コンポーネントのライブラリを提案できますか?

Question

プロセス図エディターを作成するためにjsPlumbを使用しており、このスクリーンショットのようなミニマップ機能を実装しようとしています。

HOW-TOまたは使用するプラグインを提案できますか? また、キャンバスを使用していません。代わりに、jsPlumb が定義する jquery+SVG+css を使用しています。

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});
});