New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Lines not showing on import data #270
Comments
Thanks!!
|
Yes, before the import |
Mmmmm... Other issue with same problem #2 The #drawflow css is height property? |
The height is "px" or "%"? Can you try 800px? |
Try with fixesd value. To discart. |
The height it's 100%, with 800px not showing too. |
Try adding to css text-align: initial; and the css before draflow div. <style>
#drawflow {
text-align:initial;
width: 100%;
height: 98vw;
border: 1px solid red;
}
</style>
<div id="drawflow"></div> |
Show errors in console? Try with data: editor.import( {"drawflow":{"Home":{"data":{"3":{"id":3,"name":"reply_message","data":{"reply":"[[name]], your query for outstanding [[find.text]] is [[amount]]"},"class":"reply_message","html":"\n <div>\n <div class=\"title-box\"><svg class=\"icon\">\n <use xlink:href=\"#arroba\"></use></svg> Reply message</div>\n <div class=\"content-box\">\n <textarea class=\"resize-vertical form-control\" required data-parsley-trigger=\"change blur\" data-parsley-errors-messages-disabled data-parsley-required-message=\"Value is required!\" placeholder=\"Enter reply message\" placeholder=\"Enter reply message\" df-reply ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\"></textarea>\n </div>\n </div>\n ","typenode":false,"inputs":{"input_1":{"connections":[{"node":"6","input":"output_1"}]}},"outputs":{"output_1":{"connections":[]},"output_2":{"connections":[]}},"pos_x":910,"pos_y":52},"4":{"id":4,"name":"WhatsApp","data":{},"class":"WhatsApp","html":"<div class=\"blockelem noselect block\">\n <input type=\"hidden\" name=\"blockelemtype\" class=\"blockelemtype\" value=\"5\">\n <input type=\"hidden\" name=\"blockid\" class=\"blockid\" value=\"0\">\n <div class=\"blockyleft\"><img src=\"/images/workflow/WhatsApp.png\" class=\"blockyname\"><label class=\"blockyname\">WhatsApp</label></div> \n <div class=\"blockydiv\"></div><div class=\"blockyinfo\">Triggers the start of the work flow</div></div>","typenode":false,"inputs":{},"outputs":{"output_1":{"connections":[{"node":"5","output":"input_1"}]}},"pos_x":18,"pos_y":55},"5":{"id":5,"name":"find","data":{"find":"balance"},"class":"find","html":"\n <div>\n <div class=\"title-box\"><svg class=\"icon\">\n <use xlink:href=\"#magnifying-glass\"></use></svg> Find</div>\n <div class=\"content-box\">\n <input type=\"text\" class=\"form-control\" required data-parsley-trigger=\"change blur\" data-parsley-errors-messages-disabled placeholder=\"Enter search text\" df-find>\n </div>\n </div>\n ","typenode":false,"inputs":{"input_1":{"connections":[{"node":"4","input":"output_1"}]}},"outputs":{"output_1":{"connections":[{"node":"6","output":"input_1"}]},"output_2":{"connections":[]}},"pos_x":295,"pos_y":60},"6":{"id":6,"name":"db_connection","data":{"connection":"","query":"select [[amount]] from pending_payment"},"class":"db_connection","html":"\n <div>\n <div class=\"title-box\"><svg class=\"icon\">\n <use xlink:href=\"#database\"></use></svg> Database query</div>\n <div class=\"content-box\">\n <div class=\"input-group\">\n <select class=\"form-control\" name=\"connections\" id=\"connections\" required data-parsley-trigger=\"change blur\" placeholder=\"Select connection\" data-parsley-errors-messages-disabled df-connection>\n </select>\n </div>\n <div class=\"input-group\">\n <textarea class=\"form-control resize-vertical\" required data-parsley-trigger=\"change blur\" data-parsley-errors-messages-disabled data-parsley-required-message=\"Value is required!\" placeholder=\"Type query here\" df-query ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\"></textarea>\n </div>\n </div>\n </div>\n ","typenode":false,"inputs":{"input_1":{"connections":[{"node":"5","input":"output_1"}]}},"outputs":{"output_1":{"connections":[{"node":"3","output":"input_1"}]},"output_2":{"connections":[{"node":"7","output":"input_1"}]}},"pos_x":573,"pos_y":55},"7":{"id":7,"name":"reply_message","data":{"reply":"Sorry, I didn't find find anything"},"class":"reply_message","html":"\n <div>\n <div class=\"title-box\"><svg class=\"icon\">\n <use xlink:href=\"#arroba\"></use></svg> Reply message</div>\n <div class=\"content-box\">\n <textarea class=\"resize-vertical form-control\" required data-parsley-trigger=\"change blur\" data-parsley-errors-messages-disabled data-parsley-required-message=\"Value is required!\" placeholder=\"Enter reply message\" placeholder=\"Enter reply message\" df-reply ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\"></textarea>\n </div>\n </div>\n ","typenode":false,"inputs":{"input_1":{"connections":[{"node":"6","input":"output_2"}]}},"outputs":{"output_1":{"connections":[]},"output_2":{"connections":[]}},"pos_x":911,"pos_y":216}}}}} ); Can you pass you export data? |
Your data: My data: |
Your data is correct: <!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>
<style>
#drawflow {
width: 800px;
height: 800px;
border: 1px solid red;
}
</style>
<div id="drawflow"></div>
<script>
var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
editor.start();
editor.import( {"drawflow":{"Home":{"data":{"6":{"id":6,"data":{},"html":"\n <div>\n <div class=\"title-box inicio\"><i class=\"fas fa-play\"></i> Início</div>\n </div>\n ","name":"inicio","class":"inicio","pos_x":-55.42857142857143,"pos_y":388,"inputs":{},"outputs":{"output_1":{"connections":[{"node":"7","output":"input_1"}]}},"typenode":false},"7":{"id":7,"data":{"nome_menu1":"Suporte 2","text_inferior":"Mens Inferior","text_superior":"Mens Superior","quantidade_menus":"1"},"html":"\n <div>\n <div class=\"title-box\"><i class=\"fas fa-comment-alt\"></i> Menu </div>\n <div class=\"box\">\n <p style=\"font-weight: 600;\">Tag's disponíveis: {nome} {telefone}</p>\n <p>Mensagem superior:</p>\n <textarea df-text_superior> </textarea><input type=\"text\" df-nome_menu1 placeholder=\"Nome do menu 1\"><p>Mensagem inferior:</p>\n <textarea df-text_inferior> </textarea>\n </div>\n </div>\n ","name":"multiple","class":"multiple","pos_x":145.57142857142858,"pos_y":207,"inputs":{"input_1":{"connections":[{"node":"6","input":"output_1"}]}},"outputs":{"output_1":{"connections":[{"node":"8","output":"input_1"},{"node":"9","output":"input_1"},{"node":"10","output":"input_1"}]}},"typenode":false},"8":{"id":8,"data":{"text_bot":"Msg despedida"},"html":"\n <div>\n <div class=\"title-box\"><i class=\"fas fa-robot\"></i> BOT </div>\n <div class=\"box\">\n <p style=\"font-weight: 600;\">Tag's disponíveis: {nomes} {telefone}</p>\n <p>Mensagem de despedida:</p>\n <textarea df-text_bot> </textarea>\n </div>\n </div>\n ","name":"bot","class":"bot","pos_x":517.5714285714286,"pos_y":26,"inputs":{"input_1":{"connections":[{"node":"7","input":"output_1"}]}},"outputs":{},"typenode":false},"9":{"id":9,"data":{"chat_usuario":"67","text_usuario":"Msg despedida"},"html":"\n <div>\n <div class=\"title-box\"><i class=\"fas fa-comments\"></i> Chat Usuário </div>\n <div class=\"box\"> \n <div class=\"div-select\">\n <select df-chat_usuario><option value=\"\">Selecione o usuário</option><option value=\"67\">Giovanni Pucci</option><option value=\"265\">Sony</option><option value=\"279\">Sony 1</option></select>\n </div>\n <p style=\"font-weight: 600;\">Tag's disponíveis: {nome} {telefone}</p>\n <p>Mensagem de despedida:</p>\n <textarea df-text_usuario> </textarea>\n </div>\n </div>\n ","name":"chat_usuario","class":"chat_usuario","pos_x":550.5714285714286,"pos_y":280,"inputs":{"input_1":{"connections":[{"node":"7","input":"output_1"}]}},"outputs":{},"typenode":false},"10":{"id":10,"data":{"chat_setor":"","text_setor":"Msg despedida {nome}","chat_usuario":"1"},"html":"\n <div>\n <div class=\"title-box\"><i class=\"fas fa-comments\"></i> Chat Setor </div>\n <div class=\"box\">\n <div class=\"div-select\">\n <select df-chat_usuario><option value=\"\">Selecione o setor</option><option value=\"1\">Suporte 2</option></select>\n </div>\n <p style=\"font-weight: 600;\">Tag's disponíveis: {nome} {telefone}</p>\n <p>Mensagem de despedida:</p>\n <textarea df-text_setor> </textarea>\n </div>\n </div>\n ","name":"chat_setor","class":"chat_setor","pos_x":551.8571428571429,"pos_y":574.5714285714286,"inputs":{"input_1":{"connections":[{"node":"7","input":"output_1"}]}},"outputs":{},"typenode":false}}}}} );
</script>
</body>
</html> And works. Are you using a CSS library? Can you remove the css that is not necessary? Can you pass an example of your code to find the error? |
I used your theme generator with some alterations.I believe it might be some function that is not calculating the coordinates
|
You can delay the import of the json 250 ms. Or change mounted with nextTick: mounted() {
this.$nextTick(() => {
this.init()
});
}, |
I tried it both ways, but neither worked |
This problem occurs when javascript is loaded before css. Correct example: <!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>
<style>
#drawflow {
position: relative;
width: 600px;
height: 600px;
border: 1px solid red;
}
</style>
<div id="drawflow"></div>
<script>
var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
editor.start();
editor.import( {"drawflow":{"Home":{"data":{"6":{"id":6,"data":{},"html":"\n <div>\n <div class=\"title-box inicio\"><i class=\"fas fa-play\"></i> Início</div>\n </div>\n ","name":"inicio","class":"inicio","pos_x":-55.42857142857143,"pos_y":388,"inputs":{},"outputs":{"output_1":{"connections":[{"node":"7","output":"input_1"}]}},"typenode":false},"7":{"id":7,"data":{"nome_menu1":"Suporte 2","text_inferior":"Mens Inferior","text_superior":"Mens Superior","quantidade_menus":"1"},"html":"\n <div>\n <div class=\"title-box\"><i class=\"fas fa-comment-alt\"></i> Menu </div>\n <div class=\"box\">\n <p style=\"font-weight: 600;\">Tag's disponíveis: {nome} {telefone}</p>\n <p>Mensagem superior:</p>\n <textarea df-text_superior> </textarea><input type=\"text\" df-nome_menu1 placeholder=\"Nome do menu 1\"><p>Mensagem inferior:</p>\n <textarea df-text_inferior> </textarea>\n </div>\n </div>\n ","name":"multiple","class":"multiple","pos_x":145.57142857142858,"pos_y":207,"inputs":{"input_1":{"connections":[{"node":"6","input":"output_1"}]}},"outputs":{"output_1":{"connections":[{"node":"8","output":"input_1"},{"node":"9","output":"input_1"},{"node":"10","output":"input_1"}]}},"typenode":false},"8":{"id":8,"data":{"text_bot":"Msg despedida"},"html":"\n <div>\n <div class=\"title-box\"><i class=\"fas fa-robot\"></i> BOT </div>\n <div class=\"box\">\n <p style=\"font-weight: 600;\">Tag's disponíveis: {nomes} {telefone}</p>\n <p>Mensagem de despedida:</p>\n <textarea df-text_bot> </textarea>\n </div>\n </div>\n ","name":"bot","class":"bot","pos_x":517.5714285714286,"pos_y":26,"inputs":{"input_1":{"connections":[{"node":"7","input":"output_1"}]}},"outputs":{},"typenode":false},"9":{"id":9,"data":{"chat_usuario":"67","text_usuario":"Msg despedida"},"html":"\n <div>\n <div class=\"title-box\"><i class=\"fas fa-comments\"></i> Chat Usuário </div>\n <div class=\"box\"> \n <div class=\"div-select\">\n <select df-chat_usuario><option value=\"\">Selecione o usuário</option><option value=\"67\">Giovanni Pucci</option><option value=\"265\">Sony</option><option value=\"279\">Sony 1</option></select>\n </div>\n <p style=\"font-weight: 600;\">Tag's disponíveis: {nome} {telefone}</p>\n <p>Mensagem de despedida:</p>\n <textarea df-text_usuario> </textarea>\n </div>\n </div>\n ","name":"chat_usuario","class":"chat_usuario","pos_x":550.5714285714286,"pos_y":280,"inputs":{"input_1":{"connections":[{"node":"7","input":"output_1"}]}},"outputs":{},"typenode":false},"10":{"id":10,"data":{"chat_setor":"","text_setor":"Msg despedida {nome}","chat_usuario":"1"},"html":"\n <div>\n <div class=\"title-box\"><i class=\"fas fa-comments\"></i> Chat Setor </div>\n <div class=\"box\">\n <div class=\"div-select\">\n <select df-chat_usuario><option value=\"\">Selecione o setor</option><option value=\"1\">Suporte 2</option></select>\n </div>\n <p style=\"font-weight: 600;\">Tag's disponíveis: {nome} {telefone}</p>\n <p>Mensagem de despedida:</p>\n <textarea df-text_setor> </textarea>\n </div>\n </div>\n ","name":"chat_setor","class":"chat_setor","pos_x":551.8571428571429,"pos_y":574.5714285714286,"inputs":{"input_1":{"connections":[{"node":"7","input":"output_1"}]}},"outputs":{},"typenode":false}}}}} );
</script>
</body>
</html> Incorrect example: <!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>
<script>
var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
editor.start();
editor.import( {"drawflow":{"Home":{"data":{"6":{"id":6,"data":{},"html":"\n <div>\n <div class=\"title-box inicio\"><i class=\"fas fa-play\"></i> Início</div>\n </div>\n ","name":"inicio","class":"inicio","pos_x":-55.42857142857143,"pos_y":388,"inputs":{},"outputs":{"output_1":{"connections":[{"node":"7","output":"input_1"}]}},"typenode":false},"7":{"id":7,"data":{"nome_menu1":"Suporte 2","text_inferior":"Mens Inferior","text_superior":"Mens Superior","quantidade_menus":"1"},"html":"\n <div>\n <div class=\"title-box\"><i class=\"fas fa-comment-alt\"></i> Menu </div>\n <div class=\"box\">\n <p style=\"font-weight: 600;\">Tag's disponíveis: {nome} {telefone}</p>\n <p>Mensagem superior:</p>\n <textarea df-text_superior> </textarea><input type=\"text\" df-nome_menu1 placeholder=\"Nome do menu 1\"><p>Mensagem inferior:</p>\n <textarea df-text_inferior> </textarea>\n </div>\n </div>\n ","name":"multiple","class":"multiple","pos_x":145.57142857142858,"pos_y":207,"inputs":{"input_1":{"connections":[{"node":"6","input":"output_1"}]}},"outputs":{"output_1":{"connections":[{"node":"8","output":"input_1"},{"node":"9","output":"input_1"},{"node":"10","output":"input_1"}]}},"typenode":false},"8":{"id":8,"data":{"text_bot":"Msg despedida"},"html":"\n <div>\n <div class=\"title-box\"><i class=\"fas fa-robot\"></i> BOT </div>\n <div class=\"box\">\n <p style=\"font-weight: 600;\">Tag's disponíveis: {nomes} {telefone}</p>\n <p>Mensagem de despedida:</p>\n <textarea df-text_bot> </textarea>\n </div>\n </div>\n ","name":"bot","class":"bot","pos_x":517.5714285714286,"pos_y":26,"inputs":{"input_1":{"connections":[{"node":"7","input":"output_1"}]}},"outputs":{},"typenode":false},"9":{"id":9,"data":{"chat_usuario":"67","text_usuario":"Msg despedida"},"html":"\n <div>\n <div class=\"title-box\"><i class=\"fas fa-comments\"></i> Chat Usuário </div>\n <div class=\"box\"> \n <div class=\"div-select\">\n <select df-chat_usuario><option value=\"\">Selecione o usuário</option><option value=\"67\">Giovanni Pucci</option><option value=\"265\">Sony</option><option value=\"279\">Sony 1</option></select>\n </div>\n <p style=\"font-weight: 600;\">Tag's disponíveis: {nome} {telefone}</p>\n <p>Mensagem de despedida:</p>\n <textarea df-text_usuario> </textarea>\n </div>\n </div>\n ","name":"chat_usuario","class":"chat_usuario","pos_x":550.5714285714286,"pos_y":280,"inputs":{"input_1":{"connections":[{"node":"7","input":"output_1"}]}},"outputs":{},"typenode":false},"10":{"id":10,"data":{"chat_setor":"","text_setor":"Msg despedida {nome}","chat_usuario":"1"},"html":"\n <div>\n <div class=\"title-box\"><i class=\"fas fa-comments\"></i> Chat Setor </div>\n <div class=\"box\">\n <div class=\"div-select\">\n <select df-chat_usuario><option value=\"\">Selecione o setor</option><option value=\"1\">Suporte 2</option></select>\n </div>\n <p style=\"font-weight: 600;\">Tag's disponíveis: {nome} {telefone}</p>\n <p>Mensagem de despedida:</p>\n <textarea df-text_setor> </textarea>\n </div>\n </div>\n ","name":"chat_setor","class":"chat_setor","pos_x":551.8571428571429,"pos_y":574.5714285714286,"inputs":{"input_1":{"connections":[{"node":"7","input":"output_1"}]}},"outputs":{},"typenode":false}}}}} );
</script>
<style>
#drawflow {
position: relative;
width: 600px;
height: 600px;
border: 1px solid red;
}
</style>
</body>
</html> Try adding the css in the head of html. |
The problem was a Vue stepper, that's right now. thks |
Hi @jerosoler , primally thanks for your library.
My problem happens after the import the data, only after moving the node the lines showing.
Before:
After:
I took a test with the function updateConnectionNodes, but not resolve the problem
My code:
You can help me please?
The text was updated successfully, but these errors were encountered: