Continued tool tutorials

Also fixed fill tool history bug

css/_splash-page.scss

@@ -3,7 +3,8 @@
 #splash {
 	width:100% !important;
 	height:100%!important;
-	position:absolute;
+	position:fixed;
+	margin-top:-20px;
 
 	background-color: #232125 !important;
 	opacity: 1 !important;

css/_tools-menu.scss

@@ -10,7 +10,7 @@
 	background-color: $basecolor;
 	box-sizing: border-box;
 	position: fixed;
-	z-index: 1120;
+	z-index: 1108;
 }
 
 #tools-menu li {
@@ -110,11 +110,35 @@
 	background: $basehover;
 }
 
+@keyframes fadeIn {
+	to {
+		opacity: 1;
+	}
+}
+@keyframes fadeOut {
+	to {
+		opacity: 0;
+	}
+}
+
+.fade-in {
+	opacity: 0;
+	animation: fadeIn .1s forwards;
+}
+
+.fade-out {
+	animation: fadeOut .1s forwards;
+}
+
+.is-paused {
+	animation-play-state: paused;
+}
+
 /* Tool tutorial */
 #tool-tutorial {
 	display:inline-block;
 	position:absolute;
-	z-index:4000;
+	z-index:1109;
 	margin-left:48px;
 	margin-top:48px;
 	background-color: $basehover;
@@ -126,6 +150,11 @@
 	img {
 		width:100%;
 	}
+
+	h3 {
+		margin-left:20px;
+		margin-bottom:-5px;
+	}
 }
 
 #tool-tutorial:after {

js/Input.js

@@ -116,15 +116,22 @@ const Input = (() => {
                 case 77: case 109:
                     Events.emit("tool-shortcut", "rectselect");
                     break;
-                // TODO: [ELLIPSE] Decide on a shortcut to use. "s" was chosen without any in-team consultation.
+                // Lasso tool, q
+                case 81: case 113:
+                    Events.emit("tool-shortcut", "lassoselect");
+                    break;
                 // ellipse tool, s
                 case 83:
-                    //Events.emit("tool-shortcut", "ellipse");
+                    Events.emit("tool-shortcut", "ellipse");
                     break;
                 // rectangle tool, u
                 case 85:
                     Events.emit("tool-shortcut", "rectangle");
                     break;
+                // magic wand tool
+                case 87: case 119:
+                    Events.emit("tool-shortcut", "magicwand");
+                    break;
                 // Paste tool
                 case 86: case 118:
                     if (keyboardEvent.ctrlKey) {

js/Tool.js

@@ -24,7 +24,11 @@ class Tool {
 	biggerButton = undefined;
 	smallerButton = undefined;
 	brushPreview = document.getElementById("brush-preview");
+
+	// Tool tutorial
 	toolTutorial = document.getElementById("tool-tutorial");
+	tutorialTimer = undefined;
+	tutorialString = "";
 
 	constructor (name, options) {
 		this.name = name;
@@ -33,22 +37,51 @@ class Tool {
 		this.mainButton = document.getElementById(name + "-button");
 		this.biggerButton = document.getElementById(name + "-bigger-button");
 		this.smallerButton = document.getElementById(name + "-smaller-button");
+
+		if (this.mainButton != undefined) {
+			// Timer to show the tutorial
+			Events.on("mouseenter", this.mainButton, function(){
+				this.tutorialTimer = setTimeout(this.showTutorial.bind(this), 750)
+			}.bind(this));
+
+			// Clear the callback if the user cancels the hovering
+			Events.on("mouseleave", this.mainButton, function() {
+				if (this.tutorialTimer != undefined)
+					clearTimeout(this.tutorialTimer);
+				this.tutorialTimer = undefined;
+				this.hideTutorial();
+			}.bind(this))
+
+			this.hideTutorial();
+		}
+	}
+	
+	showTutorial() {
+		this.setTutorial();
+		this.toolTutorial.style.top = this.mainButton.getBoundingClientRect().top - 48 + "px";
+		this.toolTutorial.className = "fade-in";
+	}
+	hideTutorial() {
+		this.toolTutorial.className = "fade-out";
 	}
 
 	resetTutorial() {
-		this.toolTutorial.innerHTML = "<ul></ul>";
+		this.tutorialString = "";
+	}
+	setTutorial() {
+		this.toolTutorial.innerHTML = this.tutorialString;
 	}
 	addTutorialKey(key, text) {
-		this.toolTutorial.children[0].append(
-			'<li><span class="keyboard-key">' + key + '</span> ' + text + '</li>');
+		this.tutorialString += '<li><span class="keyboard-key">' + key + '</span> ' + text + '</li>';
 	}
 	addTutorialText(key, text) {
-		this.toolTutorial.children[0].append(
-			'<li>' + key + ': ' + text + '</li>');
+		this.tutorialString += '<li>' + key + ': ' + text + '</li>';
 	}
 	addTutorialImg(imgPath) {
-		this.toolTutorial.children[0].append(
-			'<img src="' + imgPath + '"/>');
+		this.tutorialString += '</ul><img src="' + imgPath + '"/>';
+	}
+	addTutorialTitle(text) {
+		this.tutorialString += "<h3>" + text + "</h3><ul>";
 	}
 
 	onSelect() {

js/tools/BrushTool.js

@@ -5,6 +5,14 @@ class BrushTool extends ResizableTool {
         Events.on('click', this.mainButton, switchFunction, this);
         Events.on('click', this.biggerButton, this.increaseSize.bind(this));
         Events.on('click', this.smallerButton, this.decreaseSize.bind(this));
+
+        this.resetTutorial();
+        this.addTutorialTitle("Pencil tool");
+        this.addTutorialKey("B", " to select the brush");
+        this.addTutorialKey("Left drag", " to draw a stroke");
+        this.addTutorialKey("Right drag", " to resize the brush");
+        this.addTutorialKey("+ or -", " to resize the brush");
+        this.addTutorialImg("brush-tutorial.gif");
     }
 
     onStart(mousePos, cursorTarget) {

js/tools/EllipseTool.js

@@ -17,6 +17,15 @@ class EllipseTool extends ResizableTool {
         Events.on('click', this.mainButton, this.changeFillType.bind(this));
         Events.on('click', this.biggerButton, this.increaseSize.bind(this));
         Events.on('click', this.smallerButton, this.decreaseSize.bind(this));
+
+        this.resetTutorial();
+        this.addTutorialTitle("Ellipse tool");
+        this.addTutorialKey("S", " to select the ellipse");
+        this.addTutorialKey("S while selected", " to change fill mode (empty or fill)");
+        this.addTutorialKey("Left drag", " to draw an ellipse");
+        this.addTutorialKey("Right drag", " to resize the brush");
+        this.addTutorialKey("+ or -", " to resize the brush");
+        this.addTutorialImg("ellipse-tutorial.gif");
     }
 
     changeFillType() {

js/tools/EraserTool.js

@@ -5,6 +5,14 @@ class EraserTool extends ResizableTool {
         Events.on('click', this.mainButton, switchFunction, this);
         Events.on('click', this.biggerButton, this.increaseSize.bind(this));
         Events.on('click', this.smallerButton, this.decreaseSize.bind(this));
+
+        this.resetTutorial();
+        this.addTutorialTitle("Eraser tool");
+        this.addTutorialKey("E", " to select the eraser");
+        this.addTutorialKey("Left drag", " to erase an area");
+        this.addTutorialKey("Right drag", " to resize the eraser");
+        this.addTutorialKey("+ or -", " to resize the eraser");
+        this.addTutorialImg("eraser-tutorial.gif");
     }
 
     onStart(mousePos) {

js/tools/FillTool.js

@@ -10,10 +10,9 @@ class FillTool extends DrawingTool {
 
         if (target.className != 'drawingCanvas')
             return;
+        new HistoryState().EditCanvas();
         FillTool.fill(mousePos);
         currFile.currentLayer.updateLayerPreview();
-        
-        new HistoryState().EditCanvas();
 	}
 
     

js/tools/LineTool.js

@@ -5,6 +5,14 @@ class LineTool extends ResizableTool {
         Events.on('click', this.mainButton, switchFunction, this);
         Events.on('click', this.biggerButton, this.increaseSize.bind(this));
         Events.on('click', this.smallerButton, this.decreaseSize.bind(this));
+
+        this.resetTutorial();
+        this.addTutorialTitle("Line tool");
+        this.addTutorialKey("L", " to select the line");
+        this.addTutorialKey("Left drag", " to draw a line");
+        this.addTutorialKey("Right drag", " to resize the brush");
+        this.addTutorialKey("+ or -", " to resize the brush");
+        this.addTutorialImg("line-tutorial.gif");
     }
 
     onStart(mousePos) {

js/tools/RectangleTool.js

@@ -17,6 +17,15 @@ class RectangleTool extends ResizableTool {
         Events.on('click', this.mainButton, this.changeFillType.bind(this));
         Events.on('click', this.biggerButton, this.increaseSize.bind(this));
         Events.on('click', this.smallerButton, this.decreaseSize.bind(this));
+
+        this.resetTutorial();
+        this.addTutorialTitle("Rectangle tool");
+        this.addTutorialKey("U", " to select the rectangle");
+        this.addTutorialKey("U while selected", " to change fill mode (empty or fill)");
+        this.addTutorialKey("Left drag", " to draw a rectangle");
+        this.addTutorialKey("Right drag", " to resize the brush");
+        this.addTutorialKey("+ or -", " to resize the brush");
+        this.addTutorialImg("rectangle-tutorial.gif");
     }
 
     changeFillType() {

views/tools-menu.hbs

@@ -56,7 +56,8 @@
 	<li><button id="pan-button">{{svg "pan.svg" width="24" height="24"}}</button></li>
 </ul>
 
-<div id="tool-tutorial">
+<div id="tool-tutorial" class="fade-in">
+	<h3>Brush tool</h3>
 	<ul>
 		<li><span class="keyboard-key">B</span> to select the tool</li>
 		<li><span class="keyboard-key">Left drag</span> to use the tool</li>