Operations on Graphs

This page shows some examples of user operations on network graphs.

Select nodes

Set configs.node.selectable to true to make the node selectable by clicking or touching. If you specify a number instead of true, it will be taken as the maximum number of selectable nodes.
Specify 2-way binding for selected-nodes prop to get an array of node IDs selected. It is also possible to control the selection state on the network graph by setting a value to the same prop.

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

const selectedNodes = ref<string[]>([])

// If you want to change the configuration object later,
// you can use `getFullConfigs()` that can also get the
// type information of the configuration object.
const configs = reactive(vNG.getFullConfigs())

configs.node.selectable = true

const limit = ref(-1)
watch(limit, v => {
  selectedNodes.value = [] // reset
  switch (v) {
    case 0: // disabled
      configs.node.selectable = false
      break
    case 1: // limit
    case 2:
      configs.node.selectable = v
      break
    case -1: // unlimited
    default:
      configs.node.selectable = true
      break
  }
})
</script>

<template>
  <div class="demo-control-panel">
    <label>Selected:</label>
    <el-select
      v-model="selectedNodes"
      :disabled="limit === 0"
      multiple
      :multiple-limit="limit"
      placeholder="Select"
    >
      <el-option
        v-for="(node, key) in data.nodes"
        :key="key"
        :label="node.name"
        :value="key"
      />
    </el-select>

    <label>Limit:</label>
    <el-select v-model="limit">
      <el-option label="0 (disable)" :value="0" />
      <el-option label="1 node" :value="1" />
      <el-option label="2 nodes" :value="2" />
      <el-option label="unlimited" :value="-1" />
    </el-select>
  </div>

  <v-network-graph
    v-model:selected-nodes="selectedNodes"
    :nodes="data.nodes"
    :edges="data.edges"
    :layouts="data.layouts"
    :configs="configs"
  />
</template>

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

const nodes: Nodes = {
  node1: { name: "N1" },
  node2: { name: "N2" },
  node3: { name: "N3" },
}

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

const layouts: Layouts = {
  nodes: {
    node1: { x: 50, y: 0 },
    node2: { x: 0, y: 75 },
    node3: { x: 100, y: 75 },
  },
}

export default {
  nodes,
  edges,
  layouts,
}

Demo

Source

Data

TIP

It is also available to select nodes by enclosing them in a rectangle by dragging. See below for details.

Select edges

Set configs.edge.selectable to true to make the edge selectable by clicking or touching. If you specify a number instead of true, it will be taken as the maximum number of selectable edges.
Specify 2-way binding for selected-edges prop to get an array of edge IDs selected. It is also possible to control the selection state on the network graph by setting a value to the same prop.

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

const selectedEdges = ref<string[]>([])

// If you want to change the configuration object later,
// you can use `getFullConfigs()` that can also get the
// type information of the configuration object.
const configs = reactive(vNG.getFullConfigs())

configs.edge.selectable = true
configs.edge.normal.width = 3

const limit = ref(-1)
watch(limit, v => {
  selectedEdges.value = [] // reset
  switch (v) {
    case 0: // disabled
      configs.edge.selectable = false
      break
    case 1: // limit
    case 2:
      configs.edge.selectable = v
      break
    case -1: // unlimited
    default:
      configs.edge.selectable = true
      break
  }
})
</script>

<template>
  <div class="demo-control-panel">
    <label>Selected:</label>
    <el-select
      v-model="selectedEdges"
      :disabled="limit === 0"
      multiple
      :multiple-limit="limit"
      placeholder="Select"
    >
      <el-option
        v-for="(edge, key) in data.edges"
        :key="key"
        :label="`[${data.nodes[edge.source].name}=${data.nodes[edge.target].name}]`"
        :value="key"
      />
    </el-select>

    <label>Limit:</label>
    <el-select v-model="limit">
      <el-option label="0 (disable)" :value="0" />
      <el-option label="1 edge" :value="1" />
      <el-option label="2 edges" :value="2" />
      <el-option label="unlimited" :value="-1" />
    </el-select>
  </div>

  <v-network-graph
    v-model:selected-edges="selectedEdges"
    :nodes="data.nodes"
    :edges="data.edges"
    :layouts="data.layouts"
    :configs="configs"
  />
</template>

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

const nodes: Nodes = {
  node1: { name: "N1" },
  node2: { name: "N2" },
  node3: { name: "N3" },
}

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

const layouts: Layouts = {
  nodes: {
    node1: { x: 50, y: 0 },
    node2: { x: 0, y: 75 },
    node3: { x: 100, y: 75 },
  },
}

export default {
  nodes,
  edges,
  layouts,
}

Demo

Source

Data

Add/remove network elements

Adding/removing nodes and edges is automatically reflected by changing the reactive objects specified in nodes prop and edges prop respectively.
The newly added node will be placed in the center of the view area.
Deleting a node with edges will automatically delete the associated edges as well.
Multiple edges can be placed between the same two nodes.

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

const nodes: Nodes = reactive({ ...data.nodes })
const edges: Edges = reactive({ ...data.edges })
const nextNodeIndex = ref(Object.keys(nodes).length + 1)
const nextEdgeIndex = ref(Object.keys(edges).length + 1)

const selectedNodes = ref<string[]>([])
const selectedEdges = ref<string[]>([])

function addNode() {
  const nodeId = `node${nextNodeIndex.value}`
  const name = `N${nextNodeIndex.value}`
  nodes[nodeId] = { name }
  nextNodeIndex.value++
}

function removeNode() {
  for (const nodeId of selectedNodes.value) {
    delete nodes[nodeId]
  }
}

function addEdge() {
  if (selectedNodes.value.length !== 2) return
  const [source, target] = selectedNodes.value
  const edgeId = `edge${nextEdgeIndex.value}`
  edges[edgeId] = { source, target }
  nextEdgeIndex.value++
}

function removeEdge() {
  for (const edgeId of selectedEdges.value) {
    delete edges[edgeId]
  }
}
</script>

<template>
  <div class="demo-control-panel">
    <div>
      <label>Node:</label>
      <el-button @click="addNode">add</el-button>
      <el-button :disabled="selectedNodes.length == 0" @click="removeNode"
        >remove</el-button
      >
    </div>
    <div>
      <label>Edge:</label>
      <el-button :disabled="selectedNodes.length != 2" @click="addEdge"
        >add</el-button
      >
      <el-button :disabled="selectedEdges.length == 0" @click="removeEdge"
        >remove</el-button
      >
    </div>
  </div>

  <v-network-graph
    v-model:selected-nodes="selectedNodes"
    v-model:selected-edges="selectedEdges"
    :nodes="nodes"
    :edges="edges"
    :layouts="data.layouts"
    :configs="data.configs"
  />
</template>

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

const nodes: Nodes = {
  node1: { name: "N1" },
  node2: { name: "N2" },
  node3: { name: "N3" },
}

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

const layouts: Layouts = {
  nodes: {
    node1: { x: 50, y: 0 },
    node2: { x: 0, y: 75 },
    node3: { x: 100, y: 75 },
  },
}

const configs = defineConfigs({
  node: {
    selectable: 2, // up to 2 nodes
  },
  edge: {
    selectable: true,
    normal: {
      width: 3,
    },
  },
})

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

Demo

Source

Data

Specify selectable/draggable for each node

configs.node.selectable and configs.node.draggable can specify a function that takes a node object as an argument and returns a boolean. By the return value, it is possible to specify the selectability/draggability of each node.

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

const selectedNodes = ref<string[]>([])

const configs = vNG.defineConfigs<Node>({
  node: {
    selectable: node => node.selectable,
    draggable: node => node.draggable,
  },
})
</script>

<template>
  <div class="demo-control-panel">
    <label>Selected:</label>
    <el-select v-model="selectedNodes" multiple placeholder="Select">
      <template v-for="(node, key) in data.nodes">
        <el-option
          v-if="node.selectable"
          :key="key"
          :label="node.name"
          :value="key"
        />
      </template>
    </el-select>
  </div>

  <v-network-graph
    v-model:selected-nodes="selectedNodes"
    :nodes="data.nodes"
    :edges="data.edges"
    :layouts="data.layouts"
    :configs="configs"
  />
</template>

import * as vNG from "v-network-graph"

export interface Node extends vNG.Node {
  selectable: boolean
  draggable: boolean
}
type Nodes = Record<string, Node>

const nodes: Nodes = {
  node1: { name: "N1", selectable: true, draggable: true },
  node2: { name: "N2\nnot draggable", selectable: true, draggable: false },
  node3: { name: "N3\nnot selectable", selectable: false, draggable: true },
}

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

const layouts: vNG.Layouts = {
  nodes: {
    node1: { x: 50, y: 0 },
    node2: { x: 0, y: 75 },
    node3: { x: 100, y: 75 },
  },
}

export default {
  nodes,
  edges,
  layouts,
}

Demo

Source

Data

Specify selectable for each edge

configs.edge.selectable can specify a function that takes a edge object as an argument and returns a boolean. By the return value, it is possible to specify the selectability of each edge.

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

const selectedEdges = ref<string[]>([])

const configs = vNG.defineConfigs<vNG.Node, Edge>({
  edge: {
    normal: {
      width: 3,
    },
    selectable: e => e.selectable,
  },
})
</script>

<template>
  <div class="demo-control-panel">
    <label>Selected:</label>
    <el-select v-model="selectedEdges" multiple placeholder="Select">
      <template v-for="(edge, key) in data.edges">
        <el-option
          v-if="edge.selectable"
          :key="key"
          :label="`[${data.nodes[edge.source].name}=${data.nodes[edge.target].name}]`"
          :value="key"
        />
      </template>
    </el-select>
  </div>

  <v-network-graph
    v-model:selected-edges="selectedEdges"
    :nodes="data.nodes"
    :edges="data.edges"
    :layouts="data.layouts"
    :configs="configs"
  />
</template>

import * as vNG from "v-network-graph"

export interface Edge extends vNG.Edge {
  selectable: boolean
}
type Edges = Record<string, Edge>

const nodes: vNG.Nodes = {
  node1: { name: "N1" },
  node2: { name: "N2" },
  node3: { name: "N3" },
}

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

const layouts: vNG.Layouts = {
  nodes: {
    node1: { x: 50, y: 0 },
    node2: { x: 0, y: 75 },
    node3: { x: 100, y: 75 },
  },
}

export default {
  nodes,
  edges,
  layouts,
}

Demo

Source

Data

Summarize edges between the same nodes

If there are too many edges between nodes to be displayed, they are automatically summarized into a single line and displayed. The summarized edges will be displayed with the number of edges. Note: This feature is still under development, so it is not yet possible to select individual summarized edges.

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

const nodes: Nodes = reactive({ ...data.nodes })
const edges: Edges = reactive({ ...data.edges })
const nextNodeIndex = ref(Object.keys(nodes).length + 1)
const nextEdgeIndex = ref(Object.keys(edges).length + 1)

const selectedNodes = ref<string[]>([])
const selectedEdges = ref<string[]>([])

function addNode() {
  const nodeId = `node${nextNodeIndex.value}`
  const name = `N${nextNodeIndex.value}`
  nodes[nodeId] = { name }
  nextNodeIndex.value++
}

function removeNode() {
  for (const nodeId of selectedNodes.value) {
    delete nodes[nodeId]
  }
}

function addEdge() {
  if (selectedNodes.value.length !== 2) return
  const [source, target] = selectedNodes.value
  const edgeId = `edge${nextEdgeIndex.value}`
  edges[edgeId] = { source, target }
  nextEdgeIndex.value++
}

function removeEdge() {
  for (const edgeId of selectedEdges.value) {
    delete edges[edgeId]
  }
}
</script>

<template>
  <div class="demo-control-panel">
    <div>
      <label>Node:</label>
      <el-button @click="addNode">add</el-button>
      <el-button :disabled="selectedNodes.length == 0" @click="removeNode"
        >remove</el-button
      >
    </div>
    <div>
      <label>Edge:</label>
      <el-button :disabled="selectedNodes.length != 2" @click="addEdge"
        >add</el-button
      >
      <el-button :disabled="selectedEdges.length == 0" @click="removeEdge"
        >remove</el-button
      >
    </div>
  </div>

  <v-network-graph
    v-model:selected-nodes="selectedNodes"
    v-model:selected-edges="selectedEdges"
    :nodes="nodes"
    :edges="edges"
    :layouts="data.layouts"
    :configs="data.configs"
  />
</template>

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

const nodes: Nodes = {
  node1: { name: "N1" },
  node2: { name: "N2" },
  node3: { name: "N3" },
}

const edges: Edges = {
  edge1: { source: "node1", target: "node2" },
  edge2: { source: "node1", target: "node2" },
  edge3: { source: "node1", target: "node2" },
  edge4: { source: "node1", target: "node2" },
  edge5: { source: "node1", target: "node2" },
  edge6: { source: "node1", target: "node2" },
  edge7: { source: "node1", target: "node2" },
  edge8: { source: "node2", target: "node3" },
  edge9: { source: "node2", target: "node3" },
  edge10: { source: "node3", target: "node1" },
}

const layouts: Layouts = {
  nodes: {
    node1: { x: 50, y: 0 },
    node2: { x: 0, y: 75 },
    node3: { x: 100, y: 75 },
  },
}

const configs = defineConfigs({
  node: {
    selectable: 2, // up to 2 nodes
  },
  edge: {
    selectable: true,
    normal: {
      width: 3,
    },
  },
})

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

Demo

Source

Data

Whether or not to aggregate can be specified by a function that returns a boolean or a boolean value, as specified in the configuration edge.summarize.

Select nodes at once with a rectangle

There is a feature that enables selection of nodes within the rectangle of the dragged area at once. This is accomplished by changing to a different mode ("box-selection" mode) than normal to distinguish it from dragging for panning operations.

In the following example, clicking the "Start to select" button starts the "box-selection" mode. Then, dragging pointer is released (pointerup) or the Escape key is pressed, the mode is exited and the mode returns to accepting regular pointer operations. If "Start with Ctrl/Cmd key" is checked, pressing the Cmd key on a Mac or Ctrl key otherwise will automatically start "box-selection" mode.

In addition, the appearance of rectangle can be customized in the configuration.

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

const graph = ref<VNetworkGraphInstance>()

const configs = reactive(
  defineConfigs({
    view: {
      boxSelectionEnabled: false,
      selection: {
        box: {
          color: "#0000ff20",
          strokeWidth: 1,
          strokeColor: "#aaaaff",
          strokeDasharray: "0",
        },
      },
    },
    node: {
      selectable: true,
    },
  })
)

const isBoxSelectionMode = ref(false)
const eventHandlers: EventHandlers = {
  "view:mode": mode => {
    // Observe mode change events
    isBoxSelectionMode.value = mode === "box-selection"
  },
}

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

<template>
  <div class="demo-control-panel">
    <demo-box-selection-panel
      :selecting="isBoxSelectionMode"
      v-model:color="configs.view.selection.box.color"
      v-model:strokeWidth="configs.view.selection.box.strokeWidth"
      v-model:strokeColor="configs.view.selection.box.strokeColor"
      v-model:strokeDasharray="configs.view.selection.box.strokeDasharray"
      v-model:startWithKeyDown="configs.view.boxSelectionEnabled"
      @button-click="startBoxSelection"
    />
  </div>

  <v-network-graph
    ref="graph"
    :nodes="data.nodes"
    :edges="data.edges"
    :layouts="data.layouts"
    :configs="configs"
    :event-handlers="eventHandlers"
  />

  <div v-if="isBoxSelectionMode" class="mode">box-selection mode</div>
</template>

<style scoped>
.mode {
  position: absolute;
  bottom: 10px;
  left: 10px;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 14px;
  color: #ffffff;
  background-color: #317dc9;
  font-style: italic;
  pointer-events: none;
}
</style>

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

const nodes: Nodes = {
  node1: { name: "N1" },
  node2: { name: "N2" },
  node3: { name: "N3" },
  node4: { name: "N4" },
  node5: { name: "N5" },
  node6: { name: "N6" },
}

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

Demo

Source

Data

Select nodes with a rectangle (Consecutive selection)

In the example above, the "box-selection" mode was automatically exited when the user finished dragging, but in the example below, the mode will continue until the user intentionally performs a exit operation.

"box-selection" mode exit operation:

• Click on the view area
• Press the Escape key
• Call stopBoxSelection() which is <v-network-graph> instance method

In addition, in the example below, holding down the Shift key while dragging inverts the selection state of the nodes within the rectangle (i.e., it selects those that are not selected and deselects those that are selected).

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

const graph = ref<VNetworkGraphInstance>()

const configs = defineConfigs({
  node: {
    selectable: true,
  },
})

const isBoxSelectionMode = ref(false)
const eventHandlers: EventHandlers = {
  "view:mode": mode => {
    // Observe mode change events
    isBoxSelectionMode.value = mode === "box-selection"
  },
}

function startBoxSelection() {
  graph.value?.startBoxSelection({
    stop: "click", // Trigger to exit box-selection mode
    type: "append", // Behavior when a node is within a selection rectangle
    withShiftKey: "invert", // `type` value if the shift key is pressed
  })
}

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

<template>
  <div class="demo-control-panel">
    <el-button
      type="primary"
      :disabled="isBoxSelectionMode"
      @click="startBoxSelection"
      >Start to selection</el-button
    >
    <el-button
      type="primary"
      :disabled="!isBoxSelectionMode"
      @click="stopBoxSelection"
      >Stop to selection</el-button
    >
  </div>

  <v-network-graph
    ref="graph"
    :nodes="data.nodes"
    :edges="data.edges"
    :layouts="data.layouts"
    :configs="configs"
    :event-handlers="eventHandlers"
  />

  <div v-if="isBoxSelectionMode" class="mode">box-selection mode</div>
</template>

<style scoped>
.mode {
  position: absolute;
  bottom: 10px;
  left: 10px;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 14px;
  color: #ffffff;
  background-color: #317dc9;
  font-style: italic;
  pointer-events: none;
}
</style>

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

const nodes: Nodes = {
  node1: { name: "N1" },
  node2: { name: "N2" },
  node3: { name: "N3" },
  node4: { name: "N4" },
  node5: { name: "N5" },
  node6: { name: "N6" },
}

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

Demo

Source

Data

TIP

If you do not want to exit "box-selection" mode even by clicking or pressing the Escape key, specify { stop: "manual" } to the startBoxSelection() method. In this way it will not be exited "box-selection" mode unless you call the stopBoxSelection() method.