configurable edge marker types
Kade-Powell opened this issue · comments
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?
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
perfect, thank you for the help and the library!