Skip to content

Conversation

@Alber-Writer
Copy link
Collaborator

@Alber-Writer Alber-Writer commented Nov 7, 2024

Factors taken into account with variable tab widths:

  • Undefined order: tabs with standard size could be mixed between larger ones.
  • Re-adjusted tabs can have very different widths depending on the available space.

Steps followed in this logic:

  1. Calculate the desired width, depending on each tab text. The method consists of reusing the existing Konva canvas to perform a measurement of the text "on the fly", given a font family and font size.
  2. Save the original tabs order to have a reference in further steps.
  3. Sort "tabs width list" from lower to greater values.
  4. This is the key step in this logic approach: iterate to precalculate how much room would remain if each following tab applies the current proposed width. Then, apply it from smaller widths to larger depending on available space.
  5. Once we get the real widths, rearrange them to match the original order.
  6. Finally calc the x-axis offset position for each tab, considering the size of the previous ones.

I have added unit tests to assure and facilitate the calc processes.
I also added a hook to encapsulate the tab logic and avoid unnecessary re-rendering.
closes #446

@brauliodiez brauliodiez merged commit deb1613 into dev Nov 17, 2024
2 checks passed
@brauliodiez brauliodiez deleted the feature/#446-Tabs-bar-headings-should-enlarge-width-2 branch November 17, 2024 08:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Tabs bar headings should enlarge width (til a max) if text is larger

3 participants