视口函数

¥Viewport Functions

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

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

• 使用事件钩子（可组合）

  ¥Using Event Hooks (Composable)

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

const { onPaneReady } = useVueFlow()

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

• 使用事件监听器

  ¥Using Event Listener

<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

• 详细信息：

  ¥Details:

  将像素坐标转换为内部 VueFlow 坐标系。

  ¥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 为 0.1，includeHiddenNodes 为 false。

  ¥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))

setViewport

• 详细信息：

  ¥Details:

  设置窗格的位置和缩放比例。

  ¥Sets position and zoom of the pane.

• 示例：

  ¥Example:

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

getViewport

• 详细信息：

  ¥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,
}