How to avoid the node clipping while export in the WPF Diagram?

In the WPF Diagram, dropping a node over page breaks may cause the node to get split during export, with one half on each page.

We can prevent this by adjusting the node’s position when they are placed on page breaks. This adjustment is made possible through drag-and-drop functionality from the Stencil. The node position is modified using the ItemDropEvent.

We have provided the code example for how to achieve this. In the below code sample, we perform calculations within the ItemDropEvent to determine if the node is placed on a page break and then adjust its position accordingly by modifying the OffSetX and OffSetY values.

C#

//diagram is an instance of SfDiagram

SfDiagram diagram = new SfDiagram();

//Adding ItemDropEvent

(diagram.Info as IGraphInfo).ItemDropEvent += MainWindow_ItemDropEvent;

//Method for executing the ItemDropEvent

private void MainWindow_ItemDropEvent(object sender, ItemDropEventArgs args)
{
   //For Offset X
         
   //Store the Offset value for moving the Node Offset
   var OldOffsetX = (args.Source as NodeViewModel).OffsetX;

   //Rounded off the Offset value
   var RoundedNumberX = Math.Round((args.Source as NodeViewModel).OffsetX);
           
   var numberX = RoundedNumberX / diagram.PageSettings.PageWidth;

   //Convert to string
   var numberStringX = numberX.ToString();
         
   //Find the index value of the decimal point
   var decimalIndexForX = numberStringX.IndexOf('.');

   //Get the values after the decimal index if the index is -1 i have change this to 1
   var stringAfterDecimalForX = decimalIndexForX != -1 ? numberStringX.Substring(decimalIndexForX + 1) : "1";

   //Covert the string to int
   int finalNumberX = int.Parse(stringAfterDecimalForX);

   if (args.Source is INode)
   {
       if ((args.Source as NodeViewModel).OffsetX > (diagram.PageSettings.PageWidth/2))
       {
           //Move the dropped node if the offset value is less than 1000 
           if (finalNumberX >= (diagram.PageSettings.PageWidth - (args.Source as NodeViewModel).UnitWidth)) //&& num1 < diagram.PageSettings.PageWidth)
           {
               (args.Source as NodeViewModel).OffsetX = OldOffsetX - (args.Source as NodeViewModel).UnitWidth;
               return;

           }
           //Move the dropped node if the offset value is greater than or equal 1000 
           if (finalNumberX >= 1 && finalNumberX < (args.Source as NodeViewModel).UnitWidth)
           {
               (args.Source as NodeViewModel).OffsetX = OldOffsetX + (args.Source as NodeViewModel).UnitWidth;
               return;
           }
       }           
   }


   //For Offset Y

   //Store the Offset value for move the Node Offset
   var OldOffsetY = (args.Source as NodeViewModel).OffsetY;

   //Rounded off the Offset value
   var RoundedNumberY = Math.Round((args.Source as NodeViewModel).OffsetY);

   var numberY = RoundedNumberY / diagram.PageSettings.PageWidth;

   //Convert to string
   var numberStringY = numberY.ToString();

   //Find the index value of the decimal point
   var decimalIndexForY = numberStringY.IndexOf('.');

   //Get the values after the decimal index if the index is -1 i have change this to 1
   var stringAfterDecimalForY = decimalIndexForY != -1 ? numberStringY.Substring(decimalIndexForY + 1) : "1";

   //Covert the string to int
   int finalNumberY = int.Parse(stringAfterDecimalForY);

   if (args.Source is INode)
   {
       //Move the dropped node if the off set value is less than 1000 
       if (finalNumberY >= (diagram.PageSettings.PageWidth - (args.Source as NodeViewModel).UnitWidth))
       {
           (args.Source as NodeViewModel).OffsetY = OldOffsetY - (args.Source as NodeViewModel).UnitWidth;
       }
       //Move the dropped node if the off set value is greater than or equal 1000 
       if (finalNumberY >= 1 && finalNumberY < (args.Source as NodeViewModel).UnitWidth)
       {
           (args.Source as NodeViewModel).OffsetY = OldOffsetY + (args.Source as NodeViewModel).UnitWidth;
       }
   }

}

View sample in GitHub

Conclusion
I hope you enjoyed learning about how to avoid node clipping while export in the WPF Diagram (SfDiagram).
You can refer to our WPF Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!