Get information on change of pane size (shrink/expand) in custom layouts

[mattbui]

Is your feature request related to a problem? Please describe.
Not sure this is currently feasible, is there a way to get information on the size of the shrinking/expanding pane (either when using the shrink/expand command or resizing with a mouse)? I'm trying to implement a "Two Pane Right" custom layout but I'm not able to get the even of resizing the pane/window to adjust the panes accordingly.

Describe the solution you'd like
I'm not so sure about this, maybe we can add a change event window_resize which will include 3 properties windowID, windowWidth, and windowHeight so the pane sizes and positions can be updated accordingly.

Describe alternatives you've considered
Currently, I'm using custom commands for shrinking and expanding the main pane size but it's required to use other sets of key bindings and mouse resizing doesn't work. I'm not sure if there are other approaches so that mouse resizing will work.

function layout() {
    return {
        name: "Two Pane Right",
        initialState: {
            mainPaneCount: 1,
            mainPaneRatio: 0.5
        },
        commands: {
            command1: {
                description: "Shrink main pane",
                updateState: (state) => {
                    return { ...state, mainPaneRatio: Math.max(0.1, state.mainPaneRatio - 0.05) };
                }
            },
            command2: {
                description: "Expand main pane",
                updateState: (state) => {
                    return { ...state, mainPaneRatio: Math.min(0.9, state.mainPaneRatio + 0.05) };
                }
            }
        },
        getFrameAssignments: (windows, screenFrame, state) => {
            const mainPaneCount = Math.min(state.mainPaneCount, windows.length);
            const secondaryPaneCount = windows.length - mainPaneCount;
            const hasSecondaryPane = secondaryPaneCount > 0;

            const mainPaneWindowHeight = screenFrame.height / mainPaneCount;
            const secondaryPaneWindowHeight = screenFrame.height;

            const mainPaneWindowWidth = hasSecondaryPane? Math.round(screenFrame.width * state.mainPaneRatio) : screenFrame.width;
            const secondaryPaneWindowWidth = screenFrame.width - mainPaneWindowWidth

            return windows.reduce((frames, window, index) => {
                const isMain = index < mainPaneCount;
                let frame;
                if (isMain) {
                    frame = {
                        x: screenFrame.x + secondaryPaneWindowWidth,
                        y: screenFrame.y,
                        width: mainPaneWindowWidth,
                        height: mainPaneWindowHeight
                    };
                } else {
                    frame = {
                        x: screenFrame.x,
                        y: screenFrame.y,
                        width: secondaryPaneWindowWidth,
                        height: secondaryPaneWindowHeight
                    }
                }
                return { ...frames, [window.id]: frame };
            }, {});
        }
    };
}

Additional context
Maybe a native Two Pane Right support would be less of a hassle for you 😅. And thank you for the amazing application.

[rgeraskin]

btw PR for a native Two Pane Right support is here #1515