Node width

[EvgenyFrol]

Hi!

How can I set the automatic width of a node based on the filling of the label inside the node?
I haven't found an example with a similar case, but in docs said that the width of a node has only some definitely static value

Сan you advise me how to solve this problem?

[dash14]

Hi @EvgenyFrol,
I apologize for the delayed response.
Although it might be too late, I am providing my answer just in case it is still needed.

The maximum node size must be specified, but this can be accomplished by overriding the node with a <foreignObject> and placing an html element in it that will automatically adjust the size.

The following is an example code and a screenshot.

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

const nodes: Nodes = {
  node1: { name: "Orange" },
  node2: { name: "Strawberry" },
  node3: { name: "Pear" },
}
const edges: Edges = {
  edge1: { source: "node1", target: "node2" },
  edge2: { source: "node2", target: "node3" },
}

const layouts: Layouts = {
  nodes: {
    node1: { x: 0, y: 0 },
    node2: { x: 200, y: 100 },
    node3: { x: 0, y: 200 },
  }
}

const configs = defineConfigs({
  node: {
    normal: {
      type: "rect",
      width: 200, // max width
      height: 100, // max height
    },
    label: {
      visible: false,
    }
  }
})
</script>

<template>
  <v-network-graph :nodes="nodes" :edges="edges" :configs="configs" :layouts="layouts">
    <defs>
    <!-- Cannot use <style> directly due to restrictions of Vue. -->
    <component :is="'style'">
      .node-wrapper {
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
      }
      .node-element {
        display: grid;
        place-items: center;
        padding: 4px 10px;
        background-color: #ccc;
        border: 1px solid #888;
        border-radius: 6px;
        position: relative;
        pointer-events: all; /* mouse operation target */
      }
    </component>
    </defs>
    <template #override-node="{ nodeId, scale, config, ...slotProps }">
    <foreignObject
      :x="-config.width/2"
      :y="-config.height/2"
      :width="config.width"
      :height="config.height"
      :transform="`scale(${scale})`"
      style="pointer-events: none;"
      v-bind="slotProps">
      <div class="node-wrapper">
        <div class="node-element">
          {{ nodes[nodeId].name }}
        </div>
      </div>
    </foreignObject>
    </template>
  </v-network-graph>
</template>