orefalo/svelte-splitpanes

expand arbitrary pane

Closed this issue ยท 6 comments

is there a way to expand an arbitrary pane?

imagine the following scenario:

<script lang="ts">
  import { Splitpanes, Pane } from 'svelte-splitpanes';
</script>

<Splitpanes>
  <!-- pane1 -->
  <Pane size={25} snapSize={18}>
    ...
  </Pane>

  <!-- pane2 -->
  <Pane size={75}>
    ....
  </Pane>
</Splitpanes>

i would like to add a button on the page, which when clicked, would expand pane1 to its set size (25).

is this possible?

perhaps a way of doing this would be to export the IPane instance from the Pane, so that the consumer could bind to it, and use the setSz function (im not sure if this function means setSize, just taking my chances lol)

Please check this demo https://orefalo.github.io/svelte-splitpanes/examples/prog-resize and see if it fits your requirements.

Please close this ticket once confirmed
Thank you

perhaps a way of doing this would be to export the IPane instance from the Pane, so that the consumer could bind to it, and use the setSz function (im not sure if this function means setSize, just taking my chances lol)

@orefalo, the submitter pointed out something I was worry about - we share too much data internal in IPane for the user.
We shell modify the events of this library, and export only a limited part of IPane to the user (maybe only export the Pane component to the user, and not the IPane one). (Breaking change)

Please check this demo https://orefalo.github.io/svelte-splitpanes/examples/prog-resize and see if it fits your requirements.

Please close this ticket once confirmed Thank you

@demetrius-mp, please notice that your case is much more simple - you don't need to use the Svelte bind directive, as in the example.

Agreed, the events could be simplified.

@demetrius-mp, notice please that even when you change one pane size, these axioms must hold:(some panes have (user-)defined sizes, and some not)

  • The defined min sizes sum is not greater than 100.
  • The defined sizes sum is not greater than 100.
  • If all the panes have defined sizes, then the defined size sum must be equal to 100.

If you don't do this, bad things will happen.

@orefalo we need to doc it

the demo worked perfectly! so sorry for not reading the documentation and noticing that there was an example.

perhaps you could add on that props table, which properties are "reactive". probably dumb, but my initial thought was that the size prop was only used on the initialization of the component.

anyways, thanks so much, im going to close the issue!