jsPlumb: Large endpoint to make touch easier

Question

My implementation has two lists of elements and you basically connect items from the list on the left to items from the list on the right.

We have set the endpoints to be transparent so on the desktop it looks like you just drag from elements on one side to the other.

It works brilliantly on desktop but on touch devices we need the endpoint to cover exactly the space of the element it is attached to in order for it to work as the user would expect. So in effect the whole element becomes an endpoint.

I can achieve this by making the endpoint a rectangle of the same size and anchoring in the center, but I want to anchor on the right/left. If I anchor in the right/left, then my large endpoint is then half covering the element.

Is there a way of anchoring on the right/left but have the endpoint covering the element entirely? Or offsetting the endpoint somehow so it still covers the element?

Thanks in advance for any help

Btw jsPlumb is awesome

Are you making use of `jsPlumb.addEndpoint()`?, If so try using `jsPlumb.makeTarget()` and `jsPlumb.makeSource()` to make element as endpoints area from where you can drag connections. For more refer: http://jsplumb.org/apidocs/files/jquery-jsPlumb-1-3-16-all-js.html#makeTarget — MrNobody007, Mar 06 '14 at 11:18
I am using makeTarget / makeSource and have also tried addEndpoint. With makeTarget/Source it does make the whole element connectable on a desktop but with a touch screen I still have to touch near the actual endpoint (in this case an invisible dot on the right) — Ian1971, Mar 06 '14 at 15:17

score 2 · Answer 1 · answered Apr 25 '14 at 07:14

2

You can do it using a transparent image. I did it that way.

     endpoint:[ "Image", { src:"/javascript/project/img/c.png",
                                             cssClass:'node' } ]

answered Apr 25 '14 at 07:14

coding_idiot

13,526
10
65
116

Good idea. I'll give it a whirl when I get a chance next – Ian1971 Apr 25 '14 at 11:27

Jeroen · Answer 2 · 2014-03-06T15:27:42.703

If you use jsPlumb.addEndpoint() you can add additional parameters for each endpoint you create.

I got this code from one of the examples:

var exampleGreyEndpointOptions = {
    endpoint:"Rectangle",
    paintStyle:{ width:25, height:21, fillStyle: color }, // size and color of the endpoint
    isSource:true,
    connectorStyle : { strokeStyle: color }, // color of the line AND the arrow
    isTarget:false,
    maxConnections:20,
    anchor: "BottomCenter"
};
var endpointOptions = {
    isTarget:true, 
    endpoint:"Dot", 
    paintStyle:{ 
        fillStyle: color                               // color of the end point
    },
    beforeDrop: function(info){
        return handleConnectionDrop(info);
    },
    dropOptions: exampleDropOptions,
    maxConnections: 20,
    anchor: "TopCenter"
};

function InitContainer(el, data) {
    elem = $(el);
    jsPlumb.addEndpoint(el, {
        uuid: elem.attr("id")+"sr"
    }, exampleGreyEndpointOptions);

    jsPlumb.addEndpoint(el, {
        uuid: elem.attr("id")+"tr",
        parameters: data // store data in the drain Endpoint
    }, endpointOptions);
    ....
}

in this function I added two endpoints to one element, each with different attributes.

The actual problem you have is that the surface of the endpoint needs to be offset from it's position so that it is within the element. This is mentioned in the API docs, but I didn't find an example yet: http://jsplumb.org/apidocs/files/jquery-jsPlumb-1-3-16-all-js.html#Endpoint.paint

You can change the position of a anchor, not only by the documented text (like "TopCenter") But also by a array:

anchor: [0.2, 1,0,1]

Give it a try, You'll be able to position the anchor relative to it's element

Yes that is my problem exactly I need the endpoint to be a rectangle covering the element but anchored on the right so that the line appears to come from the right of the element not the center — Ian1971, Mar 06 '14 at 15:10
yeah, see my edit. Have a play around with the anchor setting — Jeroen, Mar 06 '14 at 15:28
ok, I'll give that a try. I am guessing that the endpoint will be drawn around that anchor position though? — Ian1971, Mar 06 '14 at 16:00
Yes, the anchor always seems to be the center of the endpoint. I think I'll just have to convince the others to have a visible endpoint so that users know where to touch. — Ian1971, Mar 10 '14 at 13:38

jsPlumb: Large endpoint to make touch easier

2 Answers2