jsPlumb: FlowDiagram

by NesterOne

HTML

<script src="http://localhost:8000/js/jquery.jsPlumb-1.5.3.js"></script>
<div class="window" id="window1"><strong>1</strong><br/><br/></div>
<div class="window" id="window2"><strong>2</strong><br/><br/></div>
<div class="window" id="window3"><strong>3</strong><br/><br/></div>
<div class="window" id="window4"><strong>4</strong><br/><br/></div>

CSS

.window {
    border: 1px solid #346789;
    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;
    opacity: 0.8;
    filter: alpha(opacity=80);
    width: 5em;
    height: 5em;
    line-height: 5em;
    text-align: center;
    z-index: 20;
    position: absolute;
    background-color: #eeeeef;
    color: black;
    font-family: helvetica;
    padding: 0.5em;
    font-size: 0.9em;
}

.window:hover {

    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 #444;
    opacity: 0.6;
    filter: alpha(opacity=60);

}

.active {
    border: 1px dotted green;
}

.hover {
    border: 1px dotted red;
}

#window1 {
    top: 34em;
    left: 5em;
}

#window2 {
    top: 7em;
    left: 36em;
}

#window3 {
    top: 27em;
    left: 48em;
}

#window4 {
    top: 23em;
    left: 22em;
}

._jsPlumb_connector {
    z-index: 4;
}

._jsPlumb_endpoint, .endpointTargetLabel, .endpointSourceLabel {
    z-index: 21;
    cursor: pointer;
}

.hl {
    border: 3px solid red;
}

#debug {
    position: absolute;
    background-color: black;
    color: red;
    z-index: 5000
}

._jsPlumb_dragging {
    z-index: 4000;
}

.aLabel {
    background-color: white;
    padding: 0.4em;
    font: 12px sans-serif;
    color: #444;
    z-index: 21;
    border: 1px dotted gray;
    opacity: 0.8;
    filter: alpha(opacity=80);
    cursor: pointer;
}

.aLabel._jsPlumb_hover {
    background-color: #5C96BC;
    color: white;
    border: 1px solid white;
}

JavaScript

;(function() {

jsPlumb.importDefaults({
                // default drag options
                DragOptions : { cursor: 'pointer', zIndex:2000 },
                // default to blue at one end and green at the other
                EndpointStyles : [{ fillStyle:'#225588' }, { fillStyle:'#558822' }],
                // blue endpoints 7 px; green endpoints 11.
                Endpoints : [ [ "Dot", {radius:7} ], [ "Dot", { radius:11 } ]],
                // the overlays to decorate each connection with.  note that the label overlay uses a function to generate the label text; in this
                // case it returns the 'labelText' member that we set on each connection in the 'init' method below.
                ConnectionOverlays : [
                    [ "Arrow", { location:1 } ],
                    [ "Label", { 
                        location:0.1,
                        id:"label",
                        cssClass:"aLabel"
                    }]
                ]
            });     

            // this is the paint style for the connecting lines..
            var connectorPaintStyle = {
                lineWidth:4,
                strokeStyle:"#deea18",
                joinstyle:"round",
                outlineColor:"#eaedef",
                outlineWidth:2
            },
            // .. and this is the hover style. 
            connectorHoverStyle = {
                lineWidth:4,
                strokeStyle:"#5C96BC",
                outlineWidth:2,
                outlineColor:"white"
            },
            endpointHoverStyle = {fillStyle:"#5C96BC"},
            // the definition of source endpoints (the small blue ones)
            sourceEndpoint = {
                endpoint:"Dot",
                paintStyle:{ 
                    strokeStyle:"#1e8151",
                    fillStyle:"transparent",
                    radius:7,
                    lineWidth:2 
                },              
                isSource:true,
               ...