From e905de4b0cf8a92c546f5ed40324c6ebb8da02e6 Mon Sep 17 00:00:00 2001 From: Christian7573 Date: Fri, 4 Jun 2021 20:36:44 -0500 Subject: [PATCH] Fixed automatic saving; Added min-max; Fixed bugs --- src/assets/xterm_config/functionality.js | 18 ++++++++++++------ src/assets/xterm_config/index.html | 2 +- .../xterm_config/xterm_advanced_options.js | 2 ++ src/assets/xterm_config/xterm_color_theme.js | 5 ++++- src/assets/xterm_config/xterm_defaults.js | 1 - .../xterm_config/xterm_general_options.js | 3 +++ src/client/wetty/term.ts | 2 ++ src/client/wetty/term/confiruragtion/editor.ts | 16 +++++++--------- 8 files changed, 31 insertions(+), 18 deletions(-) diff --git a/src/assets/xterm_config/functionality.js b/src/assets/xterm_config/functionality.js index 8a0f2ad..cadc65e 100644 --- a/src/assets/xterm_config/functionality.js +++ b/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 optionBoolSet(value) { this.el.querySelector("input").value = value ? "true" : "false"; } +function optionBoolGet() { return this.el.querySelector("input").checked; } +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; - else if (option.nullable === true && option.type === "number" && newValue < 0) newValue = undefined; + if (option.nullable === true && ((option.type === "text" && newValue === "") || ( option.type === "number" && newValue < 0))) return; 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); } }); diff --git a/src/assets/xterm_config/index.html b/src/assets/xterm_config/index.html index 1a5953e..16cdf97 100644 --- a/src/assets/xterm_config/index.html +++ b/src/assets/xterm_config/index.html @@ -43,7 +43,7 @@

- +
diff --git a/src/assets/xterm_config/xterm_advanced_options.js b/src/assets/xterm_config/xterm_advanced_options.js index 147a826..c99bda7 100644 --- a/src/assets/xterm_config/xterm_advanced_options.js +++ b/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", diff --git a/src/assets/xterm_config/xterm_color_theme.js b/src/assets/xterm_config/xterm_color_theme.js index 2017b7c..7c1e44f 100644 --- a/src/assets/xterm_config/xterm_color_theme.js +++ b/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); diff --git a/src/assets/xterm_config/xterm_defaults.js b/src/assets/xterm_config/xterm_defaults.js index 33e10aa..5d7dbb7 100644 --- a/src/assets/xterm_config/xterm_defaults.js +++ b/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, diff --git a/src/assets/xterm_config/xterm_general_options.js b/src/assets/xterm_config/xterm_general_options.js index 22df0a3..c4acd77 100644 --- a/src/assets/xterm_config/xterm_general_options.js +++ b/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", diff --git a/src/client/wetty/term.ts b/src/client/wetty/term.ts index 1a1582e..b98d89d 100644 --- a/src/client/wetty/term.ts +++ b/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; } diff --git a/src/client/wetty/term/confiruragtion/editor.ts b/src/client/wetty/term/confiruragtion/editor.ts index e0c1495..8b1e19b 100644 --- a/src/client/wetty/term/confiruragtion/editor.ts +++ b/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); - term.resizeTerm(); - }); - // editor.classList.remove('error'); + if (!updated.wetty_fit_terminal && updated.xterm.cols != null && updated.xterm.rows != null) term.resize(updated.xterm.cols, updated.xterm.rows); + term.resizeTerm(); + 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); }); }