custom image for nodes

[N1neTa1ls]

hello and thanks a lot for the library I want to switch to your library I looked at the functionality and almost cried because everything was implemented at once. "out of the box" On the current library, I had to write everything myself. I didn't find only options for the two features I needed

1. need the ability to insert an image into the node, instead of filling in color (for example, a photo of a person)
2. tooltip displaying additional information about the node (for example, right click opens the context menu)
3. algorithm for finding the shortest path to node (A*, Dijkstra's algorithm)

thx for your response!

[markus-ebner]

Hi @N1neTa1ls,

I think I have some solutions or workarounds for your first 2 problems:

1. You could try to create a custom node where you put in an <image> into it (image instead of img in svg). I guess that could work and you can see the example about custom nodes at https://dash14.github.io/v-network-graph/examples/appearance.html#custom-node.
2. I've had the same challenge: You will get the position of the node through different events. I'm opening a tooltip on node:pointerover and get the absolute position of the node through the following function:

   function getPositionAttributesOfElement (element: HTMLElement): { top: number; left: number;bottom: number; right: number; width: number } {
   const rect = element.getBoundingClientRect()
   return { top:rect.top + window.scrollY, left: rect.left + window.scrollX, bottom: rect.bottom + window.scrollY, right: rect.right + window.scrollX, width: (rect.right - rect.left) }
   }

   From there you could position your tooltip somewhere near your node with some specified offset.

Unfortunately, I can't help you with your third challenge, but the creator @dash14 will certainly react to your comments pretty fast. ;)

[N1neTa1ls]

1. You could try to create a custom node where you put in an <image> into it (image instead of img in svg). I guess that could work and you can see the example about custom nodes at https://dash14.github.io/v-network-graph/examples/appearance.html#custom-node.

thx for your response) yes, I saw this example, but as far as I understand, font-family is connected there: 'Material Icons'; of course, you can develop your own set of icons, and insert them into the desired nodes. it was interesting if there is already implemented functionality, because it would be easier and more convenient to send a link to an image with a 'backand' in the node parameter itself

From there you could position your tooltip somewhere near your node with some specified offset.

I was thinking about something like this) make the context menu a separate diva and process it with the 'addEventListener' function

Unfortunately, I can't help you with your third challenge, but the creator @dash14 will certainly react to your comments pretty fast. ;)

by the way, have you tried to implement v-network graph on vue 2?)

[markus-ebner]

thx for your response) yes, I saw this example, but as far as I understand, font-family is connected there: 'Material Icons'; of course, you can develop your own set of icons, and insert them into the desired nodes. it was interesting if there is already implemented functionality, because it would be easier and more convenient to send a link to an image with a 'backand' in the node parameter itself

You do not need icons - just put in a custom node with circle and an image. The image link (in this example static) can be accessed via the nodeId and can be set dynamically. I just tried it with the following and it worked

<v-network-graph
  :nodes="nodes"
  :edges="edges"
  :configs="mainConfig"
  :event-handlers="eventHandlers"
  :layouts="layouts">
  <template #override-node="{ nodeId, scale, config, ...slotProps }">
    <defs>
      <clipPath id="myCircle">
        <circle cx="70" cy="70" r="70" fill="#FFFFFF" />
      </clipPath>
    </defs>
    <image width="70" height="70" xlink:href="/image.png" clip-path="url(#myCircle)" />
  </template>
</v-network-graph>

[markus-ebner]

by the way, have you tried to implement v-network graph on vue 2?)

No, I'm using Vue 3 and I think it only supports Vue 3.

[dash14]

Hi @N1neTa1ls, Thank you for your contact. I hope v-network-graph will be useful to you! And, @markus-ebner, thank you very much for your grateful help!

2. tooltip displaying additional information about the node (for example, right click opens the context menu)

It's mostly as @markus-ebner answered. In addition, I extended the v-network-graph a bit to make it easier to get the right click event. (v0.3.4) And I made a displaying context menu by right-click example: https://dash14.github.io/v-network-graph/examples/event.html#context-menu

3. algorithm for finding the shortest path to node (A*, Dijkstra's algorithm)

v-network-graph is focused on drawing graphs, and there is no plans to include any algorithms at this time. I made an example that applies an algorithm to a graph structure passed to v-network-graph and draws the result. It uses the Dijkstra algorithm. https://dash14.github.io/v-network-graph/examples/misc.html#find-the-shortest-path I hope this is helpful.

[N1neTa1ls]

Hi @N1neTa1ls, Thank you for your contact. I hope v-network-graph will be useful to you! And, @markus-ebner, thank you very much for your grateful help!

1. tooltip displaying additional information about the node (for example, right click opens the context menu)

It's mostly as @markus-ebner. In addition, I extended the v-network-graph a bit to make it easier to get the right click event. (v0.3.4) And I made a displaying context menu by right-click example: https://dash14.github.io/v-network-graph/examples/event.html#context-menu

1. algorithm for finding the shortest path to node (A*, Dijkstra's algorithm)

v-network-graph is focused on drawing graphs, and there is no plans to include any algorithms at this time. I made an example that applies an algorithm to a graph structure passed to v-network-graph and draws the result. It uses the Dijkstra algorithm. https://dash14.github.io/v-network-graph/examples/misc.html#find-the-shortest-path I hope this is helpful.

wow, nice!))) Thank you, so much work and all for me alone)

and about the first point, is everything as @markus-ebner wrote? or do you have any other ideas on how to implement a picture inside a node?

[dash14]

Hi @N1neTa1ls, Thanks for the reply. As for how to use photos as nodes, it's mostly as @markus-ebner wrote, but I made an example. https://dash14.github.io/v-network-graph/examples/appearance.html#custom-node (It is placed below the example of using the icon.)

I hope this will be of some help to you.

[dash14]

I'll close this issue for now. If you have any other questions, please open a new issue.