Este equipo de expertos pasados varios días de trabajo y de recopilar de datos, dimos con la solución, queremos que te sea de utilidad en tu plan.
Solución:
Si bien en realidad estoy tratando de encontrar un método adecuado para hacer esto (lo que me llevó a su 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/ancho cero para que actúe como un nodo intermedio. Luego, 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 a tener en cuenta son la capacidad de establecer la ubicación del ancla usando coordenadas y la capacidad de usar dos formas de punto final diferentes. Además, dado que la longitud predeterminada desde el ancla hasta el primer giro es demasiado larga en su ejemplo, se puede controlar usando el argumento stub.
A continuación se muestran las modificaciones pertinentes con comentarios.
HTML
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
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
);
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, pero sí una grieta.
Acabo de hacer este cambio para los conectores de diagrama de flujo, tampoco estoy familiarizado con los otros conectores, nunca los usé.
Después de considerar varias cosas como midx y midy y stubs iniciales (deberían usarse en la solución completa pero los abandoné), lo más simple que puede hacer es buscar la función addSegment en el archivo connectors-flowchart.js. Ahí es donde se agregan los segmentos.
Antes de agregar el segmento actual (empújelo en los segmentos array), verifica si se cruzará con alguno de sus elementos, solo calcule algunos puntos intermedios (agregando así segmentos adicionales, rompiendo el inicial en pedazos) para que básicamente tome un desvío alrededor del elemento intersectado.
Si se necesitan más detalles, estaría feliz de compartir.
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 "punto medio" argumento para la conexión del diagrama de flujo. Tal vez esto también ayude en tu caso.
Él talón argumento también acepta matrices (no en la documentación). Acabo de configurar:
jsPlumb.Defaults.Connector = [ "Flowchart", stub: [10, 50], midpoint: 0.0001 ];
¡Espero que esto ayude!