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