monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-09-05 22:28:01 +08:00
Code Issues Projects Releases Packages Wiki Activity

fix(caret): incorrect width calculation in zen mode

Browse source
This commit is contained in:
Miodec 2025-04-02 22:17:38 +02:00
parent 115b0d7292
commit d29e792e92
2 changed files with 10 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/ts/test/caret.ts
View file

@ -51,7 +51,7 @@ function getTargetPositionLeft(
fullWidthCaret: boolean,
isLanguageRightToLeft: boolean,
activeWordElement: HTMLElement,
underscoreAdded: boolean,
activeWordEmpty: boolean,
currentWordNodeList: NodeListOf<Element>,
fullWidthCaretWidth: number,
wordLen: number,
@ -101,7 +101,7 @@ function getTargetPositionLeft(
}
}
result = activeWordElement.offsetLeft + positionOffsetToWord;
if (underscoreAdded && isLanguageRightToLeft)
if (activeWordEmpty && isLanguageRightToLeft)
result += activeWordElement.offsetWidth;
} else {
const wordsWrapperWidth =
@ -140,13 +140,10 @@ export async function updatePosition(noAnim = false): Promise<void> {
const inputLen = splitIntoCharacters(TestInput.input.current).length;
if (Config.mode === "zen") wordLen = inputLen;
const activeWordEl = document?.querySelector("#words .active") as HTMLElement;
//insert temporary character so the caret will work in zen mode
const activeWordEmpty = activeWordEl?.children.length === 0;
if (activeWordEmpty) {
activeWordEl.insertAdjacentHTML(
"beforeend",
'<letter style="opacity: 0;">_</letter>'
);
let activeWordEmpty = false;
if (Config.mode === "zen") {
wordLen = inputLen;
if (inputLen === 0) activeWordEmpty = true;
}
const currentWordNodeList = activeWordEl?.querySelectorAll("letter");
@ -254,9 +251,6 @@ export async function updatePosition(noAnim = false): Promise<void> {
});
}
}
if (activeWordEmpty) {
activeWordEl?.replaceChildren();
}
}
export function show(noAnim = false): void {

6
frontend/src/ts/test/test-ui.ts
View file

@ -423,7 +423,9 @@ export function showWords(): void {
}
export function appendEmptyWordElement(): void {
$("#words").append("<div class='word'><letter>ㅤ</letter></div>");
$("#words").append(
"<div class='word'><letter class='invisible'>_</letter></div>"
);
}
const posUpdateLangList = ["japanese", "chinese", "korean"];
@ -766,7 +768,7 @@ export async function updateActiveWordLetters(
}
}
if (TestInput.input.current === "") {
ret += `<letter>ㅤ</letter>`;
ret += `<letter class='invisible'>_</letter>`;
}
} else {
let correctSoFar = false;