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

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.

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.