Some ideas about vue 3 and props

[droppy2014]

Thank you very much for this great library! However, when developing on vue 3, I ran into some problems.

The first thing I came across was an erroneous description of the vue 3 connection in the documentation:

import { h, getCurrentInstance, render } from 'vue'
const Vue = { version: 3, h, render };
this.editor = new Drawflow(id, Vue);
// Pass render Vue 3 Instance
const internalInstance = getCurrentInstance()
editor.value = new Drawflow(id, Vue, internalInstance.appContext.app._context);

But why declare new Drawflow twice in this case? In my case, I could not get data to the instance in the child component of the node in any way. Everything started working fine after I fixed on

const internalInstance = getCurrentInstance()
this.editor = new Drawflow(drawflow_id, Vue, internalInstance.appContext.app._context);
internalInstance.appContext.config.globalProperties.$df = this.editor;

The next problem was that props for the component can only be passed at the register node stage. It seemed a little pointless to me, because at the register node stage, a skeleton (model) of the future node is created and there is no reason to transfer real data at this stage. For example, the type of my node is ConditionNode, it is used to check the conditions and, depending on the result, redirect the stream further. Thus, I have a lot of nodes with this type and inside each of them there is different data for the same form.

I had to fix the source code and deploy the library locally.

git clone https://github.com/jerosoler/Drawflow.git
cd Drawflow
npm install

then I made the following changes to src/drawflow.js

approximately 1233 lines
let wrapper = this.render.h(this.noderegister[html].html, {nodeId:newNodeId,data:data}, this.noderegister[html].options);

approximately 1370 lines

let wrapper = this.render.h(this.noderegister[dataNode.html].html, {nodeId:dataNode.id,data:dataNode.data}, this.noderegister[dataNode.html].options);

so I passed NodeID and data as props

further

npm run build

and

import Drawflow from 'path/to/your/modified/drawflow';

After that, my component appeared

props: {
  data: Object,
  nodeId: String
},

Also be sure to set df value with the parent drawflow instance

data() {
      return {
        df: getCurrentInstance().appContext.config.globalProperties.$df,
      }
},

further, after I change some values in the form and click save, I can now update the values of the parent node

methods: {
    saveCondition() {
        const currentData = this.df.getNodeFromId(this.nodeId).data;
        const newValues = {
            var1: this.var1,
        };
        const updatedData = { ...currentData, ...newValues };
        this.df.updateNodeDataFromId(this.nodeId, updatedData);
      }
    }
}

I suggest making changes to the source code so that access to NodeID and data is permanent. There is also a more detailed explanation of why options for vue are needed in this case and how to use them.

[jerosoler]

Hello @droppy2014

I don't remember right now why it is declared twice, maybe it's a bug.

Maybe for the new composition API.

The topic of props here you can see an implementation that supports them: #486

If you want you can see an example of implementation in vue 3 here:
Demo: https://jerosoler.github.io/drawflow-vue3-example/
Repo: https://github.com/jerosoler/drawflow-vue3-example