react-cheminfo 0.49.0 → 0.51.0

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

package/src/download/ui/FigureDownloadPanel.tsx

@@ -5,6 +5,7 @@ import { OverlayAction } from '../../overlay/ui/OverlayAction.tsx';
 import { OverlayPanel } from '../../overlay/ui/OverlayPanel.tsx';
 import type { OverlayOption } from '../../overlay/ui/OverlayRow.tsx';
 import { OverlaySegmented } from '../../overlay/ui/OverlaySegmented.tsx';
+import type { FigureNotice } from '../core/copyFigure.ts';
 import type { FigureFormat } from '../core/downloadFigure.ts';
 import { figureLayoutSize } from '../core/figureLayout.ts';
 import type { FigurePixels } from '../core/figureScale.ts';
@@ -18,7 +19,6 @@ import {
 import type { FigureSizing } from './FigureSizeRows.tsx';
 import { FigureSizeRows } from './FigureSizeRows.tsx';
 import { hintOf } from './figureDownloadHint.ts';
-import type { FigureNotice } from './useFigureActions.ts';
 
 /** What {@link FigureDownloadPanel} is drawn from. */
 export interface FigureDownloadPanelProps {
@@ -51,9 +51,8 @@ export interface FigureDownloadPanelProps {
   /**
    * Called when they press copy, which puts a PNG at the resolution picked on
    * the clipboard.
-   * @default undefined — no copy is offered
    */
-  onCopy?: () => void;
+  onCopy: () => void;
   /**
    * Whether the SVG holds a rendered picture rather than vector drawings, as
    * for a WebGL scene: its resolution is then the pixels of that picture, it
@@ -122,14 +121,12 @@ export function FigureDownloadPanel(
             disabled={saving || size === null}
             onClick={onSave}
           />
-          {onCopy === undefined ? null : (
-            <OverlayAction
-              text={t('clipboard.copy')}
-              icon="clipboard"
-              disabled={saving || size === null}
-              onClick={onCopy}
-            />
-          )}
+          <OverlayAction
+            text={t('clipboard.copy')}
+            icon="clipboard"
+            disabled={saving || size === null}
+            onClick={onCopy}
+          />
         </>
       }
     >

package/src/download/ui/figureDownloadHint.ts

@@ -1,11 +1,10 @@
 import type { ChromeKey } from '../../i18n/core/chromeCatalog.ts';
 import type { Translate } from '../../i18n/ui/useT.ts';
+import type { FigureNotice } from '../core/copyFigure.ts';
 import type { FigureFormat } from '../core/downloadFigure.ts';
 import type { FigurePixels } from '../core/figureScale.ts';
 import { figurePixels, formatFigurePixels } from '../core/figureScale.ts';
 
-import type { FigureNotice } from './useFigureActions.ts';
-
 /** What the line at the foot of the panel is written from. */
 export interface HintState {
   /** Which file the reader is about to write. */

package/src/download/ui/index.ts

@@ -19,4 +19,3 @@ export type {
   FigureDownloadState,
 } from './useFigureDownload.tsx';
 export { useFigureDownload } from './useFigureDownload.tsx';
-export type { FigureNotice } from './useFigureActions.ts';

package/src/download/ui/useFigureActions.ts

@@ -1,6 +1,4 @@
-import { useCallback, useState } from 'react';
-
-import { writeImageToClipboard } from '../../clipboard/core/copyPng.ts';
+import { copyFigure } from '../core/copyFigure.ts';
 import type { FigureFormat } from '../core/downloadFigure.ts';
 import { downloadFigure } from '../core/downloadFigure.ts';
 import { figurePng } from '../core/figurePng.ts';
@@ -8,9 +6,8 @@ import type { FigurePixels } from '../core/figureScale.ts';
 import { figureSvg } from '../core/figureSvg.ts';
 
 import type { FigureRedraw } from './useFigureRedraw.tsx';
-
-/** What the last copy came to, when it is worth a line of its own. */
-export type FigureNotice = 'copied' | 'copyUnsupported';
+import type { FigureTask } from './useFigureTask.ts';
+import { useFigureTask } from './useFigureTask.ts';
 
 /** What {@link useFigureActions} works from. */
 export interface FigureActionsOptions {
@@ -34,19 +31,11 @@ export interface FigureActionsOptions {
 }
 
 /** What {@link useFigureActions} hands back. */
-export interface FigureActions {
+export interface FigureActions extends Omit<FigureTask, 'run'> {
   /** Write the figure to a file, in the format picked. */
   save: () => void;
   /** Put the figure on the clipboard, as a PNG at the resolution picked. */
   copy: () => void;
-  /** Whether a file or a copy is being written right now. */
-  busy: boolean;
-  /** What went wrong the last time, if anything. */
-  failure: string | null;
-  /** What the last copy came to, if it is still what the panel describes. */
-  notice: FigureNotice | null;
-  /** Forget the last outcome, once the choices it answered have changed. */
-  clear: () => void;
 }
 
 /**
@@ -60,9 +49,7 @@ export interface FigureActions {
 export function useFigureActions(options: FigureActionsOptions): FigureActions {
   const { targetId, format, scale, fileName, background } = options;
   const { redrawAt, redraw } = options;
-  const [busy, setBusy] = useState(false);
-  const [failure, setFailure] = useState<string | null>(null);
-  const [notice, setNotice] = useState<FigureNotice | null>(null);
+  const { run, busy, failure, notice, clear } = useFigureTask();
 
   function withFigure(write: (box: string | Element) => Promise<void>) {
     return redrawAt === null
@@ -70,17 +57,6 @@ export function useFigureActions(options: FigureActionsOptions): FigureActions {
       : redraw(targetId, redrawAt, write);
   }
 
-  function run(task: Promise<FigureNotice | null>): void {
-    setBusy(true);
-    setFailure(null);
-    setNotice(null);
-    void task
-      .then(setNotice, (error: unknown) => {
-        setFailure(error instanceof Error ? error.message : String(error));
-      })
-      .finally(() => setBusy(false));
-  }
-
   function save(): void {
     const options = { format, scale, fileName, background };
     run(withFigure((box) => downloadFigure(box, options)).then(() => null));
@@ -94,20 +70,8 @@ export function useFigureActions(options: FigureActionsOptions): FigureActions {
         resolve(await figurePng(figureSvg(box, { background }), scale));
       }).catch(reject);
     });
-    // A browser whose clipboard takes text only never reads the picture, so
-    // its failure would otherwise go unhandled.
-    png.catch(() => undefined);
-    run(
-      writeImageToClipboard(png).then((copied) =>
-        copied ? 'copied' : 'copyUnsupported',
-      ),
-    );
+    run(copyFigure(png));
   }
 
-  const clear = useCallback(() => {
-    setFailure(null);
-    setNotice(null);
-  }, []);
-
   return { save, copy, busy, failure, notice, clear };
 }

package/src/download/ui/useFigureTask.ts

@@ -0,0 +1,46 @@
+import { useCallback, useState } from 'react';
+
+import type { FigureNotice } from '../core/copyFigure.ts';
+
+/** What {@link useFigureTask} hands back. */
+export interface FigureTask {
+  /** Run a save or a copy, keeping what it came to. */
+  run: (task: Promise<FigureNotice | null>) => void;
+  /** Whether a file or a copy is being written right now. */
+  busy: boolean;
+  /** What went wrong the last time, if anything. */
+  failure: string | null;
+  /** What the last copy came to, if it is still what the panel describes. */
+  notice: FigureNotice | null;
+  /** Forget the last outcome, once the choices it answered have changed. */
+  clear: () => void;
+}
+
+/**
+ * The state behind the figure panel's save and copy buttons, whatever the
+ * figure is drawn with: whether one is running, and what the last one came to.
+ * @returns See {@link FigureTask}.
+ */
+export function useFigureTask(): FigureTask {
+  const [busy, setBusy] = useState(false);
+  const [failure, setFailure] = useState<string | null>(null);
+  const [notice, setNotice] = useState<FigureNotice | null>(null);
+
+  const run = useCallback((task: Promise<FigureNotice | null>) => {
+    setBusy(true);
+    setFailure(null);
+    setNotice(null);
+    void task
+      .then(setNotice, (error: unknown) => {
+        setFailure(error instanceof Error ? error.message : String(error));
+      })
+      .finally(() => setBusy(false));
+  }, []);
+
+  const clear = useCallback(() => {
+    setFailure(null);
+    setNotice(null);
+  }, []);
+
+  return { run, busy, failure, notice, clear };
+}