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

Hi,

     May I know when this will be supported?

     Also, Is there any workaround?

Regards,
Kannan

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

Hi,

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

Regards,
Kannan

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 2^nd, 2019 at 6:43am:

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

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

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