react-cheminfo 0.49.0 → 0.51.0

package/src/color/ui/ColorScaleEditor.tsx

@@ -1,24 +1,26 @@
 import { Button, HTMLSelect } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
-import { formatDecimal } from '../../format/core/numbers.ts';
 import { useChromeT } from '../../i18n/ui/useT.ts';
+import { NumberInput } from '../../number/ui/NumberInput.tsx';
 import { normalizeHexColor } from '../core/hex.ts';
 import type {
   ColorInterpolation,
   ColorScale,
   ColorStop,
 } from '../core/interpolate.ts';
-import { colorAt } from '../core/interpolate.ts';
-import { MAXIMUM_CUSTOM_STOPS } from '../core/scaleText.ts';
+import {
+  MINIMUM_CUSTOM_STOPS,
+  moveColorStop,
+  recolorColorStop,
+  removeColorStop,
+} from '../core/stops.ts';
 
-import { ColorScaleBar } from './ColorScaleBar.tsx';
+import { ColorScaleTone } from './ColorScaleTone.tsx';
+import { ColorScaleTrack } from './ColorScaleTrack.tsx';
 
-const MINIMUM_STOPS = 2;
 const POSITION_STEP = 0.01;
-const PREVIEW_HEIGHT = 16;
-const PREVIEW_SAMPLES = 48;
-const POSITION_DECIMALS = 2;
 // A `type="color"` input only takes six hex digits; an anchor that is not a
 // hex colour is shown as black until it is picked again.
 const UNREADABLE_COLOR = '#000000';
@@ -44,88 +46,108 @@ export interface ColorScaleEditorProps {
 }
 
 /**
- * A colour scale of the reader's own: the colours it passes through, where
- * each one sits, and the path it takes between them.
+ * A colour scale of the reader's own, edited on the strip it draws.
  *
- * A colour is anchored rather than typed into a list, so two anchors and the
- * HSV path already describe a whole rainbow, and an anchor never crosses its
- * neighbours — the scale it draws is always the one the strip above shows.
+ * A click on the strip adds an anchor in the colour already there, an anchor
+ * is dragged along it, and an anchor pointed at goes with Backspace. The
+ * anchor last touched shows its colour and position below, to set exactly.
  * @param props - See {@link ColorScaleEditorProps}.
- * @returns The preview, the anchors, and the picker of the path between them.
+ * @returns The strip, the selected anchor, and the picker of the path between anchors.
  */
 export function ColorScaleEditor(props: ColorScaleEditorProps): ReactElement {
   const { className, value, onChange } = props;
   const t = useChromeT();
   const stops = value.stops;
-
-  function write(next: readonly ColorStop[]): void {
+  const [picked, setPicked] = useState(0);
+  const [hovered, setHovered] = useState<number | null>(null);
+  const colorInput = useRef<HTMLInputElement>(null);
+  const selected = Math.min(picked, stops.length - 1);
+  const stop = stops[selected];
+  const removable = stops.length > MINIMUM_CUSTOM_STOPS;
+
+  function write(next: ColorStop[]): void {
     onChange({ stops: next, interpolation: value.interpolation });
   }
 
+  function remove(index: number): void {
+    if (!removable) return;
+    write(removeColorStop(stops, index));
+    setHovered(null);
+    setPicked(Math.max(0, index - 1));
+  }
+
+  useEffect(() => {
+    if (hovered === null || !removable) return;
+    const index = hovered;
+    function onKeyDown(event: globalThis.KeyboardEvent): void {
+      if (event.key !== 'Backspace' && event.key !== 'Delete') return;
+      if (isEditable(event.target)) return;
+      event.preventDefault();
+      onChange({
+        stops: removeColorStop(stops, index),
+        interpolation: value.interpolation,
+      });
+      setHovered(null);
+      setPicked(Math.max(0, index - 1));
+    }
+    globalThis.addEventListener('keydown', onKeyDown);
+    return () => {
+      globalThis.removeEventListener('keydown', onKeyDown);
+    };
+  }, [hovered, removable, stops, value.interpolation, onChange]);
+
   return (
     <div className={className} style={PANEL_STYLE}>
-      <ColorScaleBar
+      <ColorScaleTrack
         scale={value}
-        height={PREVIEW_HEIGHT}
-        samples={PREVIEW_SAMPLES}
-        label={t('color.scaleBeingEdited')}
+        selected={selected}
+        hovered={hovered}
+        onSelect={setPicked}
+        onHover={setHovered}
+        onChange={write}
+        onRemove={remove}
+        onPick={() => {
+          colorInput.current?.showPicker();
+        }}
       />
 
-      <div style={ROWS_STYLE}>
-        {stops.map((stop, index) => (
-          <div key={`${String(index)}-${stop.color}`} style={ROW_STYLE}>
-            <input
-              type="color"
-              aria-label={t('color.anchorColour', { index: index + 1 })}
-              value={normalizeHexColor(stop.color) ?? UNREADABLE_COLOR}
-              style={SWATCH_STYLE}
-              onChange={(event) => {
-                write(replace(stops, index, { color: event.target.value }));
-              }}
-            />
-            <input
-              type="range"
-              aria-label={t('color.anchorPosition', { index: index + 1 })}
-              min={0}
-              max={1}
-              step={POSITION_STEP}
-              value={stop.position}
-              style={SLIDER_STYLE}
-              onChange={(event) => {
-                write(
-                  replace(stops, index, {
-                    position: hold(stops, index, event.target.valueAsNumber),
-                  }),
-                );
-              }}
-            />
-            <span style={POSITION_STYLE}>
-              {formatDecimal(stop.position, POSITION_DECIMALS)}
-            </span>
-            <Button
-              icon="cross"
-              variant="minimal"
-              size="small"
-              aria-label={t('color.removeAnchor', { index: index + 1 })}
-              disabled={stops.length <= MINIMUM_STOPS}
-              onClick={() => {
-                write(stops.filter((_, at) => at !== index));
-              }}
-            />
-          </div>
-        ))}
-      </div>
-
-      <div style={FOOTER_STYLE}>
+      <div style={ROW_STYLE}>
+        <input
+          ref={colorInput}
+          type="color"
+          aria-label={t('color.anchorColour', { index: selected + 1 })}
+          value={normalizeHexColor(stop?.color ?? '') ?? UNREADABLE_COLOR}
+          style={SWATCH_STYLE}
+          onChange={(event) => {
+            write(recolorColorStop(stops, selected, event.target.value));
+          }}
+        />
+        <NumberInput
+          ariaLabel={t('color.anchorPosition', { index: selected + 1 })}
+          value={stop?.position ?? 0}
+          min={0}
+          max={1}
+          step={POSITION_STEP}
+          size="small"
+          buttons={false}
+          style={POSITION_STYLE}
+          onChange={(position) => {
+            const moved = moveColorStop(stops, selected, position);
+            write(moved.stops);
+            setPicked(moved.index);
+          }}
+        />
         <Button
-          icon="plus"
+          icon="trash"
+          variant="minimal"
           size="small"
-          text={t('color.addColour')}
-          disabled={stops.length >= MAXIMUM_CUSTOM_STOPS}
+          aria-label={t('color.removeAnchor', { index: selected + 1 })}
+          disabled={!removable}
           onClick={() => {
-            write(withAddedStop(value));
+            remove(selected);
           }}
         />
+        <span style={SPACER_STYLE} />
         <HTMLSelect
           aria-label={t('color.path')}
           value={value.interpolation}
@@ -141,59 +163,22 @@ export function ColorScaleEditor(props: ColorScaleEditorProps): ReactElement {
           }}
         />
       </div>
-    </div>
-  );
-}
 
-function replace(
-  stops: readonly ColorStop[],
-  index: number,
-  patch: Partial<ColorStop>,
-): ColorStop[] {
-  return stops.map((stop, at) => (at === index ? { ...stop, ...patch } : stop));
-}
+      <ColorScaleTone stops={stops} onChange={write} />
 
-/**
- * A position an anchor may take: never past either of its neighbours, so the
- * rows never reorder under a dragging finger.
- * @param stops - The anchors as they stand.
- * @param index - Which of them is being moved.
- * @param position - Where it is being moved to.
- * @returns The position it is allowed to take.
- */
-function hold(
-  stops: readonly ColorStop[],
-  index: number,
-  position: number,
-): number {
-  if (!Number.isFinite(position)) return stops[index]?.position ?? 0;
-  const low = stops[index - 1]?.position ?? 0;
-  const high = stops[index + 1]?.position ?? 1;
-  return Math.min(high, Math.max(low, position));
+      <p style={HINT_STYLE}>{t('color.editorHint')}</p>
+    </div>
+  );
 }
 
-/**
- * The anchors with one more, dropped in the widest gap and taking the colour
- * the scale already has there — so adding one changes nothing until it is moved.
- * @param scale - The scale being edited.
- * @returns Its anchors, with the new one among them.
- */
-function withAddedStop(scale: ColorScale): ColorStop[] {
-  const stops = [...scale.stops];
-  let widest = 0;
-  let at = 1;
-  for (let index = 1; index < stops.length; index++) {
-    const span =
-      (stops[index]?.position ?? 0) - (stops[index - 1]?.position ?? 0);
-    if (span > widest) {
-      widest = span;
-      at = index;
-    }
-  }
-  const position =
-    ((stops[at]?.position ?? 1) + (stops[at - 1]?.position ?? 0)) / 2;
-  stops.splice(at, 0, { position, color: colorAt(scale, position) });
-  return stops;
+function isEditable(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false;
+  return (
+    target.isContentEditable ||
+    target instanceof HTMLInputElement ||
+    target instanceof HTMLTextAreaElement ||
+    target instanceof HTMLSelectElement
+  );
 }
 
 const PANEL_STYLE = {
@@ -201,18 +186,13 @@ const PANEL_STYLE = {
   flexDirection: 'column',
   gap: 10,
   padding: 12,
-  minWidth: 280,
-} as const satisfies CSSProperties;
-
-const ROWS_STYLE = {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 4,
+  minWidth: 320,
 } as const satisfies CSSProperties;
 
 const ROW_STYLE = {
   display: 'flex',
   alignItems: 'center',
+  flexWrap: 'wrap',
   gap: 8,
 } as const satisfies CSSProperties;
 
@@ -225,23 +205,17 @@ const SWATCH_STYLE = {
   cursor: 'pointer',
 } as const satisfies CSSProperties;
 
-const SLIDER_STYLE = {
-  flex: '1 1 auto',
-  minWidth: 90,
-  accentColor: 'var(--accent, currentColor)',
+const POSITION_STYLE = {
+  width: 64,
 } as const satisfies CSSProperties;
 
-const POSITION_STYLE = {
-  fontSize: 12,
-  fontVariantNumeric: 'tabular-nums',
-  width: 30,
-  textAlign: 'right',
+const SPACER_STYLE = {
+  flex: '1 1 auto',
 } as const satisfies CSSProperties;
 
-const FOOTER_STYLE = {
-  display: 'flex',
-  alignItems: 'center',
-  flexWrap: 'wrap',
-  gap: 8,
-  justifyContent: 'space-between',
+const HINT_STYLE = {
+  margin: 0,
+  color: 'var(--text-muted)',
+  fontSize: 12,
+  lineHeight: 1.4,
 } as const satisfies CSSProperties;

package/src/color/ui/ColorScaleSelect.tsx

@@ -9,15 +9,28 @@ import type { CSSProperties, ReactElement } from 'react';
 import { useState } from 'react';
 
 import { useChromeT } from '../../i18n/ui/useT.ts';
+import { OverlayValueButton } from '../../overlay/ui/OverlayValueButton.tsx';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
+import { normalizeHexColor } from '../core/hex.ts';
+import { sampleScale } from '../core/interpolate.ts';
 import { formatColorScale, resolveColorScale } from '../core/scaleText.ts';
 import { COLOR_SCALES } from '../core/scales.ts';
+import {
+  UNIFORM_COLOR_SCALE_ID,
+  formatUniformColorScale,
+  isUniformColorScale,
+  uniformSwatch,
+} from '../core/uniform.ts';
 
 import { ColorScaleBar } from './ColorScaleBar.tsx';
 import { ColorScaleEditor } from './ColorScaleEditor.tsx';
 import { ColorScaleEntry } from './ColorScaleEntry.tsx';
 
 const BUTTON_BAR_WIDTH = 72;
+// Its two ends and its middle: the most dots `OverlaySwatchIcon` draws.
+const BAR_SWATCHES = 3;
+// A `type="color"` input only takes six hex digits.
+const UNREADABLE_COLOR = '#000000';
 
 /** What {@link ColorScaleSelect} chooses. */
 export interface ColorScaleSelectProps {
@@ -38,6 +51,22 @@ export interface ColorScaleSelectProps {
    * @default true
    */
   allowCustom?: boolean;
+  /**
+   * Whether the menu opens on one colour for every value, which a figure that
+   * needs no key — a plain table to print — is drawn with. Chosen, it writes
+   * {@link UNIFORM_COLOR_SCALE_ID}; its swatch picks the colour, written as
+   * `formatUniformColorScale` does.
+   * @default false
+   */
+  allowUniform?: boolean;
+  /**
+   * Whether it is a form field — a caption over a full-width button — or a
+   * setting on a figure's bar, writing its name and its scale on one compact
+   * line as `OverlayValueButton` does. The bar form needs an `OverlayLayer` or
+   * a `FigureBar` above it for its measurements.
+   * @default 'field'
+   */
+  appearance?: 'field' | 'bar';
   /**
    * Value of the `data-testid` attribute of the button, for the end-to-end tests.
    * @default undefined
@@ -67,11 +96,15 @@ export function ColorScaleSelect(props: ColorScaleSelectProps): ReactElement {
     onChange,
     label = '',
     allowCustom = true,
+    allowUniform = false,
+    appearance = 'field',
     testId,
   } = props;
   const t = useChromeT();
   const [isOpen, setOpen] = useState(false);
   const [isEditing, setEditing] = useState(false);
+  const uniform = allowUniform && isUniformColorScale(value);
+  const oneColor = uniformSwatch(uniform ? value : undefined).background;
   const resolved = resolveColorScale(value);
 
   const content = isEditing ? (
@@ -104,6 +137,36 @@ export function ColorScaleSelect(props: ColorScaleSelectProps): ReactElement {
     </div>
   ) : (
     <Menu style={MENU_STYLE}>
+      {allowUniform ? (
+        <MenuItem
+          roleStructure="listoption"
+          selected={uniform}
+          htmlTitle={t('color.uniformDescription')}
+          text={
+            <span style={UNIFORM_ITEM_STYLE}>
+              <span>{t('color.uniform')}</span>
+              <input
+                type="color"
+                aria-label={t('color.uniformColour')}
+                title={t('color.uniformColour')}
+                value={normalizeHexColor(oneColor) ?? UNREADABLE_COLOR}
+                style={UNIFORM_INPUT_STYLE}
+                // The swatch picks the colour; the rest of the row chooses
+                // one colour and closes the menu.
+                onClick={(event) => {
+                  event.stopPropagation();
+                }}
+                onChange={(event) => {
+                  onChange(formatUniformColorScale(event.target.value));
+                }}
+              />
+            </span>
+          }
+          onClick={() => {
+            onChange(uniform ? value : UNIFORM_COLOR_SCALE_ID);
+          }}
+        />
+      ) : null}
       {COLOR_SCALES.map((entry, index) => (
         <ColorScaleEntry
           key={entry.id}
@@ -112,7 +175,7 @@ export function ColorScaleSelect(props: ColorScaleSelectProps): ReactElement {
           kind={entry.kind}
           description={entry.description}
           previous={COLOR_SCALES[index - 1]?.kind}
-          selected={entry.id === resolved.id}
+          selected={!uniform && entry.id === resolved.id}
           onChange={onChange}
         />
       ))}
@@ -122,7 +185,9 @@ export function ColorScaleSelect(props: ColorScaleSelectProps): ReactElement {
           <MenuItem
             icon="edit"
             text={t('color.customEllipsis')}
-            label={resolved.id === null ? t('color.inUse') : undefined}
+            label={
+              resolved.id === null && !uniform ? t('color.inUse') : undefined
+            }
             shouldDismissPopover={false}
             onClick={() => {
               setEditing(true);
@@ -133,44 +198,79 @@ export function ColorScaleSelect(props: ColorScaleSelectProps): ReactElement {
     </Menu>
   );
 
-  return (
-    <label className={className} style={FIELD_STYLE}>
-      {label === '' ? null : <span style={CAPTION_STYLE}>{label}</span>}
-      <PopoverNext
-        // A fade, like the pickers a site puts beside this one: the default
-        // grows the panel from a third of its size over about a second, which
-        // reads as the row behaving differently control by control.
-        animation="minimal"
-        arrow={false}
-        placement="bottom-start"
-        isOpen={isOpen}
-        content={content}
-        onInteraction={(next) => {
-          setOpen(next);
-          if (!next) setEditing(false);
-        }}
-      >
-        <Button
-          alignText="start"
-          aria-label={label === '' ? t('color.colourScale') : label}
-          data-testid={testId}
-          endIcon="caret-down"
-          fill
-          text={
-            <span style={BUTTON_TEXT_STYLE}>
-              <span>
-                {resolved.id === null
-                  ? t('color.custom')
-                  : t.or(`color.scale.${resolved.id}.label`, resolved.label)}
-              </span>
+  const scaleName = uniform
+    ? t('color.uniform')
+    : resolved.id === null
+      ? t('color.custom')
+      : t.or(`color.scale.${resolved.id}.label`, resolved.label);
+  const name = label === '' ? t('color.colourScale') : label;
+
+  const target =
+    appearance === 'bar' ? (
+      <OverlayValueButton
+        label={name}
+        value={scaleName}
+        swatches={
+          uniform ? [oneColor] : sampleScale(resolved.scale, BAR_SWATCHES)
+        }
+        active={isOpen}
+        opensMenu
+        testId={testId}
+      />
+    ) : (
+      <Button
+        alignText="start"
+        aria-label={name}
+        data-testid={testId}
+        endIcon="caret-down"
+        fill
+        text={
+          <span style={BUTTON_TEXT_STYLE}>
+            <span>{scaleName}</span>
+            {uniform ? (
+              <span
+                style={{
+                  ...UNIFORM_BAR_STYLE,
+                  width: BUTTON_BAR_WIDTH,
+                  background: oneColor,
+                }}
+              />
+            ) : (
               <ColorScaleBar
                 scale={resolved.scale}
                 style={{ width: BUTTON_BAR_WIDTH }}
               />
-            </span>
-          }
-        />
-      </PopoverNext>
+            )}
+          </span>
+        }
+      />
+    );
+
+  const popover = (
+    <PopoverNext
+      // A fade, like the pickers a site puts beside this one: the default
+      // grows the panel from a third of its size over about a second, which
+      // reads as the row behaving differently control by control.
+      animation="minimal"
+      arrow={false}
+      placement="bottom-start"
+      isOpen={isOpen}
+      content={content}
+      onInteraction={(next) => {
+        setOpen(next);
+        if (!next) setEditing(false);
+      }}
+    >
+      {target}
+    </PopoverNext>
+  );
+
+  if (appearance === 'bar') return popover;
+
+  return (
+    <label className={className} style={FIELD_STYLE}>
+      {label === '' ? null : <span style={CAPTION_STYLE}>{label}</span>}
+      {popover}
     </label>
   );
 }
@@ -197,6 +297,30 @@ const BUTTON_TEXT_STYLE = {
   width: '100%',
 } as const satisfies CSSProperties;
 
+// The lines of the menu, so one colour reads as one more choice among them.
+const UNIFORM_ITEM_STYLE = {
+  display: 'grid',
+  gridTemplateColumns: '7rem 1fr',
+  alignItems: 'center',
+  gap: 10,
+  minWidth: 220,
+} as const satisfies CSSProperties;
+
+const UNIFORM_BAR_STYLE = {
+  display: 'inline-block',
+  height: 12,
+  borderRadius: 2,
+} as const satisfies CSSProperties;
+
+const UNIFORM_INPUT_STYLE = {
+  width: '100%',
+  height: 18,
+  padding: 0,
+  border: 0,
+  background: 'none',
+  cursor: 'pointer',
+} as const satisfies CSSProperties;
+
 const MENU_STYLE = {
   maxHeight: '60vh',
   overflowY: 'auto',