feature: change new canvas functionality to resize canvas

Also updates the toolbar accordingly.

src/classes/data.mjs

@@ -17,9 +17,32 @@ export class Data {
     this.height = height
     this.blank = blank
     this.separator = separator
-    this.matrix = new Array(this.height)
+
+    const matrix = new Array(this.height)
       .fill(undefined)
       .map(() => new Array(this.width).fill(blank))
+
+    this.matrix = this.merge(matrix)
+  }
+
+  merge(newMatrix) {
+    if (this.matrix instanceof Array) {
+      for (
+        let index = 0, length = Math.min(this.matrix.length, newMatrix.length);
+        index < length;
+        index++
+      ) {
+        const linePrev = this.matrix[index]
+        const lineCurr = newMatrix[index]
+
+        newMatrix[index] = [
+          ...linePrev.slice(0, lineCurr.length),
+          ...lineCurr.slice(linePrev.length)
+        ]
+      }
+    }
+
+    return newMatrix
   }
 
   clear() {

src/components/toolbar-top.mjs

@@ -12,19 +12,19 @@ export class ToolbarTop extends Toolbar {
     this.setupBtnCopy()
     this.setupBtnDownload()
     this.attachSpacer()
-    this.setupNew()
+    this.setupResize()
     this.attachSeparator()
     this.setupBtnClear()
   }
 
-  setupNew() {
-    const containerNew = document.createElement('div')
+  setupResize() {
+    const containerResize = document.createElement('div')
     const label = document.createElement('span')
     const inputWidth = document.createElement('input')
     const inputHeight = document.createElement('input')
-    const btnNew = document.createElement('button')
+    const btnResize = document.createElement('button')
 
-    containerNew.classList.add('emoji-paint__toolbar-top-new')
+    containerResize.classList.add('emoji-paint__toolbar-top-resize')
 
     label.classList.add('emoji-paint__toolbar-label')
     label.innerText = 'Size'
@@ -33,23 +33,23 @@ export class ToolbarTop extends Toolbar {
     inputWidth.value = this.paint.width
     inputHeight.value = this.paint.height
 
-    btnNew.classList.add(
-      'emoji-paint__toolbar-top-btn-new',
+    btnResize.classList.add(
+      'emoji-paint__toolbar-top-btn-resize',
       'emoji-paint__icon-btn'
     )
-    btnNew.title = 'New Canvas'
-    btnNew.innerText = '💥️'
-    btnNew.addEventListener('click', () => {
+    btnResize.title = 'Resize Canvas'
+    btnResize.innerText = '📐'
+    btnResize.addEventListener('click', () => {
         this.paint.canvas.setup(
           parseInt(inputWidth.value),
           parseInt(inputHeight.value)
         )
       }
     )
 
-    containerNew.append(label, inputWidth, inputHeight, btnNew)
+    containerResize.append(label, inputWidth, inputHeight, btnResize)
 
-    this.attachItem('new', containerNew)
+    this.attachItem('resize', containerResize)
   }
 
   setupBtnClear() {
@@ -60,7 +60,7 @@ export class ToolbarTop extends Toolbar {
       'emoji-paint__icon-btn'
     )
     btnClear.title = 'Clear Canvas'
-    btnClear.innerText = '❌'
+    btnClear.innerText = '💥️'
     btnClear.addEventListener('click', () => {
       this.paint.canvas.clear()
     })

style.css

@@ -181,7 +181,7 @@ body {
   flex: 1 1 auto;
 }
 
-.emoji-paint__toolbar-top-new input[type='number'] {
+.emoji-paint__toolbar-top-resize input[type='number'] {
   width: 6ch;
   text-align: right;
 }