视口函数

🌐 Viewport Functions

可以通过 useVueFlow 工具或使用 onPaneReady 提供的 VueFlowStore 实例访问视口功能。

🌐 Viewport Functions can be accessed via the useVueFlow utility or with the VueFlowStore instance provided by onPaneReady.

使用事件钩子（可组合）

vue

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

const { onPaneReady } = useVueFlow()

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

使用事件监听器

vue

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

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

详细信息：
将像素坐标转换为内部 VueFlow 坐标系。
当你拖动节点（例如从侧边栏）并需要其在窗格上的内部位置时，可以使用此功能。
示例：

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

fitView

详细信息：
调整视口大小，使所有节点可见。
默认情况下，padding 为 0.1，includeHiddenNodes 为 false。
示例：

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

fitBounds

详细信息：
根据边界的矩形输入调整视口大小。
示例：

vueFlowInstance.fitBounds(getRectOfNodes(nodes.value))

setViewport

详细信息：
设置窗格的位置和缩放比例。
示例：

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

getViewport

详细信息：
获取窗格的位置和缩放比例。

zoomIn

详细信息：
放大。

zoomOut

详细信息：
缩小。

zoomTo

详细信息：
放大到特定级别。

getElements

详细信息：
返回当前存储的元素（节点 + 边）。

getNodes

详细信息：
返回当前存储的节点。

getEdges

详细信息：
返回当前存储的边。

toObject

详细信息：
返回当前流状态的元素、位置和缩放比例。
示例：

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

视口函数 ​

视口函数