Listening to emitted events

Here is the list of events that are emitted from splitpanes:

• ready has no parameter and fires when splitpanes is ready
• resize fires while resizing (on mousemove/touchmove) and returns an array of all the panes objects with their dimensions
• resized fires once when the resizing stops after user drag (on mouseup/touchend). it returns an array of all the panes objects with their dimensions. The event also fires after adding or removing a pane.
• pane-click returns the clicked pane object with its dimensions.
• pane-maximize returns the maximized pane object with its dimensions.
• pane-add returns an object containing the index of the added pane and the new array of panes after resize.
• pane-remove returns an object containing the removed pane and an array of all the remaining panes objects with their dimensions after resize.
• splitter-click returns the next pane object (with its dimensions) directly after the clicked splitter. This event is only emitted if dragging did not occur between mousedown and mouseup.

// Event name: Event params   (Last event at the top)

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

  import TextArea from '$comp/TextAreaAutosize.svelte';

  let val = '// Event name: Event params   (Last event at the top)';

  function handleMessage(event: any) {
    if (event.detail) val = event.type + ' ' + JSON.stringify(event.detail) + '\n' + val;
    else val = event.type + '\n' + val;
  }
</script>

<Splitpanes
  style="height: 400px"
  on:ready={handleMessage}
  on:resize={handleMessage}
  on:resized={handleMessage}
  on:pane-click={handleMessage}
  on:pane-maximize={handleMessage}
  on:pane-add={handleMessage}
  on:pane-remove={handleMessage}
  on:splitter-click={handleMessage}>
  {#each { length: 3 } as _, i}
    <Pane minSize={10}>
      <span>{i + 1}</span>
    </Pane>
  {/each}
</Splitpanes>

<p>Try resizing panes and check the logs bellow.</p>

<TextArea bind:value={val} minRows={4} maxRows={40} />