Initial pan/zoom values

[Mark]

Hey!
I'm trying to figure out the best way of setting the initial pan/zoom, so that I can save the current pan/zoom levels for the next time a user returns to the page.

I can see that there's a zoom-level property, but nothing for pan. I've also noticed the onSvgPanZoomInitialized but actually setting pan/zoom from the callback does nothing.

Is there a 'standard' way, without waiting for the component to load and then calling on any of the instance methods, to achieve this?

Cheers!

[dash14.ack]

Hi @redbullmarky,
Just now v0.9.4 has been released, allowing the process to be inserted just before the initial display!
The following is an example of the use of this feature:

<script setup lang="ts">
import * as vNG from "@v-network-graph"
import { VNetworkGraph } from "@v-network-graph"
import { ref } from "vue"
import data from "./data"

const graph = ref<vNG.Instance>()
const zoomLevel = ref(1)

const configs: vNG.UserConfigs = {
  view: {
    autoPanAndZoomOnLoad: false, // do not update pan/zoom state on load
    onBeforeInitialDisplay: () => {
      // Set initial pan/zoom state.
      graph.value!.panTo({ x: 100, y: 50 })
      zoomLevel.value = 0.5
      // If you want to set both pan and zoom, you can also use setViewBox().
      // See below for details:
      // https://dash14.github.io/v-network-graph/examples/misc.html#get-and-set-the-viewing-area

    },
  },
}
</script>

<template>
  <div>
    <v-network-graph
      ref="graph"
      :configs="configs"
      :nodes="data.nodes"
      :edges="data.edges"
      :layouts="data.layouts"
      v-model:zoomLevel="zoomLevel"
    />
  </div>
</template>

<style lang="scss" scoped>
.v-network-graph {
  width: 600px;
  height: 600px;
  border: 1px solid #aaa;
}
</style>

// data.ts
import { Nodes, Edges, Layouts } from "v-network-graph"

const nodes: Nodes = {
  node1: { name: "Node 1", active: false },
  node2: { name: "Node 2", active: false },
  node3: { name: "Node 3", active: true },
  node4: { name: "Node 4", active: false },
}

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

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

export default {
  nodes,
  edges,
  layouts,
}

Cheers!

[Mark]

Awesome!
The way you handle issues and your community so well is why I’m glad I chose this great little package.

Thank you very much and keep up the amazing work.