feat: draw semi-transparent rectangles for tooltip

docs/guide/styles.md

@@ -162,7 +162,9 @@ import StyleExplain from '../@views/styles/Explain.vue'
         borderRadius: 4,
         borderSize: 1,
         borderColor: '#f2f3f5',
-        color: '#FEFEFE'
+        color: '#FEFEFE',
+        //  the alpha (transparency) value applied when draw semi-transparent rectangles for tooltip
+        globalAlpha: 0.5
       },
       text: {
         size: 12,

src/common/Coordinate.ts

@@ -22,3 +22,5 @@ export function getDistance (coordinate1: Coordinate, coordinate2: Coordinate):
   const yDif = coordinate1.y - coordinate2.y
   return Math.sqrt(xDif * xDif + yDif * yDif)
 }
+
+export type MeasureCoordinate = Array<Array<Coordinate | [Coordinate, Coordinate]>>

src/common/Styles.ts

@@ -76,6 +76,7 @@ export interface PolygonStyle {
 
 export interface RectStyle extends PolygonStyle {
   borderRadius: number
+  globalAlpha?: number
 }
 
 export interface TextStyle extends Padding {
@@ -488,7 +489,8 @@ function getDefaultCandleStyle (): CandleStyle {
         borderRadius: 4,
         borderSize: 1,
         borderColor: '#F2F3F5',
-        color: '#FEFEFE'
+        color: '#FEFEFE',
+        globalAlpha: 0.5,
       },
       text: {
         size: 12,

src/extension/figure/rect.ts

@@ -58,8 +58,13 @@ export function drawRect (ctx: CanvasRenderingContext2D, attrs: RectAttrs | Rect
     borderColor = 'transparent',
     borderStyle = LineType.Solid,
     borderRadius: r = 0,
-    borderDashedValue = [2, 2]
+    borderDashedValue = [2, 2],
+    globalAlpha = 1,
   } = styles
+  //  modify the alpha value
+  if (globalAlpha !== 1) {
+    ctx.globalAlpha = globalAlpha
+  }
   // eslint-disable-next-line @typescript-eslint/unbound-method, @typescript-eslint/no-unnecessary-condition
   const draw = ctx.roundRect ?? ctx.rect
   const solid = (style === PolygonType.Fill || styles.style === PolygonType.StrokeFill) && (!isString(color) || !isTransparent(color))
@@ -96,6 +101,10 @@ export function drawRect (ctx: CanvasRenderingContext2D, attrs: RectAttrs | Rect
       }
     })
   }
+  //  reset the alpha value
+  if (globalAlpha !== 1) {
+    ctx.globalAlpha = 1
+  }
 }
 
 export interface RectAttrs {

src/view/CandleTooltipView.ts

@@ -17,10 +17,13 @@ import type Bounding from '../common/Bounding'
 import type { KLineData } from '../common/Data'
 import type Precision from '../common/Precision'
 import type Crosshair from '../common/Crosshair'
+import type {
+  CandleStyle, TooltipLegend, TooltipLegendChild,
+  CandleTooltipCustomCallbackData, CandleTooltipRectStyle,
+} from "../common/Styles";
 import {
-  type CandleStyle, type TooltipLegend, type TooltipLegendChild, TooltipShowType, CandleTooltipRectPosition,
-  type CandleTooltipCustomCallbackData, PolygonType
-} from '../common/Styles'
+  TooltipShowType, CandleTooltipRectPosition, PolygonType,
+} from "../common/Styles";
 import { formatPrecision } from '../common/utils/format'
 import { createFont } from '../common/utils/canvas'
 import { isFunction, isObject, isValid } from '../common/utils/typeChecks'
@@ -29,6 +32,7 @@ import { FormatDateType, type Options } from '../Options'
 
 import { PaneIdConstants } from '../pane/types'
 
+import type Coordinate from '../common/Coordinate'
 import type Indicator from '../component/Indicator'
 import { AxisPosition } from '../component/Axis'
 
@@ -55,6 +59,7 @@ export default class CandleTooltipView extends IndicatorTooltipView {
       const indicators = chartStore.getIndicatorsByPaneId(pane.getId())
       const candleStyles = options.styles.candle
       const indicatorStyles = options.styles.indicator
+      const tooltipRectStyles = candleStyles.tooltip.rect
       if (
         candleStyles.tooltip.showType === TooltipShowType.Rect &&
         indicatorStyles.tooltip.showType === TooltipShowType.Rect
@@ -76,12 +81,12 @@ export default class CandleTooltipView extends IndicatorTooltipView {
         const maxWidth = bounding.width - offsetRight
         const top = this._drawCandleStandardTooltip(
           ctx, dataList, paneId, crosshair, activeIcon, precision,
-          options, offsetLeft, offsetTop, maxWidth, candleStyles
+          options, offsetLeft, offsetTop, maxWidth, candleStyles, tooltipRectStyles
         )
         this.drawIndicatorTooltip(
           ctx, paneId, dataList, crosshair,
           activeIcon, indicators, options,
-          offsetLeft, top, maxWidth, indicatorStyles
+          offsetLeft, top, maxWidth, indicatorStyles, tooltipRectStyles
         )
       } else if (
         candleStyles.tooltip.showType === TooltipShowType.Rect &&
@@ -92,7 +97,7 @@ export default class CandleTooltipView extends IndicatorTooltipView {
         const top = this.drawIndicatorTooltip(
           ctx, paneId, dataList, crosshair,
           activeIcon, indicators, options,
-          offsetLeft, offsetTop, maxWidth, indicatorStyles
+          offsetLeft, offsetTop, maxWidth, indicatorStyles, tooltipRectStyles
         )
         const isDrawCandleTooltip = this.isDrawTooltip(crosshair, candleStyles.tooltip)
         this._drawRectTooltip(
@@ -105,7 +110,7 @@ export default class CandleTooltipView extends IndicatorTooltipView {
         const maxWidth = bounding.width - offsetRight
         const top = this._drawCandleStandardTooltip(
           ctx, dataList, paneId, crosshair, activeIcon, precision,
-          options, offsetLeft, offsetTop, maxWidth, candleStyles
+          options, offsetLeft, offsetTop, maxWidth, candleStyles, tooltipRectStyles
         )
         const isDrawIndicatorTooltip = this.isDrawTooltip(crosshair, indicatorStyles.tooltip)
         this._drawRectTooltip(
@@ -128,7 +133,8 @@ export default class CandleTooltipView extends IndicatorTooltipView {
     left: number,
     top: number,
     maxWidth: number,
-    styles: CandleStyle
+    styles: CandleStyle,
+    rectStyles: CandleTooltipRectStyle
   ): number {
     const tooltipStyles = styles.tooltip
     const tooltipTextStyles = tooltipStyles.text
@@ -143,27 +149,31 @@ export default class CandleTooltipView extends IndicatorTooltipView {
 
       const [leftIcons, middleIcons, rightIcons] = this.classifyTooltipIcons(tooltipStyles.icons)
 
-      prevRowHeight = this.drawStandardTooltipIcons(
-        ctx, activeTooltipIcon, leftIcons, coordinate,
-        paneId, '', left, prevRowHeight, maxWidth
+      const [measureResult, prevCalcHeight] = this.drawStandardTooltipRect(ctx, leftIcons, '', middleIcons, legends, rightIcons, coordinate, maxWidth, tooltipTextStyles, rectStyles)
+
+      this.drawStandardTooltipIcons(
+        ctx, activeTooltipIcon, leftIcons, 
+        paneId, '', measureResult[0] as Coordinate[]
       )
 
-      prevRowHeight = this.drawStandardTooltipIcons(
-        ctx, activeTooltipIcon, middleIcons, coordinate,
-        paneId, '', left, prevRowHeight, maxWidth
+      this.drawStandardTooltipIcons(
+        ctx, activeTooltipIcon, middleIcons,
+        paneId, '', measureResult[2] as Coordinate[]
       )
 
       if (legends.length > 0) {
-        prevRowHeight = this.drawStandardTooltipLegends(
-          ctx, legends, coordinate, left,
-          prevRowHeight, maxWidth, tooltipTextStyles
+         this.drawStandardTooltipLegends(
+          ctx, legends, tooltipTextStyles,
+          measureResult[3] as Array<[Coordinate, Coordinate]>
         )
       }
 
-      prevRowHeight = this.drawStandardTooltipIcons(
-        ctx, activeTooltipIcon, rightIcons, coordinate,
-        paneId, '', left, prevRowHeight, maxWidth
+      this.drawStandardTooltipIcons(
+        ctx, activeTooltipIcon, rightIcons,
+        paneId, '', measureResult[4] as Coordinate[]
       )
+
+      prevRowHeight = prevCalcHeight;
     }
     return coordinate.y + prevRowHeight
   }