jerosoler / Drawflow

Simple flow library 🖥️🖱️
https://jerosoler.github.io/Drawflow/
MIT License
4.7k stars 728 forks source link

Props are not passed to node #485

Open kellerkind87 opened 2 years ago

kellerkind87 commented 2 years ago

Hi, i am doing prototypes and an evaluation of libs like yours. First of all thank you for spending your time providing this great lib.

I think i found a bug.

If i add a node vie the addNode method the data is not passed to the underlying vue component as props.

Here is my code:

const id = document.getElementById("drawflow");
this.editor = new Drawflow(id, Vue, this);

this.editor.registerNode('ButtonNode', ButtonNode);
this.editor.reroute = true;
this.editor.reroute_fix_curvature = true;
this.editor.curvature = 1;
this.editor.start();

const data = {
  "label" : "someLabel"
}

this.editor.addNode('test2', 1, 1, 150, 300, '', data, 'ButtonNode', 'vue');

this is how the node is added starting at drawflow.js:1231

if(parseInt(this.render.version) === 3 ) {
  //Vue 3
  let wrapper = this.render.h(this.noderegister[html].html, this.noderegister[html].props, this.noderegister[html].options);
  wrapper.appContext = this.parent;
  this.render.render(wrapper,content);

} else {
  // Vue 2
  let wrapper = new this.render({
  parent: this.parent,
  render: h => h(this.noderegister[html].html, { props: this.noderegister[html].props }),
  ...this.noderegister[html].options
  }).$mount()
  //
  content.appendChild(wrapper.$el);
}

It seems like the data parameter is not used. Possible way to solve: Maybe merge the data and this.noderegister[html].props

Or maybe i am doing sth wrong?

Thank you in advance.

some versions:

jerosoler commented 2 years ago

If node data is not passed as props.

It is at the time of registration that the props can be passed.

editor.registerNode('name', component, props, options);

There are users who have problems receiving the data. Even though it can be interesting to pass the data as props. Examples passing props:

Maybe pass the values inside a parameter. Or use some parameter type "dataInProps" true/false.

I study it.

kellerkind87 commented 2 years ago

i added a PR: https://github.com/jerosoler/Drawflow/pull/486

jerosoler commented 2 years ago

Yes, I saw it. Thanks. I will check it.