Splitter / SplitterPanel resize event

[chris-deep]

I would like to use the splitter in my app. However, even though my content div within the splitterPanels are set to width 100% they won't resize when I resize the splitter view. I've been using another component "splitpanes" in my app and they expose a resize event which I can hook into and force my content div to resize.

    <Splitter style="
        border: 0; 
        height: calc(100% - 95px); 
        width: calc(100% - 60px); 
        left: 30px; top: 65px; position: fixed;"
        class="mb-5" @resize="onSplitterResize($event)">
        <SplitterPanel class="" > 
            <AppProjectTree ref="compProjectTree"></AppProjectTree>
        </SplitterPanel>
        <SplitterPanel class="" @resize="onSplitterResize($event)">  
            <AppProject3D ref="comp3D"></AppProject3D>  
        </SplitterPanel>
        <SplitterPanel class=""> 
            <AppProjectTree></AppProjectTree>
        </SplitterPanel>
    </Splitter>

However, I can't seem to figure out if this possible with the PrimeVue splitter. Here's my content component, I'm rendering 3D content into my "container" DIV.

<template>
    <Menubar class="surface-50" :model="menuItems" style="width: 100%; border: 0px;" /> 
    <!-- <video id="vidScreen" width="500" height="400"></video> -->
    <div class="surface-section " style="width: 100%; height: 100%;">
        <div id="container" style="width: 100%; height: 100%; overflow-y: hidden;"></div>
    </div>
</template>

And, using the other splitpanes component, I would hook into the resize event as follows:

<SplitterPanes :style="{ visibility: displayProject }"  vertical @resize="onSplitterResize($event)"
        style="border: 0; height: calc(100% - 95px); width: calc(100% - 60px); left: 30px; top: 65px; position: fixed;">
        <Pane size="20"  >

In my 3D component (uses ThreeJS which I wrapped as a Vue component), I force my 3D content to resize. Although, the container DIV for the 3D content would automatically resize since its width is set to 100%. So, even though I'm resizing my 3D scene in the code below, it doesn't have anything to do with my parent DIV's size. I'm just including it as a reference so you know exactly what's going on inside my DIV.

            onWindowResize: function() {

                console.log("3d area resize");
                const width = this.container.clientWidth;
                const height = this.container.clientHeight;

                this.camera.aspect = width / height;
                this.camera.updateProjectionMatrix();

                this.renderer.setSize( width, height );

                }

[Rakasch]

I had to get the SplitterPanel working for me in the first place. Check this issue.
primefaces/primevue#4513

[chris-deep]

I see. Yeah I punted and went back to the other splitter component. Thanks for the link!