I am testing out the diagramming package to see if it would be suitable for the app that I am building. I have a few questions just based on my initial testing of it.

1. It seems like when you draw links between nodes, they are always straight lines from point A to point B. Is there any way to get it to automatically route the link/wire as I am drawing it?

2. It seems like you can just create as many links out of a node as you want. How do I make it so there are very specific points on the node that can be linked to/from? For example, if I have a node that looks like a "logical AND gate", I would expect that node would have 2 inputs and 1 output. I would not want the user to be able to just start creating random links willy-nilly.

3. The behavior of moving nodes seems a little difficult. As far as I can tell, I first have to select the node. Then, I have to press very carefully directly in the center of the node for it to initiate the "move node" operation, and then I can drag the node to wherever I want on the diagram. If I press anywhere else on the node other than exactly in the center, it doesn't move the node, but rather starts drawing a new link, which is not at all what I want to do. Is there a way to modify this behavior?

4. Is there a way to edit resize behavior of nodes? What if I only want to allow them to be resized in one direction - either horizontally or vertically? What if I want to enforce that all resizes must align to the grid? What if I want to create new "linking points" as the resize happens (I don't know what you call a "linking point" in this API - a terminal? a port?)

Thanks for any help and information you can provide!!!

Thank you for the informative response. It really helped. It has also generated some new questions!

Quote:


I was able to create some AnchorPoints and an AnchorPattern very easily, so thanks for pointing out those properties. I also see that there is a function called DrawAnchors() on the Node class. I would like my anchor points to be visible, rather than invisible. I assume this method should be called in order to do so, and it takes an IGraphics object. I tried doing the following right after creating the node to see if it would do anything, but I didn't notice any visible anchors:

var graphics = GraphicsFactory.CreateGraphics();
graphics.DrawEllipse(new Pen(Colors.Red), new Rectangle(0, 0, 5, 5));
node1.DrawAnchors(graphics);
 

What's the best way to get the anchors to be visible?

Quote:


HatchHandles2 and HatchHandles3 are both excellent! Thanks for pointing me to those. I like them much better than the default.

Quote:


Thanks for pointing me to the diagram.Behavior property. It's helpful to see the different behaviors that are available. I think my default go-to will be PanAndModify.

Quote:


This all works really nicely, thank you!

Quote:


This is one aspect I am still having trouble with. I set the "RouteLinks" property to true on the diagram, but did not notice any effect.

Basically, I want the diagram to automatically figure out the appropriate path the link should take as I am drawing it, or as I am moving around nodes. I am not really wanting any diagonal lines - everything should be aligned to the grid and a mix of horizontal and vertical segments. Think along the lines of LabVIEW:

I'm still having some trouble with links, but I am gradually working through all of the issues.

I do have one question regarding links that I can't seem to figure out:

Is there an easy way to change the "stroke width" of a link? The lines are rather thin and I would like them to be thicker.

Thank you for the additional info. I promise I am almost done asking questions

Let me show you my current code as well as a couple of example videos. The first example video shows you what is being produced by my current code. The second example video shows you the kind of experience I am hoping to have in my app.

First, here is my current code:

public MainPage()
{
	InitializeComponent();

	var node1 = diagram.Factory.CreateShapeNode(10, 20, 40, 30);
	node1.EnabledHandles = AdjustmentHandles.ResizeBottomCenter;
	node1.Text = "Hello,";
	node1.HandlesStyle = HandlesStyle.HatchHandles3;
	node1.AnchorPattern = new AnchorPattern()
	{
		Points = new AnchorPointCollection()
		{
			new AnchorPoint(0, 33, true, false),
			new AnchorPoint(0, 66, true, false),
			new AnchorPoint(100, 50, false, true)
		}
	};



	var node2 = diagram.Factory.CreateShapeNode(80, 90, 40, 30);
	node2.EnabledHandles = AdjustmentHandles.ResizeBottomCenter;
	node2.Text = "World!";
	node2.HandlesStyle = HandlesStyle.HatchHandles3;
	node2.AnchorPattern = new AnchorPattern()
	{
		Points = new AnchorPointCollection()
		{
			new AnchorPoint(0, 33, true, false),
			new AnchorPoint(0, 66, true, false),
			new AnchorPoint(100, 50, false, true)
		}
	};

	var link1 = diagram.Factory.CreateDiagramLink(node1, node2);
	link1.Shape = LinkShape.Cascading;
	link1.AutoRoute = true;
	link1.HeadBrush = MindFusion.Drawing.Brushes.Red;
	link1.HeadShape = Shapes.Rectangle;
	link1.BaseShape = Shapes.Rectangle;
	link1.BaseBrush = MindFusion.Drawing.Brushes.Red;
	link1.RetainForm = false;
	link1.Pen = new Pen(Colors.Red, 1.0);

	diagram.Behavior = MindFusion.Diagramming.Behavior.PanAndModify;
	diagram.RouteLinks = true;
	diagram.LinkRouter = new GridRouter();
	diagram.AlignToGrid = true;
	diagram.ShowGrid = true;
	diagram.GridSizeX = 10;
	diagram.GridSizeY = 10;
	diagram.GridStyle = GridStyle.Lines;
	diagram.ShowAnchors = ShowAnchors.Always;
	diagram.SnapToAnchor = SnapToAnchor.OnCreateOrModify;
}
 

That code generates a diagram that looks like and interacts like what you see in this video: https://www.youtube.com/watch?v=IDrZndu6560&feature=youtu.be

As you notice, the "base" of the link does not appear to be even initially attached to the source node, which seems like an issue. Also, something is wrong with the algorithm that is routing the link: this link should easily be routed in 3 segments. It should be a horizontal line coming out of the source node, then a vertical line doing down, and then a horizontal line going into the destination node. Finally, when I move the nodes around, there is also some weird behavior. I would expect the link to re-route intelligently, but it seems like what's happening is the link is staying fairly static and only the final segment of the link is changing its angle.

To show you the kind of interaction/behavior I am looking for, I made another video in which I use an app called Lucid Chart to create a simple 2 node diagram with a link between the two nodes, and then I move the nodes around. Here is the video: https://www.youtube.com/watch?v=w2taMRQSwn0&feature=youtu.be

How can I achieve the same behaviors that you can see in that 2nd video?

Namely:
1. The link should have the correct number of segments (I know I can set the "SegmentCount" property on the link, but I shouldn't have to tell it how many segments it should have. It should figure that out intelligently).
2. The link should re-route intelligently as I move nodes around.
3. The link should appear correctly.

I added the event handler, but the behavior is identical to the previous behavior.

Here is the code I added:

//This line of code was added to the MainPage constructor,
//the same place where the code I showed previously is located
diagram.NodeModifying += Diagram_NodeModifying;

//This new method is found in MainPage
private void Diagram_NodeModifying(object sender, NodeValidationEventArgs e)
{
	diagram.LinkRouter.RouteLinks(e.Node.GetAllLinks());
}
 

Any suggestions?

Once again, my goal is to get the behavior to be something similar to what is seen in the second video that I linked above (the one in which I was using the Lucid Chart application).

Are you using latest 1.4 version? It works kind of as in second video testing with that event handler in AnchorPoints example. Check if you aren't replacing view's diagram at a later point.

Regards,
Slavcho

This build should fix NodeModifying not raising for PanAndModify -
https://mindfusion.eu/_temp/XamarinDiagram.zip

Another problem we've found is PanAndModify incorrectly lets you move nodes when EnabledHandles does not contain the Move bit. Change it to this instead if you allow moving nodes (to get the event raised with new build above) -

node2.EnabledHandles = AdjustmentHandles.ResizeBottomCenter | AdjustmentHandles.Move; 

Regards,
Slavcho