Vraag jsPlumb: hoe maak ik stroomdiagramconnectoren kruisende elementen vermijden?


Is het mogelijk om jsPlumb Flowchart-connectoren niet te verbinden met items of gespecificeerde elementen (in het voorbeeld: elementen met de klasse 'item')?

Standaard gedrag van de stroomdiagram:

enter image description here

Een gewenst resultaat:

enter image description here

Dit is wat ik heb geprobeerd:

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

Bewerkt om te verduidelijken

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

In principe moet de jsPlumb-engine (SVG of canvas) op de hoogte zijn van de relevante DOM-elementen en hebben een object-vermijdingsschema

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


19
2018-05-16 15:39


oorsprong


antwoorden:


Terwijl ik eigenlijk een goede methode probeer te vinden om dit te doen (wat me naar uw vraag leidde). Ik heb een oplossing die ik ondertussen gebruik om jsPlumb aan het werk te krijgen op de manier die ik wil.

In principe moet je een nul-hoogte / breedte-interval toevoegen om op te treden als een tussenliggend knooppunt. Je maakt vervolgens verbindingen naar en van dat knooppunt in plaats van rechtstreeks tussen de echte items.

ik heb heb je jsfiddle aangepast (bijgewerkte link) om hiervan een voorbeeld te geven.

De belangrijke dingen om op te merken zijn het vermogen om de plaatsing van het anker in te stellen met behulp van coördinaten en de mogelijkheid om twee verschillende eindpuntvormen te gebruiken. Aangezien de standaardlengte van het anker tot de eerste wending bovendien te lang is in uw voorbeeld, kan deze worden beheerd door het argument stub te gebruiken.

Hieronder staan ​​de relevante wijzigingen met opmerkingen.

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

5
2018-02-01 16:31



De oplossing voor uw probleem is eigenlijk dieper, vooral als u met dynamische gegevens werkt.

Na een paar uur graven vond ik eindelijk een "crack", geen mooie oplossing, maar een kier.

Ik heb net deze wijziging gedaan voor stroomdiagramconnectoren, ook ben ik helemaal niet vertrouwd met de andere connectors, heb ze nooit gebruikt.

Na het overwegen van verschillende dingen zoals midx en midy en initiële stubs (die zouden in de complete oplossing moeten worden gebruikt maar ik heb ze verlaten), is het eenvoudigst om te zoeken naar de addSegment-functie in het connectors-flowchart.js-bestand. Dat is waar de segmenten zijn toegevoegd.

Voordat u het huidige segment toevoegt (duw het in de segmentarray), controleert u of het een van uw elementen kruist, berekent u enkele tussenpunten (dus voegt u extra segmenten toe, breekt u de eerste in stukken), zodat het in principe een omweg rond het kruisende element.

Als er meer informatie nodig is, deel ik deze graag met u.


2
2017-12-31 12:11



Ik had net een soortgelijk probleem, waarbij verbindingen van een dynamisch gegenereerd diagram doorsneden met elementen.

Wat voor mij werkte, was om het "middelpunt" argument voor de stroomdiagramverbinding. Misschien helpt dit ook bij jou.

De stomp argument accepteert ook arrays (niet in documentatie). Ik heb net gezet:

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

Ik hoop dat dit helpt!


2
2018-01-08 14:33