diff --git a/src/classes/data.mjs b/src/classes/data.mjs index 06da6b8..9ccc16d 100644 --- a/src/classes/data.mjs +++ b/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() { diff --git a/src/components/toolbar-top.mjs b/src/components/toolbar-top.mjs index 829a031..23c2d00 100644 --- a/src/components/toolbar-top.mjs +++ b/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,13 +33,13 @@ 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) @@ -47,9 +47,9 @@ export class ToolbarTop extends Toolbar { } ) - 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() }) diff --git a/style.css b/style.css index 897a28f..09f7c35 100644 --- a/style.css +++ b/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; }