### Install v-network-graph with npm

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/getting-started.md

Install the library using npm. This command is typically run in your project's root directory.

```bash
npm install v-network-graph
```

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

### Install Dagre using npm

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/layout.md

This command installs the Dagre library, which is used for automatic directed graph layout.

```bash
npm install dagre

```

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

### Data for Automatic Layout Example

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/layout.md

This TypeScript file defines the nodes and edges for the network graph example. It serves as the input data for the layout calculation.

```typescript
export const nodes = {
  a: { name: 'A' },
  b: { name: 'B' },
  c: { name: 'C' },
  d: { name: 'D' },
  e: { name: 'E' },
}
export const edges = {
  a: { source: 'a', target: 'b' },
  b: { source: 'b', target: 'c' },
  c: { source: 'c', target: 'd' },
  d: { source: 'd', target: 'e' },
}

```

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

### Basic v-network-graph Usage

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/getting-started.md

A fundamental example demonstrating how to render a network graph with nodes and edges in a Vue component.

```vue
<script setup lang="ts">
  const nodes = {
    node1: { name: "Node 1" },
    node2: { name: "Node 2" },
    node3: { name: "Node 3" },
    node4: { name: "Node 4" },
  }

  const edges = {
    edge1: { source: "node1", target: "node2" },
    edge2: { source: "node2", target: "node3" },
    edge3: { source: "node3", target: "node4" },
  }
</script>

<template>
  <v-network-graph
    class="graph"
    :nodes="nodes"
    :edges="edges"
  />
</template>

<style>
.graph {
  width: 800px;
  height: 600px;
  border: 1px solid #000;
}
</style>
```

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

### Dynamically Style Nodes and Edges with Functions (Variant)

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/appearance.md

Another example demonstrating dynamic styling of nodes and edges using functions, showing how changes in reactive data reflect in the graph's appearance.

```vue
<template>
  <v-network-graph :nodes="nodes" :edges="edges" :layouts="layouts" />
</template>

<script setup lang="ts">
import { reactive } from 'vue'

type UserNode = {
  name: string,
  type: 'default' | 'important' | 'warning',
}

type UserEdge = {
  source: string,
  target: string,
  type: 'default' | 'highlight'
}

const nodes = reactive<Record<string, UserNode>>({
  node1: {
    name: 'Node 1',
    type: 'important',
  },
  node2: {
    name: 'Node 2',
    type: 'default',
  },
  node3: {
    name: 'Node 3',
    type: 'warning',
  },
})

const edges = reactive<Record<string, UserEdge>>({
  edge1: {
    source: 'node1',
    target: 'node2',
    type: 'default',
  },
  edge2: {
    source: 'node2',
    target: 'node3',
    type: 'highlight',
  },
})

const layouts = reactive({
  nodes: {
    node1: {
      position: { x: 0, y: 0 },
    },
    node2: {
      position: { x: 200, y: 0 },
    },
    node3: {
      position: { x: 100, y: 100 },
    },
  },
})

const getNodeStyle = (node: UserNode) => {
  if (node.type === 'important') {
    return {
      fill: '#FF0000',
      stroke: '#000000',
      strokeWidth: 2,
    }
  } else if (node.type === 'warning') {
    return {
      fill: '#FFA500',
      stroke: '#000000',
      strokeWidth: 1,
    }
  }
  return {
    fill: '#1E90FF',
    stroke: '#000000',
    strokeWidth: 1,
  }
}

const getEdgeStyle = (edge: UserEdge) => {
  if (edge.type === 'highlight') {
    return {
      stroke: '#00FF00',
      strokeWidth: 3,
    }
  }
  return {
    stroke: '#999999',
    strokeWidth: 1,
  }
}
</script>
```

```typescript
export type UserNode = {
  name: string,
  type: 'default' | 'important' | 'warning',
}

export type UserEdge = {
  source: string,
  target: string,
  type: 'default' | 'highlight'
}

export const nodes = {
  node1: {
    name: 'Node 1',
    type: 'important',
  },
  node2: {
    name: 'Node 2',
    type: 'default',
  },
  node3: {
    name: 'Node 3',
    type: 'warning',
  },
}

export const edges = {
  edge1: {
    source: 'node1',
    target: 'node2',
    type: 'default',
  },
  edge2: {
    source: 'node2',
    target: 'node3',
    type: 'highlight',
  },
}

export const layouts = {
  nodes: {
    node1: {
      position: { x: 0, y: 0 },
    },
    node2: {
      position: { x: 200, y: 0 },
    },
    node3: {
      position: { x: 100, y: 100 },
    },
  },
}
```

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

### Setup v-network-graph in main.ts

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/getting-started.md

Integrate v-network-graph into your Vue application by importing it and using it in your main entry file.

```typescript
// main.ts
import { createApp } from "vue"
import VNetworkGraph from "v-network-graph"
import "v-network-graph/lib/style.css"
import App from "./App.vue"

const app = createApp(App)

app.use(VNetworkGraph)
app.mount("#app")
```

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

### Custom Path Appearances

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/paths.md

Allows detailed customization of path appearances beyond basic coloring. This example shows how to set properties like width, dash style, and opacity.

```vue
<template>
  <NetworkGraph :nodes="nodes" :edges="edges" :paths="paths" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const nodes = ref([{ id: 'a' }, { id: 'b' }])
const edges = ref([{ id: 1, source: 'a', target: 'b' }])
const paths = ref([
  {
    id: 'path1',
    edges: [1],
    width: 5,
    dash: [5, 5],
    opacity: 0.5,
  },
])
</script>
```

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

### Summarized Edge Labels Configuration

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/labels.md

Configure labels for summarized edges using a different slot than normal edges. This example shows the Vue component setup.

```vue
<template v-slot:demo>
  <DemoSummarizedEdgeLabels />
</template>
<template v-slot:source>

  <<< @/.vitepress/components/04_label/08/SummarizedEdgeLabels.vue{5-8,27-35}

</template>
<template v-slot:data>

  <<< @/.vitepress/components/04_label/08/data.ts

</template>
</demo-tabs>
```

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

### Style 1: Basic Node and Edge Styling

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/appearance.md

Demonstrates fundamental styling for nodes and edges. This is a good starting point for customizing the visual appearance of your graph.

```vue
<template>
  <Graph :nodes="nodes" :edges="edges" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const nodes = ref([
  { id: 'a', label: 'Node A' },
  { id: 'b', label: 'Node B' },
  { id: 'c', label: 'Node C' },
])

const edges = ref([
  { id: 'ab', source: 'a', target: 'b' },
  { id: 'bc', source: 'b', target: 'c' },
])
</script>

<style scoped>
:deep(.graph-node) {
  transition: opacity 0.3s;
}
:deep(.graph-node.selected) {
  opacity: 0.5;
}
:deep(.graph-edge) {
  transition: stroke-width 0.3s;
}
:deep(.graph-edge.selected) {
  stroke-width: 5px;
}
</style>
```

```typescript
export const nodes = [
  { id: 'a', label: 'Node A' },
  { id: 'b', label: 'Node B' },
  { id: 'c', label: 'Node C' },
]

export const edges = [
  { id: 'ab', source: 'a', target: 'b' },
  { id: 'bc', source: 'b', target: 'c' },
]
```

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

### Minimal Network Graph Setup

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/basic.md

Use this basic configuration for a network graph with default settings. It allows for panning, zooming with the mouse wheel, and dragging nodes. Supports multi-touch gestures for simultaneous node manipulation and zooming.

```vue
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const nodes = [
      { id: 1 }, { id: 2 }, { id: 3 },
    ]
    const edges = [
      { source: 1, target: 2 },
      { source: 2, target: 3 },
    ]
    return {
      nodes,
      edges,
    }
  },
})
```

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

### Start Box Selection Mode

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/reference/methods.md

Initiates box selection mode, allowing nodes within a dragged rectangle to be selected. Options control when the mode stops and how selection behaves.

```typescript
startBoxSelection(options: BoxSelectionOption): void
```

```typescript
{
  stop?: "pointerup" | "click" | "manual"
  type?: "append" | "invert"
  withShiftKey?: "append" | "invert" | "same"
}
```

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

### Style 5: Interactive Node Styling

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/appearance.md

This example shows how to change node appearance based on user interaction, specifically clicking a node to toggle its state. It also demonstrates how node states can affect edge animations.

```vue
<template>
  <Graph :nodes="nodes" :edges="edges" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const nodes = ref([
  { id: 'a', label: 'Start Node', active: false },
  { id: 'b', label: 'Middle Node', active: false },
  { id: 'c', label: 'End Node', active: false },
])

const edges = ref([
  { id: 'ab', source: 'a', target: 'b' },
  { id: 'bc', source: 'b', target: 'c' },
])

// Logic to toggle node state and animate edges would be here
</script>

<style scoped>
:deep(.graph-node) {
  transition: fill 0.3s;
}
:deep(.graph-node.active) {
  fill: lightgreen;
}
:deep(.graph-edge) {
  transition: stroke-dashoffset 0.3s;
}
:deep(.graph-edge.active) {
  stroke-dashoffset: -20px;
}
</style>
```

```typescript
export const nodes = [
  { id: 'a', label: 'Start Node', active: false },
  { id: 'b', label: 'Middle Node', active: false },
  { id: 'c', label: 'End Node', active: false },
]

export const edges = [
  { id: 'ab', source: 'a', target: 'b' },
  { id: 'bc', source: 'b', target: 'c' },
]
```

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

### Implement Edge Tooltip with Events

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/event.md

Create tooltips for edges by utilizing node positions and event handling, even when edge positions are not explicitly stored. This example shows a tooltip on edge hover.

```vue
<template>
  <div class="graph-container" ref="container">
    <v-network-graph :nodes="nodes" :edges="edges" :event-handlers="eventHandlers" />
    <div v-if="tooltip.visible" class="tooltip" :style="tooltip.style">
      {{ tooltip.text }}
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { VNetworkGraph, EventHandlers, Node, Edge, Position } from "v-network-graph"
import "v-network-graph/lib/style.css"

const nodes = {
  node1: { name: "Node 1" },
  node2: { name: "Node 2" },
}
const edges = {
  edge1: { source: "node1", target: "node2" },
}

export default defineComponent({
  components: { VNetworkGraph },
  setup() {
    const container = ref<HTMLElement | null>(null)
    const tooltip = reactive({
      visible: false,
      text: '',
      style: {
        top: '0px',
        left: '0px',
      },
    })

    const eventHandlers: EventHandlers = {
      "edge:pointerover": ({ edge }) => {
        tooltip.visible = true
        tooltip.text = `Edge: ${edge.id}`
      },
      "edge:pointerout": () => {
        tooltip.visible = false
      },
      "edge:pointermove": (event) => {
        if (container.value) {
          const rect = container.value.getBoundingClientRect()
          tooltip.style.left = `${event.event.clientX - rect.left + 10}px`
          tooltip.style.top = `${event.event.clientY - rect.top + 10}px`
        }
      },
    }

    return {
      container,
      nodes,
      edges,
      eventHandlers,
      tooltip,
    }
  },
})
</script>

<style>
.graph-container {
  width: 100%;
  height: 400px;
  position: relative;
}
.tooltip {
  position: absolute;
  background-color: #333;
  color: white;
  padding: 5px;
  border-radius: 3px;
  pointer-events: none;
  white-space: nowrap;
}
</style>
```

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

### Position Nodes with d3-force

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/layout.md

Utilize the d3-force layout strategy for physics-based node positioning. Install `d3-force` as an optional dependency. Alt-clicking a node fixes its position, and clicking again with Alt releases it.

```bash
npm install d3-force
```

```javascript
view.layoutHandler = "d3-force";

// Alt + click to fix node position
// Alt + click again to release node
```

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

### Implement Node Tooltip with Events

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/event.md

Combine event handling with coordinate translation to display DOM elements like tooltips on hover. This example shows a tooltip for nodes.

```vue
<template>
  <div class="graph-container" ref="container">
    <v-network-graph :nodes="nodes" :edges="edges" :event-handlers="eventHandlers" />
    <div v-if="tooltip.visible" class="tooltip" :style="tooltip.style">
      {{ tooltip.text }}
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { VNetworkGraph, EventHandlers, Node, Edge, Position } from "v-network-graph"
import "v-network-graph/lib/style.css"

const nodes = {
  node1: { name: "Node 1" },
  node2: { name: "Node 2" },
}
const edges = {
  edge1: { source: "node1", target: "node2" },
}

export default defineComponent({
  components: { VNetworkGraph },
  setup() {
    const container = ref<HTMLElement | null>(null)
    const tooltip = reactive({
      visible: false,
      text: '',
      style: {
        top: '0px',
        left: '0px',
      },
    })

    const eventHandlers: EventHandlers = {
      "node:pointerover": ({ node }) => {
        tooltip.visible = true
        tooltip.text = `Node: ${node.id}`
      },
      "node:pointerout": () => {
        tooltip.visible = false
      },
      "node:pointermove": (event) => {
        if (container.value) {
          const rect = container.value.getBoundingClientRect()
          tooltip.style.left = `${event.event.clientX - rect.left + 10}px`
          tooltip.style.top = `${event.event.clientY - rect.top + 10}px`
        }
      },
    }

    return {
      container,
      nodes,
      edges,
      eventHandlers,
      tooltip,
    }
  },
})
</script>

<style>
.graph-container {
  width: 100%;
  height: 400px;
  position: relative;
}
.tooltip {
  position: absolute;
  background-color: #333;
  color: white;
  padding: 5px;
  border-radius: 3px;
  pointer-events: none;
  white-space: nowrap;
}
</style>
```

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

### Custom Node Component with Image

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/appearance.md

Replace the default node component with an image. This example uses an image from a URL to represent the node.

```vue
<template>
  <v-network-graph :nodes="nodes" :edges="edges" :layouts="layouts">
    <template #override-node="{ node }">
      <g>
        <image :href="node.imageUrl" x="-25" y="-25" width="50" height="50" />
      </g>
    </template>
  </v-network-graph>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

const nodes = reactive({
  node1: {
    name: 'Node 1',
    imageUrl: 'https://generated.photos/vue-static/face-generator/face_001.png',
  },
  node2: {
    name: 'Node 2',
    imageUrl: 'https://generated.photos/vue-static/face-generator/face_002.png',
  },
})

const edges = reactive({
  edge1: {
    source: 'node1',
    target: 'node2',
  },
})

const layouts = reactive({
  nodes: {
    node1: {
      position: { x: 0, y: 0 },
    },
    node2: {
      position: { x: 200, y: 0 },
    },
  },
})
</script>
```

```typescript
export const nodes = {
  node1: {
    name: 'Node 1',
    imageUrl: 'https://generated.photos/vue-static/face-generator/face_001.png',
  },
  node2: {
    name: 'Node 2',
    imageUrl: 'https://generated.photos/vue-static/face-generator/face_002.png',
  },
}

export const edges = {
  edge1: {
    source: 'node1',
    target: 'node2',
  },
}

export const layouts = {
  nodes: {
    node1: {
      position: { x: 0, y: 0 },
    },
    node2: {
      position: { x: 200, y: 0 },
    },
  },
}
```

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

### Handle Node Click Events

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/event.md

Define specific handlers for events like 'node:click' to react to user interactions. This example changes a badge's color on node click.

```vue
<template>
  <div class="graph-container">
    <v-network-graph :nodes="nodes" :edges="edges" :event-handlers="eventHandlers" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { VNetworkGraph, EventHandlers } from "v-network-graph"
import "v-network-graph/lib/style.css"

const nodes = {
  node1: { name: "Node 1", selected: false },
  node2: { name: "Node 2", selected: false },
}
const edges = {
  edge1: { source: "node1", target: "node2" },
}

export default defineComponent({
  components: { VNetworkGraph },
  setup() {
    const nodeSelected = ref(false)

    const eventHandlers: EventHandlers = {
      "node:click": ({ node }) => {
        nodes[node.id].selected = !nodes[node.id].selected
        nodeSelected.value = nodes[node.id].selected
      },
    }

    return {
      nodes,
      edges,
      eventHandlers,
      nodeSelected,
    }
  },
})
</script>

<style>
.graph-container {
  width: 100%;
  height: 400px;
}
.selected {
  background-color: #ff0000;
}
</style>
```

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

### Vue Component for Multiple Edge Labels

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/labels.md

This example shows how to render multiple labels per edge, displaying edge ID and dynamic data from connected nodes. It uses slots to access edge and node data for label content.

```vue
<template v-slot:demo>
  <DemoMultipleEdgeLabels />
</template>
<template v-slot:source>

  <<< @/.vitepress/components/04_label/05/MultipleEdgeLabels.vue{40-63}

</template>
<template v-slot:data>

  <<< @/.vitepress/components/04_label/05/data.ts

</template>
```

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

### Select Edges in Network Graph

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/operation.md

Configure edges to be selectable by clicking or touching. Use 2-way binding with `selected-edges` to get an array of selected edge IDs or control the selection state programmatically.

```vue
<script setup lang="ts">
import { ref } from "vue"

const selectableEdges = ref(true)
const selectedEdges = ref<string[]>([])
</script>

<template>
  <VNetworkGraph :nodes="nodes" :edges="edges" :configs="{ edge: { selectable: selectableEdges } }" v-model:selected-edges="selectedEdges" />
</template>

```

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

### Select Nodes in Network Graph

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/operation.md

Configure nodes to be selectable by clicking or touching. Use 2-way binding with `selected-nodes` to get an array of selected node IDs or control the selection state programmatically.

```vue
<script setup lang="ts">
import { ref } from "vue"

const selectableNodes = ref(true)
const selectedNodes = ref<string[]>([])
</script>

<template>
  <VNetworkGraph :nodes="nodes" :edges="edges" :configs="{ node: { selectable: selectableNodes } }" v-model:selected-nodes="selectedNodes" />
</template>

```

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

### Vue Component for Automatic Layout with Dagre

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/layout.md

This Vue component integrates with Dagre to automatically lay out a directed graph. It requires the Dagre library to be installed. Ensure the data structure is compatible with Dagre's input requirements.

```vue
<template>
  <v-network-graph :layouts="layouts" :nodes="nodes" :edges="edges" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Network } from 'v-network-graph'
import { ForceLayout } from 'v-network-graph/lib/force-layout'
import { DagreLayout } from 'v-network-graph/lib/dagre-layout'

const nodes = {
  a: { name: 'A' },
  b: { name: 'B' },
  c: { name: 'C' },
  d: { name: 'D' },
  e: { name: 'E' },
}
const edges = {
  a: { source: 'a', target: 'b' },
  b: { source: 'b', target: 'c' },
  c: { source: 'c', target: 'd' },
  d: { source: 'd', target: 'e' },
}

const layouts = ref()

const dagreLayout = new DagreLayout({
  // graphLabel: 'directed graph',
  // compound: true,
  // directed: true,
  // multigraph: true,
  // align: 'UL'
})

// const forceLayout = new ForceLayout()

// const layout = dagreLayout.layout()
const layout = dagreLayout.layout()

layouts.value = {
  graph: layout,
}
</script>

```

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

### Customize d3-force Parameters and Ticks

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/layout.md

Customize d3-force parameters and control coordinate calculations by advancing specified ticks. This example demonstrates stopping nodes after calculation and preventing recalculation on drag or network changes, with customizable behavior.

```javascript
view.layoutHandler = {
  handler: "d3-force",
  options: {
    // Customize d3-force parameters here
    // e.g., strength, distance, etc.
  },
  ticks: 100 // Advance 100 ticks before displaying
};
```

```javascript
// To prevent recalculation on drag or network changes:
view.layoutHandler.options.recalculateOnDrag = false;
view.layoutHandler.options.recalculateOnNetworkChange = false;
```

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

### Get SVG as Text (Deprecated)

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/reference/methods.md

Deprecated method to get the network graph's content as SVG text data.

```typescript
getAsSvg(): string
```

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

### path:select

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/reference/events.md

Fired when a path is selected.

```APIDOC
## Event: path:select

### Description
Fired when a path is selected.

### Data Payload
```json
[ PATH_ID, ... ]
```
```

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

### Get ViewBox Coordinates

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/reference/methods.md

Retrieves the coordinates defining the currently displayed area (viewBox).

```typescript
getViewBox(): Box
```

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

### View Configuration Options

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/reference/configurations.md

Configure the visual behavior of the graph, including zooming, panning, and selection.

```typescript
{
  view: {
    scalingObjects: boolean // whether to expand the entire object.    default: false
    panEnabled: boolean     // whether the pan is enabled or not.      default: true
    zoomEnabled: boolean    // whether the zoom is enabled or not.     default: true
    minZoomLevel: number    // minimum zoom level.                     default: 0.1
    maxZoomLevel: number    // maximum zoom level.                     default: 64
    doubleClickZoomEnabled: boolean  // Whether to zoom with double click. default: true
    mouseWheelZoomEnabled:  boolean  // Whether to zoom with mouse wheel or not. default: true
    boxSelectionEnabled:    boolean
                            // Whether to enable box-selection with special key down.
                            // default: false
                            // * `node.selectable` must also be true.
                            // * The special key is specified in `view.selection.detector`
                            //   as a function with detection process.
    autoPanAndZoomOnLoad: false | "center-zero" | "center-content" | "fit-content"
                            // whether to automatically perform pan and zoom on loading.
                            // - false: do not perform pan and zoom
                            // - "center-zero"    : perform pan to center the (0, 0)
                            // - "center-content" : perform pan to center the content
                            // - "fit-content"    : perform pan and zoom to fit the content
                            // default: "center-content"
    fitContentMargin:     number | "${number}%" | "${number}px"
                          | {
                              top?:    number | `${number}%` | `${number}px`,
                              left?:   number | `${number}%` | `${number}px`,
                              right?:  number | `${number}%` | `${number}px`,
                              bottom?: number | `${number}%` | `${number}px`
                            }
                            // Margin to be applied when "fit-content" is set to
                            // autoPanAndZoomOnLoad. default: "8%"
    autoPanOnResize: boolean // whether to pan automatically to keep the center when
                             // resizing. default: true
    layoutHandler: LayoutHandler // class to control node layout. default: new SimpleLayout()
    onSvgPanZoomInitialized: undefined | (instance) => void
                               // callback on init svg-pan-zoom. default: undefined
    grid: {
      visible: boolean         // whether to show the grid in the background. default: false
      interval: number         // grid line spacing.                          default: 10
      thickIncrements: number  // increments of ticks to draw thick lines.    default: 5
      line: {                  // normal line style.
        color: string          //   default: "#e0e0e0"
        width: number          //   default: 1
        dasharray: string | number //   default: 1
      }
      thick: {                 // thick line style.
        color: string          //   default: "#cccccc"
        width: number          //   default: 1
        dasharray: string | number //   default: 0
      }
    }
    selection: {
      box: {
        color: string         //   background color. default: "#0000ff20"
        strokeWidth: number   //   stroke width. default: 1
        strokeColor: string   //   stroke color. default: "#aaaaff"
        strokeDasharray: string | number  // stroke dasharray. default: 0
      }
      detector: (event: KeyboardEvent) => boolean
          // process for detecting special key down and up, to be used if
          // `boxSelectionEnabled` is true.
          // The argument is passed the keydown and keyup events. By returning
          // true for each, it is assumed that a down/up event has occurred
          // with the key.
          // default:
          //   Process to detect Ctrl key down/up (If Mac OS, detect Cmd key).
    }
    builtInLayerOrder: LayerName[]
        // built-in layers which are to be reordered.
        // default: [] (Display in default order)
    onBeforeInitialDisplay: (() => Promise<any>) | (() => any) | undefined
        // hook called before initial display. default: undefined
  }
}
```

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

### Get Current Pan Vector

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/reference/methods.md

Retrieves the current pan vector (x, y) of the graph.

```typescript
getPan(): {x, y}
```

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

### Get Graph Dimensions

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/reference/methods.md

Retrieves all calculated SVG dimensions, including width, height, and viewBox details.

```typescript
getSizes(): Sizes
```

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

### path:click

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/reference/events.md

Fired when a path is clicked.

```APIDOC
## Event: path:click

### Description
Fired when a path is clicked.

### Data Payload
```json
{ "path": Path, "event": MouseEvent }
```

Note: When a double click occurs, this event is fired twice. The `event.detail` property can be used to identify the second click of a double click.
```

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

### getAsSvg

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/reference/methods.md

Deprecated method to get the network graph's content as SVG text data. Use `exportAsSvgText` instead.

```APIDOC
## getAsSvg(): string

### Description
Deprecated: Get the network-graph contents as SVG text data. Use `exportAsSvgText` instead.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// Deprecated usage
const svgText = graph.getAsSvg();
```

### Response
#### Success Response (string)
- **svgText** (string) - The SVG content as a text string.
```

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

### startBoxSelection

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/reference/methods.md

Initiates the box-selection mode, allowing users to select nodes within a dragged rectangle. Options can be provided to control the selection behavior, such as when the mode stops, the type of selection (append or invert), and how shift-key interactions are handled.

```APIDOC
## startBoxSelection(options: BoxSelectionOption): void

### Description
Start the box-selection mode to select nodes within the dragged rectangle range.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **options** (BoxSelectionOption) - Required - Options for the box selection mode.
  - **stop** (string) - Optional - Trigger to stop mode (default: "pointerup"). Can be "pointerup", "click", or "manual".
  - **type** (string) - Optional - Selection type (default: "append"). Can be "append" or "invert".
  - **withShiftKey** (string) - Optional - Selection type if shift key pressed at drag start (default: "same"). Can be "append", "invert", or "same".

### Request Example
```javascript
graph.startBoxSelection({ stop: 'click', type: 'invert' });
```

### Response
#### Success Response (void)
This method does not return a value.
```

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

### path:contextmenu

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/reference/events.md

Fired when the context menu is triggered on a path (e.g., right-click).

```APIDOC
## Event: path:contextmenu

### Description
Fired when the context menu is triggered on a path (e.g., right-click).

### Data Payload
```json
{ "path": Path, "event": MouseEvent }
```
```

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

### Import v-network-graph in a Vue Component

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/getting-started.md

Alternatively, you can import and use v-network-graph directly within a specific Vue component without global setup.

```vue
<!-- YourVueComponent.vue -->
<script setup lang="ts">
  import { VNetworkGraph } from "v-network-graph"
  import "v-network-graph/lib/style.css"
  ...
</script>
```

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

### path:dblclick

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/reference/events.md

Fired when a path is double-clicked.

```APIDOC
## Event: path:dblclick

### Description
Fired when a path is double-clicked.

### Data Payload
```json
{ "path": Path, "event": MouseEvent }
```

Note: This event is part of the double-click detection. The `event.detail` property can be used to identify the second click.
```

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

### path:pointerup

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/reference/events.md

Fired when a pointer button is released on a path.

```APIDOC
## Event: path:pointerup

### Description
Fired when a pointer button is released on a path.

### Data Payload
```json
{ "path": PATH_ID, "event": PointerEvent }
```
```

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

### DOM to SVG Coordinate Translation

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/misc.md

Translate DOM coordinates to SVG coordinates for precise element placement. This example demonstrates adding a new node at a clicked position.

```vue
const onClick = (event: MouseEvent) => {
  const { x, y } = graph.value.svgToDom(event.offsetX, event.offsetY)
  addNode(x, y)
}
```

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

### Animating Paths

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/paths.md

Shows how to animate paths, similar to how edges can be animated. This can be used to visualize flow or movement along a path.

```vue
<template>
  <NetworkGraph :nodes="nodes" :edges="edges" :paths="paths" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const nodes = ref([{ id: 'a' }, { id: 'b' }, { id: 'c' }])
const edges = ref([
  { id: 1, source: 'a', target: 'b' },
  { id: 2, source: 'b', target: 'c' },
])
const paths = ref([
  { id: 'path1', edges: [1, 2], animated: true },
])
</script>
```

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

### Get and Set Viewing Area

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/misc.md

Retrieve the current viewing area's coordinates and set a new viewing area. The component automatically calculates zoom and pan for the specified area.

```vue
const graph = ref<VNetworkGraph>(null)

const saveView = () => {
  const viewBox = graph.value.getViewBox()
  // save viewBox
}

const restoreView = () => {
  const viewBox = {
    x: 100,
    y: 100,
    width: 200,
    height: 200
  }
  graph.value.setViewBox(viewBox)
}
```

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

### edge:select

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/reference/events.md

Fired when an edge is selected.

```APIDOC
## Event: edge:select

### Description
Fired when an edge is selected.

### Data Payload
```json
[ EDGE_ID, ... ]
```
```

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

### Find Shortest Path with Dijkstra's Algorithm

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/misc.md

Integrate external graph algorithms, such as Dijkstra's, to find the shortest path. The library visualizes the path provided as a list of edges. Edge labels can represent costs.

```javascript
const dijkstra = require('npm:dijkstrajs')

const graph = new DijkstraGraph()
// ... add nodes and edges with costs ...

const path = dijkstra.findShortestPath(graph, 'source', 'target')
const pathEdges = []
for (let i = 0; i < path.length - 1; i++) {
  pathEdges.push({ source: path[i], target: path[i + 1] })
}

// ... pass pathEdges to v-network-graph ...

```

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

### Snap Nodes to Grid

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/layout.md

Configure the `view.layoutHandler` to snap nodes to an invisible grid when dragging. This provides a structured way to position nodes, with the grid width determined by the configuration.

```javascript
view.layoutHandler = "grid";
```

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

### path:pointerover

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/reference/events.md

Fired when a pointer moves over a path.

```APIDOC
## Event: path:pointerover

### Description
Fired when a pointer moves over a path.

### Data Payload
```json
{ "path": PATH_ID, "event": PointerEvent }
```
```

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

### edge:pointerup

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/reference/events.md

Fired when a pointer button is released on an edge.

```APIDOC
## Event: edge:pointerup

### Description
Fired when a pointer button is released on an edge.

### Data Payload
```json
{ "edge": EDGE_ID, "edges": [EDGE_ID], "event": PointerEvent, "summarized": false }
```

For summarized edges:
```json
{ "edges": [EDGE_ID, ...], "event": PointerEvent, "summarized": true }
```
```

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

### Vue Component for Modifying Edge Label Styles on Hover/Select

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/labels.md

This example illustrates how to dynamically modify edge label styles based on hover and selection states. It utilizes the flags provided by the edge-label slot prop.

```vue
<template v-slot:demo>
  <DemoModifyEdgeLabelStyle />
</template>
<template v-slot:source>

  <<< @/.vitepress/components/04_label/07/ModifyEdgeLabelStyle.vue{29,31,42-53}

</template>
<template v-slot:data>

  <<< @/.vitepress/components/04_label/07/data.ts

</template>
```

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

### path:pointerdown

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/reference/events.md

Fired when a pointer button is pressed down on a path.

```APIDOC
## Event: path:pointerdown

### Description
Fired when a pointer button is pressed down on a path.

### Data Payload
```json
{ "path": PATH_ID, "event": PointerEvent }
```
```

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

### path:pointerout

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/reference/events.md

Fired when a pointer moves out of a path.

```APIDOC
## Event: path:pointerout

### Description
Fired when a pointer moves out of a path.

### Data Payload
```json
{ "path": PATH_ID, "event": PointerEvent }
```
```

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

### Node Configuration Options

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/reference/configurations.md

Configure the appearance and behavior of nodes in the graph.

```typescript
{
  node: {
    normal: {
      // * These fields can also be specified with the function as `(node: Node) => value`.
      type: "circle" | "rect"  // shape type.            default: "circle"
      radius: number           // radius of circle.      default: 16
      width: number            // width of rect.         default: (not specified)

```

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

### fitToContents

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/reference/methods.md

Performs zooming and panning to fit the entire graph within the view, with an optional margin. If no margin is specified, it uses the default configuration. The FitOptions object can specify a margin, which can be a number, a percentage string, or a pixel string, and can be applied to all sides or individually.

```APIDOC
## fitToContents(options?: FitOptions): void

### Description
Perform zooming/panning according to the graph size.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **options** (FitOptions) - Optional - Options for fitting the content. `FitOptions` can be `{ margin?: FitContentMargin }`.
  `FitContentMargin` can be `number | "${number}%" | "${number}px"` or an object with optional `top`, `left`, `right`, `bottom` properties of the same types.

### Request Example
```javascript
// Example with default margin
graph.fitToContents()

// Example with custom margin
graph.fitToContents({ margin: '10%' })

// Example with specific margins
graph.fitToContents({ margin: { top: 50, right: '5%' } })
```

### Response
#### Success Response (void)
This method does not return a value.
```

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

### Basic Path Representation

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/paths.md

Demonstrates the fundamental way to define and display a path in a network graph using a list of edge IDs. Ensure your data includes edge IDs for path definition.

```vue
<template>
  <NetworkGraph :nodes="nodes" :edges="edges" :paths="paths" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const nodes = ref([
  { id: 'a' }, { id: 'b' }, { id: 'c' }, { id: 'd' },
])
const edges = ref([
  { id: 1, source: 'a', target: 'b' },
  { id: 2, source: 'b', target: 'c' },
  { id: 3, source: 'c', target: 'd' },
])
const paths = ref([
  { id: 'path1', edges: [1, 2] },
  { id: 'path2', edges: [2, 3] },
])
</script>
```

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

### Specify Function in View Config

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/misc.md

Use JavaScript getters to specify functions for view properties, enabling dynamic behavior based on runtime conditions. This is useful for properties like panning/zooming.

```javascript
get enablePanning() {
  return !this.shiftKey && !this.ctrlKey
}
```

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

### Configure Node and Edge Appearance by Value

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/appearance.md

Specify style configurations for nodes and edges using concrete values. This is suitable for static styling where appearance does not depend on node or edge properties.

```vue
<template>
  <v-network-graph :nodes="nodes" :edges="edges" :layouts="{}" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const nodes = ref({
  node1: {
    name: 'Node 1',
    // Specify node style by value
    style: {
      fill: '#1E90FF',
      stroke: '#000000',
      strokeWidth: 1,
      fillOpacity: 1,
      strokeOpacity: 1,
    },
  },
  node2: {
    name: 'Node 2',
    style: {
      fill: '#FFD700',
      stroke: '#000000',
      strokeWidth: 1,
      fillOpacity: 1,
      strokeOpacity: 1,
    },
  },
})

const edges = ref({
  edge1: {
    source: 'node1',
    target: 'node2',
    // Specify edge style by value
    style: {
      stroke: '#FF0000',
      strokeWidth: 2,
      strokeOpacity: 1,
    },
  },
})
</script>
```

```typescript
export const nodes = {
  node1: {
    name: 'Node 1',
    style: {
      fill: '#1E90FF',
      stroke: '#000000',
      strokeWidth: 1,
      fillOpacity: 1,
      strokeOpacity: 1,
    },
  },
  node2: {
    name: 'Node 2',
    style: {
      fill: '#FFD700',
      stroke: '#000000',
      strokeWidth: 1,
      fillOpacity: 1,
      strokeOpacity: 1,
    },
  },
}

export const edges = {
  edge1: {
    source: 'node1',
    target: 'node2',
    style: {
      stroke: '#FF0000',
      strokeWidth: 2,
      strokeOpacity: 1,
    },
  },
}
```

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

### Paths on Curved Edges

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/paths.md

Demonstrates drawing paths that follow the curvature of edges. This is useful for visualizing paths on graphs where edges are not straight lines.

```vue
<template>
  <NetworkGraph :nodes="nodes" :edges="edges" :paths="paths" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const nodes = ref([{ id: 'a' }, { id: 'b' }])
const edges = ref([
  { id: 1, source: 'a', target: 'b', curve: 0.5 },
])
const paths = ref([
  { id: 'path1', edges: [1] },
])
</script>
```

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

### edge:contextmenu

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/reference/events.md

Fired when the context menu is triggered on an edge (e.g., right-click).

```APIDOC
## Event: edge:contextmenu

### Description
Fired when the context menu is triggered on an edge (e.g., right-click).

### Data Payload
Not summarized edge:
```json
{ "edge": EDGE_ID, "edges": [EDGE_ID], "event": MouseEvent, "summarized": false }
```

Summarized edge:
```json
{ "edges": [EDGE_ID, ...], "event": MouseEvent, "summarized": true }
```
```

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

### Style 4: Custom Node with Image

Source: https://github.com/dash14/v-network-graph-docs/blob/main/docs/examples/appearance.md

Demonstrates how to use an image as a node's appearance. This is useful for representing entities with specific icons or avatars.

```vue
<template>
  <Graph :nodes="nodes" :edges="edges" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const nodes = ref([
  { id: 'a', label: 'User 1', icon: 'path/to/user-icon.png' },
  { id: 'b', label: 'Server', icon: 'path/to/server-icon.png' },
])

const edges = ref([
  { id: 'ab', source: 'a', target: 'b' },
])
</script>
```

```typescript
export const nodes = [
  { id: 'a', label: 'User 1', icon: 'path/to/user-icon.png' },
  { id: 'b', label: 'Server', icon: 'path/to/server-icon.png' },
]

export const edges = [
  { id: 'ab', source: 'a', target: 'b' },
]
```