Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Border Radius and Cell Padding for TableNode (Read 3900 times)
Santosh
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 28
Joined: Mar 25th, 2015
Border Radius and Cell Padding for TableNode
Aug 17th, 2015 at 6:49am
Print Post  
Hi,

Is there a way to add cell padding and border radius to a TableNode?
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Border Radius and Cell Padding for TableNode
Reply #1 - Aug 17th, 2015 at 8:44am
Print Post  
Hi,

Try this:

Code
Select All
var SimpleShape = MindFusion.Diagramming.SimpleShape;
var Thickness = MindFusion.Drawing.Thickness;

table.setShape(SimpleShape.RoundedRectangle);
table.getCell(0, 0).setText("test test");
table.getCell(0, 0).text.margin = new Thickness(5, 1, 2, 1); 



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


I Love MindFusion!

Posts: 28
Joined: Mar 25th, 2015
Re: Border Radius and Cell Padding for TableNode
Reply #2 - Aug 17th, 2015 at 8:55am
Print Post  
Hi Stoyo,

SimpleShape is being displayed as invalid attribute for Mindfusion.Diagramming.
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Border Radius and Cell Padding for TableNode
Reply #3 - Aug 17th, 2015 at 9:13am
Print Post  
SimpleShape has been added in last release (v2.4):
http://mindfusion.eu/Forum/YaBB.pl?num=1433927601
  
Back to top
 
IP Logged
 
Santosh
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 28
Joined: Mar 25th, 2015
Re: Border Radius and Cell Padding for TableNode
Reply #4 - Oct 1st, 2015 at 7:33am
Print Post  
Hi Stoyo,

The image in the cell(0,0) needs to have a padding at the top. I tried to increase the row width. Did not work out.

Following creates my node. What do I need to change, to add top-padding to the image in cell(0,0)

Code (Javascript)
Select All
function buildHeaderTableNode(tableWidth, text, imgLocation, tooltip){
    var tableNode = diagram.getFactory().createTableNode(10, 30, 40, 18);
    //tableNode.setCellFrameStyle('transparent');
    tableNode.setFont(fontStyle);
    tableNode.setTextColor('black');
    tableNode.setBrush('white');
    tableNode.setStroke('#999999');
    tableNode.setTag('transparent');
    tableNode.redimTable(5, 5);
    tableNode.columnStyle = ColumnStyle.AutoWidth;
    tableNode.setCaptionHeight(0);
    tableNode.setShape(SimpleShape.RoundedRectangle);
    tableNode.setStrokeThickness(1);
    tableNode.setTooltip(tooltip);

    var cell00 = tableNode.getCell(0, 0);
    cell00.rowSpan = 2;
    cell00.colSpan = 1;
    cell00.setImageLocation(imgLocation);

    var cell10 = tableNode.getCell(1, 0);
    cell10.setText(text);
    cell10.setColumnSpan(3);
 



Node Looks Like:
  

padding.png ( 2 KB | 82 Downloads )
padding.png
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Border Radius and Cell Padding for TableNode
Reply #5 - Oct 1st, 2015 at 10:45am
Print Post  
Hi,

You can override the TableNode's updateCanvasElements method and adjust the image dimensions like this:

Code (Javascript)
Select All
var TableNode = MindFusion.Diagramming.TableNode;
var updateCanvasElementsOriginal = TableNode.prototype.updateCanvasElements;

TableNode.prototype.updateCanvasElements = function () {
    updateCanvasElementsOriginal.apply(this);

    var image = this.getCell(0, 0).image;
    var padding = 1; // Adjust this value to the desired padding size
    image.bounds.y += padding;
    image.bounds.height -= padding;
}; 



Regards,
Lyubo
  
Back to top
 
IP Logged
 
Santosh
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 28
Joined: Mar 25th, 2015
Re: Border Radius and Cell Padding for TableNode
Reply #6 - Oct 1st, 2015 at 11:23am
Print Post  
Thanks Lyubo..that works!  Smiley
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint