Bug: path "end" and "width" cause errors

[lucagrammer]

I am trying to set the path.end parameter to "edgeOfNode" but this causes a fatal error. Same behavior keeping path.end at the default value but trying to apply a path.width value greater than 0.

[dash14]

Hi @lucagrammer, I tried the following code, but could not reproduce it. It may be a problem involving the graph structure or combination with other configs. Could you please provide the minimum code that can be reproduced?

<script setup lang="ts">
import { defineConfigs } from "v-network-graph";

const nodes = {
  node1: { name: "Node 1" },
  node2: { name: "Node 2" },
  node3: { name: "Node 3" },
  node4: { name: "Node 4" },
  node5: { name: "Node 5" },
  node6: { name: "Node 6" },
}

const edges = {
  edge1: { source: "node1", target: "node2" },
  edge2: { source: "node3", target: "node2" },
  edge3: { source: "node2", target: "node4" },
  edge4: { source: "node2", target: "node4" },
  edge5: { source: "node4", target: "node5" },
  edge6: { source: "node4", target: "node6" },
}

const layouts = {
  nodes: {
    node1: { x: 0, y: 0 },
    node2: { x: 100, y: 60 },
    node3: { x: 0, y: 110 },
    node4: { x: 250, y: 60 },
    node5: { x: 350, y: 10 },
    node6: { x: 350, y: 110 },
    node7: { x: 450, y: 10 },
    node8: { x: 450, y: 60 },
    node9: { x: 450, y: 110 },
    node10: { x: 450, y: 160 },
  },
}

const paths = {
  path1: { edges: ["edge1", "edge3", "edge5"] },
  path2: { edges: ["edge2", "edge4", "edge6"] },
}

const configs = defineConfigs({
  path: {
    visible: true,
    end: "edgeOfNode",
    normal: {
      width: 10,
      color: "#ff800088",
    },
  }
})
</script>

<template>
  <v-network-graph
    :nodes="nodes"
    :edges="edges"
    :paths="paths"
    :layouts="layouts"
    :configs="configs"
  />
</template>

[lucagrammer]

These are my values for nodes, edges, paths and configs. While I do not specify any layout value (I'm using ForceLayout as layout handler).

const nodes = {
                node1: {
            name: 'node1',
            subgraph: 'Unassigned',
            isUserAdded: true,
            isVisible: true,
        },
        node2: {
            name: 'node2',
            subgraph: 'Unassigned',
            isUserAdded: true,
            isVisible: true,
        }
}

const edges = {
        edge1: {
            name: 'edge1',
            source: 'node1',
            target: 'node2',
            isVisible: true,
        },
    },

const paths: {
        path1: {
            name: 'path1',
            edges: ['edge1'],
            pathGroup: 'g1',
            avgNpmi: 12,
            isVisible: true,
        },
},

const configs = configs: {
        node: {
            selectable: false,
            label: {
                fontSize: 12,
                color: 'rgb(var(--v-theme-secondary))',
            },
            normal: {
                type: 'circle',
                borderRadius: 10,
                strokeDasharray: 0,
            },
            hover: {
                color: '#eebb00',
                type: 'circle',
                radius: 16,
                strokeWidth: 0,
                strokeColor: '#000000',
                strokeDasharray: 0,
            },
            selected: {
                type: 'circle',
                radius: 16,
                strokeWidth: 0,
                strokeColor: '#000000',
                strokeDasharray: 0,
            },
        },

        edge: {
            selectable: false,
            gap: 15,
            keepOrder: 'horizontal',
            normal: {
                width: 4,
                dasharray: 0,
                linecap: 'butt',
                animate: true,
                animationSpeed: 1000,
                color: 'rgb(var(--v-theme-primary))',
            },
            hover: {
                width: 6,
                dasharray: 0,
                linecap: 'butt',
                animate: true,
                animationSpeed: 1000,
                color: '#eebb00',
            },
            selected: {
                width: 5,
                dasharray: 0,
                linecap: 'butt',
                animate: true,
                animationSpeed: 1000,
                color: '#eebb00',
            },
        },

        path: {
            selectable: false,
            hoverable: true,
            visible: true,
            curveInNode: true,
            end: "edgeOfNode",
            normal: {
                width: 4,
                animationSpeed: 20,
            },
            hover: {
                width: 6,
                animationSpeed: 20,
            },
            selected: {
                width: 10,
                animationSpeed: 20,
            },
        },

        view: {
            doubleClickZoomEnabled: false,
            scalingObjects: false,
            //autoPanAndZoomOnLoad: "fit-content",
            autoPanOnResize: false,
            panEnabled: true,
            zoomEnabled: true,
            layoutHandler: new ForceLayout({
                positionFixedByDrag: false,
            }),
        },
    },

<v-network-graph
    :nodes="nodes"
    :edges="edges"
    :paths="paths"
    :configs="configs"
  />

[dash14]

Hi @lucagrammer, Thank you for your detailed information. Sorry for the delay in responding. The cause was found and addressed. Please try latest version: v0.6.7.

Best Regards

[lucagrammer]

Thank you very much, now everything works perfectly!

Thanks again for your great work!