pb10005 / diagram-vue

A editable SVG-based diagram component for Vue
https://diagramvue.netlify.com
MIT License
105 stars 32 forks source link

nodeClicked don't work #46

Open rafa355 opened 3 years ago

rafa355 commented 3 years ago

does not perform the event when clicked

<template>
  <section>
    <router-link to="/">Home</router-link>
    <Diagram
      :width="2000"
      :height="1000"
      :fluid="false"
      scale="1"
      background="#fafafa"
      :nodes="nodes"
      :links="links"
      :editable="true"
      :labels="{
        edit: 'Edit',
        remove: 'Remove',
        link: 'Link',
        select: 'Select',
      }"
      @editLink="editLink"
      @nodeChanged="nodeChanged"
      @nodeClicked="nodeClicked"
    ></Diagram>
  </section>
</template>
<script>
import Diagram from "diagram-vue";
import data from "../data.json";
export default {
  name: "Customise",
  components: {
    Diagram,
  },
  data() {
    return {
      editable: false,
      nodes: [],
      links: [],
    };
  },
  mounted() {
    this.nodes = data.nodes;
    this.links = data.links;
  },
  methods: {
    nodeClicked(id /* identifier of node */) {
      /* event handler */
      console.log("your clicked in node: ", id);
    },
    editLink(item) {
      console.log("aaaaa");
    },
    nodeChanged(obj) {
      this.nodes = obj.nodes;
      console.log("aqui");
    },
    linkChanged(obj) {
      this.links = obj.links;
    },
  },
};
</script>
darlandieterich commented 3 years ago

and nodeChanged and editLink it's called?

rafa355 commented 3 years ago

Yes, the functions that are not being called are nodeClicked and linkClicked.

darlandieterich commented 3 years ago

what version your using? here work fine!