Put placeholder for empty row in array2d

Author: 64json

src/frontend/core/datas/Array2DData.js

@@ -1,29 +1,26 @@
 import { Data } from '/core/datas';
 import { Array2DRenderer } from '/core/renderers';
 
+class Element {
+  constructor(value) {
+    this.value = value;
+    this.patched = false;
+    this.selected = false;
+  }
+}
+
 class Array2DData extends Data {
   getRendererClass() {
     return Array2DRenderer;
   }
 
   set(array2d = []) {
-    this.data = [];
-    for (const array1d of array2d) {
-      const row = [];
-      for (const value of array1d) {
-        const col = {
-          value,
-          patched: false,
-          selected: false,
-        };
-        row.push(col);
-      }
-      this.data.push(row);
-    }
+    this.data = array2d.map(array1d => [...array1d].map(value => new Element(value)));
     super.set();
   }
 
   patch(x, y, v = this.data[x][y].value) {
+    if (!this.data[x][y]) this.data[x][y] = new Element();
     this.data[x][y].value = v;
     this.data[x][y].patched = true;
   }

src/frontend/core/renderers/Array2DRenderer/stylesheet.scss

@@ -7,13 +7,18 @@
 
   .row {
     display: flex;
+    min-height: 28em;
+    align-items: stretch;
+
+    &:empty {
+      border-left: 1em solid $theme-light;
+    }
 
     .col {
       display: flex;
       align-items: center;
       justify-content: center;
       min-width: 28em;
-      height: 28em;
       background-color: $theme-normal;
       border: 1em solid $theme-light;
       margin-right: -1em;
@@ -33,4 +38,4 @@
       }
     }
   }
-}
+}