From 0e524a130908b992c9867caca2cea4ff14c63d60 Mon Sep 17 00:00:00 2001
From: daylily <xy.r@outlook.com>
Date: Mon, 31 Mar 2025 03:43:30 -0400
Subject: [PATCH] Fix several bugs related to the interaction between
 reactivity and imperative browser APIs

---
 src/connect/ConnectSection.svelte       | 4 +++-
 src/edit/EditSection.svelte             | 7 +++++--
 src/edit/preview/PreviewCanvases.svelte | 8 ++++++--
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/connect/ConnectSection.svelte b/src/connect/ConnectSection.svelte
index 5cf59dd..c38b421 100644
--- a/src/connect/ConnectSection.svelte
+++ b/src/connect/ConnectSection.svelte
@@ -32,8 +32,10 @@
   })
 
   hid.addEventListener('disconnect', e => {
+    if (device === e.device) {
     toast.info('Device disconnected')
-    if (device === e.device) onchange(null)
+      onchange(null)
+    }
   })
 
   onMount(() => {
diff --git a/src/edit/EditSection.svelte b/src/edit/EditSection.svelte
index 069c2d2..a6b9766 100644
--- a/src/edit/EditSection.svelte
+++ b/src/edit/EditSection.svelte
@@ -52,7 +52,7 @@
 
   async function renderPattern() {
     if (imageBitmap === null) {
-      onchange(null)
+      renderedBitmap = null
       return
     }
 
@@ -71,12 +71,15 @@
 
     const quantizedData = quantizer.reduce(ctx)
     renderedBitmap = quantizedData
-    onchange(quantizedData)
   }
 
   $effect(() => {
     renderPattern()
   })
+
+  $effect(() => {
+    onchange(renderedBitmap)
+  })
 </script>
 
 <div class={cn('flex max-lg:flex-col gap-4', classNames)} {...restProps}>
diff --git a/src/edit/preview/PreviewCanvases.svelte b/src/edit/preview/PreviewCanvases.svelte
index 9cd79d2..917b052 100644
--- a/src/edit/preview/PreviewCanvases.svelte
+++ b/src/edit/preview/PreviewCanvases.svelte
@@ -36,9 +36,13 @@
   }
 
   $effect(() => {
+    const context2x = freshContext(canvas2xEl)
+    const context1x = freshContext(canvas1xEl)
+
     if (bitmap === null) return
-    drawQuantizedData(freshContext(canvas2xEl), bitmap)
-    drawQuantizedData(freshContext(canvas1xEl), bitmap)
+
+    drawQuantizedData(context2x, bitmap)
+    drawQuantizedData(context1x, bitmap)
   })
 </script>