fix(web-vis): reduce the clickable area of 'add' button (#102)

Fix the regression introduced by the previous PR where the clickable
area of `add` button was increased to the entire grid tile.

web-vis/www/src/app.js

@@ -57,16 +57,19 @@ class AddVectorButtonComponent extends HTMLElement {
   }
 
   connectedCallback() {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.classList.add("button-add-vector");
+
     const plusIcon = document.createElement("span");
-    plusIcon.classList.add("button-add-vector");
+    plusIcon.classList.add("button-add-vector-icon");
     plusIcon.innerHTML = "+";
 
-    this.classList.add("button-add-vector-container");
-    this.addEventListener("click", (event) => {
-      this.onClick(event);
-    });
+    button.appendChild(plusIcon);
+    button.addEventListener("click", () => this.onClick(this));
 
-    this.appendChild(plusIcon);
+    this.classList.add("button-add-vector-container");
+    this.appendChild(button);
   }
 }
 
@@ -82,14 +85,15 @@ customElements.define("grid-component", GridComponent);
 
 const grid = new GridComponent();
 const addVectorButton = new AddVectorButtonComponent();
-addVectorButton.onClick = (event) => {
+const addVector = (button) => {
   const vectorVis = new VectorVis(VectorFactory.create(64));
   const vectorComponent = new VectorComponent(vectorVis);
 
-  grid.insertBefore(vectorComponent, event.currentTarget);
+  grid.insertBefore(vectorComponent, button);
 };
+addVectorButton.onClick = addVector;
 
 grid.appendChild(addVectorButton);
 document.body.appendChild(grid);
 
-addVectorButton.dispatchEvent(new Event("click"));
+addVector(addVectorButton);

web-vis/www/src/styles.css

@@ -18,10 +18,13 @@ body {
   @apply flex justify-center items-center min-h-[600px];
 }
 
+.button-add-vector-icon {
+  @apply text-gray-500 text-4xl;
+}
+
 .button-add-vector {
   @apply bg-white hover:bg-gray-50 border-gray-300 focus:outline-none rounded-lg p-4;
   @apply min-h-[196px] min-w-[196px] py-2.5 px-5 border flex items-center justify-center;
-  @apply text-gray-500 text-4xl;
 }
 
 .slider-container {