We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

How to keep selected node centered while zooming

Thread ID:

Created:

Updated:

Platform:

Replies:

118398 Mar 4,2015 04:42 PM Nov 1,2016 04:54 AM ASP.NET Web Forms 8
loading
Tags: Diagram
Jim Jacobs
Asked On March 4, 2015 04:42 PM

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 [Syncfusion]
Replied On March 5, 2015 08:36 AM

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
Replied On March 5, 2015 01:38 PM

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 [Syncfusion]
Replied On March 6, 2015 12:44 AM

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 [Syncfusion]
Replied On March 6, 2015 07:24 AM

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
Replied On October 29, 2016 12:12 PM

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 [Syncfusion]
Replied On October 31, 2016 01:19 AM

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.  
 

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
Replied On October 31, 2016 02:16 PM

Hi Shyam,

Thanks for the quick update.
This works just fine.

Thanks again

Jim

Kameshwaran R [Syncfusion]
Replied On November 1, 2016 04:54 AM

Hi Jim, 
  
Thanks for your update. 
  
Regards, 
Kameshwaran R.  
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;