<!doctype html>
<html>
    <head>

        <title>jsPlumb - groups demonstration</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">

        <link rel="stylesheet" href="../../css/jsplumbtoolkit.css">
        <link rel="stylesheet" href="../../css/jsplumbtoolkit-demo.css">
        <link rel="stylesheet" href="demo.css">

    </head>

    <body data-demo-id="groups">

        <div class="jtk-demo-main">
            <!-- demo -->
            <div class="jtk-demo-canvas canvas-wide flowchart-demo jtk-surface jtk-surface-nopan" id="canvas">

                <div class="group-container" id="container1" group="one">
                    <div class="title"></div>
                    <ul>
                        <li>Elements constrained to group (<strong>constrain:true</strong>)</li>
                        <li>Deletes group and children</li>
                        <li>Not droppable (<strong>droppable:false</strong>)</li>
                    </ul>
                    <div class="del" delete-all></div>
                    <div class="node-collapse"></div>

                    <div data-jtk-group-content="true">

                        <div id="c1_1" class="w" style="left:30px;top:35px">1.1</div>
                        <div id="c1_2" class="w" style="left:60px;top:140px">1.2</div>

                        <!-- Group 2 is delivered to the browser as a child of Group 1 -->
                        <div class="group-container" id="container2" group="two">
                            <div class="title"></div>
                            <ul>
                                <li>Elements are reverted on drop outside (<strong>revert:true</strong>)</li>
                                <li>Elements not draggable to other groups (<strong>dropOverride:true</strong>)</li>
                                <li>Deletes group only</li>
                            </ul>
                            <div class="del"></div>
                            <div class="node-collapse"></div>
                            <div data-jtk-group-content="true">
                                <div id="c2_1" class="w" style="left:30px;top:40px">2.1</div>
                                <div id="c2_2" class="w" style="left:150px;top:160px">2.2</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="group-container" id="container3" group="three">
                    <div class="title"></div>
                    <ul>
                        <li>Elements may be dragged outside bounds (<strong>revert:false</strong>)</li>
                        <li>Elements are draggable to other groups</li>
                        <li>Deletes group only</li>
                    </ul>
                    <div class="del"></div>
                    <div class="node-collapse"></div>
                    <div id="c3_1" class="w" style="left:30px;top:35px">3.1</div>
                    <div id="c3_2" class="w" style="left:80px;top:162px">3.2</div>
                </div>

                <!-- this group will be added to Group3 by the JS at load time -->
                <div class="group-container" id="container4" group="four">
                    <div class="title"></div>
                    <ul>
                        <li>Elements pruned on drop outside (<strong>prune:true</strong>)</li>
                        <li>Elements are draggable to other groups</li>
                        <li>Deletes group and children</li>
                    </ul>
                    <div class="del" delete-all></div>
                    <div class="node-collapse"></div>
                    <div id="c4_1" class="w" style="left:30px;top:35px">4.1</div>
                    <div id="c4_2" class="w" style="left:110px;top:150px">4.2</div>
                </div>

                <div class="group-container" id="container5" group="five">
                    <div class="title"></div>
                    <ul>
                        <li>Elements orphaned on drop outside (<strong>orphan:true</strong>)</li>
                        <li>Elements are draggable to other groups</li>
                        <li>Deletes group only</li>
                        <li>Not droppable (<strong>droppable:false</strong>)</li>
                    </ul>
                    <div class="del"></div>
                    <div class="node-collapse"></div>
                    <div id="c5_1" class="w" style="left:30px;top:35px">5.1</div>
                    <div id="c5_2" class="w" style="left:140px;top:130px">5.2</div>
                </div>

                <div class="group-container" id="container6" group="six">
                    <div class="title"></div>
                    <ul>
                        <li>No connections shown when group collapsed (<strong>proxied:false</strong>)</li>
                        <li>Elements are draggable to other groups</li>
                        <li>Deletes group and children</li>
                    </ul>
                    <div class="del" delete-all></div>
                    <div class="node-collapse"></div>
                    <div id="c6_1" class="w" style="left:160px;top:45px">6.1</div>
                    <div id="c6_2" class="w" style="left:30px;top:150px">6.2</div>
                </div>

                <div class="group-container" id="container7" group="seven">
                    <div class="title"></div>
                    <ul>
                        <li>Elements are draggable to other groups, using ghost proxy (<strong>ghost:true</strong>)</li>
                        <li>Deletes group and children</li>
                    </ul>
                    <div class="del" delete-all></div>
                    <div class="node-collapse"></div>
                    <div id="c7_1" class="w" style="left:30px;top:35px">7.1</div>
                    <div id="c7_2" class="w" style="left:90px;top:150px">7.2</div>
                </div>

                <div class="w" id="standalone" style="left:355px;top:10px" title="drag me into a group. if you want to.">?</div>

            </div>
            <div class="description">
                <h4>GROUPS</h4>
                <p>Demonstrates all of the ways you can use Groups.</p>
            </div>
        </div>

        <script src="../../dist/util/js/jsplumb.util.umd.js"></script>
        <script src="../../dist/common/js/jsplumb.common.umd.js"></script>
        <script src="../../dist/core/js/jsplumb.core.umd.js"></script>
        <script src="../../dist/connector-bezier/js/jsplumb.connector-bezier.umd.js"></script>
        <script src="../../dist/connector-flowchart/js/jsplumb.connector-flowchart.umd.js"></script>
        <script src="../../dist/browser-ui/js/jsplumb.browser-ui.umd.js"></script>
        <script src="demo.js"></script>

    </body>

</html>
