react-cheminfo 0.46.0 → 0.48.0

package/src/download/core/figureHtmlMarkup.ts

@@ -0,0 +1,187 @@
+/**
+ * A part of a figure drawn in HTML, written out as SVG.
+ *
+ * The part is measured off the page first (`figureHtml.ts`); what reaches this
+ * module is already a list of boxes, runs of words and drawings with where each
+ * one sits, so the file it becomes can be read — and tested — without a page.
+ */
+
+/** A box the browser painted: a ground, a line round it, or both. */
+export interface HtmlPaintBox {
+  /** What it is. */
+  kind: 'box';
+  /** Its left edge, in pixels from the left of the part. */
+  x: number;
+  /** Its top edge, in pixels from the top of the part. */
+  y: number;
+  /** Its width, in pixels. */
+  width: number;
+  /** Its height. */
+  height: number;
+  /**
+   * How round its corners are, in pixels.
+   * @default 0
+   */
+  radius?: number;
+  /**
+   * What fills it.
+   * @default undefined — it is not filled
+   */
+  fill?: string;
+  /**
+   * The colour of the line round it, centred on its edge.
+   * @default undefined — no line is drawn
+   */
+  stroke?: string;
+  /**
+   * How heavy that line is, in pixels.
+   * @default 1
+   */
+  strokeWidth?: number;
+  /**
+   * The line's dashes and gaps, in pixels.
+   * @default undefined — a solid line
+   */
+  dash?: readonly number[];
+}
+
+/** One line of words, set where the browser set it. */
+export interface HtmlPaintText {
+  /** What it is. */
+  kind: 'text';
+  /** What it says, its spaces already collapsed. */
+  text: string;
+  /** Its left edge, in pixels from the left of the part. */
+  x: number;
+  /** The middle of its line, in pixels from the top of the part. */
+  y: number;
+  /**
+   * How wide the browser drew it. The words are fitted to it, so a run the
+   * page condensed stays condensed and a reader opening the file with another
+   * font gets the same layout.
+   */
+  width: number;
+  /** Its colour. */
+  color: string;
+  /** Its size, in pixels. */
+  fontSize: number;
+  /** Its weight. */
+  fontWeight: string;
+  /**
+   * Its style.
+   * @default undefined — upright
+   */
+  fontStyle?: string;
+  /**
+   * Its type, where it is not the one the document is set in.
+   * @default undefined — the document's own
+   */
+  fontFamily?: string;
+}
+
+/** A drawing inside the part, already an SVG of its own. */
+export interface HtmlPaintDrawing {
+  /** What it is. */
+  kind: 'drawing';
+  /** The `<svg>` element as it was serialized, tokens already resolved. */
+  markup: string;
+  /** Its left edge, in pixels from the left of the part. */
+  x: number;
+  /** Its top edge, in pixels from the top of the part. */
+  y: number;
+}
+
+/** Everything inside an element the page drew faded. */
+export interface HtmlPaintGroup {
+  /** What it is. */
+  kind: 'group';
+  /** How opaque the whole of it is, from 0 to 1. */
+  opacity: number;
+  /** What it holds, in the order it is painted. */
+  children: readonly HtmlPaint[];
+}
+
+/** One thing painted from a part of the page. */
+export type HtmlPaint =
+  HtmlPaintBox | HtmlPaintText | HtmlPaintDrawing | HtmlPaintGroup;
+
+/**
+ * The part, as the markup that goes into the saved figure.
+ * @param paints - What was measured, in the order it is painted.
+ * @returns The markup, in the part's own coordinates: the caller places it.
+ */
+export function figureHtmlMarkup(paints: readonly HtmlPaint[]): string {
+  let markup = '';
+  for (const paint of paints) markup += paintMarkup(paint);
+  return markup;
+}
+
+function paintMarkup(paint: HtmlPaint): string {
+  switch (paint.kind) {
+    case 'box':
+      return boxMarkup(paint);
+    case 'text':
+      return textMarkup(paint);
+    case 'drawing':
+      return `<g transform="translate(${round(paint.x)} ${round(paint.y)})">${paint.markup}</g>`;
+    case 'group':
+      return `<g opacity="${round(paint.opacity)}">${figureHtmlMarkup(paint.children)}</g>`;
+    default:
+      return '';
+  }
+}
+
+function boxMarkup(box: HtmlPaintBox): string {
+  const { x, y, width, height, fill, stroke, dash } = box;
+  const { radius = 0, strokeWidth = 1 } = box;
+  if (fill === undefined && stroke === undefined) return '';
+  const line =
+    stroke === undefined
+      ? ''
+      : ` stroke="${attribute(stroke)}" stroke-width="${round(strokeWidth)}"${
+          dash === undefined || dash.length === 0
+            ? ''
+            : ` stroke-dasharray="${dash.map(round).join(' ')}"`
+        }`;
+  return (
+    `<rect x="${round(x)}" y="${round(y)}"` +
+    ` width="${round(Math.max(0, width))}" height="${round(Math.max(0, height))}"${
+      radius > 0 ? ` rx="${round(radius)}"` : ''
+    } fill="${attribute(fill ?? 'none')}"${line}/>`
+  );
+}
+
+function textMarkup(run: HtmlPaintText): string {
+  if (run.text === '') return '';
+  const style =
+    run.fontStyle === undefined || run.fontStyle === 'normal'
+      ? ''
+      : ` font-style="${attribute(run.fontStyle)}"`;
+  const family =
+    run.fontFamily === undefined
+      ? ''
+      : ` font-family="${attribute(run.fontFamily)}"`;
+  return (
+    `<text x="${round(run.x)}" y="${round(run.y)}" dominant-baseline="central"` +
+    ` textLength="${round(run.width)}" lengthAdjust="spacingAndGlyphs"` +
+    ` fill="${attribute(run.color)}" font-size="${round(run.fontSize)}px"` +
+    ` font-weight="${attribute(run.fontWeight)}"${style}${family}>` +
+    `${text(run.text)}</text>`
+  );
+}
+
+function attribute(value: string): string {
+  return text(value).replaceAll('"', '&quot;');
+}
+
+function text(value: string): string {
+  return value
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;');
+}
+
+function round(value: number): number {
+  if (!Number.isFinite(value)) return 0;
+  return Math.round(value * 100) / 100;
+}

package/src/download/core/figureSvg.ts

@@ -7,7 +7,8 @@
  * around it and would otherwise be reset to whatever opens the file.
  */
 
-import { cssTokenNames, resolveCssTokens } from './cssTokens.ts';
+import { drawingMarkup } from './drawingMarkup.ts';
+import { figureHtml } from './figureHtml.ts';
 import type { FigureLegendMark, FigureLegendText } from './figureLegend.ts';
 import { figureLegendMarkup } from './figureLegend.ts';
 import type { FigurePiece } from './figureSvgDocument.ts';
@@ -17,6 +18,7 @@ import {
   figureDrawings,
   figureElement,
   figureLegends,
+  figurePaintings,
 } from './figureTarget.ts';
 
 /** How the figure is copied. */
@@ -74,11 +76,13 @@ export function figureSvg(
 ): FigureSvg {
   const element = figureElement(target);
   const drawings = figureDrawings(element);
-  if (drawings.length === 0) {
+  const paintings = figurePaintings(element);
+  if (drawings.length === 0 && paintings.length === 0) {
     throw new Error('That part of the page holds no figure to save.');
   }
 
-  const bounds = figureBounds(drawings);
+  const bounds = figureBounds([...drawings, ...paintings]);
+  const styles = window.getComputedStyle(element);
   const pieces: FigurePiece[] = [];
   for (const drawing of drawings) {
     const box = drawing.getBoundingClientRect();
@@ -89,6 +93,16 @@ export function figureSvg(
     });
   }
 
+  for (const part of paintings) {
+    const box = part.getBoundingClientRect();
+    pieces.push({
+      markup: figureHtml(part, styles.fontFamily),
+      x: box.left - bounds.left,
+      y: box.top - bounds.top,
+      kind: 'html',
+    });
+  }
+
   for (const legend of figureLegends(element)) {
     const box = legend.getBoundingClientRect();
     if (box.width <= 0 || box.height <= 0) continue;
@@ -100,7 +114,6 @@ export function figureSvg(
     });
   }
 
-  const styles = window.getComputedStyle(element);
   const markup = figureSvgDocument(pieces, {
     width: bounds.width,
     height: bounds.height,
@@ -204,40 +217,6 @@ function textRuns(legend: Element): TextRun[] {
   return runs;
 }
 
-/**
- * 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.
- */
-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;
-}
-
 /**
  * The ground the figure is standing on.
  * @param styles - The computed style of the box it is mounted in.

package/src/download/core/figureSvgDocument.ts

@@ -22,11 +22,11 @@ export interface FigurePiece {
   y: number;
   /**
    * What it is. Written into the file, so a reader — a test, or somebody
-   * editing the figure afterwards — can tell the drawings from the key that
-   * was painted over them.
+   * editing the figure afterwards — can tell the drawings from a part the page
+   * drew in HTML and from the key that was painted over them.
    * @default 'drawing'
    */
-  kind?: 'drawing' | 'legend';
+  kind?: 'drawing' | 'html' | 'legend';
 }
 
 /** How the file around the drawings is written. */

package/src/download/core/figureTarget.ts

@@ -16,6 +16,9 @@ const CHROME = '[data-figure="chrome"]';
 /** A key floating over a figure, which is. */
 const LEGEND = '[data-figure="legend"]';
 
+/** A part of the figure the page draws in HTML rather than in SVG. */
+const HTML = '[data-figure="html"]';
+
 /** A figure's box on the page, in the coordinates a bounding box reports. */
 export interface FigureBounds {
   /** Its left edge. */
@@ -54,7 +57,8 @@ export function figureElement(target: string | Element): Element {
  * over a figure are `<svg>` too, so anything inside an element marked as
  * chrome is left behind — a cog saved into the middle of a scatter plot is the
  * bug this exists to prevent. A drawing with no area is left behind as well,
- * because a tab that is not showing is still in the document.
+ * because a tab that is not showing is still in the document, and so is one
+ * inside a part drawn in HTML, which paints its own.
  * @param element - The box the figure is mounted in.
  * @returns The drawings.
  */
@@ -65,6 +69,7 @@ export function figureDrawings(element: Element): readonly SVGSVGElement[] {
   const drawings: SVGSVGElement[] = [];
   for (const drawing of element.querySelectorAll('svg')) {
     if (drawing.closest(CHROME) !== null) continue;
+    if (drawing.closest(HTML) !== null) continue;
     if (isNested(drawings, drawing)) continue;
     const box = drawing.getBoundingClientRect();
     if (box.width <= 0 || box.height <= 0) continue;
@@ -73,6 +78,26 @@ export function figureDrawings(element: Element): readonly SVGSVGElement[] {
   return drawings;
 }
 
+/**
+ * The parts of it drawn in HTML: a table of buttons, a grid of cards — anything
+ * that is a picture on the page without being an `<svg>`. A component opts in
+ * by marking its box `data-figure="html"`, and the part is then painted into
+ * the file from where the browser put each box and each line of words.
+ * @param element - The box the figure is mounted in.
+ * @returns The parts, outermost only, in the order they are painted.
+ */
+export function figurePaintings(element: Element): readonly Element[] {
+  if (element.matches(HTML)) return hasArea(element) ? [element] : [];
+  const parts: Element[] = [];
+  for (const part of element.querySelectorAll(HTML)) {
+    if (part.closest(CHROME) !== null) continue;
+    if (isNested(parts, part)) continue;
+    if (!hasArea(part)) continue;
+    parts.push(part);
+  }
+  return parts;
+}
+
 /**
  * The keys inside it.
  *
@@ -86,6 +111,7 @@ export function figureDrawings(element: Element): readonly SVGSVGElement[] {
 export function figureLegends(element: Element): readonly Element[] {
   const legends: Element[] = [];
   for (const legend of element.querySelectorAll(LEGEND)) {
+    if (legend.closest(HTML) !== null) continue;
     legends.push(legend);
   }
   return legends;
@@ -93,10 +119,11 @@ export function figureLegends(element: Element): readonly Element[] {
 
 /**
  * The box every drawing of a figure fits in.
- * @param drawings - The drawings, as they sit on the page.
+ * @param drawings - The drawings, and the parts drawn in HTML, as they sit on
+ *   the page.
  * @returns The box, or one with no area where there are no drawings.
  */
-export function figureBounds(drawings: readonly SVGSVGElement[]): FigureBounds {
+export function figureBounds(drawings: readonly Element[]): FigureBounds {
   let left = Number.POSITIVE_INFINITY;
   let top = Number.POSITIVE_INFINITY;
   let right = Number.NEGATIVE_INFINITY;
@@ -123,7 +150,11 @@ export function figureBounds(drawings: readonly SVGSVGElement[]): FigureBounds {
 export function figureSize(target: string | Element): FigurePixels | null {
   let bounds: FigureBounds;
   try {
-    bounds = figureBounds(figureDrawings(figureElement(target)));
+    const element = figureElement(target);
+    bounds = figureBounds([
+      ...figureDrawings(element),
+      ...figurePaintings(element),
+    ]);
   } catch {
     return null;
   }
@@ -140,12 +171,14 @@ export function figureSize(target: string | Element): FigurePixels | null {
  * @param drawing - The one being considered.
  * @returns Whether it is already part of the figure.
  */
-function isNested(
-  taken: readonly SVGSVGElement[],
-  drawing: SVGSVGElement,
-): boolean {
+function isNested(taken: readonly Element[], drawing: Element): boolean {
   for (const other of taken) {
     if (other.contains(drawing)) return true;
   }
   return false;
 }
+
+function hasArea(element: Element): boolean {
+  const box = element.getBoundingClientRect();
+  return box.width > 0 && box.height > 0;
+}

package/src/download/core/index.ts

@@ -47,6 +47,7 @@ export {
   figureDrawings,
   figureElement,
   figureLegends,
+  figurePaintings,
   figureSize,
 } from './figureTarget.ts';
 export { sanitizeFileName } from './sanitizeFileName.ts';

package/src/download/core/textLines.ts

@@ -0,0 +1,67 @@
+/**
+ * Where the browser broke a run of words into lines, measured off the page.
+ */
+
+/** One line of a run of words, as the browser broke it. */
+export interface LineBox {
+  /** Offset of its first character in the run. */
+  start: number;
+  /** Offset just past its last character. */
+  end: number;
+  /** Its left edge on the page. */
+  left: number;
+  /** Its top edge. */
+  top: number;
+  /** Its right edge. */
+  right: number;
+  /** Its bottom edge. */
+  bottom: number;
+}
+
+/**
+ * The lines a run of words was broken into, read one character at a time:
+ * a character starts a new line when it sits below the middle of the last.
+ * @param node - The run.
+ * @param range - A range to measure with.
+ * @returns The lines, in the order they are read.
+ */
+export function lineBoxes(node: Text, range: Range): LineBox[] {
+  const lines: LineBox[] = [];
+  const { data } = node;
+  let line: LineBox | undefined;
+  let start = 0;
+  while (start < data.length) {
+    const end = isAstral(data.codePointAt(start) ?? 0)
+      ? Math.min(start + 2, data.length)
+      : start + 1;
+    range.setStart(node, start);
+    range.setEnd(node, end);
+    const rect = range.getBoundingClientRect();
+    if (rect.width > 0 && rect.height > 0) {
+      if (line === undefined || rect.top + rect.height / 2 > line.bottom) {
+        line = {
+          start,
+          end,
+          left: rect.left,
+          top: rect.top,
+          right: rect.right,
+          bottom: rect.bottom,
+        };
+        lines.push(line);
+      } else {
+        line.end = end;
+        line.left = Math.min(line.left, rect.left);
+        line.top = Math.min(line.top, rect.top);
+        line.right = Math.max(line.right, rect.right);
+        line.bottom = Math.max(line.bottom, rect.bottom);
+      }
+    }
+    start = end;
+  }
+  return lines;
+}
+
+// A character outside the first plane is two UTF-16 units, measured as one.
+function isAstral(code: number): boolean {
+  return code > 0xff_ff;
+}

package/src/ecosystem/core/lookup.ts

@@ -2,6 +2,13 @@ import type { SiteGroup, SiteGroupId } from './groups.ts';
 import { SITE_GROUPS } from './groups.ts';
 import type { EcosystemSite, SiteId, SiteRecord } from './sites.ts';
 import { ECOSYSTEM_SITES } from './sites.ts';
+import { UNLISTED_SITES } from './unlistedSites.ts';
+
+// What a site is looked up in: the listed ones, then those no menu shows yet.
+const KNOWN_SITES: readonly EcosystemSite[] = [
+  ...ECOSYSTEM_SITES,
+  ...UNLISTED_SITES,
+];
 
 /** One topic and the sites written under it. */
 export interface GroupedSites {
@@ -40,13 +47,14 @@ export function sitesInGroup(id: SiteGroupId): EcosystemSite[] {
 }
 
 /**
- * One site of the family, by the identifier its entry carries.
+ * One site of the family, by the identifier its entry carries — listed in the
+ * menu or not yet.
  * @param id - The site being asked for.
  * @returns The site.
  * @throws {Error} When no site of the family carries that identifier.
  */
 export function siteById(id: SiteId): EcosystemSite {
-  for (const site of ECOSYSTEM_SITES) {
+  for (const site of KNOWN_SITES) {
     if (site.id === id) return site;
   }
   throw new Error(`unknown ecosystem site: ${id}`);
@@ -83,7 +91,7 @@ export function findSiteByHost(host: string): EcosystemSite | undefined {
   const wanted = normalizeHost(host);
   if (wanted === '') return undefined;
 
-  for (const site of ECOSYSTEM_SITES) {
+  for (const site of KNOWN_SITES) {
     if (normalizeHost(site.host) === wanted) return site;
   }
   return undefined;

package/src/ecosystem/core/types.ts

@@ -1,6 +1,6 @@
 import type { SiteGroupId } from './groups.ts';
 
-/** The sites the menu links to. */
+/** The sites of the family, whether the menu links to them yet or not. */
 export type SiteId =
   | 'learn'
   | 'inchi'
@@ -24,12 +24,14 @@ export type SiteId =
   | '3d'
   | 'periodic-table'
   | 'database'
+  | 'molecules'
   | 'symmetry'
   | 'osiris'
   | 'atoms'
   | 'moles'
   | 'inorganic'
-  | 'powerpoint';
+  | 'powerpoint'
+  | 'naturals';
 
 /** A site's name, split the way its own wordmark splits it. */
 export interface SiteName {

package/src/ecosystem/core/unlistedSites.ts

@@ -0,0 +1,37 @@
+// tokens-ok: file — every unlisted site's two colours are declared here.
+import type { EcosystemSite } from './types.ts';
+
+/**
+ * Sites of the family that no other site links to yet. No menu, footer or
+ * grid lists them, but `siteById` finds them, so each still draws its mark,
+ * its wordmark and its palette from here. Listing one is moving its entry
+ * into `ECOSYSTEM_SITES`, under the topic it already names.
+ */
+export const UNLISTED_SITES: readonly EcosystemSite[] = [
+  {
+    id: 'molecules',
+    name: { lead: 'molecules', alt: 'cheminfo', dot: true },
+    host: 'molecules.cheminfo.org',
+    tagline: 'Look up a molecule, its computed properties and its sources.',
+    group: 'research',
+    brand: '#be185d',
+    brandAlt: '#0f766e',
+    mark: { plate: '#be185d', accent: '#5eead4' },
+  },
+  {
+    id: 'naturals',
+    name: { lead: 'naturals', alt: 'cheminfo', dot: true },
+    host: 'naturals.cheminfo.org',
+    tagline: 'Natural products, and the organisms they were found in.',
+    group: 'research',
+    // Moss, the green of the plants most natural products come from, 8.5
+    // Oklab units from the nearest lead of the family.
+    brand: '#365314',
+    // A carotenoid orange answers it, 5.2:1 on white, and is also the plate of
+    // the mark.
+    brandAlt: '#c2410c',
+    // The leaf is a fresh lime, so it reads as a leaf on the orange plate and
+    // apart from the white ring at 16 px.
+    mark: { plate: '#c2410c', accent: '#a3e635' },
+  },
+];

package/src/ecosystem/ui/glyphs.tsx

@@ -385,6 +385,26 @@ export const GLYPHS: Record<SiteId, (alt: string) => ReactNode> = {
       <ellipse cx="16" cy="9.4" rx="10.2" ry="3.9" fill={alt} />
     </>
   ),
+  // A ring with one bond leading out to a dot: a molecule, and the link to the
+  // source that holds it. The dot carries the answering colour.
+  molecules: (alt) => (
+    <>
+      <path
+        d="M13.4 11.6 19.12 14.9 19.12 21.5 13.4 24.8 7.68 21.5 7.68 14.9Z"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth="2.2"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M19.12 14.9 22.4 13"
+        stroke="#ffffff"
+        strokeWidth="2.2"
+        strokeLinecap="round"
+      />
+      <circle cx="24.6" cy="11.6" r="3.6" fill={alt} />
+    </>
+  ),
   // A tetrahedron seen from slightly above, four balls at its corners: the
   // first shape a chemist meets symmetry in. The apex carries the answering
   // colour, which is also the C3 axis every base triangle turns about.
@@ -486,4 +506,28 @@ export const GLYPHS: Record<SiteId, (alt: string) => ReactNode> = {
       <path d="M16 8.45 20.59 11.1V16.4L16 19.05 11.41 16.4V11.1Z" fill={alt} />
     </>
   ),
+  // A ring, the compound, with a stem leading out of it to a leaf: a natural
+  // product, and the organism it came from. The leaf carries the answering
+  // colour.
+  naturals: (alt) => (
+    <>
+      <path
+        d="M11.5 14 16.7 17 16.7 23 11.5 26 6.3 23 6.3 17Z"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth="2.2"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.7 17 19.6 14.2"
+        stroke="#ffffff"
+        strokeWidth="2.2"
+        strokeLinecap="round"
+      />
+      <path
+        d="M19 14.8C18.2 9.6 21.6 5.9 27.2 5.2 27.7 10.9 24.5 14.6 19 14.8Z"
+        fill={alt}
+      />
+    </>
+  ),
 };

package/src/ir/core/irMode.ts

@@ -168,7 +168,12 @@ export function zoomGestures(
   tool: ZoomDragMode = 'xAxis',
 ): Required<ZoomGestures> {
   const { boxZoomOnly, wheelZoom } = IR_MODE_RULES[mode];
-  return { drag: boxZoomOnly ? 'box' : tool, wheel: wheelZoom };
+  // The shell owns `f`: its own command table runs `resetDomain`, which fits
+  // every pane of a stack rather than the one chart the caret is in, and the key
+  // is written down in a toolbar tooltip and in the documentation panel. A chart
+  // answering it as well would fit one pane and swallow the key before the
+  // shell heard it.
+  return { drag: boxZoomOnly ? 'box' : tool, wheel: wheelZoom, keys: false };
 }
 
 /**