Instance

The Vue Flow instance provides easy access to zoom-pan-helper functions. It can be accessed either directly from the state using useVueFlow or you can receive the instance with a onPaneReady event handler.

<script setup>
import { VueFlow, useVueFlow } from '@braks/vue-flow'

const { onPaneReady, instance } = useVueFlow()

// event handler
onPaneReady((instance) => instance.fitView())

onMounted(() => {
  // or directly try to access the instance
  instance.value?.fitView()
})
</script>

<script>
import { VueFlow } from '@braks/vue-flow'

export default defineComponent({
  components: { VueFlow },
  data() {
    return {
      instance: null,
    }
  },
  methods: {
    onPaneReady(vueFlowInstance) {
      vueFlowInstance.fitView()
      this.instance = vueFlowInstance
    }
  }
})
</script>
<template>
  <VueFlow @pane-ready="onPaneReady" />
</template>

project

• Details:

  Transforms pixel coordinates to the internal VueFlow coordinate system.

  This can be used when you drag nodes (from a sidebar for example) and need the internal position on the pane.

• Example:

vueFlowInstance.project({ x: 100, y: 100 })

fitView

• Details:

  Fits the view port so that all nodes are visible.

  Padding is 0.1 and includeHiddenNodes is false by default.

• Example:

vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true })

fitBounds

• Details:

  Fits the view port according to the bounds' rect input.

• Example:

vueFlowInstance.fitBounds(getRectOfNodes(nodes.value))

setTransform

• Details:

  Sets position and zoom of the pane.

• Example:

vueFlowInstance.setTransform({ x: 100, y: 100, zoom: 1.5 })

getTransform

• Details:

  Gets position and zoom of the pane.

zoomIn

• Details:

  Zooms in.

zoomOut

• Details:

  Zooms out.

zoomTo

• Details:

  Zooms to specific level.

getElements

• Details:

  Returns currently stored elements (nodes + edges).

getNodes

• Details:

  Returns currently stored nodes.

getEdges

• Details:

  Returns currently stored edges.

toObject

• Details:

  Returns elements, position and zoom of the current flow state.

• Example:

toObject = (): {
  elements: FlowElements,
  position: [x, y],
  zoom: scale,
}