HW3 done

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) {
+    if (brushToolbar) {
-      const b = document.createElement('button');
+      for (const name in App.BRUSHES) {
-      b.innerText = name;
+        const b = document.createElement('button');
-      b.addEventListener('click', () => this.brush = name);
+        b.innerText = name;
-      brushToolbar.appendChild(b);
+        b.addEventListener('click', () => this.brush = name);
-    }
+        brushToolbar.appendChild(b);
+      }
 
-    const label = document.createElement('label');
+      const label = document.createElement('label');
-    label.setAttribute('for', 'color');
+      label.setAttribute('for', 'color');
-    const color = document.createElement('input');
+      const color = document.createElement('input');
-    color.type = 'color';
+      color.type = 'color';
-    color.name = 'color';
+      color.name = 'color';
-    color.addEventListener('change', () => this.strokeStyle = color.value);
+      color.value = this.constructor.defaultStrokeStyle;
-    brushToolbar.appendChild(label);
+      color.addEventListener('change', () => this.strokeStyle = color.value);
-    brushToolbar.appendChild(color);
+      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;
   }
 

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();
+  return history.paths.pop();
-  app.redrawAll();
 };
 
 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 = () => {

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);