react-cheminfo 0.46.0 → 0.48.0

package/src/chart/core/zoomDomain.ts

@@ -55,7 +55,17 @@ export interface DragBox {
   toY: number;
 }
 
-/** The drag as it is being made, for the preview rectangle to be drawn from. */
+/**
+ * The drag as it is being made, for the preview rectangle to be drawn from.
+ *
+ * Its **vertical corners are the window the release will take**, not the two
+ * places the hand passed through. The two differ by the baseline a viewer's
+ * rules hold: on a mirrored chart zero runs across the middle of the plot, so a
+ * drag made wholly inside the reflected half crosses the baseline without ever
+ * reaching it, and the release stretches the window back to zero. A rectangle
+ * drawn at the height of the hand would promise a band between two intensities
+ * that letting go does not give.
+ */
 export interface ZoomSelection extends DragBox {
   /**
    * Whether letting go here would take the y axis with it, which is what the
@@ -88,15 +98,22 @@ export function zoomSelection(
   if (drag === null) return null;
   const {
     baseline = DEFAULT_Y_AXIS_RULES.baseline,
+    keepBaseline = DEFAULT_Y_AXIS_RULES.keepBaseline,
     pointsDown = DEFAULT_Y_AXIS_RULES.pointsDown,
     drag: mode = 'xAxis',
   } = rules;
+  const zoomsYAxis = takesYAxis(drag, mode, yScale, baseline, pointsDown);
+  // Stretched in pixels rather than in values because the rectangle is drawn in
+  // pixels and the mapping is monotonic, so including the baseline's own pixel
+  // in the span is including the baseline in the window.
+  const held = zoomsYAxis && holdsBaseline(mode, keepBaseline);
+  const atBaseline = chartPixel(yScale, baseline);
   return {
     fromX: drag.fromX,
-    fromY: drag.fromY,
+    fromY: held ? Math.min(drag.fromY, drag.toY, atBaseline) : drag.fromY,
     toX: drag.toX,
-    toY: drag.toY,
-    zoomsYAxis: takesYAxis(drag, mode, yScale, baseline, pointsDown),
+    toY: held ? Math.max(drag.fromY, drag.toY, atBaseline) : drag.toY,
+    zoomsYAxis,
   };
 }
 
@@ -213,7 +230,7 @@ export function zoomedDomain(
   // tool or by a `dual` drag that left its level, is a promise about exactly
   // that rectangle, and a viewer whose axis rules keep its baseline would
   // otherwise see a taller window than the one drawn.
-  const holdBaseline = keepBaseline && mode === 'xAxis';
+  const holdBaseline = holdsBaseline(mode, keepBaseline);
   const bottom = holdBaseline
     ? Math.min(baseline, fromY, toY)
     : Math.min(fromY, toY);
@@ -272,6 +289,21 @@ export function scaledYAxis(
  * @param pointsDown - Whether the data hangs below that baseline.
  * @returns Whether the height comes along.
  */
+/**
+ * Whether the window keeps the baseline whatever the drag asked for, which the
+ * preview and the release must agree on as surely as they agree on the height.
+ *
+ * Only the reading gesture holds it. A rectangle dragged out deliberately — by
+ * the box tool, or by a `dual` drag that left its level — is a promise about
+ * exactly that rectangle.
+ * @param mode - What a drag on this chart asks for.
+ * @param keepBaseline - Whether the viewer's rules keep it.
+ * @returns Whether the baseline stays in the window.
+ */
+function holdsBaseline(mode: DragMode, keepBaseline: boolean): boolean {
+  return keepBaseline && mode === 'xAxis';
+}
+
 function takesYAxis(
   drag: DragBox,
   mode: DragMode,

package/src/chart/ui/chartGestures.ts

@@ -14,8 +14,12 @@
  * gesture reporting a range and a click for the same drag.
  */
 
-import type { PointerEvent as ReactPointerEvent } from 'react';
+import type {
+  KeyboardEvent as ReactKeyboardEvent,
+  PointerEvent as ReactPointerEvent,
+} from 'react';
 
+import { isEditingField } from '../../panel/core/isEditingField.ts';
 import type { ChartDomain, ZoomRules } from '../core/chartDomain.ts';
 import type { PlotRect } from '../core/chartGeometry.ts';
 import type { ChartScale } from '../core/chartScale.ts';
@@ -29,6 +33,7 @@ import { isInsidePlot } from './useChartPointer.ts';
 
 /** One gesture on the SVG, as React hands it over. */
 type PointerHandler = (event: ReactPointerEvent<SVGSVGElement>) => void;
+type KeyboardHandler = (event: ReactKeyboardEvent<SVGSVGElement>) => void;
 
 /**
  * Which keys were held as a click was let go.
@@ -56,6 +61,41 @@ export interface ChartZoomHandlers {
   onPointerUp: PointerHandler;
   onPointerCancel: PointerHandler;
   onDoubleClick: () => void;
+  onKeyDown: KeyboardHandler;
+  /**
+   * So the chart can hold the caret, which is what lets a key reach it.
+   *
+   * In the tab order rather than merely focusable by a click, because the chart
+   * is* the widget here: a reader who navigates by keyboard has no other way to
+   * reach it, and a chart nobody can focus answers no key at all. A viewer that
+   * answers none takes itself back out of the order.
+   */
+  tabIndex: number;
+}
+
+/** The key that fits the window to everything drawn, on every chart. */
+export const FIT_KEY = 'f';
+
+/**
+ * Whether a key press asks for the window to be fitted.
+ *
+ * A key pressed with a modifier belongs to the browser or to the page — Ctrl+F
+ * is a search, and a chart that swallowed it to fit itself would be a chart
+ * people stop typing near — and a key delivered to a field is part of what is
+ * being written. Compared case-insensitively, so a capital arriving from a held
+ * shift still fits.
+ * @param event - The key press, as React delivers it or as the DOM does.
+ * @returns Whether the chart should fit its window.
+ */
+export function asksToFit(
+  event: Pick<
+    KeyboardEvent,
+    'key' | 'ctrlKey' | 'metaKey' | 'altKey' | 'target'
+  >,
+): boolean {
+  if (event.ctrlKey || event.metaKey || event.altKey) return false;
+  if (isEditingField(event.target)) return false;
+  return event.key.toLowerCase() === FIT_KEY;
 }
 
 /** What a host asks to be told, beyond the window it is shown anyway. */

package/src/chart/ui/index.ts

@@ -47,7 +47,7 @@ export { SelectionRect } from './SelectionRect.tsx';
 export type { LegendEntry, TraceLegendProps } from './TraceLegend.tsx';
 export { TraceLegend } from './TraceLegend.tsx';
 export type { ChartClickModifiers } from './chartGestures.ts';
-export { NO_MODIFIERS } from './chartGestures.ts';
+export { FIT_KEY, NO_MODIFIERS, asksToFit } from './chartGestures.ts';
 export { chartSurfaceStyle } from './chartSurface.ts';
 export type { ChartPointer, ChartPointerOptions } from './useChartPointer.ts';
 export {

package/src/chart/ui/useChartZoom.ts

@@ -28,7 +28,11 @@
  * answer each viewer hands over.
  */
 
-import type { PointerEvent as ReactPointerEvent, RefObject } from 'react';
+import type {
+  KeyboardEvent as ReactKeyboardEvent,
+  PointerEvent as ReactPointerEvent,
+  RefObject,
+} from 'react';
 import { useCallback, useMemo, useState } from 'react';
 
 import type {
@@ -50,6 +54,7 @@ import type {
 } from './chartGestures.ts';
 import {
   answeredRelease,
+  asksToFit,
   draggedTo,
   releaseDrag,
   startedDrag,
@@ -147,6 +152,7 @@ export function useChartZoom(options: ChartZoomOptions): ChartZoom {
   const pointsDown = yAxis?.pointsDown;
   const dragMode = gestures?.drag ?? DEFAULT_ZOOM_GESTURES.drag;
   const wheel = gestures?.wheel ?? DEFAULT_ZOOM_GESTURES.wheel;
+  const keys = gestures?.keys ?? DEFAULT_ZOOM_GESTURES.keys;
   const rules = useMemo<ZoomRules>(
     () => ({ baseline, keepBaseline, pointsDown, drag: dragMode }),
     [baseline, keepBaseline, pointsDown, dragMode],
@@ -236,6 +242,19 @@ export function useChartZoom(options: ChartZoomOptions): ChartZoom {
     [drag, yScale, rules],
   );
 
+  const onKeyDown = useCallback(
+    (event: ReactKeyboardEvent<SVGSVGElement>) => {
+      if (!keys || !asksToFit(event)) return;
+      // Taken rather than passed on, so the page under a chart does not scroll
+      // to its own next heading as well — and so a second chart mounted beside
+      // this one is not fitted by a key aimed at this one.
+      event.preventDefault();
+      event.stopPropagation();
+      reset();
+    },
+    [keys, reset],
+  );
+
   return {
     domain,
     xScale,
@@ -248,6 +267,11 @@ export function useChartZoom(options: ChartZoomOptions): ChartZoom {
       onPointerUp,
       onPointerCancel,
       onDoubleClick: reset,
+      onKeyDown,
+      // Out of the tab order again on a chart that answers no key: a stop on the
+      // way through a page that does nothing when it is reached is worse than no
+      // stop at all.
+      tabIndex: keys ? 0 : -1,
     },
   };
 }

package/src/core.ts

@@ -35,5 +35,6 @@ export * from './state/core/index.ts';
 // Framework-free molfile and editor-value helpers, so a worker can read a
 // molfile without loading the editor that `react-cheminfo/structure` exports.
 export * from './structure/core/index.ts';
+export * from './taxonomy/core/index.ts';
 export * from './tokens/core/index.ts';
 export * from './worker/core/index.ts';

package/src/download/core/cssPaint.ts

@@ -0,0 +1,71 @@
+/**
+ * What a computed style says is painted, read the way a figure file needs it.
+ */
+
+/**
+ * A colour, or nothing where the page paints nothing with it.
+ * @param color - A computed colour, as `getComputedStyle` writes it.
+ * @returns The colour, or undefined where it is transparent.
+ */
+export function visibleColor(color: string): string | undefined {
+  const value = color.trim();
+  if (value === '' || value === 'transparent') return undefined;
+  if (ZERO_ALPHA_COMMAS.test(value) || ZERO_ALPHA_SLASH.test(value)) {
+    return undefined;
+  }
+  return value;
+}
+
+/**
+ * The dashes a CSS line style is drawn with.
+ * @param style - The computed `border-*-style` or `outline-style`.
+ * @param width - The line's width, in pixels.
+ * @returns The dashes and gaps in pixels — empty for a solid line — or
+ *   undefined where no line is drawn. `auto` is a focus ring, which is the
+ *   state of the pointer rather than a part of the figure.
+ */
+export function lineDash(
+  style: string,
+  width: number,
+): readonly number[] | undefined {
+  if (!(width > 0)) return undefined;
+  switch (style) {
+    case 'none':
+    case 'hidden':
+    case 'auto':
+    case '':
+      return undefined;
+    case 'dashed':
+      return [width * 3, width * 3];
+    case 'dotted':
+      return [width, width];
+    default:
+      return [];
+  }
+}
+
+/**
+ * A corner radius in pixels.
+ * @param radius - The computed `border-*-radius`, in pixels or as a share.
+ * @param width - The box's width, which a share is taken of.
+ * @param height - Its height.
+ * @returns The radius, in pixels.
+ */
+export function cornerRadius(
+  radius: string,
+  width: number,
+  height: number,
+): number {
+  const value = Number.parseFloat(radius);
+  if (!Number.isFinite(value) || value <= 0) return 0;
+  if (radius.trim().endsWith('%')) {
+    return (Math.min(width, height) * value) / 100;
+  }
+  return value;
+}
+
+/** `rgba(r, g, b, 0)`, which is what a transparent ground computes to. */
+const ZERO_ALPHA_COMMAS = /^rgba\((?:[^,]+,){3}\s*0(?:\.0*)?\)$/;
+
+/** `rgb(r g b / 0)` and `color(srgb r g b / 0)`. */
+const ZERO_ALPHA_SLASH = /\/\s*0(?:\.0*)?%?\)$/;

package/src/download/core/drawingMarkup.ts

@@ -0,0 +1,35 @@
+import { cssTokenNames, resolveCssTokens } from './cssTokens.ts';
+
+/**
+ * One drawing, serialized with every token it names written out.
+ *
+ * The copy is taken first and read from the original, because the values are a
+ * property of where the figure sits on the page: a detached clone inherits
+ * nothing and would resolve every token to an empty string.
+ * @param drawing - The drawing, as it sits on the page.
+ * @returns Its markup.
+ */
+export function drawingMarkup(drawing: SVGSVGElement): string {
+  const clone = drawing.cloneNode(true) as SVGSVGElement;
+  const markup = new XMLSerializer().serializeToString(clone);
+  return resolveCssTokens(markup, tokenValues(drawing, cssTokenNames(markup)));
+}
+
+/**
+ * What each token the markup names is worth where the figure is drawn.
+ * @param drawing - The drawing, as it sits on the page.
+ * @param names - The tokens it asks for.
+ * @returns The values, keyed by token name.
+ */
+function tokenValues(
+  drawing: SVGSVGElement,
+  names: readonly string[],
+): Record<string, string> {
+  const values: Record<string, string> = {};
+  if (names.length === 0) return values;
+  const styles = window.getComputedStyle(drawing);
+  for (const name of names) {
+    values[name] = styles.getPropertyValue(name);
+  }
+  return values;
+}

package/src/download/core/figureHtml.ts

@@ -0,0 +1,214 @@
+/**
+ * A part of a figure the page draws in HTML, painted from where the browser put
+ * it.
+ *
+ * Some figures are not drawings: a periodic table is a grid of buttons, because
+ * every cell has to be reachable by Tab and read by a screen reader. Saved as
+ * SVG it still has to look like the table the reader saw, so each box, each
+ * line round it and each line of words is measured off the page and painted
+ * again — never re-derived from the styles that made it, so the copy cannot
+ * drift from the screen.
+ *
+ * What is painted: a box's ground, its border (as drawn on its top edge), its
+ * corner, its outline, its opacity, every line of its words in their colour,
+ * size, weight and style, and any `<svg>` inside it. What is not: images,
+ * gradients, shadows, filters and generated `::before` / `::after` content.
+ * Chrome inside the part — `data-figure="chrome"` — is left behind.
+ */
+
+import { cornerRadius, lineDash, visibleColor } from './cssPaint.ts';
+import { drawingMarkup } from './drawingMarkup.ts';
+import type { HtmlPaint } from './figureHtmlMarkup.ts';
+import { figureHtmlMarkup } from './figureHtmlMarkup.ts';
+import { lineBoxes } from './textLines.ts';
+
+/** Chrome inside the part, which is not part of the picture. */
+const CHROME = '[data-figure="chrome"]';
+
+/** What every measurement of one part is taken against. */
+interface PaintContext {
+  /** The part's own box: every position is written from its corner. */
+  origin: DOMRect;
+  /** The type the document is set in, which a run need not repeat. */
+  documentFont: string;
+  /** One range, moved over each character in turn. */
+  range: Range;
+}
+
+/**
+ * One part of a figure drawn in HTML, as SVG markup.
+ * @param part - The element the part is drawn in.
+ * @param documentFont - The font family the saved document is set in.
+ * @returns The markup, in the part's own coordinates: the caller places it.
+ */
+export function figureHtml(part: Element, documentFont: string): string {
+  const context: PaintContext = {
+    origin: part.getBoundingClientRect(),
+    documentFont,
+    range: document.createRange(),
+  };
+  const paints: HtmlPaint[] = [];
+  paintElement(part, context, paints);
+  return figureHtmlMarkup(paints);
+}
+
+function paintElement(
+  element: Element,
+  context: PaintContext,
+  into: HtmlPaint[],
+): void {
+  if (element.matches(CHROME)) return;
+  const styles = window.getComputedStyle(element);
+  if (styles.display === 'none') return;
+  const visible = styles.visibility === 'visible';
+  const box = element.getBoundingClientRect();
+
+  if (element instanceof SVGSVGElement) {
+    if (!visible || box.width <= 0 || box.height <= 0) return;
+    into.push({
+      kind: 'drawing',
+      markup: drawingMarkup(element),
+      x: box.left - context.origin.left,
+      y: box.top - context.origin.top,
+    });
+    return;
+  }
+
+  const own: HtmlPaint[] = [];
+  if (visible) paintGround(box, styles, context, own);
+  for (const child of element.childNodes) {
+    if (child instanceof Text) {
+      if (visible) paintText(child, styles, context, own);
+    } else if (child instanceof Element) {
+      paintElement(child, context, own);
+    }
+  }
+  if (visible) paintOutline(box, styles, context, own);
+  if (own.length === 0) return;
+
+  const opacity = Number.parseFloat(styles.opacity);
+  if (Number.isFinite(opacity) && opacity < 1) {
+    into.push({ kind: 'group', opacity, children: own });
+    return;
+  }
+  for (const paint of own) into.push(paint);
+}
+
+function paintGround(
+  box: DOMRect,
+  styles: CSSStyleDeclaration,
+  context: PaintContext,
+  into: HtmlPaint[],
+): void {
+  if (box.width <= 0 || box.height <= 0) return;
+  const x = box.left - context.origin.left;
+  const y = box.top - context.origin.top;
+  const radius = cornerRadius(
+    styles.borderTopLeftRadius,
+    box.width,
+    box.height,
+  );
+
+  const fill = visibleColor(styles.backgroundColor);
+  if (fill !== undefined) {
+    into.push({
+      kind: 'box',
+      x,
+      y,
+      width: box.width,
+      height: box.height,
+      radius,
+      fill,
+    });
+  }
+
+  // A border lies inside the box, where a stroke straddles its line: the
+  // stroke is drawn half a width in, over the ground the page drew under it.
+  const width = Number.parseFloat(styles.borderTopWidth);
+  const dash = lineDash(styles.borderTopStyle, width);
+  const stroke = visibleColor(styles.borderTopColor);
+  if (dash === undefined || stroke === undefined) return;
+  const half = width / 2;
+  into.push({
+    kind: 'box',
+    x: x + half,
+    y: y + half,
+    width: box.width - width,
+    height: box.height - width,
+    radius: Math.max(0, radius - half),
+    stroke,
+    strokeWidth: width,
+    dash,
+  });
+}
+
+function paintOutline(
+  box: DOMRect,
+  styles: CSSStyleDeclaration,
+  context: PaintContext,
+  into: HtmlPaint[],
+): void {
+  const width = Number.parseFloat(styles.outlineWidth);
+  const dash = lineDash(styles.outlineStyle, width);
+  const stroke = visibleColor(styles.outlineColor);
+  if (dash === undefined || stroke === undefined) return;
+  const offset = Number.parseFloat(styles.outlineOffset) || 0;
+  const grow = offset + width / 2;
+  const radius = cornerRadius(
+    styles.borderTopLeftRadius,
+    box.width,
+    box.height,
+  );
+  into.push({
+    kind: 'box',
+    x: box.left - context.origin.left - grow,
+    y: box.top - context.origin.top - grow,
+    width: box.width + grow * 2,
+    height: box.height + grow * 2,
+    radius: radius > 0 ? Math.max(0, radius + grow) : 0,
+    stroke,
+    strokeWidth: width,
+    dash,
+  });
+}
+
+function paintText(
+  node: Text,
+  styles: CSSStyleDeclaration,
+  context: PaintContext,
+  into: HtmlPaint[],
+): void {
+  const color = visibleColor(styles.color);
+  if (color === undefined || node.data.trim() === '') return;
+  const fontSize = Number.parseFloat(styles.fontSize);
+  const fontStyle =
+    styles.fontStyle === 'normal' ? undefined : styles.fontStyle;
+  const fontFamily =
+    styles.fontFamily === context.documentFont ? undefined : styles.fontFamily;
+
+  for (const line of lineBoxes(node, context.range)) {
+    const words = transformed(
+      node.data.slice(line.start, line.end).replaceAll(/\s+/g, ' ').trim(),
+      styles.textTransform,
+    );
+    if (words === '') continue;
+    into.push({
+      kind: 'text',
+      text: words,
+      x: line.left - context.origin.left,
+      y: (line.top + line.bottom) / 2 - context.origin.top,
+      width: line.right - line.left,
+      color,
+      fontSize,
+      fontWeight: styles.fontWeight,
+      fontStyle,
+      fontFamily,
+    });
+  }
+}
+
+function transformed(words: string, transform: string): string {
+  if (transform === 'uppercase') return words.toUpperCase();
+  if (transform === 'lowercase') return words.toLowerCase();
+  return words;
+}