dash14 / v-network-graph

An interactive network graph visualization component for Vue 3

Home Page:https://dash14.github.io/v-network-graph/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Bug: path does not update for computed prop

whitenotblack opened this issue · comments

Expected behaviour

Binding computed value to :path should result in the graph updating when the value of the computed changes.

Actual behaviour

The graph does not update, although the value of the computed has changed.

Example

  • Clicking the button in the component below adds an edge to the "paths".
  • "paths" updates immediately.
  • Visualisation of path is not updating
<script setup lang="ts">
import { defineConfigs, type Edges, type Nodes } from "v-network-graph"
import { computed } from "vue"

const nodes: Nodes = {
	node1: { name: "first" },
	node2: { name: "second" },
	node3: { name: "third" },
}
const edges: Edges = {
	edge1: { source: "node1", target: "node2" },
	edge2: { source: "node2", target: "node3" },
}

const paths = computed(() => ({
	path: {
		edges: edges_in_path.value,
	},
}))
const edges_in_path = ref(["edge1"])
function changePaths() {
	edges_in_path.value = ["edge1", "edge2"]
}
const configs = defineConfigs({
	path: {
		visible: true,
		path: {
			width: 10,
		},
	},
})
</script>

<template>
	<button type="button" @click="changePaths">Change paths</button>
	Current paths: {{ paths }}
	<v-network-graph :nodes="nodes" :edges="edges" :paths="paths" :configs="configs" />
</template>

Hi @whitenotblack,
Thank you for letting me know about the bug!
I apologize for the delay in responding.
I've released v0.9.15 which fixes the problem.
A big thank you for providing such a detailed report, including the reproduced source code!