diff --git a/hw3/Claudio_Maggioni/scripts/app.js b/hw3/Claudio_Maggioni/scripts/app.js index 18b420c..5277860 100644 --- a/hw3/Claudio_Maggioni/scripts/app.js +++ b/hw3/Claudio_Maggioni/scripts/app.js @@ -26,17 +26,22 @@ class App { for (const b of ['clear', 'undo', 'camera']) this.buttons[b] = document.getElementById(conf.buttons[b]); - if (this.buttons.clear) + if (this.buttons.clear) { this.buttons.clear.addEventListener('click', () => { this.erase(); this.background = null; history.clear(); }); + } - if (this.buttons.undo) - this.buttons.undo.addEventListener('click', () => history.pop(this)); + if (this.buttons.undo) { + this.buttons.undo.addEventListener('click', () => { + history.pop(); + this.redrawAll(); + }); + } - if (this.buttons.camera) + if (this.buttons.camera) { this.buttons.camera.addEventListener('click', () => { const base64 = this.canvas.toDataURL(); const img = document.createElement('img'); @@ -47,6 +52,7 @@ class App { this.favourites.appendChild(img); this.favourites.appendChild(span); }); + } const player = document.createElement('video'); player.addEventListener('loadeddata', () => { @@ -102,8 +108,20 @@ class App { brushToolbar.appendChild(color); } + const toMouse = (e, func) => { + if (e && e.touches && e.touches[0]) { + return func.bind(this)({ + offsetX: e.touches[0].pageX - this.canvas.offsetLeft, + offsetY: e.touches[0].pageY - this.canvas.offsetTop + }); + } + }; + + this.canvas.addEventListener('touchstart', e => toMouse(e, this.startPath)); this.canvas.addEventListener('mousedown', this.startPath.bind(this)); + this.canvas.addEventListener('touchmove', e => toMouse(e, this.draw)); this.canvas.addEventListener('mousemove', this.draw.bind(this)); + this.canvas.addEventListener('touchcancel', e => toMouse(e, this.endPath)); this.canvas.addEventListener('mouseup', this.endPath.bind(this)); this.canvas.addEventListener('mouseout', this.endPath.bind(this)); } @@ -148,11 +166,13 @@ class App { e.offsetX, e.offsetY)); } - this.mousedown = true; + if (e instanceof MouseEvent) { + this.mousedown = true; + } } draw(e, beginNew = true, record = true) { - if (this.mousedown) { + if (this.mousedown || !(e instanceof MouseEvent)) { this._brush.draw(this.ctx, this.strokeStyle, e.offsetX, e.offsetY); if (record) { @@ -163,7 +183,7 @@ class App { if (beginNew) { this.ctx.beginPath(); this.ctx.moveTo(e.offsetX, e.offsetY); - } else { + } else if (e instanceof MouseEvent) { this.mousedown = false; } }