rexrainbow / phaser3-rex-notes

Notes of phaser3 engine
MIT License
1.21k stars 260 forks source link

PointToCellIndex table is null #277

Closed zpxp closed 2 years ago

zpxp commented 2 years ago

When using GridTable and clicking on a row, this.table in PointToCell is null. This means the rest of the event queue crashes due to null ref error.

My grid table looks like this

const sizer = this.rexUI.add
            .gridTable({
                anchor,
                scrollMode: "v",
                table: {
                    columns: 1,
                    mask: {
                        padding: 2
                    },
                    reuseCellContainer: false
                },
                background: cardspacebg,
                slider: {
                    track: this.rexUI.add.roundRectangle(0, 0, 20, 10, 10, COLOR_DARK),
                    thumb: this.rexUI.add.roundRectangle(0, 0, 0, 0, 13, COLOR_LIGHT),
                    buttons: {
                        top: this.rexUI.add.roundRectangle(0, 0, 20, 10, 10, COLOR_DARK),
                        bottom: this.rexUI.add.roundRectangle(0, 0, 20, 10, 10, COLOR_DARK)
                    }
                },
                scroller: false,
                mouseWheelScroller: {
                    focus: true,
                    speed: 3
                },
                space: {
                    left: 20,
                    right: 20,
                    top: 20,
                    bottom: 20,

                    table: 10,
                    header: 10,
                    footer: 10
                },

                createCellContainerCallback: createCellContainerCallback as any,
                items
            })
            .layout();

And the container callback looks like this

createCellContainerCallback: (cell, cellContainer) => {
                                const deck = cell.item as DeckDefinitionLink;
                                const width = cell.width,
                                    height = cell.height,
                                    index = cell.index;

                                const bg = this.rexUI.add.roundRectangle(0, 0, 20, 20, 0, COLOR_DARK).setStrokeStyle(2, COLOR_PRIMARY);
                                const container = this.rexUI.add
                                    .sizer({ orientation: "h" })
                                    .addBackground(bg)                                  
                                    .add(this.add.text(0, 0, deck.deckName), {
                                        proportion: 0,
                                        align: "center",
                                        padding: { left: 20 },
                                        expand: false
                                    })
                                    .addSpace(3)                            
                                    .setDepth(11)
                                    .setInteractive({ cursor: "pointer" })
                                    .on("pointerover", () => {
                                        bg.setFillStyle(COLOR_LIGHT, 1);
                                    })
                                    .on("pointerout", () => {
                                        bg.setFillStyle(COLOR_DARK, 1);
                                    })
                                    .onClick(() => {
                                        this.joinMatch(deck);
                                        this.joinButton.text = "Cancel";
                                        close();
                                    });

                                container.setMinSize(width, height);

                                return container;
                            },

The table exists within a Dialog and clicking on the row closes it. Maybe check if this.table is null and do nothing if it is.

rexrainbow commented 2 years ago

I can destroy gridTable under cellContainer.onClick() callback well.

cellContainer.onClick(function(){
    gridTable.destroy()
})

Please provide a simplest runnable test code to represent this issue.

rexrainbow commented 2 years ago

BTW, there are some input events, and these input events work well with scroller: true. See this demo, line 119-171.