Horizontal scroll in flowchart example

[shameer.sheik]

Continuing the discussion from Diagram not scrolling horizontally to fully cover the diagram:

@naveen

Thanks Walter! I updated the bounds with the actualBounds and it seems to work fine now.

Continuing the discussion from Diagram not scrolling horizontally to fully cover the diagram:

@walter

That is probably because the diagram’s (virtual) document bounds is too narrow.

Because the layout needs to work with virtual nodes rather than real Nodes, you’ll note that there is a computeDocumentBounds method that is called at the end of the layout in order to set the Diagram.fixedBounds. Note how that method depends on the Rect that is saved on the data, not on the node’s GraphObject.actualBounds.

But if the size (height or width) is not an accurate estimate of the actual bounds, the diagram’s document bounds will be wrong.

So: did you update the statement:

    //!!!???@@@ this needs to be customized to account for your chosen Node template
    d.bounds = new go.Rect(0, 0, 70, 20);

to match the GraphObject.actualBounds that your Nodes really have?

where can I do the same in flowchart example ? Flowchart

[walter]

My earlier comments only apply when implementing virtualization. All of the samples (that do not have “virtual…” in their name) work with real Nodes, so there is no problem with either layout or document bounds.

[shameer.sheik]

not able to scroll horizontally in this example Flowchart

json for loading

{ “class”: “go.GraphLinksModel”,
“linkFromPortIdProperty”: “fromPort”,
“linkToPortIdProperty”: “toPort”,
“nodeDataArray”: [
{“category”:“Comment”, “loc”:“360 -10”, “text”:“Kookie Brittle”, “key”:-13},
{“key”:-1, “category”:“Start”, “loc”:“175 0”, “text”:“Start”},
{“key”:0, “loc”:“0 77”, “text”:“Preheat oven to 375 F”},
{“key”:1, “loc”:“175 100”, “text”:“In a bowl, blend: 1 cup margarine, 1.5 teaspoon vanilla, 1 teaspoon salt”},
{“key”:2, “loc”:“175 190”, “text”:“Gradually beat in 1 cup sugar and 2 cups sifted flour”},
{“key”:3, “loc”:“175 270”, “text”:“Mix in 6 oz (1 cup) Nestle’s Semi-Sweet Chocolate Morsels”},
{“key”:4, “loc”:“175 370”, “text”:“Press evenly into ungreased 15x10x1 pan”},
{“key”:5, “loc”:“824 99.60000018775463”, “text”:“Finely chop 1/2 cup of your choice of nuts”},
{“key”:6, “loc”:“175 440”, “text”:“Sprinkle nuts on top”},
{“key”:7, “loc”:“175 500”, “text”:“Bake for 25 minutes and let cool”},
{“key”:8, “loc”:“175 570”, “text”:“Cut into rectangular grid”},
{“key”:-2, “category”:“End”, “loc”:“175 640”, “text”:“Enjoy!”}
],
“linkDataArray”: [
{“from”:1, “to”:2, “fromPort”:“B”, “toPort”:“T”, “points”:[175,140.2508972167969,175,150.2508972167969,175,150.2508972167969,175,147.68682708740235,175,147.68682708740235,175,157.68682708740235]},
{“from”:2, “to”:3, “fromPort”:“B”, “toPort”:“T”, “points”:[175,222.31317291259768,175,232.31317291259768,175,232.31317291259768,175,227.68682708740235,175,227.68682708740235,175,237.68682708740235]},
{“from”:3, “to”:4, “fromPort”:“B”, “toPort”:“T”, “points”:[175,302.3131729125977,175,312.3131729125977,175,320,175,320,175,327.6868270874023,175,337.6868270874023]},
{“from”:4, “to”:6, “fromPort”:“B”, “toPort”:“T”, “points”:[175,402.3131729125976,175,412.3131729125976,175,412.9377243041992,175,412.9377243041992,175,413.5622756958008,175,423.5622756958008]},
{“from”:6, “to”:7, “fromPort”:“B”, “toPort”:“T”, “points”:[175,456.4377243041992,175,466.4377243041992,175,466.4377243041992,175,465.6245513916016,175,465.6245513916016,175,475.6245513916016]},
{“from”:7, “to”:8, “fromPort”:“B”, “toPort”:“T”, “points”:[175,524.3754486083984,175,534.3754486083984,175,535,175,535,175,535.6245513916016,175,545.6245513916016]},
{“from”:8, “to”:-2, “fromPort”:“B”, “toPort”:“T”, “points”:[175,594.3754486083984,175,604.3754486083984,175,604.3754486083984,175,596.944796894872,175,596.944796894872,175,606.944796894872]},
{“from”:-1, “to”:0, “fromPort”:“B”, “toPort”:“T”, “points”:[175,24.773340092148892,175,34.77334009214889,175,42.66780789397484,0,42.66780789397484,0,50.56227569580078,0,60.56227569580078]},
{“from”:-1, “to”:1, “fromPort”:“B”, “toPort”:“T”, “points”:[175,24.773340092148892,175,34.77334009214889,175,42.261221437676014,175,42.261221437676014,175,49.74910278320313,175,59.74910278320313]},
{“from”:-1, “to”:5, “fromPort”:“B”, “toPort”:“T”, “points”:[175,24.773340092148892,175,34.77334009214889,175,49.99894583575254,824,49.99894583575254,824,65.22455157935619,824,75.22455157935619]},
{“from”:5, “to”:4, “fromPort”:“B”, “toPort”:“T”, “points”:[824,123.97544879615306,824,133.97544879615305,824,132,824,132,824,316,175,316,175,327.6868270874023,175,337.6868270874023]},
{“from”:0, “to”:4, “fromPort”:“B”, “toPort”:“T”, “points”:[0,93.43772430419921,0,103.43772430419921,0,100,0,100,0,316,175,316,175,327.6868270874023,175,337.6868270874023]}
]}

[shameer.sheik]

Hi,

just wanted to clarify , Am I misunderstanding something or the issue exist ?

Thank you

[walter]

I’m not able to reproduce this problem. Does it happen in other browsers?

[shameer.sheik]

I have checked in chrome and firefox and the issue exist .

here is a sample video

wasnt able to upload videos here

I tried using the direction buttons and it works , but if i am trying to mouse scroll it doesnt work , should I set something for the scroll to occur ?

[simon]

This is a problem with the trackpad and not a mouse, correct?

This may be a bug, we’ll investigate.

[shameer.sheik]

yeah I am using a trackpad on mac , thank you

[simon]

Thanks for pointing this out. The trackpad scrolling will be improved in the next release, though it may take us longer to get it perfect on all platforms/browsers.

[shameer.sheik]

sure looking forward to your release , please do update me with further information regarding this.

[simon]

We’ve just released GoJS 1.6.3, see if it works as you’d expect now.

GoJS - Build Interactive Diagrams for the Web

[shameer.sheik]

yeah it works now :smile: thanks