CUSTOM ENDPOINT

by sporritt

HTML

<script src="http://jsplumb.org/js/jquery.jsPlumb-1.3.9-all-min.js"></script>
<!-- 
    this is an example of how to make a custom endpoint
    in jsPlumb
-->

<div class="d" id="d1">1</div>
<div class="d" id="d2">2</div>

CSS

.d { 
    position:absolute; 
    width:2em; 
    height:2em; 
    border:1px solid black; 
    z-index:1;
}

._jsPlumb_connector { z-index:0; }
._jsPlumb_endpoint { z-index:2; } /* endpoint sits above nodes and connectors */

#d1 { top:50px;left:50px; }
#d2 { top:50px;left:240px; }

.aLabel {
    background-color:white; 
    z-index:10;
    border:1px solid red;
    font-size:20px;
    padding:1em;
    cursor:pointer;
    text-align:center;
    box-shadow:0px 0px 3px 3px #567;
    border-radius:3px;
    -moz-border-radius:3px;
}

.strong {
    font-weight:bold;
}
.red {
    color:red;
}

JavaScript

jsPlumb.ready(function() {
    
    jsPlumb.draggable($(".d"));
    
    // first you need the Endpoint itself: this object does the calculations for displaying the endpoint
    jsPlumb.Endpoints.Custom = function(params) {
        this.type = "Custom";
        var width = 20, height = 20;
        this.compute = function(anchorPoint, orientation, endpointStyle, connectorPaintStyle) {
            
            // i'm just returning four points here - the corners of a diamond
            return [
                [ anchorPoint[0] + width / 2, anchorPoint[1] ],
                [ anchorPoint[0] + width, anchorPoint[1] + height / 2],
                [ anchorPoint[0] + width / 2, anchorPoint[1] + height],                
                [ anchorPoint[0], anchorPoint[1] + height / 2]        
            ];
        };
    };
                
    // now you need subclasses of that for each renderer type
    // this one is just svg. so this fiddle wont work on IE<9.
    jsPlumb.Endpoints.svg.Custom = function() {
        // inherit from the superclas
        jsPlumb.Endpoints.Custom.apply(this, arguments);
        // and also inherit from SvgEndpoint
        SvgEndpoint.apply(this, arguments);        
        var self = this;              
        // 'd' passed in here was the return value from compute above
        this.makeNode = function(d, style) {
            var p = jsPlumbUtil.svg.node("path");
            
        
    
    
    jsPlumb.connect({
        source:"d1",
        target:"d2"//,
//        endpoint"Custom"
    });                          
});