fix: async draw

src/App.vue

@@ -75,12 +75,12 @@ function randomElement<T>(items: T[]): T {
 function randomize() {
     centerX.value = Math.random();
     centerY.value = Math.random();
-    zoom.value = 1 + Math.random() * 3;
+    zoom.value = 1 + Math.random() * 2;
     filter.value = randomElement(Object.values(Filter));
     paPos.value = randomElement(Object.values(PAPosition));
     paScale.value = 0.1 + Math.random() * 0.2;
     paMargin.value = Math.random() * 0.1;
-    draw();
+    asyncDraw();
 }
 
 function reset() {
@@ -91,7 +91,7 @@ function reset() {
     paPos.value = PAPosition.BR;
     paScale.value = 0.2;
     paMargin.value = 0.05;
-    draw();
+    asyncDraw();
 }
 
 function newImage() {
@@ -128,6 +128,13 @@ function applyFilter(
     return [r, g, b];
 }
 
+const drawTimeout = ref<number | undefined>(undefined);
+
+function asyncDraw() {
+    clearTimeout(drawTimeout.value);
+    drawTimeout.value = setTimeout(draw);
+}
+
 function draw() {
     if (!canvas.value) {
         return;
@@ -155,9 +162,9 @@ function draw() {
     // @ts-expect-error: safer to cast
     const pixelData = imageData.data as number[];
     for (let i = 0; i < pixelData.length; i += 4) {
-        const r1 = pixelData[i];
-        const g1 = pixelData[i + 1];
-        const b1 = pixelData[i + 2];
+        const r1 = pixelData[i]!;
+        const g1 = pixelData[i + 1]!;
+        const b1 = pixelData[i + 2]!;
 
         const [r2, g2, b2] = applyFilter(filter.value, r1, g1, b1);
 
@@ -265,7 +272,7 @@ onMounted(() => {
                                 min="0"
                                 max="1"
                                 step="0.01"
-                                @input="draw"
+                                @input="asyncDraw"
                             />
                         </td>
                         <td>{{ (centerX * 100).toFixed(0) }}%</td>
@@ -280,7 +287,7 @@ onMounted(() => {
                                 min="0"
                                 max="1"
                                 step="0.01"
-                                @input="draw"
+                                @input="asyncDraw"
                             />
                         </td>
                         <td>{{ (centerY * 100).toFixed(0) }}%</td>
@@ -293,9 +300,9 @@ onMounted(() => {
                                 v-model="zoom"
                                 type="range"
                                 min="1"
-                                max="4"
+                                max="3"
                                 step="0.01"
-                                @input="draw"
+                                @input="asyncDraw"
                             />
                         </td>
                         <td>{{ (zoom * 100).toFixed(0) }}%</td>
@@ -303,7 +310,11 @@ onMounted(() => {
                     <tr>
                         <td><label for="filter">Filter:</label></td>
                         <td>
-                            <select id="filter" v-model="filter" @change="draw">
+                            <select
+                                id="filter"
+                                v-model="filter"
+                                @change="asyncDraw"
+                            >
                                 <option
                                     v-for="value in Object.values(Filter)"
                                     :key="`filter-${value}`"
@@ -317,7 +328,11 @@ onMounted(() => {
                     <tr>
                         <td><label for="pa-pos">Sticker Position:</label></td>
                         <td>
-                            <select id="pa-pos" v-model="paPos" @change="draw">
+                            <select
+                                id="pa-pos"
+                                v-model="paPos"
+                                @change="asyncDraw"
+                            >
                                 <option
                                     v-for="value in Object.values(PAPosition)"
                                     :key="`pa-pos-${value}`"
@@ -338,7 +353,7 @@ onMounted(() => {
                                 min="0.10"
                                 max="0.30"
                                 step="0.01"
-                                @input="draw"
+                                @input="asyncDraw"
                             />
                         </td>
                         <td>{{ (paScale * 100).toFixed(0) }}%</td>
@@ -353,7 +368,7 @@ onMounted(() => {
                                 min="0"
                                 max="0.1"
                                 step="0.01"
-                                @input="draw"
+                                @input="asyncDraw"
                             />
                         </td>
                         <td>{{ (paMargin * 100).toFixed(0) }}%</td>