react-cheminfo 0.50.0 → 0.52.0

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',

package/src/color/ui/ColorScaleTone.tsx

@@ -0,0 +1,103 @@
+import { Slider } from '@blueprintjs/core';
+import type { CSSProperties, ReactElement } from 'react';
+import { useRef } from 'react';
+
+import { formatPercent } from '../../format/core/numbers.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
+import type { ColorStop } from '../core/interpolate.ts';
+import type { ScaleTone } from '../core/tone.ts';
+import { scaleTone, setScaleTone } from '../core/tone.ts';
+
+const STEP = 0.01;
+// Above zero: a grey or a black anchor has no hue left to bring back.
+const MINIMUM_SATURATION = 0.1;
+const MINIMUM_VALUE = 0.2;
+
+/** What {@link ColorScaleTone} edits. */
+export interface ColorScaleToneProps {
+  /** The anchors of the scale being edited. */
+  stops: readonly ColorStop[];
+  /** Called with the recoloured anchors on every move of either slider. */
+  onChange: (stops: ColorStop[]) => void;
+}
+
+/**
+ * Two sliders setting the saturation and the brightness of every anchor at
+ * once, each anchor keeping its hue.
+ * @param props - See {@link ColorScaleToneProps}.
+ * @returns The two sliders, each with its value.
+ */
+export function ColorScaleTone(props: ColorScaleToneProps): ReactElement {
+  const { stops, onChange } = props;
+  const t = useChromeT();
+  const tone = scaleTone(stops);
+  // The anchors as a drag found them, so their hues are read once per drag
+  // rather than off colours already rounded by the previous move.
+  const base = useRef<readonly ColorStop[] | null>(null);
+
+  function set(next: Partial<ScaleTone>): void {
+    base.current ??= stops;
+    onChange(setScaleTone(base.current, next));
+  }
+
+  function release(): void {
+    base.current = null;
+  }
+
+  return (
+    <div style={GRID_STYLE} title={t('color.toneHelp')}>
+      <span style={LABEL_STYLE}>{t('color.saturation')}</span>
+      <span style={SLIDER_STYLE}>
+        <Slider
+          min={MINIMUM_SATURATION}
+          max={1}
+          stepSize={STEP}
+          labelRenderer={false}
+          value={Math.max(MINIMUM_SATURATION, tone.saturation)}
+          onChange={(saturation) => {
+            set({ saturation });
+          }}
+          onRelease={release}
+        />
+      </span>
+      <span style={VALUE_STYLE}>{formatPercent(tone.saturation, 0)}</span>
+      <span style={LABEL_STYLE}>{t('color.brightness')}</span>
+      <span style={SLIDER_STYLE}>
+        <Slider
+          min={MINIMUM_VALUE}
+          max={1}
+          stepSize={STEP}
+          labelRenderer={false}
+          value={Math.max(MINIMUM_VALUE, tone.value)}
+          onChange={(value) => {
+            set({ value });
+          }}
+          onRelease={release}
+        />
+      </span>
+      <span style={VALUE_STYLE}>{formatPercent(tone.value, 0)}</span>
+    </div>
+  );
+}
+
+const GRID_STYLE = {
+  display: 'grid',
+  gridTemplateColumns: 'max-content minmax(0, 1fr) 3.5em',
+  alignItems: 'center',
+  columnGap: 10,
+  rowGap: 4,
+} as const satisfies CSSProperties;
+
+const LABEL_STYLE = { fontSize: 12 } as const satisfies CSSProperties;
+
+/** Room on both sides, so the handle is never clipped at either end. */
+const SLIDER_STYLE = {
+  display: 'block',
+  paddingInline: 8,
+} as const satisfies CSSProperties;
+
+const VALUE_STYLE = {
+  fontSize: 12,
+  fontVariantNumeric: 'tabular-nums',
+  textAlign: 'right',
+} as const satisfies CSSProperties;

package/src/color/ui/ColorScaleTrack.tsx

@@ -0,0 +1,239 @@
+import type {
+  CSSProperties,
+  KeyboardEvent,
+  PointerEvent,
+  ReactElement,
+} from 'react';
+import { useRef } from 'react';
+
+import { useChromeT } from '../../i18n/ui/useT.ts';
+import type { ColorScale, ColorStop } from '../core/interpolate.ts';
+import { addColorStop, moveColorStop } from '../core/stops.ts';
+
+import { ColorScaleBar } from './ColorScaleBar.tsx';
+
+const STRIP_HEIGHT = 28;
+const STRIP_SAMPLES = 64;
+const SWATCH_SIZE = 14;
+const KEY_STEP = 0.01;
+const KEY_STEP_LARGE = 0.1;
+
+/** What {@link ColorScaleTrack} draws and hands back. */
+export interface ColorScaleTrackProps {
+  /** The scale being edited. */
+  scale: ColorScale;
+  /** The anchor whose colour and position the editor shows. */
+  selected: number;
+  /** The anchor pointed at, which Backspace would remove. */
+  hovered: number | null;
+  /** Called when an anchor is clicked, focused, dragged or added. */
+  onSelect: (index: number) => void;
+  /** Called when an anchor is pointed at, and with `null` when it is left. */
+  onHover: (index: number | null) => void;
+  /** Called with the anchors after every add or move. */
+  onChange: (stops: ColorStop[]) => void;
+  /** Called when an anchor asks to be removed, from the keyboard. */
+  onRemove: (index: number) => void;
+  /** Called when an anchor is double-clicked, to recolour it. */
+  onPick: () => void;
+}
+
+/**
+ * The scale as one strip with its anchors on it: a click on the strip adds an
+ * anchor there, and an anchor is dragged along it.
+ * @param props - See {@link ColorScaleTrackProps}.
+ * @returns The strip and its anchors.
+ */
+export function ColorScaleTrack(props: ColorScaleTrackProps): ReactElement {
+  const {
+    scale,
+    selected,
+    hovered,
+    onSelect,
+    onHover,
+    onChange,
+    onRemove,
+    onPick,
+  } = props;
+  const t = useChromeT();
+  // The anchors as the drag left them: a pointer can move twice before the
+  // page renders the first move, and the second must not undo it.
+  const drag = useRef<{ index: number; stops: ColorStop[] } | null>(null);
+
+  function start(event: PointerEvent<HTMLDivElement>): void {
+    if (event.button !== 0) return;
+    const anchor = (event.target as HTMLElement).closest<HTMLElement>(
+      '[data-anchor]',
+    );
+    let index = Number(anchor?.dataset.anchor);
+    let stops = [...scale.stops];
+    if (anchor === null) {
+      const added = addColorStop(scale, positionOf(event));
+      if (added === null) return;
+      ({ index, stops } = added);
+      onChange(stops);
+    }
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    anchor?.focus({ focusVisible: false });
+    drag.current = { index, stops };
+    onSelect(index);
+  }
+
+  function move(event: PointerEvent<HTMLDivElement>): void {
+    if (drag.current === null) return;
+    const moved = moveColorStop(
+      drag.current.stops,
+      drag.current.index,
+      positionOf(event),
+    );
+    drag.current = moved;
+    onChange(moved.stops);
+    onSelect(moved.index);
+    onHover(moved.index);
+  }
+
+  function stop(): void {
+    drag.current = null;
+  }
+
+  function nudge(event: KeyboardEvent<HTMLSpanElement>, index: number): void {
+    if (event.key === 'Backspace' || event.key === 'Delete') {
+      event.preventDefault();
+      event.stopPropagation();
+      onRemove(index);
+      return;
+    }
+    const step = event.shiftKey ? KEY_STEP_LARGE : KEY_STEP;
+    const delta =
+      event.key === 'ArrowRight' || event.key === 'ArrowUp'
+        ? step
+        : event.key === 'ArrowLeft' || event.key === 'ArrowDown'
+          ? -step
+          : 0;
+    if (delta === 0) return;
+    event.preventDefault();
+    // From the keyboard an anchor stops at its neighbours, so focus stays on
+    // the anchor being moved.
+    const low = scale.stops[index - 1]?.position ?? 0;
+    const high = scale.stops[index + 1]?.position ?? 1;
+    const position = (scale.stops[index]?.position ?? 0) + delta;
+    const moved = moveColorStop(
+      scale.stops,
+      index,
+      Math.min(high, Math.max(low, position)),
+    );
+    onChange(moved.stops);
+  }
+
+  return (
+    <div
+      style={TRACK_STYLE}
+      onPointerDown={start}
+      onPointerMove={move}
+      onPointerUp={stop}
+      onPointerCancel={stop}
+    >
+      <ColorScaleBar
+        scale={scale}
+        height={STRIP_HEIGHT}
+        samples={STRIP_SAMPLES}
+        label={t('color.scaleBeingEdited')}
+      />
+      {scale.stops.map((anchor, index) => (
+        <span
+          // An anchor has no identity but its rank, and keeping the element
+          // keeps the focus on it while it is dragged past a neighbour.
+          key={`anchor-${String(index)}`}
+          data-anchor={index}
+          role="slider"
+          tabIndex={0}
+          aria-label={t('color.anchorPosition', { index: index + 1 })}
+          aria-valuemin={0}
+          aria-valuemax={1}
+          aria-valuenow={anchor.position}
+          title={anchor.color}
+          style={{
+            ...ANCHOR_STYLE,
+            left: `${String(anchor.position * 100)}%`,
+            zIndex: index === selected ? 2 : 1,
+          }}
+          onFocus={() => {
+            onSelect(index);
+          }}
+          onKeyDown={(event) => {
+            nudge(event, index);
+          }}
+          onPointerEnter={() => {
+            if (drag.current === null) onHover(index);
+          }}
+          onPointerLeave={() => {
+            if (drag.current === null) onHover(null);
+          }}
+          onDoubleClick={onPick}
+        >
+          <span style={NEEDLE_STYLE} />
+          <span
+            style={{
+              ...SWATCH_STYLE,
+              background: anchor.color,
+              boxShadow:
+                index === selected
+                  ? SELECTED_RING
+                  : index === hovered
+                    ? HOVERED_RING
+                    : SWATCH_STYLE.boxShadow,
+            }}
+          />
+        </span>
+      ))}
+    </div>
+  );
+}
+
+function positionOf(event: PointerEvent<HTMLDivElement>): number {
+  const box = event.currentTarget.getBoundingClientRect();
+  return box.width === 0 ? 0 : (event.clientX - box.left) / box.width;
+}
+
+const SELECTED_RING = '0 0 0 2px var(--accent)';
+const HOVERED_RING = '0 0 0 2px var(--text-muted)';
+
+const TRACK_STYLE = {
+  position: 'relative',
+  margin: `0 ${String(SWATCH_SIZE / 2 + 2)}px`,
+  paddingBottom: SWATCH_SIZE + 4,
+  cursor: 'copy',
+  touchAction: 'none',
+  userSelect: 'none',
+} as const satisfies CSSProperties;
+
+const ANCHOR_STYLE = {
+  position: 'absolute',
+  top: -3,
+  bottom: 0,
+  display: 'flex',
+  width: SWATCH_SIZE + 4,
+  flexDirection: 'column',
+  alignItems: 'center',
+  cursor: 'ew-resize',
+  outline: 'none',
+  transform: 'translateX(-50%)',
+} as const satisfies CSSProperties;
+
+const NEEDLE_STYLE = {
+  width: 3,
+  height: STRIP_HEIGHT + 6,
+  border: '1px solid var(--text)',
+  borderRadius: 2,
+  background: 'var(--surface)',
+} as const satisfies CSSProperties;
+
+const SWATCH_STYLE = {
+  width: SWATCH_SIZE,
+  height: SWATCH_SIZE,
+  marginTop: -2,
+  border: '2px solid var(--surface)',
+  borderRadius: 4,
+  boxShadow: '0 0 0 1px var(--border-strong)',
+} as const satisfies CSSProperties;

package/src/download/core/copyFigure.ts

@@ -0,0 +1,20 @@
+import { writeBlobToClipboard } from '../../clipboard/core/writeBlobToClipboard.ts';
+
+/** What the last copy came to, when it is worth a line of its own. */
+export type FigureNotice = 'copied' | 'copyUnsupported';
+
+/**
+ * Put a figure on the clipboard as a PNG.
+ *
+ * Call it from the click itself, with the picture still being painted: Safari
+ * only allows a clipboard write the click started.
+ * @param png - The picture being painted.
+ * @returns `copied`, or `copyUnsupported` where the clipboard takes no picture.
+ * @throws {Error} The painting's own error, when the picture could not be
+ *   painted — a failure to report, not a browser that cannot copy.
+ */
+export async function copyFigure(png: Promise<Blob>): Promise<FigureNotice> {
+  if (await writeBlobToClipboard(png)) return 'copied';
+  await png;
+  return 'copyUnsupported';
+}

package/src/download/core/figureHtml.ts

@@ -70,6 +70,7 @@ function paintElement(
       markup: drawingMarkup(element),
       x: box.left - context.origin.left,
       y: box.top - context.origin.top,
+      size: { width: box.width, height: box.height },
     });
     return;
   }

package/src/download/core/figureHtmlMarkup.ts

@@ -89,6 +89,13 @@ export interface HtmlPaintDrawing {
   x: number;
   /** Its top edge, in pixels from the top of the part. */
   y: number;
+  /**
+   * Its width and height as the browser drew it. A drawing sized by CSS
+   * carries no size of its own, and an `<svg>` without one fills the whole
+   * file.
+   * @default undefined — the markup is placed as it is
+   */
+  size?: { width: number; height: number };
 }
 
 /** Everything inside an element the page drew faded. */
@@ -123,7 +130,7 @@ function paintMarkup(paint: HtmlPaint): string {
     case 'text':
       return textMarkup(paint);
     case 'drawing':
-      return `<g transform="translate(${round(paint.x)} ${round(paint.y)})">${paint.markup}</g>`;
+      return `<g transform="translate(${round(paint.x)} ${round(paint.y)})">${sizedDrawing(paint)}</g>`;
     case 'group':
       return `<g opacity="${round(paint.opacity)}">${figureHtmlMarkup(paint.children)}</g>`;
     default:
@@ -131,6 +138,12 @@ function paintMarkup(paint: HtmlPaint): string {
   }
 }
 
+function sizedDrawing(drawing: HtmlPaintDrawing): string {
+  const { markup, size } = drawing;
+  if (size === undefined) return markup;
+  return `<svg width="${round(size.width)}" height="${round(size.height)}" overflow="visible">${markup}</svg>`;
+}
+
 function boxMarkup(box: HtmlPaintBox): string {
   const { x, y, width, height, fill, stroke, dash } = box;
   const { radius = 0, strokeWidth = 1 } = box;

package/src/download/core/index.ts

@@ -1,3 +1,5 @@
+export type { FigureNotice } from './copyFigure.ts';
+export { copyFigure } from './copyFigure.ts';
 export { cssTokenNames, resolveCssTokens } from './cssTokens.ts';
 export { downloadBlob } from './downloadBlob.ts';
 export type { DownloadFigureOptions, FigureFormat } from './downloadFigure.ts';