We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Removing default port from Node

Thread ID:

Created:

Updated:

Platform:

Replies:

130254 May 2,2017 06:29 PM UTC Jul 24,2018 10:36 AM UTC WPF 26
loading
Tags: Diagram
Srikanth
Asked On May 2, 2017 06:29 PM UTC

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 [Syncfusion]
Replied On May 3, 2017 06:47 AM UTC

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
Replied On May 3, 2017 07:12 AM UTC

Thanks for the confirmation.

Regards,
Sri.

Ranjitha Amirthalingam [Syncfusion]
Replied On May 4, 2017 04:04 AM UTC

Hi Srikanth, 
 
Thanks for the update. 
 
Please let us know if you require further assistance on this. 
 
Regards, 
Ranjitha A. 


Srikanth
Replied On April 5, 2018 10:31 AM UTC

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 [Syncfusion]
Replied On April 6, 2018 06:01 AM UTC

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
Replied On April 23, 2018 05:17 PM UTC

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 [Syncfusion]
Replied On April 24, 2018 09:43 AM UTC

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. 
 
 
Regards,  
Karkuvel Rajan.S 


Srikanth
Replied On April 25, 2018 11:41 AM UTC

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 [Syncfusion]
Replied On April 26, 2018 09:41 AM UTC

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. 
 
 
Regards, 
Karkuvel Rajan.S 
 


Srikanth
Replied On April 26, 2018 11:14 AM UTC

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 [Syncfusion]
Replied On April 27, 2018 10:40 AM UTC

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 
 
 
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. 
 
 
Regards, 
Karkuvel Rajan.S 
 


Srikanth
Replied On April 28, 2018 08:13 PM UTC

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 [Syncfusion]
Replied On April 30, 2018 11:24 AM UTC

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 
 
 
 
Regards, 
Karkuvel Rajan.S 


Srikanth
Replied On April 30, 2018 06:20 PM UTC

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 [Syncfusion]
Replied On May 1, 2018 11:55 AM UTC

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 
 
 
Regards 
Karkuvel Rajan.S 


Srikanth
Replied On May 2, 2018 09:18 AM UTC

Thanks a lot Rajan.

Sincerely appreciate your patience and help. 

Srikanth
Replied On May 2, 2018 12:53 PM UTC

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 [Syncfusion]
Replied On May 3, 2018 11:00 AM UTC

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
Replied On May 3, 2018 05:45 PM UTC

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 [Syncfusion]
Replied On May 4, 2018 12:48 PM UTC

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); 
 
 
 
 
 
Regards, 
Karkuvel Rajan.S 


Srikanth
Replied On July 19, 2018 01:22 PM UTC

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 [Syncfusion]
Replied On July 20, 2018 01:16 PM UTC

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
Replied On July 20, 2018 03:06 PM UTC

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 [Syncfusion]
Replied On July 23, 2018 01:01 PM UTC

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 
 
 
 
Regards, 
Karkuvel Rajan.S 



Srikanth
Replied On July 23, 2018 03:17 PM UTC

Thanks Rajan,

I will test and come back to you. 


Thanks,
Sri.

Karkuvel Rajan Shanmugavel [Syncfusion]
Replied On July 24, 2018 10:36 AM UTC

Hi Srikanth, 
  
Thanks for the Update. We will wait to hear from you. 
  
Regards, 
Karkuvel Rajan.S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;