fix capture/crop store update

PRIME-TU-Delft · Aug 29, 2023 · 4dfb32b · 4dfb32b
1 parent 7e4ffa0
commit 4dfb32b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/svelte-app/src/routes/crop/+page.svelte b/svelte-app/src/routes/crop/+page.svelte
@@ -61,12 +61,12 @@
 	<!-- P5 Overlay -->
 	<div class="absolute left-0 top-0 z-10 no-touch select-none">
 		{#if $imageStore?.corners}
-			<!-- {@const { width, height } = $imageStore.imageProportions} -->
-			<P5Overlay bind:width bind:height bind:suggestedCorners={$imageStore.corners} />
+			<P5Overlay bind:width bind:height suggestedCorners={$imageStore.corners} />
 		{/if}
 	</div>
 
-	{#if $imageStore?.corners}
+	{#if $imageStore?.imageUrl}
+		<!-- Fallback image to show the most recent image captured -->
 		<img class="w-full h-full" alt="captured figure" src={$imageStore?.imageUrl} />
 	{/if}
 

diff --git a/svelte-app/src/routes/crop/p5/P5Overlay.svelte b/svelte-app/src/routes/crop/p5/P5Overlay.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 	import P5 from '$lib/components/p5/P5.svelte';
+	import imageStore from '$lib/stores/imageStore';
 	import type p5 from 'p5';
-	import SnapRegion from './SnapRegion';
 	import type { Corners } from '../../capture/suggestedCorners';
+	import SnapRegion from './SnapRegion';
 
 	export let width: number = 100;
 	export let height: number = 100;
@@ -23,6 +24,11 @@
 		suggestedCorners.topRight = corners.topRight.toVector();
 		suggestedCorners.bottomLeft = corners.bottomLeft.toVector();
 		suggestedCorners.bottomRight = corners.bottomRight.toVector();
+
+		imageStore.update((store) => {
+			store.corners = suggestedCorners;
+			return store;
+		});
 	}
 
 	function sketch(p5: p5) {
@@ -84,4 +90,6 @@
 	}
 </script>
 
-<P5 {sketch} />
+{#key $imageStore.imageUrl}
+	<P5 {sketch} />
+{/key}