how to prevent removing connection between nodes #353
Assignees
Labels
question
Further information is requested
Comments
|
Hi It would look like this: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Delete</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css">
<style>
#drawflow {
position: relative;
width: 90vw;
height: 800px;
border: 1px solid red;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
<script>
class Drawflowoverride extends Drawflow {
removeConnection() {
if(this.connection_selected != null) {
var listclass = this.connection_selected.parentElement.classList;
var index_out = this.drawflow.drawflow[this.module].data[listclass[2].slice(14)].outputs[listclass[3]].connections.findIndex(function(item,i) {
return item.node === listclass[1].slice(13) && item.output === listclass[4]
});
var index_in = this.drawflow.drawflow[this.module].data[listclass[1].slice(13)].inputs[listclass[4]].connections.findIndex(function(item,i) {
return item.node === listclass[2].slice(14) && item.input === listclass[3]
});
}
var removeConnection = this.dispatch('connectionBeforeRemoved', { output_id: listclass[2].slice(14), input_id: listclass[1].slice(13), output_class: listclass[3], input_class: listclass[4] } );
if(removeConnection === true) {
if(this.connection_selected != null) {
this.connection_selected.parentElement.remove();
this.drawflow.drawflow[this.module].data[listclass[2].slice(14)].outputs[listclass[3]].connections.splice(index_out,1);
this.drawflow.drawflow[this.module].data[listclass[1].slice(13)].inputs[listclass[4]].connections.splice(index_in,1);
this.dispatch('connectionRemoved', { output_id: listclass[2].slice(14), input_id: listclass[1].slice(13), output_class: listclass[3], input_class: listclass[4] } );
this.connection_selected = null;
}
}
}
dispatch (event, details) {
// Check if this event not exists
var result = false;
if (this.events[event] === undefined) {
// console.error(`This event: ${event} does not exist`);
return false;
}
this.events[event].listeners.forEach((listener) => {
result = listener(details);
if(result === undefined) {
result = true;
}
});
return result;
}
}
</script>
</head>
<body>
<div id="drawflow"></div>
<script>
var id = document.getElementById("drawflow");
const editor = new Drawflowoverride(id);
editor.start();
let dataimport = {"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 ", "typenode": false, "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 ", "typenode": false, "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 ", "typenode": false, "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 ", "typenode": false, "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 ", "typenode": false, "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 ", "typenode": false, "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 ", "typenode": false, "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 ", "typenode": false, "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 ", "typenode": false, "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 ", "typenode": false, "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 ", "typenode": false, "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(dataimport);
var find = '<div> <span class="changeable" contenteditable="true" placeholder="Enter name ">Find</span></div>';
editor.addNode('find', 1, 2, 100, 200, 'find', {"find": ""}, find.replace(/\s\s+/g, ' ') );
editor.on("connectionBeforeRemoved", ({output_id, input_id, output_class, input_class}) => {
console.log(output_id)
if(output_id == 7) {
return false;
} else {
return true;
}
})
</script>
</body>
</html>
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello
there is a lot of options to prevent removing nodes. But I can't find any option to prevent removing the connection between nodes (using the keyboard).
when
viewmode still allows to remove connection, the only way I figured out is @watch onconnectionRemovedand recreated it every time it is deleted - but this looks like overkill@jerosoler - I believe you have a simpler solution for it, any idea?
The text was updated successfully, but these errors were encountered: