Hi there,
i’m trying to use the “mouseWheelScroller” feature of the gridtable plugin like describte here:
https://rexrainbow.github.io/phaser3-rex-notes/docs/site/ui-gridtable/#add-table-object
i dont get it to work like in the examples…
This is my custom class extension for the GridTable. I try to set the mousewheelscroller feature, but in game, i cant use it.
The slieder works fine, but not the interaction with the wheel.
What am i missing?
is maybe some other event “capturing” the mouse-wheel scroll?
class Table extends GridTable{
/**
* Creating a scrollable table from items
* Custom item container can be set via setItemContainer ( passing callback function )
* @param {*} scene scene to add table
* @param {*} x center x
* @param {*} y center y
* @param {*} width
* @param {*} height
* @param {*} columns (optional) at least 1 column is added
* @param {*} tableConfig (optional) pass valid GridTable config to overwrite other default settings
*/
constructor( scene, x, y, width, height, columns, tableConfig ){
var defConfig = {
x: x,
y: y,
width: width,
height: height,
scrollMode: 0,
table: {
columns: columns||1,
mask: {
padding: 2,
},
reuseCellContainer: false,
},
slider: {
track: scene.rexUI.add.roundRectangle( 0, 0, 20, 10, 10, globals.COLOR.DARK),
thumb: scene.rexUI.add.roundRectangle( 0, 0, 0, 0, 13, globals.COLOR.LIGHT),
input: 'click',
},
mouseWheelScroller: {
focus: true,
speed: 1,
},
createCellContainerCallback: (cell, cellContainer) => {
var scene = cell.scene,
width = cell.width,
height = cell.height,
item = cell.item,
index = cell.index;
return scene.add.text( 0, 0, item);
},
items: []
};
super( scene, { ...defConfig, ...tableConfig||{} } ).layout();
scene.add.existing( this );
return this;
}
/**
*
* @param {function} callback passing ( cell, cellContainer ) to this callback
* @returns
*/
setItemContainer( callback ){
this.createCellContainerCallback = callback;
return this;
}
setItems( items ){
super.setItems( items );
let showScrollbar = this.items.length > this.getElement("table").visibleCells.entries.length;
if( this.items.length == 0 ) showScrollbar = false;
// check item overlapping
if( !showScrollbar && this.items.length > 1){
let lastItemBounds = this.getCellContainer( this.items.length -1 ).getBounds();
let tableBounds = this.getBottomLeft();
showScrollbar = lastItemBounds.y + lastItemBounds.height > tableBounds.y;
}
this.getElement("slider").setVisible( showScrollbar );
return this;
}
}
Thank you!
