Scroll bar is showing different behaviour for dragging scrollbar and mouse scroll

[Neha_Guptha]

I am using a table with scroll button. I have an option to dynamically change number of fields. I am handling scroll using rounded rectangle shape and overriding actionDown and actionMove. When I drag the scroll bar down by clicking and dragging down it is working fine but when I use the down scroll when I dynamically change number of fields each field size is getting increased as I move down.

1.I gave static value to table size and each field and header height.
2.The mouse scroll down is working fine when there is no change in number of fields since load.
3. The issue happens only when I scroll after having dynamic change in number of fields.

When I scroll down using mouse scroll after dynamically changing number of fields.

When I scroll down by dragging the scroll bar by click and drag.

How I defined scroll bar

$(
                    go.Panel,
                    "Auto", {
                        name: "SCROLLBAR",
                        column: 0,
                        stretch: go.GraphObject.Vertical,
                        alignment: go.Spot.Right,
                        visible: true,
                    },
                    $(go.Shape, {
                        fill: NEUTRAL_COLOR_1,
                        stroke: NEUTRAL_COLOR_2,
                        strokeWidth: DEFAULT_STROKE_WIDTH,
                        width: 15,
                    }),
                    $(
                        go.Shape,
                        "RoundedRectangle", {
                            name: "SCROLLBARBUTTON",
                            stretch: go.GraphObject.Horizontal,
                            width: 8,
                            margin: new go.Margin(2, 0, 2, 0),
                            fill: SCROLLBAR_COLOR,
                            stroke: "transparent",
                            alignment: go.Spot.Top,
                            alignmentFocus: go.Spot.Top,
                            // mouseEnter: function(e, scrollBarButton) {
                            //     scrollBarButton.stroke = SCROLLBAR_COLOR;
                            // },
                            // mouseLeave: function(e, scrollBarButton) {
                            //     scrollBarButton.stroke = "transparent";
                            // },
                            cursor: "pointer",
                            isActionable: true,
                            actionDown: recordInitialScrollPoint,
                            actionMove: handleScroll,
                        },
                        new go.Binding("height", "tableEntries", function(v) {
                            return (
                                (MAX_TABLE_ENTRIES_SHOWN / countVisibleRows(v, true)) *
                                (MAX_TABLE_ENTRIES_SHOWN * ENTRY_HEIGHT)
                            );
                        })
                    )))));

 function recordInitialScrollPoint(e, obj) {
        initialScrollButtonPoint = obj.actualBounds.y;
        initialScrollPoint = obj.panel.getLocalPoint(e.documentPoint);
    }
 
    function handleScroll(e, obj) {
		debugger;
        var scrollbar = obj.panel; // the panel containing the scroll bar button aka the scrollbar
        var local = scrollbar.getLocalPoint(e.documentPoint); // the mouse location within the scrollbar
        var delta = local.y - initialScrollPoint.y;
        var table = scrollbar.panel.findObject("TABLE"); // table containig the entries to scroll through
        var scrollbarButton = scrollbar.findObject("SCROLLBARBUTTON");
        if (table && scrollbarButton) {
            var tableHeight = table.actualBounds.height;
            var scrollbarButtonHeight = scrollbarButton.actualBounds.height;
            // move scroll bar button
            var scrollLocation = Math.min(
                1,
                Math.max(
                    0,
                    (initialScrollButtonPoint + delta) /
                    (tableHeight - scrollbarButtonHeight)
                )
            );
            scrollbarButton.alignment = new go.Spot(0.5, scrollLocation, 0, 0);
            // get index to scroll to in table
            var idx = Math.round(
                Math.max(0, scrollLocation) * (table.itemArray.length - MAX_TABLE_ENTRIES_SHOWN)
            );
            if (table.topIndex !== idx) {
                table.topIndex = Math.max(idx, 0);
            }
        }
    }

Please let me know if I can make any change.

[walter]

Just a guess, but perhaps when there are fewer fields/rows in the “Table” Panel than needed to fill up the available height, the additional space is proportionally spread out amongst the rows.

Try setting Panel.rowSizing to Sizing.None on the inner “Table” Panel, the one holding all of your field rows. Panel | GoJS API

[Neha_Guptha]

“Table”, {
row: 2,
rowSizing:go.RowColumnDefinition.None,
},

I used it this way and it isn’t working

[walter]

OK. Why have you reimplemented the “ScrollingTable” functionality? If you merely wanted the scrollbar thumb shape to have rounded corners, that styling doesn’t require all that code, but just setting “TABLE.figure”: “Capsule”.

[Neha_Guptha]

My query isn’t about strying when I drag my scroll bar it is working correct but when I scroll in the table it isn’t.

[walter]

Which doesn’t make sense to me, since in all cases it’s ultimately just setting Panel.topIndex, and your code does that. Your code doesn’t modify the height or size of any element/item, does it?

I also see that your code has some “initial…” state, which our ScrollingTable code does not. Is there any chance that that might be causing the difference in behavior?

[Neha_Guptha]

Yes, I am editing height based on the number of entries, I have an option to dynamically change number of entries.

go.Panel,
                "Table", {
                    row: 2,
                }, {
                    name: "SCROLLING_TABLE",
                    stretch: go.GraphObject.Fill,
                    defaultColumnSeparatorStroke: DEFAULT_OUTLINE_COLOR,
                },
                new go.Binding("width", "", resizeNode).ofObject(""),
                new go.Binding("height", "tableEntries", function(v) {
                    var entriesAndHeaders = countVisibleRows(v, true);
                    var justEntries = countVisibleRows(v, false);
                    if (entriesAndHeaders <= MAX_TABLE_ENTRIES_SHOWN) {
                        var numHeaders = entriesAndHeaders - justEntries;
                        return (justEntries * ENTRY_HEIGHT) + (numHeaders * SECTION_HEADER_HEIGHT);
                    } else {
                        return MAX_TABLE_ENTRIES_SHOWN * ENTRY_HEIGHT;
                    }
                }),

[walter]

Are you sure those bindings are working correctly in all situations? In my experience they cannot because visibility depends on the property being bound.

[Neha_Guptha]

They are working fine I am able to change height dynamically only problem that is coming is with scroll user mouse instead of click and drag of scroll bar.

[walter]

As you step through both code paths, have you noticed any differences in the dependencies or side-effects?

I still do not understand why you have rewritten some of the code. What are you trying to accomplish that our code does not do?

[Neha_Guptha]

We just used scrolling table and edited height by overriding it. by number of entries that are visible.

[walter]

OK. What about the differences in the two code paths?

[Neha_Guptha]

I didn’t get your question

[walter]

What I asked earlier:

@walter

As you step through both code paths, have you noticed any differences in the dependencies or side-effects?

[Neha_Guptha]

When you mentioned 2 code paths, I didn’t get the which 2 code paths we are discussing about.

[walter]

The two ways of scrolling the table that you say has different behaviors: with the mouse wheel and with dragging the thumb of the table’s scrollbar.

[Neha_Guptha]

I didn’t write anything separate for the mouse wheel. Is there an option to handle mousewheel separately?

[walter]

Yes, look at the ToolManager.doMouseWheel override in the Scrolling Table sample: Scrolling Table Panels with ScrollBars | GoJS Diagramming Library