Any feature for a floating/anchored FlowDiagramNode, or node relocator?

 Hi,

We have been designing a flow diagram editor for our customers for about six months now, using your WpfDiagramming control with great success.  We recently received a new customer request to have a node that always stays at a certain position on the viewport, no matter if you're panning the diagram surface, or zooming in/out.  This allows them to always see these nodes visually no matter where they are at on the diagram surface.  Think of these nodes as being anchored to the WPF panel/container that houses your diagram control.

I have attached screenshots of what they are asking for (screen1 = Before, screen2 = After).  Notice that in this example, the "Pass" and "Fail" ports represent the FlowDiagramNodes, and the collapsible panel on the right simply illustrates our need to 'recalculate' the position of these nodes on the diagram surface when the user collapses the panel.

Is there any such feature in your control that can do this?  If not, is it possible for this behavior to be requested?

Thanks,

Tam

I tried adding two attachments, and not sure why it overwrote my first attachment, but here it is again.  screenshot1.jpg = "Before", and screenshot2.jpg = "After".

Tam

Hello Tam

 - Sorry about the forum troubles, you can only attach a single file.

WPF Flow Diagrams does not include this node-fixing feature and we do not plan to implement it as it is too specialized. You will however be able to implement it yourself by listening to various events and then updating the positions of the appropriate nodes. Will this be fine for you? If so, we can include some more events for listening to when the diagram surface is panned and zoomed. We will also be able to provide advice for implementation details if you run into any issues.

Regards
 - Jason 

Thank you for your reply, Jason.  Yes, any advice on implementation details would be much appreciated.  An example of how to use the correct pan and zoom events would be very nice.  One thing to take into consideration with this as well -- do you foresee any issues with the connections redrawing themselves to match the new node location, or will this just automatically correct itself?  I'm trying to avoid 'floating' connections, and not so worried about how the connection looks after it redraws.

Thanks,

Tam

Hello Tam

By downloading the nightly builds from tomorrow the 28th of April, you will have acess to the DiagramSurface.ViewPortChanged event. This event will be raised whenever any panning or zooming operations are performed on the diagram surface. This event along with the DiagramSurface.SizeChanged event will be useful for implementing this feature.

When these events are fired, you will want to iterate through all the fixed nodes in some way and change their logical positions in a way that makes them always apear in the same physical position. To start off with implementing this feature, I suggest starting with iterating through all the nodes in the diagram to pick out the fixed nodes and then modify their positions. Later you can implement something a little more smart that caches the fixed nodes in some way to avoid iterating through all the nodes. A fixed node could either be denoted as a custom node type (such as FixedNode) or some kind of property flag.

When modifying the positions of the fixed nodes, you first need to calculate the physical screen position where you want them to be displayed. To start experimenting with this, I suggest fixing the nodes to a hard coded position such as the top left corner. This physical position could be something like 10,10. Next you need to convert this position into the logical diagram position based on the current panning and zoom states of the scroll viewer. here is a method that will help with this: (where ds is the DiagramSurface)

private Point TranslateDiagramSurfacePoint(Point diagramSurfacePoint)
{
    return new Point(diagramSurfacePoint.X / ds.ScrollViewer.EffectiveZoom + ds.ScrollViewer.HorizontalOffset, diagramSurfacePoint.Y / ds.ScrollViewer.EffectiveZoom + ds.ScrollViewer.VerticalOffset);
}

Use the logical position that is returned to update the Bounds property of the appropriate node.

I assume that the user will still be able to move the fixed nodes around to place them in a location of their choice. if so, you will want to somehow store the physical position of each fixed node, and then use this rather than a hard coded position. To get the physical position of a node based on its logical diagram position, you can create a reversed version of the method above.

As for updating the connections, no this will not be done automatically. You will need to use the DiagramSurface.FormatAllConnectionElements method after modifying the fixed node positions.

Let me know if there are other details that you need help on.

 - Jason

Jason,

Thanks for your help on this!  I really appreciate it.  I followed your instructions and was able to get it to work "almost" flawlessly.  I've attached a proof-of-concept project here.

I was wondering if you could help me resolve one remaining issue with the positioning.  When the app starts up, and I click the Maximize button on the window, it looks like it is unable to calculate the anchor points correctly (notice that it moves from the desired by a few pixels).  Clicking anything afterwards will fix the problem immediately, but it doesn't look like it works on the initial Maximize only.  Is this a bug?

Thanks,

Tam

Hello Tam

First off, in the project you attached, you have a MainWindow_StateChanged method, but havn't attached it to the Window.StateChanged event. Maybe this accidentilly got deleted before you sent the POC? Apart from that, it seems that when the MainWindow_StateChanged method is called, the window hasn't actually finished maximizing. to resolve this, Take everything from the MainWindow_StateChanged method, and put it into a new method. Then in the MainWindow_StateChanged method, call your new method using a Dispatcher.BeginInvoke. This makes sure that your calculations are performed after the window has finished maximizing.

As a side note, you may have also noticed that when you zoom in or out of the chart, the connections don't seem to be aligned with the center of the nodes correctly. I'm not sure if this is a problem in you application or if it is only present in the POC, but to solve this, you can divide the actual hight of the list box items by the zoom value of the diagram surface when calculating the new node positions. For example:

anchoredNode1.Bounds = new Rect(logicalPoint.X, logicalPoint.Y + (item1.ActualHeight / 2 / ds.Zoom), 0, 0);

Let me know how it goes.
 - Jason 

Jason,

I had removed the Window.StateChanged event before I sent it to you, because I wasn't getting it to work (most likely because I didn't use the Dispatcher as you suggested).  But after following your two suggested fixes, everything in the POC is working now.  Thanks! 

Tam