Skip to content

Commit

Permalink
fix blurry borders in Firefox (#1704)
Browse files Browse the repository at this point in the history
* fix blurry borders

* disable memleak test

* comment out memleak-test job

* fix ci
  • Loading branch information
illetid authored Oct 1, 2024
1 parent b852e37 commit b600018
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 41 deletions.
8 changes: 4 additions & 4 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -370,10 +370,10 @@ workflows:
filters: *merge-based-filters
requires:
- build
- memleaks-tests:
filters: *default-filters
requires:
- build
# - memleaks-tests:
# filters: *default-filters
# requires:
# - build
- coverage:
filters: *default-filters
requires:
Expand Down
66 changes: 29 additions & 37 deletions src/renderers/price-axis-view-renderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -79,48 +79,40 @@ export class PriceAxisViewRenderer implements IPriceAxisViewRenderer {
const geom = this._calculateGeometry(scope, rendererOptions, textWidthCache, align);
const gb = geom.bitmap;

const drawLabelBody = (labelBackgroundColor: string, labelBorderColor?: string): void => {
/*
labelBackgroundColor (and labelBorderColor) will always be a solid color (no alpha) [see generateContrastColors in color.ts].
Therefore we can draw the rounded label using simplified code (drawRoundRectWithBorder) that doesn't need to ensure the background and the border don't overlap.
*/
if (geom.alignRight) {
drawRoundRectWithBorder(
ctx,
gb.xOutside,
gb.yTop,
gb.totalWidth,
gb.totalHeight,
labelBackgroundColor,
gb.horzBorder,
[gb.radius, 0, 0, gb.radius],
labelBorderColor
);
} else {
drawRoundRectWithBorder(
ctx,
gb.xInside,
gb.yTop,
gb.totalWidth,
gb.totalHeight,
labelBackgroundColor,
gb.horzBorder,
[0, gb.radius, gb.radius, 0],
labelBorderColor
);
}
};

// draw border
// draw label background
drawLabelBody(backgroundColor, 'transparent');
/*
draw label. backgroundColor will always be a solid color (no alpha) [see generateContrastColors in color.ts].
Therefore we can draw the rounded label using simplified code (drawRoundRectWithBorder) that doesn't need to ensure the background and the border don't overlap.
*/
if (geom.alignRight) {
drawRoundRectWithBorder(
ctx,
gb.xOutside,
gb.yTop,
gb.totalWidth,
gb.totalHeight,
backgroundColor,
gb.horzBorder,
[gb.radius, 0, 0, gb.radius],
backgroundColor
);
} else {
drawRoundRectWithBorder(
ctx,
gb.xInside,
gb.yTop,
gb.totalWidth,
gb.totalHeight,
backgroundColor,
gb.horzBorder,
[0, gb.radius, gb.radius, 0],
backgroundColor
);
}
// draw tick
if (this._data.tickVisible) {
ctx.fillStyle = textColor;
ctx.fillRect(gb.xInside, gb.yMid, gb.xTick - gb.xInside, gb.tickHeight);
}
// draw label border above the tick
drawLabelBody('transparent', backgroundColor);

// draw separator
if (this._data.borderVisible) {
Expand Down

0 comments on commit b600018

Please sign in to comment.