Remove node operation fails, edgeLayoutPoint.value is undefined

[Mamiglia]

Hi, I'm trying to use this library to build a website, and I've recreated the example in the documentation to add/remove nodes/edges. While adding/removing edges and adding nodes works well, if a node i'm trying to remove has any edge connected to it I get Uncaught (in promise) TypeError: edgeLayoutPoint.value is undefined. I don't understand if there is something wrong with my code or if the fault is in the library itself. As for the code, I pretty much recreated the documentation:

<script setup lang="ts" >
import Sidemenu from "./components/Sidemenu.vue";
import Footbar from './components/Footbar.vue';
import { networkGraphConfigs } from "./assets/v-network-graph-configs";
import { Nodes, Edges } from "v-network-graph"
import { ref,reactive } from "vue";

const nodes : Nodes = reactive({
  0: { name: "Node 0" },
  1: { name: "Node 1" },
  2: { name: "Node 2" },
  3: { name: "Node 3" },
});
const edges : Edges = reactive({
  edge1: { source: "0", target: "1" },
  edge2: { source: "1", target: "2" },
  edge3: { source: "2", target: "3" },
});
const selectedNodes = ref<string[]>([]);
const selectedEdge = ref<string[]>([]);

function addNode() {
  let size = Object.keys(nodes).length
  nodes[size] = {
    name: String(size)
  }
}

/* removes any selected node or edge */
function remove() {     
  //delete selected nodes
  for (const nodeId of selectedNodes.value) {
    delete nodes[nodeId]
  }

  for (const edgeID of selectedEdge.value) {
    delete edges[edgeID]
  }

}
function addEdge() {
  if (selectedNodes.value.length !== 2) return
  const [source, target] = selectedNodes.value
  const edgeId = edges.length
  edges[edgeId] = { source, target }
}
</script>

<template>
<Sidemenu/>
<div>
  <v-network-graph 
    :nodes="nodes" 
    :edges="edges" 
    :configs="networkGraphConfigs"
    v-model:selected-edges="selectedEdge"
    v-model:selected-nodes="selectedNodes"/>
  <Footbar
    @validate="(text:string,options:Object) => console.log(`validate: ${text}`,options) "
    @addNode="addNode()"
    @remove ="remove"
    @addEdge="addEdge"
  />
</div>

</template>

And here is my configs (./assets/v-network-graph-configs)

import { defineConfigs } from "v-network-graph"

export const networkGraphConfigs = defineConfigs({
    view : {
        zoomEnabled: false,
        grid: {
            visible:true,
            interval: 40,
            // thickIncrements: 10,
            line: {                   // normal line style
                color: "#a9a9a9" ,         //   default: "#e0e0e0"
                width: .8,          //   default: 1,
                dasharray: 5    
            },
            thick: {
                color:"#a9a9a9",
                width: 1
            }
        }
    },
    node :{
        normal: {
            color: "var(--accent)",
            radius: 24, 
        },
        hover: {
            color: "var(--accent-2)"
        },
        // selected: {
        //     color: "white"
        // },
        selectable: 2,
        label: {
            direction: "center",
            fontFamily: "Courier New",
            text: "name"
        },
        focusring: {
            // visible: true // whether the focus ring is visible or not.     default: true
            // width: 4    // line width of the focus ring.                 default: 4
            // padding: 3  // distance between the focus ring and the node. default: 3
            color: "var(--complement)"  //per qualche motivo non funge   // fill color.                                   default: "#eebb00"
        },
    },

    edge : {
        normal: {
            width: 2.5,
            color: "var(--accent)",

        },
        selectable: 1,
        type:"curve",
        marker: {
            target:{
                type:"arrow",

            }
        }
    }
})

[Mamiglia]

After some trials it appears that issue exists as long as configs.edge.type="curve" is true, when commenting that line the error disappears

[Mamiglia]

Sorry didn't want to close the issue, as this probably points to a bug in the library

[dash14]

Hi @Mamiglia, Thank you for the detailed report! You provided important information about the code and conditions to reproduce, which was a great help in identifying the cause of the bug.

I have fixed this bug and released it. (v0.5.12)

[dash14]

I close this issue for now. If you have any other problems, please open a new issue.