Change edge label text color on edge hover

[linkurzweg]

Hi! First of all, thanks for creating this fantastic library :)

When hovering over an edge I would love to be able to change the color of the corresponding label. As far as I can see, this is not possible at the moment?

[dash14]

Hi @linkurzweg, Thanks for using this library!

When hovering over an edge I would love to be able to change the color of the corresponding label. As far as I can see, this is not possible at the moment?

There is no configuration available like nodes and edges, but this can be achieved by using the slot property and css. An example is shown below.

<script setup lang="ts">
import { Nodes, Edges, Layouts, defineConfigs } from "v-network-graph"

const nodes: Nodes = {
  node1: { name: "Node 1" },
  node2: { name: "Node 2" },
  node3: { name: "Node 3" },
  node4: { name: "Node 4" },
}

const edges: Edges = {
  edge1: { source: "node1", target: "node2", label: "1 Gbps" },
  edge2: { source: "node2", target: "node3", label: "100 Mbps" },
  edge3: { source: "node2", target: "node4", label: "100 Mbps" },
}

const configs = defineConfigs({
  node: {
    label: {
      visible: false
    },
  },
})

const layouts: Layouts = {
  nodes: {
    node1: { x: 0, y: 80 },
    node2: { x: 200, y: 80 },
    node3: { x: 360, y: 0 },
    node4: { x: 360, y: 160 },
  },
}
</script>

<template>
  <v-network-graph
    :nodes="nodes"
    :edges="edges"
    :layouts="layouts"
    :configs="configs"
  >
    <template #edge-label="{ edge, hovered, ...slotProps }">
      <v-edge-label
        :text="edge.label"
        :class="{ hovered }"
        align="center"
        vertical-align="above"
        v-bind="slotProps"
      />
    </template>
  </v-network-graph>
</template>

<style>
.v-ng-edge-label {
  transition: fill .3s;
}
.v-ng-edge-label.hovered {
  fill: red;
}
</style>

I hope this helps.

[linkurzweg]

@dash14 Thank you very much! This is exactly what I needed :) It might be worth to add this to the documentation? Also I needed to use the deep selector to apply the hovered styles, otherwise it didn't work in my case.

:deep(.v-ng-edge-label.hovered) {
    fill: red
}

[dash14]

@linkurzweg Thank you for the fast reply! I have now added this example to the documentation ;) https://dash14.github.io/v-network-graph/examples/labels.html#modify-the-style-of-edge-labels-when-hovering-selecting-edges I don't know why the deep selector is needed in your environment, but I have included a supplement to the example code as well.

Thank you for your question and feedback!