Intervalle de texte de connexion avec jsPlumb

Question

J'utilise jsPlumb pour afficher les relations dans un texte. La base est un texte qui contient des annotations (code couleur). Je voudrais maintenant représenter les relations avec les flèches entre les annotations. La direction de la flèche est cruciale. J'ai maintenant mis en place un code mais aucune connexion/flèches ne sont affichées. Qu'est-ce que je fais mal? Merci pour vos conseils.

Voici mon fiddle

HTML:

<span style="background-color: LightBlue" class="annotation">Jemand</span> musste <span class="annotation" style="background-color: LightBlue">Josef K.</span><span> verleumdet haben, denn ohne dass </span><span 
class="annotation" style="background-color: LightBlue">er</span><span> etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte </span><span 
class="annotation" style="background-color: LightBlue">er</span><span>, es war, als sollte die Scham ihn überleben. Als </span><span 
class="annotation" style="background-color: LightBlue">Gregor Samsa</span><span> eines Morgens aus unruhigen Träumen erwachte, fand </span><span class="annotation" style="background-color: LightBlue">er</span> 

JS

jsPlumb.ready(function() { 
jsPlumb.Defaults.Container = $("body"); 

window.jsPlumbDemo = { 

    init: function() { 

     // setup some defaults for jsPlumb. 
     jsPlumb.importDefaults({ 
      Endpoint: ["Dot", { 
       radius: 5 
      }], 
      HoverPaintStyle: { 
       strokeStyle: "#1e8151", 
       lineWidth: 1 
      }, 
      ConnectionOverlays: [ 
       ["Arrow", { 
        location: 1, 
        id: "arrow", 
        length: 15, 
        foldback: .9 
       }] 
      ] 
     }); 

$("#dialog-confirm").dialog({ 
autoOpen:false, 
resizable: false, 
height:140, 
modal: true, 
buttons: { 
    "Delete relation": function() { 
     jsPlumb.detach($(this).data('connection')); 
     $(this).dialog("close"); 
    }, 
    Cancel: function() { 
     $(this).dialog("close"); 
    } 
    } 
}); 


     jsPlumb.bind("click", function (c) { 
      $("#dialog-confirm").data('connection', c) 
            .dialog("open"); 
     }); 

     jsPlumb.makeSource({ 
      filter: ".annotation", // only supported by jquery 
      anchor: ["Right","Left"], 
      //parent: "parent", 
      isSource: true, 
      isTarget: true, 
      connector: ["Bezier", { 
       curviness: 50 
      }], 
      connectorStyle: { 
       strokeStyle: "#ff0000", 
       lineWidth: 2, 
       outlineColor: "transparent", 
       outlineWidth: 4 
      }, 
      maxConnections: 5, 
      onMaxConnections: function (info, e) { 
       alert("Maximum connections (" + info.maxConnections + ") reached"); 
      } 
     }); 



     jsPlumb.makeTarget({ 
      filter: ".annotation", // only supported by jquery 
      //parent: "parent", 
      dropOptions: { 
       hoverClass: "dragHover" 
      }, 
      anchor: ["Right","Left"], 
      isSource: true, 
      isTarget: true, 
      connector: ["Bezier", { 
       curviness: 50 
      }], 
      connectorStyle: { 
       strokeStyle: "#5c96bc", 
       lineWidth: 2, 
       outlineColor: "transparent", 
       outlineWidth: 4 
      }, 
     }); 



    } 
}; 


var resetRenderMode = function (desiredMode) { 
    var newMode = jsPlumb.setRenderMode(desiredMode); 
    $(".rmode").removeClass("selected"); 
    $(".rmode[mode='" + newMode + "']").addClass("selected"); 

    $(".rmode[mode='canvas']").attr("disabled", !jsPlumb.isCanvasAvailable()); 
    $(".rmode[mode='svg']").attr("disabled", !jsPlumb.isSVGAvailable()); 
    $(".rmode[mode='vml']").attr("disabled", !jsPlumb.isVMLAvailable()); 

    jsPlumbDemo.init(); 
}; 

resetRenderMode(jsPlumb.SVG); 

window.jsPlumbDemo.loadTest = function (count) { 
    count = count || 10; 
    for (var i = 0; i < count; i++) { 
     jsPlumbDemo.init(); 
    } 
}; 


}); 

Answer 1

Je ne sais pas si cela est votre problème dans son ensemble, mais je pense que makeSource et maketarget prennent une id en tant que premier paramètre, donc j'essaierais d'envelopper tout le html i n <div id="foo"></div> et appelant jsPlumb.makeSource("foo", {...}) et jsPlumb.makeTarget("foo", {...}). Je n'ai pas non plus beaucoup de chance de le faire apparaître correctement sur jsfiddle.