react-cheminfo 0.42.0 → 0.44.0

package/src/periodic/ui/PeriodicTable.tsx

@@ -37,6 +37,13 @@ import {
   HeaderStrips,
   InnerTransitionMarkers,
 } from './PeriodicTableChrome.tsx';
+import {
+  ROW_SHARE,
+  SHELLS_RESERVED,
+  detailType,
+  shellFontSize,
+  textWidthInEm,
+} from './cellType.ts';
 import { UNIT_PROPERTY, ofWidth, unitValue } from './unit.ts';
 
 /** What {@link PeriodicTable} needs. */
@@ -68,6 +75,13 @@ export interface PeriodicTableProps {
    * @default the English name
    */
   nameOf?: (element: PeriodicElement) => string;
+  /**
+   * Electrons in each shell of an element, innermost first, written down the
+   * right-hand edge of its cell. The energy levels, which a table is also read
+   * for: none of ours knows them, so the tool that does says so here.
+   * @default undefined — no cell writes any
+   */
+  shellsOf?: (element: PeriodicElement) => readonly number[] | undefined;
   /**
    * Whether an element is inside the set the tool is showing. Everything
    * outside it is dimmed rather than removed, so the table keeps its shape.
@@ -91,8 +105,10 @@ export interface PeriodicTableProps {
    */
   headers?: boolean;
   /**
-   * Called when a whole group or period header is clicked. Without it the
-   * strips are labels rather than buttons.
+   * Called when a whole group or period header is clicked. The run says
+   * whether the click was additive — Cmd or Ctrl held — so a tool can let a
+   * reader put two periods on one chart. Without it the strips are labels
+   * rather than buttons.
    * @default undefined
    */
   onSelectRange?: (range: ElementRange) => void;
@@ -137,6 +153,7 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
     swatchOf = defaultSwatchOf,
     detailOf,
     nameOf = defaultNameOf,
+    shellsOf,
     isIncluded,
     inset,
     headers = false,
@@ -184,6 +201,23 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
     onSelect(next.symbol);
   }
 
+  // One size for the whole table rather than one per cell: a column of values
+  // written at eleven sizes is read as eleven things, and a name shrunk to a
+  // third of its neighbour's is the one a class cannot make out. The size is
+  // what the widest of them fits at, and anything wider than that is condensed
+  // by the cell rather than written smaller still.
+  const placed = placedElements();
+  const widths: number[] = [];
+  let deepest = 0;
+  for (const { element } of placed) {
+    widths.push(textWidthInEm(detailOf?.(element) ?? ''));
+    const stack = shellsOf?.(element);
+    if (stack !== undefined && stack.length > deepest) deepest = stack.length;
+  }
+  const reserved = deepest === 0 ? 0 : SHELLS_RESERVED;
+  const type = detailType(widths, reserved);
+  const shellSize = shellFontSize(deepest);
+
   return (
     <div ref={rootRef} className={className} style={rootStyle}>
       <div
@@ -199,13 +233,16 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
           <div style={insetStyle(offset)}>{inset}</div>
         )}
         {markers ? <InnerTransitionMarkers offset={offset} /> : null}
-        {placedElements().map(({ element, cell }) => (
+        {placed.map(({ element, cell }) => (
           <ElementCell
             key={element.symbol}
             atomicNumber={element.atomicNumber}
             symbol={element.symbol}
             name={nameOf(element)}
             detail={detailOf?.(element)}
+            detailType={type}
+            shells={shellsOf?.(element)}
+            shellSize={shellSize}
             swatch={swatchOf(element)}
             isSelected={element.symbol === selected}
             isIncluded={isIncluded?.(element)}
@@ -270,7 +307,7 @@ const MIN_WIDTH = 280;
  * table: a cell keeps the band it writes a value in whether or not that table
  * writes one.
  */
-const ROW_HEIGHT = ofWidth(6.8);
+const ROW_HEIGHT = ofWidth(ROW_SHARE);
 
 /** The band the two inner-transition series were lifted out across. */
 const SERIES_GAP = `max(6px, ${ofWidth(1.1)})`;

package/src/periodic/ui/PeriodicTableChrome.tsx

@@ -3,7 +3,7 @@
  * markers the inner-transition series were lifted out of.
  */
 
-import type { CSSProperties, ReactElement } from 'react';
+import type { CSSProperties, MouseEvent, ReactElement } from 'react';
 
 import { useChromeT } from '../../i18n/ui/useT.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
@@ -19,8 +19,8 @@ import { ofWidth } from './unit.ts';
 /** What {@link HeaderStrips} needs. */
 interface HeaderStripsProps {
   /**
-   * Called with the run whose header was clicked. Without it the strips are
-   * labels rather than buttons.
+   * Called with the run whose header was clicked, and whether the click was
+   * additive. Without it the strips are labels rather than buttons.
    * @default undefined
    */
   onSelectRange?: (range: ElementRange) => void;
@@ -48,8 +48,12 @@ export function HeaderStrips(props: HeaderStripsProps): ReactElement {
         row={1}
         onClick={
           onSelectRange &&
-          (() => {
-            onSelectRange({ kind: 'group', value: group });
+          ((event) => {
+            onSelectRange({
+              kind: 'group',
+              value: group,
+              additive: isAdditive(event),
+            });
           })
         }
       />,
@@ -66,8 +70,12 @@ export function HeaderStrips(props: HeaderStripsProps): ReactElement {
         row={period + 1}
         onClick={
           onSelectRange &&
-          (() => {
-            onSelectRange({ kind: 'period', value: period });
+          ((event) => {
+            onSelectRange({
+              kind: 'period',
+              value: period,
+              additive: isAdditive(event),
+            });
           })
         }
       />,
@@ -129,7 +137,18 @@ interface HeaderCellProps {
   title: string;
   column: number;
   row: number;
-  onClick?: (() => void) | undefined;
+  onClick?: ((event: MouseEvent<HTMLButtonElement>) => void) | undefined;
+}
+
+/**
+ * Whether a click asks for the run on top of the selection rather than in
+ * place of it: Cmd on a Mac, Ctrl everywhere else, so one gesture reads the
+ * same on both.
+ * @param event - The click, for its modifier keys.
+ * @returns True when the run is to be added to what is already chosen.
+ */
+function isAdditive(event: MouseEvent): boolean {
+  return event.metaKey || event.ctrlKey;
 }
 
 function HeaderCell(props: HeaderCellProps): ReactElement {

package/src/periodic/ui/cellStyles.ts

@@ -0,0 +1,100 @@
+/**
+ * The three bands a cell is laid out as, and the column the electrons stand in.
+ *
+ * Kept beside the cell rather than inside it, because what they say — where the
+ * atomic number sits, how tall a band is — is read far more often than the
+ * markup that carries them.
+ */
+
+import type { CSSProperties } from 'react';
+
+import { SHELLS_GAP, SHELLS_SHARE, SHELL_LEADING } from './cellType.ts';
+import { ofWidth } from './unit.ts';
+
+/** The column the electron counts stand in, as a CSS length. */
+export const SHELLS_COLUMN = ofWidth(SHELLS_SHARE);
+
+/** The air between the symbol and that column, as a CSS length. */
+export const SHELLS_AIR = ofWidth(SHELLS_GAP);
+
+/**
+ * The band at each end of a cell: the atomic number at the top, whatever the
+ * tool writes at the bottom.
+ *
+ * They are one length, not two, and that is what makes the symbol between them
+ * sit at the centre of the cell rather than near it — a bottom band wider than
+ * the top one by a third lifted every symbol in the table two pixels.
+ */
+const EDGE_BAND = ofWidth(1.8);
+
+/**
+ * A cell is three bands of its own, and every cell has all three.
+ *
+ * The atomic number is in the top band, against its left edge; the symbol is
+ * centred in the middle one; whatever the tool writes is centred in the
+ * bottom one. The bands keep their height whether or not anything is written
+ * in the last of them, so a number sits at one height across the whole table
+ * and a symbol at one other — before this, both rode on a stack the cell
+ * centred and moved whenever a neighbour's value was written smaller.
+ */
+export const cellStyle = {
+  border: '1px solid rgb(255 255 255 / 0.55)',
+  borderRadius: 3,
+  cursor: 'pointer',
+  display: 'grid',
+  font: 'inherit',
+  gridTemplateRows: `${EDGE_BAND} 1fr ${EDGE_BAND}`,
+  justifyItems: 'center',
+  minWidth: 0,
+  overflow: 'hidden',
+  padding: '1px',
+  transition: 'opacity 120ms ease, filter 120ms ease',
+} as const satisfies CSSProperties;
+
+export const numberStyle = {
+  alignSelf: 'start',
+  gridColumn: 1,
+  gridRow: 1,
+  fontSize: `max(0.33rem, ${ofWidth(1.1)})`,
+  fontVariantNumeric: 'tabular-nums',
+  justifySelf: 'start',
+  lineHeight: 1,
+  opacity: 0.8,
+} as const satisfies CSSProperties;
+
+export const symbolStyle = {
+  alignSelf: 'center',
+  gridColumn: 1,
+  gridRow: 2,
+  fontWeight: 700,
+  letterSpacing: '-0.02em',
+  lineHeight: 1.02,
+} as const satisfies CSSProperties;
+
+export const detailStyle = {
+  alignSelf: 'center',
+  gridColumn: 1,
+  gridRow: 3,
+  fontVariantNumeric: 'tabular-nums',
+  lineHeight: 1,
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+} as const satisfies CSSProperties;
+
+/**
+ * The electrons of each shell, innermost at the top, down the right-hand edge
+ * of the whole cell: the stack is as tall as the three bands together, which
+ * is what lets seven of them be read.
+ */
+export const shellsStyle = {
+  alignSelf: 'center',
+  gridColumn: 2,
+  gridRow: '1 / span 3',
+  fontVariantNumeric: 'tabular-nums',
+  justifySelf: 'end',
+  lineHeight: SHELL_LEADING,
+  opacity: 0.85,
+  paddingInlineEnd: `max(0.5px, ${ofWidth(0.15)})`,
+  textAlign: 'right',
+  whiteSpace: 'pre-line',
+} as const satisfies CSSProperties;

package/src/periodic/ui/cellType.ts

@@ -0,0 +1,223 @@
+/**
+ * How large the writing in a cell is.
+ *
+ * Everything a cell holds is sized against the table's own width, so the same
+ * drawing reads at 280px beside a chart and across a lecture-hall screen.
+ *
+ * Nothing is ever trimmed: a value cut short by an ellipsis is a wrong value —
+ * `0.0899` read as `0.0…` is worse than not writing it at all. A line that is
+ * still too wide at the size its table writes is condensed instead, which keeps
+ * its height, its weight and its colour — the thing a reader compares two cells
+ * on — while giving back the width it was missing.
+ */
+
+import { ADVANCE } from './glyphWidths.ts';
+import { ofWidth } from './unit.ts';
+
+/**
+ * How wide one line of text is, in per cent of the table's width.
+ *
+ * A column of the grid is 4.85% of it; this is what a cell leaves of that once
+ * its border and its padding are allowed for. One share rather than a share
+ * less a few pixels, because the size a line is written at and the width it
+ * then has are then the same arithmetic — which is what lets the scale that
+ * condenses an over-wide line be a plain number rather than a length only the
+ * engine can resolve.
+ */
+const TEXT_SHARE = 4.5;
+
+/** The column the electron counts stand in, as a share of the table's width. */
+export const SHELLS_SHARE = 1.2;
+
+/**
+ * The air between the symbol and that column, as a share of the table's width.
+ *
+ * Without it the widest symbols — `Md`, `Tm`, `Cm`, anything carrying an `M` or
+ * an `m` — are written at the cap and end a pixel from the first electron, and
+ * the cell reads as two things that collided rather than as two columns.
+ */
+export const SHELLS_GAP = 0.5;
+
+/** What the counts and their air together take off the width of a cell. */
+export const SHELLS_RESERVED = SHELLS_SHARE + SHELLS_GAP;
+
+/** Largest the third line is written, as a share of the table's width. */
+const DETAIL_CAP = 1.5;
+
+/**
+ * Smallest it is written, as a share of the table's width.
+ *
+ * Under this a name stops being readable at any table size, so the few names
+ * that do not fit are condensed rather than written smaller — the table keeps
+ * one size for all 118, which is what makes a column of them readable at a
+ * glance.
+ */
+const DETAIL_FLOOR = 0.95;
+
+/** What one tabular glyph advances, as a share of its own size. */
+const TABULAR_EM = 0.6;
+
+/** A string of digits, a decimal point, a sign, an exponent and nothing else. */
+const NUMERIC = /^[\d\s.,+\-−×^eE]+$/u;
+
+/** How the third line of a whole table is written. */
+export interface DetailType {
+  /** Size every cell writes it at, as a CSS length. */
+  size: string;
+  /** How wide one em of it is, in shares of the table's width. */
+  sizeShare: number;
+}
+
+/**
+ * The one size a table writes its third line at.
+ *
+ * The largest at which the widest of them fits, between a floor and a cap: a
+ * table whose values are short writes them large, and one writing names writes
+ * every name at the size the longest needs.
+ * @param widths - How wide each line is, in ems of its own size.
+ * @param reservedShare - Width taken by the electron counts, as a share of the
+ * table's width; zero when none are written.
+ * @returns The size, as a CSS length and as the share it was computed from.
+ */
+export function detailType(
+  widths: readonly number[],
+  reservedShare: number,
+): DetailType {
+  let widest = 1;
+  for (const width of widths) {
+    if (width > widest) widest = width;
+  }
+  const room = TEXT_SHARE - reservedShare;
+  const share = rounded(
+    Math.min(DETAIL_CAP, Math.max(DETAIL_FLOOR, room / widest)),
+  );
+  // A floor under which the type is not readable whatever the table is sized
+  // to, which is the one case the share alone does not cover.
+  return { size: `max(0.4rem, ${ofWidth(share)})`, sizeShare: share };
+}
+
+/**
+ * How much a line has to be condensed to fit its cell.
+ * @param widthInEm - How wide the line is, in ems of its own size.
+ * @param type - What the table writes its third line at.
+ * @param reservedShare - Width taken by the electron counts, as a share of the
+ * table's width; zero when none are written.
+ * @returns A horizontal scale, never above 1.
+ */
+export function condensedScale(
+  widthInEm: number,
+  type: DetailType,
+  reservedShare: number,
+): number {
+  const room = TEXT_SHARE - reservedShare;
+  return Math.min(1, room / (widthInEm * type.sizeShare));
+}
+
+/**
+ * The size the symbol is written at.
+ *
+ * Every symbol is written at the same size, except the widest of them — the
+ * ones whose second letter is an `m` — which are written a tenth smaller rather
+ * than run into the edges of their cell.
+ * @param symbol - The chemical symbol.
+ * @param cap - Largest it is written, as a share of the table's width.
+ * @param reservedShare - Width taken by the electron counts, as a share of the
+ * table's width; zero when none are written.
+ * @returns A CSS length.
+ */
+export function symbolFontSize(
+  symbol: string,
+  cap: number,
+  reservedShare: number,
+): string {
+  const room = TEXT_SHARE - reservedShare;
+  const share = rounded(Math.min(cap, room / (textWidthInEm(symbol) * BOLD)));
+  return `max(0.5rem, ${ofWidth(share)})`;
+}
+
+/**
+ * A share, at the precision a length is written to.
+ * @param share - The share, in per cent of the table's width.
+ * @returns The same share, rounded.
+ */
+export function rounded(share: number): number {
+  return Number(share.toFixed(3));
+}
+
+/**
+ * How wide a string is, in ems of its own size.
+ *
+ * A value is written with tabular figures, where every glyph — the decimal
+ * point and the minus of an exponent included — advances the same width, so
+ * counting its characters is the measurement. A name is proportional, and is
+ * measured letter by letter: measured as figures, every name in the table would
+ * be sized for a width it does not have.
+ * @param text - The string.
+ * @returns Its width, never zero.
+ */
+export function textWidthInEm(text: string): number {
+  if (NUMERIC.test(text)) return Math.max(text.length, 1) * TABULAR_EM * SAFETY;
+  let width = 0;
+  for (const character of text) {
+    width += glyphWidth(character);
+  }
+  return Math.max(width * SAFETY, TABULAR_EM);
+}
+
+/**
+ * How wide one glyph is, in ems.
+ *
+ * Measured in the family's own type rather than guessed at by class: the four
+ * classes a glyph can be sorted into put `Tm` an eighth wider than it is, which
+ * is a symbol written an eighth smaller than its cell can take.
+ * @param character - The glyph.
+ * @returns Its advance.
+ */
+function glyphWidth(character: string): number {
+  const measured = ADVANCE[character];
+  if (measured !== undefined) return measured;
+  return character >= 'a' && character <= 'z' ? 0.54 : 0.65;
+}
+
+/** What is added to every measurement, for the faces this one stands in for. */
+const SAFETY = 1.04;
+
+/** How much wider the same string is when it is set bold, as the symbol is. */
+const BOLD = 1.08;
+
+/**
+ * The size a stack of electron counts is written at.
+ *
+ * Seven shells have to stand in the height of one cell, so the size is what
+ * the deepest stack of the table leaves — francium's seven, wherever the table
+ * writes any.
+ * @param count - How many shells stand in the tallest stack.
+ * @returns A CSS length.
+ */
+export function shellFontSize(count: number): string {
+  const share = rounded(
+    Math.min(SHELL_CAP, ROW_SHARE / (Math.max(count, 1) * SHELL_LEADING)),
+  );
+  return `max(0.3rem, ${ofWidth(share)})`;
+}
+
+/**
+ * A horizontal scale, written as a transform.
+ * @param scale - The scale, from {@link condensedScale}.
+ * @returns The transform, or nothing at all when the line fits as it is.
+ */
+export function scaleX(scale: number): string | undefined {
+  return scale >= 1 ? undefined : `scaleX(${scale.toFixed(3)})`;
+}
+
+/** The size the symbol is written at wherever it fits, as a share of the table. */
+export const SYMBOL_CAP = 2.1;
+
+/** How tall one row of the table is, as a share of its width. */
+export const ROW_SHARE = 6.8;
+
+/** The size the electron counts are written at where they have the room. */
+const SHELL_CAP = 1.1;
+
+/** The height one of them takes, in ems of its own size. */
+export const SHELL_LEADING = 1.2;

package/src/periodic/ui/glyphWidths.ts

@@ -0,0 +1,68 @@
+/**
+ * What each letter advances, in ems, in the family's type.
+ *
+ * Read off the rendered page at 100px, rounded up, because sorting a glyph into
+ * one of four width classes puts `Tm` an eighth wider than it is — which is a
+ * symbol written an eighth smaller than its cell can take. A platform
+ * substituting another face moves these by a few per cent, which the safety
+ * margin of `cellType` covers.
+ */
+export const ADVANCE: Record<string, number> = {
+  a: 0.5,
+  b: 0.57,
+  c: 0.52,
+  d: 0.57,
+  e: 0.52,
+  f: 0.33,
+  g: 0.56,
+  h: 0.54,
+  i: 0.22,
+  j: 0.22,
+  k: 0.5,
+  l: 0.23,
+  m: 0.8,
+  n: 0.54,
+  o: 0.54,
+  p: 0.56,
+  q: 0.56,
+  r: 0.35,
+  s: 0.47,
+  t: 0.33,
+  u: 0.54,
+  v: 0.5,
+  w: 0.72,
+  x: 0.48,
+  y: 0.5,
+  z: 0.5,
+  A: 0.62,
+  B: 0.6,
+  C: 0.66,
+  D: 0.67,
+  E: 0.55,
+  F: 0.53,
+  G: 0.69,
+  H: 0.69,
+  I: 0.24,
+  J: 0.49,
+  K: 0.6,
+  L: 0.52,
+  M: 0.81,
+  N: 0.69,
+  O: 0.71,
+  P: 0.59,
+  Q: 0.71,
+  R: 0.6,
+  S: 0.59,
+  T: 0.59,
+  U: 0.68,
+  V: 0.62,
+  W: 0.9,
+  X: 0.62,
+  Y: 0.6,
+  Z: 0.61,
+  ' ': 0.27,
+  '-': 0.33,
+  '–': 0.54,
+  '.': 0.25,
+  ',': 0.25,
+};

package/styles/chrome.css

@@ -374,8 +374,12 @@ button {
    nothing to push them there. */
 .share-linkbar {
   display: flex;
+  /* They keep the right edge while there is room, and wrap under each other
+     rather than off the dialog once there is not. */
+  flex: 0 1 auto;
+  flex-wrap: wrap;
   align-items: center;
-  flex: 0 0 auto;
+  justify-content: flex-end;
   margin-left: auto;
   gap: 8px;
 }
@@ -588,7 +592,11 @@ button {
    frames at 1920 is one they check at 1920. */
 .share-dialog.bp6-dialog {
   overflow: hidden;
-  min-width: 480px;
+  /* The floor is what a drag may shrink the dialog to, so it must not also
+     apply to a screen narrower than it: at 480px the dialog stopped shrinking
+     and was clipped on both sides, with no horizontal scroll to reach what was
+     cut — the iframe snippet and the part checkboxes, on every phone. */
+  min-width: min(480px, 96vw);
   min-height: 420px;
   max-width: 98vw;
   max-height: 96dvh;