Layers

Custom layer

You can add layers in the SVG generated by v-network-graph.

To add a layer, define the layer name and insertion position in the layers attribute, and define a named slot with the specified layer name in <v-network-graph> ... </v-network-graph>.

The following insertion positions can be specified.

position	description
"paths"	above the paths
"node-labels"	above the node labels
"nodes"	above the nodes
"focusring"	above the selection circles of the nodes
"edge-labels"	above the edge labels
"edges"	above the edges
"base"	under all objects
-	(When you get SVG text, layers above this will be contained)
"grid"	above the grid
"background"	under the grid
-	(The layer below this is not target to panning/zooming)
"root"	the root of the svg element

The default slot and any slots not defined in the layers will be included in the root.

Map

This is an example of adding an image layer to the behind of a network graph.

<script setup lang="ts">
import { ref } from "vue"
import * as vNG from "v-network-graph"
import { withBase } from "vitepress"
import data from "./data"

// additional layers definition
const layers = {
  // {layername}: {position}
  worldmap: "base",
}

// ref="graph"
const graph = ref<vNG.Instance>()

function onLoadImage() {
  graph.value?.fitToContents()
}
</script>

<template>
  <v-network-graph
    ref="graph"
    :nodes="data.nodes"
    :edges="data.edges"
    :layouts="data.layouts"
    :configs="data.configs"
    :layers="layers"
  >
    <!-- Additional layer -->
    <template #worldmap>
      <image
        :href="withBase('/worldmap.svg')"
        x="0"
        y="0"
        width="1000px"
        @load="onLoadImage"
      />
    </template>
  </v-network-graph>
</template>

import { Nodes, Edges, Layouts, defineConfigs } from "v-network-graph"

const nodes: Nodes = {
  node1: {},
  node2: {},
  node3: {},
  node4: {},
  node5: {},
  node6: {},
  node7: {},
  node8: {},
  node9: {},
  node10: {},
}

const edges: Edges = {
  edge1: { source: "node1", target: "node2" },
  edge2: { source: "node2", target: "node3" },
  edge3: { source: "node10", target: "node2" },
  edge4: { source: "node5", target: "node2" },
  edge5: { source: "node2", target: "node4" },
  edge6: { source: "node6", target: "node4" },
  edge7: { source: "node8", target: "node7" },
  edge8: { source: "node7", target: "node1" },
  edge9: { source: "node9", target: "node6" },
  edge10: { source: "node7", target: "node9" },
  edge11: { source: "node7", target: "node6" },
  edge12: { source: "node9", target: "node2" },
  edge13: { source: "node1", target: "node9" },
  edge14: { source: "node3", target: "node5" },
  edge15: { source: "node10", target: "node4" },
  edge16: { source: "node1", target: "node8" },
}

const layouts: Layouts = {
  nodes: {
    node1: { x: 365, y: 39 },
    node2: { x: 642, y: 161 },
    node3: { x: 802, y: 243 },
    node4: { x: 513, y: 307 },
    node5: { x: 809, y: 85 },
    node6: { x: 328, y: 385 },
    node7: { x: 226, y: 193 },
    node8: { x: 82, y: 110 },
    node9: { x: 486, y: 191 },
    node10: { x: 854, y: 428 },
  },
}

const configs = defineConfigs({
  node: {
    normal: {
      type: "circle",
      radius: 8,
      color: "#4466cc",
    },
    label: {
      visible: false,
    },
  },
})

export default {
  nodes,
  edges,
  layouts,
  configs,
}

Node's badge

This is an example of adding an SVG layer to the foreground of the nodes layer.

<script setup lang="ts">
import { ref } from "vue"
import data from "./data"

// additional layers definition
const layers = {
  // {layername}: {position}
  badge: "nodes",
}

// wrap with ref() for immediate response to value changes
const layouts = ref(data.layouts)
</script>

<template>
  <v-network-graph
    :nodes="data.nodes"
    :edges="data.edges"
    :layouts="layouts"
    :configs="data.configs"
    :layers="layers"
  >
    <!-- Additional layer -->
    <template #badge="{ scale }">
      <!--
        If the `view.scalingObjects` config is `false`(default),
        scaling does not change the display size of the nodes/edges.
        The `scale` is passed as a scaling factor to implement
        this behavior. -->
      <circle
        v-for="(pos, node) in layouts.nodes"
        :key="node"
        :cx="pos.x + 9 * scale"
        :cy="pos.y - 9 * scale"
        :r="4 * scale"
        :fill="data.nodes[node].active ? '#00cc00' : '#ff5555'"
        style="pointer-events: none"
      />
    </template>
  </v-network-graph>
</template>

import { Nodes, Edges, Layouts, defineConfigs } from "v-network-graph"

const nodes: Nodes = {
  node1: { name: "Node 1", active: true },
  node2: { name: "Node 2", active: false },
  node3: { name: "Node 3", active: true },
  node4: { name: "Node 4", active: false },
}

const edges: Edges = {
  edge1: { source: "node1", target: "node2" },
  edge2: { source: "node2", target: "node3" },
  edge3: { source: "node3", target: "node4" },
}

const layouts: Layouts = {
  nodes: {
    node1: { x: 0, y: 0 },
    node2: { x: 80, y: 80 },
    node3: { x: 160, y: 0 },
    node4: { x: 240, y: 80 },
  },
}

const configs = defineConfigs({
  node: {
    normal: {
      type: "rect",
      width: 32,
      height: 32,
      borderRadius: 6,
      color: "#ffffff",
      strokeWidth: 1,
      strokeColor: "#888888",
    },
    hover: {
      color: "#eeeeee",
    },
  },
  edge: {
    normal: {
      width: 1,
      color: "#666666",
    },
    hover: {
      color: "#666666",
    },
  },
})

export default {
  nodes,
  edges,
  layouts,
  configs,
}

Change the order of built-in layers

The following is a list of the built-in layers of this library and the layers of which the order can be changed.
The higher layer is on the list, the more it appears in the foreground by default.

layer name	order changeable
"paths"	YES
"node-labels"	YES
"nodes"	YES
"focusring"	YES
"edge-labels"	YES
"edges"	YES
"grid"	NO

To change the order, specify the layer names in configs.view.builtInLayerOrder array in the order you want them in the front. It is not necessary to specify all the built-in layer names. Layer relationships not specified are the same as the default.
For example, if you specify ["node-labels", "paths"], the "node-labels" layer will be configured so that it is directly above the "paths" layer.

<script setup lang="ts">
import { reactive, ref, watch } from "vue"
import { defineConfigs, VNetworkGraphInstance } from "v-network-graph"
import data from "./data"

const graph = ref<VNetworkGraphInstance>()

const nodeLabelsToForefront = ref(true)

const initialConfig = defineConfigs({
  view: {
    builtInLayerOrder: ["node-labels", "paths"],
  },
  node: {
    selectable: true,
    label: {
      margin: 6,
      background: {
        visible: true,
        color: "#ccddff",
        padding: {
          vertical: 2,
          horizontal: 6,
        },
        borderRadius: 4,
      },
    },
  },
  path: {
    visible: true,
    path: {
      width: 10,
      color: "#eeaa88aa",
    },
    curveInNode: true,
  },
})
const configs = reactive(initialConfig)

watch(nodeLabelsToForefront, v => {
  configs.view.builtInLayerOrder = v ? ["node-labels", "paths"] : []
})
</script>

<template>
  <div class="demo-control-panel">
    <el-checkbox v-model="nodeLabelsToForefront">Set node labels to the forefront</el-checkbox>
  </div>

  <v-network-graph
    ref="graph"
    :nodes="data.nodes"
    :edges="data.edges"
    :paths="data.paths"
    :layouts="data.layouts"
    :configs="configs"
  />
</template>

import { Nodes, Edges, Layouts, Paths } from "v-network-graph"

const nodes: Nodes = {
  node1: { name: "Node 001" },
  node2: { name: "Node 002" },
  node3: { name: "Node 003" },
  node4: { name: "Node 004" },
  node5: { name: "Node 005" },
  node6: { name: "Node 006" },
}

const edges: Edges = {
  edge1: { source: "node1", target: "node2" },
  edge2: { source: "node2", target: "node3" },
  edge3: { source: "node2", target: "node4" },
  edge4: { source: "node4", target: "node5" },
  edge5: { source: "node4", target: "node6" },
}

const paths: Paths = {
  path1: {
    edges: ["edge1", "edge3", "edge4"]
  }
}

const layouts: Layouts = {
  nodes: {
    node1: { x: 0, y: 0 },
    node2: { x: 80, y: 80 },
    node3: { x: 0, y: 160 },
    node4: { x: 240, y: 80 },
    node5: { x: 320, y: 0 },
    node6: { x: 320, y: 160 },
  },
}

export default {
  nodes,
  edges,
  paths,
  layouts,
}