web: Parenthesis completion when typing normally

This commit is contained in:
bakk 2021-06-05 01:13:38 +02:00
parent b64f607b99
commit ebd4f10987

View File

@ -51,8 +51,7 @@
const [highlighted, offset] = highlight(text); const [highlighted, offset] = highlight(text);
const prevCursorPos = inputElement.selectionStart; const prevCursorPos = inputElement.selectionStart;
setHtml(highlighted); setHtml(highlighted);
inputElement.selectionStart = prevCursorPos + offset; setCaret(prevCursorPos + offset);
inputElement.selectionEnd = inputElement.selectionStart;
} }
function setHtml(html: string) { function setHtml(html: string) {
@ -68,6 +67,15 @@
return highlightedTextElement.innerHTML; return highlightedTextElement.innerHTML;
} }
function setCaret(pos: number) {
inputElement.selectionStart = pos;
inputElement.selectionEnd = inputElement.selectionStart;
}
function offsetCaret(offset: number) {
setCaret(inputElement.selectionStart + offset);
}
function calculate( function calculate(
kalk: Kalk, kalk: Kalk,
input: string input: string
@ -179,9 +187,15 @@
} }
} }
function handleInput(event: Event) { function handleInput(e: Event) {
const event = e as InputEvent;
const target = event.target as HTMLInputElement; const target = event.target as HTMLInputElement;
setText(target.value == "\n" ? "" : target.value); setText(target.value == "\n" ? "" : target.value);
if (event.data == "(") {
insertText(")");
offsetCaret(-1);
}
} }
function handleTouchLine(event: Event) { function handleTouchLine(event: Event) {
@ -208,8 +222,7 @@
function handleArrowClick(event: Event, left: boolean) { function handleArrowClick(event: Event, left: boolean) {
const length = inputElement.value.length; const length = inputElement.value.length;
const selection = inputElement.selectionEnd + (left ? -1 : 1); const selection = inputElement.selectionEnd + (left ? -1 : 1);
inputElement.selectionEnd = Math.min(Math.max(selection, 0), length); setCaret(Math.min(Math.max(selection, 0), length));
inputElement.selectionStart = inputElement.selectionEnd;
inputElement.focus({ preventScroll: true }); inputElement.focus({ preventScroll: true });
} }
@ -243,8 +256,7 @@
"end" "end"
); );
setText(inputElement.value); setText(inputElement.value);
inputElement.selectionStart += offset; offsetCaret(offset);
inputElement.selectionEnd = inputElement.selectionStart;
inputElement.focus({ preventScroll: true }); inputElement.focus({ preventScroll: true });
} }
@ -257,7 +269,7 @@
let result = input; let result = input;
let offset = 0; let offset = 0;
result = result.replace( result = result.replace(
/(?<html>[<>&]|(\n\s*\}?|\s+))|(?<op>([+\-/*%^!≈]|if|otherwise)|(?<identifier>[^!-@\s_|^⌊⌋⌈⌉≈\[\]\{\}≠≥≤]+(_\d+)?))/g, /(?<html>[<>&]|(\n\s*\}?|\s+))|(?<op>([+\-/*%^!≈]|if|otherwise)|(?<identifier>[^!-@\s_|^⌊⌋⌈⌉≈\[\]\{\}≠≥≤]+(_\d+)?)\(?)/g,
(substring, _, html, _2, op, identifier) => { (substring, _, html, _2, op, identifier) => {
if (html) { if (html) {
if (substring == "<") return "&lt;"; if (substring == "<") return "&lt;";
@ -277,22 +289,34 @@
} }
if (identifier) { if (identifier) {
let newSubstring: string = substring; let substringWithoutParen = substring.endsWith("(")
switch (substring) { ? substring.slice(0, -1)
: substring;
let newSubstring: string = substringWithoutParen;
let addParen = false;
switch (substringWithoutParen) {
case "sqrt": { case "sqrt": {
newSubstring = "√"; newSubstring = "√";
break; break;
} }
case "sum": { case "sum": {
newSubstring = "∑"; newSubstring = "∑";
addParen = true;
break; break;
} }
case "prod": { case "prod": {
newSubstring = "∏"; newSubstring = "∏";
addParen = true;
break;
}
case "integral": {
newSubstring = "∫";
addParen = true;
break; break;
} }
case "integrate": { case "integrate": {
newSubstring = "∫"; newSubstring = "∫";
addParen = true;
break; break;
} }
case "pi": { case "pi": {
@ -318,8 +342,16 @@
} }
offset -= substring.length - newSubstring.length; offset -= substring.length - newSubstring.length;
let parenthesis = "";
if (substring.endsWith("(")) {
parenthesis = "(";
offset += 1;
} else if (addParen) {
parenthesis = "()";
offset += 1;
}
return `<span style="color: ${identifiercolor}">${newSubstring}</span>`; return `<span style="color: ${identifiercolor}">${newSubstring}</span>${parenthesis}`;
} }
if (op) { if (op) {