StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjsPlumb connect sources and targets programmatically
text
Body
copied!<p>I am building an UI with jsPlumb were I have multiple boxes that can be connected together. Each box has 1 target and 3 sources, made with the <code>makeTarget</code> and <code>makeSource</code> methods called upon the same box DOM element.</p> <pre><code>jsPlumb.makeTarget($('#box_id'), targetData); jsPlumb.makeSource($('#box_id'), sourceData1); jsPlumb.makeSource($('#box_id'), sourceData2); jsPlumb.makeSource($('#box_id'), sourceData3); </code></pre> <p>And each of the sources is distinguished by the filter property that connects it to a different part of the box:</p> <pre><code>sourceData1.filter = '.filter_1'; sourceData2.filter = '.filter_2'; sourceData3.filter = '.filter_3'; </code></pre> <p>Connections are possible to be made only between the sources of one box and the target of another box. The target anchors are <code>Continuous</code>.</p> <p>This arrangement works perfectly for what I need as far as working with the boxes and dragging and dropping connections.</p> <p>The problem arises when I want to recreate a saved UI from a JSON object. I can recreate the position of the boxes without a problem, but I cannot find a way to recreate the connections to start from the correct source of the 3 available on the box.</p> <p>I tried to re-connect using the saved uuids, but it turned out the endpoints don't exist yet before the connections are created. The other method I tried is to connect just the source and target box ids:</p> <pre><code>jsPlumb.connect({ source:"box_id1", target:"box_id2", }); </code></pre> <p>But this never connects the correct source to the target and the connections are not exactly the same as the user made them. If a connection started from source 1, with this method it can start from source 3 for example.</p> <p>Basically I am asking is it possible to programmatically connect sources and targets before the endpoints are created using the jsPlumb API?</p> <p>So is it possible to recreate the connections in these circumstances or should I look for other solutions?</p> <p>Thanks.</p> <p><strong>Note:</strong> You can find more info about the UI, its setting and the problem here: <a href="https://github.com/sporritt/jsPlumb/issues/77" rel="nofollow">https://github.com/sporritt/jsPlumb/issues/77</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload