Access df-value inside component

[SilasNiewierra]

Hi @jerosoler ,

can you tell me if this is possible? I want to display the current node data in the step. So far I did it with something like this:

<input
    df-duration
  />

But is it possible to access the df-duration in the component somehow? I would like to do something like this:

<template>
  <input
    :value="readableTimeUnits('df-duration')"
  />
  <!-- or -->
  <p>{{readableTimeUnits('df-duration')}}</p>
  </template>
<script>
  ...
  readableTimeUnits(unit) {
        return {
          [TimeUnits.MINUTE]: 'Minute(n)',
          [TimeUnits.HOUR]: 'Stunde(n)',
          [TimeUnits.DAY]: 'Tag(e)',
          [TimeUnits.WEEK]: 'Woche(n)',
          [TimeUnits.MONTH]: 'Monate(n)',
        }[unit]
      },
</script>

So in the end the input displays a readable string and not the value itself?

[jerosoler]

Hi

Get data with method getNodeFromId

For vue, view example: https://github.com/jerosoler/Drawflow/issues/263#issuecomment-930449781

[SilasNiewierra]

Sounds great, but how do I get the id or even better the node data into the component, if I register my nodes like this?

Step is my Vue component to display the nodes. I need the node data while registering, which is not possible, right? So how can I get the data from getNodeFromId in my Step component, when I add a new node as well as when I'm importing a flow-diagram I did before and want load again?

const id = document.getElementById('drawflow')
this.editor = new Drawflow(id, Vue, this)
this.editor.start()

const nodeProps = (key) => ({
    t: this.$t,
    step: stepTypes[key],
    node: '', // I need the node information here for each node
})

Object.keys(stepTypes).forEach((key) => {
    this.editor.registerNode(key, Step, nodeProps(key))
})

[jerosoler]

Hi

Your question: I need the node data while registering, which is not possible, right? No

So how can I get the data from getNodeFromId in my Step component, when I add a new node as well as when I'm importing a flow-diagram I did before and want load again?

With the above example you can see it:

 mounted() {
       this.$nextTick(() => {
        const id = this.$el.parentElement.parentElement.id;
        const data = this.$df.getNodeFromId(id.slice(5));
        this.select_type = data.data.select_type;
       });
  },

Other option is with event bus example https://github.com/jerosoler/Drawflow/issues/37#issuecomment-717822302

Personally I prefer injection with prototype Vue.prototype.$df = new Drawflow(id, Vue, this);

But if you just need it for that, maybe you can make a reference and watch in the input.

[SilasNiewierra]

Hi @jerosoler ,

cool, thank you so much. I'm now able to get the Node information by using your function. But when I update the node information, the data wont be updated in the UI because it's only happening on mounted:

// Step.vue
<template>
...
<p>{{node.data.information}}</p>
...
</template>
<script>
...
props:{
   editor: {
      type: Object,
      default: () => ({}),
    },
    toggleDetails: {
      type: Function,
      default: () => ({}),
    },
},
data() {
    return {
      node: {
        data: {
          information: ''
        },
      },
    }
  },
mounted() {
       this.$nextTick(() => {
        const id = this.$el.parentElement.parentElement.parentElement.id
        this.node = this.editor.getNodeFromId(id.slice(5))
        console.log('child data: ', this.node) // works, I get the initial data
       });
  },
...
</script>

// Editor.vue
<template>
<!--Modal to update Settings-->
<Details
        :node="selectedNode"
        :submit="setNodeDetails"
        :cancel="cancelNodeDetails"
      />
</template>
<script>
data() {
    return {
      editor: {},
      selectedNode: null,
      showNodeDetails: false,
    }
  },
setupEditor(){
....
  // enable external editor
  this.editor.on('nodeSelected', (id) => {
    this.selectedNode = this.editor.getNodeFromId(id)
  })
  this.editor.on('nodeUnselected', () => {
    this.cancelNodeDetails()
  })
  this.editor.start()

  // Register nodes
  const nodeProps = (key) => ({
    toggleDetails: this.toggleNodeDetails,
    editor: this.editor,
  })

  Object.keys(stepTypes).forEach((key) => {
    this.editor.registerNode(key, Step, nodeProps(key))
  })
}
...
async setNodeDetails(id, details) {
  await this.editor.updateNodeDataFromId(id, details)
  // should update the respective node data UI
  this.cancelNodeDetails()
},

toggleNodeDetails() {
  this.showNodeDetails = true
},
</script>

Any idea to get the updated data in the Step component?

[SilasNiewierra]

Unfortunately a bus like here: https://github.com/jerosoler/Drawflow/issues/37#issuecomment-717822302 does not work with Vue 3 anymore

[jerosoler]

Hi @SilasNiewierra

Try mitt library: https://github.com/jerosoler/Drawflow/issues/102#issuecomment-766333278

[SilasNiewierra]

Hi @jerosoler , thanks I tried it with https://github.com/scottcorgan/tiny-emitter and it seems to work 👍 Now I can set and retrieve data 😄 thanks a lot