vue use this.data

[hopdino]

this.editor.on('nodeSelected', function(id) { /当选中 获取数据/

  console.log(this.items)
  return id

})

items define in data(){} but cannot find items undefined

[jerosoler]

Hello @hopdino

nodeSelected, return idof node selected. Not item.

For get info of node use: getNodeFromId(id)

For get item and unselected item.

editor.on('nodeSelected', function(id) {
 console.log("Node selected " + id);
 const data = editor.getNodeFromId(id);
 console.log(data);
 })

editor.on('nodeUnselected', function() {
   console.log("Node Unselected");
 })

Jero

[jerosoler]

Sorry I did not understand your question.

Use the arrow functions: Example:

this.editor.on('nodeSelected', (id) => {
      console.log("Node Selected" + id);
      console.log(this.items);
    });

[jerosoler]

@hopdino Has the solution served you?

[d3vzer0]

@jerosoler Not sure if it helps for this case, but I used a slightly different method by passing the editor as a prop to a component. I then use a computed item called nodeData to get the data specific to the node :) The example below uses your drag/drop code sample as well from https://jerosoler.github.io/Drawflow/ ^^

FlowChart.vue (main page)

<template>
  <q-page>
    <div class="q-pa-md row">
      <div class="col-md-3 col-xl-2 col-sm-4 col-xs-4 filter-col">
        <div class="row">
          <div class="col">
            <q-card flat id="node-tasks">
              <q-list>
                <q-item-label header>Modules</q-item-label>
                <q-item draggable="true" v-on:dragend="dragNodeEnd(exampleNode)" clickable v-ripple>
                  <q-item-section avatar>
                    <q-avatar><img src="statics/stats_small.png"/></q-avatar>
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>Example Module 1</q-item-label>
                    <q-item-label caption lines="2">This module does things</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="inner-graph">
          <div class="graph-actions">
            <span class="run-graph"><q-btn flat class="node-icon" unelevated round icon="play_arrow" /></span>
            <span class="save-graph"><q-btn flat class="node-icon" unelevated round icon="get_app" @click="exportFlowchart"/></span>
          </div>
          <div id="drawflow" v-on:dragover="dragNode">
          </div>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script>
/* eslint-disable */
import styleDrawflow from 'drawflow/dist/drawflow.min.css' // eslint-disable-line no-use-before-define
/* eslint-enable */
import Vue from 'vue'
import Drawflow from 'drawflow'
import ConditionalNodeDate from 'components/ConditionalNodeDate'

Vue.component('ConditionalNodeDate', ConditionalNodeDate)

export default {
  name: 'Flowchart',
  components: {
  },
  data () {
    return {
      draggedNode: null,
      draggedNodePos: null,
      graphOptions: {
      },
      editor: null,
    }
  },
  computed: {
    exampleNode () {
      return {
        node: 'ConditionalNodeDate',
        name: 'From Date',
        icon: 'event',
        module: 'ifDateExceeds',
        description: 'Continue to next task after specified datetime',
        type: 'conditional',
        someMoreFieldsHere: 'and_examples_here',
        config: {
          inputs: 0,
          outputs: 1
        }
      }
    }
  },
  mounted () {
    const id = document.getElementById('drawflow')
    this.editor = new Drawflow(id, Vue)
    this.editor.start()
    var props = { graphObject: this.editor }
    this.editor.registerNode('ConditionalNodeDate', ConditionalNodeDate, props, this.graphOptions)
  },
  methods: {
    dragNodeEnd (nodeContent) {
      const posX = this.draggedNodePos.clientX * (this.editor.precanvas.clientWidth /
        (this.editor.precanvas.clientWidth * this.editor.zoom)) - (this.editor.precanvas.getBoundingClientRect().x *
        (this.editor.precanvas.clientWidth / (this.editor.precanvas.clientWidth * this.editor.zoom)))

      const posY = this.draggedNodePos.clientY * (this.editor.precanvas.clientHeight /
        (this.editor.precanvas.clientHeight * this.editor.zoom)) - (this.editor.precanvas.getBoundingClientRect().y *
        (this.editor.precanvas.clientHeight / (this.editor.precanvas.clientHeight * this.editor.zoom)))

      this.addNode(nodeContent, posX, posY)
    },
    dragNode (event) {
      this.draggedNodePos = { clientX: event.clientX, clientY: event.clientY }
    },
    addNode (nodeData, posX, posY) {
      var randomArray = new Uint32Array(5)
      var randomId = window.crypto.getRandomValues(randomArray)[2]
      this.editor.addNode(randomId, nodeData.config.inputs, nodeData.config.outputs, posX, posY, 'nodeClass', nodeData, nodeData.node, 'vue')
    },
  }
}
</script>

ConditionalDataNode.vue

<template>
  <q-card class="node-card" flat v-if="nodeId">
    <q-card-section horizontal>
      <q-item>
        <q-item-section avatar>
          <q-avatar class="node-icon">
            <q-avatar><img src="statics/stats_small.png"/></q-avatar>
          </q-avatar>
        </q-item-section>
        <q-item-section>
          <q-item-label>{{nodeData.integration}}: {{nodeData.name}}</q-item-label>
          <q-item-label caption lines="2">{{nodeData.description}}</q-item-label>
        </q-item-section>
      </q-item>
    </q-card-section>
  </q-card>
</template>

<script>

export default {
  name: 'ExampleNode',
  props: {
    name: String,
    graphObject: Object
  },
  data () {
    return {
      nodeId: null,
      dataNode: null,
      nodeInput: null,
    }
  },
  computed: {
    nodeData () {
      const dataNode = this.graphObject.getNodeFromId(this.nodeId.slice(5)).data
      return dataNode
    }
  },
  methods: {
    // here is where I do things
  },
  mounted () {
    this.$nextTick(() => {
      const id = this.$el.parentElement.parentElement.id
      this.nodeId = id
    })
  }
}

</script>