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>
	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) {
		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} />