From eeed4d82d3e67d175d33b465bfe11143f6d5b67e Mon Sep 17 00:00:00 2001
From: Csongor Zih <daemon.onwave@gmail.com>
Date: Tue, 2 Aug 2022 01:19:07 +0200
Subject: [PATCH] Some QOL and styling improvements

---
 css/styles.css                           |  6 +++---
 css/toolOptionPanel.css                  | 10 ++++++++++
 src/editTH2.ts                           |  1 +
 src/objectSettings/customToolbarInput.ts |  5 +++++
 src/toolOptionPanel.ts                   | 21 +++++++++------------
 5 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 274f4dc..791f5f9 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -26,15 +26,15 @@ body, input, button, textarea, label {
 }
 
 input, select {
-	border: 1px solid #aaa;
-	outline: none;
+	/* border: 1px solid #aaa;
+	outline: none; */
 	padding: 0 4px;
 	height: 22px;
 	box-shadow: none;
 }
 
 .hidden {
-	display:none;
+	display: none;
 }
 
 .zoom-in {
diff --git a/css/toolOptionPanel.css b/css/toolOptionPanel.css
index 05c4dda..67696ed 100644
--- a/css/toolOptionPanel.css
+++ b/css/toolOptionPanel.css
@@ -104,6 +104,16 @@
 	width: 100%;
 }
 
+.toolOptionPanel .option-section.vertical {
+	display: flex;
+	flex-direction: column;
+}
+
+.toolOptionPanel .option-section textarea {
+	overflow-wrap: normal;
+	white-space: pre;
+}
+
 .toolOptionPanel .toolOptionResetButton {
 	position: absolute;
 	width: 16px;
diff --git a/src/editTH2.ts b/src/editTH2.ts
index 67a26c8..d1e1c78 100644
--- a/src/editTH2.ts
+++ b/src/editTH2.ts
@@ -131,6 +131,7 @@ export default {
 		const selection = pg.selection.getSelectedItems();
 		for (const item of selection)
 			item.locked = !item.locked;
+		pg.undo.snapshot("Toggle locked");
 	},
 	
 	randomizeRotation: function() {
diff --git a/src/objectSettings/customToolbarInput.ts b/src/objectSettings/customToolbarInput.ts
index 08b6c02..0e3161e 100644
--- a/src/objectSettings/customToolbarInput.ts
+++ b/src/objectSettings/customToolbarInput.ts
@@ -21,6 +21,11 @@ export function constructSelect(element: HTMLDivElement, selectedVal: string, im
 		closeAllSelect(this.parentElement);
 		this.parentElement.classList.toggle("open");
 	});
+
+	input.addEventListener("keypress", e => {
+		if (e.key === "Enter") element.classList.remove("open");
+	})
+	input.addEventListener("blur", e => element.classList.remove("open"));
 }
 
 function constructOptionItem(option: HTMLOptionElement, imageRoot?: string) {
diff --git a/src/toolOptionPanel.ts b/src/toolOptionPanel.ts
index aa7c064..a90452d 100644
--- a/src/toolOptionPanel.ts
+++ b/src/toolOptionPanel.ts
@@ -2,11 +2,13 @@ import "jquery-ui/ui/widgets/draggable";
 import pg from "../src/init";
 import {constructSelect} from "../src/objectSettings/customToolbarInput";
 
+type ComponentType = "int" | "list" | "float" | "text" | "button" | "boolean" |
+"nullable-boolean" | "title" | "customList" | "textarea";
+
 type component = {
-	type?:	"int" | "list" | "float" | "text" | "button" | "boolean" |
-			"nullable-boolean" | "title" | "customList" | "textarea",
-	min?: any,
-	max?: any,
+	type?: ComponentType
+	min?: number,
+	max?: number,
 	label?: string,
 	options?: string[],
 	optionValuePairs?: [string, string|number][],
@@ -69,14 +71,8 @@ export default {
 				break;
 			case 'float':
 			case 'int':
-				let minAttr = '';
-				if(comp.min != undefined && comp.type == 'int') {
-					minAttr = ` min="${parseInt(comp.min)}"`;
-					
-				} else if(comp.min != undefined && comp.type == 'float') {
-					minAttr = ` min="${parseFloat(comp.min)}"`;
-				}
-				$input = jQuery(`<input type="number" data-type="${comp.type}" name="${key}" value="${options[key]}"${minAttr}>`);
+				$input = jQuery(`<input type="number" data-type="${comp.type}" name="${key}" value="${options[key]}">`);
+				$input.attr("min", comp.min);
 
 				break;
 			case 'list':
@@ -122,6 +118,7 @@ export default {
 				break;
 			case 'textarea':
 				$input = jQuery(`<textarea name="${key}">${options[key] ?? ""}</textarea>`);
+				$optionSection.addClass('vertical');
 				break;
 			}