Incorrect Timing of Visibility Event in Node._setVisible Method

[NickNaumenko]

Describe the bug

When using the flexlayout-react library, I encountered an issue with the timing of the visibility event firing within the _setVisible method of the Node class. Currently, the visibility event is triggered before updating the _visible property, leading to inconsistencies when reacting to visibility changes.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Create a layout with tabs using the flexlayout-react library.
2. Subscribe to the model changes using onModelChange prop.
3. Perform an action that triggers a visibility change for the tab node.

Expected behavior

When accessing the visibility state of a node using model.getNodeById(<nodeId>).isVisible() within the Layout.onModelChange callback after applying an action, it should return the current visibility state of the node.

Actual Behavior:

However, model.getNodeById().isVisible() returns the previous visibility state instead of the current one when invoked within the Layout.onModelChange callback.

Proposed Solution:

Adjust the _setVisible method in the Node class to update the _visible property before firing the visibility event. Here's the proposed modification:

FlexLayout/src/model/Node.ts

Lines 136 to 141 in 88cbbf5

	_setVisible(visible: boolean) {
	if (visible !== this._visible) {
	this._fireEvent("visibility", { visible });
	this._visible = visible;
	}
	}

_setVisible(visible: boolean) {
    if (visible !== this._visible) {
        this._visible = visible; // Update the _visible property first
        this._fireEvent("visibility", { visible }); // Then fire the event
    }
}

Operating System

macOS

Browser Type?

Google Chrome

Browser Version

Version 124.0.6367.93 (Official Build) (arm64)

Additional context

Library Version: "flexlayout-react": "^0.7.15"