react-cheminfo 0.76.0 → 0.77.0

package/src/download/ui/useFigureDownload.tsx

@@ -1,8 +1,13 @@
 import type { ReactElement, ReactNode } from 'react';
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 
 import { useChromeT } from '../../i18n/ui/useT.ts';
 import type { FigureFormat } from '../core/downloadFigure.ts';
+import {
+  DEFAULT_FIGURE_DPI,
+  FIGURE_DPIS,
+  dpiScale,
+} from '../core/figureDpi.ts';
 import type { FigureLayout } from '../core/figureLayout.ts';
 import { figureLayoutRedraws, figureLayoutSize } from '../core/figureLayout.ts';
 import type { FigurePixels } from '../core/figureScale.ts';
@@ -14,64 +19,11 @@ import {
 import { figureSize } from '../core/figureTarget.ts';
 
 import { FigureDownloadPanel } from './FigureDownloadPanel.tsx';
+import type { FigureDownloadOptions } from './figureDownloadOptions.ts';
 import { useFigureActions } from './useFigureActions.ts';
-import type { FigureRenderer } from './useFigureRedraw.tsx';
 import { useFigureRedraw } from './useFigureRedraw.tsx';
 
-/** What the "Save figure" panel is set up with. */
-export interface FigureDownloadOptions {
-  /**
-   * The `id` of the box the figure is mounted in. Everything drawn inside it
-   * is saved — sixteen charts of a pair grid as readily as one scatter plot —
-   * and the controls floating over it are left behind.
-   */
-  targetId: string;
-  /**
-   * What the saved file is called, without its extension. Name it after the
-   * data rather than after the tool: a reader with four of these in a
-   * downloads folder cannot tell four `figure.png` apart.
-   * @default 'figure'
-   */
-  fileName?: string;
-  /**
-   * The format it opens on.
-   * @default 'png'
-   */
-  defaultFormat?: FigureFormat;
-  /**
-   * The resolution a PNG opens on, as a multiple of the figure on screen. An
-   * SVG opens at 1×, the size it has on screen, and each format keeps the
-   * multiple the reader last picked for it.
-   * @default 2
-   */
-  defaultScale?: number;
-  /**
-   * The resolutions offered.
-   * @default [1, 2, 3, 4]
-   */
-  scales?: readonly number[];
-  /**
-   * What is painted under the figure. `transparent` leaves it unpainted, for a
-   * figure going onto a coloured slide.
-   * @default the surface the figure is drawn on
-   */
-  background?: string;
-  /**
-   * What the panel is called.
-   * @default the chrome's own line, in the language of the page
-   */
-  title?: string;
-  /**
-   * Draws the figure at a size, for a file. When it is given the panel offers
-   * a size — as shown, 4:3, 16:9, a journal column, or typed — and a figure
-   * saved at a size other than its own is drawn again at that size, off the
-   * page, so its axes and labels are laid out for the new shape rather than
-   * stretched into it. Draw exactly what is on screen, with the same data,
-   * zoom and colours; only the box changes.
-   * @default undefined — the figure is saved at the size it has on screen
-   */
-  renderFigure?: FigureRenderer;
-}
+export type { FigureDownloadOptions } from './figureDownloadOptions.ts';
 
 /** What {@link useFigureDownload} hands back. */
 export interface FigureDownloadState {
@@ -93,6 +45,9 @@ export interface FigureDownloadState {
   portal: ReactNode;
 }
 
+/** The dots per inch offered, as the multiples the figure is painted at. */
+const DPI_SCALES = FIGURE_DPIS.map(dpiScale);
+
 /**
  * The "Save figure" panel — save as PNG or SVG, or copy as PNG — for a caller
  * that brings its own trigger, such as a button in an editor's toolbar.
@@ -103,10 +58,18 @@ export interface FigureDownloadState {
 export function useFigureDownload(
   options: FigureDownloadOptions,
 ): FigureDownloadState {
-  const { targetId, fileName, background, scales = FIGURE_SCALES } = options;
-  const { defaultFormat = 'png', defaultScale = DEFAULT_FIGURE_SCALE } =
-    options;
-  const { title, renderFigure } = options;
+  const { targetId, writeFigure, fileName, background } = options;
+  const { unit = 'multiple', defaultFormat = 'png' } = options;
+  const { title, renderFigure, onScaleChange } = options;
+  const dpi = unit === 'dpi';
+  const scales = options.scales ?? (dpi ? DPI_SCALES : FIGURE_SCALES);
+  const defaultScale =
+    options.defaultScale ??
+    (dpi ? dpiScale(DEFAULT_FIGURE_DPI) : DEFAULT_FIGURE_SCALE);
+  // A figure with a printed size, or one its page wrote, keeps the size its
+  // SVG states: the resolution is then the PNG's alone.
+  const svgAtOwnSize = dpi || writeFigure !== undefined;
+  const redraws = renderFigure !== undefined && writeFigure === undefined;
 
   const t = useChromeT();
   const [isOpen, setIsOpen] = useState(false);
@@ -115,19 +78,23 @@ export function useFigureDownload(
     png: defaultScale,
     svg: defaultFigureScale('svg'),
   }));
-  const scale = picked[format];
+  const scale = format === 'svg' && svgAtOwnSize ? 1 : picked[format];
   const [size, setSize] = useState<FigurePixels | null>(null);
+  const opening = useRef(0);
   const [layout, setLayout] = useState<FigureLayout>('screen');
   const [custom, setCustom] = useState<FigurePixels | null>(null);
-  const { redraw, portal } = useFigureRedraw(renderFigure);
+  const { redraw, portal } = useFigureRedraw(
+    redraws ? renderFigure : undefined,
+  );
   const redrawAt =
-    renderFigure !== undefined &&
+    redraws &&
     size !== null &&
     figureLayoutRedraws(layout, size, custom ?? size)
       ? figureLayoutSize(layout, size, custom ?? size)
       : null;
   const { save, copy, busy, failure, notice, clear } = useFigureActions({
     targetId,
+    writeFigure,
     format,
     scale,
     fileName,
@@ -144,10 +111,26 @@ export function useFigureDownload(
     (next: boolean) => {
       setIsOpen(next);
       if (!next) return;
-      setSize(figureSize(targetId));
       clear();
+      if (writeFigure === undefined) {
+        setSize(targetId === undefined ? null : figureSize(targetId));
+        return;
+      }
+      // A written figure is measured once it is written; only the last
+      // opening is answered.
+      opening.current += 1;
+      const ticket = opening.current;
+      writeFigure().then(
+        (figure) => {
+          if (ticket !== opening.current) return;
+          setSize({ width: figure.width, height: figure.height });
+        },
+        () => {
+          if (ticket === opening.current) setSize(null);
+        },
+      );
     },
-    [targetId, clear],
+    [targetId, writeFigure, clear],
   );
 
   // What the last copy came to only describes the choices it was made with.
@@ -164,25 +147,28 @@ export function useFigureDownload(
       format={format}
       scale={scale}
       scales={scales}
+      unit={unit}
+      svgAtOwnSize={svgAtOwnSize}
       size={size}
       failure={failure}
       notice={notice}
       saving={busy}
       onFormatChange={changed(setFormat)}
-      onScaleChange={changed((next: number) =>
-        setPicked((current) => ({ ...current, [format]: next })),
-      )}
+      onScaleChange={changed((next: number) => {
+        setPicked((current) => ({ ...current, [format]: next }));
+        if (format === 'png') onScaleChange?.(next);
+      })}
       onSave={save}
       onCopy={copy}
       sizing={
-        renderFigure === undefined
-          ? undefined
-          : {
+        redraws
+          ? {
               layout,
               custom,
               onLayoutChange: changed(setLayout),
               onCustomChange: changed(setCustom),
             }
+          : undefined
       }
     />
   );

package/src/ecosystem/core/sites.ts

@@ -350,6 +350,20 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     brandAlt: '#a16207',
     mark: { plate: '#0072b2', accent: '#e69f00' },
   },
+  {
+    id: 'draw',
+    name: { lead: 'draw', alt: 'cheminfo', dot: true },
+    host: 'draw.cheminfo.org',
+    tagline: 'Journal-grade structures, in an SVG that keeps the chemistry.',
+    group: 'computing',
+    // The ink a structure is printed in.
+    brand: '#1f2a44',
+    // The red curly arrows are taught in, at 5.9:1 on white.
+    brandAlt: '#c0261d',
+    // Ink and red on paper: a red nib on the navy stays under 4:1, where on
+    // white it reads at 5.9:1.
+    mark: { plate: '#ffffff', accent: '#c0261d', edge: '#dfe3e8' },
+  },
 ];
 
 /** How a link to a site is written, beyond the site itself. */

package/src/ecosystem/core/types.ts

@@ -35,7 +35,8 @@ export type SiteId =
   | 'chembio'
   | 'wikidata'
   | 'mz'
-  | 'vibrations';
+  | 'vibrations'
+  | 'draw';
 
 /** A site's name, split the way its own wordmark splits it. */
 export interface SiteName {

package/src/ecosystem/ui/glyphs.tsx

@@ -602,4 +602,24 @@ export const GLYPHS: Record<SiteId, (alt: string) => ReactNode> = {
       />
     </>
   ),
+  // A ring in ink, with a pen nib drawing its last bond in the answering
+  // colour: a structure being drawn by hand.
+  draw: (alt) => (
+    <>
+      <path
+        d="M19 15.25 19 22.75 12.5 26.5 6 22.75 6 15.25 12.5 11.5 15.3 13.1"
+        fill="none"
+        stroke="#1f2a44"
+        strokeWidth="2.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15.6 13 22.32 11.94 26.35 6.78 21.82 2.25 16.66 6.28Z"
+        fill={alt}
+      />
+      <path d="M16.59 12.01 20.13 8.47" stroke="#ffffff" strokeWidth="1.1" />
+      <circle cx="20.55" cy="8.05" r="1.25" fill="#ffffff" />
+    </>
+  ),
 };

package/src/locales/de.json

@@ -114,6 +114,14 @@
   "site.atoms.tagline": "Elektronen, Neutronen, Lewis-Formeln und Oxidationszahlen.",
   "site.moles.tagline": "Eine Reaktion ausgleichen und ihre Massenzusammensetzung berechnen.",
   "site.inorganic.tagline": "Eine anorganische Verbindung benennen und ihre Formel schreiben.",
+  "site.iupac-name.tagline": "Der IUPAC-Name einer Struktur, und die Struktur, die ein Name bezeichnet.",
+  "site.slides.tagline": "Ein laufendes Werkzeug auf eine Folie setzen, mit dem Link seiner Schaltfläche Teilen.",
+  "site.vibrations.tagline": "IR- und Raman-Spektren, im Browser berechnet.",
+  "site.draw.tagline": "Strukturen in Publikationsqualität, als SVG, das die Chemie behält.",
+  "site.molecules.tagline": "Ein Molekül nachschlagen, mit seinen berechneten Eigenschaften und Quellen.",
+  "site.chembio.tagline": "Naturstoffe, und die Organismen, in denen sie gefunden wurden.",
+  "site.wikidata.tagline": "Die Chemie der Wikipedia-Infoboxen, nach Struktur durchsuchbar.",
+  "site.mz.tagline": "Massenspektren, danach geordnet, wie sie gemessen wurden.",
   "share.button": "Teilen",
   "share.buttonTitle": "Einen Link zu dieser Seite teilen oder sie in Ihre eigene Website einbetten",
   "share.dialogTitleFor": "{title} teilen oder einbetten",
@@ -282,10 +290,14 @@
   "download.resolution": "Auflösung",
   "download.resolutionHelp": "Wie viele Male größer als die Abbildung auf dem Bildschirm die Datei ist. Ein PNG bekommt entsprechend mehr Pixel: zwei passt für eine Folie, drei oder vier für den Druck. Ein SVG bleibt in jeder Größe scharf und öffnet sich entsprechend größer.",
   "download.resolutionExample": "Eine auf dem Bildschirm 640 Pixel breite Abbildung wird 1280 Pixel breit gespeichert.",
+  "download.resolutionDpiHelp": "Punkte pro Zoll, wenn die Abbildung in ihrer Größe auf der Seite gedruckt wird. 150 genügt für eine Folie, 300 für die Fotos einer Zeitschrift, 600 bis 1200 für Strichzeichnungen. Das PNG gibt sie an, sodass ein Dokument es in dieser Größe platziert.",
+  "download.resolutionDpiExample": "Eine 8,5 cm breite Abbildung wird 1004 Pixel breit gespeichert.",
   "download.noFigure": "Auf der Seite gibt es noch keine Abbildung zum Speichern.",
   "download.hintRasterSvg": "Ein SVG, das ein Bild von {pixels} enthält: eine 3D-Szene hat keine Vektorform.",
   "download.hintSvg": "Öffnet sich mit {pixels} und bleibt in jeder Größe scharf.",
   "download.hintPng": "Gespeichert {pixels}.",
+  "download.hintSvgDpi": "Wird {width} × {height} cm groß gedruckt und bleibt in jeder Größe scharf.",
+  "download.hintPngDpi": "Gespeichert {pixels}, gedruckt {width} × {height} cm.",
   "download.hintCopied": "In die Zwischenablage kopiert: PNG mit {pixels}.",
   "download.copyUnsupported": "Dieser Browser kann kein Bild in die Zwischenablage legen. Speichern Sie es stattdessen.",
   "download.size": "Größe",
@@ -794,5 +806,22 @@
   "ir.raman.doc.sampled": "Eine Bande wird an dem abgetasteten Punkt angegeben, an dem sie ihr Maximum hat: Ihre Lage ist nur so genau wie das Raster, auf dem das Spektrum aufgenommen wurde.",
   "ir.raman.aboutLead": "Zeichnet ein Raman-Spektrum, findet seine Banden und listet sie neben dem Diagramm auf.",
   "ir.raman.credit.picking": "**ir-spectrum** (cheminfo, MIT) findet die Banden, mit dem Peakfinder von **common-spectrum** und **ml-gsd**.",
-  "ir.raman.credit.jcamp": "**convert-to-jcamp** (cheminfo, MIT) schreibt die heruntergeladene JCAMP-DX-Datei."
+  "ir.raman.credit.jcamp": "**convert-to-jcamp** (cheminfo, MIT) schreibt die heruntergeladene JCAMP-DX-Datei.",
+  "panel.focus": "Auf das Panel „{panel}“ konzentrieren",
+  "panel.focusTooltip": "Auf dieses Panel konzentrieren: alle anderen einklappen",
+  "panel.unfocusTooltip": "Die anderen Panels wieder ausklappen",
+  "panel.fillScreen": "Panel „{panel}“ im Vollbild zeigen",
+  "panel.fillScreenTooltip": "Dieses Panel im Vollbild zeigen",
+  "panel.fold": "Panel „{panel}“ einklappen",
+  "panel.unfold": "Panel „{panel}“ ausklappen",
+  "panel.foldTooltip": "Dieses Panel einklappen",
+  "panel.unfoldTooltip": "Ausklappen",
+  "panel.close": "Panel „{panel}“ schließen",
+  "panel.closeTooltip": "Dieses Panel schließen",
+  "panel.leaveFullScreen": "Vollbild verlassen",
+  "panel.leaveFullScreenTooltip": "Vollbild verlassen (Esc)",
+  "panel.clearFilter": "Filter leeren",
+  "panel.colourOf": "Farbe von {name}",
+  "panel.drawIn": "{name} in {color} zeichnen",
+  "panel.changeColour": "Dieses Spektrum in einer anderen Farbe zeichnen"
 }

package/src/locales/en.json

@@ -114,6 +114,14 @@
   "site.atoms.tagline": "Electrons, neutrons, Lewis structures and oxidation states.",
   "site.moles.tagline": "Balance a reaction, and work out its mass composition.",
   "site.inorganic.tagline": "Name an inorganic compound, and write its formula.",
+  "site.iupac-name.tagline": "The IUPAC name of a structure, and the structure a name denotes.",
+  "site.slides.tagline": "Put a live tool on a slide, from the link its Share button gives.",
+  "site.vibrations.tagline": "IR and Raman spectra computed in the browser.",
+  "site.draw.tagline": "Journal-grade structures, in an SVG that keeps the chemistry.",
+  "site.molecules.tagline": "Look up a molecule, its computed properties and its sources.",
+  "site.chembio.tagline": "Natural products, and the organisms they were found in.",
+  "site.wikidata.tagline": "The chemistry of Wikipedia’s infoboxes, searchable by structure.",
+  "site.mz.tagline": "Mass spectra, classified by how they were measured.",
   "share.button": "Share",
   "share.buttonTitle": "Share a link to this page, or embed it in your own site",
   "share.dialogTitleFor": "Share or embed — {title}",
@@ -282,10 +290,14 @@
   "download.resolution": "Resolution",
   "download.resolutionHelp": "How many times the figure on screen the file is. A PNG gets that many more pixels: two is right for a slide, three or four for print. An SVG stays sharp at any size, and opens that many times larger.",
   "download.resolutionExample": "A figure 640 pixels wide on screen is saved 1280 pixels wide.",
+  "download.resolutionDpiHelp": "Dots per inch, with the figure printed at its size on the page. 150 is enough for a slide, 300 for a journal's photographs, 600 to 1200 for line art. The PNG states it, so a document places it at that size.",
+  "download.resolutionDpiExample": "A figure 8.5 cm wide is saved 1004 pixels wide.",
   "download.noFigure": "There is no figure on the page to save yet.",
   "download.hintRasterSvg": "An SVG holding a picture of {pixels}: a 3D scene has no vector form.",
   "download.hintSvg": "Opens at {pixels}, and stays sharp at any size.",
   "download.hintPng": "Saved {pixels}.",
+  "download.hintSvgDpi": "Prints {width} × {height} cm, and stays sharp at any size.",
+  "download.hintPngDpi": "Saved {pixels}, which print {width} × {height} cm.",
   "download.hintCopied": "Copied {pixels} to the clipboard, as a PNG.",
   "download.copyUnsupported": "This browser cannot put a picture on the clipboard. Save it instead.",
   "download.size": "Size",
@@ -794,5 +806,22 @@
   "ir.raman.doc.sampled": "A band is reported at the sampled point it peaked on, so its position is only as precise as the grid the spectrum was recorded on.",
   "ir.raman.aboutLead": "Draws a Raman spectrum, picks its bands and lists them beside the chart.",
   "ir.raman.credit.picking": "**ir-spectrum** (cheminfo, MIT) picks the bands, with the peak picker of **common-spectrum** and **ml-gsd**.",
-  "ir.raman.credit.jcamp": "**convert-to-jcamp** (cheminfo, MIT) writes the JCAMP-DX download."
+  "ir.raman.credit.jcamp": "**convert-to-jcamp** (cheminfo, MIT) writes the JCAMP-DX download.",
+  "panel.focus": "Focus on the {panel} panel",
+  "panel.focusTooltip": "Focus on this panel: fold every other one away",
+  "panel.unfocusTooltip": "Unfold the other panels again",
+  "panel.fillScreen": "Fill the screen with the {panel} panel",
+  "panel.fillScreenTooltip": "Fill the screen with this panel",
+  "panel.fold": "Fold the {panel} panel",
+  "panel.unfold": "Unfold the {panel} panel",
+  "panel.foldTooltip": "Fold this panel away",
+  "panel.unfoldTooltip": "Unfold it",
+  "panel.close": "Close the {panel} panel",
+  "panel.closeTooltip": "Close this panel",
+  "panel.leaveFullScreen": "Leave full screen",
+  "panel.leaveFullScreenTooltip": "Leave full screen (Esc)",
+  "panel.clearFilter": "Clear the filter",
+  "panel.colourOf": "Colour of {name}",
+  "panel.drawIn": "Draw {name} in {color}",
+  "panel.changeColour": "Draw this spectrum in another colour"
 }

package/src/locales/es.json

@@ -114,6 +114,14 @@
   "site.atoms.tagline": "Electrones, neutrones, estructuras de Lewis y números de oxidación.",
   "site.moles.tagline": "Ajustar una reacción y calcular su composición en masa.",
   "site.inorganic.tagline": "Nombrar un compuesto inorgánico y escribir su fórmula.",
+  "site.iupac-name.tagline": "El nombre IUPAC de una estructura, y la estructura que designa un nombre.",
+  "site.slides.tagline": "Poner una herramienta en vivo en una diapositiva, con el enlace que da su botón Compartir.",
+  "site.vibrations.tagline": "Espectros IR y Raman calculados en el navegador.",
+  "site.draw.tagline": "Estructuras con calidad de publicación, en un SVG que conserva la química.",
+  "site.molecules.tagline": "Buscar una molécula, sus propiedades calculadas y sus fuentes.",
+  "site.chembio.tagline": "Productos naturales, y los organismos en los que se encontraron.",
+  "site.wikidata.tagline": "La química de las fichas de Wikipedia, con búsqueda por estructura.",
+  "site.mz.tagline": "Espectros de masas, clasificados según cómo se midieron.",
   "share.button": "Compartir",
   "share.buttonTitle": "Compartir un enlace a esta página, o incrustarla en su propio sitio",
   "share.dialogTitleFor": "Compartir o incrustar — {title}",
@@ -282,10 +290,14 @@
   "download.resolution": "Resolución",
   "download.resolutionHelp": "Cuántas veces la figura en pantalla mide el archivo. Un PNG recibe tantos píxeles más: dos sirve para una diapositiva, tres o cuatro para imprimir. Un SVG se mantiene nítido a cualquier tamaño, y se abre tantas veces más grande.",
   "download.resolutionExample": "Una figura de 640 píxeles de ancho en pantalla se guarda con 1280 píxeles de ancho.",
+  "download.resolutionDpiHelp": "Puntos por pulgada, con la figura impresa a su tamaño en la página. 150 basta para una diapositiva, 300 para las fotografías de una revista, de 600 a 1200 para el dibujo de línea. El PNG lo indica, así un documento lo coloca a ese tamaño.",
+  "download.resolutionDpiExample": "Una figura de 8,5 cm de ancho se guarda con 1004 píxeles de ancho.",
   "download.noFigure": "Todavía no hay ninguna figura en la página que guardar.",
   "download.hintRasterSvg": "Un SVG que contiene una imagen de {pixels}: una escena 3D no tiene forma vectorial.",
   "download.hintSvg": "Se abre a {pixels}, y se mantiene nítido a cualquier tamaño.",
   "download.hintPng": "Guardado {pixels}.",
+  "download.hintSvgDpi": "Se imprime a {width} × {height} cm, y se mantiene nítido a cualquier tamaño.",
+  "download.hintPngDpi": "Guardado {pixels}, que se imprimen a {width} × {height} cm.",
   "download.hintCopied": "Copiado al portapapeles: PNG de {pixels}.",
   "download.copyUnsupported": "Este navegador no puede poner una imagen en el portapapeles. Guárdala en su lugar.",
   "download.size": "Tamaño",
@@ -794,5 +806,22 @@
   "ir.raman.doc.sampled": "Una banda se da en el punto muestreado donde alcanza su máximo: su posición no es más precisa que la rejilla en la que se registró el espectro.",
   "ir.raman.aboutLead": "Dibuja un espectro Raman, encuentra sus bandas y las enumera junto a la gráfica.",
   "ir.raman.credit.picking": "**ir-spectrum** (cheminfo, MIT) encuentra las bandas, con el detector de picos de **common-spectrum** y **ml-gsd**.",
-  "ir.raman.credit.jcamp": "**convert-to-jcamp** (cheminfo, MIT) escribe el archivo JCAMP-DX descargado."
+  "ir.raman.credit.jcamp": "**convert-to-jcamp** (cheminfo, MIT) escribe el archivo JCAMP-DX descargado.",
+  "panel.focus": "Centrarse en el panel {panel}",
+  "panel.focusTooltip": "Centrarse en este panel: plegar todos los demás",
+  "panel.unfocusTooltip": "Desplegar de nuevo los demás paneles",
+  "panel.fillScreen": "Mostrar el panel {panel} a pantalla completa",
+  "panel.fillScreenTooltip": "Mostrar este panel a pantalla completa",
+  "panel.fold": "Plegar el panel {panel}",
+  "panel.unfold": "Desplegar el panel {panel}",
+  "panel.foldTooltip": "Plegar este panel",
+  "panel.unfoldTooltip": "Desplegarlo",
+  "panel.close": "Cerrar el panel {panel}",
+  "panel.closeTooltip": "Cerrar este panel",
+  "panel.leaveFullScreen": "Salir de la pantalla completa",
+  "panel.leaveFullScreenTooltip": "Salir de la pantalla completa (Esc)",
+  "panel.clearFilter": "Borrar el filtro",
+  "panel.colourOf": "Color de {name}",
+  "panel.drawIn": "Dibujar {name} en {color}",
+  "panel.changeColour": "Dibujar este espectro en otro color"
 }

package/src/locales/fr.json

@@ -114,6 +114,14 @@
   "site.atoms.tagline": "Électrons, neutrons, structures de Lewis et nombres d'oxydation.",
   "site.moles.tagline": "Équilibrer une réaction, et en calculer la composition massique.",
   "site.inorganic.tagline": "Nommer un composé inorganique, et en écrire la formule.",
+  "site.iupac-name.tagline": "Le nom IUPAC d'une structure, et la structure que désigne un nom.",
+  "site.slides.tagline": "Mettre un outil vivant sur une diapositive, avec le lien que donne son bouton Partager.",
+  "site.vibrations.tagline": "Spectres IR et Raman calculés dans le navigateur.",
+  "site.draw.tagline": "Des structures de qualité publication, dans un SVG qui garde la chimie.",
+  "site.molecules.tagline": "Rechercher une molécule, ses propriétés calculées et ses sources.",
+  "site.chembio.tagline": "Les produits naturels, et les organismes où ils ont été trouvés.",
+  "site.wikidata.tagline": "La chimie des infobox de Wikipédia, interrogeable par structure.",
+  "site.mz.tagline": "Des spectres de masse, classés selon la façon dont ils ont été mesurés.",
   "share.button": "Partager",
   "share.buttonTitle": "Partager un lien vers cette page, ou l'intégrer à votre propre site",
   "share.dialogTitleFor": "Partager ou intégrer — {title}",
@@ -282,10 +290,14 @@
   "download.resolution": "Résolution",
   "download.resolutionHelp": "Combien de fois la figure à l'écran mesure le fichier. Un PNG reçoit d'autant plus de pixels : deux convient pour une diapositive, trois ou quatre pour l'impression. Un SVG reste net à toute taille, et s'ouvre d'autant plus grand.",
   "download.resolutionExample": "Une figure large de 640 pixels à l'écran est enregistrée large de 1280 pixels.",
+  "download.resolutionDpiHelp": "Points par pouce, la figure étant imprimée à sa taille sur la page. 150 suffit pour une diapositive, 300 pour les photographies d'une revue, 600 à 1200 pour un dessin au trait. Le PNG l'indique, si bien qu'un document le place à cette taille.",
+  "download.resolutionDpiExample": "Une figure large de 8,5 cm est enregistrée large de 1004 pixels.",
   "download.noFigure": "Il n'y a encore aucune figure à enregistrer sur la page.",
   "download.hintRasterSvg": "Un SVG contenant une image de {pixels} : une scène 3D n'a pas de forme vectorielle.",
   "download.hintSvg": "S'ouvre à {pixels}, et reste net à toute taille.",
   "download.hintPng": "Enregistré {pixels}.",
+  "download.hintSvgDpi": "S'imprime en {width} × {height} cm, et reste net à toute taille.",
+  "download.hintPngDpi": "Enregistré {pixels}, qui s'impriment en {width} × {height} cm.",
   "download.hintCopied": "Copié dans le presse-papiers : PNG de {pixels}.",
   "download.copyUnsupported": "Ce navigateur ne peut pas copier une image dans le presse-papiers. Enregistrez-la plutôt.",
   "download.size": "Taille",
@@ -794,5 +806,22 @@
   "ir.raman.doc.sampled": "Une bande est donnée au point échantillonné où elle culmine : sa position n'est pas plus précise que la grille sur laquelle le spectre a été enregistré.",
   "ir.raman.aboutLead": "Trace un spectre Raman, repère ses bandes et les liste à côté du graphique.",
   "ir.raman.credit.picking": "**ir-spectrum** (cheminfo, MIT) repère les bandes, avec le détecteur de pics de **common-spectrum** et **ml-gsd**.",
-  "ir.raman.credit.jcamp": "**convert-to-jcamp** (cheminfo, MIT) écrit le fichier JCAMP-DX téléchargé."
+  "ir.raman.credit.jcamp": "**convert-to-jcamp** (cheminfo, MIT) écrit le fichier JCAMP-DX téléchargé.",
+  "panel.focus": "Se concentrer sur le panneau {panel}",
+  "panel.focusTooltip": "Se concentrer sur ce panneau : replier tous les autres",
+  "panel.unfocusTooltip": "Déplier de nouveau les autres panneaux",
+  "panel.fillScreen": "Afficher le panneau {panel} en plein écran",
+  "panel.fillScreenTooltip": "Afficher ce panneau en plein écran",
+  "panel.fold": "Replier le panneau {panel}",
+  "panel.unfold": "Déplier le panneau {panel}",
+  "panel.foldTooltip": "Replier ce panneau",
+  "panel.unfoldTooltip": "Le déplier",
+  "panel.close": "Fermer le panneau {panel}",
+  "panel.closeTooltip": "Fermer ce panneau",
+  "panel.leaveFullScreen": "Quitter le plein écran",
+  "panel.leaveFullScreenTooltip": "Quitter le plein écran (Échap)",
+  "panel.clearFilter": "Effacer le filtre",
+  "panel.colourOf": "Couleur de {name}",
+  "panel.drawIn": "Tracer {name} en {color}",
+  "panel.changeColour": "Tracer ce spectre dans une autre couleur"
 }

package/src/locales/it.json

@@ -114,6 +114,14 @@
   "site.atoms.tagline": "Elettroni, neutroni, strutture di Lewis e numeri di ossidazione.",
   "site.moles.tagline": "Bilanciare una reazione e calcolarne la composizione in massa.",
   "site.inorganic.tagline": "Nominare un composto inorganico e scriverne la formula.",
+  "site.iupac-name.tagline": "Il nome IUPAC di una struttura, e la struttura che un nome designa.",
+  "site.slides.tagline": "Mettere uno strumento interattivo su una diapositiva, con il link del suo pulsante Condividi.",
+  "site.vibrations.tagline": "Spettri IR e Raman calcolati nel browser.",
+  "site.draw.tagline": "Strutture di qualità da pubblicazione, in un SVG che conserva la chimica.",
+  "site.molecules.tagline": "Cercare una molecola, le sue proprietà calcolate e le sue fonti.",
+  "site.chembio.tagline": "Prodotti naturali, e gli organismi in cui sono stati trovati.",
+  "site.wikidata.tagline": "La chimica delle infobox di Wikipedia, ricercabile per struttura.",
+  "site.mz.tagline": "Spettri di massa, classificati in base a come sono stati misurati.",
   "share.button": "Condividi",
   "share.buttonTitle": "Condividere un link a questa pagina, o incorporarla nel proprio sito",
   "share.dialogTitleFor": "Condividere o incorporare — {title}",
@@ -282,10 +290,14 @@
   "download.resolution": "Risoluzione",
   "download.resolutionHelp": "Quante volte la figura sullo schermo misura il file. Un PNG riceve altrettanti pixel in più: due va bene per una diapositiva, tre o quattro per la stampa. Un SVG resta nitido a qualsiasi dimensione, e si apre altrettante volte più grande.",
   "download.resolutionExample": "Una figura larga 640 pixel sullo schermo viene salvata larga 1280 pixel.",
+  "download.resolutionDpiHelp": "Punti per pollice, con la figura stampata alla sua dimensione sulla pagina. 150 basta per una diapositiva, 300 per le fotografie di una rivista, da 600 a 1200 per i disegni al tratto. Il PNG lo indica, così un documento lo colloca a quella dimensione.",
+  "download.resolutionDpiExample": "Una figura larga 8,5 cm viene salvata larga 1004 pixel.",
   "download.noFigure": "Non c'è ancora nessuna figura nella pagina da salvare.",
   "download.hintRasterSvg": "Un SVG che contiene un'immagine di {pixels}: una scena 3D non ha forma vettoriale.",
   "download.hintSvg": "Si apre a {pixels}, e resta nitido a qualsiasi dimensione.",
   "download.hintPng": "Salvato {pixels}.",
+  "download.hintSvgDpi": "Si stampa a {width} × {height} cm, e resta nitido a qualsiasi dimensione.",
+  "download.hintPngDpi": "Salvato {pixels}, che si stampano a {width} × {height} cm.",
   "download.hintCopied": "Copiato negli appunti: PNG di {pixels}.",
   "download.copyUnsupported": "Questo browser non può mettere un'immagine negli appunti. Salvala invece.",
   "download.size": "Dimensione",
@@ -794,5 +806,22 @@
   "ir.raman.doc.sampled": "Una banda è data nel punto campionato in cui raggiunge il massimo: la sua posizione non è più precisa della griglia su cui lo spettro è stato registrato.",
   "ir.raman.aboutLead": "Disegna uno spettro Raman, ne trova le bande e le elenca accanto al grafico.",
   "ir.raman.credit.picking": "**ir-spectrum** (cheminfo, MIT) trova le bande, con il rilevatore di picchi di **common-spectrum** e **ml-gsd**.",
-  "ir.raman.credit.jcamp": "**convert-to-jcamp** (cheminfo, MIT) scrive il file JCAMP-DX scaricato."
+  "ir.raman.credit.jcamp": "**convert-to-jcamp** (cheminfo, MIT) scrive il file JCAMP-DX scaricato.",
+  "panel.focus": "Concentrati sul pannello {panel}",
+  "panel.focusTooltip": "Concentrati su questo pannello: comprimi tutti gli altri",
+  "panel.unfocusTooltip": "Espandi di nuovo gli altri pannelli",
+  "panel.fillScreen": "Mostra il pannello {panel} a schermo intero",
+  "panel.fillScreenTooltip": "Mostra questo pannello a schermo intero",
+  "panel.fold": "Comprimi il pannello {panel}",
+  "panel.unfold": "Espandi il pannello {panel}",
+  "panel.foldTooltip": "Comprimi questo pannello",
+  "panel.unfoldTooltip": "Espandilo",
+  "panel.close": "Chiudi il pannello {panel}",
+  "panel.closeTooltip": "Chiudi questo pannello",
+  "panel.leaveFullScreen": "Esci dallo schermo intero",
+  "panel.leaveFullScreenTooltip": "Esci dallo schermo intero (Esc)",
+  "panel.clearFilter": "Cancella il filtro",
+  "panel.colourOf": "Colore di {name}",
+  "panel.drawIn": "Disegna {name} in {color}",
+  "panel.changeColour": "Disegna questo spettro in un altro colore"
 }

package/src/molecule3d/ui/Molecule3DStage.tsx

@@ -1,92 +1,8 @@
 /**
  * The box the molecule canvas and its toolbars are drawn in, which is also the
- * box that fills the screen.
- *
- * A box filling the screen hides everything outside it, and the popovers and
- * tooltips of the toolbars are portalled to `document.body`: while the box
- * fills the screen they are portalled into it instead, the way react-science's
- * `RootLayout` keeps its own menus visible. Otherwise the portal options of the
- * page around the viewer are passed through untouched.
+ * box that fills the screen. It is the shared fullscreen stage, so the
+ * toolbars' popovers stay visible while it does.
  */
 
-import { PortalContext, PortalProvider } from '@blueprintjs/core';
-import type { CSSProperties, ReactElement, ReactNode } from 'react';
-import { useCallback, useContext, useState } from 'react';
-import { FullScreenProvider, useFullscreen } from 'react-science/ui';
-
-import type { Molecule3DFullscreen } from './Molecule3DToolbar.tsx';
-
-/** Props of {@link Molecule3DStage}. */
-export interface Molecule3DStageProps {
-  /**
-   * Style of the box, or a function handed whether the box fills the screen,
-   * for a box shaped differently while it does.
-   */
-  style: CSSProperties | ((fillsScreen: boolean) => CSSProperties);
-  /**
-   * Called with the box once it is mounted, and with `null` once it is gone.
-   * @default undefined
-   */
-  onStage?: (element: HTMLDivElement | null) => void;
-  /**
-   * What is drawn in the box, handed whether it fills the screen and the
-   * toggle, or `undefined` where the browser cannot fill the screen.
-   */
-  children: (fullscreen: Molecule3DFullscreen | undefined) => ReactNode;
-}
-
-/**
- * The box of the canvas, able to fill the screen.
- * @param props - See {@link Molecule3DStageProps}.
- * @returns The box.
- */
-export function Molecule3DStage(props: Molecule3DStageProps): ReactElement {
-  return (
-    <FullScreenProvider>
-      {(fullscreenRef) => <Stage {...props} fullscreenRef={fullscreenRef} />}
-    </FullScreenProvider>
-  );
-}
-
-interface StageProps extends Molecule3DStageProps {
-  /** Where `FullScreenProvider` expects the element that fills the screen. */
-  fullscreenRef: { current: HTMLDivElement | null };
-}
-
-function Stage(props: StageProps): ReactElement {
-  const { style, onStage, children, fullscreenRef } = props;
-  const { isFullScreen, toggle } = useFullscreen();
-  const portal = useContext(PortalContext);
-  const [canFillScreen] = useState(isFullscreenEnabled);
-  const [stage, setStage] = useState<HTMLDivElement | null>(null);
-  const stageRef = useCallback(
-    (element: HTMLDivElement | null) => {
-      fullscreenRef.current = element;
-      setStage(element);
-      onStage?.(element);
-    },
-    [fullscreenRef, onStage],
-  );
-
-  // The provider is always there, so entering full screen changes a value
-  // rather than the tree, and the canvas inside is never mounted again.
-  return (
-    <div
-      ref={stageRef}
-      style={typeof style === 'function' ? style(isFullScreen) : style}
-    >
-      <PortalProvider
-        portalClassName={portal.portalClassName}
-        portalContainer={
-          isFullScreen && stage !== null ? stage : portal.portalContainer
-        }
-      >
-        {children(canFillScreen ? { active: isFullScreen, toggle } : undefined)}
-      </PortalProvider>
-    </div>
-  );
-}
-
-function isFullscreenEnabled(): boolean {
-  return typeof document !== 'undefined' && document.fullscreenEnabled;
-}
+export type { FullscreenStageProps as Molecule3DStageProps } from '../../shared/ui/FullscreenStage.tsx';
+export { FullscreenStage as Molecule3DStage } from '../../shared/ui/FullscreenStage.tsx';