Closed Anuj-Kushwah-ak closed 3 years ago
Hello @Anuj-Kushwah-ak
Use a event contextmenu
for detect second button https://github.com/jerosoler/Drawflow#events
and create your conextmenu.
Jero
@jerosoler, I am facing a problem with the HTML part of the option where I wish to use angular material's
Hello @Anuj-Kushwah-ak
View a simple html with contextmenu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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>
<style>
#drawflow {
position: relative;
width: 600px;
height: 600px;
border: 1px solid red;
}
#contextmenu {
display: flex;
align-items: center;
position:absolute;
background: white;
border: 2px solid black;
padding: 10px;
z-index: 10;
}
</style>
</head>
<body>
<div id="drawflow">
</div>
<script>
var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
editor.reroute = true;
editor.reroute_fix_curvature = true;
editor.start();
const data = {
level1: {
name: 'TEST 1',
level2: {
name: 'test 2',
level3: {
name: "TESTTTTT 3"
}
}
}
}
const htmltest = `
<input type="text" df-level1-name>
<input type="text" df-level1-level2-name>
<input type="text" df-level1-level2-level3-name>
`;
editor.addNode('test2', 1,1, 100, 200, 'test2', data, htmltest );
editor.addNode('instagram', 1, 1, 150, 300, 'rrss', {}, `Instagram`);
editor.addNode('facebook', 1, 1, 150, 300, 'rrss', {}, `Facebook`);
editor.addNode('facebook', 1, 1, 150, 300, 'rrss', {}, `Facebook`);
editor.on('contextmenu', function(event) {
if(event.target.closest(".drawflow_content_node") != null || event.target.classList[0] === 'drawflow-node') {
showConextMenu(event.clientX, event.clientY)
}
});
function showConextMenu(x,y) {
//var pos_x = editor.pos_x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)) - (editor.precanvas.getBoundingClientRect().x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)));
//var pos_y = editor.pos_y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)) - (editor.precanvas.getBoundingClientRect().y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)));
var pos_x = x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)) - (editor.precanvas.getBoundingClientRect().x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)) ) ;
var pos_y = y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)) - (editor.precanvas.getBoundingClientRect().y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)) ) ;
console.log(pos_x);
var contextmenu = document.createElement('div');
contextmenu.id = "contextmenu";
contextmenu.innerHTML = "<ul><li>Option 1</li><li>Option 2</li></ul>";
contextmenu.style.display = "block";
contextmenu.style.left = pos_x + "px";
contextmenu.style.top = pos_y + "px";
editor.precanvas.appendChild(contextmenu);
}
function unShowConextMenu() {
var contextmenu = document.getElementById('contextmenu')
if(contextmenu != null) {
contextmenu.remove();
}
}
editor.on('click', function(event) {
if(event.target.closest("#contextmenu") === null) {
unShowConextMenu();
}
});
</script>
</body>
</html>
@jerosoler, I want to add multiple options in node on context menu event along with node delete option, something like in the image.![Screenshot from 2021-06-16 20-25-33](https://user-images.githubusercontent.com/35630772/122242874-4b3a2f80-cee1-11eb-9ba3-be1baa5ac38a.png)