Finished tooltorials

This commit is contained in:
Nicola 2022-01-30 00:09:43 +01:00
parent 428ffe80f8
commit edf5d77ffd
15 changed files with 78 additions and 3 deletions

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 676 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 300 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 757 KiB

View File

@ -41,6 +41,7 @@ class Tool {
if (this.mainButton != undefined) { if (this.mainButton != undefined) {
// Timer to show the tutorial // Timer to show the tutorial
Events.on("mouseenter", this.mainButton, function(){ Events.on("mouseenter", this.mainButton, function(){
this.setTutorial();
this.tutorialTimer = setTimeout(this.showTutorial.bind(this), 750) this.tutorialTimer = setTimeout(this.showTutorial.bind(this), 750)
}.bind(this)); }.bind(this));
@ -57,8 +58,19 @@ class Tool {
} }
showTutorial() { showTutorial() {
this.setTutorial(); let tutorialRect = this.toolTutorial.getBoundingClientRect();
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.style.top = this.mainButton.getBoundingClientRect().top - 48 + "px";
}
this.toolTutorial.className = "fade-in"; this.toolTutorial.className = "fade-in";
} }
hideTutorial() { hideTutorial() {

View File

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

View File

@ -6,6 +6,15 @@ class EyeDropperTool extends Tool {
super(name, options); super(name, options);
Events.on('click', this.mainButton, switchFunction, this); 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) { onStart(mousePos, target) {

View File

@ -3,6 +3,12 @@ class FillTool extends DrawingTool {
super(name, options); super(name, options);
Events.on('click', this.mainButton, switchFunction, this); 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) { onStart(mousePos, target) {

View File

@ -1,9 +1,24 @@
/** TODO
* - Move the selection only if the user started dragging inside of it
*/
class LassoSelectionTool extends SelectionTool { class LassoSelectionTool extends SelectionTool {
currentPixels = []; currentPixels = [];
constructor (name, options, switchFunc, moveTool) { constructor (name, options, switchFunc, moveTool) {
super(name, options, switchFunc, moveTool); super(name, options, switchFunc, moveTool);
Events.on('click', this.mainButton, switchFunc, this); 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) { onStart(mousePos, mouseTarget) {

View File

@ -3,6 +3,17 @@ class MagicWandTool extends SelectionTool {
constructor (name, options, switchFunc, moveTool) { constructor (name, options, switchFunc, moveTool) {
super(name, options, switchFunc, moveTool); super(name, options, switchFunc, moveTool);
Events.on('click', this.mainButton, switchFunc, this); 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) { onEnd(mousePos, mouseTarget) {

View File

@ -4,6 +4,13 @@ class PanTool extends Tool {
super(name, options); super(name, options);
Events.on('click', this.mainButton, switchFunction, this); 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) { onStart(mousePos, target) {

View File

@ -3,6 +3,18 @@ class RectangularSelectionTool extends SelectionTool {
constructor (name, options, switchFunc, moveTool) { constructor (name, options, switchFunc, moveTool) {
super(name, options, switchFunc, moveTool); super(name, options, switchFunc, moveTool);
Events.on('click', this.mainButton, switchFunc, this); 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) { onStart(mousePos, mouseTarget) {