Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Alignment of Diagram (Read 5309 times)
dittu
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 20
Joined: Feb 6th, 2015
Alignment of Diagram
Feb 25th, 2015 at 11:17am
Print Post  
Hi,

Is there a way to align the diagram centrally. My diagram, in some specific case has say, 3 nodes, that takes the top left space and whole area is empty (In case of Layered layout), I want this to be centrally aligned with options say Horizontal (0-0-0) or Vertical.

Thanks
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Alignment of Diagram
Reply #1 - Feb 25th, 2015 at 6:59pm
Print Post  
Hi,

There are no layout centering options available. If you detect the arranged nodes take up less space than the viewport, you could assign new diagram.Bounds coordinates that have the arranged nodes centered in the bounding rectangle:

Code
Select All
diagram.arrange(layout);
diagram.resizeToFitItems();

var itemsRect = diagram.getContentBounds();
var viewRect = diagram.getViewport();
if (itemsRect.width < viewRect.width)
{
	var diagRect = diagram.getBounds();
	diagRect.x = itemsRect.center().x - viewRect.width / 2;
	diagRect.width = viewRect.width;
	diagram.setBounds(diagRect);
} 



If you also want to center when the diagram is larger than current viewport, you could implement it by setting the view's scroll position to the x value found above.

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
dittu
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 20
Joined: Feb 6th, 2015
Re: Alignment of Diagram
Reply #2 - Mar 9th, 2015 at 1:51pm
Print Post  
Hi Stoyo,

Thanks for you response. But I was not able to bring my diagram in the centre. Say, as per example
my window/div size is width:900px; height:500px. My canvas size is width="2100" height="2100".
Diagram.getContentBounds() and diagram.getViewport() gives me a very small value compared to these sizes and hardly any difference between those. So, I'm not able to understand what actually viewport is?

I want to display my diagram in the centre of the window, so say, if its 900*500 and if suppose there is only one node it should be centered at 450,250 of window (and I assume canvas as well). So, can you please provide help in this context.

Thanks & Regards
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Alignment of Diagram
Reply #3 - Mar 10th, 2015 at 11:19am
Print Post  
Hi,

The code above centers diagram's content (only horizontally) inside the current view. If you want it centered inside the window, you must either make the view's div as big as the window (100% width and height), or set its margins to center it. Attached test page resizes the div to show the node centered in window.

The sizes you get from getViewport and getContentBounds methods are measured in diagram's MeasureUnit, i.e. millimeters by default.

I hope that helps,
Stoyan
  

test.zip ( 187 KB | 192 Downloads )
Back to top
 
IP Logged
 
dittu
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 20
Joined: Feb 6th, 2015
Re: Alignment of Diagram
Reply #4 - Mar 22nd, 2015 at 11:25am
Print Post  
Hi Stoyo,
Even if I try to place diagram somewhere in the centre horizontally. Zoom works the initial way, it zooms from top left instead of center. I want zoom centre point to be fixed and zoom in all directions. I found this setZoomFactorPivot (zoomFactor, pivotPoint). Can this help and how?

Thanks a lot.
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Alignment of Diagram
Reply #5 - Mar 23rd, 2015 at 9:37am
Print Post  
Hi,

setZoomFactorPivot should help, but now I see it does not work correctly when VirtualScroll is enabled. For time being you could use zoomToRect as a work-around:

Code
Select All
function onZoomIn()
{
	var diagram = $find("diagram");

	var scale = 1.5;
	var vp = diagram.getViewport();
	var c = vp.center();
	if (!diagram.getVirtualScroll())
	{
		diagram.setZoomFactorPivot(diagram.zoomFactor * scale, c);
	}
	else
	{
		vp.x = c.x - (c.x - vp.x) / scale;
		vp.y = c.y - (c.y - vp.y) / scale;
		vp.width /= scale;
		vp.height /= scale;
		diagram.zoomToRect(vp);
	}
} 



I hope that helps,
Stoyan
« Last Edit: Mar 23rd, 2015 at 12:44pm by Stoyo »  
Back to top
 
IP Logged
 
dittu
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 20
Joined: Feb 6th, 2015
Re: Alignment of Diagram
Reply #6 - Apr 17th, 2015 at 7:03am
Print Post  
Hi Stoyo,

WHt is the exact signature to override this onZoomIn function? I'm using zoomer control.

Thanks
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Alignment of Diagram
Reply #7 - Apr 17th, 2015 at 8:08am
Print Post  
Hi,

The zoom control calls IZoomTarget.setZoomLevel(value) function, you can replace the Diagram implementation like this:

Code
Select All
var Diagram = MindFusion.Diagramming.Diagram;
Diagram.prototype.setZoomLevel = function (value)
{
	var vp = this.getViewport();
	var c = vp.center();
	if (!this.getVirtualScroll())
	{
		this.setZoomFactorPivot(value, c);
	}
	else
	{
		var scale = value / this.zoomFactor;
		vp.x = c.x - (c.x - vp.x) / scale;
		vp.y = c.y - (c.y - vp.y) / scale;
		vp.width /= scale;
		vp.height /= scale;
		this.zoomToRect(vp);
	}
}; 



I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint