Zoom in and zoom out buttons

6 posts, 0 answers
  1. Mantas
    Mantas avatar
    8 posts
    Member since:
    Jul 2015

    Posted 10 Jul Link to this post

    Hello, 

    I would like to implement zoom in and out buttons manually.

    http://dojo.telerik.com/Irepu/5

     

    Here's a dojo fiddle, and currently button zooms in and out at the very center of diagram where I use .boundingBox(). But if I click on FOCUS button (which for demo purposes moves focus to the beginning to the diagram) I would like those buttons to zoom in and out at the center of the screen which user sees, so that the beginning of the diagram would be zoom in and out.

     

    As I imagine I would need some .boundingBox() offsets or something. However i can not find anything like that.

  2. Mantas
    Mantas avatar
    8 posts
    Member since:
    Jul 2015

    Posted 12 Jul Link to this post

    Does someone has faced such kind of problem? Anyone?
  3. Stefan
    Admin
    Stefan avatar
    1153 posts

    Posted 12 Jul Link to this post

    Hello Mantas,

    Thank you for the provided example.

    After inspecting it, I noticed that if the bringIntoView method is not called after zooming in and our, the Diagram is not centred again.

    Also, if the same shape which is passed on the focus is passed for zoom in and our, this will create a look closer to the desired result. This will require checking if the Diagram is focused already or not:

    http://dojo.telerik.com/Irepu/8

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Mantas
    Mantas avatar
    8 posts
    Member since:
    Jul 2015

    Posted 12 Jul Link to this post

    Appreciate your response.

    However my problem is a bit different. User have buttons to move around.

    So I move to the right and the most right shape is in the center of screen (first screenshot). And when I press zoom in, I would expect this shape (which was in the middle of screen) to stay in the middle of screen, but it does not (second screenshot).

    I cannot use .bringIntoView(), because user might not have any shape selected. 

    Is there any way to find out coordinates of visible part of diagram on screen to user?

     

    1. <a href="http://imgur.com/UfKU0LQ">http://imgur.com/UfKU0LQ</a>

    2. <a href="http://imgur.com/v6Sn04U">http://imgur.com/v6Sn04U</a>

  5. Mantas
    Mantas avatar
    8 posts
    Member since:
    Jul 2015

    Posted 12 Jul Link to this post

    Forgot to attach working sample

    dojo

  6. Stefan
    Admin
    Stefan avatar
    1153 posts

    Posted 14 Jul Link to this post

    Hello Mantas,

    Thank you for the provided example.

    In this scenario I can suggest only zooming the Diagram without setting a specific point, as the widget will automatically zoom the currently viewed portion of the surface:

    http://dojo.telerik.com/Irepu/11

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 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