- I am not able to drag Scroll Bar thumb using.
- Using up and Down button Scroll Bar thumb is moving.
Scroll Bar Panel Code:
$(go.Panel, “Vertical”,
{width: 10,row: 1,column:1,
alignment: go.Spot.Right, alignmentFocus: go.Spot.Left,
margin: new go.Margin(1, 1, 1, 1)
},
new go.Binding(“visible”, “ruledetails”, setScrollBarVisible),
$(“Button”,
{ name: “UP”, click: (e, obj) => { scroll(obj.part, -10); }, width: 20, height: 20 },
$(go.Shape, “TriangleUp”, { width: 6, height: 10 })
),
$(go.Panel, “Auto”,
{ width: 10,
height: 213 //213
},
$(go.Shape, { fill: “lightgray” }), // Background for scrollbar
$(go.Shape, “Rectangle”,
{ name: “SCROLLBAR_THUMB”, fill: “gray”, width: 9, alignment: go.Spot.Top, alignmentFocus: go.Spot.Top,
mouseDragEnter: (e:any, obj:any) => makeThumbDraggable(obj)
},
new go.Binding(“height”,“”,setThumbHeight)
)
),
$(“Button”,
{ name: “DOWN”, click: (e, obj) => { scroll(obj.part, 10); }, width: 20, height: 20 },
$(go.Shape, “TriangleDown”, { width: 6, height: 10 })
)
)
Methods use to Scroll:
function scroll(node:any, direction:any) {
const table = node.findObject(“SCROLLINGTABLE”);
if (table !== null) {
const rowHeight = 24; // Assuming each row has a fixed height of 50
const visibleRowCount = Math.floor(table.actualBounds.height / rowHeight);
const newIndex = table.topIndex + direction;
table.topIndex = Math.max(0, Math.min(newIndex, table.rowCount -visibleRowCount));
if (isNaN(table.topIndex)) {
table.topIndex = 0; // Fallback to a valid index if NaN
}
updateScrollBar(node,visibleRowCount);
}
}
function updateScrollBar(node:any,visibleRowCount:any) {
const table = node.findObject("SCROLLINGTABLE");
const thumb = node.findObject("SCROLLBAR_THUMB");
if (table !== null && thumb !== null) {
const ratio = table.topIndex / (table.rowCount - visibleRowCount);
thumb.alignment = new go.Spot(0.5, ratio);
}
}
function makeThumbDraggable(thumb:any) {
thumb.draggable = true;
thumb.dragComputation = function(part: any, pt: any, gridpt: any) {
const table = part.part.findObject("SCROLLINGTABLE");
if (table !== null) {
const rowHeight = 24; // Assuming each row has a fixed height of 24
const visibleRowCount = Math.floor(table.actualBounds.height / rowHeight);
const maxTopIndex = table.rowCount - visibleRowCount;
const newTopIndex = Math.max(0, Math.min(maxTopIndex, Math.floor(pt.y / rowHeight)));
table.topIndex = newTopIndex;
updateScrollBar(part.part, visibleRowCount);
}
return pt;
};
}
Node View:
Note: Node is draggable.