react-cheminfo 0.75.0 → 0.77.0

package/src/panel/ui/SidePanelItem.tsx

@@ -0,0 +1,162 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { useCallback, useRef, useState } from 'react';
+import { Accordion, Button } from 'react-science/ui';
+
+import type { Language } from '../../i18n/core/languages.ts';
+import { useLanguage } from '../../i18n/ui/useLanguage.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
+import { FullscreenStage } from '../../shared/ui/FullscreenStage.tsx';
+import { canFillScreen } from '../../shared/ui/canFillScreen.ts';
+import { TOKEN } from '../../tokens/core/familyTokens.ts';
+import { panelStyle, panelToolbarStyle } from '../core/panelStyles.ts';
+
+/** Props of {@link SidePanelItem}. */
+export interface SidePanelItemProps {
+  /** Identity of the panel in the stack. */
+  id: string;
+  /** What the header says. */
+  title: string;
+  /** Whether the panel shows its body. */
+  isOpen: boolean;
+  /**
+   * Called when the chevron, the header or a shift-click on another header
+   * folds or unfolds the panel.
+   * @param isOpen - Whether it shows its body.
+   */
+  onOpenChange: (isOpen: boolean) => void;
+  /**
+   * Whether the panel is the one in focus, and the toggle; `undefined` while it
+   * is alone in the stack, where there is nothing to fold.
+   */
+  focus: { active: boolean; toggle: () => void } | undefined;
+  /** Called when the close cross is pressed. */
+  onClose: () => void;
+  /** The body. */
+  children: ReactNode;
+}
+
+/**
+ * One panel of the stack: the header with the shell's gestures, and the body,
+ * which is also the box that fills the screen.
+ *
+ * The header is not part of what fills the screen, so a body that does carries
+ * a bar of its own with the title and the way back.
+ * @param props - See {@link SidePanelItemProps}.
+ * @returns The accordion item.
+ */
+export function SidePanelItem(props: SidePanelItemProps) {
+  const { id, title, isOpen, onOpenChange, focus, onClose, children } = props;
+  const t = useChromeT();
+  const panel = inSentence(title, useLanguage());
+  const [canFill] = useState(canFillScreen);
+  const body = useRef<HTMLDivElement | null>(null);
+  const onStage = useCallback((element: HTMLDivElement | null) => {
+    body.current = element;
+  }, []);
+
+  function fillScreen(): void {
+    if (!isOpen) onOpenChange(true);
+    void body.current?.requestFullscreen().catch(() => undefined);
+  }
+
+  return (
+    <Accordion.Item
+      id={id}
+      title={title}
+      open={isOpen}
+      onOpenChange={onOpenChange}
+      renderToolbar={() => (
+        <>
+          {focus !== undefined && (
+            <Button
+              variant="minimal"
+              icon={focus.active ? 'expand-all' : 'collapse-all'}
+              aria-pressed={focus.active}
+              aria-label={t('panel.focus', { panel })}
+              tooltipProps={{
+                content: focus.active
+                  ? t('panel.unfocusTooltip')
+                  : t('panel.focusTooltip'),
+              }}
+              onClick={focus.toggle}
+            />
+          )}
+          {canFill && (
+            <Button
+              variant="minimal"
+              icon="fullscreen"
+              aria-label={t('panel.fillScreen', { panel })}
+              tooltipProps={{ content: t('panel.fillScreenTooltip') }}
+              onClick={fillScreen}
+            />
+          )}
+          <Button
+            variant="minimal"
+            icon={isOpen ? 'chevron-down' : 'chevron-right'}
+            data-panel-open={isOpen}
+            aria-expanded={isOpen}
+            aria-label={t(isOpen ? 'panel.fold' : 'panel.unfold', { panel })}
+            tooltipProps={{
+              content: t(isOpen ? 'panel.foldTooltip' : 'panel.unfoldTooltip'),
+            }}
+            onClick={() => onOpenChange(!isOpen)}
+          />
+          <Button
+            variant="minimal"
+            icon="cross"
+            tooltipProps={{ content: t('panel.closeTooltip') }}
+            aria-label={t('panel.close', { panel })}
+            onClick={onClose}
+          />
+        </>
+      )}
+    >
+      <FullscreenStage style={bodyStyle} onStage={onStage}>
+        {(fullscreen) => (
+          <>
+            {fullscreen?.active === true && (
+              <div style={fullscreenBarStyle}>
+                <span style={fullscreenTitleStyle}>{title}</span>
+                <Button
+                  variant="minimal"
+                  icon="minimize"
+                  aria-label={t('panel.leaveFullScreen')}
+                  tooltipProps={{ content: t('panel.leaveFullScreenTooltip') }}
+                  onClick={fullscreen.toggle}
+                />
+              </div>
+            )}
+            {children}
+          </>
+        )}
+      </FullscreenStage>
+    </Accordion.Item>
+  );
+}
+
+/**
+ * The title as it reads inside a sentence: lowercased, except in German, where
+ * every noun keeps its capital.
+ * @param title - The panel's title.
+ * @param language - The language of the sentence.
+ * @returns The title to write into it.
+ */
+function inSentence(title: string, language: Language): string {
+  return language === 'de' ? title : title.toLocaleLowerCase(language);
+}
+
+/** A box filling the screen shows the backdrop through it unless painted. */
+const filledStyle: CSSProperties = { ...panelStyle, background: TOKEN.surface };
+
+function bodyStyle(fillsScreen: boolean): CSSProperties {
+  return fillsScreen ? filledStyle : panelStyle;
+}
+
+const fullscreenBarStyle: CSSProperties = {
+  ...panelToolbarStyle,
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  paddingLeft: 12,
+};
+
+const fullscreenTitleStyle: CSSProperties = { fontWeight: 'bold' };

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,