JSPlumb State Machine Issue

1.7.9 Issue

by sberube

HTML

<link rel="stylesheet" href="https://jsplumbtoolkit.com/demo/statemachine/demo.css">
<link rel="stylesheet" href="https://jsplumbtoolkit.com/css/jsplumb.css">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://jsplumbtoolkit.com/community/demo/flowchart/lib/jsPlumb-1.7.9.js"></script>
<div class="jtk-demo-canvas canvas-wide statemachine-demo jtk-surface jtk-surface-nopan" id="canvas">
    <div class="w" id="opened">BEGIN
        <div class="ep"></div>
    </div>
    <div class="w" id="phone1">PHONE INTERVIEW 1
        <div class="ep"></div>
    </div>
    <div class="w" id="phone2">PHONE INTERVIEW 2
        <div class="ep"></div>
    </div>
    <div class="w" id="inperson">IN PERSON
        <div class="ep"></div>
    </div>
    <div class="w" id="rejected">REJECTED
        <div class="ep"></div>
    </div>
</div>
<!-- /demo -->
<div class="full-width-container bg-sepia">
    <div class="container"></div>
</div>

CSS

.demo {
    /* for IE10+ touch devices */
    touch-action:none;
}
.w {
    padding: 16px;
    position: absolute;
    z-index: 4;
    border: 1px solid #2e6f9a;
    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: 8px;
    border-radius: 8px;
    opacity: 0.8;
    filter: alpha(opacity=80);
    cursor: move;
    background-color: white;
    font-size: 11px;
    -webkit-transition: background-color 0.25s ease-in;
    -moz-transition: background-color 0.25s ease-in;
    transition: background-color 0.25s ease-in;
}
.w:hover {
    background-color: #5c96bc;
    color: white;
}
.aLabel {
    -webkit-transition: background-color 0.25s ease-in;
    -moz-transition: background-color 0.25s ease-in;
    transition: background-color 0.25s ease-in;
}
.aLabel._jsPlumb_hover, ._jsPlumb_source_hover, ._jsPlumb_target_hover {
    background-color: #1e8151;
    color: white;
}
.aLabel {
    background-color: white;
    opacity: 0.8;
    padding: 0.3em;
    border-radius: 0.5em;
    border: 1px solid #346789;
    cursor: pointer;
}
.ep {
    position: absolute;
    bottom: 37%;
    right: 5px;
    width: 1em;
    height: 1em;
    background-color: orange;
    cursor: pointer;
    box-shadow: 0 0 2px black;
    -webkit-transition: -webkit-box-shadow 0.25s ease-in;
    -moz-transition: -moz-box-shadow 0.25s ease-in;
    transition: box-shadow 0.25s ease-in;
}
.ep:hover {
    box-shadow: 0px 0px 6px black;
}
.statemachine-demo ._jsPlumb_endpoint {
    z-index: 3;
}
#opened {
    left: 10em;
    top: 5em;
}
#phone1 {
    left: 35em;
    top: 12em;
    width: 7em;
}
#inperson {
    left: 12em;
    top: 23em;
}
#phone2 {
    left: 28em;
    top: 24em;
}
#rejected {
    left: 10em;
    top: 35em;
}
.dragHover {
    border: 2px solid orange;
}
path, ._jsPlumb_endpoint {
    cursor:pointer;
}

JavaScript

jsPlumb.ready(function () {

    var connectionTypes = {};
    connectionTypes['NORMAL'] = {
        connector: ["StateMachine", {
            curviness: 5
        }],
        paintStyle: {
            strokeStyle: "#979797",
            lineWidth: 2,
            outlineColor: "transparent",
            outlineWidth: 4,
            cssClass: 'NORMAL'
        },
        hoverPaintStyle: {
            strokeStyle: "#64c8c8"
        },
        overlays: [
            ["Arrow", {
                location: 1,
                id: "arrow1",
                length: 10,
                width: 10,
                foldback: 0.8
            }],
            ["Label", {
                label: "FOO",
                id: "label",
                cssClass: "aLabel"
            }]
        ]
    };
    connectionTypes['SELECTED'] = {
        paintStyle: {
            "strokeStyle": "#0096d6",
                "cssClass": 'SELECTED'

        },
        hoverPaintStyle: {
            "strokeStyle": "#64c8c8"
        }
    };

    // setup some defaults for jsPlumb.
    var instance = jsPlumb.getInstance({
        Endpoint: ["Dot", {
            radius: 2
        }],       
        Container: "canvas"
    });

    instance.registerConnectionTypes(connectionTypes);

    window.jsp = instance;

    var canvas = document.getElementById("canvas");
    var windows = jsPlumb.getSelector(".statemachine-demo .w");

    // bind a click listener to each connection; the connection is deleted. you could of course
    // just do this: jsPlumb.bind("click", jsPlumb.detach), but I wanted to make it clear what was
    // happening.
    instance.bind("click", function (c) {
        instance.detach(c);
    });

    // bind a connection listener. note that the parameter passed to this function contains more than
    // just the new connection - see the documentation for a full list of what is included in 'info'.
    // this listener sets the connection's internal
    // id as the label overlay's text.
  ...