Added tool size in the top bar

css/_main-menu.scss

@@ -123,9 +123,16 @@ li#editor-info {
 			padding: 5px;
 			color:$basetext;
 		}
-		input[type=text] {
+		input[type=number] {
+			appearance:none;
+			-moz-appearance: text;
 			width:25px;
 			height:15px;
 		}
+		input::-webkit-outer-spin-button,
+		input::-webkit-inner-spin-button {
+			-webkit-appearance: none;
+			margin: 0;
+		}
 	}
 }

js/InputComponents.js

@@ -16,6 +16,19 @@ const InputComponents = (() => {
             event.target.classList.add("checked");
     }
 
+    function createNumber(id, label) {
+        let element = document.createElement("label");
+        let inputEl = document.createElement("input");
+
+        inputEl.id = id;
+        inputEl.type = "number";
+        element.innerHTML = label;
+
+        element.appendChild(inputEl);
+
+        return element;
+    }
+
     function createCheckbox(id, label) {
         let element = document.createElement("div");
         let inner = document.createElement("div");
@@ -54,6 +67,7 @@ const InputComponents = (() => {
 
     return {
         updated,
-        createCheckbox
+        createCheckbox,
+        createNumber
     }
 })();

js/Tool.js

@@ -21,8 +21,6 @@ class Tool {
 
 	// HTML elements
 	mainButton = undefined;
-	biggerButton = undefined;
-	smallerButton = undefined;
 	brushPreview = document.getElementById("brush-preview");
 
 	// Tool tutorial
@@ -35,8 +33,6 @@ class Tool {
 		this.cursorType = options;
 		
 		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
@@ -60,12 +56,7 @@ class Tool {
 	showTutorial() {
 		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 {
@@ -101,6 +92,7 @@ class Tool {
 			this.mainButton.parentElement.classList.add("selected");
 		this.isSelected = true;
 
+		// Update the cursor
 		switch (this.cursorType.type) {
 			case 'html':
 				currFile.canvasView.style.cursor = 'none';
@@ -112,6 +104,9 @@ class Tool {
 			default:
 				break;
 		}
+
+		// Reset the topbar
+		TopMenuModule.resetInfos();
 	}
 
 	updateCursor() {
@@ -168,22 +163,4 @@ class Tool {
 	onEnd(mousePos, mouseTarget) {
 		this.endMousePos = mousePos;
 	}
-
-	increaseSize() {
-		if (this.currSize < 128) {
-			this.currSize++;
-			this.updateCursor();
-		}
-	}
-
-	decreaseSize() {
-		if (this.currSize > 1) {
-			this.currSize--;
-			this.updateCursor();
-		}
-	}
-
-	get size() {
-		return this.currSize;
-	}
 }

js/TopMenuModule.js

@@ -1,6 +1,8 @@
 const TopMenuModule = (() => {
 
     const mainMenuItems = document.getElementById('main-menu').children;
+    let infoList = document.getElementById('editor-info');
+    let infoElements = {};
 
     initMenu();
 
@@ -106,7 +108,27 @@ const TopMenuModule = (() => {
         }
     }
 
+    function resetInfos() {
+        infoList.innerHTML = "<ul></ul>";
+    }
+
+    function updateField(fieldId, value) {
+        document.getElementById(fieldId).value = value;
+    }
+
+    function addInfoElement(fieldId, field) {
+        let liEl = document.createElement("li");
+
+        infoElements[fieldId] = field;
+        liEl.appendChild(field);
+
+        infoList.firstChild.appendChild(liEl);
+    }
+
     return {
-        closeMenu
+        closeMenu,
+        updateField,
+        addInfoElement,
+        resetInfos
     }
 })();

js/pixel-editor.js

@@ -15,6 +15,10 @@
 //=include Settings.js
 //=include EditorState.js
 
+/** MENUS **/
+//=include FileManager.js
+//=include TopMenuModule.js
+
 /** COLOR-RELATED **/
 //=include Color.js
 //=include ColorPicker.js
@@ -57,8 +61,6 @@
 
 /** STARTUP AND FILE MANAGEMENT **/
 //=include Startup.js
-//=include FileManager.js
-//=include TopMenuModule.js
 
 /** HTML INPUT EVENTS **/
 //=include Input.js

js/tools/ResizableTool.js

@@ -2,9 +2,32 @@ class ResizableTool extends DrawingTool {
     startResizePos = undefined;
     currSize = 1;
 	prevSize = 1;
+    toolSizeInput = undefined;
+
+    biggerButton = undefined;
+	smallerButton = undefined;
     
     constructor(name, options, switchFunc) {
         super(name, options, switchFunc);
+
+        this.biggerButton = document.getElementById(name + "-bigger-button");
+		this.smallerButton = document.getElementById(name + "-smaller-button");
+    }
+
+    onSelect(mousePos) {
+        super.onSelect(mousePos);
+
+        if (this.toolSizeInput == undefined) {
+            this.toolSizeInput = InputComponents.createNumber(this.name + "-input", "Tool size");
+            Events.on("change", this.toolSizeInput.getElementsByTagName("input")[0], this.updateSize.bind(this));
+        }
+        TopMenuModule.addInfoElement(this.name + "-input", this.toolSizeInput);
+        TopMenuModule.updateField(this.name + "-input", this.currSize);
+    }
+
+    updateSize(event) {
+        let value = event.target.value;
+        this.currSize = value;
     }
 
     onRightStart(mousePos, mouseEvent) {
@@ -29,4 +52,24 @@ class ResizableTool extends DrawingTool {
     onRightEnd(mousePos, mouseEvent) {
         
     }
+
+    increaseSize() {
+		if (this.currSize < 128) {
+			this.currSize++;
+			this.updateCursor();
+            TopMenuModule.updateField(this.name + "-input", this.currSize);
+		}
+	}
+
+	decreaseSize() {
+		if (this.currSize > 1) {
+			this.currSize--;
+			this.updateCursor();
+            TopMenuModule.updateField(this.name + "-input", this.currSize);
+		}
+	}
+
+	get size() {
+		return this.currSize;
+	}
 }

views/main-menu.hbs

@@ -68,7 +68,7 @@
 
 	<li id="editor-info">
 		<ul>
-			<li><label><span>Tool size: </span><input type="text" width="10px"/></label></li>
+			<li><label>Tool size: <input type="number"/></label></li>
 			<li>{{> checkbox}}</li>
 		</ul>
 	</li>