forked from jerosoler/Drawflow
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest.html
120 lines (94 loc) · 14.3 KB
/
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!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>
<script src="drawflow.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/drawflow.min.css" />
</head>
<body>
<div class="but" onclick="importa()">Import1</div>
<div class="but" onclick="import2()">Import2</div>
<div class="but" onclick="export2()">Export</div>
<div class="but" onclick="importexport()">ImportFromExport</div>
<div id="drawflow"></div>
<script>
var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
editor.start();
var html = `
<div><input type="text" df-name></div>
`;
var data = { "name": '' };
var testNode = document.createElement("div");
testNode.innerHTML = 'Hola caracola <input type="text" df-name>';
editor.registerNode("testNode", testNode);
//editor.addNode('github', 0, 1, 150, 300, 'github', data, html);
editor.addNode('github', 0, 1, 200, 250, 'github', data, "testNode", true);
setTimeout(function() {
editor.addNode('github', 1, 1, 300, 350, 'github', data, "testNode", true);
setTimeout(function() {
editor.addNode('github', 1, 1, 350, 350, 'github', data, "testNode", true);
}, 1000);
}, 1000);
editor.addNode('github', 0, 1, 0, 375, 'github', data, "<b>Holaaa</b>");
editor.addNode('github', 0, 1, 100, 400, 'github', data, "<b>Adios</b>");
//editor.import({"drawflow":{"Home":{"data":{"1":{"id":1,"name":"github","data":{"name":""},"class":"github","html":"\n <div><input type=\"text\" df-name></div>\n ","typenode":false,"inputs":{},"outputs":{"output_1":{"connections":[]}},"pos_x":122,"pos_y":191},"2":{"id":2,"name":"github","data":{"name":""},"class":"github","html":"testNode","typenode":true,"inputs":{},"outputs":{"output_1":{"connections":[]}},"pos_x":190,"pos_y":334}}}}});
var exportvalue = null;
function export2(){
exportvalue = editor.export();
}
function importexport() {
editor.import(exportvalue);
}
function importa() {
console.log(caracola);
editor.import(caracola);
}
function import2() {
editor.import(caracola2);
}
/*
var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
editor.start();
var caracola = {"drawflow":{"Home":{"data":{"1":{"id":1,"name":"welcome","data":{},"class":"welcome","html":"\n <div>\n <div class=\"title-box\">👏 Welcome!!</div>\n <div class=\"box\">\n <p>Simple flow library <b>demo</b>\n <a href=\"https://github.com/jerosoler/Drawflow\" target=\"_blank\">Drawflow</a> by <b>Jero Soler</b></p><br>\n\n <p>Multiple input / outputs<br>\n Data sync nodes<br>\n Import / export<br>\n Modules support<br>\n Simple use<br>\n Type: Fixed or Edit<br>\n Events: view console<br>\n Pure Javascript<br>\n </p>\n <br>\n <p><b><u>Shortkeys:</u></b></p>\n <p>🎹 <b>Delete</b> for remove selected<br>\n 💠 Mouse Left Click == Move<br>\n ❌ Mouse Right == Delete Option<br>\n 🔍 Ctrl + Wheel == Zoom<br>\n 📱 Mobile support<br>\n ...</p>\n </div>\n </div>\n ","inputs":{},"outputs":{},"pos_x":50,"pos_y":50},"2":{"id":2,"name":"slack","data":{},"class":"slack","html":"\n <div>\n <div class=\"title-box\"><i class=\"fab fa-slack\"></i> Slack chat message</div>\n </div>\n ","inputs":{"input_1":{"connections":[{"node":"7","input":"output_1"}]}},"outputs":{},"pos_x":1028,"pos_y":87},"3":{"id":3,"name":"telegram","data":{"channel":"channel_2"},"class":"telegram","html":"\n <div>\n <div class=\"title-box\"><i class=\"fab fa-telegram-plane\"></i> Telegram bot</div>\n <div class=\"box\">\n <p>Send to telegram</p>\n <p>select channel</p>\n <select df-channel>\n <option value=\"channel_1\">Channel 1</option>\n <option value=\"channel_2\">Channel 2</option>\n <option value=\"channel_3\">Channel 3</option>\n <option value=\"channel_4\">Channel 4</option>\n </select>\n </div>\n </div>\n ","inputs":{"input_1":{"connections":[{"node":"7","input":"output_1"}]}},"outputs":{},"pos_x":1032,"pos_y":184},"4":{"id":4,"name":"email","data":{},"class":"email","html":"\n <div>\n <div class=\"title-box\"><i class=\"fas fa-at\"></i> Send Email </div>\n </div>\n ","inputs":{"input_1":{"connections":[{"node":"5","input":"output_1"}]}},"outputs":{},"pos_x":1033,"pos_y":439},"5":{"id":5,"name":"template","data":{"template":"Write your template"},"class":"template","html":"\n <div>\n <div class=\"title-box\"><i class=\"fas fa-code\"></i> Template</div>\n <div class=\"box\">\n Ger Vars\n <textarea df-template></textarea>\n Output template with vars\n </div>\n </div>\n ","inputs":{"input_1":{"connections":[{"node":"6","input":"output_1"}]}},"outputs":{"output_1":{"connections":[{"node":"4","output":"input_1"},{"node":"11","output":"input_1"}]}},"pos_x":607,"pos_y":304},"6":{"id":6,"name":"github","data":{"name":"https://github.com/jerosoler/Drawflow"},"class":"github","html":"\n <div>\n <div class=\"title-box\"><i class=\"fab fa-github \"></i> Github Stars</div>\n <div class=\"box\">\n <p>Enter repository url</p>\n <input type=\"text\" df-name>\n </div>\n </div>\n ","inputs":{},"outputs":{"output_1":{"connections":[{"node":"5","output":"input_1"}]}},"pos_x":341,"pos_y":191},"7":{"id":7,"name":"facebook","data":{},"class":"facebook","html":"\n <div>\n <div class=\"title-box\"><i class=\"fab fa-facebook\"></i> Facebook Message</div>\n </div>\n ","inputs":{},"outputs":{"output_1":{"connections":[{"node":"2","output":"input_1"},{"node":"3","output":"input_1"},{"node":"11","output":"input_1"}]}},"pos_x":347,"pos_y":87},"11":{"id":11,"name":"log","data":{},"class":"log","html":"\n <div>\n <div class=\"title-box\"><i class=\"fas fa-file-signature\"></i> Save log file </div>\n </div>\n ","inputs":{"input_1":{"connections":[{"node":"5","input":"output_1"},{"node":"7","input":"output_1"}]}},"outputs":{},"pos_x":1031,"pos_y":363}}},"Other":{"data":{"8":{"id":8,"name":"personalized","data":{},"class":"personalized","html":"\n <div>\n Personalized\n </div>\n ","inputs":{"input_1":{"connections":[{"node":"12","input":"output_1"},{"node":"12","input":"output_2"},{"node":"12","input":"output_3"},{"node":"12","input":"output_4"}]}},"outputs":{"output_1":{"connections":[{"node":"9","output":"input_1"}]}},"pos_x":764,"pos_y":227},"9":{"id":9,"name":"dbclick","data":{"name":"Hello World!!"},"class":"dbclick","html":"\n <div>\n <div class=\"title-box\"><i class=\"fas fa-mouse\"></i> Db Click</div>\n <div class=\"box dbclickbox\" ondblclick=\"showpopup(event)\">\n Db Click here\n <div class=\"modal\" style=\"display:none\">\n <div class=\"modal-content\">\n <span class=\"close\" onclick=\"closemodal(event)\">×</span>\n Change your variable {name} !\n <input type=\"text\" df-name>\n </div>\n\n </div>\n </div>\n </div>\n ","inputs":{"input_1":{"connections":[{"node":"8","input":"output_1"}]}},"outputs":{"output_1":{"connections":[{"node":"12","output":"input_2"}]}},"pos_x":209,"pos_y":38},"12":{"id":12,"name":"multiple","data":{},"class":"multiple","html":"\n <div>\n <div class=\"box\">\n Multiple!\n </div>\n </div>\n ","inputs":{"input_1":{"connections":[]},"input_2":{"connections":[{"node":"9","input":"output_1"}]},"input_3":{"connections":[]}},"outputs":{"output_1":{"connections":[{"node":"8","output":"input_1"}]},"output_2":{"connections":[{"node":"8","output":"input_1"}]},"output_3":{"connections":[{"node":"8","output":"input_1"}]},"output_4":{"connections":[{"node":"8","output":"input_1"}]}},"pos_x":179,"pos_y":272}}}}}
editor.import(caracola);
var caracola2 = {"drawflow":{"Home":{"data":{"1":{"id":1,"name":"welcome","data":{},"class":"welcome","html":"\n <div>\n <div class=\"title-box\">👏 Welcome!!</div>\n <div class=\"box\">\n <p>Simple flow library <b>demo</b>\n <a href=\"https://github.com/jerosoler/Drawflow\" target=\"_blank\">Drawflow</a> by <b>Jero Soler</b></p><br>\n\n <p>Multiple input / outputs<br>\n Data sync nodes<br>\n Import / export<br>\n Modules support<br>\n Simple use<br>\n Type: Fixed or Edit<br>\n Events: view console<br>\n Pure Javascript<br>\n </p>\n <br>\n <p><b><u>Shortkeys:</u></b></p>\n <p>🎹 <b>Delete</b> for remove selected<br>\n 💠 Mouse Left Click == Move<br>\n ❌ Mouse Right == Delete Option<br>\n 🔍 Ctrl + Wheel == Zoom<br>\n 📱 Mobile support<br>\n ...</p>\n </div>\n </div>\n ","inputs":{},"outputs":{},"pos_x":50,"pos_y":50},"2":{"id":2,"name":"slack","data":{},"class":"slack","html":"\n <div>\n <div class=\"title-box\"><i class=\"fab fa-slack\"></i> Slack chat message</div>\n </div>\n ","inputs":{"input_1":{"connections":[{"node":"7","input":"output_1"}]}},"outputs":{},"pos_x":1028,"pos_y":87},"3":{"id":3,"name":"telegram","data":{"channel":"channel_2"},"class":"telegram","html":"\n <div>\n <div class=\"title-box\"><i class=\"fab fa-telegram-plane\"></i> Telegram bot</div>\n <div class=\"box\">\n <p>Send to telegram</p>\n <p>select channel</p>\n <select df-channel>\n <option value=\"channel_1\">Channel 1</option>\n <option value=\"channel_2\">Channel 2</option>\n <option value=\"channel_3\">Channel 3</option>\n <option value=\"channel_4\">Channel 4</option>\n </select>\n </div>\n </div>\n ","inputs":{"input_1":{"connections":[{"node":"7","input":"output_1"}]}},"outputs":{},"pos_x":1032,"pos_y":184},"4":{"id":4,"name":"email","data":{},"class":"email","html":"\n <div>\n <div class=\"title-box\"><i class=\"fas fa-at\"></i> Send Email </div>\n </div>\n ","inputs":{"input_1":{"connections":[]}},"outputs":{},"pos_x":1033,"pos_y":439},"7":{"id":7,"name":"facebook","data":{},"class":"facebook","html":"\n <div>\n <div class=\"title-box\"><i class=\"fab fa-facebook\"></i> Facebook Message</div>\n </div>\n ","inputs":{},"outputs":{"output_1":{"connections":[{"node":"2","output":"input_1"},{"node":"3","output":"input_1"},{"node":"11","output":"input_1"}]}},"pos_x":347,"pos_y":87},"11":{"id":11,"name":"log","data":{},"class":"log","html":"\n <div>\n <div class=\"title-box\"><i class=\"fas fa-file-signature\"></i> Save log file </div>\n </div>\n ","inputs":{"input_1":{"connections":[{"node":"7","input":"output_1"}]}},"outputs":{},"pos_x":1031,"pos_y":363}}},"Other":{"data":{"8":{"id":8,"name":"personalized","data":{},"class":"personalized","html":"\n <div>\n Personalized\n </div>\n ","inputs":{"input_1":{"connections":[{"node":"12","input":"output_1"},{"node":"12","input":"output_2"},{"node":"12","input":"output_3"},{"node":"12","input":"output_4"}]}},"outputs":{"output_1":{"connections":[{"node":"9","output":"input_1"}]}},"pos_x":764,"pos_y":227},"9":{"id":9,"name":"dbclick","data":{"name":"Hello World!!"},"class":"dbclick","html":"\n <div>\n <div class=\"title-box\"><i class=\"fas fa-mouse\"></i> Db Click</div>\n <div class=\"box dbclickbox\" ondblclick=\"showpopup(event)\">\n Db Click here\n <div class=\"modal\" style=\"display:none\">\n <div class=\"modal-content\">\n <span class=\"close\" onclick=\"closemodal(event)\">×</span>\n Change your variable {name} !\n <input type=\"text\" df-name>\n </div>\n\n </div>\n </div>\n </div>\n ","inputs":{"input_1":{"connections":[{"node":"8","input":"output_1"}]}},"outputs":{"output_1":{"connections":[{"node":"12","output":"input_2"}]}},"pos_x":209,"pos_y":38},"12":{"id":12,"name":"multiple","data":{},"class":"multiple","html":"\n <div>\n <div class=\"box\">\n Multiple!\n </div>\n </div>\n ","inputs":{"input_1":{"connections":[]},"input_2":{"connections":[{"node":"9","input":"output_1"}]},"input_3":{"connections":[]}},"outputs":{"output_1":{"connections":[{"node":"8","output":"input_1"}]},"output_2":{"connections":[{"node":"8","output":"input_1"}]},"output_3":{"connections":[{"node":"8","output":"input_1"}]},"output_4":{"connections":[{"node":"8","output":"input_1"}]}},"pos_x":179,"pos_y":272}}}}};
/*setInterval(function(){
console.log(caracola.drawflow.Home.data);
}, 200);*/
/*
setTimeout(function() {
console.log("Exportado");
exportdata = editor.export();
console.log(exportdata);
console.log(exportdata);
console.log(exportdata.drawflow['Home'].data);
setTimeout(function() {
editor.clearModuleSelected();
console.log("CLEAR");
console.log(exportdata.drawflow['Home'].data);
setTimeout(function() {
console.log("Importado");
console.log(exportdata.drawflow['Home'].data);
editor.import(exportdata);
}, 2000);
}, 2000);
}, 3000);
*/
//console.log(editor.drawflow);
//console.log(editor.export());
</script>
<style>
#drawflow {
display: block;
position:relative;
width: 100%;
height: 800px;
}
</style>
</body>
</html>