feat: add pageloadsuccess and pageloaderror events (#13)

* add pageloadsuccess and pageloaderror events
* bump version

---------

Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com>
Co-authored-by: gtmnayan <gtmnayan@gmail.com>

CHANGELOG.md

@@ -1,5 +1,11 @@
 # svelte-pdfjs
 
+## 0.6.2
+
+### Patch Changes
+
+- feat: add pagerendersuccess and pagerendererror events to Page and PageCanvas
+
 ## 0.6.1
 
 ### Patch Changes

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-pdfjs",
-	"version": "0.6.1",
+	"version": "0.6.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",

src/lib/PDFViewer/Page.svelte

@@ -51,6 +51,11 @@ Render a page from a PDF document. Must be a child of a `Document` component.
 	export let getViewport: CalcViewport | undefined = undefined;
 	// #endregion props
 
+	interface $$Events {
+		pagerendersuccess: CustomEvent<PDFPageProxy>;
+		pagerendererror: CustomEvent<unknown>;
+	}
+
 	onDestroy(() => page?.cleanup());
 
 	const current_doc: Writable<PDFDocumentProxy> = getContext('svelte_pdfjs_doc');
@@ -74,5 +79,7 @@ Render a page from a PDF document. Must be a child of a `Document` component.
 		{page}
 		{viewport}
 		render_text_layer={renderer === 'canvas' ? renderTextLayer : false}
+		on:pagerendersuccess
+		on:pagerendererror
 	/>
 {/await}

src/lib/PDFViewer/PageInternals/PageCanvas.svelte

@@ -1,13 +1,21 @@
-<script lang="ts">
+<script lang="ts" context="module">
 	import { RenderingCancelledException } from 'pdfjs-dist';
 	import type { PDFPageProxy, RenderTask } from 'pdfjs-dist';
 	import type { PageViewport } from 'pdfjs-dist/types/src/display/display_utils.js';
-	import { tick } from 'svelte';
+	import { createEventDispatcher, tick } from 'svelte';
 	import TextLayer from './TextLayer.svelte';
+</script>
+
+<script lang="ts">
+	const dispatch = createEventDispatcher<{
+		pagerendersuccess: PDFPageProxy;
+		pagerendererror: unknown;
+	}>();
 
 	export let page: PDFPageProxy;
 	export let viewport: PageViewport;
 	export let render_text_layer: boolean;
+	export let canvasStyles = '';
 
 	let canvas: HTMLCanvasElement;
 
@@ -23,8 +31,12 @@
 
 		try {
 			await render_task.promise;
+			dispatch('pagerendersuccess', page);
 		} catch (err) {
-			if (!(err instanceof RenderingCancelledException)) throw err;
+			if (!(err instanceof RenderingCancelledException)) {
+				dispatch('pagerendererror', err);
+				throw err;
+			}
 		}
 	}
 
@@ -36,6 +48,7 @@
 		bind:this={canvas}
 		width={viewport?.width}
 		height={viewport?.height}
+		style={canvasStyles}
 	/>{#if render_text_layer}
 		<TextLayer {page} {viewport} />
 	{/if}