Change the size of the invisible box inside the canvas

[Harshpanday]

Hey, so I noticed that there is an invisible box inside the graph canvas

Is there a way to adjust the size of this box? I tried changing my graph canvas size, but invisible box size remains the same.

Here is my code

<div class="operation">
        <div class="graph">
          <v-network-graph
            ref="graph"
            v-model:selected-nodes="selectedNodes"
            v-model:selected-edges="selectedEdges"
            :nodes="nodes"
            :edges="edges"
            :configs="configs"
          />
        </div>

 <script setup lang='ts'>
const configs = reactive(
  vNG.defineConfigs({
    view: {
      minZoomLevel: 0.1,
      maxZoomLevel: 16,
      autoPanOnResize: true,
      layoutHandler: new ForceLayout({
        positionFixedByDrag: false,
        positionFixedByClickWithAltKey: true
      }),
    },
    node: {
      selectable: true,
      normal: {
        type: "circle",
        radius: node => node.size, // Use the value of each node object
        color: node => node.color,
      },
      hover: {
        type: "circle",
        radius: node => node.size + 2,
        color: node => node.color,
        // for type is "rect" -->
        width: 32,
        height: 32,
        borderRadius: 4,
        // <-- for type is "rect"
        strokeWidth: 0,
        strokeColor: "#000000",
        strokeDasharray: "0",
      },
      selected: {
        type: "circle",
        radius: node => node.size + 2,
        // for type is "rect" -->
        width: 32,
        height: 32,
        borderRadius: 4,
        // <-- for type is "rect"
        strokeWidth: 0,
        strokeColor: "#000000",
        strokeDasharray: "0",
        color: node => node.color,
      },
      label: {
        visible: node => !!node.label,
        fontFamily: undefined,
        fontSize: 11,
        lineHeight: 1.1,
        color: "#000000",
        margin: 4,
        direction: "south",
        background: {
          visible: false,
          color: "#ffffff",
          padding: {
            vertical: 1,
            horizontal: 4,
          },
          borderRadius: 2,
        },
      },
      focusing: {
        visible: true,
        width: 4,
        padding: 3,
        dasharray: "0",
        color: "darkgray",
      },
    },
    edge: {
      selectable: true,
      normal: {
        width: edge => edge.width, // Use the value of each edge object
        color: edge => edge.color,
        dasharray: edge => (edge.dashed ? "4" : "0"),
      },
       marker: {
        source: {
          type: "none",
          width: 4,
          height: 4,
          margin: -1,
          units: "strokeWidth",
          color: null,
        },
        target: {
          type: "arrow",
          width: 10,
          height: 10,
          margin: -1,
          units: "strokeWidth",
          color: null,
        },
    },
  },
  })
)
const d3ForceEnabled = computed({
  get: () => configs.view.layoutHandler instanceof ForceLayout,
  set: (value: boolean) => {
    if (value) {
      configs.view.layoutHandler = new ForceLayout()
    } else {
      configs.view.layoutHandler = new vNG.SimpleLayout()
    }
  },
})
//const zoomLevel = ref(1)
</script>

<style scoped>
.operation {
  display: inline-block;
  padding: 1rem 1rem;
  vertical-align: middle;
  float: left;
}
.add_remove{
  padding: 1rem 1rem;
  vertical-align: middle;
  float: left;
}
.graph {
  border: 1px solid #888;
  width: 700px;
  height: 580px;
  margin: 0 auto;
  float: left;
}
</style>

I'll be very grateful if anyone can let me know how I can resize that invisible box inside canvas.

[Harshpanday]

I solved it by importing the css.

import VNetworkGraph from "v-network-graph";
import "v-network-graph/lib/style.css";  //