AutoScroll always "true" in the Diagram

Question

Hi Syncfusion Team,I use Diagram Component in my project. I set the property scrollSettings of the diagram: { canAutoScroll: false }. But I don't know: if I implement some logics and log the diagram's scrollSettings canAutoScroll

(diagram.scrollSettings.canAutoScroll), it always shows "true" on the console Tab.I don't know the reason why this happened. Is there any other property can affect the "canAutoScroll" property, so that it always show "true"?Thanks,Nguyen

Vivisa Ganesan · Accepted Answer

Hi,You're
welcome! Please let us know if you have any further queries on this. We
will be happy to assist.Regards,Vivisa

nguyen hoang phuong · Answer

Hi,I've just found out that I cannot set any property of the scrollSettings. It always get this value: { maxZoom: 30, minZoom: 0.2, scrollLimit: 'Infinity', canAutoScroll: true}.What can I do now?Thanks,Nguyen

Moulidharan Gopalakrishnan · Answer

Hi,We have set the canAutoScroll property to true and false and
it is working properly at our end. Could you please check the below video for
your reference. Still if you face issues, could you please modify the below
sample. Please refer the below sample and documentation. Documentationhttps://ej2.syncfusion.com/angular/documentation/diagram/scroll-settings#updateviewportSamplehttps://stackblitz.com/edit/angular-tfg8rh-8dpqqd?file=src%2Fapp.component.ts,src%2Fapp.component.htmlRegards, MoulidharanAttachment: DiagramAutoScroll_fde4e623.zip

nguyen hoang phuong · Answer

Hi,I found the issue in my code. And now I can set the canAutoScroll property to true or false.But I have another problem. I use the bringToCenter method of the diagram to bring a node to the center of the diagram's viewport. But sometimes, after triggering that method, a node is in the center, and the diagram has the scroll bar; and then the diagram starts scrolling automatically until all the nodes are in the viewport, even if I set the canAutoScroll property to false. I don't know why this happened. Maybe the diagram tends to put all the nodes in the viewport ??Regards,Nguyen

Moulidharan Gopalakrishnan · Answer

Hi,While Performing bringToCenter operation it does not
bring a node in the center of viewport by changing the offset of the node, the
actual behavior of the “bringToCenter” will update the whole diagram canvas
region to move in to center of viewport respective to the selected node’s
bounds. By this phenomenon the scroll bar will move based on initial diagram
bounds(height and width). The Autoscroll feature automatically scrolls the diagram,
whenever the node or connector is moved beyond the boundary of the diagram.Refer the below sample which includes attached rulers to
observe changes in the diagram viewport measurements/bounds and documentation
for your reference.Documentationhttps://ej2.syncfusion.com/angular/documentation/diagram/scroll-settings#autoscrollSamplehttps://stackblitz.com/edit/angular-jgx8kl-ratmoo?file=src%2Fapp.component.ts,src%2Fapp.component.htmlRegards,Moulidharan

nguyen hoang phuong · Answer

Hi,Thanks for your information.Is there any way to bring a Node to the center of diagram's viewport ? If yes, please give me a sample of it. Thanks.Regards,Nguyen

Moulidharan Gopalakrishnan · Answer

Hi,We created a sample
to achieve your requirement.
To bring a Node to the center of diagram's viewport set the “scrollLimit” to 'Infinity'
in the scrollsettings and perform “bringToCenter” operation, Refer the below
sample and documentation for your referenceCode Snippet

scrollSettings : 
  {
             
  scrollLimit : 'Infinity',
        },

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

nguyen hoang phuong · Answer

Hi,Thanks for your suggestion. I will try with it.I have another question. I also prepared a sample for my question.https://stackblitz.com/edit/angular-11-new-jlcz3m?file=src%2Fapp%2Fapp.module.ts  If we don't click the "Toggle Expand" button and just click the "Bring To Center" button, the diagram works well.But if we click the

"Toggle Expand" button, it means the diagram's width will change, and the "bringToCenter" method will bring the Node to the center of its old viewport. But what I want is the center of the new viewport.The question is: Are we able to bring a Node to the center of new diagram's viewport, after we change the diagram's width? Right now, it seems like, it will bring a Node to the center of viewport, which is generated in the first mount of the diagram.Regards,Nguyen

Moulidharan Gopalakrishnan · Answer

Hi,We modified the provided sample  to achieve your requirement. It appears that you have changing the width of the diagram container when updating button container. To update the diagram viewport accordingly, please utilize the ‘diagram.updateViewPort()’ method for the new diagram viewport, now bringToCenter will work fine.Code Snippetpublic bringIntoCenter(): void {   this.diagram.updateViewPort();   this.diagram.bringToCenter(currentNode.wrapper.bounds);}Documentationhttps://ej2.syncfusion.com/react/documentation/diagram/scroll-settings#updateviewport Samplehttps://stackblitz.com/edit/angular-11-new-ykzqdg?file=src%2Fapp%2Fapp.component.tsRegards,Moulidharan

nguyen hoang phuong · Answer

Hi,That's awsome. Thanks for your help.Regards,Nguyen