JSFiddle - React, Tailwind, and code Playground

by nitincool4urchat

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://jsplumbtoolkit.com/community/demo/flowchart/lib/dom.jsPlumb-1.7.6.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class='bar-container'>
<nav class="navbar navbar-default"></nav>
</div>
<div class="scrollbars">
<div class="canvas canvas-wide drag-drop-demo jtk-surface jtk-surface-nopan" ng-click="drawLine()" id="canvas">
                <div class="window" id="dragDropWindow1">one<br/><br/><a href="#" class="cmdLink hide" rel="dragDropWindow1">toggle connections</a><br/><a href="#" class="cmdLink drag" rel="dragDropWindow1">disable dragging</a><br/><a href="#" class="cmdLink detach" rel="dragDropWindow1">detach all</a></div>
                <div class="window" id="dragDropWindow2">two<br/><br/><a href="#" class="cmdLink hide" rel="dragDropWindow2">toggle connections</a><br/><a href="#" class="cmdLink drag" rel="dragDropWindow2">disable dragging</a><br/><a href="#" class="cmdLink detach" rel="dragDropWindow2">detach all</a></div>
                <div class="window" id="dragDropWindow3">three<br/><br/><a href="#" class="cmdLink hide" rel="dragDropWindow3">toggle connections</a><br/><a href="#" class="cmdLink drag" rel="dragDropWindow3">disable dragging</a><br/><a href="#" class="cmdLink detach" rel="dragDropWindow3">detach all</a></div>
                <div class="window" id="dragDropWindow4">four<br/><br/><a href="#" class="cmdLink hide" rel="dragDropWindow4">toggle connections</a><br/><a href="#" class="cmdLink drag" rel="dragDropWindow4">disable dragging</a><br/><a href="#" class="cmdLink detach" rel="dragDropWindow4">detach all</a></div>
                <div id="list"></div>
            </div>
</div>

CSS

#dragDropWindow1 { top:76px;left:100px; }
#dragDropWindow2 { top:148px; left:600px; }
#dragDropWindow3 { top:340px; left:100px; }
#dragDropWindow4 { top:416px; left:600px; }
.bar-container{
    position: relative;
}
.navbar{
    position: absolute;
}
.body{
  zoom: 1;
}
.scrollbars{
  height: 80vh;
  position: relative;
  overflow: scroll !important;
}

/** ELEMENTS **/
.scrollbars .drag-drop-demo .window {
    font-family: serif;
    font-style: italic;
    background-color: white;
    border: 1px solid #346789;
    text-align: center;
    z-index: 2000;
    position: absolute;
    cursor: pointer;
    box-shadow: 2px 2px 19px #aaa;
    -o-box-shadow: 2px 2px 19px #aaa;
    -webkit-box-shadow: 2px 2px 19px #aaa;
    -moz-box-shadow: 2px 2px 19px #aaa;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    position: absolute;
    color: black;
    padding-top: 5px;
    width: 100px;
    height: 80px;
    line-height: 12px;
    -webkit-transition: -webkit-box-shadow 0.15s ease-in;
    -moz-transition: -moz-box-shadow 0.15s ease-in;
    -o-transition: -o-box-shadow 0.15s ease-in;
    transition: box-shadow 0.15s ease-in;
}

.window:hover {
    border:1px solid #123456;
    box-shadow: 2px 2px 19px #444;
    -o-box-shadow: 2px 2px 19px #444;
    -webkit-box-shadow: 2px 2px 19px #444;
    -moz-box-shadow: 2px 2px 19px #fff;
    opacity:0.9;
    filter:alpha(opacity=90);
}


.drag-drop-demo a, .drag-drop-demo a:visited {

    color:#057D9F;
}

.drag-drop-demo a:hover {
    color:orange;
}

/** LINKS IN WINDOWS **/
.drag-locked { border:1px solid red; }
.cmdLink { font-size:0.80em;}

/** DRAG/DROP CLASSES **/
.dragActive { border:2px dotted orange; }
.dropHover { border:1px dotted red; }

/** INFO WINDOW **/
#list {
    text-align: center;
    display: none;
    font-size: 90%;
    position: absolute;
    width: 500px;
    left: 50%;
    margin-left: -250px;
    top: 100px;
    background-color: white;
    padding: 5px;
    border: 1px solid #456;
    opacity:...

JavaScript

;
(function () {

    var listDiv = document.getElementById("list"),

        showConnectionInfo = function (s) {
            listDiv.innerHTML = s;
            listDiv.style.display = "block";
        },
        hideConnectionInfo = function () {
            listDiv.style.display = "none";
        },
        connections = [],
        updateConnections = function (conn, remove) {
            if (!remove) connections.push(conn);
            else {
                var idx = -1;
                for (var i = 0; i < connections.length; i++) {
                    if (connections[i] == conn) {
                        idx = i;
                        break;
                    }
                }
                if (idx != -1) connections.splice(idx, 1);
            }
            if (connections.length > 0) {
                var s = "<span><strong>Connections</strong></span><br/><br/><table><tr><th>Scope</th><th>Source</th><th>Target</th></tr>";
                for (var j = 0; j < connections.length; j++) {
                    s = s + "<tr><td>" + connections[j].scope + "</td>" + "<td>" + connections[j].sourceId + "</td><td>" + connections[j].targetId + "</td></tr>";
                }
                showConnectionInfo(s);
            } else
                hideConnectionInfo();
        };

    jsPlumb.ready(function () {

        var instance = jsPlumb.getInstance({
            DragOptions: { cursor: 'pointer', zIndex: 2000 },
            PaintStyle: { strokeStyle: '#666' },
            EndpointHoverStyle: { fillStyle: "orange" },
            HoverPaintStyle: { strokeStyle: "orange" },
            EndpointStyle: { width: 20, height: 16, strokeStyle: '#666' },
            Endpoint: "Rectangle",
            Anchors: ["TopCenter", "TopCenter"],
            Container: "canvas"
        });

        // suspend drawing and initialise.
        instance.batch(function () {

            // bind to connection/connectionDetached events, and update the list of connections on...