calc: center minus/plus symbols and level numbers in group boxes

[banobepascal]

Change-Id: I752f6a0a5eed762d83e680c2da1ab06b3fabde3c

• Resolves: Make minus/plus centered in group boxes #8022 (comment)
• Target version: main

Summary

• The plus and minus symbols inside the row and column group boxes were not visually centered because their line endpoints were uneven. The drawing logic used 25% and 75% of the box size, but the end coordinate had an extra app.roundedDpiScale, which pushed the line too far on one side. Removing that extra offset makes the padding even on both sides and centers the symbols properly.

• The level numbers in the header boxes also appeared slightly off vertically. Although the text is drawn with textBaseline = 'middle', the previous offset of + 2 * app.dpiScale pushed the numbers too far from the visual center. Reducing it to + app.dpiScale reuslting in better alignment without over adjusting.

PREVIEW

[pedropintosilva]

I love it, it looks much better!

[mmeeks]

Looks good, but please make sure you're testing this at eg. 125% zoom - never at just 100% :-)

While we are here, the vertical centering of the text is also really un-necessarily ugly:

Seems we also have some un-helpful offset in the row headings too:

If we have to err very slightly here, conventional wisdom suggests it is better to be ever so marginally above vertical center.

[banobepascal]

If we have to err very slightly here, conventional wisdom suggests it is better to be ever so marginally above vertical center.

Before the level numbers would also overflow the group boxes when the font is adjusted in the browser settings

For example this was at browser font Very large (24px)

This PR addresses the above overflow issue by adjusting the positioning of the level numbers so they remain within the group boxes. The numbers are now positioned slightly above the vertical center, which provides better visual balance and avoids clipping at larger font sizes.

Browser font size: Very large (24px) at zoom level 125%)

Browser font size: medium (9px) at zoom level 125%

Browser font size: Very small (9px) at zoom level 175%

cc @eszkadev

[pedropintosilva]

it seems we are using hardcoded color here^ which leads to:

we should leverage what we already have from getColors(); on a second thought I wonder if even that conditional should be updated so to use css vars (let's postpone this for another discussion/PR)

[pedropintosilva]

Additionally we seem to have some sub-pixel anti-aliasing artifact on Y axis which leads to the perceived blurriness:

The screenshot was taken in chrome with browser zoom at 200% and in RTL (&lang=ar)

(I have added pixel grid and decrease highlight values in GIMP so it's easier to perceive)

Notice, the neighbor gray pixel appears (on the left edge) one pixel above the minus line; And (on the right edge) one pixel above and one pixel bellow the minus line.

maybe something to do with the offset ?

// Control.GroupBase.ts:270-271:                                                                                                                           
                                                                                                                                                             
  this.context.moveTo(startX + 0.5 + this._groupHeadSize * 0.25, startY + 0.5 + this._groupHeadSize / 2);                                                    
  this.context.lineTo(startX + 0.5 + this._groupHeadSize * 0.75, startY + 0.5 + this._groupHeadSize / 2);

[pedropintosilva]

Thanks @banobepascal the dark mode is now fixed and the minus is now without artifacts

but the plus seems to still have half px up and half px down

Edit the vertical stroke of the + uses bare startY + ... without the + 0.5 offset that the horizontal stroke has. Shouldn't it be:
this.context.moveTo(startX + 0.5 + this._groupHeadSize / 2, startY + 0.5 + this._groupHeadSize * 0.25);
this.context.lineTo(startX + 0.5 + this._groupHeadSize / 2, startY + 0.5 + this._groupHeadSize * 0.75);

?

[banobepascal]

but the plus seems to still have half px up and half px down

Edit the vertical stroke of the + uses bare startY + ... without the + 0.5 offset that the horizontal stroke has. Shouldn't it be: this.context.moveTo(startX + 0.5 + this._groupHeadSize / 2, startY + 0.5 + this._groupHeadSize * 0.25); this.context.lineTo(startX + 0.5 + this._groupHeadSize / 2, startY + 0.5 + this._groupHeadSize * 0.75);

?

Thanks Pedro, the missing + 0.5 offset was causing the half pixel anti-aliasing artifact on Y axis . I’ve added it, and the stroke now aligns cleanly within the pixel boundaries.

200% zoom Chrome

[pedropintosilva]

Needs another +1

[gokaysatir]

New look is better. I think drawGroupBoxes is centralized and the other changes are visual. Looks good to me thank you.