This is a migrated thread and some comments may be shown as answers.

Moving the view over to the map

1 Answer 64 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
Veteran
John asked on 15 Dec 2020, 04:50 PM

In development we have a user definable dependency map; the shapes position is recorded using the value gained from the shape._bounds.x and y co-ordinates and these are stored in the database. The scope of the dependency map can have anywhere from a few shapes to thousands of shapes for example.

The problem i have come across is that when I am creating one of these maps; I us a combination of zoom and pan to navigate the positions of the shapes. I then may close the browser or go somehwere else on our website BUT when I come back to the web page with the diagram on and the dependency map is loaded I have a completely blank view port. As the diagram is actually on the canvas but out of view of the view port; so, I need to be able to move the view port to show the dependency map.

I have tried a couple of methods to do this, but it has not worked; I need help with this tricky situation. But what I do not want to do is re-position all the shapes as if there are thousands of these then I would need to change each shape x,y coordinates in the database; heavy workload. I would like the view port to move also, because I could then give functionality to the user to remember the last view and restore the view on each visit.

 

1 Answer, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 17 Dec 2020, 02:10 PM

Hi, John,

You could save the zoom() method to get the last known zoom and the pan() method to get the pan. then on page load, you can use the same methods to pan and zoom and finally bring the items into view:

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram/methods/bringintoview

To get you started I updated the Diagram API demo to include saving of the options and then applying the saved state:

              save: function(){
                this.set("panDelta", diagram.pan());
                this.set("zoom", diagram.zoom());
              },
              panDelta:{x:0, y:0},
              zoom:1,
              restore:function(){
                var zoom = this.get("zoom");
                var pan = this.get("panDelta")
                var rect = new Rect(pan.x, pan.y,diagram.viewport().height, diagram.viewport().width);
                diagram.bringIntoView(rect);
                diagram.zoom(zoom);
                diagram.pan(pan);
              }

Here is the runnable example for your reference:

https://dojo.telerik.com/@bubblemaster/OpOjOmIl

Let me know in case you have further questions or concerns.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Diagram
Asked by
John
Top achievements
Rank 1
Veteran
Answers by
Alex Hajigeorgieva
Telerik team
Share this question
or