From 5260de1121bf69d0b1c44cbdba7a1c7f3cd5b098 Mon Sep 17 00:00:00 2001
From: Rian8337 <52914632+Rian8337@users.noreply.github.com>
Date: Thu, 21 Mar 2024 22:48:01 +0800
Subject: [PATCH] Fix unintuitive illustraton of follow combo color setting for
 slider body

---
 .../illustration/slider/SliderIllustrationCanvas.tsx      | 8 ++++----
 .../illustration/slider/SliderIllustrationGroup.tsx       | 8 +-------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/groups/illustration/slider/SliderIllustrationCanvas.tsx b/src/components/groups/illustration/slider/SliderIllustrationCanvas.tsx
index 23c2086..8bad862 100644
--- a/src/components/groups/illustration/slider/SliderIllustrationCanvas.tsx
+++ b/src/components/groups/illustration/slider/SliderIllustrationCanvas.tsx
@@ -109,7 +109,9 @@ export default function SliderIllustrationCanvas() {
         ctx.stroke();
 
         ctx.globalAlpha = sliderBodyBaseAlpha.value;
-        ctx.strokeStyle = sliderBodyColor.value;
+        ctx.strokeStyle = sliderFollowComboColor.value
+            ? sliderComboColor.value
+            : sliderBodyColor.value;
 
         ctx.stroke();
         ctx.globalCompositeOperation = "source-over";
@@ -127,9 +129,7 @@ export default function SliderIllustrationCanvas() {
         ctx.closePath();
 
         // Draw the slider head.
-        ctx.fillStyle = sliderFollowComboColor.value
-            ? sliderBodyColor.value
-            : sliderComboColor.value;
+        ctx.fillStyle = sliderComboColor.value;
         ctx.globalAlpha = 1;
 
         ctx.beginPath();
diff --git a/src/components/groups/illustration/slider/SliderIllustrationGroup.tsx b/src/components/groups/illustration/slider/SliderIllustrationGroup.tsx
index 2d6f48b..93044a8 100644
--- a/src/components/groups/illustration/slider/SliderIllustrationGroup.tsx
+++ b/src/components/groups/illustration/slider/SliderIllustrationGroup.tsx
@@ -1,21 +1,15 @@
-import { useContext } from "react";
-import { SliderFollowComboColorContext } from "../../../../hooks/Slider/SliderFollowComboColorContext";
 import SubGroup from "../../SubGroup";
 import SliderIllustrationCanvas from "./SliderIllustrationCanvas";
 import SliderIllustrationCircleSize from "./SliderIllustrationCircleSize";
 import SliderIllustrationComboColor from "./SliderIllustrationComboColor";
 
 export default function SliderIllustrationGroup() {
-    const followComboColor = useContext(SliderFollowComboColorContext);
-
     return (
         <SubGroup title="Illustration">
             <br />
             <SliderIllustrationCanvas />
-
             <SliderIllustrationCircleSize />
-
-            {!followComboColor.value ? <SliderIllustrationComboColor /> : null}
+            <SliderIllustrationComboColor />
         </SubGroup>
     );
 }