Splitter resize event hooks

Hello!

I’m currently building a haxeui-openfl application using a vertical Splitter component as the “root” for most of the application. The center panel of splitter contains a custom OpenFL sprite that is going to act as a drawing surface for the application.

I want to create a scrollRect for the Sprite that matches the real pixel height/width of it’s parent box to clip anything outside of the bounds. I’ve tried hooking into the splitter itself using a UIEvent.RESIZE event, however the listener is never being triggered when I move the splitters around. I’ve also tried applying the listener directly to the box that my canvas is a child of, and the listener does not trigger their either. I can’t find any other events that seem appropriate and Google/chatgpt are not coming up with anything, either.

Obviously haxeui has some way of knowing when a splitter is adjusted (or when the window itself is resized) to adjust the contents of child components, but is that exposed to us in userland? Would it be easier to accomplish this with a custom component?

Thanks in advance!

Versions:
haxeui-core: [1.6.0]
haxeui-openfl: [1.6.0]
lime: [8.0.1]
openfl: [9.2.1]

Some more info:

Code:

    var mainView:Component = ComponentBuilder.fromFile("editorAssets/views/main-view.xml");
    mainView.findComponent("main-canvas").addChild(mGameLayers);

    Screen.instance.addComponent(mainView);

    mainView.findComponent("main-canvas").addEventListener(UIEvent.RESIZE, function(event:UIEvent) {
      trace("Component has been resized!");
    });

XML:

<vbox width="100%" height="100%">
    <vbox width="100%" height="20px" style="background-color: #666666; clip: true;" verticalAlign="center" horizontalAlign="left" id="main-menu-bar">

    </vbox>

    <splitter direction="horizontal" width="100%" height="100%" verticalAlign="center" horizontalAlign="center">
        <!-- Left Panel -->
        <box width="20%" height="100%" style="background-color: #666666; ;clip:true;" id="main-left-panel">
            <label text="Left" verticalAlign="center" horizontalAlign="center" style="color: #ffffff;"/>
        </box>

        <splitter direction="horizontal" width="80%" height="100%">
            <splitter direction="vertical" width="70%" height="100%">
                <!-- Canvas -->
                <box width="100%" height="70%" style="background-color: #666666;" id="main-canvas"></box>

                <!-- Debug -->
                <box width="100%" height="30%" style="background-color: #666666;" id="main-bottom"></box>
            </splitter>

            <!-- Right Panel -->
            <box width="30%" height="100%" style="background-color: #666666;" id="main-right-panel"></box>
        </splitter>
    </splitter>     
</vbox>

Screenshot 2023-12-19 121516

Doh! I was using the OpenFL addEventListener instead of registerEvent. And registerEvent is working just fine. Sorry for the clutter, thanks for rubber ducking, forum!

1 Like

Late to the (solo) party :slight_smile:

Glad you figured it out :slight_smile:

Happy xmas / nye

Cheers,
Ian