add color picker styles

hhd-dev · Jun 13, 2024 · b52de67 · b52de67
1 parent 74a2810
commit b52de67
Show file tree

Hide file tree

Showing 3 changed files with 190 additions and 6 deletions.
diff --git a/src/components/elements/ModeComponent.tsx b/src/components/elements/ModeComponent.tsx
@@ -24,7 +24,12 @@ import {
 } from "../../model/hooks";
 import ErrorBoundary from "../ErrorBoundary";
 import SettingComponent from "./SettingComponent";
-import { getFocusStyle } from "./utils";
+import {
+  getFocusStyle,
+  getHsvStyle,
+  getRainbowStyle,
+  getSpiralStyle,
+} from "./utils";
 
 const ModeComponent: FC<ModeProps> = ({ settings: set, path, section }) => {
   const { state, setState } = useSettingState<string>(`${path}.mode`);
@@ -36,6 +41,20 @@ const ModeComponent: FC<ModeProps> = ({ settings: set, path, section }) => {
 
   const mode = state ? set.modes[state] : null;
 
+  let colorParams = {};
+  const childTags = state ? set.modes[state].tags : [];
+  const { state: hsv } = useSettingState<{
+    hue: number;
+    saturation: number;
+    brightness: number;
+  }>(`${path}.${state}`);
+  if (childTags.includes("rgb")) {
+    if (hsv) colorParams = getHsvStyle(hsv);
+  } else if (childTags.includes("rainbow")) {
+    colorParams = getRainbowStyle();
+  } else if (childTags.includes("spiral")) {
+    colorParams = getSpiralStyle();
+  }
   return (
     <>
       <Box {...getFocusStyle(focus, colorMode)}>
@@ -51,6 +70,7 @@ const ModeComponent: FC<ModeProps> = ({ settings: set, path, section }) => {
               onFocus={setFocus}
               rightIcon={<ChevronDownIcon />}
               marginBottom="0.3rem"
+              {...colorParams}
             >
               {mode?.title}
             </MenuButton>

diff --git a/src/components/elements/NumberComponent.tsx b/src/components/elements/NumberComponent.tsx
@@ -18,7 +18,7 @@ import { FC } from "react";
 import { useDisabledTooltip, useSettingState } from "../../model/hooks";
 import { useElementNav } from "../../model/hooks";
 import { NumberSetting, SettingProps } from "../../model/common";
-import { getFocusStyle } from "./utils";
+import { getCssColor, getFocusStyle, getHsvStyle } from "./utils";
 
 const NumberComponent: FC<SettingProps> = ({
   settings: set,
@@ -37,6 +37,57 @@ const NumberComponent: FC<SettingProps> = ({
   );
   const { colorMode } = useColorMode();
   const isDisabled = useDisabledTooltip();
+  const { state: hsv } = useSettingState<{
+    hue: number;
+    saturation: number;
+    brightness: number;
+  }>(path.substring(0, path.lastIndexOf(".")));
+
+  let colorParams = {};
+  let hasFill = true;
+  let colorParamsFill = {};
+  console.log(hsv);
+  if (tags?.includes("rgb")) {
+    if (tags?.includes("hue")) {
+      hasFill = false;
+      colorParams = {
+        background: `linear-gradient(to right in hsl longer hue,${getCssColor({
+          hue: 0,
+          saturation: hsv?.saturation || 0,
+          brightness: hsv?.brightness || 0,
+        })} 0 0)`,
+      };
+    } else if (tags?.includes("saturation")) {
+      hasFill = false;
+      colorParams = {
+        background: `linear-gradient(to right,${getCssColor({
+          hue: hsv?.hue || 0,
+          saturation: 0,
+          brightness: hsv?.brightness || 0,
+        })} 0 0,${getCssColor({
+          hue: hsv?.hue || 0,
+          saturation: 100,
+          brightness: hsv?.brightness || 0,
+        })} 100% 100%)`,
+      };
+      console.log(colorParams);
+    } else if (tags?.includes("brightness") && hsv?.hue !== undefined) {
+      hasFill = false;
+      colorParams = {
+        background: `linear-gradient(to right,${getCssColor({
+          hue: hsv?.hue || 0,
+          saturation: hsv?.saturation !== undefined ? hsv?.saturation : 70,
+          brightness: 15,
+        })} 0 0,${getCssColor({
+          hue: hsv?.hue || 0,
+          saturation: hsv?.saturation || 0,
+          brightness: 100,
+        })} 100% 100%)`,
+      };
+    } else {
+      if (hsv) colorParamsFill = getHsvStyle(hsv);
+    }
+  }
 
   if (tags?.includes("dropdown")) {
     return (
@@ -92,9 +143,15 @@ const NumberComponent: FC<SettingProps> = ({
           value={state}
           focusThumbOnChange={false}
           ref={ref}
+          {...colorParams}
         >
-          <SliderTrack>
-            <SliderFilledTrack transition="all 0.2s ease" />
+          <SliderTrack {...colorParams}>
+            {hasFill && (
+              <SliderFilledTrack
+                transition="all 0.2s ease"
+                {...colorParamsFill}
+              />
+            )}
           </SliderTrack>
           <SliderThumb
             transition="all 0.2s ease"
@@ -136,8 +193,13 @@ const NumberComponent: FC<SettingProps> = ({
         ref={ref}
         onFocus={setFocus}
       >
-        <SliderTrack>
-          <SliderFilledTrack transition="all 0.2s ease" />
+        <SliderTrack {...colorParams}>
+          {hasFill && (
+            <SliderFilledTrack
+              transition="all 0.2s ease"
+              {...colorParamsFill}
+            />
+          )}
         </SliderTrack>
         <SliderThumb
           transition="all 0.2s ease"

diff --git a/src/components/elements/utils.tsx b/src/components/elements/utils.tsx
@@ -19,3 +19,105 @@ export const getFocusStyle = (f: boolean, mode: string) =>
         padding: "0.25rem 0.6rem",
         transition: "all 0.1s ease-in-out",
       };
+
+export const hsvToRgb = (h: number, s: number, v: number) => {
+  if (h >= 360) {
+    h = 359;
+  }
+  s = s / 100;
+  v = v / 100;
+
+  const c = v * s;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = v - c;
+
+  let rgb;
+  if (h < 60) {
+    rgb = [c, x, 0];
+  } else if (h < 120) {
+    rgb = [x, c, 0];
+  } else if (h < 180) {
+    rgb = [0, c, x];
+  } else if (h < 240) {
+    rgb = [0, x, c];
+  } else if (h < 300) {
+    rgb = [x, 0, c];
+  } else {
+    rgb = [c, 0, x];
+  }
+  return rgb.map((value) => Math.round((value + m) * 255));
+};
+
+export const getCssColor = ({
+  hue,
+  saturation,
+  brightness,
+}: {
+  hue: number;
+  saturation: number;
+  brightness: number;
+}) =>
+  `rgb(${hsvToRgb(
+    hue,
+    Math.max(Math.min(saturation, 100), 0),
+    Math.max(Math.min(brightness, 100), 0)
+  ).join(",")})`;
+
+export const getHsvStyle = ({
+  hue,
+  saturation,
+  brightness,
+}: {
+  hue: number;
+  saturation: number;
+  brightness: number;
+}) => {
+  if (hue >= 360) {
+    hue = 359;
+  }
+  const params: any = {
+    backgroundColor: getCssColor({ hue, saturation, brightness }),
+    _hover: {},
+    _active: {
+      backgroundColor: getCssColor({
+        hue,
+        saturation: saturation + 15,
+        brightness: brightness - 20,
+      }),
+      transition: "all 0.5s ease",
+    },
+    _focus: {},
+  };
+  if ((brightness > 70 && saturation < 30) || brightness > 50) {
+    params.color = "black";
+  } else {
+    params.color = "white";
+  }
+  return params;
+};
+
+const linGrad = (br: number) => ({
+  background: `linear-gradient(to right, hsl(0, 100%, ${br}%), hsl(60, 100%, ${br}%), hsl(120, 100%,${br}%), hsl(180, 100%,${br}%), hsl(240, 100%,${br}%), hsl(300, 100%,${br}%), hsl(0, 100%,${br}%))`,
+});
+
+export const getRainbowStyle = () => ({
+  ...linGrad(45),
+  color: "#ffffff",
+  textShadow: "0 0 8px #111111",
+  _hover: {},
+  _active: { ...linGrad(40), transition: "all 0.5s ease" },
+  _focus: {},
+});
+
+const spinGrad = (br: number) => ({
+  background: `conic-gradient(hsl(0, 100%, ${br}%), hsl(60, 100%, ${br}%), hsl(120, 100%,${br}%), hsl(180, 100%,${br}%), hsl(240, 100%,${br}%), hsl(300, 100%,${br}%), hsl(0, 100%,${br}%))`,
+});
+
+export const getSpiralStyle = () => ({
+  ...spinGrad(45),
+  color: "#ffffff",
+  textShadow: "0 0 8px #111111",
+  _hover: {},
+  _active: { ...spinGrad(40), transition: "all 0.5s ease" },
+  _focus: {},
+});