How to keep the scrollbar position from moving up when refresh diagram control?

Hi team!
I have an issue with the refresh the Diagram control
I having draw a connector with the side to side style
When I moving the mouse to draw, I have call the refresh method for Diagram control to update the position of the connector, but the scrollbar move up, this makes it impossible for me to draw the connector accurately
Can you see on video link
This is code I did the command to draw a connector

onDiagramMouseOver(args: MouseEvent): void
  {
    if (!this.startingDrawCommunication)
      return;

    if (this.userCommand === CommunicationCommands.SideToSideCmd)
    {
      const offsetX = args.offsetX;
      const offsetY = args.offsetY;
     
      if (!IsNullOrUndefined(this.connectorDrawing))
      {
        this.connectorDrawing.targetPoint = { x: offsetX, y: offsetY };
        this.connectorDrawing.segments = [{
          type: 'Orthogonal',
          direction: 'Right',
          length: Math.abs(this.connectorDrawing.sourcePoint.x - offsetX) * 0.5

        },
        {
          type: 'Orthogonal',
          direction: 'Bottom',
          length: Math.abs(this.connectorDrawing.sourcePoint.y - offsetY)
        },
        {
          type: 'Orthogonal',
          direction: 'Right',
          length: Math.abs(this.connectorDrawing.sourcePoint.x - offsetX) * 0.5
        }
        ]
        this.diagram.dataBind();
        this.diagram.refresh();
      }
    }
  }


Please review it and let me know your suggestion or workaround
Thank You!

SY




7 Replies

PK Pranoove Karnan Syncfusion Team March 15, 2025 03:49 AM UTC

Hi Pham,

Calling the refresh method to update the position is not advisable in the diagram component. If you want to draw a connector, you can use the draw tool from the diagram. We have attached a sample and the user guide for the draw tool. Please refer to them for more details.

Sample: https://stackblitz.com/edit/angular-aswjhng1-szxknxox?file=src%2Fapp.component.ts

User Guide: https://ej2.syncfusion.com/angular/documentation/diagram/tools#draw-connectors

If this suggestion does not meet your requirement, please share a runnable sample to replicate the issue, as the provided code snippet is not sufficient for us to reproduce the problem. Additionally, kindly provide clear issue details and replication steps.

Let us know how we can assist further.

Best regards,
Dhakshin




PV Pham Van Sy replied to Pranoove Karnan March 15, 2025 07:50 AM UTC

Thank for your reply
I have tried to use the Diagram tool, but I cannot draw a connector with the side to side style
When I  executing the drawing command, I want to fix the Shape of the connector, if I use the Diagram tool, the shape of the connector is not as I expect. Do you have any the ways to draw a connector with this style?
Image_8113_1742024982483


Thank You!

SY



MG Moulidharan Gopalakrishnan Syncfusion Team March 17, 2025 01:57 PM UTC

Hi,

We have modified the sample to meet your requirement, as shown in the screenshot, by adding segments to the connector. This has been achieved using the collectionChange event, where the connector segment is updated at the end of the drawing process.

Please find the updated sample below:

🔗 Sample: StackBlitz - Angular Example

Let us know if you need any further modifications!

Best regards,
Moulidharan




PV Pham Van Sy replied to Moulidharan Gopalakrishnan March 20, 2025 10:35 AM UTC

Thank for your answer!
I have tried your solution and It's working fine
But I have a question. Do you have any ways to update the position, shape when I dragging the connector?
Thank You!



MJ Meriton Jamesdurai Syncfusion Team March 21, 2025 12:19 PM UTC

Hi,

Thank you for your feedback!

Regarding your question about updating the position or shape while dragging the connector:

Could you please share more details about which specific position or shapes you want to update when dragging the connector?

Once we understand your exact requirement, we will provide you with the appropriate solution or sample to achieve it.

Looking forward to your clarification!

Best regards,

Meriton




PV Pham Van Sy replied to Meriton Jamesdurai March 31, 2025 04:34 AM UTC

Sorry for the later reply
I mean when I dragging the connector, I want it's shape to always be like this
Image_6878_1743395483332
Your solution above only update the shape when completed the Dragging the connector
Please help me to get the a solution for this one
Thank You!



MJ Meriton Jamesdurai Syncfusion Team April 1, 2025 09:49 AM UTC

Hi,

Thank you for reaching out.

While dragging the connector, its shape does not change. We have attached a video demonstrating our testing, where we attempted to replicate the issue on our end but were unable to do so.

To assist you better, could you please share a video demonstrating the issue or provide the exact replication steps? This will help us investigate further and provide you with the correct solution.

Looking forward to your response.

 

Best regards,

Meriton



Attachment: Connector_Drag_89536c06.zip

Loader.
Up arrow icon