drawing connectors and nodes

[Tobias Koller]

hi,

here are two things I have to implement in my diagram.

1. Drawing Connectors only when mouse is over port

I want to draw a connection only when the mouse is above a node-port.

How can I archive this?

2. Preview available 

Is there a way to create a preview of a connector/node when clicking a port so that the user simply clicks a node-port,selects the displaying preview-node and after that the preview disappears again and a real node/connection gets created.

Best Regards

Tobias

[Aravind Ravi]

Hi Tobias, 

 

Please find the response for queries in below table 

 

I want to draw a connection only when the mouse is above a node-port.  How can I archive this?

To create connector from port set port constraints as “Draw”.  So that when you mouse hover on port , port gets highlighted and able to create connection from port. Please find below code snippet for how to set port constraints.    Ports = new ObservableCollection<DiagramPort>()                  {                      new DiagramPort()                      {                          Offset = new NodePortOffset() { X = 1, Y = 0.5},                          Visibility = PortVisibility.Visible,                          Constraints = PortConstraints.Draw                      }                  }

Is there a way to create a preview of a connector/node when clicking a port so that the user simply clicks a node-port,selects the displaying preview-node and after that the preview disappears again and a real node/connection gets created.

Currently in diagram we does not have support to show preview of node / connector when click on port. In diagram when you click on port , “Clicked” event gets triggered.By using that event you can add new node / connector in diagram. Please find below code snippet for how to use clicked event.    <SfDiagram ID="diagram" Width="1000px" Height="@Height" @ref="@diagram" Nodes="@NodeCollection">              <DiagramEvents Clicked="@Clicked"></DiagramEvents>            </SfDiagram>    @functions {  public void Clicked(IBlazorClickEventArgs args)      {          if(args.Element.Selector != null && args.Element.Selector.Nodes != null)          {              diagram.BeginUpdate();              DiagramNode node = new DiagramNode() { Height = 100, Width = 100, OffsetX = 500, OffsetY = 300 };              diagram.Add(node);              diagram.EndUpdate();          }      }    }

 

We have attached a sample for your reference. Please find the sample in below link 

 

Sample: https://www.syncfusion.com/downloads/support/forum/153378/ze/Nodes-1159229656 

[Tobias Koller]

thank you. that helped me a lot :-)

Best regards

Tobias

[Aravind Ravi]

Hi Tobias, 

 

Thanks for your update. 

 

Regards 

Aravind Ravi