Auto pan and zoom w/dynamic insertion of nodes, edges and layout

[notsonsi]

I was wondering if this is a thing or not or how I could fix this, I insert my nodes, edges and layout from a database so all dynamically and I have autoPanAndZoomOnLoad: "fit-content", which doesn't work since it runs before the nodes, edges and layout are added from the database, also if the database changes and it updates the autoPanAndZoomOnLoad wont do, is there any other way to do this? thanks ^^

[dash14]

Hi @notsonsi, Sorry for the late reply. For now, please try using the fitToContents() method. https://dash14.github.io/v-network-graph/reference/methods.html#instance-methods

<script setup lang="ts">
import * as vNG from "v-network-graph";
import { VNetworkGraph } from "v-network-graph";
import { onMounted, reactive, ref } from "vue";

const graph = ref<vNG.Instance>();

const nodes: vNG.Nodes = reactive({});
const edges: vNG.Edges = reactive({});
const layouts: vNG.Layouts = reactive({ nodes: {} });

onMounted(async () => {
  // Load data and merge into variables.
  // ...

  // Call after variable update is complete.
  nextTick(() => graph.value?.fitToContents());
});

</script>
<template>
  <v-network-graph
    ref="graph"
    :nodes="nodes"
    :edges="edges"
    :layouts="layouts"
  />
</template>

However, transitions such as node size change a bit unintentionally, so I am considering creating a feature to pending initialization until asynchronous process is complete. I'll think about it some more.

[dash14]

@notsonsi In v0.9.4, we added the ability to wait for asynchronous processing before initial display! After the asynchronous processing is completed, the autoPanAndZoomOnLoad config will be applied. See the example for details. https://dash14.github.io/v-network-graph/examples/basic.html#processing-before-initial-display

Thank you for your patience!

[dash14]

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