confirm node/edge deselect after container click

[klipdassie]

Hey @dash14,

Thank you for creating and maintaining this great component!

Is there a way to prevent deselection of a node/edge after a container click? and use a confirm dialog for example.
I experimented a bit with the 'node:select' and 'view:click' events but I could not find a solution. Hope you can help me out.

Thanks in advance.

[dash14.ack]

Hi @klipdassie,

Thank you for using v-network-graph!

Is there a way to prevent deselection of a node/edge after a container click? and use a confirm dialog for example.

There is no direct functionality, but it may be controlled using the selected-nodes prop.

Two examples are shown below.

In the first example, when the node selection state changes and the number of nodes selected is less than one, the node before the change is forcibly reselected.

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

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

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

watch(selectedNodes, (value, oldValue) => {
  if (value.length === 0 && oldValue.length > 0) {
    selectedNodes.value = oldValue
  }
})

</script>

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

// data.ts
import { Nodes, Edges, Layouts } from "v-network-graph"

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

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

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

export default {
  nodes,
  edges,
  layouts,
}

The second example is a bit more complicated. When a selected node is deselected, a confirmation is shown, and the selection is only deselected if "Yes" is clicked.
data.ts is the same as in the first example.

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

const configs = defineConfigs({
  node: {
    selectable: 1 // only one node
  },
})

const deselecting = ref(false)
const lockedNodes = ref<string[]>([])
const selectedNodes = ref<string[]>([])

watch(selectedNodes, (value, oldValue) => {
  // Note that when assigning a value to a variable monitored by watch, it is called recursively.

  if (value.length > 0 && oldValue.length === 0 && lockedNodes.value.length === 0) {
    // save selected nodes
    lockedNodes.value = value
    return
  }

  if (lockedNodes.value.length > 0 && !isEquals(value, lockedNodes.value)) {
    // prevent update selection
    selectedNodes.value = lockedNodes.value
    deselecting.value = true
    return
  }
})

function deselect() {
  lockedNodes.value = []
  selectedNodes.value = []
  deselecting.value = false
}

function isEquals<T>(array1: T[], array2: T[]) {
  return JSON.stringify(array1) === JSON.stringify(array2)
}
</script>

<template>
  <v-network-graph
    v-model:selected-nodes="selectedNodes"
    :nodes="data.nodes"
    :edges="data.edges"
    :layouts="data.layouts"
    :configs="configs"
  />
  <div v-if="deselecting">
    Are you sure you want to deselect "{{ selectedNodes[0] }}"?
    <button @click="deselect">Yes</button>
  </div>
</template>

Hope this will help.

[klipdassie]

Hey @dash14

Thank you for providing the examples, very useful!