From 98f00c73208c46e30b4a65d555a599021d8b2144 Mon Sep 17 00:00:00 2001
From: xiaoluoHe <sevnape@outlook.com>
Date: Wed, 29 May 2024 16:07:50 +0800
Subject: [PATCH] fix: color legend handler cannot customize fill color

---
 .../src/legend/color/color.ts                 | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/vrender-components/src/legend/color/color.ts b/packages/vrender-components/src/legend/color/color.ts
index 1b5eccffa..240f6c516 100644
--- a/packages/vrender-components/src/legend/color/color.ts
+++ b/packages/vrender-components/src/legend/color/color.ts
@@ -32,6 +32,7 @@ export class ColorContinuousLegend extends LegendBase<ColorLegendAttributes> {
     },
     handlerSize: 10,
     handlerStyle: {
+      fill: null as any,
       lineWidth: 4,
       stroke: '#fff',
       outerBorder: {
@@ -220,12 +221,20 @@ export class ColorContinuousLegend extends LegendBase<ColorLegendAttributes> {
     const { layout = 'horizontal', colors, railWidth, railHeight } = this.attribute as ColorLegendAttributes;
     const { startHandler, endHandler, track } = this._slider;
     const { startValue, endValue, startPos, endPos } = this._slider.currentValue;
-
     // 计算颜色
-    const startHandlerColor = this._colorScale.scale(startValue);
-    const endHandlerColor = this._colorScale.scale(endValue);
-    startHandler?.setAttribute('fill', startHandlerColor);
-    endHandler?.setAttribute('fill', endHandlerColor);
+    if (startHandler) {
+      if (!startHandler.attribute.fill) {
+        const startHandlerColor = this._colorScale.scale(startValue);
+        startHandler.setAttribute('fill', startHandlerColor);
+      }
+    }
+
+    if (endHandler) {
+      if (!endHandler.attribute.fill) {
+        const endHandlerColor = this._colorScale.scale(endValue);
+        endHandler.setAttribute('fill', endHandlerColor);
+      }
+    }
 
     const isHorizontal = layout === 'horizontal';
     const railLen = isHorizontal ? railWidth : railHeight;