Moving the view over to the map

[John]

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.

 

[Alex Hajigeorgieva]

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