this.drawflow.drawflow is undefined when trying to import file

[danielpc12]

i've exported the file using the editor.export() method.

Then, when i try to load that file, it displays me the error and doesn't load the nodes.

This is the data i'm trying to import:

{
"drawflow": {
"Home": {
"data": {
"1": {
"id": 1,
"name": "Number",
"data": {
"Number": 0
},
"class": "Number",
"html": "Number",
"typenode": "vue",
"inputs": {},
"outputs": {
"output_1": {
"connections": []
}
},
"pos_x": -1445.183349609375,
"pos_y": 115
},
"2": {
"id": 2,
"name": "Number",
"data": {
"Number": 0
},
"class": "Number",
"html": "Number",
"typenode": "vue",
"inputs": {},
"outputs": {
"output_1": {
"connections": []
}
},
"pos_x": -1349.183349609375,
"pos_y": 391
},
"3": {
"id": 3,
"name": "Sub",
"data": {
"Number1": 0,
"Number2": 0,
"Result": 0
},
"class": "Sub",
"html": "Sub",
"typenode": "vue",
"inputs": {
"input_1": {
"connections": []
},
"input_2": {
"connections": []
}
},
"outputs": {
"output_1": {
"connections": []
}
},
"pos_x": -924.183349609375,
"pos_y": 276
}
}
}
}
}

[jerosoler]

I see you are using vue.
Have you done an editor.start() before?
Have you registered nodes before editor.import(YOURFile)?

View example with vue 3:
https://github.com/jerosoler/drawflow-vue3-example/blob/master/src/components/drawflow.vue

Link Summary:

const id = document.getElementById("drawflow");
       editor.value = new Drawflow(id, Vue, internalInstance.appContext.app._context);
       editor.value.start();
       
       editor.value.registerNode('Node1', Node1, {}, {});
       editor.value.registerNode('Node2', Node2, {}, {});
       editor.value.registerNode('Node3', Node3, {}, {});
       editor.value.import({"drawflow":{"Home":{"data":{"5":{"id":5,"name":"Node2","data":{"script":"(req,res) => {\n console.log(req);\n}"},"class":"Node2","html":"Node2","typenode":"vue","inputs":{"input_1":{"connections":[{"node":"6","input":"output_1"}]}},"outputs":{"output_1":{"connections":[]},"output_2":{"connections":[]}},"pos_x":1000,"pos_y":117},"6":{"id":6,"name":"Node1","data":{"url":"localhost/add", "method": "post"},"class":"Node1","html":"Node1","typenode":"vue","inputs":{},"outputs":{"output_1":{"connections":[{"node":"5","output":"input_1"}]}},"pos_x":137,"pos_y":89}}}}})

[danielpc12]

I have used editor.start() when the project loads (onMount() method)

I have a button that load the selected file, but im getting the same issue.

[jerosoler]

code.flow is text or object?
Try with JSON.parse

[danielpc12]

Worked!!!
But now i got another issue, when the nodes loads they appear without the data and connections. And when i try to make the connections displays an error.

[jerosoler]

View node example:
https://github.com/jerosoler/drawflow-vue3-example/blob/master/src/components/nodes/node2.vue

[danielpc12]

Right now is loading with the connections but can't make new ones.

And when i try to change the number value displays another error.

Gracias por las respuestas / thanks for answering

[jerosoler]

Pass link to codesanbox example.
For debugging.

[danielpc12]

I've never used Codesandbox before, but this is the link: https://codesandbox.io/s/loving-babbage-mxtwhe

[jerosoler]

Codesandbox produce error:

[danielpc12]

I don't know why is producing it, but this is the repo link: https://github.com/danielpc12/front-test

The project compiles perfect locally

[jerosoler]

When you modify the value of a field in the case of number.

You are creating a new assignment to the node data.

See in this case.

data:
Number: 0
number: "2"

[danielpc12]

Where could be the issue? How can i solve it?. Sorry for asking all this things, it's been a lot of weeks trying to solve the problem but can't make it work

[jerosoler]

Look to modify the "data" of the nodes to lowercase.

"Number" to "number"

[danielpc12]

Actually the data of the Number node is in lowercase