Is it possible to Add a multiple option on context menu event in node? #187
Assignees
Labels
question
Further information is requested
Comments
|
Hello @Anuj-Kushwah-ak Use a event 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 to create the menu. |
|
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> |
This was referenced Jul 8, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@jerosoler, I want to add multiple options in node on context menu event along with node delete option, something like in the image.
The text was updated successfully, but these errors were encountered: