react-cheminfo 0.76.0 → 0.77.0

package/src/panel/ui/SidePanelStack.tsx

@@ -1,6 +1,9 @@
 import type { ReactNode } from 'react';
 import type { ActivityBarItemProps } from 'react-science/ui';
-import { Accordion, AccordionProvider, Button } from 'react-science/ui';
+import { Accordion, AccordionProvider } from 'react-science/ui';
+
+import { SidePanelItem } from './SidePanelItem.tsx';
+import { usePanelFolds } from './usePanelFolds.ts';
 
 /** What a rail reads about one panel, wherever that rail is drawn. */
 export interface PanelDescriptor {
@@ -44,21 +47,22 @@ export interface SidePanelStackProps<TPanel extends PanelDescriptor> {
  * They are drawn in the order the rail stacks their icons rather than the order
  * they were switched on, so a panel always comes back where it was.
  *
- * The header carries the shell's own two gestures and nothing about what the
- * panel holds: the chevron that folds it away and the cross that closes it.
- * What a panel switches on and off is a toolbar at the top of its own body, so
- * it travels with the panel when it is folded, reordered or lent to another
- * editor, and every header in every editor reads the same — which is the reason
- * this is one component rather than one per editor.
+ * The header carries the shell's own gestures and nothing about what the panel
+ * holds: focus, which folds every other panel away and unfolds them again;
+ * filling the screen with the panel, where the browser can; the chevron that
+ * folds it away; and the cross that closes it. What a panel switches on and off
+ * is a toolbar at the top of its own body, so it travels with the panel when it
+ * is folded, reordered or lent to another editor, and every header in every
+ * editor reads the same — which is the reason this is one component rather
+ * than one per editor.
  *
  * The chevron is there because nothing else says which panels are folded. The
  * accordion draws every header identically and hides only the body, so a side
  * of four closed panels and a side of four open ones differ by white space, and
  * a reader looking for a panel that is already open reaches for its icon and
- * closes it. It is a real button rather than a glyph because the header's own
- * click never reaches the toolbar — clicks there are stopped so the close cross
- * does not also fold the panel — so a chevron that did nothing when pressed
- * would be an affordance that lies.
+ * closes it. Focus is a button as well as a shift-click because a modifier on a
+ * header is a gesture nobody finds, and it undoes itself, which a shift-click
+ * does not.
  * @param props - Component props.
  * @returns The stack.
  */
@@ -67,41 +71,30 @@ export function SidePanelStack<TPanel extends PanelDescriptor>(
 ) {
   const { panels, openPanelIds, onClose, children } = props;
   const open = panels.filter((panel) => openPanelIds.includes(panel.id));
+  const folds = usePanelFolds(open.map((panel) => panel.id));
 
   return (
     <AccordionProvider>
       <Accordion>
         {open.map((panel) => (
-          <Accordion.Item
+          <SidePanelItem
             key={panel.id}
             id={panel.id}
             title={panel.title}
-            defaultOpen
-            renderToolbar={({ isOpen, controls }) => (
-              <>
-                <Button
-                  variant="minimal"
-                  icon={isOpen ? 'chevron-down' : 'chevron-right'}
-                  data-panel-open={isOpen}
-                  aria-expanded={isOpen}
-                  aria-label={`${isOpen ? 'Fold' : 'Unfold'} the ${panel.title.toLowerCase()} panel`}
-                  tooltipProps={{
-                    content: isOpen ? 'Fold this panel away' : 'Unfold it',
-                  }}
-                  onClick={() => controls.toggle()}
-                />
-                <Button
-                  variant="minimal"
-                  icon="cross"
-                  tooltipProps={{ content: 'Close this panel' }}
-                  aria-label={`Close the ${panel.title.toLowerCase()} panel`}
-                  onClick={() => onClose(panel.id)}
-                />
-              </>
-            )}
+            isOpen={folds.isOpen(panel.id)}
+            onOpenChange={(isOpen) => folds.setOpen(panel.id, isOpen)}
+            focus={
+              open.length > 1
+                ? {
+                    active: folds.focused === panel.id,
+                    toggle: () => folds.toggleFocus(panel.id),
+                  }
+                : undefined
+            }
+            onClose={() => onClose(panel.id)}
           >
             {children(panel)}
-          </Accordion.Item>
+          </SidePanelItem>
         ))}
       </Accordion>
     </AccordionProvider>

package/src/panel/ui/SpectrumColorSwatch.tsx

@@ -5,6 +5,7 @@ import {
   EXTRA_SPECTRUM_COLORS,
   SPECTRUM_COLORS,
 } from '../../chart/core/spectrumColor.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 
 export interface SpectrumColorSwatchProps {
   /** The colour the spectrum is drawn in. */
@@ -41,6 +42,7 @@ export interface SpectrumColorSwatchProps {
 export function SpectrumColorSwatch(props: SpectrumColorSwatchProps) {
   const { color, name, onPick } = props;
   const [isOpen, setIsOpen] = useState(false);
+  const t = useChromeT();
 
   function offer(offered: string) {
     return (
@@ -48,7 +50,7 @@ export function SpectrumColorSwatch(props: SpectrumColorSwatchProps) {
         key={offered}
         type="button"
         title={offered}
-        aria-label={`Draw ${name} in ${offered}`}
+        aria-label={t('panel.drawIn', { name, color: offered })}
         style={{
           ...(offered === color ? activeSwatchStyle : swatchStyle),
           background: offered,
@@ -78,8 +80,8 @@ export function SpectrumColorSwatch(props: SpectrumColorSwatchProps) {
     >
       <button
         type="button"
-        title="Draw this spectrum in another colour"
-        aria-label={`Colour of ${name}`}
+        title={t('panel.changeColour')}
+        aria-label={t('panel.colourOf', { name })}
         style={{ ...swatchStyle, background: color }}
       />
     </PopoverNext>

package/src/panel/ui/usePanelFolds.ts

@@ -0,0 +1,103 @@
+import { useState } from 'react';
+
+/** Which panels of a stack are folded, and the gestures that change that. */
+export interface PanelFolds {
+  /**
+   * Whether a panel shows its body.
+   * @param id - The panel.
+   * @returns False while it is folded away.
+   */
+  isOpen: (id: string) => boolean;
+  /**
+   * Fold a panel away, or unfold it.
+   * @param id - The panel.
+   * @param open - Whether it shows its body.
+   */
+  setOpen: (id: string, open: boolean) => void;
+  /** The one panel left unfolded among several, or null. */
+  focused: string | null;
+  /**
+   * Focus on a panel: unfold it and fold every other one, or, when it is
+   * already in focus, unfold them all again.
+   * @param id - The panel.
+   */
+  toggleFocus: (id: string) => void;
+}
+
+const NOTHING_FOLDED: ReadonlySet<string> = new Set();
+
+/**
+ * The folds of a stack of panels, kept by the stack rather than by each panel
+ * so that one panel can be focused — every other one folded — and the focus
+ * undone.
+ *
+ * A panel closed while folded comes back unfolded when it is opened again: a
+ * reader reopening a panel from the rail is asking to see it.
+ * @param openIds - The panels in the stack, in the order they are drawn.
+ * @returns The folds.
+ */
+export function usePanelFolds(openIds: readonly string[]): PanelFolds {
+  const [folded, setFolded] = useState(NOTHING_FOLDED);
+
+  const kept = keepOnly(folded, openIds);
+  if (kept !== folded) setFolded(kept);
+
+  return {
+    isOpen: (id) => !kept.has(id),
+    setOpen: (id, open) => {
+      setFolded((previous) => {
+        if (previous.has(id) !== open) return previous;
+        const next = new Set(previous);
+        if (open) next.delete(id);
+        else next.add(id);
+        return next;
+      });
+    },
+    focused: focusedPanel(openIds, kept),
+    toggleFocus: (id) => {
+      setFolded(
+        focusedPanel(openIds, kept) === id
+          ? NOTHING_FOLDED
+          : new Set(openIds.filter((other) => other !== id)),
+      );
+    },
+  };
+}
+
+/**
+ * The folds of the panels still in the stack.
+ * @param folded - The panels folded.
+ * @param openIds - The panels in the stack.
+ * @returns `folded` itself when every one of them is still in the stack.
+ */
+function keepOnly(
+  folded: ReadonlySet<string>,
+  openIds: readonly string[],
+): ReadonlySet<string> {
+  for (const id of folded) {
+    if (!openIds.includes(id)) {
+      return new Set(openIds.filter((open) => folded.has(open)));
+    }
+  }
+  return folded;
+}
+
+/**
+ * The panel in focus: the only one unfolded, when there is another to fold.
+ * @param openIds - The panels in the stack.
+ * @param folded - The panels folded.
+ * @returns The panel, or null.
+ */
+function focusedPanel(
+  openIds: readonly string[],
+  folded: ReadonlySet<string>,
+): string | null {
+  if (openIds.length < 2) return null;
+  let unfolded: string | null = null;
+  for (const id of openIds) {
+    if (folded.has(id)) continue;
+    if (unfolded !== null) return null;
+    unfolded = id;
+  }
+  return unfolded;
+}

package/src/shared/ui/FullscreenStage.tsx

@@ -0,0 +1,96 @@
+/**
+ * A box that can fill the screen: the 3D canvas and its toolbars, a side panel.
+ *
+ * A box filling the screen hides everything outside it, and the popovers and
+ * tooltips of what it holds 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 box are passed through untouched.
+ */
+
+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 { canFillScreen } from './canFillScreen.ts';
+
+/** Whether a box fills the screen, and how to change that. */
+export interface StageFullscreen {
+  /** Whether the box fills the screen. */
+  active: boolean;
+  /** Fill the screen, or leave it. */
+  toggle: () => void;
+}
+
+/** Props of {@link FullscreenStage}. */
+export interface FullscreenStageProps {
+  /**
+   * 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.
+   * It must keep its identity across renders.
+   * @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: StageFullscreen | undefined) => ReactNode;
+}
+
+/**
+ * The box, able to fill the screen.
+ * @param props - See {@link FullscreenStageProps}.
+ * @returns The box.
+ */
+export function FullscreenStage(props: FullscreenStageProps): ReactElement {
+  return (
+    <FullScreenProvider>
+      {(fullscreenRef) => <Stage {...props} fullscreenRef={fullscreenRef} />}
+    </FullScreenProvider>
+  );
+}
+
+interface StageProps extends FullscreenStageProps {
+  /** 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 [canFill] = useState(canFillScreen);
+  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 what the box holds 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(canFill ? { active: isFullScreen, toggle } : undefined)}
+      </PortalProvider>
+    </div>
+  );
+}

package/src/shared/ui/canFillScreen.ts

@@ -0,0 +1,8 @@
+/**
+ * Whether this browser lets a page fill the screen: neither an iPhone nor a
+ * frame without `allowfullscreen` does.
+ * @returns Whether `requestFullscreen` can succeed.
+ */
+export function canFillScreen(): boolean {
+  return typeof document !== 'undefined' && document.fullscreenEnabled;
+}

package/src/shared/ui/index.ts

@@ -7,3 +7,9 @@ export type {
   ActionTooltipTarget,
 } from './useActionTooltip.ts';
 export { ACTION_TOOLTIP_DELAY, useActionTooltip } from './useActionTooltip.ts';
+export { canFillScreen } from './canFillScreen.ts';
+export type {
+  FullscreenStageProps,
+  StageFullscreen,
+} from './FullscreenStage.tsx';
+export { FullscreenStage } from './FullscreenStage.tsx';

package/src/split/ui/splitPanes.tsx

@@ -65,9 +65,9 @@ export interface SplitPanesProps extends SplitRange {
    */
   stackBelow?: number;
   /**
-   * The gutter each pane keeps beside the splitter, in pixels, so neither
-   * figure is read against its edge.
-   * @default 6
+   * The gutter each pane keeps beside the splitter, in pixels. The bar is
+   * already the separation, so a gutter only widens it into a band of page.
+   * @default 0
    */
   gutter?: number;
   /**
@@ -234,7 +234,7 @@ const STACK_ACROSS = 860;
 const STACK_DOWN = 420;
 
 /** The gutter a pane keeps beside the splitter, in pixels. */
-const GUTTER = 6;
+const GUTTER = 0;
 
 /** The gap between the panes once they have stacked, in pixels. */
 const STACKED_GAP = 16;

package/src/structure/core/structureNotations.ts

@@ -56,6 +56,13 @@ export interface StructureNotation {
   block: boolean;
 }
 
+/**
+ * Notations the caller has already written, shown instead of the ones
+ * OpenChemLib would write. A drawing program's molfile keeps its
+ * abbreviations as superatoms, which a round trip through OpenChemLib drops.
+ */
+export type SuppliedNotations = Partial<Record<StructureNotationKind, string>>;
+
 /** What a molfile is, for the application that opens one. */
 const MOLFILE_TYPE = 'chemical/x-mdl-molfile';
 
@@ -66,35 +73,45 @@ const MOLFILE_TYPE = 'chemical/x-mdl-molfile';
  * tautomer cannot always be canonized — comes back empty rather than taking
  * the rest of the list down with it.
  * @param molecule - The structure, as the editor handed it over. Not modified.
+ * @param supplied - Notations the caller wrote itself, used as they are.
  * @returns One entry per notation, in the order they are shown.
  */
-export function structureNotations(molecule: Molecule): StructureNotation[] {
-  const idCode = written(() => molecule.getIDCode());
+export function structureNotations(
+  molecule: Molecule,
+  supplied: SuppliedNotations = {},
+): StructureNotation[] {
+  const value = (kind: StructureNotationKind, write: () => string) =>
+    supplied[kind] ?? written(write);
   return [
     {
       kind: 'smiles',
-      value: written(() => molecule.toIsomericSmiles()),
+      value: value('smiles', () => molecule.toIsomericSmiles()),
       canonical: false,
       block: false,
     },
     {
       kind: 'molfileV3000',
-      value: written(() => molecule.toMolfileV3()),
+      value: value('molfileV3000', () => molecule.toMolfileV3()),
       canonical: false,
       file: { suffix: '-v3000', extension: 'mol', mimeType: MOLFILE_TYPE },
       block: true,
     },
     {
       kind: 'molfileV2000',
-      value: written(() => molecule.toMolfile()),
+      value: value('molfileV2000', () => molecule.toMolfile()),
       canonical: false,
       file: { suffix: '-v2000', extension: 'mol', mimeType: MOLFILE_TYPE },
       block: true,
     },
-    { kind: 'idCode', value: idCode, canonical: true, block: false },
+    {
+      kind: 'idCode',
+      value: value('idCode', () => molecule.getIDCode()),
+      canonical: true,
+      block: false,
+    },
     {
       kind: 'noStereoIdCode',
-      value: written(() =>
+      value: value('noStereoIdCode', () =>
         CanonizerUtil.getIDCode(molecule, CanonizerUtil.NOSTEREO),
       ),
       canonical: true,
@@ -102,7 +119,7 @@ export function structureNotations(molecule: Molecule): StructureNotation[] {
     },
     {
       kind: 'noStereoTautomerIdCode',
-      value: written(() =>
+      value: value('noStereoTautomerIdCode', () =>
         CanonizerUtil.getIDCode(molecule, CanonizerUtil.NOSTEREO_TAUTOMER),
       ),
       canonical: true,

package/src/structure/ui/StructureExportPanel.tsx

@@ -15,6 +15,7 @@ import { useChromeT } from '../../i18n/ui/useT.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import { sourceMolecule } from '../core/sourceMolecule.ts';
 import { structureError } from '../core/structureError.ts';
+import type { SuppliedNotations } from '../core/structureNotations.ts';
 import { structureNotations } from '../core/structureNotations.ts';
 import type { StructureSourceInput } from '../core/structureSource.ts';
 import { structureSource } from '../core/structureSource.ts';
@@ -36,6 +37,13 @@ export interface StructureExportPanelProps extends StructureSourceInput {
    * @default false
    */
   fragment?: boolean;
+  /**
+   * Notations the caller wrote itself, shown and saved as they are instead of
+   * the ones OpenChemLib would write from the structure — a drawing program
+   * whose molfile keeps superatoms that a round trip would drop.
+   * @default {}
+   */
+  notations?: SuppliedNotations;
 }
 
 /**
@@ -53,12 +61,17 @@ export function StructureExportPanel(
   props: StructureExportPanelProps,
 ): ReactElement {
   const { idCode, coordinates, molfile, smiles } = props;
-  const { name = 'structure', fragment = false } = props;
+  const { name = 'structure', fragment = false, notations: supplied } = props;
   const t = useChromeT();
 
   const read = useMemo(
-    () => readStructure({ idCode, coordinates, molfile, smiles }, fragment),
-    [idCode, coordinates, molfile, smiles, fragment],
+    () =>
+      readStructure(
+        { idCode, coordinates, molfile, smiles },
+        fragment,
+        supplied,
+      ),
+    [idCode, coordinates, molfile, smiles, fragment, supplied],
   );
 
   if (read.kind !== 'read') {
@@ -120,11 +133,13 @@ type ReadStructure =
  * Read the notation the caller handed over, and write every other one from it.
  * @param input - Whatever notations the caller has.
  * @param fragment - Whether the structure is a query fragment.
+ * @param supplied - Notations the caller wrote itself.
  * @returns The molecule and its notations, or why there are none.
  */
 function readStructure(
   input: StructureSourceInput,
   fragment: boolean,
+  supplied: SuppliedNotations | undefined,
 ): ReadStructure {
   const source = structureSource(input);
   if (source.kind === 'empty') return { kind: 'empty' };
@@ -135,7 +150,11 @@ function readStructure(
     // structure from the one that was drawn.
     if (fragment) molecule.setFragment(true);
     if (molecule.getAllAtoms() === 0) return { kind: 'empty' };
-    return { kind: 'read', molecule, notations: structureNotations(molecule) };
+    return {
+      kind: 'read',
+      molecule,
+      notations: structureNotations(molecule, supplied),
+    };
   } catch (error) {
     return { kind: 'error', message: structureError(error).message };
   }

package/src/structure/ui/index.ts

@@ -36,6 +36,10 @@ export { StructureExportButton } from './StructureExportButton.tsx';
 export type { CardStructureProps } from './CardStructure.tsx';
 export { CardStructure } from './CardStructure.tsx';
 export type { StructureExportPanelProps } from './StructureExportPanel.tsx';
+export type {
+  StructureNotationKind,
+  SuppliedNotations,
+} from '../core/structureNotations.ts';
 export type { ToolbarFloorOptions } from './useToolbarFloor.ts';
 export { useToolbarFloor } from './useToolbarFloor.ts';
 export type { StructureDraft } from './useStructureDraft.ts';