Removing default port from Node

[Srikanth]

Hi Team,

Can you please advise if there is a way to bind to port collection of a node ?

Basically, I am trying to add or remove ports dynamically through my business object collection.

Thanks,

Sri.

[Saranya Chandrasekaran]

Hi Sri, 

Requirement: 

How to add / remove ports dynamically through my business object collection. 

Response: 

In DiagramControl, we don’t have support to add business object in Ports collection since the Ports collection properties are strongly typed with ConnectionPort class used for defining custom ports on the Nodes.  

Note: 

In SfDiagram, we have exposed ViewModel (Business class) for NodePort. 

Regards, 

Saranya C. 

 

[Srikanth]

Thanks for the confirmation.

Regards,

Sri.

[Ranjitha Amirthalingam]

Hi Srikanth, 

 

Thanks for the update. 

 

Please let us know if you require further assistance on this. 

 

Regards, 

Ranjitha A. 

[Srikanth]

Hi,

Can you please help me understand if you have this above requirement in your road map by any chance ?

Thanks,

Srikanth.

[Karkuvel Rajan Shanmugavel]

Hi Srikanth, 

 

Requirement: How to add / remove ports dynamically through my business object collection. 

 

DiagramControl(Classic): 

Node.Ports property is of Type ObservableCollection<ConnectionPort>, you cannot add objects other than ConnectionPort into this collection.  

Suggestion 1: 

You can implement a class that derive ConnectionPort and add it into Ports collection. 

 

Suggestion 2: 

You can create a class that derives Node and add your own custom property to hold your view model. Then you can implement a way to sync between your custom property and Node.Ports collection. 

 

Suggestion 3: 

You can try SfDiagram, which is newer version of Diagram. This control is implemented with complete MVVM support. Documentation link: https://help.syncfusion.com/wpf/sfdiagram/overview  

 

Regards, 

Karkuvel Rajan.S 

 

[Srikanth]

Hello Rajan,

Many thanks for your response.

I have been trying to implement my solution using SFDiagram. I am able to bind Nodes and its working fantastically. 

However, I am unable to bind port collection. I have attached my sample below.

Would you be able to help checking what am I doing wrong ?

Appreciate your help.

Thanks,

Sri.

Attachment: SfDiagramTest_Latest_49c5a9c2.zip

[Karkuvel Rajan Shanmugavel]

Hi Srikanth, 

 

We have analysed your requirement.  

 

Ports are not visible because ports have to added to INode.Ports collection. In your sample ports are added to a custom property ‘NodePorts’.  

 

Suggestion 1: You can directly use INode.Ports collection instead of custom property. 

 

'_component1.NodePorts.Add(New AutxPort With {.NodeOffsetX = 0.5, .NodeOffsetY = 0.5}) 

_component1.Ports.Add(New AutxPort With {.NodeOffsetX = 0.5, .NodeOffsetY = 0.5}) 

 

Suggestion 2: You can use a custom property, that access INode.Ports instead of private variable as shown in code example. 

 

Code Example: 

 

    Public Property NodePorts As ObservableCollection(Of AutxPort) 

        Get 

            Return Ports 

        End Get 

        Set(value As ObservableCollection(Of AutxPort)) 

            Ports = value 

        End Set 

    End Property 

 

We have modify your sample based on your requirement. Please find the sample link below. 

 

Sample link: http://www.syncfusion.com/downloads/support/forum/130254/ze/SfDiagramTest_Latest_49c5a9c22119913200 

 

Regards,  

Karkuvel Rajan.S 

[Srikanth]

Hello Rajan,

Appreciate your response. Its working fine.  However, I am unable to draw connection between the ports (or nodes). 

Do I have to add any more logic to be able to do that ?

Thanks,

Sri.

[Karkuvel Rajan Shanmugavel]

Hi Srikanth, 

 

By default, if we click and drag a Node it gets dragged, but for Port no interaction has been provided. You can override click and drag action over a port by overriding set tool method. We have provided you the Code Example for your requirement and Documentation link to know more about tools. Please follow the code example and documentation link below. 

 

Code Example: 

 

//Custom SfDiagram 

public class customdiagram : SfDiagram  

    {  

        protected override void SetTool(SetToolArgs args)  

        {  

            if (args.Source is IPort)  

            {  

              //Specifies the Action to perform 

                args.Action = ActiveTool.Draw;  

            }  

            else  

            {  

                base.SetTool(args);  

            }  

        }  

    }  

 

//Here you can draw if you click and drag a port. 

 

Documentation Link: https://help.syncfusion.com/wpf/sfdiagram/tools 

 

Regards, 

Karkuvel Rajan.S 

 

[Srikanth]

Hi Rajan,

Thanks for your response.

I have tried the way you have mentioned and changed default tool to 'draw'. However, I am still not able to draw connection between the ports.

I have attached my sample code below. Can you please help throwing some light on what could be wrong here ?

Also, is there a way to make ports visible always ?

Thanks,

Sri.

Attachment: SfDiagramTest_Latest_4df0879c.zip

[Karkuvel Rajan Shanmugavel]

Hi Srikanth, 

 

We have analysed the sample provided and modified  the sample based on your requirement. Please find the responses for your queries and the Modified changes below. 

 

S.No	Query	Response
1.	I have tried the way you have mentioned and changed default tool to 'draw'. However, I am still not able to draw connection between the ports.	Constraints should have connectable to enable connection.    Code Example:    Me.Constraints = NodeConstraints.Selectable Or NodeConstraints.Draggable Or NodeConstraints.Connectable    'Here Me represents the class AutxComponent that is derived from NodeViewModel    Documentation Link: https://help.syncfusion.com/wpf/sfdiagram/constraints#node-constraints
2.	is there a way to make ports visible always ?	By default, PortVisibility is set as MouseOver the Node. We can change this by assign the PortVisibility as Visible. We have attached the code example below.    Code Example:    Me.PortVisibility = PortVisibility.Visible    'Here Me represents the class AutxComponent that is derived from NodeViewModel

 

We have attached the modified sample for your requirement. Please find the sample link below. 

 

Sample Link: http://www.syncfusion.com/downloads/support/forum/130254/ze/SfDiagramTest_Latest-1092503641 

 

Regards, 

Karkuvel Rajan.S 

 

[Srikanth]

Hi Rajan,

Appreciate your response. It was very helpful.

When I am trying to connect ports programatically like below, it isn't reflecting on the design surface. However, when I set SourcePort and TargetPort directly I see a proper connection. Any idea why I am unable to connect ports using source and target Port IDs ?

_activity.Connections.Add(New AutxConnection With {.SourceNodeID = _component1.ID,

                          .TargetNodeID = _component2.ID,
                          .SourcePortID = _port1.ID,
                          .TargetPortID = _port2.ID})

Also, Is there a way to restrict creating connections only between ports and not between the nodes ?

Thanks,

Sri.

[Karkuvel Rajan Shanmugavel]

Hi Srikanth 

 

Please find the response for your queries below. 

 

S.No	Queries	Response
1.	When I am trying to connect ports programatically like below, it isn't reflecting on the design surface. However, when I set SourcePort and TargetPort directly I see a proper connection. Any idea why I am unable to connect ports using source and target Port IDs ?    _activity.Connections.Add(New AutxConnection With {.SourceNodeID = _component1.ID,                            .TargetNodeID = _component2.ID,                          .SourcePortID = _port1.ID,                          .TargetPortID = _port2.ID})	ID’s will not be generated on its own. We have to specify a values explicitly. We have modified the sample based on your requirement.
2.	Is there a way to restrict creating connections only between ports and not between the nodes ?	We have to disable the Connectable Constraints from Node and enable Connectable Constraints only for the Port. We have modified the sample based on your requirement.     Code Example :             'Here Me represents the class AutxComponent that is derived from NodeViewModel          Me.Constraints = Not NodeConstraints.Connectable    'Here Me represents the class AutxPort that Is derived from NodePortViewModel          Me.Constraints = PortConstraints.Connectable

 

Sample Link: http://www.syncfusion.com/downloads/support/forum/130254/ze/SfDiagramTest_Latest374274473 

 

Regards, 

Karkuvel Rajan.S 

[Srikanth]

Hi Rajan,

Thanks for the example. It was very helpful.

When I am trying to copy a node and paste onto the design surface. Its throwing following exception. I guess "Not NodeConstraints.Connectable" statement is causing this issue.

<Exception>

An unhandled exception of type 'System.Runtime.Serialization.SerializationException' occurred in System.Runtime.Serialization.dll

Additional information: Enum value '18446744073709551567' is invalid for type 'Syncfusion.UI.Xaml.Diagram.NodeConstraints' and cannot be serialized. Ensure that the necessary enum values are present and are marked with EnumMemberAttribute attribute if the type has DataContractAttribute attribute.

</Exception>

Can you help fixing this issue ?

Thanks,

Sri.

[Karkuvel Rajan Shanmugavel]

Hi Srikanth 

 

We have analysed your sample and we were able to provide solution for the reported exception. 

 

Reported exception: 

 

An unhandled exception of type 'System.Runtime.Serialization.SerializationException' occurred in System.Runtime.Serialization.dll 

Additional information: Enum value '18446744073709551567' is invalid for type 'Syncfusion.UI.Xaml.Diagram.NodeConstraints' and cannot be serialized. Ensure that the necessary enum values are present and are marked with EnumMemberAttribute attribute if the type has DataContractAttribute attribute. 

Solution: 

 

We remove the connectable constraints from Node.Constraints directly we have to use Bitwise operations to remove the constraints. We have provide you the code example and sample link based on your requirement. Please follow the code example and sample link below. 

 

Code Example: 

 

'Here Me represents the class AutxComponent that is derived from NodeViewModel 

        Me.Constraints = Me.Constraints And Not NodeConstraints.Connectable 

 

Sample Link: http://www.syncfusion.com/downloads/support/forum/130254/ze/SfDiagramTest_Latest-786507920 

 

Regards 

Karkuvel Rajan.S 

[Srikanth]

Thanks a lot Rajan.

Sincerely appreciate your patience and help. 

[Srikanth]

Hi Rajan,

Sorry to bother you again... I am using the same thread for my queries so that you have will context.

I am currently using Port's NodeOffsetX & NodeOffsetY properties to position ports on a Node manually. I am just wondering if there is a way to auto align ports vertically using a stack panel ? something like below ?

Thanks,

Sri.

[Karkuvel Rajan Shanmugavel]

Hi Srikanth, 

We have analysed your requirement of “Auto Align Ports Vertically”. There is no way to auto align ports vertically using Stackpanel. We can align the ports only using the NodeOffsetX and NodeOffsetY property. If there is any difficulty while using them, describe your requirement, we will guide you to get it aligned. 

Regards, 

Karkuvel Rajan.S  

[Srikanth]

Hi Rajan,

My requirement is to have input and output ports for every node and they are dynamic and configurable. I was exploring a way to auto align input ports on the left side of Node and output ports on right side of the Node (vertically) as shown below.

There will be many node types and each node may have different number of inputs and output ports depends on the type of the node. Also, according to node configuration (project requirement) number of input and output ports may vary. 

I have implemented two classes InputPort, Outputport. They both inherit from NodePortViewModel. I have been trying to align all 'InputPorts' on the left and 'OutputPorts' on the right side of Node, but no luck.

If this can not be achieved in an easy way, can the 'Node control template' be customized to do this ? Would you be able to share a 'Node control template' of SfDiagram ?

Thanks,

Sri.

[Karkuvel Rajan Shanmugavel]

Hi Srikanth, 

 

We have provided solution to arrange inports (in left side) and ouports (in right side) of a node in two ways. Please refer following table and sample. 

 

	Before resize	After Resize
Absolute position  UpdateInportPosition(inport);                  UpdateOutportPosition(outport);
Relative Position  UpdateInportPositionrelative(inport, node);                  UpdateOutportPositionrelative(outport, node);

 

 

Sample  Link: http://www.syncfusion.com/downloads/support/forum/130254/ze/Diagram_Sample1538332881 

 

Regards, 

Karkuvel Rajan.S 

[Srikanth]

Hi Rajan,

I was referring to the above example today. Looks like there is scaling issue with the NodePorts.

When I zoom into the diagram control, ports are not scaling as per the Node size.

Can you please advise if there is a way to make ports scale as well?

Thanks,

Sri.

[Ranjitha Amirthalingam]

Hi Srikanth,

 

Port is not a part of diagram layer, it does not participate in printing, exporting, zooming. Port is just an indication of connecting point, where user can interactively connect. If you want a visual object added in place of port, please use annotation which is a part of diagram and it will be included in printing, exporting and zooming. Port and annotation takes similar alignment properties, please refer documentation.

 

Link: https://help.syncfusion.com/wpf/sfdiagram/annotation

 

We have provided the sample to differentiate the port and annotation with two nodes and provided the screenshot. Please refer to them as below.

 

Screenshot:

 

 

Sample Link: http://www.syncfusion.com/downloads/support/forum/130254/ze/Basic_Sample_for_requirement868684643

 

 

 

Regards,

KarkuvelRajan.S

[Srikanth]

Hi Rajan,

Thanks for your response.

Can you please elaborate the example? I could not get it to work.

Also, the screenshot link seems to be broken, it is not visible. 

Regards,

Sri.

[Karkuvel Rajan Shanmugavel]

Hi Srikanth, 

 

Basic behavior of Port is to indicate connection. We have created a sample based on your requirement. We have provided screenshots and video to represent the sample. We have prepared a table for differentiate the behavior of Port , Annotation while Zooming. In the last column the larger rectangle is Annotation and the small rectangle is Port. 

 

Screenshots:  

 

Element	No scale(100%)	More than 100%
Port
Annotation
Port and Annotation

 

Sample Link: http://www.syncfusion.com/downloads/support/forum/130254/ze/Basic_Sample_for_requirement868684643 

 

Regards, 

Karkuvel Rajan.S 

[Srikanth]

Thanks Rajan,

I will test and come back to you. 

Thanks,

Sri.

[Karkuvel Rajan Shanmugavel]

Hi Srikanth, 

  

Thanks for the Update. We will wait to hear from you. 

  

Regards, 

Karkuvel Rajan.S