Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic How can we make the canvas only readonly mode? (Read 2925 times)
Ankur shah
Junior Member
**
Offline


I Love MindFusion!

Posts: 63
Joined: Mar 16th, 2017
How can we make the canvas only readonly mode?
Apr 4th, 2017 at 10:19am
Print Post  
I am using diagram.endEdit(true); but it is not working in my case can you please let me know is there any other way to achieve this functionality?

One more question how can we fix the size of canvas? Do i need set it on HTML?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How can we make the canvas only readonly mode?
Reply #1 - Apr 4th, 2017 at 11:05am
Print Post  
endEdit exits in-place editing mode if it's currently active (showing edit-box over a node). If you want to disable double-click text editing, set the AllowInplaceEdit property to false. If you want to disable mouse interactions, set Behavior to DoNothing or SelectOnly.
  
Back to top
 
IP Logged
 
Ankur shah
Junior Member
**
Offline


I Love MindFusion!

Posts: 63
Joined: Mar 16th, 2017
Re: How can we make the canvas only readonly mode?
Reply #2 - Apr 4th, 2017 at 12:04pm
Print Post  
one more question how can we fix the size of canvas? Do i need set it on HTML?
Actually i need to show whole diagram in a view area as in my diagram it goes beyond view area.

Is there any api which fit the diagram in view area?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How can we make the canvas only readonly mode?
Reply #3 - Apr 4th, 2017 at 1:24pm
Print Post  
Size of the canvas element is set by the control, depending on current Bounds, ZoomFactor and MeasureUnit properties. You could call diagram.resizeToFitItems to set Bounds large enough to fit all nodes, and diagram.zoomToFit to apply ZoomFactor that will show everything in the parent div of the canvas.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: How can we make the canvas only readonly mode?
Reply #4 - Apr 12th, 2017 at 10:16am
Print Post  
Hi,

First, set fixed size of the parent div in html:

Code (HTML)
Select All
<div style="width: 500px; height: 500px; overflow: auto;">
    <canvas id="diagram"></canvas>
</div> 



Next, just call resiteToFitItems to resize the diagram to its contents and then zoomToFit.

Code (Javascript)
Select All
$(document).ready(function ()
{
	var diagram = MindFusion.Diagramming.Diagram.create($("#diagram")[0]);

	diagram.getFactory().createShapeNode(10, 10, 45, 30).init()
		.text('Node 1');
	diagram.getFactory().createShapeNode(75, 25, 45, 30).init()
		.text('Node 2');
	diagram.getFactory().createShapeNode(35, 70, 45, 30).init()
		.text('Node 3');
	diagram.getFactory().createDiagramLink(diagram.getNodes()[0], diagram.getNodes()[1]);
	diagram.getFactory().createDiagramLink(diagram.getNodes()[0], diagram.getNodes()[2]);

	diagram.resizeToFitItems(0);
	diagram.zoomToFit();
}); 



Regards,
Lyubo
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint