fix(ColorbarCanvas): Fix colorbar rendering issue on small window widths

[stada526]

Context

When the window width is small, the colorbar doesn't render properly, with the top part appearing gray instead of white.

2024-12-02.13.06.54.mov

Changes & Results

This issue seems to be caused by an incorrect tVoiRange value, which is calculated using windowWidth. To fix this, I replaced the windowWidth value with a different calculation: Math.abs(voiRange.upper - voiRange.lower), instead of relying on the windowWidth provided by the toWindowLevel function.

Initially, I suspected that the issue might originate in the toWindowLevel function itself, because it calculates windowWidth using the formula Math.abs(high - low) + 1. My assumption was that it should use Math.abs(high - low) instead. However, I found this PR #736 that says this formula aligns with the DICOM standard. While I don't fully understand why the DICOM standard is like this - since it goes against my intuition - it is clear that this calculation doesn't work well for colorbar rendering.

As a result, I only replaced the windowWidth variable with the value calculated by Math.abs(high - low) for this specific issue.

Testing

I visually confirmed that this issue has been resolved using examples/colorbar/index.ts.

Checklist

PR

• My Pull Request title is descriptive, accurate and follows the
  semantic-release format and guidelines.

Code

• My code has been well-documented (function documentation, inline comments,
  etc.)

• I have run the yarn build:update-api to update the API documentation, and have
  committed the changes to this PR. (Read more here https://www.cornerstonejs.org/docs/contribute/update-api)

Public Documentation Updates

• The documentation page has been updated as necessary for any public API
  additions or removals.

Tested Environment

• "OS: maxOS 15.1"
• "Node version: v21.7.1"
• "Browser: Chrome 130.0.6723.117"

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[netlify]

✅ Deploy Preview for cornerstone-3d-docs ready!

Name	Link
🔨 Latest commit	9dbf48c
🔍 Latest deploy log	https://app.netlify.com/sites/cornerstone-3d-docs/deploys/674e044cd58be30008b2f48b
😎 Deploy Preview	https://deploy-preview-1649--cornerstone-3d-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[stada526]

@wayfarer3130
Hi, do you have any plans to review this PR?
I’d really appreciate it if you could take some time to look at it soon.

[sedghi]

I will review it this week

[stada526]

@sedghi
I really appreciate it 🙏

[sedghi]

can you check if these changes are merged your PR is needed or not anymore? #1717

[stada526]

This PR still needs to be merged because the issue I mentioned in the context section occurs even when windowWidth or windowCenter are more than 1.