Middle pane snaps to zero after third pane appears and first pane resizes

[Lowclouds]

ok, slightly complex, but the app starts out with two panes shown, the left and middle panes. the user can opt to show the third pane on the right, which pops up at 10%. So far so good. However, if you touch the slider between the left and middle panes, the middle pane snaps to zero size. The only way to re-adjust it is to drag the right pane just a bit. Then, it's possible to adjust the size of the left and middle panes. It's far from fatal - and I won't stop using the package - it's great - but it's not ideal.
Here's the bit of code I'm using:

<Splitpanes on:resized={resize} >
  <Pane size={initialPaneSize} >
    <canvas id="renderCanvas" touch-action="pan-x pan-y pinch-zoom" bind:this={canvas}> </canvas>
    <div class="tinfo"  bind:this={tinfo}> 
      <TurtleInfo/>
    </div>
  </Pane>
  <Pane snapSize=20>
    <LSExplorer/>
  </Pane>
  {#if $showExamples}
    <Pane size=10 maxSize=20>
      <Examples/>
    </Pane>
  {/if}
</Splitpanes>

When right pane opens:

After trying to adjust left and middle panes:

[orefalo]

Hi, I know this is an old issue - I apologies, got distracted.

I don't see anything wrong with the pseudo code above.
Would you mind testing with the latest 8.0.2, not sure if it will help.

in any case a REPL will help reproduce the issue.

[Lowclouds]

Problem still exists with 0.8.2
website is live here: https://lowclouds.github.io/lsystem/
Code here: https://github.com/Lowclouds/lsystem

[orefalo]

FYI, I can reproduce.
interesting one indeed.

it's late and I am tired. will try to look at it in the next few days.
but yes, it looks like an issue.

[orefalo]

looking at the pseudo code above, I am pretty sure it's the snap logic.
turn it off to see

good night.

[Lowclouds]

Hi, it appears snap is off by default, and I haven't enabled it (I think), so, I don't know what to do.

[orefalo]

Since reviewing your pseudocode, I have identified the issue.
The solution isn't simple, but there is an easier way to manage it... for now

note this line <Pane snapSize=20>, this turn on the snap logic
The problem is that you are adding/removing the pane 'example'
I believe there is an issue with reactivity in our snap logic

Regardless, a better approach for now would be either,

1. remove the snapSize=20, add/removing panes approach if fine - but apparently not when combined with snapping
2. if you want to keep the snap logic, do not remove the Pane, rather set its width to 0

Let me know how it goes,
Sincerely

[Lowclouds]

Thanks for approach 2. I'd already removed the 'snapsize=20' and the problem was still there, but by just changing the Pane size, instead of adding and removing it, things work as expected:

<Splitpanes on:resized={resize}>
  <Pane size={initialPaneSize} >
    <canvas id="renderCanvas" touch-action="none" bind:this={canvas}> </canvas>
    <!-- <canvas id="renderCanvas" touch-action="pan-x pan-y pinch-zoom" bind:this={canvas}> </canvas> -->
    <TurtleInfo/>
  </Pane>
  <Pane>
    <LSExplorer/>
  </Pane>
  <Pane size={sizeExPane} >
    <Examples/>
  </Pane>
</Splitpanes>

[orefalo]

I will address it as soon as I find time.
I plan to update the component to Svelte 5 soon.

We will leave the ticket open for further discussion.