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.
Unfortunately, activation email could not send to your email. Please try again.

Adding ports to the nodes

Thread ID:

Created:

Updated:

Platform:

Replies:

129113 Feb 28,2017 05:45 AM Mar 3,2017 07:18 AM WPF 3
loading
Tags: SfDiagram
Rahul Shanbhag
Asked On February 28, 2017 05:45 AM

Hi,

We are evaluating SyncFusion for our project and I have installed Sample Application Studio that I got from your website. In the installed studio I found an application that is suitable for our application. The name of the sample application is "Diagram Builder" and uses SfDiagram control. I have some requirements in the same application and my requirement is something like:

I want to define a custom shape and the custom shape should have 3 ports at particular location only. I followed the example and I used Path mapping to achieve my custom object. But finding it difficult to add the ports to the location I need. I followed the online documentation and I understood that it is achievable. But I am not sure how.


Consider I have a Square as object I want port to be defined at center of every side of the square. The ports should be on the sides of the Square.

Thanks in advance

Jayanthi Sivabalan [Syncfusion]
Replied On March 1, 2017 04:25 AM

Hi Rahul, 
 
Thank you for using Syncfusion products. 
 
Requirement: “Adding ports to the nodes” 
 
We have a support to achieving the reported requirement. We have provided sample for this. Please refer the attached sample. 
Sample : Adding_Port
 
  
Note:  
For more information about adding ports to the Node, please refer online documentation link as below.  
 
Regards, 
Jayanthi S. 


Rahul Shanbhag
Replied On March 2, 2017 12:53 AM

Hi,

I appreciate the quick response. I was able to add the ports to the node. But I still have some issues with it. The following is the code and Shape Splitter is actually a path string.
the following are the issues that I am facing:

1. As you could see from the code I have set the constraints to "None". I am expecting all the ports at the node be inactive. i.e No Connection Coming in/ Going Out of any port. But still the node is able to accept the connection coming to it. Not sure if I am missing anything here.

2. NodeOffset X and Y are set to 0.5 and this works when I initially connect a link to any node but when I redraw the connector I can connect to any part of the node. Same case in the example you provided.

3. I was using the port visibility property to make the ports visible always. But still the ports are not visible. Do I have to specify any styles for it ? If Yes where do I define it in the following code?

<sys:String x:Key="Splitter">
        M 15 4 L 2 4 M 8 8 L 2 4 L 8 0 M 0 0 L 0 8 L 15 8 L 15 0 L 0 0
    </sys:String>

<syncfusion:NodeViewModel Key="Aggregates" UnitHeight="50" UnitWidth="50" OffsetX="100" OffsetY="100" Shape="{StaticResource Splitter}" ShapeStyle="{StaticResource SymbolStyle}">
            <syncfusion:NodeViewModel.Ports>
                <!--Initializes the NodePort-->
                    <syncfusion:NodePortViewModel x:Name="port" UnitWidth="20" PortVisibility="Visible" Constraints="None"
                                                      UnitHeight="10" NodeOffsetX="0.5" NodeOffsetY="0.5">
                       
                    </syncfusion:NodePortViewModel>
            </syncfusion:NodeViewModel.Ports>
        </syncfusion:NodeViewModel>


Thanks in advance.

Suresh Shanmugam [Syncfusion]
Replied On March 3, 2017 07:18 AM

Hi Rahul, 

Please find the responses for your queries as below, 

Query 
Response 
I am expecting all the ports at the node be inactive. i.e No Connection Coming in/ Going Out of any port. 
 
 I was using the port visibility property to make the ports visible always. But still the ports are not visible. 
Need to add the NodePort in collection and then add it to Ports property of the Node. Please find the code example as below, 

Code Example : 

//Create port collection 
public class PortCollection : ObservableCollection<IPort> 
{ 
 
} 


 
<syncfusion:SfDiagram x:Name="diagram" Grid.Column="0"> 
       <syncfusion:SfDiagram.Nodes> 
              <syncfusion:NodeCollection> 
                     <syncfusion:NodeViewModel x:Name="node" UnitHeight="50" UnitWidth="50" OffsetX="100"  
                                               OffsetY="100" Shape="{StaticResource Splitter}"  
                                               ShapeStyle="{StaticResource shapestyle}"> 
                        <syncfusion:NodeViewModel.Ports> 
                            <local:PortCollection> 
                                <syncfusion:NodePortViewModel x:Name="port" UnitWidth="20" PortVisibility="Visible" 
                                                              Shape="{StaticResource Ellipse}" Constraints="None" 
                                                              ShapeStyle="{StaticResource portshapestyle}" 
                                                              UnitHeight="10" NodeOffsetX="0.5" NodeOffsetY="0.5"> 
                                </syncfusion:NodePortViewModel> 
                            </local:PortCollection> 
                        </syncfusion:NodeViewModel.Ports> 
                    </syncfusion:NodeViewModel> 
              </syncfusion:NodeCollection> 
       </syncfusion:SfDiagram.Nodes> 
</syncfusion:SfDiagram> 
 
 
                 
 
NodeOffset X and Y are set to 0.5 and this works when I initially connect a link to any node but when I redraw the connector I can connect to any part of the node. Same case in the example you provided 
We have created a support incident under your account to track the status of the reported queries. Please log on to our support website to check for further updates.   
Please let us know if you require further assistance on this.    
  


Regards, 
Suresh Shanmugam 


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.

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.

;