Closed dashavoo closed 2 years ago
Hi @dashavoo,
Thank you for your detailed report. The minimal code to reproduce the problem you provided, helped me to quickly identify the issue point. Thank you very much!
I've made a fix, please try a newer version. (v0.3.17).
Thank you @dash14, you reacted really quickly to the bug report. ForceLayout (with non-default settings) isn't working after the fix, but everything else works fine.
If you modify my previous example slightly to this:
<script setup lang="ts">
import { reactive, computed } from "vue"
import { ForceLayout } from "v-network-graph/lib/force-layout";
const whatsits = reactive([{id: "blah", name: "hi there"}])
const edges = reactive({});
const addNode = function () {
whatsits.push({id: "secondNode", name: "this works?"});
}
const configs = {
view: {
layoutHandler: new ForceLayout({
positionFixedByDrag: true,
positionFixedByClickWithAltKey: false,
// * The following are the default parameters for the simulation.
// * You can customize it by uncommenting below.
createSimulation: (d3, nodes, edges) => {
return d3.forceSimulation(nodes)
},
}),
},
}
const nodes = computed(() => Object.fromEntries(whatsits.map(e => [e.id, { name: e.name }])));
</script>
<template>
<button type="button" @click="addNode">Add node</button>
<ul>
<li v-for="n in whatsits" :key="n.id">{{ n.name }} is {{ nodes[n.id] ? "in" : "not in" }} "nodes"</li>
</ul>
<v-network-graph :nodes="nodes" :edges="edges" :configs="configs" />
</template>
and press the add button, you will see an error:
force.ts:119 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'links')
at watch.deep (force.ts:119:20)
at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21)
at Array.job (runtime-core.esm-bundler.js:1779:17)
at flushPreFlushCbs (runtime-core.esm-bundler.js:328:31)
at updateComponentPreRender (runtime-core.esm-bundler.js:5168:9)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5080:21)
at ReactiveEffect.run (reactivity.esm-bundler.js:160:29)
at updateComponent (runtime-core.esm-bundler.js:4968:26)
at processComponent (runtime-core.esm-bundler.js:4901:13)
However, if you comment out the customisation (lines 18, 19, 20) it works fine with the defaults.
Hi @dashavoo,
Thank you for reporting the error.
Oops, the code inside the library assumed that force("edge", ...)
is specified....
I have fixed so that it will work without this configuration.
Please use the new version (v0.3.18).
That has solved the issue! Thank you for the fast help and the really useful library!
Expected behaviour
Binding computed values to
:nodes
and:edges
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
whatsits
.(Sorry for originally submitting this as an empty issue - my finger slipped.)