javascript - grafos - jsflowchart

jsPlumb: ¿cómo hacer que los conectores de diagrama de flujo eviten la intersección de elementos?

Question

¿Es posible hacer que los conectores de diagrama de flujo jsPlumb no crucen elementos conectables o elementos especificados (en el ejemplo: elementos con clase ''item'')?

Comportamiento predeterminado del diagrama de flujo:

Un resultado deseado:

Esto es lo que intenté:

http://jsfiddle.net/CcfTD/1/

Editado para aclarar

HTML

 <div id="root">
        <div class="item" id="item1">Item 1</div>
        <div class="item" id="item2">Item 2</div>
        <div class="item" id="item3">Item 3</div>
        <div class="item" id="item4">Item 4</div>
        <div class="item" id="item5">Item 5</div>
  </div>

JS

   jsPlumb.connect({
    source: $(''#item2''),
    target: $(''#item7''),
    anchors: [ "Continuous" ],
    connector:[ "Flowchart" ],
    paintStyle: {
        strokeStyle: "#000000", 
        lineWidth:1
    }
});

Básicamente, para que el motor jsPlumb (SVG o lienzo) tenga en cuenta los elementos DOM relevantes y tenga un esquema de evitación de objetos

http://jsfiddle.net/adardesign/2ZFFc/

Answer 1

Acabo de tener un problema similar, donde las conexiones de un diagrama generado dinámicamente se cruzaron con elementos.

Lo que funcionó para mí fue especificar el argumento del "punto medio" para la conexión del diagrama de flujo. Tal vez esto ayude en tu caso también.

El argumento del código auxiliar también acepta matrices (no en la documentación). Acabo de establecer:

jsPlumb.Defaults.Connector = [ "Flowchart", { stub: [10, 50], midpoint: 0.0001 } ];

¡Espero que esto ayude!

Answer 2

Aunque en realidad estoy tratando de encontrar un método adecuado para hacer esto (lo que me llevó a tu pregunta). Tengo una solución que estoy usando mientras tanto para que jsPlumb funcione de la manera que yo quiero.

Básicamente, debe agregar un div de altura / anchura de cero para actuar como un nodo intermedio. A continuación, realiza conexiones hacia y desde ese nodo en lugar de hacerlo directamente entre los elementos reales.

He modificado su jsfiddle ( enlace actualizado ) para proporcionar un ejemplo de esto.

Las cosas importantes que se deben tener en cuenta son la capacidad de establecer la ubicación del ancla mediante coordenadas y la capacidad de usar dos formas de puntos finales diferentes. Además, dado que la longitud predeterminada desde el ancla hasta el primer giro es demasiado larga en su ejemplo, puede controlarse utilizando el argumento de código auxiliar.

A continuación se presentan las modificaciones relevantes con comentarios.

HTML

<div id="root">
    <div class="item" id="item1">Item 1</div>
    <div class="item" id="item2">Item 2</div>
    <div class="item" id="item3">Item 3</div>
    <div class="item" id="item4">Item 4</div>
    <div class="item" id="item5">Item 5</div>
    <div class="item" id="item6">Item 6</div>
    <div class="item" id="item7">Item 7</div>
    <div class="node" id="8-12"></div>            <!-- Midpoint -->
    <div class="item" id="item8">Item 8</div>
    <div class="item" id="item9">Item 9</div>
    <div class="item" id="item10">Item 10</div>
    <div class="item" id="item11">Item 11</div>
    <div class="item" id="item12">Item 12</div>
    <div class="item" id="item13">Item 13</div>
    <div class="item" id="item14">Item 14</div>
</div>

CSS

.node {
    position: absolute;
    height: 0px;
    width: 0px;
    visibility: hidden;

    /* change these to place the midpoint properly */
    left: 285px;
    top: 160px;
}

JS

//connection from item8 to midpoint(8-12)
jsPlumb.connect({
    source: $(''#item8''),
    target: $(''#8-12''),
    connector:[ "Flowchart", {stub:5} ], //<== set stub length to be
                                         //    as short as you need it
    paintStyle: {
        strokeStyle: "#000000", 
        lineWidth:1
    },
    anchors:[ [0,0.5,-1,0],[0.5,0,0,-1] ], //<== connection position/direction
    endpoints:[ ["Dot", {radius:2}],["Blank"] ] //<== Blank connector at end
});

//connection from midpoint(8-12) to item12
jsPlumb.connect({
    source: $(''#8-12''),
    target: $(''#item12''),
    connector:[ "Flowchart", {stub:5} ], //<== set stub length to be
                                         //    as short as you need it
    paintStyle: {
        strokeStyle: "#000000", 
        lineWidth:1
    },
    anchors:[ [0,0.5,-1,0],[0.5,0,0,-1] ], //<== connection position/direction
    endpoints:[ ["Blank"],["Dot", {radius:2}] ] //<== Blank connector at start
});

Answer 3

En realidad, la solución a su problema es más profunda, especialmente si está trabajando con datos dinámicos.

Después de algunas horas de excavación, finalmente encontré una "grieta", no una solución bonita, sino una grieta.

Acabo de hacer este cambio para los conectores Flowchart, pero tampoco estoy familiarizado con los otros conectores, nunca los usé.

Después de considerar varias cosas como midx y midy y los apéndices iniciales (deberían usarse en la solución completa, pero los abandoné), lo más sencillo es buscar la función addSegment en el archivo connector-flowchart.js. Ahí es donde se agregan los segmentos.

Antes de agregar el segmento actual (empujarlo en la matriz de segmentos), verifique si se intersectará con alguno de sus elementos, simplemente calcule algunos puntos intermedios (agregando segmentos adicionales, dividiendo el segmento inicial en partes), por lo que básicamente toma un desvío alrededor del elemento intersectado.

Si se necesitan más detalles, me encantaría compartirlos.