Finished tooltorials

css/_tools-menu.scss

@@ -144,7 +144,7 @@
 	background-color: $basehover;
 	color:$basetext;
 	font-size:14px;
-	width:20%;
+	width:22%;
 	border-radius:0 5px 5px 5px;
 	
 	img {

js/Tool.js

@@ -41,6 +41,7 @@ class Tool {
 		if (this.mainButton != undefined) {
 			// Timer to show the tutorial
 			Events.on("mouseenter", this.mainButton, function(){
+				this.setTutorial();
 				this.tutorialTimer = setTimeout(this.showTutorial.bind(this), 750)
 			}.bind(this));
 
@@ -57,8 +58,19 @@ class Tool {
 	}
 	
 	showTutorial() {
-		this.setTutorial();
+		let tutorialRect = this.toolTutorial.getBoundingClientRect();
-		this.toolTutorial.style.top = this.mainButton.getBoundingClientRect().top - 48 + "px";
+		
+		console.log("Top button: " + (this.mainButton.getBoundingClientRect().top - 48 + (tutorialRect.bottom - tutorialRect.top)));
+		console.log("Tutorial height: " + (tutorialRect.bottom - tutorialRect.top));
+		console.log("Screen height: " + window.innerHeight);
+		
+		if ((this.mainButton.getBoundingClientRect().top - 48 + (tutorialRect.bottom - tutorialRect.top)) > window.innerHeight) {
+			console.log("YO");
+			this.toolTutorial.style.top = window.innerHeight - 48 - (tutorialRect.bottom - tutorialRect.top) + "px";
+		}
+		else {
+			this.toolTutorial.style.top = this.mainButton.getBoundingClientRect().top - 48 + "px";
+		}
 		this.toolTutorial.className = "fade-in";
 	}
 	hideTutorial() {

js/tools/EllipseTool.js

@@ -1,3 +1,6 @@
+/** TODO
+ *  - Increase the sensibility of the tool depending on the width / height ratio to avoid holes
+ */
 class EllipseTool extends ResizableTool {
     // Saving the empty rect svg
     emptyEllipseSVG = document.getElementById("ellipse-empty-button-svg");

js/tools/EyeDropperTool.js

@@ -6,6 +6,15 @@ class EyeDropperTool extends Tool {
         super(name, options);
 
         Events.on('click', this.mainButton, switchFunction, this);
+
+        this.resetTutorial();
+        this.addTutorialTitle("Eyedropper tool");
+        this.addTutorialKey("E", " to select the lasso selection tool");
+        this.addTutorialKey("Left drag", " to preview the picked colour");
+        this.addTutorialKey("Aòt + left drag", " to preview the picked colour");
+        this.addTutorialKey("Left click", " to select a colour");
+        this.addTutorialKey("Alt + click", " to select a colour");
+        this.addTutorialImg("eyedropper-tutorial.gif");
     }
 
     onStart(mousePos, target) {

js/tools/FillTool.js

@@ -3,6 +3,12 @@ class FillTool extends DrawingTool {
         super(name, options);
 
         Events.on('click', this.mainButton, switchFunction, this);
+
+        this.resetTutorial();
+        this.addTutorialTitle("Fill tool");
+        this.addTutorialKey("F", " to select the fill tool");
+        this.addTutorialKey("Left click", " to fill a contiguous area");
+        this.addTutorialImg("fill-tutorial.gif");
     }
 
     onStart(mousePos, target) {

js/tools/LassoSelectionTool.js

@@ -1,9 +1,24 @@
+/** TODO
+ *  - Move the selection only if the user started dragging inside of it
+ */
 class LassoSelectionTool extends SelectionTool {
     currentPixels = [];
 
     constructor (name, options, switchFunc, moveTool) {
         super(name, options, switchFunc, moveTool);
         Events.on('click', this.mainButton, switchFunc, this);
+
+        this.resetTutorial();
+        this.addTutorialTitle("Lasso selection tool");
+        this.addTutorialKey("Q", " to select the lasso selection tool");
+        this.addTutorialKey("Left drag", " to select an area");
+        this.addTutorialKey("Left drag", " to move a selection");
+        this.addTutorialKey("Esc", " to cancel a selection")
+        this.addTutorialKey("Click", " outside the selection to cancel it")
+        this.addTutorialKey("CTRL+C", " to copy a selection")
+        this.addTutorialKey("CTRL+V", " to paste a selection")
+        this.addTutorialKey("CTRL+X", " to cut a selection")
+        this.addTutorialImg("lassoselect-tutorial.gif");
     }
 
     onStart(mousePos, mouseTarget) {

js/tools/MagicWandTool.js

@@ -3,6 +3,17 @@ class MagicWandTool extends SelectionTool {
     constructor (name, options, switchFunc, moveTool) {
         super(name, options, switchFunc, moveTool);
         Events.on('click', this.mainButton, switchFunc, this);
+
+        this.resetTutorial();
+        this.addTutorialTitle("Magic wand tool");
+        this.addTutorialKey("W", " to select the magic wand tool");
+        this.addTutorialKey("Left click", " to select a contiguous area");
+        this.addTutorialKey("Esc", " to cancel a selection");
+        this.addTutorialKey("Click", " outside the selection to cancel it");
+        this.addTutorialKey("CTRL+C", " to copy a selection");
+        this.addTutorialKey("CTRL+V", " to paste a selection");
+        this.addTutorialKey("CTRL+X", " to cut a selection");
+        this.addTutorialImg("magicwand-tutorial.gif");
     }
 
     onEnd(mousePos, mouseTarget) {

js/tools/PanTool.js

@@ -4,6 +4,13 @@ class PanTool extends Tool {
         super(name, options);
 
         Events.on('click', this.mainButton, switchFunction, this);
+
+        this.resetTutorial();
+        this.addTutorialTitle("Pan tool");
+        this.addTutorialKey("P", " to select the lasso selection tool");
+        this.addTutorialKey("Left drag", " to move the viewport");
+        this.addTutorialKey("Space + drag", " to move the viewport");
+        this.addTutorialImg("pan-tutorial.gif");
     }
 
     onStart(mousePos, target) {

js/tools/RectangularSelectionTool.js

@@ -3,6 +3,18 @@ class RectangularSelectionTool extends SelectionTool {
     constructor (name, options, switchFunc, moveTool) {
         super(name, options, switchFunc, moveTool);
         Events.on('click', this.mainButton, switchFunc, this);
+
+        this.resetTutorial();
+        this.addTutorialTitle("Rectangular selection tool");
+        this.addTutorialKey("M", " to select the rectangular selection tool");
+        this.addTutorialKey("Left drag", " to select a rectangular area");
+        this.addTutorialKey("Left drag", " to move a selection");
+        this.addTutorialKey("Esc", " to cancel a selection");
+        this.addTutorialKey("Click", " outside the selection to cancel it");
+        this.addTutorialKey("CTRL+C", " to copy a selection");
+        this.addTutorialKey("CTRL+V", " to paste a selection");
+        this.addTutorialKey("CTRL+X", " to cut a selection");
+        this.addTutorialImg("rectselect-tutorial.gif");
     }
 
     onStart(mousePos, mouseTarget) {