Page Index Toggle Pages: [1] 2  Send TopicPrint
Hot Topic (More than 10 Replies) How to show scroll bar in container node ! (Read 5910 times)
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
How to show scroll bar in container node !
Apr 23rd, 2019 at 9:53am
Print Post  
Hi,

   For fishbone diagram, we used mind fusion container node to hold parameters as shape nodes. It is working fine for the few parameters. We need to show scrollbar when there are more parameters. I've attached the sample project and screenshot of the sample. Please let me know how to solve this issue.

Thanks & Regards,
Kannan
  

Container_Node_-Scrollbar_Issue.zip ( 250 KB | 146 Downloads )
Container_Node.png ( 3 KB | 153 Downloads )
Container_Node.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How to show scroll bar in container node !
Reply #1 - Apr 23rd, 2019 at 10:37am
Print Post  
Hi,

Containers do not support scrolling at this time. Try showing the parameters in TableNodes instead, as shown in Inheritance.html example.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: How to show scroll bar in container node !
Reply #2 - Apr 23rd, 2019 at 12:30pm
Print Post  
Hi,

     May I know when this will be supported?

     Also, Is there any workaround?

Regards,
Kannan
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How to show scroll bar in container node !
Reply #3 - Apr 24th, 2019 at 7:56am
Print Post  
Hi,

It won't be supported in short term. Workaround is to use a TableNode if you only need to show text labels (you can show images too in cells). Alternatively if you don't need to move the list of parameters around, you could show it in a second diagram instance where the diagram itself will scroll.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: How to show scroll bar in container node !
Reply #4 - May 2nd, 2019 at 6:43am
Print Post  
Hi Slavcho,

As per the reply which we got from forum, we are constructing the node with table node. There are few issues with respect to table node, mentioned below.

1.      Unnecessary space available in table node other than added cells. Following table node is added with 5(0 to 4) parameters and constructed as below

Sample Image Attached : Sample Image-1.png

But when scroll down to view the last one parameter unnecessary empty space exist as below.

Sample Image Attached : Sample Image-2.png

2.      For moving the scrollbar need to click on arrows only, cant able to move scrollbar by dragging.

3.      Scrollbar size(to reduce width) is not modifiable.

Please help me to solve these above mentioned issues.

Note: I've attached the sample project with this mail, please find it.

Regards,
Kannan
  

TableNode_With_Scrollbar_sample.zip ( 284 KB | 253 Downloads )
Sample_Image-1.png ( 2 KB | 146 Downloads )
Sample_Image-1.png
Sample_Image-2.png ( 1 KB | 155 Downloads )
Sample_Image-2.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How to show scroll bar in container node !
Reply #5 - May 2nd, 2019 at 1:54pm
Print Post  
Dragging the scrollbar works for me, both with your test project and the Inheritance.html example. With what browser and operating system doesn't it work on your side?
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: How to show scroll bar in container node !
Reply #6 - May 2nd, 2019 at 2:52pm
Print Post  
Hi,

Did you tried with the attached MindFusion.Diagramming.js file?

Regards,
Kannan
  

MindFusion_Diagramming_001.zip ( 122 KB | 178 Downloads )
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How to show scroll bar in container node !
Reply #7 - May 3rd, 2019 at 7:49am
Print Post  
Yes, dragging works for me with your old version too. Only problem I can see is you have to drag a larger distance until it gets to move when the scroll range is small. Drag-scrolling should start faster when you have more table rows.

We'll have in mind properties for 1 an 3 for next release. At this time you could change this function to get a different width -

Code
Select All
MindFusion.Diagramming.ScrollBar.prototype.getRect = function ()
{
	var node = this.node;
	var mm = GraphicsUnit.getMillimeter(node.parent.measureUnit);
	var rect = node.bounds;
	var capHeight = node.getCaptionHeight();
	return new Rect(
		rect.right() - 5 * mm,
		rect.y + capHeight,
		5 * mm,
		rect.height - capHeight);
} 



Regards,
Slavcho
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: How to show scroll bar in container node !
Reply #8 - May 6th, 2019 at 7:26am
Print Post  
Hi,

May I know why this happens?

1. Unnecessary space available in table node other than added cells. Following table node is added with 5 (0 to 4) parameters and constructed as below

Sample Image Attached : Sample Image-1.png

But when scroll down to view the last one parameter unnecessary empty space exist as below.

Sample Image Attached : Sample Image-2.png

Regards,
Kannan

Kannan Thirumal wrote on May 2nd, 2019 at 6:43am:
Hi Slavcho,

As per the reply which we got from forum, we are constructing the node with table node. There are few issues with respect to table node, mentioned below.

1.      Unnecessary space available in table node other than added cells. Following table node is added with 5(0 to 4) parameters and constructed as below

Sample Image Attached : Sample Image-1.png

But when scroll down to view the last one parameter unnecessary empty space exist as below.

Sample Image Attached : Sample Image-2.png

2.      For moving the scrollbar need to click on arrows only, cant able to move scrollbar by dragging.

3.      Scrollbar size(to reduce width) is not modifiable.

Please help me to solve these above mentioned issues.

Note: I've attached the sample project with this mail, please find it.

Regards,
Kannan

  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How to show scroll bar in container node !
Reply #9 - May 6th, 2019 at 9:52am
Print Post  
It happens because the control treats table's scroll position as first visible row, and TableNode sets the number of rows as its scroll range. So when the first visible row is last table's row, the space below it remains unoccupied. We'd have to reduce the scroll range by some amount depending on height of table and rows to remove the empty space; we'll have that in mind for upcoming release.
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: How to show scroll bar in container node !
Reply #10 - Aug 7th, 2019 at 9:27am
Print Post  
Hi,

In some cases the scroll box in the vertical scroll bar of the table node is not shown. But when clicking the scroll arrow, the contents moves up and down. May I know why the scroll box is not shown?

Attached the screen shot and uploaded the sample code in the below url,

https://drive.google.com/open?id=1rprKbXRRmt79u8xMm2rhnA1JJQn32JQB

Regards,
Kannan
  

Scroll_Box_Not_Shown_In_Scroll_Bar.png ( 17 KB | 139 Downloads )
Scroll_Box_Not_Shown_In_Scroll_Bar.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How to show scroll bar in container node !
Reply #11 - Aug 8th, 2019 at 6:37am
Print Post  
It might not be detecting that the scroll range has grown, depending on how you set up the table. Try calling TableNode.setCurrentScrollRow(0) after creating the table - that should recalculate scroll range and refresh the scrollbar appearance.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: How to show scroll bar in container node !
Reply #12 - Aug 8th, 2019 at 7:18am
Print Post  
Hi,

I tried the same but still not shown. Could you please check the below code?

  drawTableNode() {

    var canvasParent = document.createElement("div");
    document.body.appendChild(canvasParent);
    let canvas = document.createElement("canvas");
    canvasParent.appendChild(canvas);
    this.diagram = Diagram.create(canvas);

    this.diagram.setMeasureUnit(GraphicsUnit.Pixel);
    this.diagram.setAutoScroll(true);
    this.diagram.setBehavior(MindFusion.Diagramming.Behavior.Modify);
    this.diagram.setAllowSelfLoops(false);

    var table1 = this.diagram.getFactory().createTableNode(400, 100, 150, 250);

    table1.redimTable(2, 9);
    (table1 as any).useScrollBars = true;
    table1.setScrollable(true);
    table1.setColumnWidth(0, 130);
    (MIND as any).ScrollBar.prototype.background = "#e0e9e9";
    (MIND as any).ScrollBar.prototype.foreground = "DarkGray";
    table1.setBrush("#FFFFFF");
    table1.setCaptionBackBrush("#c0c0c0");
    table1.setCaptionHeight(0);
    table1.setLocked(true);
    table1.setObstacle(true);
    table1.setAllowIncomingLinks(false);
    table1.setAllowOutgoingLinks(false);
    table1.setShadowColor("transparent");
    table1.setCellFrameStyle(MIND.CellFrameStyle.None);
    let nodes: Array<string> = ["Description", "Assay of Testosterone (%LC = 1% w/w)",
      "Assay of Alcohol (%LC = 67% w/w)", "Assay of Isopropyl myristate (%LC = 0.65% w/w)",
      "Related substances", "Content uniformity", "pH", "Viscosity", "Minimum fill volume"];
    for (let i = 0; i < nodes.length; i++) {
      let rowHeight = this.getRowHeight(nodes[i])
      table1.setRowHeight(i, rowHeight);
      var cell = table1.getCell(0, i);
      cell.setText(nodes[i]);
      cell.setTextColor("#000000");
      cell.setBrush("#ffffff");
      cell.setFont(new Font("verdana", 13, true));
    }

    table1.setCurrentScrollRow(0);
  }

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


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: How to show scroll bar in container node !
Reply #13 - Aug 8th, 2019 at 8:31am
Print Post  
Hi,

With the above code, the scroll thumb shows in my test (attached is a picture). I had to replace your getRowHeight method with a scalar value (60 in my case), since the code for that wasn't posted above.

Code (Javascript)
Select All
/*var rowHeight = this.getRowHeight(nodes[i])*/
table1.setRowHeight(i, 60/*rowHeight*/); 



Regards,
Lyubo
  

tableNode.png ( 8 KB | 145 Downloads )
tableNode.png
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: How to show scroll bar in container node !
Reply #14 - Aug 8th, 2019 at 8:50am
Print Post  
Hi,

Row height is calculated like this,

  getRowHeight(text: any) {
    let element = document.createElement("section");
    element.style.maxWidth = "125px";
    element.style.lineHeight = "20px";
    element.style.wordWrap = "break-word";
    element.style.fontSize = "13px";
    element.style.fontFamily = "Verdana";
    element.style.fontWeight = "bold";
    element.innerText = text;
    document.body.appendChild(element);
    let elementHeight = element.offsetHeight;
    var lineHeight = parseInt(element.style.lineHeight);
    var lines = elementHeight / lineHeight;
    document.body.removeChild(element);
    return (lines * 13) + 9;
  }

Regards,
Kannan
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: [1] 2 
Send TopicPrint