Diagram scroll limit

4 posts, 0 answers
  1. Michał
    Michał avatar
    2 posts
    Member since:
    Sep 2017

    Posted 04 Jul Link to this post

    Hello,

    When rendering a very big diagram in our application we found out that there is a scroll limit when using maximum zoom in the diagram. 

    In the simple example below: max zoom to the first diagram element on the left and then by ctrl + left mouse click scroll to the right, around yellow shape you come to the limit and you cannot scroll anymore to the right.

    The workaround is to zoomout to the initial position and zoom in again to the yellow element.

    I found out that the limit of scrolling is around 20000px. Is there any way to change it or is there any workaround for this? I found a solution for this and I did my own scrolling mechanism and I can scroll on the diagram wherever I want with no limitations but then when using the kendoContextMenu on the diagram the function open() on this menu causes diagram to be scrolled back to the 20000px limit.

     

    Example (without context menu but with the scroll limit):

    https://dojo.telerik.com/AREcIrIk

     

     

  2. Tsvetina
    Admin
    Tsvetina avatar
    2342 posts

    Posted 06 Jul Link to this post

    Hi Michal,

    I investigated this a bit and found that the 20000px is a hard-coded size in the internal scroller of the Diagram. Currently, there is no public property or method to change this number, so my first suggestion would be to see if limiting the max zoom level would be an option in your scenario.
    By default, the Diagram zooms up to 200% of the original size. If this is not required, you can set zoomMax to 1 (100%) or even a bit smaller number, e.g. 0.9 (90%). With 0.9, the Dojo sample can be zoomed successfully, but I do not know how big is your Diagram in original size:
    https://dojo.telerik.com/AREcIrIk/2

    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Michał
    Michał avatar
    2 posts
    Member since:
    Sep 2017

    Posted 06 Jul in reply to Tsvetina Link to this post

    Hi again,

    Our diagram can be N x 20 000px, so in the worst scenario, the zoom level you suggested could be not enough to actually see anything in the diagram.

    Is there any way to open the kendo context menu without using "open" method? For examply we try to open the context menu at 21 000px X-position and the diagram is scrolled back to 20 000px X-position. How to avoid it? Do I have to implement this menu without kendo built-in context menu mechanism and create my own custom context menu on the diagram?

  4. Tsvetina
    Admin
    Tsvetina avatar
    2342 posts

    Posted 10 Jul Link to this post

    Hi Michal,

    The ContextMenu can either be opened by setting a target element (<g> for shapes) or by calling the open() method. If you have not tried with a target element, you can see this example:
    Show Context Menu over Shapes

    If it does not work with your custom scrolling, the best that I can suggest with the current Diagram implementation is to disable panning and use regular scrolling using a scrollbar, like shown in this example:
    Using Scrollbar

    I combined the two examples with the Dojo you sent me and opening the context menu works as expected:
    https://dojo.telerik.com/AREcIrIk/3

    If you would like, you can log a feature request to allow extending the Diagram plot area to more than 20000px and/or to calculate the max scroll width based on the Diagram content.

    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top