react-cheminfo 0.69.0 → 0.71.0

package/src/download/core/figurePng.ts

@@ -42,18 +42,31 @@ export async function figurePng(
 }
 
 /**
- * The SVG document, decoded and ready to be painted.
+ * Where the browser reads an SVG document back from, to paint it.
  *
- * It goes through an object URL rather than a `data:` one because a figure of
- * a few thousand dots runs to hundreds of kilobytes, and a `data:` URL that
- * long is refused outright by some browsers.
+ * An object URL rather than a `data:` one, because a figure of a few thousand
+ * dots runs to hundreds of kilobytes and a `data:` URL that long is refused
+ * outright by some browsers — except for a document holding a
+ * `<foreignObject>`, which is how native MathML sits in a chart. Chromium
+ * taints any canvas that paints such a document read from an object URL, and
+ * the figure then cannot be saved at all; read from a `data:` URL it paints
+ * clean. Such a figure carries a handful of labels, far short of that length.
+ * @param markup - The SVG document.
+ * @returns The URL; one starting with `blob:` is revoked once read.
+ */
+export function svgImageUrl(markup: string): string {
+  return markup.includes('<foreignObject')
+    ? `data:${FIGURE_SVG_TYPE},${encodeURIComponent(markup)}`
+    : URL.createObjectURL(new Blob([markup], { type: FIGURE_SVG_TYPE }));
+}
+
+/**
+ * The SVG document, decoded and ready to be painted.
  * @param figure - The figure, already copied off the page.
  * @returns The decoded image.
  */
 async function loadFigure(figure: FigureSvg): Promise<HTMLImageElement> {
-  const url = URL.createObjectURL(
-    new Blob([figure.markup], { type: FIGURE_SVG_TYPE }),
-  );
+  const url = svgImageUrl(figure.markup);
   try {
     const image = new Image(figure.width, figure.height);
     await new Promise<void>((resolve, reject) => {
@@ -65,7 +78,7 @@ async function loadFigure(figure: FigureSvg): Promise<HTMLImageElement> {
     });
     return image;
   } finally {
-    URL.revokeObjectURL(url);
+    if (url.startsWith('blob:')) URL.revokeObjectURL(url);
   }
 }
 

package/src/download/core/figureSvg.ts

@@ -19,7 +19,9 @@ import {
   figureElement,
   figureLegends,
   figurePaintings,
+  pieceBounds,
 } from './figureTarget.ts';
+import { drawingCrop } from './svgBounds.ts';
 
 /** How the figure is copied. */
 export interface FigureSvgOptions {
@@ -85,9 +87,10 @@ export function figureSvg(
   const styles = window.getComputedStyle(element);
   const pieces: FigurePiece[] = [];
   for (const drawing of drawings) {
-    const box = drawing.getBoundingClientRect();
+    const crop = drawingCrop(drawing);
+    const box = pieceBounds(drawing, crop);
     pieces.push({
-      markup: drawingMarkup(drawing),
+      markup: drawingMarkup(drawing, crop),
       x: box.left - bounds.left,
       y: box.top - bounds.top,
     });

package/src/download/core/figureTarget.ts

@@ -9,6 +9,8 @@
  */
 
 import type { FigurePixels } from './figureScale.ts';
+import type { SvgBox } from './svgBounds.ts';
+import { drawingCrop } from './svgBounds.ts';
 
 /** Chrome floating over a figure, which is not part of the picture. */
 const CHROME = '[data-figure="chrome"]';
@@ -129,11 +131,11 @@ export function figureBounds(drawings: readonly Element[]): FigureBounds {
   let right = Number.NEGATIVE_INFINITY;
   let bottom = Number.NEGATIVE_INFINITY;
   for (const drawing of drawings) {
-    const box = drawing.getBoundingClientRect();
+    const box = pieceBounds(drawing);
     if (box.left < left) left = box.left;
     if (box.top < top) top = box.top;
-    if (box.right > right) right = box.right;
-    if (box.bottom > bottom) bottom = box.bottom;
+    if (box.left + box.width > right) right = box.left + box.width;
+    if (box.top + box.height > bottom) bottom = box.top + box.height;
   }
   if (!Number.isFinite(left) || !Number.isFinite(top)) {
     return { left: 0, top: 0, width: 0, height: 0 };
@@ -141,6 +143,29 @@ export function figureBounds(drawings: readonly Element[]): FigureBounds {
   return { left, top, width: right - left, height: bottom - top };
 }
 
+/**
+ * Where one piece of a figure goes in the file, and how much room it takes.
+ *
+ * A piece is its box on the page, except for a drawing cropped to what it is
+ * of: that one keeps the corner it stands at and takes the size of its marks,
+ * since its window on screen is only wherever the canvas was last left.
+ * @param piece - A drawing, or a part drawn in HTML, as it sits on the page.
+ * @param crop - The rectangle of it that is saved, in drawing units. Defaults
+ *   to the one `drawingCrop` finds in a drawing, and to none for anything else.
+ * @returns Its box.
+ */
+export function pieceBounds(
+  piece: Element,
+  crop: SvgBox | null = piece instanceof SVGSVGElement
+    ? drawingCrop(piece)
+    : null,
+): FigureBounds {
+  const { left, top, width, height } = piece.getBoundingClientRect();
+  return crop === null
+    ? { left, top, width, height }
+    : { left, top, width: crop.width, height: crop.height };
+}
+
 /**
  * How big the saved figure would be at its own size, for a control that has to
  * write the resulting file size before anybody presses save.

package/src/download/core/svgBounds.ts

@@ -43,6 +43,27 @@ export function contentBox(svg: SVGSVGElement, padding = 0): SvgBox | null {
   };
 }
 
+/** Room left around the marks of a drawing saved from what it is of. */
+export const CONTENT_PADDING = 12;
+
+/**
+ * The part of a drawing a saved figure is made of, when the drawing says.
+ *
+ * Only a drawing that marks the group it is *of* is cropped: a canvas the
+ * reader pans and zooms, whose window on screen is wherever it was last left.
+ * Every other drawing is saved at the box it is drawn to, which is what a
+ * chart is — its axes reach the edges of that box, and a crop to where its
+ * trace happens to reach would leave them hanging.
+ * @param svg - The drawing, as it is rendered.
+ * @returns The rectangle to save, in drawing units, or `null` when the drawing
+ *   marks no such group or nothing is drawn in it.
+ */
+export function drawingCrop(svg: SVGSVGElement): SvgBox | null {
+  const marked = `[${CSS.escape(CONTENT_ATTRIBUTE)}]`;
+  if (svg.querySelector(marked) === null) return null;
+  return contentBox(svg, CONTENT_PADDING);
+}
+
 /**
  * The rectangle the element itself covers, rather than the marks inside it.
  *

package/src/download/core/svgToPng.ts

@@ -1,3 +1,4 @@
+import { svgImageUrl } from './figurePng.ts';
 import type { SvgBox } from './svgBounds.ts';
 import { svgToString } from './svgToString.ts';
 
@@ -92,9 +93,7 @@ function side(value: number): number {
  * @returns The image, already decoded, so it can be drawn straight away.
  */
 async function loadImage(source: string): Promise<HTMLImageElement> {
-  const url = URL.createObjectURL(
-    new Blob([source], { type: 'image/svg+xml' }),
-  );
+  const url = svgImageUrl(source);
   try {
     const image = new Image();
     image.src = url;
@@ -102,7 +101,7 @@ async function loadImage(source: string): Promise<HTMLImageElement> {
     return image;
   } finally {
     // The decoded image no longer needs the URL it came from.
-    URL.revokeObjectURL(url);
+    if (url.startsWith('blob:')) URL.revokeObjectURL(url);
   }
 }
 

package/src/format/core/relativeTime.ts

@@ -16,7 +16,8 @@ const UNITS: ReadonlyArray<{
   { unit: 'minute', milliseconds: MINUTE },
 ];
 
-const FORMATTER = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' });
+/** One formatter per locale, made the first time that locale is asked for. */
+const FORMATTERS = new Map<string, Intl.RelativeTimeFormat>();
 
 /** How {@link formatRelativeTime} measures and what it writes for nothing. */
 export interface FormatRelativeTimeOptions {
@@ -32,16 +33,21 @@ export interface FormatRelativeTimeOptions {
    * @default MISSING_VALUE
    */
   missing?: string;
+  /**
+   * The language the phrase is written in: the page's, from `useLanguage()`.
+   * @default 'en-US'
+   */
+  locale?: string;
 }
 
 /**
  * How far an instant is from now, in words: `just now`, `5 minutes ago`,
- * `yesterday`, `in 3 weeks`.
+ * `yesterday`, `in 3 weeks` — or `il y a 5 minutes` in French.
  *
  * The largest unit that fits is used and the count is rounded towards zero, so
  * ninety minutes read `1 hour ago` rather than claiming two. Under a minute
- * either way is `just now`, which also absorbs a clock that is a few seconds
- * ahead. The locale is fixed to `en-US`, like every formatter of this module.
+ * either way is `just now` (the language's own word for now, outside
+ * English), which also absorbs a clock that is a few seconds ahead.
  * @param instant - Epoch milliseconds, an ISO timestamp or a date.
  * @param options - See {@link FormatRelativeTimeOptions}.
  * @returns The phrase, or the missing text when the instant is absent or unreadable.
@@ -50,20 +56,36 @@ export function formatRelativeTime(
   instant: number | string | Date | undefined,
   options: FormatRelativeTimeOptions = {},
 ): string {
-  const { now = Date.now(), missing = MISSING_VALUE } = options;
+  const {
+    now = Date.now(),
+    missing = MISSING_VALUE,
+    locale = 'en-US',
+  } = options;
   const time = toTime(instant);
   const reference = toTime(now);
   if (time === undefined || reference === undefined) return missing;
 
+  const formatter = formatterOf(locale);
   const elapsed = time - reference;
   const distance = Math.abs(elapsed);
   for (const { unit, milliseconds } of UNITS) {
     if (distance >= milliseconds) {
       const count = Math.floor(distance / milliseconds);
-      return FORMATTER.format(elapsed < 0 ? -count : count, unit);
+      return formatter.format(elapsed < 0 ? -count : count, unit);
     }
   }
-  return 'just now';
+  return locale.toLowerCase().startsWith('en')
+    ? 'just now'
+    : formatter.format(0, 'second');
+}
+
+function formatterOf(locale: string): Intl.RelativeTimeFormat {
+  let formatter = FORMATTERS.get(locale);
+  if (formatter === undefined) {
+    formatter = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+    FORMATTERS.set(locale, formatter);
+  }
+  return formatter;
 }
 
 function toTime(

package/src/host/core/connectHost.ts

@@ -1,22 +1,22 @@
 /**
  * A tool's side of the host protocol: introduce itself to the page that
- * frames it, take the private port that page answers with, and serve what
- * arrives through it.
+ * frames it, take the private port that page answers with, serve what arrives
+ * through it, and send back what the host takes back.
  *
  * Free of React and of the DOM — the window is handed in — so a test drives the
  * whole exchange with a fake host and a real `MessageChannel`.
  */
 
-import type { CheckedValue, KnownKind } from './kinds.ts';
-import { checkValue, isKnownKind, kindAccepts } from './kinds.ts';
+import type { HostOutputs } from './hostOutputs.ts';
+import {
+  OUTPUT_DELAY,
+  answerGet,
+  createOutputPublisher,
+} from './hostOutputs.ts';
 import type {
-  GetRequest,
   HelloMessage,
-  HostError,
-  HostItem,
   LoadRequest,
   ResultMessage,
-  ToolInput,
   ToolInterface,
   UsedItem,
 } from './protocol.ts';
@@ -26,13 +26,11 @@ import {
   isConnect,
   parseRequest,
 } from './protocol.ts';
+import type { LoadedInput } from './selectInputs.ts';
+import { selectInputs } from './selectInputs.ts';
 
-/** The item an input took, and its value as the input's kind reads it. */
-export interface LoadedInput {
-  key: string;
-  item: HostItem;
-  checked: CheckedValue;
-}
+export type { InputSelection, LoadedInput } from './selectInputs.ts';
+export { selectInputs } from './selectInputs.ts';
 
 /** What a window `message` event carries, as far as the protocol reads it. */
 export interface HostMessageEvent {
@@ -54,17 +52,25 @@ export interface HostConnectionOptions {
   /** The build that is running, as the About states it, or `null`. */
   build: unknown;
   /**
-   * Show the inputs of a new document. Throwing means they could not be read:
-   * the error's message goes back to the host, and the document is not marked
-   * as applied.
+   * Show the inputs of a new document. Throwing, or rejecting, means they
+   * could not be read: the error's message goes back to the host, and the
+   * document is not marked as applied.
+   */
+  load: (inputs: readonly LoadedInput[]) => void | Promise<void>;
+  /**
+   * Where the values of the tool's outputs are read, for `get` and for the
+   * `output` sent when one the host accepted changes.
+   * @default undefined — nothing goes back
    */
-  load: (inputs: readonly LoadedInput[]) => void;
+  outputs?: HostOutputs;
+  /**
+   * How long the outputs must stay still before a change is sent, in
+   * milliseconds.
+   * @default OUTPUT_DELAY
+   */
+  outputDelay?: number;
 }
 
-/** What choosing the items of a request gave. */
-export type InputSelection =
-  { ok: true; inputs: LoadedInput[] } | { ok: false; error: HostError };
-
 /**
  * Say `hello` to the host, and serve its requests once it connects.
  *
@@ -72,24 +78,50 @@ export type InputSelection =
  * one replaces the first — a host that reloads its own script connects again.
  * A document is applied once: the same one again is answered as before and
  * changes nothing, so a host re-sending it never overwrites the user's work.
+ * Requests are served one at a time, in order, so a `get` sent after a `load`
+ * reads what that load showed, however long it took.
  * @param options - The window, the tool, and its load function.
  * @returns The function that stops listening and closes the port.
  */
 export function connectHost(options: HostConnectionOptions): () => void {
-  const { host, listen, tool, origin, build, load } = options;
+  const { host, listen, tool, origin, build, load, outputs } = options;
+  const { outputDelay = OUTPUT_DELAY } = options;
   let port: MessagePort | null = null;
   let appliedDocument: string | null = null;
   let appliedUsed: UsedItem[] = [];
+  let served: Promise<void> = Promise.resolve();
+
+  const publisher =
+    outputs === undefined
+      ? null
+      : createOutputPublisher(
+          outputs,
+          (message) => port?.postMessage(message),
+          outputDelay,
+        );
+  const stopHearing = outputs?.subscribe(() => publisher?.changed());
 
   function serve(data: unknown): void {
     const request = parseRequest(data);
     if (request === null) return;
-    const result =
-      request.type === 'load' ? applyLoad(request) : answerGet(request, tool);
-    port?.postMessage(result);
+    served = served
+      .then(async () => {
+        const result =
+          request.type === 'load'
+            ? await applyLoad(request)
+            : answerGet(request, tool, outputs);
+        port?.postMessage(result);
+      })
+      // A request that failed must not stop the ones after it being served,
+      // and must still be seen: it is thrown again, on its own.
+      .catch((error: unknown) => {
+        queueMicrotask(() => {
+          throw error;
+        });
+      });
   }
 
-  function applyLoad(request: LoadRequest): ResultMessage {
+  async function applyLoad(request: LoadRequest): Promise<ResultMessage> {
     const { id, document, items } = request;
     if (document === appliedDocument) {
       return { type: 'result', id, ok: true, used: appliedUsed };
@@ -98,8 +130,11 @@ export function connectHost(options: HostConnectionOptions): () => void {
     if (!selection.ok) {
       return { type: 'result', id, ok: false, error: selection.error };
     }
+    // An edit still settling belongs to the document on screen, which the
+    // outputs describe only until this one replaces it.
+    publisher?.flush();
     try {
-      load(selection.inputs);
+      await load(selection.inputs);
     } catch (error) {
       const message = error instanceof Error ? error.message : String(error);
       return {
@@ -109,11 +144,19 @@ export function connectHost(options: HostConnectionOptions): () => void {
         error: { code: 'unreadable', message },
       };
     }
+    return applied(request, selection.inputs);
+  }
+
+  // Nothing else runs between a load's check and this: requests are served
+  // one at a time.
+  function applied(
+    request: LoadRequest,
+    inputs: readonly LoadedInput[],
+  ): ResultMessage {
+    const { id, document, accept = [] } = request;
     appliedDocument = document;
-    appliedUsed = selection.inputs.map(({ key, item }) => ({
-      key,
-      kind: item.kind,
-    }));
+    appliedUsed = inputs.map(({ key, item }) => ({ key, kind: item.kind }));
+    publisher?.baseline(document, accept);
     return { type: 'result', id, ok: true, used: appliedUsed };
   }
 
@@ -146,95 +189,9 @@ export function connectHost(options: HostConnectionOptions): () => void {
 
   return () => {
     stopListening();
+    stopHearing?.();
+    publisher?.stop();
     port?.close();
     port = null;
   };
 }
-
-/**
- * Give each input of the tool one item of a request.
- *
- * Each input tries its kinds in its own order of preference, and takes the
- * first item that falls under one and passes that kind's schema: the tool
- * knows which notation serves it best, whatever order the host listed them in.
- * An item naming another input's `key` is left to that input.
- * @param tool - What the tool takes.
- * @param items - What the host sent.
- * @returns One item per input, or why an input got none.
- */
-export function selectInputs(
-  tool: ToolInterface,
-  items: readonly HostItem[],
-): InputSelection {
-  const inputs: LoadedInput[] = [];
-  for (const input of tool.inputs) {
-    const errors: string[] = [];
-    const loaded = selectInput(input, items, errors);
-    if (loaded !== null) {
-      inputs.push(loaded);
-      continue;
-    }
-    if (errors.length > 0) {
-      return {
-        ok: false,
-        error: {
-          code: 'invalid',
-          message: `No item for ${input.key} has the shape its kind requires, so ${tool.name} loaded nothing.`,
-          errors,
-        },
-      };
-    }
-    return {
-      ok: false,
-      error: {
-        code: 'no-input',
-        message: `No item is a ${KIND_LIST.format(input.kinds)}, so ${tool.name} loaded nothing.`,
-      },
-    };
-  }
-  return { ok: true, inputs };
-}
-
-function selectInput(
-  input: ToolInput,
-  items: readonly HostItem[],
-  errors: string[],
-): LoadedInput | null {
-  for (const accepted of input.kinds) {
-    if (!isKnownKind(accepted)) continue;
-    for (const item of items) {
-      if (item.key !== undefined && item.key !== input.key) continue;
-      if (!kindAccepts(accepted, item.kind)) continue;
-      const loaded = checkItem(input.key, accepted, item, errors);
-      if (loaded !== null) return loaded;
-    }
-  }
-  return null;
-}
-
-function checkItem(
-  key: string,
-  accepted: KnownKind,
-  item: HostItem,
-  errors: string[],
-): LoadedInput | null {
-  const outcome = checkValue(accepted, item.value);
-  if (outcome.valid) return { key, item, checked: outcome.checked };
-  for (const error of outcome.errors) errors.push(`${item.kind} ${error}`);
-  return null;
-}
-
-function answerGet(request: GetRequest, tool: ToolInterface): ResultMessage {
-  // Nothing goes back yet: no tool declares an output.
-  return {
-    type: 'result',
-    id: request.id,
-    ok: false,
-    error: {
-      code: 'no-output',
-      message: `${tool.name} has nothing to give back yet.`,
-    },
-  };
-}
-
-const KIND_LIST = new Intl.ListFormat('en', { type: 'disjunction' });