Cannot snapping when moving a node into the Diagram control

[Pham Van Sy]

Hi Team,

I have a question about the snapping function when moving the node in the Diagram control,

I assigned the snaping for the DIagram control, I create some nodes into the DIagram, but when I moving the node to snapping with other nodes but it's not highlighted the lines to snap with other nodes
I build my application based on the angular and ionic framework, this is my code

export function getSnapSettings(showLine: boolean): SnapSettingsModel

{

    let snapConstrain = null;

    if (showLine)

        snapConstrain = SnapConstraints.All;

    else

        snapConstrain = SnapConstraints.All & ~SnapConstraints.ShowLines;

    let snapSetting: SnapSettingsModel =

    {

        constraints: snapConstrain,

        gridType: 'Lines',

        horizontalGridlines: { },

        verticalGridlines: {},

    }

    return snapSetting;

}

private setDiagramSettingsDefault(): void

  {

    if (!IsNullOrUndefined(this.diagramControl))

    {

      if (this.allowCross)

        this.diagramControl.constraints = DiagramConstraints.Default;

      else

        this.diagramControl.constraints = DiagramConstraints.Default & ~DiagramConstraints.Zoom & ~DiagramConstraints.Bridging;

      this.diagramControl.scrollSettings = { canAutoScroll: false, horizontalOffset: 0, verticalOffset: 0, scrollLimit: 'Diagram' };

      this.diagramControl.tool = DiagramTools.ZoomPan | DiagramTools.MultipleSelect | DiagramTools.SingleSelect;

      this.diagramControl.rulerSettings = this.rulerSettings;

      this.diagramControl.snapSettings = this.snapSettings;

      this.diagramControl.pageSettings = this.pageSettings;

      this.diagramControl.dataBind();

    }

  }

I have tried this code with the angular for web application the it's working fine but for then Ionic it's not working
Please help me check this issue
Thanks!

Sy

[Vaseegaran Chinnathambi]

Hi Pham ,

We have created a working Ionic sample using the code you provided. In this sample, the snapping lines appear and function correctly as expected when moving the nodes.

Please ensure that the SnappingService module is included in the providers array to enable proper rendering of the snapping lines.

We have attached the working sample below for your reference. If you are still facing issues, we kindly request you to modify the code in the attached sample and share it back with us. This will help us provide a more accurate and timely solution.

Regards,
Vaseegaran

Attachment: syncfusiondiagramapp_79c2e418.zip

[Pham Van Sy]

Hi  Vaseegaran,

Thank for your reply

I have checked my project and I do not add SnappingService into Provider array, so it not wroking
When I added the Snapping service, it's working fine

Thank You!
Sy

[Preethi Rajakandham]

Hi Pham Van Sy,

You are welcome.

We are glad to know that the reported problem has been resolved. Please let us know if you require any further assistance on this. We will be happy to assist you.

Regards,

Preethi R