Fixed automatic saving; Added min-max; Fixed bugs

src/assets/xterm_config/functionality.js

@@ -2,8 +2,10 @@ function optionGenericGet() { return this.el.querySelector("input").value; }
 function optionGenericSet(value) { this.el.querySelector("input").value = value; }
 function optionEnumGet() { return this.el.querySelector("select").value; }
 function optionEnumSet(value) { this.el.querySelector("select").value = value; }
-function optionBoolGet() { return this.el.querySelector("input").value === "true"; }
+function optionBoolGet() { return this.el.querySelector("input").checked; }
-function optionBoolSet(value) { this.el.querySelector("input").value = value ? "true" : "false"; }
+function optionBoolSet(value) { this.el.querySelector("input").checked = value; }
+function optionNumberGet() { return (this.float === true ? parseFloat : parseInt)(this.el.querySelector("input").value); }
+function optionNumberSet(value) { this.el.querySelector("input").value = value; }
 
 const allOptions = [];
 function inflateOptions(optionsSchema) {
@@ -47,6 +49,11 @@ function inflateOptions(optionsSchema) {
 
 			case "number":
 				el = numberOption.cloneNode(true);
+				if (option.float === true) el.querySelector("input").setAttribute("step", "0.001");
+				option.get = optionNumberGet.bind(option);
+				option.set = optionNumberSet.bind(option);
+				if (typeof option.min === "number") el.querySelector("input").setAttribute("min", option.min.toString());
+				if (typeof option.max === "number") el.querySelector("input").setAttribute("max", option.max.toString());
 				break;
 
 			case "color":
@@ -98,17 +105,16 @@ function saveConfig() {
 	const newConfig = {};
 	allOptions.forEach(option => {
 		let newValue = option.get();
-		if (option.nullable === true && option.type === "text" && newValue === "") newValue = undefined;
+		if (option.nullable === true && ((option.type === "text" && newValue === "") || ( option.type === "number" && newValue < 0))) return;
-		else if (option.nullable === true && option.type === "number" && newValue < 0) newValue = undefined;
 		if (option.json === true && option.type === "text") newValue = JSON.parse(newValue);
 		setItem(newConfig, option.path, newValue);
 	});
 	window.wetty_save_config(newConfig);
 };
 
-window.addEventListener("load", () => {
+window.addEventListener("input", () => {
 	const els = document.querySelectorAll("input, select");
-	for (let i = 0; i < els.length; i++) {
+	for (let i = 0; i < els.length; i += 1) {
 		els[i].addEventListener("input", saveConfig);
 	}
 });

src/assets/xterm_config/index.html

@@ -43,7 +43,7 @@
 					<b class="title"></b><br>
 					<span class="desc"></span>
 				</p>
-				<input type="number" size="10" step="0.01" />
+				<input type="number" size="10" />
 			</div>
 			<div class="error_reporting"></div>
 		</div>

src/assets/xterm_config/xterm_advanced_options.js

@@ -48,6 +48,7 @@ window.inflateOptions([
 		name: "Line Height",
 		description: "Line height, multiplied by the font size to get the height of terminal rows.",
 		path: ["xterm", "lineHeight"],
+		float: true,
 	},
 	{
 		type: "enum",
@@ -73,6 +74,7 @@ window.inflateOptions([
 		name: "Forced Contrast Ratio",
 		description: "Miminum contrast ratio for terminal text. This will alter the foreground color dynamically to ensure the ratio is met. Goes from 1 (do nothing) to 21 (strict black and white).",
 		path: ["xterm", "minimumContrastRatio"],
+		float: true,
 	},
 	{
 		type: "enum",

src/assets/xterm_config/xterm_color_theme.js

@@ -9,6 +9,9 @@ const selectionColorOpacityOption = {
 	name: "Selection Color Opacity",
 	description: "Opacity of the selection highlight. A value between 1 (fully opaque) and 0 (fully transparent).",
 	path: ["wetty_void"],
+	float: true,
+	min: 0,
+	max: 1,
 };
 
 window.inflateOptions([
@@ -131,7 +134,7 @@ window.inflateOptions([
 ]);
 
 selectionColorOption.get = function() {
-	return this.el.querySelector("input").value + (selectionColorOpacityOption.el.querySelector("input").value * 255).toString(16);
+	return this.el.querySelector("input").value + Math.round(selectionColorOpacityOption.el.querySelector("input").value * 255).toString(16);
 };
 selectionColorOption.set = function(value) {
 	this.el.querySelector("input").value = value.substring(0, 7);

src/assets/xterm_config/xterm_defaults.js

@@ -37,7 +37,6 @@ window.loadOptions({
 		windowOptions: {},
 		windowsMode: false,
 		wordSeparator: ' ()[]{}\',"`',
-		altClickMovesCursor: true,
 		convertEol: false,
 		termName: 'xterm',
 		cancelEvents: false,

src/assets/xterm_config/xterm_general_options.js

@@ -10,6 +10,7 @@ window.inflateOptions([
 		name: "Font Size",
 		description: "The font size in CSS pixels for terminal text.",
 		path: ["xterm", "fontSize"],
+		min: 4,
 	},
 	{
 		type: "enum",
@@ -75,6 +76,7 @@ window.inflateOptions([
 		name: "Scroll Sensitivity",
 		description: "The scroll speed multiplier for regular scrolling.",
 		path: ["xterm", "scrollSensitivity"],
+		float: true,
 	},
 	{
 		type: "enum",
@@ -88,6 +90,7 @@ window.inflateOptions([
 		name: "Fast Scroll Multiplier",
 		description: "The scroll speed multiplier used for fast scrolling.",
 		path: ["xterm", "fastScrollSensitivity"],
+		float: true,
 	},
 	{
 		type: "number",

src/client/wetty/term.ts

@@ -17,11 +17,13 @@ export function terminal(socket: typeof Socket): Term | undefined {
   term.loadAddon(fitAddon);
   term.open(termElement);
   term.resizeTerm = () => {
+    term.refresh(0, term.rows - 1);
     if (shouldFitTerm()) fitAddon.fit();
     socket.emit('resize', { cols: term.cols, rows: term.rows });
   };
   configureTerm(term);
   window.onresize = term.resizeTerm;
+  (window as any).wetty_term = term;
 
   return term;
 }

src/client/wetty/term/confiruragtion/editor.ts

@@ -1,28 +1,26 @@
 import type { Term } from '../../shared/type';
-// import { editor } from '../../../shared/elements';
+import { editor } from '../../../shared/elements';
 
 export const onInput = (term: Term, updated: any) => {
   try {
     const updatedConf = JSON.stringify(updated, null, 2);
     if (localStorage.options === updatedConf) return;
 	setOptions(term, updated);
-	requestAnimationFrame(() => {
+    if (!updated.wetty_fit_terminal && updated.xterm.cols != null && updated.xterm.rows != null) term.resize(updated.xterm.cols, updated.xterm.rows);
-	  if (!updated.wetty_fit_terminal && updated.xterm.cols != null && updated.xterm.rows != null) term.resize(updated.xterm.cols, updated.xterm.rows);
+    term.resizeTerm();
-	  term.resizeTerm();
+    editor.classList.remove('error');
-	});
-    // editor.classList.remove('error');
     localStorage.options = updatedConf;
   } catch (e) {
+    console.error("Configuration Error");
     console.error(e);
-    // skip
+    editor.classList.add('error');
-    // editor.classList.add('error');
   }
 };
 
 export function setOptions(term: Term, options: any) {
   Object.keys(options.xterm).forEach(key => {
     if (key === "cols" || key === "rows") return;
-    const value = options[key];
+    const value = options.xterm[key];
     term.setOption(key, value);
   });
 }