From cdabbb4a5cfad650af8ffaeac0712a0352bdeb83 Mon Sep 17 00:00:00 2001
From: Nicola <47360416+unsettledgames@users.noreply.github.com>
Date: Mon, 31 Jan 2022 23:12:28 +0100
Subject: [PATCH] Added tool size in the top bar
---
css/_main-menu.scss | 9 +++++++-
js/InputComponents.js | 16 ++++++++++++++-
js/Tool.js | 31 ++++------------------------
js/TopMenuModule.js | 24 +++++++++++++++++++++-
js/pixel-editor.js | 6 ++++--
js/tools/ResizableTool.js | 43 +++++++++++++++++++++++++++++++++++++++
views/main-menu.hbs | 2 +-
7 files changed, 98 insertions(+), 33 deletions(-)
diff --git a/css/_main-menu.scss b/css/_main-menu.scss
index 73c5352..ea7181f 100644
--- a/css/_main-menu.scss
+++ b/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;
+ }
}
}
\ No newline at end of file
diff --git a/js/InputComponents.js b/js/InputComponents.js
index bc75392..add8e9b 100644
--- a/js/InputComponents.js
+++ b/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
}
})();
diff --git a/js/Tool.js b/js/Tool.js
index 647cf77..1f5345d 100644
--- a/js/Tool.js
+++ b/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;
- }
}
\ No newline at end of file
diff --git a/js/TopMenuModule.js b/js/TopMenuModule.js
index b39b054..3b70d64 100644
--- a/js/TopMenuModule.js
+++ b/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 = "";
+ }
+
+ 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
}
})();
\ No newline at end of file
diff --git a/js/pixel-editor.js b/js/pixel-editor.js
index 27d6f1c..659a987 100644
--- a/js/pixel-editor.js
+++ b/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
diff --git a/js/tools/ResizableTool.js b/js/tools/ResizableTool.js
index b8d3335..8bcb5a7 100644
--- a/js/tools/ResizableTool.js
+++ b/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;
+ }
}
\ No newline at end of file
diff --git a/views/main-menu.hbs b/views/main-menu.hbs
index 1457cc1..f40d9b1 100644
--- a/views/main-menu.hbs
+++ b/views/main-menu.hbs
@@ -68,7 +68,7 @@