From 5264c92f699be2042002aaa8c58982f0d52c0d3c Mon Sep 17 00:00:00 2001
From: Mark Silverwood <3482679+SlicedSilver@users.noreply.github.com>
Date: Wed, 8 May 2024 15:37:36 +0100
Subject: [PATCH 1/2] fix rendering glitch with drawRoundRectWithInnerBorder

---
 src/helpers/canvas-helpers.ts             | 32 +++++++++++++++--------
 src/renderers/price-axis-view-renderer.ts | 10 ++++---
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/helpers/canvas-helpers.ts b/src/helpers/canvas-helpers.ts
index 42f6f287eb..962d827753 100644
--- a/src/helpers/canvas-helpers.ts
+++ b/src/helpers/canvas-helpers.ts
@@ -64,6 +64,13 @@ export function drawRoundRect(
 	 * be able to switch to the native version soon.
 	 */
 	ctx.beginPath();
+	if (ctx.roundRect) {
+		ctx.roundRect(x, y, w, h, radii);
+		return;
+	}
+	/*
+	 * Deprecate the rest in v5.
+	 */
 	ctx.lineTo(x + w - radii[1], y);
 	if (radii[1] !== 0) {
 		ctx.arcTo(x + w, y, x + w, y + radii[1], radii[1]);
@@ -85,8 +92,16 @@ export function drawRoundRect(
 	}
 }
 
+/**
+ * Draws a rounded rect with a border.
+ *
+ * This function assumes that the colors will be solid, without
+ * any alpha. (This allows us to fix a rendering artefact.)
+ *
+ * @param outerBorderRadius - The radius of the border (outer edge)
+ */
 // eslint-disable-next-line max-params
-export function drawRoundRectWithInnerBorder(
+export function drawRoundRectWithBorder(
 	ctx: CanvasRenderingContext2D,
 	left: number,
 	top: number,
@@ -94,13 +109,13 @@ export function drawRoundRectWithInnerBorder(
 	height: number,
 	backgroundColor: string,
 	borderWidth: number = 0,
-	borderRadius: LeftTopRightTopRightBottomLeftBottomRadii = [0, 0, 0, 0],
+	outerBorderRadius: LeftTopRightTopRightBottomLeftBottomRadii = [0, 0, 0, 0],
 	borderColor: string = ''
 ): void {
 	ctx.save();
 
 	if (!borderWidth || !borderColor || borderColor === backgroundColor) {
-		drawRoundRect(ctx, left, top, width, height, borderRadius);
+		drawRoundRect(ctx, left, top, width, height, outerBorderRadius);
 		ctx.fillStyle = backgroundColor;
 		ctx.fill();
 		ctx.restore();
@@ -108,21 +123,16 @@ export function drawRoundRectWithInnerBorder(
 	}
 
 	const halfBorderWidth = borderWidth / 2;
+	const radii = changeBorderRadius(outerBorderRadius, - halfBorderWidth);
 
-	// Draw body
-	if (backgroundColor !== 'transparent') {
-		const innerRadii = changeBorderRadius(borderRadius, - borderWidth);
-		drawRoundRect(ctx, left + borderWidth, top + borderWidth, width - borderWidth * 2, height - borderWidth * 2, innerRadii);
+	drawRoundRect(ctx, left + halfBorderWidth, top + halfBorderWidth, width - borderWidth, height - borderWidth, radii);
 
+	if (backgroundColor !== 'transparent') {
 		ctx.fillStyle = backgroundColor;
 		ctx.fill();
 	}
 
-	// Draw border
 	if (borderColor !== 'transparent') {
-		const outerRadii = changeBorderRadius(borderRadius, - halfBorderWidth);
-		drawRoundRect(ctx, left + halfBorderWidth, top + halfBorderWidth, width - borderWidth, height - borderWidth, outerRadii);
-
 		ctx.lineWidth = borderWidth;
 		ctx.strokeStyle = borderColor;
 		ctx.closePath();
diff --git a/src/renderers/price-axis-view-renderer.ts b/src/renderers/price-axis-view-renderer.ts
index 6ce6b8b109..a27c21add0 100644
--- a/src/renderers/price-axis-view-renderer.ts
+++ b/src/renderers/price-axis-view-renderer.ts
@@ -1,6 +1,6 @@
 import { BitmapCoordinatesRenderingScope, CanvasRenderingTarget2D, MediaCoordinatesRenderingScope } from 'fancy-canvas';
 
-import { drawRoundRectWithInnerBorder } from '../helpers/canvas-helpers';
+import { drawRoundRectWithBorder } from '../helpers/canvas-helpers';
 
 import { TextWidthCache } from '../model/text-width-cache';
 
@@ -80,8 +80,12 @@ export class PriceAxisViewRenderer implements IPriceAxisViewRenderer {
 			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) {
-					drawRoundRectWithInnerBorder(
+					drawRoundRectWithBorder(
 						ctx,
 						gb.xOutside,
 						gb.yTop,
@@ -93,7 +97,7 @@ export class PriceAxisViewRenderer implements IPriceAxisViewRenderer {
 						labelBorderColor
 					);
 				} else {
-					drawRoundRectWithInnerBorder(
+					drawRoundRectWithBorder(
 						ctx,
 						gb.xInside,
 						gb.yTop,

From 289a780f907fbd550dd237ba77ad0878949673de Mon Sep 17 00:00:00 2001
From: Mark Silverwood <3482679+SlicedSilver@users.noreply.github.com>
Date: Wed, 8 May 2024 15:41:48 +0100
Subject: [PATCH 2/2] update size-limit

---
 .size-limit.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/.size-limit.js b/.size-limit.js
index 21ded814b3..61db7a1c6a 100644
--- a/.size-limit.js
+++ b/.size-limit.js
@@ -4,21 +4,21 @@ module.exports = [
 	{
 		name: 'CJS',
 		path: 'dist/lightweight-charts.production.cjs',
-		limit: '48.15 KB',
+		limit: '48.16 KB',
 	},
 	{
 		name: 'ESM',
 		path: 'dist/lightweight-charts.production.mjs',
-		limit: '48.11 KB',
+		limit: '48.09 KB',
 	},
 	{
 		name: 'Standalone-ESM',
 		path: 'dist/lightweight-charts.standalone.production.mjs',
-		limit: '49.8 KB',
+		limit: '49.79 KB',
 	},
 	{
 		name: 'Standalone',
 		path: 'dist/lightweight-charts.standalone.production.js',
-		limit: '49.85 KB',
+		limit: '49.83 KB',
 	},
 ];