How to have two different nodes shapes ?

[Coeurdecedre]

Hello ! I would like to know if it was possible to have circle and rectangle nodes at the same time ? And if so, how is it possible ? Thank you !

[dash14]

Hi @Coeurdecedre,

Thanks for the question! This can be accomplished by specifying a function in the type field under configs.node that takes a node object as an argument and returns either "circle" or "rect". An example is shown below:

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

const nodes: Nodes = {
  node0: { name: "Node 0", isRect: false },
  node1: { name: "Node 1", isRect: true },
  node2: { name: "Node 2", isRect: true },
  node3: { name: "Node 3", isRect: false },
};

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

const layouts: Layouts = {
  nodes: {
    node0: { x: 0, y: 0 },
    node1: { x: 80, y: 60 },
    node2: { x: 160, y: 0 },
    node3: { x: 240, y: 60 },
  },
};

const configs = defineConfigs({
  node: {
    normal: {
      type: (n) => (n.isRect ? "rect" : "circle"),
      radius: 20, // for circle
      width: 80, // after this, for rect
      height: 30,
      borderRadius: 4,
    },
  },
});
</script>

<template>
  <div class="graph">
    <v-network-graph
      :nodes="nodes"
      :edges="edges"
      v-model:layouts="layouts"
      :configs="configs"
    />
  </div>
</template>

<style>
.graph {
  border: 1px solid #888;
  width: 600px;
  height: 400px;
  margin: 0 auto;
}
</style>

Screenshot: I hope this will be helpful to you. Best Regards,

[Coeurdecedre]

Thank you very much for your help, it helped me solve my problem !