monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-03-03 18:25:02 +08:00
Code Issues Projects Releases Packages Wiki Activity

refactor(caret): add lastwordelement, optimise top pos, letter width, letter height (#5567)

Browse source
This commit is contained in:
Jack 2024-07-05 19:18:15 +02:00 committed by GitHub
parent ffc47e861d
commit aac44aead3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 28 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,6 +4,7 @@ import Config from "../config";
import * as TestInput from "./test-input";
import * as SlowTimer from "../states/slow-timer";
import * as TestState from "../test/test-state";
import * as TestWords from "./test-words";
export let caretAnimating = true;
const caret = document.querySelector("#caret") as HTMLElement;
@ -35,7 +36,9 @@ function getTargetPositionLeft(
fullWidthCaret: boolean,
isLanguageRightToLeft: boolean,
currentLetter: HTMLElement | undefined,
previousLetter: HTMLElement | undefined
previousLetter: HTMLElement | undefined,
lastWordLetter: HTMLElement,
inputLenLongerThanWordLen: boolean
): number {
let result = 0;
@ -52,7 +55,9 @@ function getTargetPositionLeft(
fullWidthOffset;
}
} else {
if (currentLetter !== undefined) {
if (Config.blindMode && inputLenLongerThanWordLen) {
result = lastWordLetter.offsetLeft + lastWordLetter.offsetWidth;
} else if (currentLetter !== undefined) {
result = currentLetter.offsetLeft;
} else if (previousLetter !== undefined) {
result = previousLetter.offsetLeft + previousLetter.offsetWidth;
@ -71,8 +76,8 @@ export async function updatePosition(noAnim = false): Promise<void> {
Config.caretStyle
);
const wordLen = TestWords.words.getCurrent().length;
const inputLen = TestInput.input.current.length;
const currentLetterIndex = 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;
@ -89,32 +94,43 @@ export async function updatePosition(noAnim = false): Promise<void> {
if (!currentWordNodeList) return;
const currentLetter = currentWordNodeList[currentLetterIndex] as
const currentLetter = currentWordNodeList[inputLen] as
| HTMLElement
| undefined;
const previousLetter: HTMLElement = currentWordNodeList[
Math.min(currentLetterIndex - 1, currentWordNodeList.length - 1)
inputLen - 1
] as HTMLElement;
const lastWordLetter = currentWordNodeList[wordLen - 1] as HTMLElement;
const currentLanguage = await JSONData.getCurrentLanguage(Config.language);
const isLanguageRightToLeft = currentLanguage.rightToLeft;
const letterPosLeft = getTargetPositionLeft(
fullWidthCaret,
isLanguageRightToLeft,
currentLetter,
previousLetter
previousLetter,
lastWordLetter,
inputLen > wordLen
);
const letterPosTop = currentLetter
? currentLetter.offsetTop
: previousLetter.offsetTop;
const letterPosTop =
currentLetter?.offsetTop ||
previousLetter?.offsetTop ||
lastWordLetter?.offsetTop;
const letterHeight =
currentLetter?.offsetHeight ??
previousLetter?.offsetHeight ??
currentLetter?.offsetHeight ||
previousLetter?.offsetHeight ||
lastWordLetter?.offsetHeight ||
Config.fontSize * Numbers.convertRemToPixels(1);
const letterWidth =
currentLetter?.offsetWidth ||
previousLetter?.offsetWidth ||
lastWordLetter?.offsetWidth;
const diff = letterHeight - caret.offsetHeight;
let newTop = activeWordEl.offsetTop + letterPosTop + diff / 2;
@ -149,11 +165,7 @@ export async function updatePosition(noAnim = false): Promise<void> {
(fullWidthCaret ? 0 : caretWidth / 2);
}
}
const newWidth = fullWidthCaret
? ((currentLetter
? currentLetter.offsetWidth
: previousLetter.offsetWidth) ?? 0) + "px"
: "";
const newWidth = fullWidthCaret ? (letterWidth ?? 0) + "px" : "";
let smoothlinescroll = $("#words .smoothScroller").height();
if (smoothlinescroll === undefined) smoothlinescroll = 0;