Fix problems selection characters with mouse when scaling Canvas

[opicron]

When changing the .fTelnetCrtCanvas with CSS, as such:

.fTelnetCrtCanvas {
height:100vh !important;
width:98vw !important;
}

The selection of text is no longer correct due to the adjusted size. For example url please check: https://bbs.theforze.eu.

Edit: after diving deeper, I found the code in MouseDown/MouseMove/MouseUp had to be adjusted instead. Below code wasnt even called in my situation.

https://github.com/rickparrish/fTelnet/blob/47aa268d2a4e52b58c6561c00d584aa1db9481e7/source/common/Offset.ts#L16

Example code which should be working:

function getOffsetRect(elem: HTMLElement): Point {
        const rect = elem.getBoundingClientRect();

        const scaleX = elem.width / rect.width;
        const scaleY = elem.height / rect.height;
    
        return {
            x: Math.round(rect.left * scaleX),
            y: Math.round(rect.top * scaleY)
        };    
}

For canvas mouse input, we need coordinates relative to the canvas, not the document.

[rickparrish]

Very cool layout, I've never thought to try using vh or vw like that!

So if I understand correctly, you're saying that should be a general purpose replacement that works in your 100vh and 98vw setup as well as a "standard" setup?

[opicron]

Yeah, full screen fTelnet without F11 is really pleasant to the eye.

After examining the issue, googling for answers and some chatgpt (kuch) help this should indeed be a general purpose replacement. I havent been able to test it.

[opicron]

Mhm I just tested the code and it isnt working-- let me fix this myself and I will report back.

[opicron]

Alright, I fixed the intial selected character by adjusthing the following line. The starting point of selection is perfect.

https://github.com/rickparrish/fTelnet/blob/9dbbd71c3dfb12edf07bf8bea29a5b7eed4f6fd9/source/crt/Crt.ts#L1050

To:

            //this._MouseDownPoint = this.MousePositionToScreenPosition(me.offsetX, me.offsetY);
            const rect = this._Canvas.getBoundingClientRect();
            const scaleX = this._Canvas.width / rect.width;
            const scaleY = this._Canvas.height / rect.height;

            this._MouseDownPoint = this.MousePositionToScreenPosition(
                me.offsetX * scaleX,
                me.offsetY * scaleY
            );

[opicron]

Ah, I had to update this line too (OnMouseMove):

https://github.com/rickparrish/fTelnet/blob/9dbbd71c3dfb12edf07bf8bea29a5b7eed4f6fd9/source/crt/Crt.ts#L1083

            //NewMovePoint = this.MousePositionToScreenPosition(me.offsetX, me.offsetY);
            const rect = this._Canvas.getBoundingClientRect();
            const scaleX = this._Canvas.width / rect.width;
            const scaleY = this._Canvas.height / rect.height;

            NewMovePoint = this.MousePositionToScreenPosition(
                me.offsetX * scaleX,
                me.offsetY * scaleY
            );

[opicron]

Oh, if this code gets added, it also fixes getting incorrect coordinate ANSI codes. Big win for my small next projects!

[rickparrish]

Thanks for the code samples, I've just pushed a commit that incorporates the scale calculation.

[opicron]

I notice I also added the code to OnMouseUp event. Just to be sure the right coordinate gets send. I did not list that part of the code above.

[rickparrish]

Yeah I put the scaling adjustment into MousePositionToScreenPosition so it's accounted for in both of the if branches in all three mouse events.

(I wasn't able to test the if branch where me.offsetX is undefined, so I'm not 100% sure that the adjustment will be needed there, or will work as expected if it is needed, but I'm guessing that second branch was for IE support and in that case not likely anybody will hit it going forward anyway!)