Page Index Toggle Pages: [1] 2  Send TopicPrint
Hot Topic (More than 10 Replies) Custom Node Type (Read 11711 times)
tl
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 4
Joined: Oct 30th, 2012
Custom Node Type
Aug 16th, 2013 at 3:16pm
Print Post  
I would like to create a node that contains an image that when clicked, a new node with route is automatically created.

Is creating a custom node type using the TemplatedNode class as a base headed in the right direction?
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Custom Node Type
Reply #1 - Aug 16th, 2013 at 4:46pm
Print Post  
If you need that node to only display an image, you could do with an ordinary ShapeNode whose Image and Transparent properties are set. You can handle the NodeClicked event to create the new node with route.

If you need to add new properties to the type, then you can derive it from either ShapeNode or TemplatedNode, as you see fit. Deriving from ShapeNode gives you some benefits such as readily available properties for aligning the image, the ResizeToFitImage method, and built-in serialization for the Image property.

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
esri_test
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 44
Joined: Aug 21st, 2013
Re: Custom Node Type
Reply #2 - Aug 23rd, 2013 at 8:34pm
Print Post  
I have the same question as this topic.
Stoyan, do you have an example how to do this? I tried Custom Node Type by adding a mouse click, but I couldn't figure it out.
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Custom Node Type
Reply #3 - Aug 24th, 2013 at 9:34am
Print Post  
Hi,

You can detect clicks on nodes by handling the Diagram.NodeClicked event. For example, this creates a new node and links it with the clicked node when a + icon is clicked at bottom right of a node:

Code
Select All
<diag:Diagram x:Name="diagram" NodeClicked="OnNodeClicked" />

var plusNode = diagram.Factory.CreateShapeNode(50, 50, 50, 50);
plusNode.Tag = "plus";
plusNode.ImageAlign = ImageAlign.BottomRight;
plusNode.Image = new BitmapImage(
	new Uri("plus.png", UriKind.RelativeOrAbsolute));

private void OnNodeClicked(object sender, NodeEventArgs e)
{
	var node = e.Node as ShapeNode;

	if (node != null &&
		"plus".Equals(node.Tag) &&
		e.MouseButton == MouseButton.Left)
	{
		var nodeRect = node.Bounds;
		var imageRect = new Rect(
			nodeRect.Right - node.Image.Width,
			nodeRect.Bottom - node.Image.Height,
			node.Image.Width, node.Image.Height);

		if (imageRect.Contains(e.MousePosition))
		{
			var children = node.OutgoingLinks.Count;

			// create new node with route
			var newNode = diagram.Factory.CreateShapeNode(nodeRect);
			newNode.Move(
				nodeRect.X + children * (nodeRect.Width + 30),
				nodeRect.Y + nodeRect.Height + 30);
			diagram.Factory.CreateDiagramLink(node, newNode);
		}
	}
} 



I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
esri_test
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 44
Joined: Aug 21st, 2013
Re: Custom Node Type
Reply #4 - Aug 27th, 2013 at 3:21pm
Print Post  
Thank you, Stoyan!
I got a new problem, any way to have multiple images in a node? and multiple images can be clickable?

with this question, is there any interface where DiagramNode or TemplateNode was derived from so I can create a usercontrol as a Node?
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Custom Node Type
Reply #5 - Aug 28th, 2013 at 10:00am
Print Post  
Hi,

The easiest way to display multiple images is to add them to the cells of a TableNode. You can set one of the table cells to have column and row spans greater than 1, and show the main content of the node inside. Then set the Image properties of the smaller cells and handle the CellClicked event to process clicks on the cell images.

Alternatively, you can create a group of nodes, where smaller ShapeNodes are attached to the main node via AttachTo method, and set the smaller nodes' Image, Locked and Transparent properties. From the NodeClicked event, you can use e.Node.MasterGroup.MainItem to find what's the master node for the clicked image node.

If you don't mind using custom node classes, you could derive from ShapeNode, add several properties of type ImageSource, and draw them from the Draw override. For an example, see the IconNodes sample project.

You can as well add user controls to the diagram.Nodes collection - that implicitly creates a DiagramNodeAdapter that wraps your control as a node. You could also explicitly add a new DiagramNodeAdapter(control_instance) to diagram.Nodes.

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
esri_test
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 44
Joined: Aug 21st, 2013
Re: Custom Node Type
Reply #6 - Sep 4th, 2013 at 3:57am
Print Post  
Could you please tell me more on this "You can as well add user controls to the diagram.Nodes collection"?
diagram.Nodes is a read-only property, how to add a user control to this collection?

We need to drag & drop a file from windows explorer to a diagram to create a node. The node may contain multiple images to contain different information. This is a critical steps for us to move forward.

Please help! Thanks,
  
Back to top
 
IP Logged
 
esri_test
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 44
Joined: Aug 21st, 2013
Re: Custom Node Type
Reply #7 - Sep 4th, 2013 at 4:10am
Print Post  
after looking into IconNode sample, I got my usercontrol partially working.

But if you don't mind, please provide your thoughts on how to accomplish drag & drop a file from windows explorer to a diagram.

Thanks,
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Custom Node Type
Reply #8 - Sep 4th, 2013 at 8:39am
Print Post  
Even if the collection property has only a getter, you can still add to the returned collection. The sample below adds an Image control for each image file dragged from Windows Explorer:

Code
Select All
<diag:Diagram
	x:Name="diagram"
	AllowDrop="True"
	DragOver="OnDragOver"
	Drop="OnDrop"
	....

void OnDragOver(object sender, DragEventArgs e)
{
	e.Handled = true;
	e.Effects = DragDropEffects.None;

	var formats = e.Data.GetFormats();
	if (Array.IndexOf(formats, DataFormats.FileDrop) != -1)
	{
		var fileNames = (string[])e.Data.GetData("FileName");
		foreach (string file in fileNames)
		{
			if (file.ToLower().EndsWith(".png") ||
				file.ToLower().EndsWith(".jpg"))
			{
				e.Effects = DragDropEffects.Copy;
				Mouse.OverrideCursor = Cursors.Hand;
				break;
			}
		}
	}
}

void OnDrop(object sender, DragEventArgs e)
{
	e.Handled = true;
	e.Effects = DragDropEffects.None;

	var formats = e.Data.GetFormats();
	if (Array.IndexOf(formats, DataFormats.FileDrop) != -1)
	{
		e.Effects = DragDropEffects.Copy;
		Mouse.OverrideCursor = null;

		var position = e.GetPosition(diagram.DocumentPlane);
		var fileNames = (string[])e.Data.GetData(DataFormats.FileDrop);
		foreach (string file in fileNames)
		{
			if (file.ToLower().EndsWith(".png") ||
				file.ToLower().EndsWith(".jpg"))
			{
				var rect = new Rect(position, new Size(150, 150));
				var image = new Image
				{
					Source = Utilities.LoadImage(file)
				};
				var nodeAdapter = new DiagramNodeAdapter(image)
				{
					Bounds = rect
				};
				diagram.Nodes.Add(nodeAdapter);

				position.Offset(40, 40);
			}
		}
	}
} 



I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
esri_test
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 44
Joined: Aug 21st, 2013
Re: Custom Node Type
Reply #9 - Sep 4th, 2013 at 3:24pm
Print Post  
I put AllowDrop=true on diagram, but when I drag and drop from Windows Explorer, it shows the "not allowed" sign. I can only drag and drop from NodeListView or Palette. What do I miss?
  
Back to top
 
IP Logged
 
esri_test
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 44
Joined: Aug 21st, 2013
Re: Custom Node Type
Reply #10 - Sep 4th, 2013 at 3:55pm
Print Post  
I found the answer for my question. That was due to Windows 7 security rights: "if you are running Visual Studio as administrator, you will not be able to drag files from a non-administrator explorer window into your program when you run it from within visual studio. The drag related events will not even fire!" . If I ran VS as a non-admin, i can drag and drop.

Must all the sample code like "Tutorial 4" be run as admin in VS? I couldn't build sucessfully in non-admin mode.
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Custom Node Type
Reply #11 - Sep 4th, 2013 at 4:28pm
Print Post  
You shouldn't have to open the sample projects with admin rights if you set them up using the installer. However, if you have unzipped one of the samples_vs*.zip files after installation, you might have to modify the folder access permissions to give your account write access. Or try unzipping them into your Documents folder instead of Program Files\MindFusion...

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
esri_test
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 44
Joined: Aug 21st, 2013
Re: Custom Node Type
Reply #12 - Sep 12th, 2013 at 5:13pm
Print Post  
I successfully add two images with image click events as "MouseDown" in a usercontrol and was able to use DiagramNodeAdapter to add the usercoontrol as a node into diagram. The image click event got fired when I click the image, but at the same time it starts to draw a link since "MouseDown" event is also triggered for drawing a link.

What should I do to avoid draw link happening (this can be handled by clicking other part of the node, but not on images)?
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Custom Node Type
Reply #13 - Sep 12th, 2013 at 6:29pm
Print Post  
You could derive from LinkNodesBehavior, override StartDraw, and return null if you detect he mouse pointer is over an image. Otherwise return base.StartDraw to allow drawing links and nodes at other locations. Assign an instance of your custom class to diagram.CustomBehavior.

You might also try calling Diagram.CancelDrag from the image's MouseDown handler. This will cancel the link creation if it has already started.

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
esri_test
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 44
Joined: Aug 21st, 2013
Re: Custom Node Type
Reply #14 - Sep 12th, 2013 at 8:44pm
Print Post  
I used Diagram.CancelDrag in the image's MouseDown handler, it seems working.

I still have a minor issue, I changed the cursor for image area to be a cross, so I know I can click the image in the node. I click one image, it gave me the MouseDown handler, but the cursor become a hand (the default for node). It won't be a cross even I am in the image area until I click outside somewhere in the diagram. I need to click outside the node somewhere first to get my desired usercontrol function back.

Is there anything Diagram.CancelDrag do which make me only can click the image area once?
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: [1] 2 
Send TopicPrint