Adding ports to the nodes

[Rahul Shanbhag]

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]

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.  

Documentation link: https://help.syncfusion.com/wpf/sfdiagram/port  

 

Regards, 

Jayanthi S. 

[Rahul Shanbhag]

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]

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.    https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents    Please let us know if you require further assistance on this.

Regards, 

Suresh Shanmugam