How can define node as rectangles with custom svgs ? + possibles tags & slots

[Suniron]

Hey there,

My problem: I dont find the way to define custom node as rectangle + custom svg inside.

I tried with ''rect'' in defined config or with / tags in the override node slot.

In waiting à solution, I have a circle with my svg inside..

---

More large question 1: where can I found all possibles tags to put inside v-network-graph slots ?

---

More large question 2: where can I found all possibles slots can be used in the map ? I searched a lot in documentation but they are not listed in... 🤷‍♂️

Thanks by advance !

[dash14]

Hi @Suniron,
Thanks for your question.

My problem: I dont find the way to define custom node as rectangle + custom svg inside.

An example of specifying a custom node with a rect svg is shown below.
I hope this is helpful.

<script setup lang="ts">
import { defineConfigs } from "v-network-graph";

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

const edges = {
  edge1: { source: "node1", target: "node2" },
  edge2: { source: "node2", target: "node3" },
  edge3: { source: "node3", target: "node4" },
};

const layouts = {
  nodes: {
    node1: { x: 0, y: 0 },
    node2: { x: 50, y: 50 },
    node3: { x: 100, y: 0 },
    node4: { x: 150, y: 50 },
  },
}

const configs = defineConfigs({
  node: {
    selectable: true,
    normal: {
      type: "rect",
      width: 32,
      height: 32,
      borderRadius: 0
    },
  },
});
</script>

<template>
  <v-network-graph
    class="graph"
    :nodes="nodes"
    :edges="edges"
    :configs="configs"
    :layouts="layouts"
  >
    <template #override-node="{ config, scale }">
      <!-- node's center position is (0, 0) -->
      <!-- shadow -->
      <rect
        :x="4 * scale"
        :y="(-config.height / 2 + config.height * 0.7) * scale"
        :width="config.width * scale"
        :height="(config.height * 0.3) * scale"
        fill="#444466"
        transform="skewX(-50)"
      />
      <!-- node rect -->
      <rect
        :x="-config.width / 2 * scale"
        :y="-config.height / 2 * scale"
        :width="config.width * scale"
        :height="config.height * scale"
        :fill="config.color"
        stroke="#000"
        :stroke-width="1 * scale"
      />
    </template>
  </v-network-graph>
</template>

<style>
.graph {
  width: 800px;
  height: 600px;
  border: 1px solid #000;
}
</style>

More large question 1: where can I found all possibles tags to put inside v-network-graph slots ?

v-network-graph simply expands the tags specified in the slot to the desired position, so you can specify any SVG tag that the browser recognizes.

More large question 2: where can I found all possibles slots can be used in the map ? I searched a lot in documentation but they are not listed in... 🤷‍♂️

Sorry, the list of slots is not yet documented at this time....
The following slots can be specified.

• override-node
• override-node-label
• edge-overlay
• edge-label
• edges-label

Other slots can also be added as layers, specifying where they are to be inserted. For details, please check the custom layer example.

Best Regards

[dash14]

I close this issue for now.
If you have any other question/comment, please reopen this issue.