Import EventHandlers

[leo2505]

Hello everybody, I have an issue relative to use "EventHandlers" in my project.

Importing VNetworkGraph from 'v-network-graph' , the import don't have this function mencioned at doc "vNG.EventHandlers".

The VNetworkGraph have only these exports at dependency (version 0.5.8), and I can't access the "EventHandlers":

import { Plugin } from "vue";
import * as components from "./components/index";
declare const install: Exclude<Plugin["install"], undefined>;
export default install;
export declare type VNetworkGraphInstance = InstanceType<typeof components.VNetworkGraph>;
export declare type Instance = InstanceType<typeof components.VNetworkGraph>;
export * from "./components/index";
export { getFullConfigs } from "./common/config-defaults";
export { SimpleLayout } from "./layouts/simple";
export { GridLayout } from "./layouts/grid";
export type { LayoutHandler } from "./layouts/handler";
export * from "./common/types";
export * from "./common/configs";
export { useStates } from "./composables/state";

I'm using VUE 3 with JS (not TS) and I trying do this in mounted() cycle:

this.eventHandlers = VNetworkGraph.EventHandlers = {
      'node:click': ({ node }) => {
        console.log('inside');
        // toggle
        this.nodes[node].active = !this.nodes[node].active;
      }
    };

[dash14]

Hi @leo2505, EventHandlers are interface types in TS, not functions. Since you are writing in JS and not TS, please ignore EventHandlers and write the following:

const eventHandlers = {
  "node:click": ({ node }) => {
    console.log('inside');
    // toggle
    nodes[node].active = !nodes[node].active
  },
}

[leo2505]

Hi @leo2505, EventHandlers are interface types in TS, not functions. Since you are writing in JS and not TS, please ignore EventHandlers and write the following:

const eventHandlers = {
  "node:click": ({ node }) => {
    console.log('inside');
    // toggle
    nodes[node].active = !nodes[node].active
  },
}

Hi, thanks for the answer. But still don't works. I used this.configs = VNetworkGraph.defineConfigs({}) to configure and works fine in mounted() cycle, only eventHandlers don't works and I can't see where's the problem.

my code is like this: Template:

js:

<template>
<v-network-graph :nodes="nodes" :edges="edges" :layouts="layouts" :configs="configs" :event-handlers="eventHandlers"/>
</template>
<script>
import * as VNetworkGraph from 'v-network-graph';

name: 'projectName',
  data () {
    return {
      getLigacao: null,
      collectionData: null,
      nodes: [],
      edges: [],
      configs: {}
    };
  },
async created(){
//here's my methods from repositories that get from API.
},
mounted () {
    const eventHandlers = {
      'node:click': ({ node }) => {
        console.log('inside');
        // toggle
        this.nodes[node].active = !this.nodes[node].active;
      }
    };
      this.configs = VNetworkGraph.defineConfigs({
        view: {
          layoutHandler: new ForceLayout({
            positionFixedByDrag: false,
            positionFixedByClickWithAltKey: true
          })
        },
        node: {
          selectable: true,
          normal: {
            type: 'circle',
            // radius: node => node.size, // Use the value of each node object
            color: node => node.color
          },
          hover: {
            radius: 22
          },
          focus: {
            color: 'black'
          }
        },
        edge: {
          normal: {
            width: edge => edge.width, // Use the value of each edge object
            color: edge => edge.color,
            dasharray: edge => (edge.dashed ? '4' : '0')
          }
        }
      });
  }
</script>

[leo2505]

@dash14 I found the error... the declaration of const was in wrong line. I'm new in VUE, so some things I'm still understanding. Basically I have changed the const eventHandlers to data(), before return. Thanks so much for your help.

[dash14]

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