Fix resizable panel bug

[tintinthong]

Screen.Recording.2024-03-28.at.15.27.33.mov

[github-actions]

Test Results

558 tests  ±0   554 ✔️ ±0   8m 45s ⏱️ +43s
    1 suites ±0       4 💤 ±0 
    1 files   ±0       0 ❌ ±0 

Results for commit 1d37e07. ± Comparison against base commit 9533728.

♻️ This comment has been updated with latest results.

[tintinthong]

I sketched this out as the solution to work.

The issue here is when you add a panel, the last remaining panel which stayed but didn get unregistered will have panelGroupLengthPx = <the entire width of panel group size> -- the file tree. This lengthPx essentially becomes stale when you register a new panel -- hence, the screen becomes warped (bigger) in the left-panel

[FadhlanR]

Removing this property could potentially bring back this issue. My purpose made this property is to cache the ratio length of all panels in a panel container/group before the container/browser window is being resized. When resizing the browser window, the size of the panels will be updated but with random ratio, then we will call onContainerResize to recalculate the size of the panels using the cache in the panelRatio. So if you use getter for the panelRatios and calculate the panelRatios from current length of the panels, it might use the length of panels that is updated randomly because the resizing action.

[tintinthong]

Confirmed this is an issue that comes back

[tintinthong]

Ahhh I know what you are trying to do. this.panelRatios is not eagerly recalculated (its kind of a checkpoint)

• panelRatios should be only calculated when the number of panels have changed (registering & unregistering)
• if we resize the window, the panelRatios should be cached

My change has an issue because I am recalculating after ANY container resize while number of panels are unchanging

[tintinthong]

I need to spell it out with data.

2 panels

[
    {
        "id": 0,
        "defaultLengthFraction": 0.12341597796143251,
        "lengthPx": 245,
        "collapsible": true
    },
    {
        "id": 1,
        "defaultLengthFraction": 0.8,
        "lengthPx": 1588,
        "collapsible": true
    }
]
this.panelRatios = [0.13365155131264914, 0.8663484486873508]
this.panelGroupLengthPx=1851
this.panelGroupLengthWithoutResizeHandlePx=1815

1 panel (unregistered 1)

[
    {
        "id": 0,
        "defaultLengthFraction": 0.12341597796143251,
        "lengthPx": 1815, <- this is big
        "collapsible": true
    }
]
this.panelRatios=[1]
this.panelGroupLengthPx=1851
this.panelGroupLengthWithoutResizeHandlePx=1815

2 panels (registered 1)

[
    {
        "id": 0,
        "defaultLengthFraction": 0.12341597796143251,
        "lengthPx": 1815, <- this is big
        "collapsible": true
    },
    {
        "id": 1,
        "defaultLengthFraction": 0.4,
        "lengthPx": 740.4000000000001,
        "initialMinLengthPx": 300,
        "minLengthPx": 300,
        "collapsible": true
    }
]
this.panelRatios=[0.7102606245597558, 0.2897393754402442]
this.panelGroupLengthPx=1851
this.panelGroupLengthWithoutResizeHandlePx=1815

3 panels (registered 1)

[
    {
        "id": 0,
        "defaultLengthFraction": 0.12341597796143251,
        "lengthPx": 1815, <- this is big
        "collapsible": true
    },
    {
        "id": 1,
        "defaultLengthFraction": 0.4,
        "lengthPx": 740.4000000000001,
        "initialMinLengthPx": 300,
        "minLengthPx": 300,
        "collapsible": true
    },
    {
        "id": 2,
        "defaultLengthFraction": 0.4,
        "lengthPx": 740.4000000000001,
        "collapsible": true
    }
]
this.panelRatios=[0.5507008920444202, 0.22464955397778993, 0.22464955397778993]
this.panelGroupLengthPx=1851
this.panelGroupLengthWithoutResizeHandlePx=1815

Expectation

[
    {
        "id": 0,
        "defaultLengthFraction": 0.12341597796143251,
        "lengthPx": 228.44297520661158,
        "collapsible": true
    },
    {
        "id": 1,
        "defaultLengthFraction": 0.4,
        "lengthPx": 740.4000000000001,
        "initialMinLengthPx": 300,
        "minLengthPx": 300,
        "collapsible": true
    },
    {
        "id": 2,
        "defaultLengthFraction": 0.4,
        "lengthPx": 740.4000000000001,
        "collapsible": true
    }
]
this.panelRatios=[0.13365155131264914, 0.4331742243436754, 0.4331742243436754]
this.panelGroupLengthPx=1851
this.panelGroupLengthWithoutResizeHandlePx=1851

[tintinthong]

Closing in favor of #1148