Math to prevent clipping in browser.

[Wolgo]

This is using math to make sure that any change does not first clip into the frame, and then afterwards get corrected.
This visually looks a bit better.

Some changes in the code for what my IDE automatically does in styling, some .tostring() === because the IDE complains about it.

I was making the changes mostly to see what I could do for the scaling issue.

As for the issue of image moving around when scaling;
Because OBS derives how the image is shown from the crop + size, different scalings show the image differently, as the cropping can only be as precise as one pixel, there is often no "correct" cropping to show the image the same between two scalings.

[paul-lrr]

Interesting changes. Using .toString() and === is probably a good practice. I notice with this change that, when center scaling, the scale is stopped when any side encounters the edge of the frame. In the current version, the center scale continues on the non-blocked sides, which I feel is a more intuitive result.

[Wolgo]

Recording.2023-05-07.212243.mp4

That's definitely something I didn't notice. Attached an example on how that looks a bit weird, as i'm pulling top handle, the bottom moves instead. But at least in your way the user decides which handle they pull and what happens.

But your experience using it is probably correct.

Notice I broke 100% and fit to frame.
I made changes to fix that, and ended up fixing the percentage system too.

[paul-lrr]

I agree that center scaling from a corner and having it shrink from the other corner is a little odd looking, but I think it is better then it just not moving at all. Also, this change makes setting the percentage manually and the "scale to frame" button not work as it is trying to scale from the center and stops when it hits an edge.

eg, in the scenario below, the scale to fit button can't scale because the left side is already against the frame

[Wolgo]

I wasn't able to replicate that with 1 edge touching, but with 2 edges touching I did run into it. Added a few lines that after doing centered re-scaling it will try to just pull in each corner if it's not yet sized correctly.

[paul-lrr]

That works great! I was using the checkBounds function to correct accidentally cutting into the frame when the mouse moves too fast, but it looks like your new calculations handle that in a much cleaner way.
I still think there has to be a way to make it so the object cropping doesn't fluctuate as it is resized, maybe some way of matching the level of floating point precision that obs uses internally. Then again, it doesn't really effect things too much, so maybe it isn't worth spend a bunch of time on

[Wolgo]

I actually think the aspect ratio is going wrong. By zooming in a lot and using a different bounding box mode for easier visibility, I see that there is a bit where the error is horizontal, and a bit where the error is vertical. Best is an example:

Recording.2023-05-17.230642.mp4

So I don't think it's an rounding issue, but an issue with the aspect ratio.

[Wolgo]

Recording.2023-05-17.232904.mp4

So, I made a 100x100 white image to test that. It's still happening, so it's not aspect ration. However, with such a small image it's much clearer what's happening. You see the object grow bigger and then suddenly snap back. At that moment the cropping jumps up 1 pixel.

So it's all about obs, as the actual width seems to be decided by first cropping and the scaling, we have no option for a cropping to keep this size consistent. So it's simply impossible. The only option would be to not allow all scalings (but that becomes a problem for any non 1:1 scaling that almost no scalings are allowed).

I think the solution might be in using a different bounding box type.
As then you can set the bounding box size.

Maximum size or stretch to bounds look like likely candidates to me, but if I work with these I feel like im distorting the image in a way we don't want. If you have some idea if something with those settings might work?