Search code examples
javascriptjsplumbinvisible

jsPlumb Endpoint visible: false?

i have a Dynamic generated Flowchart with jsPlumb. Im saving it to a MySQL database and i need a different view without any edit funktion.

I know how to remove all parts to make them not editable but it always shows the Connection Points ( left, right, top, bottom )

How can i make them invisible so that i just see the Connector/Arrow without my Connection Point?

sourceEndpoint = {
    endpoint:["Rectangle",{ width:1, height:1}],
    paintStyle:{ 
        fillStyle:"#db0013",
    },
    maxConnections:999,     
    isSource:false,
    isTarget:false,         
    connector:[ "Flowchart", { stub:[10, 25], gap:0, cornerRadius:0, alwaysRespectStubs:false } ],                                              
    connectorStyle:connectorPaintStyle,
    hoverPaintStyle:endpointHoverStyle,
    connectorHoverStyle:connectorHoverStyle,
    dragOptions:{}       
    },

Rectangle with width and height = 1 makes it very small, but still visible how can i make it invis? :)

thx so fa

xQp

Solution

  • There are two more ways:

    1. Use blank endpoint type. It does not draw anything visible to the user.

    2. Add cssClass to sourceEndpoint options

      sourceEndpoint = {
... other options ...
    cssClass: 'source-endpoint'
}

      and css style

      .source-endpoint svg * {
    fill: transparent;
    stroke: transparent;
}