configurable edge marker types

[Kade-Powell]

Hello, i'm trying to set the marker type dynamically just as other values are set dynamically in the configuration of the graph.

configs: defineConfigs({
/// snip
    edge: {
          gap: 8,
          type: edge => edge.type,
          normal: {
            width: edge => edge.width,
            color: edge => edge.color,
            dasharray: edge => (edge.dashed ? '4' : '0')
          },
          hover: { color: getCssVar('primary') },
          margin: 4,
          marker: {
            target: {
              type: edge => edge.markerType, // this is the part i'm having issues with
              width: 4,
              height: 4
            }
          }
        }
      })

in my code i'm generating the edges and the edge options, here's the function to generate edge options (includes marker type)

generateEdgeOptions (object = {}, isSap = false) {
      const edgeOptions = {}
      if (isSap) {
        edgeOptions.width = 1
        edgeOptions.color = getCssVar('secondary')
        edgeOptions.type = 'straight'
        edgeOptions.markerType = 'none'
      } else {
        if (object.icb) {
          edgeOptions.width = 1
          edgeOptions.color = getCssVar('info')
          edgeOptions.dashed = true
          edgeOptions.type = 'straight'
          edgeOptions.markerType = 'arrow'
        } else {
          edgeOptions.width = 2
          edgeOptions.color = getCssVar('info')
          edgeOptions.dashed = false
          edgeOptions.type = 'curve'
          edgeOptions.markerType = 'arrow'
        }
      }  
return edgeOptions
},

what i expect to happen is i will have different target markers shown based on what parameters i pass in, but this does not happen. The other options do work like i expect for example this is an example graph

What i'm trying to do is have arrows on light blue links and no markers on the purple ones shown, any idea as to what i'm doing wrong?

[dash14]

Hi @Kade-Powell, Thank you for using v-network-graph and asking the question!

Sorry for the lack of clarity. When a function is specified in an item under config.marker, the format of the argument differs from the other items and is as follows:

(args: [Edge, StrokeStyle]) => value

Therefore, try specifying the following:

          marker: {
            target: {
              type: ([edge]) => edge.markerType,
              width: 4,
              height: 4
            }
          }

Best Regards

[Kade-Powell]

perfect, thank you for the help and the library!