### Install v-network-graph and d3-force Source: https://context7.com/dash14/v-network-graph/llms.txt Install the v-network-graph package using npm. d3-force is an optional peer dependency required only for the ForceLayout. ```bash npm install v-network-graph # d3-force is an optional peer dependency needed only for ForceLayout npm install d3-force ``` -------------------------------- ### Install v-network-graph with npm Source: https://github.com/dash14/v-network-graph/blob/main/README.md Install the v-network-graph package using npm. This command is typically run in your project's root directory. ```sh npm install v-network-graph ``` -------------------------------- ### Setup v-network-graph in main.ts Source: https://github.com/dash14/v-network-graph/blob/main/README.md Integrate v-network-graph into your Vue 3 application by importing the library and its CSS, then using it with createApp. Ensure this is done before mounting your app. ```ts // 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") ``` -------------------------------- ### Implement Custom Circle Layout Handler Source: https://context7.com/dash14/v-network-graph/llms.txt Create a custom layout by implementing the LayoutHandler interface. This example arranges nodes in a circle. Ensure to import necessary types from 'v-network-graph'. ```typescript import type { LayoutHandler, LayoutActivateParameters } from "v-network-graph" class CircleLayout implements LayoutHandler { activate({ nodePositions, nodes }: LayoutActivateParameters): void { const ids = Object.keys(nodes.value) const n = ids.length ids.forEach((id, i) => { const angle = (2 * Math.PI * i) / n nodePositions.value[id] = { x: Math.cos(angle) * 200, y: Math.sin(angle) * 200, } }) } deactivate(): void {} } const configs = defineConfigs({ view: { layoutHandler: new CircleLayout() }, }) ``` -------------------------------- ### Get Full Configuration Object Source: https://context7.com/dash14/v-network-graph/llms.txt Use getFullConfigs to merge a partial user config with defaults. Useful for inspecting resolved values. ```typescript import { getFullConfigs } from "v-network-graph" const full = getFullConfigs({ node: { normal: { radius: 20, color: "#ff0000" } }, }) console.log(full.view.minZoomLevel) // 0.1 console.log(full.view.maxZoomLevel) // 64 console.log(full.edge.type) // "straight" console.log(full.node.label.direction) // "south" ``` -------------------------------- ### Import Core Types from v-network-graph Source: https://context7.com/dash14/v-network-graph/llms.txt Imports all core types for graph data, layout, layers, events, configurations, and component instances from the 'v-network-graph' library. Ensure this library is installed. ```typescript import type { // Graph data Node, Nodes, Edge, Edges, Path, Paths, InputPaths, // Layout Position, FixablePosition, NodePositions, Layouts, UserLayouts, // Layers Layers, LayerPosition, LayerName, // Events Events, EventHandlers, NodeEvent, EdgeEvent, PathEvent, ViewEvent, // Config types Configs, UserConfigs, ViewConfig, NodeConfig, EdgeConfig, PathConfig, ShapeStyle, StrokeStyle, MarkerStyle, LabelStyle, NodeLabelStyle, // Enums NodeLabelDirection, ViewMode, // Component instance VNetworkGraphInstance, Instance, Box, Sizes, Point, // Layout handler LayoutHandler, LayoutActivateParameters, } from "v-network-graph" ``` -------------------------------- ### Basic v-network-graph Usage Source: https://github.com/dash14/v-network-graph/blob/main/README.md Implement a basic network graph by defining nodes and edges in your Vue component's script setup and rendering them using the v-network-graph component in the template. Styles can be applied via CSS. ```vue ``` -------------------------------- ### Initialize with GridLayout Source: https://context7.com/dash14/v-network-graph/llms.txt Use new GridLayout({ grid: 20 }) to snap node positions to a pixel grid on drag. Extends SimpleLayout. ```typescript import { defineConfigs, GridLayout } from "v-network-graph" const configs = defineConfigs({ view: { layoutHandler: new GridLayout({ grid: 20 }), // snap to 20px grid }, }) ``` -------------------------------- ### ForceLayout Configuration Source: https://context7.com/dash14/v-network-graph/llms.txt Demonstrates how to import and configure the ForceLayout for physics-based node positioning. It requires the 'd3-force' peer dependency. ```APIDOC ## ForceLayout Configuration Physics-based force-directed layout using `d3-force`. Requires the optional peer dependency `d3-force`. Nodes settle into stable positions automatically. ```ts // Import from the separate sub-path to keep d3-force out of the main bundle import { ForceLayout } from "v-network-graph/lib/force-layout" import { defineConfigs } from "v-network-graph" const configs = defineConfigs({ view: { layoutHandler: new ForceLayout({ positionFixedByDrag: false, // unpin nodes after drag positionFixedByClickWithAltKey: true, // Alt+click to pin/unpin noAutoRestartSimulation: false, // restart on graph changes createSimulation: (d3, nodes, edges) => { // Custom d3-force simulation const forceLink = d3.forceLink(edges).id((d: any) => d.id).distance(120) return d3 .forceSimulation(nodes) .force("edge", forceLink) .force("charge", d3.forceManyBody().strength(-400)) .force("center", d3.forceCenter()) .alphaMin(0.001) }, }), }, }) ``` ``` -------------------------------- ### Initialize with SimpleLayout Source: https://context7.com/dash14/v-network-graph/llms.txt Set the layoutHandler in configs.view to new SimpleLayout() for the default layout. Places nodes at the center and avoids collisions. ```typescript import { defineConfigs, SimpleLayout } from "v-network-graph" const configs = defineConfigs({ view: { layoutHandler: new SimpleLayout(), }, }) ``` -------------------------------- ### Custom LayoutHandler Implementation Source: https://context7.com/dash14/v-network-graph/llms.txt Shows how to implement the `LayoutHandler` interface to create a custom layout algorithm, such as a circular layout. ```APIDOC ## Custom `LayoutHandler` Implement the `LayoutHandler` interface to build fully custom layout logic. ```ts import type { LayoutHandler, LayoutActivateParameters } from "v-network-graph" class CircleLayout implements LayoutHandler { activate({ nodePositions, nodes }: LayoutActivateParameters): void { const ids = Object.keys(nodes.value) const n = ids.length ids.forEach((id, i) => { const angle = (2 * Math.PI * i) / n nodePositions.value[id] = { x: Math.cos(angle) * 200, y: Math.sin(angle) * 200, } }) } deactivate(): void {} } const configs = defineConfigs({ view: { layoutHandler: new CircleLayout() }, }) ``` ``` -------------------------------- ### Basic v-network-graph Component Usage Source: https://context7.com/dash14/v-network-graph/llms.txt Demonstrates the basic usage of the `` component with nodes, edges, layouts, configurations, and event handlers. Supports v-model bindings for selected nodes and zoom level. ```vue ``` -------------------------------- ### Define Node and Edge Configurations Source: https://context7.com/dash14/v-network-graph/llms.txt Use defineConfigs to create typed partial configurations for nodes and edges. Supports literal values or functions for dynamic styling based on node/edge properties. ```typescript import { defineConfigs } from "v-network-graph" import type { Node, Edge } from "v-network-graph" interface MyNode extends Node { type: "server" | "client" | "gateway" active: boolean } interface MyEdge extends Edge { latency: number } const configs = defineConfigs({ view: { scalingObjects: true, zoomEnabled: true, minZoomLevel: 0.2, maxZoomLevel: 16, autoPanAndZoomOnLoad: "fit-content", fitContentMargin: "10%", grid: { visible: true, interval: 20, thickIncrements: 5, line: { color: "#e8e8e8", width: 1, dasharray: 1 }, thick: { color: "#cccccc", width: 1 }, }, }, node: { normal: { type: "circle", radius: node => node.type === "gateway" ? 24 : 16, color: node => { if (!node.active) return "#aaaaaa" return node.type === "server" ? "#4466cc" : node.type === "gateway" ? "#cc4444" : "#44aa66" }, strokeWidth: 2, strokeColor: node => node.active ? "#ffffff" : "#888888", }, draggable: true, selectable: true, label: { visible: true, fontSize: 11, direction: "south", directionAutoAdjustment: true, text: node => node.name ?? "", }, focusring: { visible: true, width: 4, padding: 3, color: "#ffcc00" }, zOrder: { enabled: true, bringToFrontOnHover: true, bringToFrontOnSelected: true, zIndex: 0 }, }, edge: { normal: { width: edge => Math.max(1, 5 - edge.latency / 20), color: edge => edge.latency > 100 ? "#ff4444" : "#4466cc", dasharray: 0, linecap: "round", }, type: "curve", gap: 6, marker: { target: { type: "arrow", width: 4, height: 4, margin: -1, offset: 0, units: "strokeWidth", color: null }, source: { type: "none", width: 4, height: 4, margin: -1, offset: 0, units: "strokeWidth", color: null }, }, selectable: true, label: { fontSize: 10, color: "#555", margin: 4, padding: 4 }, }, path: { visible: true, clickable: true, hoverable: true, end: "edgeOfNode", normal: { width: 8, color: "#2962ff88", linecap: "round", linejoin: "round", animate: false, animationSpeed: 50 }, hover: { width: 10, color: "#2962ffaa", linecap: "round", linejoin: "round", animate: false, animationSpeed: 50 }, selectable: true, }, }) ``` -------------------------------- ### Configure Force-Directed Layout with d3-force Source: https://context7.com/dash14/v-network-graph/llms.txt Use the ForceLayout for physics-based node positioning. Import from the separate sub-path to keep d3-force out of the main bundle. Customize the d3-force simulation by providing a createSimulation function. ```typescript // Import from the separate sub-path to keep d3-force out of the main bundle import { ForceLayout } from "v-network-graph/lib/force-layout" import { defineConfigs } from "v-network-graph" const configs = defineConfigs({ view: { layoutHandler: new ForceLayout({ positionFixedByDrag: false, // unpin nodes after drag positionFixedByClickWithAltKey: true, // Alt+click to pin/unpin noAutoRestartSimulation: false, // restart on graph changes createSimulation: (d3, nodes, edges) => { // Custom d3-force simulation const forceLink = d3.forceLink(edges).id((d: any) => d.id).distance(120) return d3 .forceSimulation(nodes) .force("edge", forceLink) .force("charge", d3.forceManyBody().strength(-400)) .force("center", d3.forceCenter()) .alphaMin(0.001) }, }), }, }) ``` -------------------------------- ### Create Self-Referential Configurations Source: https://context7.com/dash14/v-network-graph/llms.txt Use withSelf to create configuration objects where later fields can reference earlier fields. Avoids repetition for hover/selected states derived from normal state. ```typescript import { withSelf, defineConfigs } from "v-network-graph" const configs = defineConfigs({ node: withSelf(self => ({ normal: { type: "circle", radius: 16, color: "#4466cc", strokeWidth: 0, strokeColor: "#000" }, hover: { radius: node => (self.normal.radius as number) + 4, color: "#2244aa", }, selected: { radius: node => (self.normal.radius as number) + 4, color: "#ff8800", strokeWidth: 2, strokeColor: "#cc6600", }, draggable: true, selectable: true, })), }) ``` -------------------------------- ### Component Instance Methods Source: https://context7.com/dash14/v-network-graph/llms.txt Details the methods available on the VNetworkGraph component instance, accessed via a template ref, for controlling view, zoom, pan, and exporting SVG. ```APIDOC ## Component Instance Methods Obtained via a template ref on ``. All methods are exposed through `defineExpose`. ```vue ``` ``` -------------------------------- ### Defining and Configuring Paths Source: https://context7.com/dash14/v-network-graph/llms.txt Paths are defined by referencing edge IDs in sequence. Use `defineConfigs` to customize path appearance for normal, hover, and selected states. ```vue ``` -------------------------------- ### Control Graph Viewport and Export SVG Source: https://context7.com/dash14/v-network-graph/llms.txt Utilize component instance methods to manipulate the graph's view and export its content. Obtain the instance via a template ref. Methods include fitting to content, panning, zooming, and translating coordinates. ```vue ``` -------------------------------- ### Per-component Registration of v-network-graph Source: https://context7.com/dash14/v-network-graph/llms.txt Register the v-network-graph component on a per-component basis for tree-shaking benefits. Remember to import the component and its CSS. ```typescript // Per-component registration (tree-shakeable) import { VNetworkGraph } from "v-network-graph" import "v-network-graph/lib/style.css" ``` -------------------------------- ### Handling Graph Events with eventHandlers Source: https://context7.com/dash14/v-network-graph/llms.txt Use the `eventHandlers` prop to map event names to callback functions. All events are typed, and a catch-all handler `*` can capture any event. ```vue ``` -------------------------------- ### Import ForceLayout Types Source: https://context7.com/dash14/v-network-graph/llms.txt Imports specific types for the ForceLayout, such as parameters and data structures for nodes and edges. This import is separate from the core types. ```typescript // ForceLayout types (separate import) import type { ForceLayoutParameters, ForceNodeDatum, ForceEdgeDatum } from "v-network-graph/lib/force-layout" ``` -------------------------------- ### Global Registration of v-network-graph Source: https://context7.com/dash14/v-network-graph/llms.txt Register the v-network-graph component globally in your Vue application's main entry file. Ensure to import the necessary CSS. ```typescript // main.ts – global registration 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) // registers globally app.mount("#app") ``` -------------------------------- ### Nuxt 3 CSS Configuration Source: https://github.com/dash14/v-network-graph/blob/main/README.md Add the v-network-graph CSS to your Nuxt 3 project by including it in the `css` array within `nuxt.config.ts`. This ensures the component's styles are loaded. ```ts // nuxt.config.ts import { defineNuxtConfig } from "nuxt3" // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config export default defineNuxtConfig({ css: ["v-network-graph/lib/style.css"], }) ``` -------------------------------- ### Define Custom Layers in V-Network-Graph Source: https://context7.com/dash14/v-network-graph/llms.txt Map custom slot names to layer positions to control rendering order. Use 'nodes' for layers on top of nodes and 'background' for layers in the background. ```vue ``` -------------------------------- ### Nuxt 3 Plugin for v-network-graph Source: https://github.com/dash14/v-network-graph/blob/main/README.md Create a Nuxt 3 plugin to register v-network-graph with your Vue application. This allows the component to be used throughout your Nuxt project. ```ts // plugins/v-network-graph.ts import { defineNuxtPlugin } from "#app" import VNetworkGraph from "v-network-graph" export default defineNuxtPlugin(nuxtApp => { nuxtApp.vueApp.use(VNetworkGraph) }) ``` -------------------------------- ### Access V-Network-Graph Internal States with useStates Source: https://context7.com/dash14/v-network-graph/llms.txt The `useStates` composable provides read-only access to the graph's internal rendering states, such as node positions and edge geometries. It must be called within a component rendered as a slot child of VNetworkGraph. ```typescript ``` -------------------------------- ### Render Custom Edge Labels in V-Network-Graph Source: https://context7.com/dash14/v-network-graph/llms.txt Add custom labels to edges using the `edge-label` slot. This slot provides edge-specific data and props for positioning and styling the label component. ```vue ``` -------------------------------- ### Customize Node Labels in V-Network-Graph Source: https://context7.com/dash14/v-network-graph/llms.txt Modify the default node label by using the `override-node-label` slot. This allows for custom formatting and display of node information, including dynamic properties. ```vue ``` -------------------------------- ### Override Default Node Rendering in V-Network-Graph Source: https://context7.com/dash14/v-network-graph/llms.txt Replace the default node shape with a custom SVG element by using the `override-node` slot. This slot provides access to node data and rendering properties. ```vue ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.