Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Deleting a node in a diagram. (Read 661 times)
krishsub
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 1
Joined: May 11th, 2023
Deleting a node in a diagram.
May 11th, 2023 at 2:49am
Print Post  
Hello all,
I am a newbie to mindfusion. I am using BpmnDiagram example which creates a diagram with nodes.
I am wondering how a specific node can be deleted by a user by
a) selecting the node
b) right-clicking on the node that shows the delete menu
c) selecting the delete menu which then deletes the node from the diagram.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3153
Joined: Oct 19th, 2005
Re: Deleting a node in a diagram.
Reply #1 - May 11th, 2023 at 5:24am
Print Post  
Hi,

You could display context menu from nodeClicked event handler. You can find an example showing jQuery menu here -

https://mindfusion.eu/Forum/YaBB.pl?num=1387949353/1#1

That's with our older API based on get/set functions. You'd use property syntax with current version, e.g. args.node instead of args.getNode(), args.mousePosition instead of args.getMousePosition();

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3153
Joined: Oct 19th, 2005
Re: Deleting a node in a diagram.
Reply #2 - May 11th, 2023 at 6:41am
Print Post  
Here's an example with our v4 syntax, using a DIV element as a menu placeholder. You could add some links or buttons to the DIV to implement more menu commands -

Code
Select All
var menu = document.getElementById("menu");
menu.style.display = "none";
menu.oncontextmenu = function () { return false };
menu.onclick = function(){
	diagram.removeItem(node);
	menu.style.display = "none";
}

var node = null;

function onNodeClicked(sender, args) {
	if (args.mouseButton == 2) {
		var diagramView = MindFusion.Diagramming.DiagramView.find("diagram");
		var position = diagramView.element.getBoundingClientRect();
		var point = diagramView.docToClient(args.mousePosition);
		menu.style.display = "block";
		menu.style.left = `${position.left + point.x}px`;
		menu.style.top = `${position.top + point.y}px`;
		node = args.node;
	}
} 



Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint