Randomly position jsPlumb's windows/dialogs

Question

Is there a way to randomly position all of the dialogs/windows created with jsPlumb?

If I have lots of items which I want to represent in these dialogs, but the issue is I need to place them on the screen by giving them a position, but since there's lots of items it would be a tedious job, not to mention this list of items might grow/shrink.

Looking at the jsPlumb demo, dialogs are given a certain position using "top" and "left" CSS properties:

#window3 { top:2em; left:2em; }
#window4 { top:2em; left:32em; }

Is there a way to place these dialogs on the screen randomly but with a certain distance between them? It would be even better if there was a way to place the dialogs on the screen so there would be minimal crossing between the arrows and the dialogs.

Edit:

Not exactly the best solution, but a pretty nice one:

http://forums.lndb.info/showthread.php?tid=43

https://github.com/lndb/jsPlumb_Liviz.js (two demoes are provided here)

http://lndb.info/light_novel/diagram/Hidan_no_Aria

Divinize

Randomly positioning items would be trivial in Javascript but as it stands, your question is very ambiguous because it is not decided exactly what type of algorithm you want to use to position the items. There are many ways to do this. IMO it would be better if you start by describing an algorithm to display the items, and then go from there. Also, if you post a jsFiddle you are much more likely to get a response. – Ocrea

Can you suggest an algorithm that can accomplish what I mentioned above? I have multiple dialogs (divs) that I want to distribute on the screen (different top and left values) with certain distance between them, and with minimal interaction between the divs and the arrows. I'll add a jsFiddle as soon as possible. – Divinize

Please use the demo here: jsplumb.org/jquery/demo.html – Divinize

I think the demo should suffice. I think the point of what I'm asking for has gotten across... someway to "automatically" layout the divs of jsplumb so that there would be minimal crossing between divs and arrows... I have looked everywhere and can't find anything that can help me achieve this. – Divinize

Masonry is a jQuery plugin that will take a set of elements and lay them out in a configurable float-like manner using absolute positioning (as jsPlumb requires). However, I believe Marty's answer provides a demonstrable solution that fits your requirements. – Missis

I found a solution that fits my needs, added it to the my question above under "Edit". This is it: github.com/lndb/jsPlumb_Liviz.js – Divinize

Answer 1

If I'm understanding the question correctly, you're concerned about the initial positioning of the components, and you're searching for a generic solution (independent of size of components and amount of components).

Separation of concerns: The task of initial component positioning can be regarded independently from jsPlump:

For my example I'm choosing an algorithm with the following requirements:

• position the components evenly on the screen, taking the viewport width as the horizontal containment

• margin of components should be adjustable through CSS

• components must remain draggable to keep jsPlumb functionality

In my solution I'm making use of the fact that with relative positioning, it is easy to distribute the components in a grid. Giving the containing DIV an initial class "initial", I'm defining the following CSS for the components:

#demo.initial .component.window {
    position:relative;
    float:left;
    margin:60px;
}

Right after the DOM components have been rendered as a grid, I'm changing their CSS position from relative to absolute (by removing the container's "initial" class and applying the component's offset within their style attribute).

$(document).ready(function() {
    $(".component.window").each(function(i) {
        var left = $(this).offset().left;
        var top = $(this).offset().top;
        $(this).css({
            left: left,
            top: top
        });
    });
    $("#demo.initial").removeClass("initial");
});

Here's a link to my jsbin

Edit: Here's a link to jsfiddle

Initial positions of the components will differ depending on the width of your target frame.

Feldman

Well if it had been me, I would have downvoted you for using a buzzphrase. Because what you state is trivial and does not really fit anyway. – Tearful

@dualed, the author asks: "Is there a way to place these dialogs on the screen randomly but with a certain distance between them?". The suggested approach gives an answer that is independent of the amount of components. – Feldman

Can you share a Js-Fiddle with max 10 divs having endpoints / sourcepoints? – Sainfoin

@abcdefghi, I've moved the demo with my modifications to jsfiddle. See jsfiddle link in my edited answer. – Feldman

@Tearful strongly disagree that 'using a buzzphrase' merits a downvote, or that the question is trivial in nature (the OP couldn't do it), or that this solution 'does not really fit anyway'. The code demonstrated in the fiddle works perfectly as I understand the question. – Missis

Answer 2

First solution was using this library: https://github.com/lndb/jsPlumb_Liviz.js

A combination of the jsPlumb library that connects elements with the Liviz.js for the positioning of these elements.

In other words: using jsPlumb for the UI (connecting divs), and Liviz.js for the positioning of these elements (divs).

Another solution that I found would be using the "dagre - Directed graph rendering" javascript library: https://github.com/cpettitt/dagre

Dagre is a JavaScript library that makes it easy to lay out directed graphs on the client-side.

Key priorities for this library are:

Completely client-side computed layout. There are great, feature-rich alternatives, like graphviz, if client-side layout is not a requirement for you.

Speed. Dagre must be able to draw medium sized graphs quickly, potentially at the cost of not being able to adopt more optimal or exact algorithms.

Rendering agnostic. Dagre requires only very basic information to lay out graphs, such as the dimensions of nodes. You're free to render the graph using whatever technology you prefer. We use D3 in some of our examples and highly recommend it if you plan to render using CSS and SVG.

Divinize