Btukfyl

I am using jsPlumb in my Angular app to connect several things.
I am having 3 node types: subservice, entryAssets, exitAssets. Thing is that i want to have other connecting styles for subservices nodes and other for entryAssets&exitAssets (note: entryAssets will connect with exitAssets, there won't be a case that entryAsset connect to another entryAsset instance, only cross connections allowed).

So here i have default paint styles provieded in view.edges that is passed to jsplumb-surface component as docs require:

view = {

    nodes: {

        subService: {

            component: NodeComponent,

        },

        entryAsset: {

            component: EntryAssetNodeComponent,

        },

        exitAsset: {

            component: ExitAssetNodeComponent,

        },

        initialView: {

            component: InitialViewComponent,

        },

    },

    edges: {

        default: {

            anchor: 'AutoDefault',

            endpoint: 'Blank',

            connector: ['Flowchart', {cornerRadius: 0}],

            paintStyle: {

                strokeWidth: 2,

                stroke: '#2c2e33',

                outlineWidth: 3,

                outlineStroke: 'transparent',

            }, //   default paint style 

            hoverPaintStyle: {strokeWidth: 2, stroke: '#2c2e33'}, // hover paint style for this edge type.

        },

         ...

I searched docs at https://jsplumbtoolkit.com/docs/toolkit/views.html#render-edges, but can't find any info what can i do.

Somebody? pls

came up with solution, on adding edge you need to specify type in data obj, than add this type to edges prop so you can add specifing paintStyle for edge type:

    edges: {

        default: {

            anchor: 'AutoDefault',

            endpoint: 'Blank',

            connector: ['Flowchart', {cornerRadius: 0}],

            paintStyle: {

                strokeWidth: 2,

                stroke: '#2c2e33',

                outlineWidth: 3,

                outlineStroke: 'transparent',

            }, //   paint style for this edge type.

            hoverPaintStyle: {strokeWidth: 2, stroke: '#2c2e33'}, // hover paint style for this edge type.

        },

        assetEdge: {

            anchor: 'AutoDefault',

            endpoint: 'Blank',

            connector: 'Bezier',

            paintStyle: {

                strokeWidth: 6,

                stroke: '#ccccaa',

                outlineWidth: 3,

                outlineStroke: 'transparent',

            }, //   paint style for this edge type.

            hoverPaintStyle: {strokeWidth: 2, stroke: '#2c2e33'}, // hover paint style for this edge type.

        },

    },

    ...

and adding edges should look like this:

    this.toolkit.addEdge

      source: entryAsset.id,

      target: newAssetNode.id,

      data: {

        type: 'assetEdge',

      },

    });