Import Failed: The connections doesn't show correctly

[MTSebastianAguirre]

Hi @jerosoler. I have a issue with the import method. When I try to import a project, the library does well, the issue comes when I try to change to another module: 1) The connections that I made, doesn't show and when a try to drag a node, a error appears in the console (Image bellow) 2) The connections shows but when a try to drag the node, the connection doesn't follow the node and a error appears in the console (error console and error bellow)

[jerosoler]

Hello,

Is it importing after doing a start? Is there a "Home" module in your export? Is it loading the css before?

Can you show your Export?

Check some cases first:

• https://github.com/jerosoler/Drawflow/issues/58
• https://github.com/jerosoler/Drawflow/issues/196
• https://github.com/jerosoler/Drawflow/issues/222
• https://github.com/jerosoler/Drawflow/issues/319
• https://github.com/jerosoler/Drawflow/issues/267

Also try exporting and importing. Does this cause you an error?

var exportvalue = null;
exportvalue = editor.export();
editor.import(exportvalue);

[MTSebastianAguirre]

Thank you so much for your response @jerosoler.

Is it importing after doing a start?

Yes, I import the project after doing the drawflow.start().

Is there a "Home" module in your export?

Yes, it is.

Is it loading the css before?

Yes, I loading the css in my index page.

Can you show your Export?

{ "drawflow": { "Home": { "data": {} }, "zxc": { "data": { "1": { "id": 5, "name": "BATTERY", "data": [ { "battery": "0" } ], "class": "", "html": "\n <div class=\"row\">\n <div class=\"col-12 d-flex justify-content-center\">\n <span class=\"h6\">\n BATTERY Millivolts\n </span>\n </div>\n </div>", "typenode": false, "inputs": {}, "outputs": { "output_1": { "connections": [ { "node": "7", "output": "input_1" } ] } }, "pos_x": -285, "pos_y": 155 }, "2": { "id": 6, "name": "CONSTANT", "data": [ { "constant": 12000 } ], "class": "", "html": "\n <div class=\"row\">\n <div class=\"col-12 d-flex justify-content-center\">\n <span class=\"h6\">12000</span>\n </div>\n </div>", "typenode": false, "inputs": {}, "outputs": { "output_1": { "connections": [ { "node": "7", "output": "input_2" } ] } }, "pos_x": -283, "pos_y": 224 }, "3": { "id": 7, "name": "ADDITION", "data": "", "class": "", "html": "\n <div class=\"row\">\n <div class=\"col-4\">\n <div class=\"col-12\">\n <span class=\"h6\">a</span>\n </div>\n <div class=\"col-12\">\n <span class=\"h6\">b</span>\n </div>\n </div>\n <div class=\"col-8\">\n <span class=\"h4\">A &plus; B</span>\n </div>\n </div>", "typenode": false, "inputs": { "input_1": { "connections": [ { "node": "5", "input": "output_1" } ] }, "input_2": { "connections": [ { "node": "6", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "8", "output": "input_1" } ] } }, "pos_x": -9, "pos_y": 179 }, "4": { "id": 8, "name": "DIGITAL_ACC_IN", "data": { "numero_piloto": 3, "icono": "imagen-4", "nombre": "Timbre Bajar", "status": true, "inBlock": true }, "class": "", "html": "\n <div class=\"row\">\n <div class=\"col-7 text-left\">\n <h6 class=\"card-category\">\n <small>OUTPUT DIGITAL_ACC_IN</small>\n </h6>\n </div>\n \n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <span class=\"h6\">Timbre Bajar</span>\n <p class=\"category\">Piloto</p>\n </div>\n </div>", "typenode": false, "inputs": { "input_1": { "connections": [ { "node": "7", "input": "output_1" } ] } }, "outputs": {}, "pos_x": 296, "pos_y": 158 } } }, "asd": { "data": { "1": { "id": 3, "name": "AND", "data": "2", "class": "", "html": "\n <div class=\"row\">\n <div class=\"col-12\">\n <p class=\"h1 text-center m-0\">&amp;</span>\n </div>\n </div>", "typenode": false, "inputs": { "input_1": { "connections": [ { "node": "4", "input": "output_1" } ] }, "input_2": { "connections": [ { "node": "5", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "6", "output": "input_1" } ] } }, "pos_x": 31, "pos_y": 154 }, "2": { "id": 4, "name": "TRUE", "data": "", "class": "", "html": "\n <div class=\"row\">\n <div class=\"col-12\">\n <span class=\"h6\">TRUE</span>\n </div>\n </div>", "typenode": false, "inputs": {}, "outputs": { "output_1": { "connections": [ { "node": "3", "output": "input_1" } ] } }, "pos_x": -236, "pos_y": 132 }, "3": { "id": 5, "name": "TRUE", "data": "", "class": "", "html": "\n <div class=\"row\">\n <div class=\"col-12\">\n <span class=\"h6\">TRUE</span>\n </div>\n </div>", "typenode": false, "inputs": {}, "outputs": { "output_1": { "connections": [ { "node": "3", "output": "input_2" } ] } }, "pos_x": -235, "pos_y": 204 }, "4": { "id": 6, "name": "PWM_ACC_IN", "data": { "numero_salida": 50, "boton": "255", "limite": 4, "eme_15": true, "eme_w_15": true, "arranque_suave": true, "pwm": true, "logica_activa": 0, "pin": { "pin": "C:19", "numero_entrada": 13, "numero_salida": 3, "funcion": "IO", "pull_up": true, "pull_down": true, "amp": false, "logica_act_entrada": [ true, true, true, true, true, true, false ], "logica_act_salida": 0, "pwm": true, "hb": false, "limite_corriente": 5, "status": true }, "nombre": "M10-0-Sal-4", "inBlock": true }, "class": "", "html": "\n <div class=\"row\">\n <div class=\"col-7 text-left\">\n <h6 class=\"card-category\">\n <small>OUTPUT PWM_ACC_IN</small>\n </h6>\n </div>\n <div class=\"col-5 text-right\" *ngIf=\"data['pin']\">\n <h6 class=\"card-category text-primary\">\n <small><strong>C:19</strong></small>\n </h6>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <span class=\"h6\">M10-0-Sal-4</span>\n <p class=\"category\">Positiva</p>\n </div>\n </div>", "typenode": false, "inputs": { "input_1": { "connections": [ { "node": "3", "input": "output_1" } ] } }, "outputs": {}, "pos_x": 305, "pos_y": 136 } } }, "qwe": { "data": { "1": { "id": 1, "name": "DIGITAL", "data": { "numero_boton": 0, "icono": "imagen-3", "salida": "255", "bigger_on_stage": "3", "push_button": false, "long_pulse": true, "s15": true, "nombre": "Luz interna", "status": true }, "class": "", "html": "\n <div class=\"row\">\n <div class=\"col-7 text-left\">\n <h6 class=\"card-category\">\n <small>INPUT DIGITAL</small>\n </h6>\n </div>\n \n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <span class=\"h6\">Luz interna</span>\n <p class=\"category\">Botón</p>\n </div>\n </div>", "typenode": false, "inputs": {}, "outputs": { "output_1": { "connections": [ { "node": "2", "output": "input_1" } ] } }, "pos_x": -209, "pos_y": 104 }, "2": { "id": 2, "name": "DIGITAL", "data": { "numero_piloto": 2, "icono": "imagen-3", "nombre": "Cinturón Cond.", "status": true, "inBlock": true }, "class": "", "html": "\n <div class=\"row\">\n <div class=\"col-7 text-left\">\n <h6 class=\"card-category\">\n <small>OUTPUT DIGITAL</small>\n </h6>\n </div>\n \n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <span class=\"h6\">Cinturón Cond.</span>\n <p class=\"category\">Piloto</p>\n </div>\n </div>", "typenode": false, "inputs": { "input_1": { "connections": [ { "node": "1", "input": "output_1" } ] } }, "outputs": {}, "pos_x": 383.21875, "pos_y": 240 } } } } }

[jerosoler]

The export is not generated by drawflow right?

The problem is:

"data": {
                "1": {
                    "id": 5,
                    "name": "BATTERY",
                    "data": [

It would have to be like this:

"data": {
                "5": {
                    "id": 5,
                    "name": "BATTERY",
                    "data": [

It is probably generating this from the server. A node id is unique even if it is in another module.

[MTSebastianAguirre]

The problem is: "data": { "1": { "id": 5, "name": "BATTERY", "data": [ It would have to be like this: "data": { "5": { "id": 5, "name": "BATTERY", "data": [

It Works!, I had a error with the ID like you said. Thank you so much honestly @jerosoler, amazing library btw.