This thread looks to be a little on the old side and therefore may no longer be relevant. Please see if there is a newer thread on the subject and ensure you're using the most recent build of any software if your question regards a particular product.
This thread has been locked and is no longer accepting new posts, if you have a question regarding this topic please email us at support@mindscape.co.nz
|
Hello, do you know how to make the node style as shown in the attached picture? |
|
|
Hello Jzhou I am assuming that the node is a single segment of that image, not the whole shape. Here is one possible way to achieve this style:
This node would have a connection point on the left and right sides. One issue you may find is the path routing. Our path finders such as A* and ElbowPathfinder make sure the connection is routed into the connection point at a particular direction. e.g. Left connection points will always have the connection routed from the connection point out to the left for at least a few pixels. These pathfinders do not have the option to route horizontal/vertically through the connection point. This is not an option we will be able to add right now. If this is an issue, one option could be to use the StraightLinePathfinder for these connection points which doesn't care about the direction of the points. Jason Fauchelle |
|
|
Hello, Maybe I haven't described my requirement clearly, so I make a small project, please find in the attachment, please focus on the ModuleNode and Item class in this project. ModuleNode is the view model for my node, and in the file DiagramStyle.xaml, you can find ModuleNodeStyle which is the style of my node, in this style I use a list view to present some connection point and item names. To make the connection point at the edge, so I set the margin of the connection point, but half of the connection point is hidden, and I cannot connection those connection point, do you know why? Just run the project, you can see to nodes, and try to connect two connection points. And I have two styles for left and right connection point are not applied correctly. And do you have any other better ideas for this kind of requirements? Thanks. |
|
|
Hello Jzhou Thanks for the sample, I have re-attached your sample with a couple of changes that will point you in the right direction. It looks like the main thing you were missing was the ConnectionPoint model objects on the ModuleNode. The ConnectionPoints collection needs to include the connection point model instances for the node in order for a lot of features like path routing to work. So, in your ModuleNode class, I have included some basic logic that adds the 2 connection points from each Item. This is done by listening to when the Items property changes, and attaching an event handler to the ObservableCollection. I also listen to when the Bounds changes. Whenever one of these things change, I call the UpdateConnectionPoints method. This method is a bit brute force as it clears the connection points and adds them in again. You'll probably want change this to only add/remove connection points based on the changes made to the Items collection. Note that when Items are added/removed, you'd need to update the PositionCalculator of all connection points. In the UpdateConnectionPoints method I have included comments to show you what's going on. Mainly, I add the inbound and outbound connection point from each Item to the ConnectionPoints collection, and evenly distribute them along the edge. The other change you will need to make is in the ModuleNodeStyle. In this style you will see I removed the connection point columns from the GridView. Then I've added the ItemsControl from the default node style which is host for all the connection points. This resolves the clipping issue, and applies your different connection point styles correctly. You will notice a couple of limitations with this approach: The hard coded header size in the ModuleNode, and the lack of support for different sized items. If this is an issue, you can move the calculator logic into the view (ModuleNodeStyle) using a converter. Let me know if you have questions about the changes I made. Jason Fauchelle |
|