Flow chart tool

by kapilgopinath

HTML

<link rel="stylesheet" href="ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<div class="menu-list">
            <ul>
                <li class="rect">Rectangle</li>
                <li class="tri">Triangle</li>
                <li class="sq">Square</li>
                <li class="li">Line</li>
            </ul>
        </div>
        <div id='frame' class="frame"></div>

CSS

.frame{
                display: block;
                position:absolute;
                height:auto;
                bottom:0;
                top:0;
                left:0;
                right:0;
                margin-top:20px;
                margin-bottom:20px;
                margin-right:80px;
                margin-left:80px;
                background-color: aliceblue;
            }
            .menu-list{
                position:absolute;
                top:0;
                left:0;
                height:auto;
                width:100px;
                display:none;
                z-index:1
            }
            .menu-list ul{                
                list-style: none;
                margin: 0;
                padding: 0;
            }
            .menu-list ul li{
                padding: 5px;
                border: solid 1px #615B5B;
                border-radius: 6px;
                color: white;
                background-color: #A2A2A2;
                border-top: none;
                text-align: center;
            }
            .menu-list ul li:first-child {
                border-top: solid 1px #615B5B;
            }
            .square {
                width: 100px;
                height: 100px;
                background: red;
            }
            .rectangle {
                width: 200px;
                height: 100px;
                background: red;
            }
            .circle {
                width: 100px;
                height: 100px;
                background: red;
                -moz-border-radius: 50px;
                -webkit-border-radius: 50px;
                border-radius: 50px;
            }
            .triangle {
                width: 0;
                height: 0;
                border-left: 50px solid transparent;
                border-right: 50px solid transparent;
                border-bottom: 100px solid red;
            }
            #new-link-line {
                position:...

JavaScript

window.onload = function() {
                var frameObj = document.getElementById('frame');
                var menuLs = document.getElementsByClassName('menu-list');
                menuLs = menuLs[0];
                frameObj.addEventListener('contextmenu', function(e) {
                    if (!/css-shape/.test(e.target.className)) {
                        menuLs.style.display = 'block';
                        menuLs.style.left = e.clientX + 'px';
                        menuLs.style.top = e.clientY + 'px';
                        e.preventDefault();
                    } else {
                        menuLs.style.display = 'none';
                    }
                }, false);
                
                menuLs.addEventListener('click', function(e) {
                    var target = e.target || e.srcElement;
                    
                    menuLs.style.display = 'none';
//                    var newNode = document.createElement('div');
//                    var newNodeHndlr = document.createElement('div');
//                    newNode.style.top = e.clientY + 'px';
//                    newNode.style.left = e.clientX - 100 + 'px';
//                    newNode.style.display = 'block';
//                    newNode.style.position = 'relative';

                    switch (target.className) {
                        case 'rect':
                            newNode.className = 'rectangle';
                            newNode.classList.add('resizeDiv', 'css-shape');
                            break;
                        case 'sq':
                            newNode.className = 'square';
                            newNode.classList.add('resizeDiv', 'css-shape');
                            break;
                        case 'tri':
                            newNode.className = 'triangle';
                            newNodeHndlr.className = 'triangle-child';
                            newNode.classList.add('handle', 'css-shape');
    ...