Open
Description
i am getting issue with multiple connection, it is not connecting properly, here i have attached file for that, can you check the code and tell me what's issue in that, why dot is not connected properly ? any help help will really appreciated, here i have attached me code for that
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
</head>
<body>
<div id="drawflow"></div>
<style>
#drawflow {
position: relative;
text-align:initial;
width: 100%;
height: 800px;
border: 1px solid red;
}
</style>
<script>
var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
editor.reroute = true;
editor.start();
editor.import({"drawflow":{
"Home": {
"data": {
"1": {
"id": 1,
"name": "start",
"data": {},
"class": "start",
"html": "\n <span class=\"node-type\">Start</span><div class=\"open_edit_block\">\n <div class=\"title-box\"><i class=\"node-i node-i-grey material-icons-outlined\">start</i></div>\n <div class=\"box\">Keywords enabled\n<hr> <b>Keywords</b> \n \n welcome, home, start </div>\n </div><span class=\"next_step\"></span>\n ",
"typenode": false,
"inputs": {},
"outputs": {
"output_1": {
"connections": [
{}
]
}
},
"pos_x": -932,
"pos_y": 124
},
"2": {
"id": "2",
"name": "cardt",
"data": [],
"class": "cardt",
"html": "<div><span class=\"node-type\">Card</span>\n <input type=\"hidden\" id=\"selected_button_action_hdn_1\" name=\"selected_button_action_hdn_1\" value=\"text\">\n <input type=\"hidden\" id=\"selected_button_action_val_hdn_1\" name=\"selected_button_action_val_hdn_1\" value=\"hjgjhg\">\n <input type=\"hidden\" id=\"selected_button_action_hdn_2\" name=\"selected_button_action_hdn_2\" value=\"text\">\n <input type=\"hidden\" id=\"selected_button_action_val_hdn_2\" name=\"selected_button_action_val_hdn_2\" value=\"hghg\">\n <input type=\"hidden\" id=\"selected_button_action_hdn_3\" name=\"selected_button_action_hdn_3\" value=\"ai\">\n <input type=\"hidden\" id=\"selected_button_action_val_hdn_3\" name=\"selected_button_action_val_hdn_3\" value=\"Answer One\">\n <i class=\"node-i node-i-grey material-icons-outlined\">web_stories</i><span class=\"node-section single\">Single</span>\n <img src=\"http://127.0.0.1:8000/storage/1689063249_Screenshot from 2023-07-06 11-39-39.png\" class=\"small-img\" style=\"width:229px;height:120px\">\n <div class=\"panel\"><b>Ask question s</b><br><small>Subtitle 80 pixels</small></div>\n <div class=\"multiple\"><div class=\"panel\">Yes<div class=\"link output_1\"></div></div><div class=\"panel\">No<div class=\"link output_2\"></div></div><div class=\"panel\">No Match<div class=\"link output_3\"></div></div></div> </div><span class=\"next_step\"></span>",
"typenode": false,
"inputs": {
"input_1": {
"connections": []
}
},
"outputs": {
"output_1": {
"connections": [
{
"node": "46",
"output": "input_1"
}
]
},
"output_2": {
"connections": [
{
"node": "62",
"output": "input_1"
}
]
},
"output_3": {
"connections": [
{
"node": "33",
"output": "input_1"
}
]
},
"output_4": {
"connections": []
}
},
"pos_x": 100,
"pos_y": 50
},
"23": {
"id": 23,
"name": "textt",
"data": [],
"class": "textt",
"html": "<span class=\"node-type\">Text</span><i class=\"node-i node-i-grey material-icons-outlined\">chat</i><span\n class=\"node-section single\">Single</span>\n <div class=\"title-box\">hghg</div>\n <span class=\"next_step\"></span>",
"typenode": false,
"inputs": {
"input_1": {
"connections": [
{
"node": "46",
"input": "output_1"
}
]
}
},
"outputs": {
"output_1": {
"connections": []
}
},
"pos_x": 1054,
"pos_y": 51
},
"33": {
"id": 33,
"name": "ait",
"data": [],
"class": "ait",
"html": "<span class=\"node-type\">Text</span><i class=\"node-i node-i-grey material-icons-outlined\">chat</i><span\n class=\"node-section single\">Single</span>\n <div class=\"title-box\">Answer One</div>\n <span class=\"next_step\"></span>",
"typenode": false,
"inputs": {
"input_1": {
"connections": [
{
"node": "2",
"input": "output_3"
}
]
}
},
"outputs": {
"output_1": {
"connections": []
}
},
"pos_x": 394,
"pos_y": 311
},
"46": {
"id": "46",
"name": "textt",
"data": [],
"class": "textt",
"html": "<span class=\"node-type\">Text</span><i class=\"node-i node-i-grey material-icons-outlined\">chat</i><span class=\"node-section single\">Single</span>\n <input type=\"hidden\" id=\"selected_button_action_hdn_1\" name=\"selected_button_action_hdn_1\" value=\"text\">\n <input type=\"hidden\" id=\"selected_button_action_val_hdn_1\" name=\"selected_button_action_val_hdn_1\" value=\"hghg\">\n <input type=\"hidden\" id=\"selected_button_action_hdn_2\" name=\"selected_button_action_hdn_2\" value=\"text\">\n <input type=\"hidden\" id=\"selected_button_action_val_hdn_2\" name=\"selected_button_action_val_hdn_2\" value=\"jhjhjh\">\n <input type=\"hidden\" id=\"selected_button_action_hdn_3\" name=\"selected_button_action_hdn_3\" value=\"\">\n <input type=\"hidden\" id=\"selected_button_action_val_hdn_3\" name=\"selected_button_action_val_hdn_3\" value=\"undefined\">\n <div class=\"title-box\">hjgjhg</div>\n <div class=\"multiple\"><div class=\"panel\">b1<div class=\"link output_1\"></div></div><div class=\"panel\">b2<div class=\"link output_2\"></div></div>\n </div>\n <span class=\"next_step\"></span>",
"typenode": false,
"inputs": {
"input_1": {
"connections": [
{
"node": "2",
"input": "output_1"
}
]
}
},
"outputs": {
"output_1": {
"connections": [
{
"node": "23",
"output": "input_1"
}
]
},
"output_2": {
"connections": [
{
"node": "92",
"output": "input_1"
}
]
},
"output_3": {
"connections": [
{
"node": "93",
"output": "input_1"
}
]
}
},
"pos_x": 613,
"pos_y": 20
},
"62": {
"id": 62,
"name": "textt",
"data": [],
"class": "textt",
"html": "<span class=\"node-type\">Text</span><i class=\"node-i node-i-grey material-icons-outlined\">chat</i><span\n class=\"node-section single\">Single</span>\n <div class=\"title-box\">hghg</div>\n <span class=\"next_step\"></span>",
"typenode": false,
"inputs": {
"input_1": {
"connections": [
{
"node": "2",
"input": "output_2"
}
]
}
},
"outputs": {
"output_1": {
"connections": []
}
},
"pos_x": 389,
"pos_y": 177
},
"92": {
"id": 92,
"name": "textt",
"data": [],
"class": "textt",
"html": "<span class=\"node-type\">Text</span><i class=\"node-i node-i-grey material-icons-outlined\">chat</i><span\n class=\"node-section single\">Single</span>\n <div class=\"title-box\">jhjhjh</div>\n <span class=\"next_step\"></span>",
"typenode": false,
"inputs": {
"input_1": {
"connections": [
{
"node": "46",
"input": "output_2"
}
]
}
},
"outputs": {
"output_1": {
"connections": []
}
},
"pos_x": 1128,
"pos_y": 161
},
"93": {
"id": 93,
"name": "audiot",
"data": {},
"class": "audiot",
"html": "\n <span class=\"node-type\">Audio</span> <input type=\"hidden\" id=\"selected_button_action_hdn_1\" name=\"selected_button_action_hdn_1\" value=\"\">\n <input type=\"hidden\" id=\"selected_button_action_val_hdn_1\" name=\"selected_button_action_val_hdn_1\" value=\"\">\n <input type=\"hidden\" id=\"selected_button_action_hdn_2\" name=\"selected_button_action_hdn_2\" value=\"\">\n <input type=\"hidden\" id=\"selected_button_action_val_hdn_2\" name=\"selected_button_action_val_hdn_2\" value=\"\">\n <input type=\"hidden\" id=\"selected_button_action_hdn_3\" name=\"selected_button_action_hdn_3\" value=\"\">\n <input type=\"hidden\" id=\"selected_button_action_val_hdn_3\" name=\"selected_button_action_val_hdn_3\" value=\"\"><div class=\"align-items-start\"><i class=\"node-i node-i-grey material-icons-outlined\">mic</i><span class=\"node-section single\">Single</span>\n <div class=\"title-box\">\n <audio controls class=\"embed-responsive-item\">\n <source src=\"https://download.samplelib.com/mp3/sample-9s.mp3\">\n </audio>\n </div>\n <div class=\"multiple\">\n <div class=\"panel\">Main menu<div class=\"link output_1\"></div></div>\n <div class=\"panel\">Restaurants<div class=\"link output_2\"></div></div>\n <div class=\"panel\">Accommodation<div class=\"link output_3\"></div></div>\n </div>\n </div><span class=\"next_step\"></span>\n ",
"typenode": false,
"inputs": {
"input_1": {
"connections": [
{
"node": "46",
"input": "output_3"
}
]
}
},
"outputs": {
"output_1": {
"connections": []
},
"output_2": {
"connections": []
},
"output_3": {
"connections": []
},
"output_4": {
"connections": []
}
},
"pos_x": 966.1499938964844,
"pos_y": 247
}
}
},
"Other": {
"data": {
"1": {
"id": 1,
"name": "start",
"data": {},
"class": "start",
"html": "\n <span class=\"node-type\">Start</span><div class=\"open_edit_block\">\n <div class=\"title-box\"><i class=\"node-i node-i-grey material-icons-outlined\">start</i></div>\n <div class=\"box\"><div class=\"form-check form-switch\">\n<input class=\"form-check-input\" type=\"checkbox\" id=\"keywordsON\"><label class=\"form-check-label\" for=\"keywordsOFF\">Keywords enabled</label></div>\n </div>\n </div><span class=\"next_step\"></span>\n ",
"typenode": false,
"inputs": {},
"outputs": {
"output_1": {
"connections": [
{}
]
}
},
"pos_x": 150,
"pos_y": 150
}
}
}
}});
</script>
</body>
</html>