From 2074114e3796fcda981372e7c2188812e3e39b22 Mon Sep 17 00:00:00 2001
From: mschuepbach <schuepbach.matteo@gmail.com>
Date: Mon, 31 Jan 2022 12:01:31 +0100
Subject: [PATCH] Add input validation

---
 src/App.svelte             | 23 ++++++++++++++++-------
 src/MatrixSizeInput.svelte |  4 ++--
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index ae6c993..cc252b4 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -8,12 +8,19 @@
   let kernelHeight = 3;
   let padding = 0;
 
-  $: matrix = Array(matrixHeight)
-    .fill(1)
-    .map(() => Array(matrixWidth).fill(1));
-  $: kernel = Array(kernelHeight)
-    .fill(1)
-    .map(() => Array(kernelWidth).fill(1));
+  $: matrix =
+    matrixHeight > 0 && matrixWidth > 0
+      ? Array(matrixHeight)
+          .fill(1)
+          .map(() => Array(matrixWidth).fill(1))
+      : [[]];
+
+  $: kernel =
+    kernelHeight > 0 && kernelWidth > 0
+      ? Array(kernelHeight)
+          .fill(1)
+          .map(() => Array(kernelWidth).fill(1))
+      : [[]];
 
   $: result = conv_2d(kernel, matrix, padding);
 
@@ -73,7 +80,9 @@
     <div style="grid-area: result-size">{result[0].length}x{result.length}</div>
     <div style="grid-area: matrix"><Matrix bind:matrix /></div>
     <div style="grid-area: kernel"><Matrix bind:matrix={kernel} /></div>
-    <div style="grid-area: result"><Matrix matrix={result} readonly="true" /></div>
+    <div style="grid-area: result">
+      <Matrix matrix={result} readonly="true" />
+    </div>
     <div style="grid-area: padding">
       <div>Padding</div>
       <div>
diff --git a/src/MatrixSizeInput.svelte b/src/MatrixSizeInput.svelte
index 45ac55a..2f41cd3 100644
--- a/src/MatrixSizeInput.svelte
+++ b/src/MatrixSizeInput.svelte
@@ -4,9 +4,9 @@
 </script>
 
 <div>
-  <input type="number" bind:value={matrixWidth} onclick="select()" />
+  <input type="number" min="1" bind:value={matrixWidth} onclick="select()" />
   <span>x</span>
-  <input type="number" bind:value={matrixHeight} onclick="select()" />
+  <input type="number" min="1" bind:value={matrixHeight} onclick="select()" />
 </div>
 
 <style>