StackOverFlow jsPlumb Test

by booktu8

HTML

<script src="https://jsplumbtoolkit.com/js/jquery.jsPlumb-1.6.4-min.js"></script>
<div class="flowchart-demo" id="flowchart-demo">
  <div class="window level0"><span class="beneficiary">Name 1</span><span class="ep"></span> </div>
  <div class="window level1" style="top: 100px;"><span class="beneficiary">Name 2</span><span class="ep"></span> </div>
  <div class="window level2" style="top: 200px;"><span class="beneficiary">Name 3</span><span class="ep"></span> </div>
</div>

CSS

#flowchart-demo {
  height: 800px;
  position: relative;
}

.flowchart-demo .window {
  padding: 16px;
  position: absolute;
  border: 1px solid black;
  z-index: 4;
  border-radius: 1em;
  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;
  width: 200px;
  height: 100px;
}

.flowchart-demo .window:hover {
  background-color: #5c96bc;
  color: white;
}

.flowchart-demo div.break {
  width: 100%;
  display: block;
  float: left;
  /*height: 30px;*/
  text-align: center;
  position: relative;
}

.flowchart-demo .active {
  border: 1px dotted green;
}

.flowchart-demo .hover {
  border: 1px dotted red;
}

.flowchart-demo ._jsPlumb_connector {
  z-index: 4;
}

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

.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: 0px 0px 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 {
 ...

JavaScript

jsPlumb.ready(function() {
  // setup some defaults for jsPlumb.
  instance = jsPlumb.getInstance({
    Endpoint: ["Dot", {
      radius: 20
    }],
    HoverPaintStyle: {
      strokeStyle: "#1e8151",
      lineWidth: 4
    },
    ConnectionOverlays: [
      ["Arrow", {
        location: 1,
        id: "arrow",
        length: 14,
        foldback: 0.8
      }],
      ["Custom", {
        create: function(component) {
          return connectionNode();
        },
        location: 0.5
      }]
      //,[ "Label", { label:"Connect To", id:"label", cssClass:"aLabel" }]
    ],
    Container: "flowchart-demo"
  });


  var relationEndpoint = {
    endpoint: ["Dot", {
      radius: 20
    }],
    isSource: true,
    connector: ["Flowchart", {
      stub: [40, 60],
      cornerRadius: 5,
      alwaysRespectStubs: true
    }],
    connectorStyle: {
      strokeStyle: "#5c96bc",
      lineWidth: 4,
      outlineColor: "transparent",
      outlineWidth: 4
    },
    maxConnections: 5,
    onMaxConnections: function(info, e) {
      alert("Maximum connections (" + info.maxConnections + ") reached");
    },
    isTarget: true,
    dropOptions: {
      tolerance: "touch",
      hoverClass: "dropHover",
      activeClass: "dragActive"
    },
    beforeDetach: function(conn) {
      return confirm("Detach connection?");
    }
  };

  function connectionNode() {
    //var overlay_div = $(connection.ConnectionOverlays[0].canvas);
    //jsPlumb.addEndpoint({ anchor: ["Perimeter", { shape: "Rectangle" }] }, relationEndpoint);
    return $("<div>Custom</div>", {
      id: Date.now()
    }).css({
      border: '1px solid black',
      background: 'green'
    });
  }


  var windows = jsPlumb.getSelector(".flowchart-demo .window");

  instance.draggable(windows);

  instance.bind("connection", function(info) {
    console.dir(info.connection);
    console.dir(info.connection.getOverlays());
    console.dir(info.connection.getOverlays()[1].canvas);
    var overlay_div =...