Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Container with rounded corners (Read 3702 times)
Kiran B
Full Member
***
Offline


I Love MindFusion!

Posts: 102
Joined: Apr 19th, 2013
Container with rounded corners
Oct 21st, 2013 at 8:02pm
Print Post  
Hi,

How can i make container nodes with rounded corners.

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


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Container with rounded corners
Reply #1 - Oct 22nd, 2013 at 12:43pm
Print Post  
You would use the ContainerNode.Shape property, but we haven't implemented it yet in JavaScript. For the time being you could custom-draw the rounded rectangle:

Code
Select All
container.onUpdateVisuals = onUpdateVisuals;

function onUpdateVisuals(node)
{
    var shape = MindFusion.Diagramming.Shape.fromId('RoundRect');
    var path = new MindFusion.Drawing.Path(shape.params.outline);

    var shapeBounds = shape.defaultBounds;
    var bounds = node.getBounds();
    var x = bounds.width / shapeBounds.width;
    var y = bounds.height / shapeBounds.height;

    var matrix = new MindFusion.Drawing.Matrix();
    matrix.translate(bounds.x - bounds.width / 2, bounds.y - bounds.height / 2);
    matrix.scale(x, y);
    matrix.translate(
        bounds.width / x - shapeBounds.x - shapeBounds.width / 2,
        bounds.height / y - shapeBounds.y - shapeBounds.height / 2);

    path.transform = matrix;
    node.graphicsContainer.content.splice(0, 1, path);
} 



I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Kiran B
Full Member
***
Offline


I Love MindFusion!

Posts: 102
Joined: Apr 19th, 2013
Re: Container with rounded corners
Reply #2 - Oct 23rd, 2013 at 5:55pm
Print Post  
Hi Stoyan,

Its working , but few issues.

The background color i have given for container is getting lost when i use the above code.
Also the caption title is getting overlapped with the rounded corners when i enlarge the container.

Also is there any way to apply this globally to all containers?
The code i have used is
diagram.items[0].onUpdateVisuals = onUpdateVisuals;

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


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Container with rounded corners
Reply #3 - Oct 24th, 2013 at 8:54am
Print Post  
Try this
Code
Select All
var ContainerNode = MindFusion.Diagramming.ContainerNode;
var originalDraw = ContainerNode.prototype.updateCanvasElements;
ContainerNode.prototype.updateCanvasElements = function ()
{
	originalDraw.apply(this);

	var w = this.bounds.width;
	var h = this.bounds.height;
	var r = 3;
	var pathString = String.format(
		'M0,{2} L0,{4} Q0,{1},{2},{1} L{3},{1} Q{0},{1},{0},{4} L{0},{2} Q{0},0,{3},0 L{2},0 Q0,0,0,{2} Z',
		w, h, r, w - r, h - r);
	var path = new MindFusion.Drawing.Path(pathString);
	path.brush = this.brush;
	path.transform.translate(this.bounds.x, this.bounds.y);
	this.graphicsContainer.content.splice(0, 1, path);
}; 



I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Kiran B
Full Member
***
Offline


I Love MindFusion!

Posts: 102
Joined: Apr 19th, 2013
Re: Container with rounded corners
Reply #4 - Oct 24th, 2013 at 4:41pm
Print Post  
Hi Stoyan,

Working perfectly.

Thanks
Kiran B
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint