Prevent widget resizing after reaching threshold width

[najaarv]

I have a use case where I need my widget to have a max-width and it cannot be resized larger than a specified threshold size using the split handler. Is it possible to do an event.preventDefault() sort of thing in the event that is responsible for resizing the widget. Which event in the core module do I need to look into to achieve this? Or is it a phosphorjs resize event? If so, how can I override its behavior?
There is this link I came across- phosphorjs/phosphor#224 but it doesn't appear like there is a solution for this. Is there any workaround to achieve this?

[akosyakov]

It looks that you will need to hook into the drag and drop handlers on theia dock panel layout. There is DockPanelRendererFactory which you can customize to produce own the custom panel.

[najaarv]

But the drag and drop handlers are triggered only when the widget is being dragged around the layout, not when resizing using the SplitPositionHandler. I have looked into the internals of the ApplicationShell as well as SidePanelHandler and couldn't figure out which event is being called while resizing.

[akosyakov]

Probably this code is called to handle the split panel handler position while moving the mouse: https://github.com/phosphorjs/phosphor/blob/9f5e11025b62d2c4a6fb59e2681ae1ed323dcde4/packages/widgets/src/splitpanel.ts#L285-L302

[najaarv]

You're right, this looks like it. I also inspected the element 'theia-left-right-split-panel' in dev tools and there's a mousedown eventListener attached to it, removing this particular eventListener stops the resizing event of the SidePanel SplitPositionHandlers which is exactly what I need. Do you think it's possible to override this method considering it's private and also handled in phosphorjs and not in any theia core modules? So, I'm guessing I cannot override it and rebind? Btw, there's this handleEvent method in theia SplitPanel that seems to call the mouseEvent handler event in phosphorjs splitPanel, but it is mentioned that we cannot use/misuse it and phosphorjs handles mouse events for us.

[akosyakov]

You can use index access to disregard private at all. Could you check where such SidePanel is instantiated, i.e. try to debug it and inspect call stack. I see also phospshor has some sizing max size, so maybe if you look closer at what referenced method does, you can find existing ways to configure max size.

[najaarv]

I wrote my custom logic for handleEvent method to achieve this.