Search code examples
javascriptjsplumb

Jsplumber - Assign two different anchor images in endpoints, one for source one for target

I want to assign two different anchor images in one connection. One image for the source endpoint and other one for the target endpoint, using at the same time the 'continuous' option.
Something like that:

            connection1 = instance.connect({
            source:divSource,
            target:divTarget,
            connector:[ "Flowchart", { cornerRadius:5 } ],
            paintStyle:{ lineWidth:1, strokeStyle:"#C9302C", joinstyle:"round"},
            anchors: ['Continuous', ['Left', 'Right','Top', 'Bottom']],
            endpointsSOURCE: [
                ['Image', {url:urlLeft}],
                ['Image', {url:urlRight}],
                ['Image', {url:urlTop}],
                ['Image', {url:urlBottom}]
            ],
            endpointsTARGET: [
                ['Image', {url:urlLeft2}],
                ['Image', {url:urlRight2}],
                ['Image', {url:urlTop2}],
                ['Image', {url:urlBottom2}]
            ]
        });

Is it possible?
Thanks

Solution

  • Yes, you can have entirely different look & feel for every single anchor.

    Docs - http://jsplumbtoolkit.com/doc/endpoints.html

    Example - http://jsplumbtoolkit.com/demo/flowchart/dom.html

    Source - http://jsplumbtoolkit.com/demo/flowchart/demo.js