Create a Raphäel example

[j-a-m-l]

It could be a good way to show how use Dagre with other rendering engine.

[mchicalski]

thanks for this lib its really easy to use as calling

dagre.layout() .nodes(nodes) .edges(edges) .run();

=]

main code of my 1st attempt using dagre and jsplumb, inside a jsf project

            <h:dataTable id="edges-table" value="#{treeBean.edges}" var="edge">
                  <h:column>
                      <script type="text/javascript">
                        jsPlumb.connect({
                            source: $("##{edge.source.id}"),
                            target: $("##{edge.target.id}"),
                            paintStyle:{lineWidth:1, strokeStyle: '#555', dashstyle: "16 0"},
                            anchors:["Continuous", "Continuous"],
                            endpoint:"Blank",
                            connector: "Straight"
                        });
                      </script>
                  </h:column>
            </h:dataTable>

            <script type="text/javascript">
                $(function() {
                initDagrePlumb();
                function initDagrePlumb() {
                    var nodes = new Array();
                    $.each($(".window"), function(name, obj) {
                        obj.width = 350;
                        obj.height = 180;
                        nodes[name] = obj;
                        jsPlumb.draggable(obj);
                    });

                    var edges = new Array();
                    var i = 0;
                    jsPlumb.select().each(function(connection) {
                        var edge = new Object();
                        edge.source = connection.target[0];
                        edge.target = connection.source[0];
                        edge.label = "";
                        edges[i++] = edge;
                    });

                    dagre.layout()
                    .nodes(nodes)
                    .edges(edges)
                    .run();

                    $.each(nodes, function(name, obj) {
                        $("#"+obj.id).css({"left": obj.dagre.x + 150});
                        $("#"+obj.id).css({"top": obj.dagre.y});
                    });

                    jsPlumb.repaintEverything();
                }
            });

        </script>

[mchicalski]

missing code, nodes are just divs.. css class window

            <h:dataTable value="#{treeBean.nodes}" var="node">
                  <h:column>
                      <div id="#{node.id}" style="width: 290px; height: 40px;" class="window">
                                        <b>#{node.toString()} </b>
                      </div>
                  </h:column>
            </h:dataTable>