Improve useCustomColor API

silx-kit · Mar 11, 2022 · 4c88509 · 4c88509
1 parent c651982
commit 4c88509
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 22 deletions.
diff --git a/packages/lib/src/vis/hooks.ts b/packages/lib/src/vis/hooks.ts
@@ -6,6 +6,7 @@ import { useCallback, useMemo, useState } from 'react';
 import type { RefCallback } from 'react';
 import { createMemo } from 'react-use';
 
+import type { CustomColor } from './models';
 import { useAxisSystemContext } from './shared/AxisSystemContext';
 import {
   getCameraFOV,
@@ -84,10 +85,10 @@ export function useWheelCapture() {
 }
 
 export function useCustomColors(
-  properties: Record<`--h5w-${string}`, string | string[]>
+  colorDefs: CustomColor[]
 ): [string[], RefCallback<HTMLElement>] {
-  const [styles, setStyles] = useState<CSSStyleDeclaration>();
   const isDark = useMediaQuery('(prefers-color-scheme: dark)');
+  const [styles, setStyles] = useState<CSSStyleDeclaration>();
 
   // https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node
   const refCallback: RefCallback<HTMLElement> = useCallback(
@@ -97,15 +98,14 @@ export function useCustomColors(
 
   if (!styles) {
     // Return `transparent` colors on initial render
-    return [Object.keys(properties).map(() => 'transparent'), refCallback];
+    return [colorDefs.map(() => 'transparent'), refCallback];
   }
 
-  const colors = Object.entries(properties).map(([name, defaultColors]) => {
-    const [light, dark] = Array.isArray(defaultColors)
-      ? defaultColors
-      : [defaultColors, defaultColors];
-
-    return styles.getPropertyValue(name).trim() || (isDark ? dark : light);
+  const colors = colorDefs.map(({ property, fallback, darkFallback }) => {
+    return (
+      styles.getPropertyValue(property).trim() ||
+      (isDark && darkFallback ? darkFallback : fallback)
+    );
   });
 
   return [colors, refCallback];

diff --git a/packages/lib/src/vis/line/LineVis.tsx b/packages/lib/src/vis/line/LineVis.tsx
@@ -13,7 +13,7 @@ import { useMemo } from 'react';
 import type { ReactElement, ReactNode } from 'react';
 
 import { useAxisDomain, useCustomColors, useValueToIndexScale } from '../hooks';
-import type { AxisParams } from '../models';
+import type { AxisParams, CustomColor } from '../models';
 import Pan from '../shared/Pan';
 import ResetZoomButton from '../shared/ResetZoomButton';
 import SelectToZoom from '../shared/SelectToZoom';
@@ -28,12 +28,18 @@ import styles from './LineVis.module.css';
 import type { TooltipData } from './models';
 import { CurveType } from './models';
 
-// Default line colors in the following format: `[<light-mode>, <dark-mode>]`
 // Inspired by Matplotlib palette: https://matplotlib.org/stable/gallery/color/named_colors.html
-const DEFAULT_CURVE_COLOR = ['darkblue', 'deepskyblue'];
-const DEFAULT_AUX_COLORS = [
-  'orangered, forestgreen, red, mediumorchid, olive',
-  'orange, lightgreen, red, violet, gold',
+const COLORS: CustomColor[] = [
+  {
+    property: '--h5w-line--color',
+    fallback: 'darkblue',
+    darkFallback: 'deepskyblue',
+  },
+  {
+    property: '--h5w-line--colorAux',
+    fallback: 'orangered, forestgreen, red, mediumorchid, olive',
+    darkFallback: 'orange, lightgreen, red, violet, gold',
+  },
 ];
 
 interface Props {
@@ -99,13 +105,8 @@ function LineVis(props: Props) {
     return domain ? extendDomain(domain, 0.05, scaleType) : DEFAULT_DOMAIN;
   }, [scaleType, domain]);
 
-  const [[curveColor, auxColorList], rootRef] = useCustomColors({
-    '--h5w-line--color': DEFAULT_CURVE_COLOR,
-    '--h5w-line--colorAux': DEFAULT_AUX_COLORS,
-  });
-
-  // Support comma-separated list of auxiliary colors
-  const auxColors = auxColorList.split(',').map((col) => col.trim());
+  const [[curveColor, auxColorList], rootRef] = useCustomColors(COLORS);
+  const auxColors = auxColorList.split(',').map((col) => col.trim()); // support comma-separated list of colors
 
   return (
     <figure

diff --git a/packages/lib/src/vis/models.ts b/packages/lib/src/vis/models.ts
@@ -116,3 +116,9 @@ export interface Interaction {
   shortcut: string;
   description: string;
 }
+
+export interface CustomColor {
+  property: `--h5w-${string}`;
+  fallback: string;
+  darkFallback?: string;
+}