How to keep selected node centered while zooming

[Jim Jacobs]

Hi,

Is there a technique to ensure that the selected node is kept in the center of the viewport while zooming in or out?  This would be really handy.

If no node is selected, zoom can continue to function as it does now.

Thanks in advance for any suggestions.

Jim

[Shyam G]

Hi Jim

We suggest you to use zoom  “focusPoint” property in order to achieve your requirement. Please refer the code snippet and sample below.

Code snippet:

function zoomin() {

            

            var diagram = $("#Diagram1").ejDiagram("instance");

            var node = diagram.selectionList[0];

            var zoom1 = ej.datavisualization.Diagram.Zoom();

            if(node)

                zoom1.focusPoint = { x: node.offsetX, y: node.offsetY };

            diagram.zoomTo(zoom1);

        }

Sample:http://www.syncfusion.com/downloads/support/directtrac/118398/zoomfocuspoint2099359955.zip

Please let me know if any concerns.

Regards,

Shyam G

[Jim Jacobs]

Hi Shyam,

I tried the code you provided, but it does not work.
See the attached video.

Just to be clear, I want 2 things to happen:

1. The diagram zooms in (or out)
   
2. The selected node is to be centered on the visible diagram area (viewport) during the zoom operation

As you can see from the video, this is not happening.

Any suggestions?

Thanks

Jim

Attachment: Syncfusion__Center_Selected_Node_When_Zooming__05Mar2015_ce4d59b0.zip

[Ashok Kumar V]

Hi Jim,

Thanks for your update.

We suggest you to move the selected Node to the centre of the diagram while zooming to achieve your requirement. Please refer the below code snippet and sample for your reference.

Here is the code snippet:

[JS]

var diagram = $("#Diagram1").ejDiagram("instance");

var node = diagram.selectionList[0];

var zoom1 = ej.datavisualization.Diagram.Zoom();

 if (node) {

       diagram.updateNode(node.name, { offsetX: $(diagram.element).width() / 2, offsetY: $(diagram.element).height() / 2 });

        zoom1.focusPoint = { x: node.offsetX, y: node.offsetY };

}          

diagram.zoomTo(zoom1);

Here is the Sample:
Sample

Please try the above and let us know if any concern.

Regards,

Ashok Kumar.

[Ashok Kumar V]

Hi Jim,

Please ignore the previous update and sorry for the inconvenience caused.

We are glad to inform you that we have created a simple sample to achieve your requirement. We suggest you to use diagram’s “bringToCenter” to achieve your requirement, also we have fixed the bugs in the diagram’s “bringToCenter” and the modified “ej.web.all.min”. Please try the below sample and code and let us know if it complies with your requirement, if not please get back to us.

Here is the code snippet:

[JS]

var diagram = $("#Diagram1").ejDiagram("instance");

var node = diagram.selectionList[0];

var zoom1 = ej.datavisualization.Diagram.Zoom();

if (node) {

     var bounds = ej.datavisualization.Diagram.Util.bounds(node);

     diagram.bringToCenter(bounds);

}

diagram.zoomTo(zoom1);

Here is the Sample:

Sample

Here is the File:

File

Please let us know if any concern.

Regards,

Ashok Kumar.

[Jim Jacobs]

Hi,

I realize this is an old post, but I'm having problems getting this to work.
Here's my code:

case 'zoomIn':
                var selectedNode = diagram.selectionList[0];
                var zoom1 = ej.datavisualization.Diagram.Zoom();
                zoom1.zoomFactor = 0.2;
                // Enable the Zoomable constraints before performing zoom - TFS1407
                $("#DiagramContent").ejDiagram({ constraints: ej.datavisualization.Diagram.DiagramConstraints.Default | ej.datavisualization.Diagram.DiagramConstraints.Zoomable });
                if (selectedNode) {
                    var bounds = ej.datavisualization.Diagram.Util.bounds(selectedNode);
                    diagram.bringToCenter(bounds);
                }
                diagram.zoomTo(zoom1);
                // Disable the Zoomable constraints after performing zoom - TFS1407
                $("#DiagramContent").ejDiagram({ constraints: ej.datavisualization.Diagram.DiagramConstraints.Default & ~ej.datavisualization.Diagram.DiagramConstraints.Zoomable });
                if (!selectedNode) {
                    $("#DiagramContent")
                        .ejDiagram({
                            scrollSettings: { horizontalOffset: 0, verticalOffset: 0 }
                        });
                }
                break;

I've also attached a video demonstrating my issue.

If I select the shape and click on the Zoom In toolbar button, the diagram zooms, but the shape is not centred.
However, if I zoom a few times, then suddenly it will centre.
It seems that you have to already be zoomed in a certain amount before the bringToCenter will work.
Should the bringToCenter not be performing the necessary zoom for me?
How do I accomplish what I'm trying to do - select a shape, zoom in and always have that shape centred as I zoom.
I realize that as I zoom out, there will come a point where it is not possible to keep the shape in the centre.

Also, it seems that by enabling/dsiabling zooming (which I'm doing for another reason), the node becomes de-selected.
How do I re-select that node?  I looked for something like node.select in the documentation, but didn't find anything.

Thanks for any advice on getting this to work.

I'm running version 14.3.0.49 using Chrome on Windows Server 2012.

Jim

Attachment: Syncfuiosn__BringToCenter_while_Zooming_Challenge__29oct2016_ac5ed7c3.zip

[Shyam G]

Hi Jim, 

Please use zoom  “focusPoint” property to achieve your requirement. Please refer to the help documentation link below. Also please set Zoomable constraints in the diagram’s model constraints as shown in the below code example.  

 

Help documentation link:https://help.syncfusion.com/aspnet/diagram/commands#zoom 

We have modified your code example and provided below. 

Code example: 

case "ZoomIn":                         

                        var selectedNode = diagram.model.selectedItems.children[0]; 

                        var zoom1 = ej.datavisualization.Diagram.Zoom(); 

                        zoom1.zoomFactor = 0.2; 

                        //enable zoomable constraints 

                        diagram.model.constraints = ej.datavisualization.Diagram.DiagramConstraints.Default | ej.datavisualization.Diagram.DiagramConstraints.Zoomable;                          

                        if (selectedNode) { 

                            var bounds = ej.datavisualization.Diagram.Util.bounds(selectedNode); 

                            //Defines the focusPoint to zoom the Diagram with respect to any point 

                            zoom1.focusPoint = { x: bounds.x, y: bounds.y }; 

                            diagram.bringToCenter(bounds); 

                        } 

                        diagram.zoomTo(zoom1); 

                        //disable zoomable constraints 

                        diagram.model.constraints = ej.datavisualization.Diagram.DiagramConstraints.Default & ~ej.datavisualization.Diagram.DiagramConstraints.Zoomable;                         

                        if (!selectedNode) { 

                            $("#DiagramContent") 

                                .ejDiagram({ 

                                    scrollSettings: { horizontalOffset: 0, verticalOffset: 0 } 

                                }); 

                        }                       

                        break; 

Regards, 

Shyam G 

[Jim Jacobs]

Hi Shyam,

Thanks for the quick update.

This works just fine.

Thanks again

Jim

[Kameshwaran R]

Hi Jim, 

  

Thanks for your update. 

  

Regards, 

Kameshwaran R.