diff --git a/hw3/Claudio_Maggioni/scripts/app.js b/hw3/Claudio_Maggioni/scripts/app.js index 09fdbf6..6fe39e8 100644 --- a/hw3/Claudio_Maggioni/scripts/app.js +++ b/hw3/Claudio_Maggioni/scripts/app.js @@ -38,7 +38,6 @@ class App { if (this.buttons.camera) this.buttons.camera.addEventListener('click', () => { - player.srcObject.getVideoTracks().forEach(track => track.stop()); const base64 = this.canvas.toDataURL(); const img = document.createElement('img'); img.src = base64; @@ -83,21 +82,24 @@ class App { this.brush = "PenBrush"; const brushToolbar = document.querySelector('#brush-toolbar'); - for (const name in App.BRUSHES) { - const b = document.createElement('button'); - b.innerText = name; - b.addEventListener('click', () => this.brush = name); - brushToolbar.appendChild(b); - } + if (brushToolbar) { + for (const name in App.BRUSHES) { + const b = document.createElement('button'); + b.innerText = name; + b.addEventListener('click', () => this.brush = name); + brushToolbar.appendChild(b); + } - const label = document.createElement('label'); - label.setAttribute('for', 'color'); - const color = document.createElement('input'); - color.type = 'color'; - color.name = 'color'; - color.addEventListener('change', () => this.strokeStyle = color.value); - brushToolbar.appendChild(label); - brushToolbar.appendChild(color); + const label = document.createElement('label'); + label.setAttribute('for', 'color'); + const color = document.createElement('input'); + color.type = 'color'; + color.name = 'color'; + color.value = this.constructor.defaultStrokeStyle; + color.addEventListener('change', () => this.strokeStyle = color.value); + brushToolbar.appendChild(label); + brushToolbar.appendChild(color); + } this.canvas.addEventListener('mousedown', this.startPath.bind(this)); this.canvas.addEventListener('mousemove', this.draw.bind(this)); @@ -110,6 +112,9 @@ class App { } get strokeStyle() { + if (this.ctx.strokeStyle == '#000000') { + return 'black'; + } return this.ctx.strokeStyle; } diff --git a/hw3/Claudio_Maggioni/scripts/undo.js b/hw3/Claudio_Maggioni/scripts/undo.js index 7e1c709..05c7de9 100644 --- a/hw3/Claudio_Maggioni/scripts/undo.js +++ b/hw3/Claudio_Maggioni/scripts/undo.js @@ -4,10 +4,9 @@ const history = { paths: [] } -history.pop = (app) => { +history.pop = () => { if (history.paths.length == 0) return; - history.paths.pop(); - app.redrawAll(); + return history.paths.pop(); }; history.initializeNewPath = () => { @@ -15,10 +14,11 @@ history.initializeNewPath = () => { }; history.push = (stroke) => { - if (!stroke instanceof Stroke) { + if (!stroke || !stroke instanceof Stroke) { throw new Error(JSON.stringify(stroke) + ' is not a Stroke instance'); } history.paths[history.paths.length - 1].push(stroke); + return history.paths[history.paths.length - 1]; } history.clear = () => { diff --git a/hw3/Claudio_Maggioni/style.css b/hw3/Claudio_Maggioni/style.css index d3cbaa6..8debefd 100644 --- a/hw3/Claudio_Maggioni/style.css +++ b/hw3/Claudio_Maggioni/style.css @@ -117,13 +117,13 @@ body{ color: white; } -#favourites div.gallery { +#favourites { margin: 5px; float: left; width: 200px; } -#favourites div.gallery img { +#favourites img { width: 90%; height: 100px; box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.42);