Textbox issue(s)

[anoukmxller-bit]

Love the new text writing option!! However when I click to start a text, the Line starts on the bottom right to where I clicked.. which makes it a little annoying if you want to start and end two seperate text boxes or write information below a text box. Could be because I use Macbook.
I couldn't find the issue in the code. Anyone have a fix?

Also not really an issue more of a request if you plan to continue the textbox function:
the shortcut key to opening and closing AnkiDraw as a comma isn't very practical, neither "." for deleting the entire canvas. But these are minor issues that can be removed in the code by oneself.

Fix for Comma:
Replace

// ,
if (e.key === ",") {
    switch_visibility();
}

with

// ,
if (false && e.key === ",") {
    switch_visibility();
}

or if you want a different shortcut

// ,
if (e.key === "," && e.ctrlKey) {
    switch_visibility();
}

[anoukmxller-bit]

Fixed!! The code uses canvas coordinates to position the text box. Probably because the Text function is new. The clickX/clickY coordinates make it appear offset. It's particularly bad for Retina Macbooks I assume. Please apply the following changes in a new update

Use the actual mouse click position on the page (e.pageX / e.pageY) to position the textBox.

Keep canvas coordinates (clickX/clickY) only for drawing on the canvas.

Apply a small offset (like - fontSize) to vertically align the cursor with the click.

All I did is replace the pointerDownLineText function with the following for anyone who needs it: (thanks chatgpt!)

function pointerDownLineText(e) {
    if (!e.isPrimary || !textWriting) { return; }

    submitCurrentText();

    var pen = getPenColorAndWidthByIndex(activePenIndex);

    currentAction = {
        points: [],
        x: e.offsetX,
        y: e.offsetY,
        text: "",
        color: pen[0],
        width: pen[1],
        opacity: pen[2],
        visible: true,
        type: 'T',
        fontFamily: fontFamily,
        fontSize: fontSize,
        fontBold: fontBold,
        fontItalic: fontItalic
    };

    // TextBox styling & positioning
    textBox.style.position = 'absolute';
    textBox.style.left = e.pageX + 'px';
    textBox.style.top = e.pageY - fontSize + 'px';
    textBox.style.fontSize = fontSize + 'px';
    textBox.style.fontFamily = fontFamily;
    textBox.style.fontWeight = fontBold ? 'bold' : 'normal';
    textBox.style.fontStyle = fontItalic ? 'italic' : 'normal';

    textBox.value = '';
    textBox.focus();
}