JSFiddle - React, Tailwind, and code Playground

by sporritt

HTML

<script src="http://jsplumb.org/js/1.3.4/jquery.jsPlumb-1.3.4-all.js"></script>
<span id="initiate">Initiate</span>
<div id="demo">
    <div class="w" id="window1"><div  id="ep1" class="ep"></div></div>
     <div class="w" id="window2"><div  id="ep2" class="ep"></div></div>
</div>

CSS

.w
    {
        width: 12em;
        position: absolute;
        border: 1px solid black;
        z-index: 4;
        height: 55px;
            border-radius: 1em;
        border: 1px solid #0069D6;
        box-shadow: 2px 2px 19px #e0e0e0;
        -o-box-shadow: 2px 2px 19px #e0e0e0;
        -webkit-box-shadow: 2px 2px 19px #e0e0e0;
        -moz-box-shadow: 2px 2px 19px #e0e0e0;
        -moz-border-radius: 0.5em;
        border-radius: 0.5em;
        opacity: 0.8;
        filter: alpha(opacity=80);
        cursor: move;
        text-align: center;
    }
    .wi
    {
        margin: 1em;
        margin-bottom: 30px;
    }

    .ep
    {
        position: absolute;
        bottom: 10px;
        left: 50%;
        margin-left: -8px;
        width: 16px;
        height: 16px;
        background-color: #C7EEFE;
        cursor: pointer;
    }

#window1 { top:14em;left:2em;}
#window2 { top:15em; left:25em;}

#demo {
    position:relative;
    width:50em;
    height:50em;
    margin-top:2em;
    margin-left:2em;
}

JavaScript

jsPlumb.bind("ready", function () {

    $("#initiate").click(function(){
            
        window.jsPlumbDemo.initJsPlumbInstance("demo");
        
        window.jsPlumbDemo.initBlock ("window1","ep1","demo");
        
        window.jsPlumbDemo.initBlock ("window2","ep2","demo");
        
        });
     


    window.jsPlumbDemo = {
            jsPlubsInstances : new Object(),
            
                repaintEverything : function(canvasUUID) {
                    var jsPlumbInstanceName = "js".concat(canvasUUID);
                
                    var jsPlumbInstance = jsPlumbDemo.jsPlubsInstances[jsPlumbInstanceName];
                
                jsPlumbInstance.repaintEverything();
            },
            
            initJsPlumbInstance : function(canvasUUID) {
            
                 var jsPlumbInstanceName = "js".concat(canvasUUID);

                jsPlumbDemo.jsPlubsInstances[jsPlumbInstanceName] = jsPlumb.getInstance(
                        {
                            Container : canvasUUID,
                            //Scope  : jsPlumbInstanceName,
                            Endpoint : ["Dot", { radius: 2}],
                            HoverPaintStyle : { strokeStyle: "#42a62c", lineWidth: 3 },
                            EndpointStyle : { radius: 3, fillStyle: "#0069D6" },
                            PaintStyle : { lineWidth: 3, strokeStyle: "#456" },
                            Anchor : "Continuous",
                            Connector : "StateMachine",
                            Overlays : [["Arrow", {location: 1,id: "arrow"    }]]
                        });

                var jsPlumbInstance = jsPlumbDemo.jsPlubsInstances[jsPlumbInstanceName];
                                       
                jsPlumbInstance.Defaults.Overlays = [
                        ["Arrow", {
                            location: 1,
                            id: "arrow"
                        }]
                ];
            
    ...