### Implement Node Toolbar

Source: https://vueflow.dev/guide/components/node-toolbar.html

Examples demonstrating the integration of the Node Toolbar within a Vue Flow setup and a custom node component.

```vue
<script setup>
import { VueFlow } from '@vue-flow/core'
import initialNodes from './initialNodes'

// some nodes and edges
const nodes = ref(initialNodes)
</script>

<template>
  <VueFlow :nodes="nodes">
    <template #node-custom="nodeProps">
      <CustomNode :data="nodeProps.data" />
    </template>
  </VueFlow>
</template>
```

```vue
<script lang="ts" setup>
import { Handle, Position } from '@vue-flow/core'
import { NodeToolbar } from '@vue-flow/node-toolbar'

interface NodeData {
  toolbarVisible: boolean
  toolbarPosition: Position
}

interface Props {
  data: NodeData
  label: string
}

defineProps<Props>()
</script>

<template>
  <NodeToolbar :is-visible="data.toolbarVisible" :position="data.toolbarPosition">
    <button>delete</button>
    <button>copy</button>
    <button>expand</button>
  </NodeToolbar>

  <Handle type="target" :position="Position.Left" />
  <Handle type="source" :position="Position.Right" />
</template>
```

--------------------------------

### Install Background Component

Source: https://vueflow.dev/guide/components/background.html

Install the background component using yarn or npm.

```bash
yarn add @vue-flow/background

# or
npm install @vue-flow/background
```

--------------------------------

### Background Component Installation

Source: https://vueflow.dev/guide/components/background.html

Install the Background component using yarn or npm.

```APIDOC
## Installation

```bash
yarn add @vue-flow/background

# or
npm install @vue-flow/background
```
```

--------------------------------

### Importing Vue Flow Features from 'vueflow' Package

Source: https://vueflow.dev/changelog

This example demonstrates how to import all core and additional components from the main 'vueflow' package. Ensure the 'vueflow' package is installed.

```vue
<script setup>
// `vueflow` pkg exports all features, i.e. core + additional components
import { VueFlow, Background, MiniMap, Controls } from "vueflow";
</script>

<template>
  <VueFlow>
    <Background />
    <MiniMap />
    <Controls />
  </VueFlow>
</template>
```

--------------------------------

### FlowEmits - connectStart

Source: https://vueflow.dev/typedocs/interfaces/FlowEmits.html

Emitted when the connection starts. Includes connection start parameters.

```APIDOC
## FlowEmits connectStart

### Description
Emitted when the connection starts.

### Parameters
- **event** (string) - "connectStart"
- **connectionEvent** (object & OnConnectStartParams) - Connection start parameters.

### Returns
void
```

--------------------------------

### Node Resizer Installation

Source: https://vueflow.dev/guide/components/node-resizer.html

Install the Node Resizer component using yarn or npm.

```APIDOC
## Installation

```bash
yarn add @vue-flow/node-resizer
  
# or
npm install @vue-flow/node-resizer
```
```

--------------------------------

### Install Node Resizer

Source: https://vueflow.dev/guide/components/node-resizer.html

Commands to install the @vue-flow/node-resizer package using yarn or npm.

```bash
yarn add @vue-flow/node-resizer
  
# or
npm install @vue-flow/node-resizer
```

--------------------------------

### FlowEmits - clickConnectStart

Source: https://vueflow.dev/typedocs/interfaces/FlowEmits.html

Emitted when a click connection starts. Includes connection start parameters.

```APIDOC
## FlowEmits clickConnectStart

### Description
Emitted when a click connection starts.

### Parameters
- **event** (string) - "clickConnectStart"
- **connectionEvent** (object & OnConnectStartParams) - Connection start parameters.

### Returns
void
```

--------------------------------

### Node Resizer Usage

Source: https://vueflow.dev/guide/components/node-resizer.html

Example of how to integrate the Node Resizer component into your Vue Flow setup.

```APIDOC
## Usage

vue
```vue
<script lang="ts" setup>
import { Handle, Position } from '@vue-flow/core'
import { NodeResizer } from '@vue-flow/node-resizer'

// make sure to include the necessary styles!
import '@vue-flow/node-resizer/dist/style.css'

defineProps(['data'])
</script>

<template>
  <NodeResizer min-width="100" min-height="30" />

  <Handle type="target" :position="Position.Left" />
  <Handle type="source" :position="Position.Right" />
</template>
```
```

--------------------------------

### Installation

Source: https://vueflow.dev/guide/components/controls.html

Install the Vue Flow Controls component using yarn or npm.

```APIDOC
## Installation

bash
```
yarn add @vue-flow/controls

# or
npm install @vue-flow/controls
```
```

--------------------------------

### Install Vue Flow MiniMap

Source: https://vueflow.dev/guide/components/minimap.html

Install the MiniMap package using Yarn or npm. This is the first step to using the minimap functionality.

```bash
yarn add @vue-flow/minimap
  
# or
npm install @vue-flow/minimap
```

--------------------------------

### Install Node Toolbar

Source: https://vueflow.dev/guide/components/node-toolbar.html

Commands to install the @vue-flow/node-toolbar package via yarn or npm.

```bash
yarn add @vue-flow/node-toolbar

# or
npm install @vue-flow/node-toolbar
```

--------------------------------

### Install Vue Flow Controls

Source: https://vueflow.dev/guide/components/controls.html

Install the Vue Flow Controls package using either yarn or npm.

```bash
yarn add @vue-flow/controls

# or
npm install @vue-flow/controls
```

--------------------------------

### FlowEmits - selectionStart

Source: https://vueflow.dev/typedocs/interfaces/FlowEmits.html

Emitted when the selection starts. Includes the MouseEvent.

```APIDOC
## FlowEmits selectionStart

### Description
Emitted when the selection starts.

### Parameters
- **event** (string) - "selectionStart"
- **selectionEvent** (MouseEvent) - The mouse event.

### Returns
void
```

--------------------------------

### CustomEdge.vue Example

Source: https://vueflow.dev/guide/utils/edge.html

Example of creating a custom edge component by wrapping a default edge like BezierEdge and adding custom logic.

```APIDOC
## CustomEdge.vue

### Description
This component demonstrates how to create a custom edge by wrapping a default Vue Flow edge component (e.g., `BezierEdge`) and potentially adding custom logic.

### Usage
Import `EdgeProps` and the desired edge component from `@vue-flow/core`. Use `v-bind='props'` to pass all edge properties to the wrapped component.

```vue
<script lang="ts" setup>
import { EdgeProps, BezierEdge } from '@vue-flow/core'

const props = defineProps<EdgeProps>()

// Custom logic can be added here
</script>

<template>
  <BezierEdge v-bind="props" />
</template>
```
```

--------------------------------

### FlowEmits - moveStart

Source: https://vueflow.dev/typedocs/interfaces/FlowEmits.html

Emitted when the flow starts moving. Includes event and flow transform details.

```APIDOC
## FlowEmits moveStart

### Description
Emitted when the flow starts moving.

### Parameters
- **event** (string) - "moveStart"
- **moveEvent** (object)
  - **event** (D3ZoomEvent<HTMLDivElement, any>) - The D3 zoom event.
  - **flowTransform** (ViewportTransform) - The current flow transform.

### Returns
void
```

--------------------------------

### Custom Handle Component

Source: https://vueflow.dev/examples/edges/validation.html

Example of a custom handle component with source and target handles.

```vue
<script setup>
import { Handle, Position } from '@vue-flow/core'
</script>

<template>
  <Handle type="source" :position="Position.Right" />
  <Handle type="target" :position="Position.Left" />
</template>
```

--------------------------------

### OnResizeStart Interface

Source: https://vueflow.dev/typedocs/interfaces/OnResizeStart.html

The OnResizeStart interface defines the structure for resize start events in Vue Flow.

```APIDOC
## Interface: OnResizeStart

### Properties

#### event

*   **event** (`ResizeDragEvent`) - The resize drag event object.

#### params

*   **params** (`ResizeParams`) - The parameters associated with the resize operation.
```

--------------------------------

### Install Vue Flow with npm

Source: https://vueflow.dev/guide/getting-started.html

Use npm to add the Vue Flow core package to your project.

```bash
$ npm add @vue-flow/core
```

--------------------------------

### Vue Flow Basic Setup with Custom Nodes and Edges

Source: https://vueflow.dev/guide/getting-started.html

Sets up Vue Flow with custom input, default, output, and special nodes and edges. Custom node and edge types are registered using slots.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import type { Node, Edge } from '@vue-flow/core'
import { VueFlow } from '@vue-flow/core'

// these components are only shown as examples of how to use a custom node or edge
// you can find many examples of how to create these custom components in the examples page of the docs
import SpecialNode from './components/SpecialNode.vue'
import SpecialEdge from './components/SpecialEdge.vue'

// these are our nodes
const nodes = ref<Node[]>([
  // an input node, specified by using `type: 'input'`
  {
    id: '1',
    type: 'input',
    position: { x: 250, y: 5 },
    // all nodes can have a data object containing any data you want to pass to the node
    // a label can property can be used for default nodes
    data: { label: 'Node 1' },
  },

  // default node, you can omit `type: 'default'` as it's the fallback type
  {
    id: '2',
    position: { x: 100, y: 100 },
    data: { label: 'Node 2' },
  },

  // An output node, specified by using `type: 'output'`
  {
    id: '3',
    type: 'output',
    position: { x: 400, y: 200 },
    data: { label: 'Node 3' },
  },

  // this is a custom node
  // we set it by using a custom type name we choose, in this example `special`
  // the name can be freely chosen, there are no restrictions as long as it's a string
  {
    id: '4',
    type: 'special', // <-- this is the custom node type name
    position: { x: 400, y: 200 },
    data: {
      label: 'Node 4',
      hello: 'world',
    },
  },
])

// these are our edges
const edges = ref<Edge[]>([
  // default bezier edge
  // consists of an edge id, source node id and target node id
  {
    id: 'e1->2',
    source: '1',
    target: '2',
  },

  // set `animated: true` to create an animated edge path
  {
    id: 'e2->3',
    source: '2',
    target: '3',
    animated: true,
  },

  // a custom edge, specified by using a custom type name
  // we choose `type: 'special'` for this example
  {
    id: 'e3->4',
    type: 'special',
    source: '3',
    target: '4',

    // all edges can have a data object containing any data you want to pass to the edge
    data: {
      hello: 'world',
    }
  },
])
</script>

<template>
  <VueFlow :nodes="nodes" :edges="edges">
    <!-- bind your custom node type to a component by using slots, slot names are always `node-<type>` -->
    <template #node-special="specialNodeProps">
      <SpecialNode v-bind="specialNodeProps" />
    </template>

    <!-- bind your custom edge type to a component by using slots, slot names are always `edge-<type>` -->
    <template #edge-special="specialEdgeProps">
      <SpecialEdge v-bind="specialEdgeProps" />
    </template>
  </VueFlow>
</template>

<style>
/* import the necessary styles for Vue Flow to work */
@import '@vue-flow/core/dist/style.css';

/* import the default theme, this is optional but generally recommended */
@import '@vue-flow/core/dist/theme-default.css';
</style>
```

--------------------------------

### FlowEmits - selectionDragStart

Source: https://vueflow.dev/typedocs/interfaces/FlowEmits.html

Emitted when the selection drag starts. Includes node drag event details.

```APIDOC
## FlowEmits selectionDragStart

### Description
Emitted when the selection drag starts.

### Parameters
- **event** (string) - "selectionDragStart"
- **selectionEvent** (NodeDragEvent) - The node drag event.

### Returns
void
```

--------------------------------

### Vue Flow Setup with Pinia Store

Source: https://vueflow.dev/examples/pinia.html

Initializes Vue Flow and connects it to a Pinia store for managing nodes and edges. Imports necessary components and hooks from Vue Flow and the custom store.

```vue
<script lang="ts" setup>
import { Panel, VueFlow, useVueFlow } from '@vue-flow/core';
import useStore from './store';
import Icon from './Icon.vue';
const store = useStore();
const { onConnect, addEdges } = useVueFlow();
onConnect((params) => addEdges([params]));
</script>
<template>
<VueFlow
v-model:nodes="store.nodes"
v-model:edges="store.edges"
class="pinia-flow"
fit-view-on-init
>
<Panel position="top-right">
<div class="buttons-panel">
<button @click="store.updatePositions">
<Icon name="shuffle" />
</button>
<button @click="store.toggleClass">
<Icon name="moon" />
</button>
<button @click="store.log">
<Icon name="log" />
</button>
<button @click="store.reset">
<Icon name="reset" />
</button>
</div>
</Panel>
</VueFlow>
</template>
```

--------------------------------

### Get Node Connections with useNodeConnections

Source: https://vueflow.dev/guide/composables.html

Use `useNodeConnections` to get all connections (both source and target) for a specific node. Filter by `handleType`, `handleId`, or `nodeId`. Callbacks for `onConnect` and `onDisconnect` are available.

```javascript
import { type HandleConnection, useNodeConnections } from '@vue-flow/core'

// get all connections where this node is the target (incoming connections)
const targetConnections = useNodeConnections({
  // type is required
  handleType: 'target',
})

// get all connections where this node is the source (outgoing connections)
const sourceConnections = useNodeConnections({
  handleType: 'source',
})

const handleConnections = useNodeConnections({
  handleId: 'handle-1', // you can explicitly pass a handle id if you want to get connections of a specific handle
})

const connections = useNodeConnections({
  nodeId: '1', // you can explicitly pass a node id, otherwise it's used from the `NodeId  injection
  handleType: 'target',
  onConnect: (connections: HandleConnection[]) => {
    // do something with the connections
  },
  onDisconnect: (connections: HandleConnection[]) => {
    // do something with the connections
  },
})
```

--------------------------------

### Valid Node Configurations in Vue Flow

Source: https://vueflow.dev/guide/troubleshooting.html

Provides examples of valid node configurations for Vue Flow. Ensure all required properties are set for correct node rendering.

```typescript
// Here's an example of some valid node configurations
const nodes = ref([
  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
  { id: '3', type: 'output', label: 'Node 3', position: { x: 400, y: 200 } },
  { id: '4', type: 'special', label: 'Node 4', position: { x: 400, y: 200 } },
])
```

--------------------------------

### Install Vue Flow with pnpm

Source: https://vueflow.dev/guide/getting-started.html

Use pnpm to add the Vue Flow core package to your project.

```bash
$ pnpm add @vue-flow/core
```

--------------------------------

### Configure Node Resizer Component

Source: https://vueflow.dev/guide/components/node-resizer.html

Example of adding the NodeResizer component to a custom node, including required CSS imports.

```vue
<script lang="ts" setup>
import { Handle, Position } from '@vue-flow/core'
import { NodeResizer } from '@vue-flow/node-resizer'

// make sure to include the necessary styles!
import '@vue-flow/node-resizer/dist/style.css'

defineProps(['data'])
</script>

<template>
  <NodeResizer min-width="100" min-height="30" />

  <Handle type="target" :position="Position.Left" />
  <Handle type="source" :position="Position.Right" />
</template>
```

--------------------------------

### Vue Flow App Setup with Dialog Confirmation

Source: https://vueflow.dev/examples/confirm.html

Sets up the Vue Flow component, imports necessary utilities, and defines nodes and edges. It integrates a custom dialog for confirming delete actions.

```javascript
import { h, ref } from 'vue'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import { Background } from '@vue-flow/background'
import { useDialog } from './useDialog'
import Dialog from './Dialog.vue'

const { onConnect, addEdges, onNodesChange, onEdgesChange, applyNodeChanges, applyEdgeChanges } = useVueFlow()

const dialog = useDialog()

const nodes = ref([
  { id: '1', type: 'input', data: { label: 'Click me and' }, position: { x: 0, y: 0 } },
  { id: '2', data: { label: `press 'Backspace' to delete me` }, position: { x: 0, y: 100 } },
])

const edges = ref([{ id: 'e1-2', source: '1', target: '2' }])

function dialogMsg(id) {
  return h(
    'span',
    {
      style: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: '8px',
      },
    },
    [`Are you sure?`, h('br'), h('span', `[ELEMENT_ID: ${id}]`)],
  )
}

onConnect(addEdges)

onNodesChange(async (changes) => {
  const nextChanges = []

  for (const change of changes) {
    if (change.type === 'remove') {
      const confirmed = await dialog.confirm(dialogMsg(change.id))

      if (!confirmed) {
        continue
      }
    }

    nextChanges.push(change)
  }

  applyNodeChanges(nextChanges)
})

onEdgesChange(async (changes) => {
  const nextChanges = []

  for (const change of changes) {
    if (change.type === 'remove') {
      const confirmed = await dialog.confirm(dialogMsg(change.id))

      if (!confirmed) {
        continue
      }
    }

    nextChanges.push(change)
  }

  applyEdgeChanges(nextChanges)
})
```

--------------------------------

### Valid Edge Configurations in Vue Flow

Source: https://vueflow.dev/guide/troubleshooting.html

Provides examples of valid edge configurations for Vue Flow. Ensure all edges have both `source` and `target` properties correctly set.

```typescript
// Here's an example of some valid edge configurations
const edges = ref([
  { id: 'e1-3', source: '1', target: '3' },
  { id: 'e1-2', source: '1', target: '2' },
  { id: 'e1-4', source: '1', target: '4' },
])
```

--------------------------------

### Implement Vue Flow with Custom Nodes

Source: https://vueflow.dev/guide/components/node-resizer.html

Basic setup for integrating Vue Flow with a custom node template.

```vue
<script setup>
import { ref } from 'vue'  
import { VueFlow } from '@vue-flow/core'
import initialNodes from './initialNodes'

// some nodes and edges
const nodes = ref(initialNodes)
</script>

<template>
  <VueFlow :nodes="nodes">
    <template #node-custom="nodeProps">
      <CustomNode :data="nodeProps.data"  />
    </template>
  </VueFlow>
</template>
```

--------------------------------

### Install Vue Flow with yarn

Source: https://vueflow.dev/guide/getting-started.html

Use yarn to add the Vue Flow core package to your project.

```bash
$ yarn add @vue-flow/core
```

--------------------------------

### Vue Flow Setup with Updatable Edge

Source: https://vueflow.dev/examples/edges/updatable-edge.html

This snippet sets up Vue Flow with nodes and a specific updatable edge. It includes event handlers for edge updates.

```javascript
import { ref } from 'vue'
import { Background } from '@vue-flow/background'
import { VueFlow, useVueFlow } from '@vue-flow/core'

const { updateEdge, addEdges } = useVueFlow()

const nodes = ref([
  {
    id: '1',
    type: 'input',
    data: { label: 'Node <strong>A</strong>' },
    position: { x: 250, y: 0 },
  },
  {
    id: '2',
    data: { label: 'Node <strong>B</strong>' },
    position: { x: 100, y: 100 },
  },
  {
    id: '3',
    data: { label: 'Node <strong>C</strong>' },
    position: { x: 400, y: 100 },
    style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
  },
])

const edges = ref([{ id: 'e1-2', source: '1', target: '2', label: 'Updateable edge', updatable: true }])

function onEdgeUpdateStart(edge) {
  console.log('start update', edge)
}

function onEdgeUpdateEnd(edge) {
  console.log('end update', edge)
}

function onEdgeUpdate({ edge, connection }) {
  updateEdge(edge, connection)
}

function onConnect(params) {
  addEdges([params])
}
```

--------------------------------

### Handle Node Events with useVueFlow

Source: https://vueflow.dev/guide/node.html

Use the `useVueFlow` composable to bind listeners to node event handlers like drag start, drag, and drag stop.

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

// useVueFlow provides access to the event handlers
const { 
  onNodeDragStart, 
  onNodeDrag,
  onNodeDragStop,
  onNodeClick, 
  onNodeDoubleClick, 
  onNodeContextMenu, 
  onNodeMouseEnter, 
  onNodeMouseLeave, 
  onNodeMouseMove 
} = useVueFlow()
  
const nodes = ref([
  {
    id: '1',
    data: { label: 'Node 1' },
    position: { x: 50, y: 50 },
  },
])
  
// bind listeners to the event handlers
onNodeDragStart((event) => {
  console.log('Node drag started', event)
})

onNodeDrag((event) => {
  console.log('Node dragged', event)
})

onNodeDragStop((event) => {
  console.log('Node drag stopped', event)
})
  
// ... and so on  
</script>

<template>
  <VueFlow :nodes="nodes" />
</template>
```

--------------------------------

### Save and Restore Vue Flow State with LocalStorage

Source: https://vueflow.dev/examples/save.html

This example demonstrates how to save and restore the state of a Vue Flow graph using the browser's LocalStorage. It serves as a basic foundation for implementing custom persistent storage solutions.

```javascript
import { VueFlow, useVueFlow } from '@vue-flow/core'
import { ref, onMounted } from 'vue'

const elements = ref([])
const { onPaneReady, onElementsMounted, addElements, removeElements, updateNode, updateEdge, onConnect, addEdge, removeElements, project, findNode, findEdge, getNodes, getEdges, setElements, setNodes, setEdges, fitView, zoomIn, zoomOut, setTransform, getTransform } = useVueFlow()

onMounted(() => {
  const savedElements = localStorage.getItem('vue-flow-elements')

  if (savedElements) {
    setElements(JSON.parse(savedElements))
  }
})

onElementsMounted((elements) => {
  console.log('Elements mounted:', elements)
})

onConnect((params) => addEdge(params))

function saveElements() {
  localStorage.setItem('vue-flow-elements', JSON.stringify(getElements()))
}

function restoreElements() {
  const savedElements = localStorage.getItem('vue-flow-elements')

  if (savedElements) {
    setElements(JSON.parse(savedElements))
  }
}

function resetElements() {
  setElements([])
  localStorage.removeItem('vue-flow-elements')
}
```

--------------------------------

### useConnection()

Source: https://vueflow.dev/typedocs/functions/useConnection.html

Composable for accessing the currently ongoing connection. It returns an object with details about the connection's start handle, end handle, status, and position.

```APIDOC
## Function: useConnection() ​

> **useConnection**(): `object`

Composable for accessing the currently ongoing connection.

## Returns ​

`object`

current connection: startHandle, endHandle, status, position

### endHandle ​

> **endHandle** : `Ref`<`null` | `ConnectingHandle`>

### position ​

> **position** : `Ref`<`XYPosition`>

### startHandle ​

> **startHandle** : `Ref`<`null` | `ConnectingHandle`>

### status ​

> **status** : `Ref`<`null` | `ConnectionStatus`>
```

--------------------------------

### Create Custom Handles with useHandle

Source: https://vueflow.dev/guide/composables.html

The `useHandle` composable provides pointer down and click handlers for creating custom node handles. This example shows how the default handle component is constructed.

```vue
<script lang="ts" setup>
import { NodeId, useHandle, useVueFlow } from '@vue-flow/core'
import type { HandleProps, Position } from '@vue-flow/core'

const props = withDefaults(defineProps<HandleProps>(), {
  type: 'source',
  position: 'top' as Position,
  connectable: true,
})

const nodeId = inject(NodeId, '')

const { id, hooks, connectionStartHandle } = useVueFlow()

const { handlePointerDown, handleClick } = useHandle({
  nodeId,
  handleId: props.id,
  isValidConnection: props.isValidConnection,
  type: props.type,
})

const onMouseDownHandler = (event: MouseEvent) => handlePointerDown(event)

const onClickHandler = (event: MouseEvent) => handleClick(event)
</script>

<script lang="ts">
export default {
  name: 'CustomHandle',
}
</script>

<template>
  <div
    :data-handleid="id"
    :data-nodeid="nodeId"
    :data-handlepos="position"
    class="vue-flow__handle nodrag"
    :class="[
      `vue-flow__handle-${position}`,
      `vue-flow__handle-${id}`,
      {
        source: type !== 'target',
        target: type === 'target',
        connectable: connectable,
        connecting:
          connectionStartHandle?.nodeId === nodeId &&
          connectionStartHandle?.handleId === id &&
          connectionStartHandle?.type === type,
      },
    ]"
    @mousedown="onMouseDownHandler"
    @click="onClickHandler"
  >
    <slot :node-id="nodeId" v-bind="props"></slot>
  </div>
</template>
```

--------------------------------

### Pinia Store Setup for Vue Flow

Source: https://vueflow.dev/examples/pinia.html

Define a Pinia store to manage nodes and edges for Vue Flow. Includes initial node and edge data, and functions to reset, log, toggle classes, and update positions.

```typescript
import { defineStore } from 'pinia';
import { ref } from 'vue';
import type { Edge, Node } from '@vue-flow/core';

const useStore = defineStore('vue-flow-pinia', () => {
  const nodes = ref([
    { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
    { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
    { id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
    { id: '4', label: 'Node 4', position: { x: 400, y: 200 }, class: 'light' },
  ]);

  const edges = ref([
    { id: 'e1-2', source: '1', target: '2' },
    { id: 'e1-3', source: '1', target: '3' },
    { id: 'e3-4', source: '3', target: '4' },
  ]);

  const reset = () => {
    edges.value = [];
    nodes.value = [];
  };

  const log = () => {
    console.log('nodes', nodes.value, 'edges', edges.value);
  };

  const toggleClass = () => {
    nodes.value = nodes.value.map((node) => {
      return { ...node, class: node.class === 'dark' ? 'light' : 'dark' };
    });
  };

  const updatePositions = () => {
    nodes.value = nodes.value.map((node) => {
      return { ...node, position: { x: Math.random() * 400, y: Math.random() * 400 } };
    });
  };

  return { nodes, edges, reset, log, toggleClass, updatePositions };
});

export default useStore;

```

--------------------------------

### Get Handle Connections with useHandleConnections

Source: https://vueflow.dev/guide/composables.html

The `useHandleConnections` composable retrieves connections linked to a specific `<Handle>`. Specify `type: 'target'` for incoming connections or `type: 'source'` for outgoing connections. You can also filter by `id` and `nodeId`.

```javascript
import { type HandleConnection, useHandleConnections } from '@vue-flow/core'

// get all connections where this node is the target (incoming connections)
const targetConnections = useHandleConnections({
  // type is required
  type: 'target',
})

// get all connections where this node is the source (outgoing connections)
const sourceConnections = useHandleConnections({
  type: 'source',
})

const connections = useHandleConnections({
  id: 'handle-1', // you can explicitly pass a handle id if there are multiple handles of the same type
  nodeId: '1', // you can explicitly pass a node id, otherwise it's used from the `NodeId  injection
  type: 'target',
  onConnect: (connections: HandleConnection[]) => {
    // do something with the connections
  },
  onDisconnect: (connections: HandleConnection[]) => {
    // do something with the connections
  },
})
```

--------------------------------

### Pinia Initialization in main.ts

Source: https://vueflow.dev/examples/pinia.html

Configure your Vue application to use Pinia by creating a Pinia instance and using it with the app. This is essential for the Pinia store to function.

```typescript
import { createApp } from 'vue';
import { createPinia } from 'pinia';

import './assets/main.css';
import App from './App.vue';

const app = createApp(App);

app.use(createPinia());

app.mount('#app');

```

--------------------------------

### Initialize Vue Flow with useVueFlow

Source: https://vueflow.dev/guide/composables.html

Use the `useVueFlow` composable to interact with the graph. It provides methods for fitting the view, finding nodes, and enabling snapping to grid. The `onInit` callback receives the instance for further manipulation.

```javascript
import { ref } from 'vue'
import { useVueFlow, VueFlow } from '@vue-flow/core'

const { onInit, findNode, fitView, snapToGrid } = useVueFlow()

const nodes = ref([/* ... */])

const edges = ref([/* ... */])

// to enable snapping to grid
snapToGrid.value = true

// any event that is emitted from the `<VueFlow />` component can be listened to using the `onEventName` method
onInit((instance) => {
  // `instance` is the same type as the return of `useVueFlow` (VueFlowStore)
  
  fitView()
  
  const node = findNode('1')
  
  if (node) {
    node.position = { x: 100, y: 100 }
  }
})
```

--------------------------------

### Vue Flow with Connection Validation

Source: https://vueflow.dev/examples/edges/validation.html

Demonstrates setting up nodes and edges with custom validation logic for connections. Includes a `onConnectStart` handler for logging connection initiation.

```javascript
import { ref } from 'vue'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import CustomInput from './CustomInput.vue'
import CustomNode from './CustomNode.vue'

const { addEdges } = useVueFlow()

const nodes = ref([
  {
    id: '0',
    type: 'input',
    position: { x: 0, y: 150 },
    // only target `B` is valid for this node
    data: { validTarget: 'B', validSource: '0' },
  },
  {
    id: 'A',
    type: 'custom',
    position: { x: 250, y: 0 },
    // no valid connections can be made for this node
    data: {},
  },
  {
    id: 'B',
    type: 'custom',
    position: { x: 250, y: 150 },
    // only source `0` is valid for this node
    data: { validTarget: 'B', validSource: '0' },
  },
  {
    id: 'C',
    type: 'custom',
    position: { x: 250, y: 300 },
    // no valid connections can be made for this node
    data: {},
  },
])

const edges = ref([])

function onConnectStart({ nodeId, handleType }) {
  console.log('on connect start', { nodeId, handleType })
}
```

--------------------------------

### Initialize Node State and Helper Line Refs

Source: https://vueflow.dev/examples/helper-lines.html

Sets up the initial nodes for the graph and reactive references for horizontal and vertical helper lines.

```typescript
const { applyNodeChanges } = useVueFlow()

const nodes = ref<Node[]>(initialNodes)

const helperLineHorizontal = ref<number | undefined>(undefined)
const helperLineVertical = ref<number | undefined>(undefined)
```

--------------------------------

### getViewport

Source: https://vueflow.dev/guide/utils/instance.html

Gets position and zoom of the pane.

```APIDOC
## getViewport 

### Description
Gets position and zoom of the pane.

### Endpoint
`vueFlowInstance.getViewport()`

### Response Example
```json
{
  "x": 100,
  "y": 100,
  "zoom": 1.5
}
```
```

--------------------------------

### Vue Flow App Setup with Custom Connection Line

Source: https://vueflow.dev/examples/edges/connection-line.html

This snippet shows the main Vue component setup for Vue Flow, including importing necessary modules and defining nodes. It utilizes the 'connection-line' template slot to render a custom connection line component.

```javascript
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'
import CustomConnectionLine from './CustomConnectionLine.vue'

const nodes = ref([
  {
    id: '1',
    type: 'input',
    data: { label: 'Node 1' },
    position: { x: 250, y: 5 },
  },
])
```

```html
<template>
  <VueFlow :nodes="nodes">
    <template #connection-line="{ sourceX, sourceY, targetX, targetY }">
      <CustomConnectionLine :source-x="sourceX" :source-y="sourceY" :target-x="targetX" :target-y="targetY" />
    </template>
  </VueFlow>
</template>
```

--------------------------------

### FlowEmits - viewportChangeStart

Source: https://vueflow.dev/typedocs/interfaces/FlowEmits.html

Emitted when the viewport change starts. Includes the viewport transform.

```APIDOC
## FlowEmits viewportChangeStart

### Description
Emitted when the viewport change starts.

### Parameters
- **event** (string) - "viewportChangeStart"
- **viewport** (ViewportTransform) - The viewport transform.

### Returns
void
```

--------------------------------

### Key Code Options

Source: https://vueflow.dev/guide/vue-flow/config.html

Configure keyboard shortcuts for selection and deletion actions.

```APIDOC
### selection-key-code (optional)
  * Type: `KeyCode`
  * Default: `Shift`
  * Details:
Define a key which can be used to activate the selection rect.

### multi-selection-key-code (optional)
  * Type: `KeyCode`
  * Default: `Meta`
  * Details:
Define a key which can be used to activate multi-selection.
Multi-selection can be used to select multiple nodes with clicks.

### delete-key-code (optional)
  * Type: `KeyCode`
  * Default: `Backspace`
  * Details:
Define a key which can be used to activate remove elements from the pane.

```

--------------------------------

### FlowEmits - init

Source: https://vueflow.dev/typedocs/interfaces/FlowEmits.html

Emitted to initialize the flow. Includes the VueFlowStore object. Use this instead of the deprecated 'init' event.

```APIDOC
## FlowEmits init

### Description
Emitted to initialize the flow. Use this instead of the deprecated 'init' event.

### Parameters
- **event** (string) - "init"
- **paneEvent** (VueFlowStore) - The VueFlowStore instance.

### Returns
void
```

--------------------------------

### Initialize and Use useVueFlow Composable

Source: https://vueflow.dev/guide/vue-flow/state.html

Initializes the Vue Flow state and sets up event handlers. Use this to access nodes and react to pane readiness.

```javascript
import { useVueFlow } from '@vue-flow/core'

const { getNodes, onPaneReady } = useVueFlow()

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

// watch the stored nodes
watch(getNodes, (nodes) => console.log('nodes changed', nodes))
```

--------------------------------

### useHandle

Source: https://vueflow.dev/guide/composables.html

Provides pointer and click handlers for creating custom node handles.

```APIDOC
## useHandle

### Description
Enables the creation of custom node handles by providing handlePointerDown and handleClick functions.

### Parameters
- **nodeId** (string) - Required - The ID of the node.
- **handleId** (string) - Optional - The ID of the handle.
- **isValidConnection** (Function) - Optional - Validation logic for connections.
- **type** (string) - Optional - The type of handle (source or target).
```

--------------------------------

### Handle Pane Ready Event

Source: https://vueflow.dev/guide/utils/instance.html

Demonstrates how to access the Vue Flow instance when the pane is ready using either the composable API or the Options API.

```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>
```

--------------------------------

### State and Configuration Methods

Source: https://vueflow.dev/typedocs/interfaces/Actions.html

Methods for updating graph state, zoom levels, and interaction settings.

```APIDOC
## setInteractive()

### Description
Enable or disable node interaction such as dragging and selecting.

### Parameters
- **isInteractive** (boolean) - Required - Interaction state.

## setMaxZoom()

### Description
Apply a maximum zoom value to the d3 instance.

### Parameters
- **zoom** (number) - Required - Max zoom value.

## setMinZoom()

### Description
Apply a minimum zoom value to the d3 instance.

### Parameters
- **zoom** (number) - Required - Min zoom value.
```

--------------------------------

### Define an Input Node in Vue Flow

Source: https://vueflow.dev/guide/node.html

Configures a node with a single handle, typically positioned at the bottom, to act as a starting point.

```typescript
import { ref } from 'vue'
import { Position } from '@vue-flow/core'

const nodes = ref([
  {
    id: '1',
    type: 'input',
    sourcePosition: Position.Bottom, // or Top, Left, Right,
    data: { label: 'Input Node' },
  }
])
```

--------------------------------

### Function: useZoomPanHelper()

Source: https://vueflow.dev/typedocs/functions/useZoomPanHelper.html

Provides viewport manipulation functions. Note that this function is deprecated and users should migrate to useVueFlow.

```APIDOC
## useZoomPanHelper()

### Description
Returns viewport manipulation functions for the Vue Flow instance. This function is deprecated; it is recommended to use the `useVueFlow` hook instead, as all viewport functions are available there.

### Parameters
#### Path Parameters
- **vueFlowId** (string) - Optional - The ID of the specific Vue Flow instance.

### Response
- **ViewportFunctions** (object) - An object containing methods to manipulate the viewport.
```

--------------------------------

### project

Source: https://vueflow.dev/guide/utils/instance.html

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.

```APIDOC
## project 

### Description
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.

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

### Request Example
```json
{
  "x": 100,
  "y": 100
}
```
```

--------------------------------

### Interface: OnResizeEnd

Source: https://vueflow.dev/typedocs/interfaces/OnResizeEnd.html

Documentation for the OnResizeEnd interface properties.

```APIDOC
## Interface: OnResizeEnd

### Description
Represents the event object provided when a resize operation ends.

### Properties
- **event** (ResizeDragEvent) - The resize drag event details.
- **params** (ResizeParams) - The parameters associated with the resize operation.
```

--------------------------------

### useVueFlow() with Options

Source: https://vueflow.dev/typedocs/functions/useVueFlow.html

Provides access to a Vue Flow store instance, configured with the provided options. This overload allows for initializing the store with specific properties defined in FlowProps.

```APIDOC
## Function: useVueFlow(options)

### Description
Composable that provides access to a store instance, initialized with the given options.

### Parameters
#### Request Body
- **options** (FlowProps) - Optional - Configuration options for the Vue Flow store.

### Returns
- **VueFlowStore** - A Vue Flow store instance.
```

--------------------------------

### Implement a straight edge in Vue Flow

Source: https://vueflow.dev/guide/utils/edge.html

Uses getStraightPath to calculate path parameters for a custom edge component in a Vue 3 setup script.

```vue
<script lang="ts" setup>
import { computed } from "vue"
import { BaseEdge, getStraightPath, EdgeProps } from '@vue-flow/core'

const props = defineProps<EdgeProps>()

const edgePathParams = computed(() => getStraightPath(props))
</script>

<template>
  <BaseEdge :path="edgePathParams[0]" />
</template>
```

--------------------------------

### Define Node Connectability Options

Source: https://vueflow.dev/changelog

Shows how to configure the connectable property on node objects to restrict or allow connections.

```javascript
const nodes = ref([
  {
    id: "1",
    position: { x: 0, y: 0 },
    connectable: "single", // each handle is only connectable once (default node for example)
  },
  {
    id: "2",
    position: { x: 200, y: 0 },
    connectable: (node, connectedEdges) => {
      return true; // will allow any number of connections
    },
  },
  {
    id: "3",
    position: { x: 400, y: 0 },
    connectable: true, // will allow any number of connections
  },
  {
    id: "4",
    position: { x: 200, y: 0 },
    connectable: false, // will disable handles
  },
]);
```

--------------------------------

### VueFlow Component Props Configuration

Source: https://vueflow.dev/guide/vue-flow/config.html

Demonstrates how to pass configuration options like default viewport, max zoom, and min zoom directly as props to the VueFlow component.

```APIDOC
## VueFlow Component Props Configuration

### Description
This snippet shows how to configure Vue Flow by passing options directly as props to the `VueFlow` component.

### Method
Component Props

### Endpoint
N/A (Component Usage)

### Parameters
#### Component Props
- **default-viewport** (object) - Optional - Sets the initial viewport state, including zoom level.
- **max-zoom** (number) - Optional - Maximum zoom level allowed.
- **min-zoom** (number) - Optional - Minimum zoom level allowed.

### Request Example
```vue
<template>
  <VueFlow :default-viewport="{ zoom: 0.5 }" :max-zoom="4" :min-zoom="0.1" />
</template>
```

### Response
N/A (Component Usage)
```

--------------------------------

### Get Node Data by Connections

Source: https://vueflow.dev/guide/composables.html

Use `useNodesData` to retrieve data for nodes connected to the current node. Pass a guard function to filter and type the returned node data.

```typescript
import { useNodesData, useHandleConnections } from '@vue-flow/core'

// get all connections where this node is the target (incoming connections)
const connections = useHandleConnections({
  type: 'target',
})

const data = useNodesData(() => connections.value.map((connection) => connection.source))

console.log(data.value) // [{ /* ... */]
```

```typescript
import { useNodesData, useHandleConnections, type Node } from '@vue-flow/core'

type MyNode = Node<{ foo: string }>

const connections = useHandleConnections({
  type: 'target',
})

const data = useNodesData(() => connections.value.map((connection) => connection.source), (node): node is MyNode => node.type === 'foo')

console.log(data.value) // [{ /* foo: string */]
```

--------------------------------

### Update an edge in Vue Flow (Deprecated)

Source: https://vueflow.dev/guide/utils/graph.html

The `updateEdge` function is deprecated for the composition API; use the `updateEdge` function from `useVueFlow`. This example demonstrates updating an edge's source or target.

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

const elements = ref([
  { id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },

  { id: 'e1-2', source: '1', target: '2' },
])

const onEdgeUpdate = ({ edge, connection }) => {
  elements.value = updateEdge(edge, connection, elements.value)
}
</script>
<template>
  <VueFlow v-model="elements" @edge-update="onEdgeUpdate" />
</template>
```

--------------------------------

### fitView

Source: https://vueflow.dev/guide/utils/instance.html

Fits the view port so that all nodes are visible. Padding is 0.1 and includeHiddenNodes is false by default.

```APIDOC
## fitView 

### Description
Fits the view port so that all nodes are visible. Padding is 0.1 and includeHiddenNodes is false by default.

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

### Request Example
```json
{
  "padding": 0.25,
  "includeHiddenNodes": true
}
```
```