react-cheminfo 0.55.1 → 0.57.0

package/src/molecule3d/ui/Molecule3DToolbar.tsx

@@ -1,6 +1,6 @@
 /**
  * The toolbars floating over the molecule canvas: the view — reset, spin,
- * surface, and the options, export and help popovers — in one vertical
+ * surface, the options and export popovers, full screen and help — in one vertical
  * react-science `Toolbar`, and the measuring tools with their own clear button
  * in a second one under it.
  */
@@ -26,6 +26,14 @@ import {
   SurfaceIcon,
 } from './molecule3dIcons.tsx';
 
+/** Whether the canvas fills the screen, and how to change that. */
+export interface Molecule3DFullscreen {
+  /** Whether the canvas and its toolbars fill the screen. */
+  active: boolean;
+  /** Fill the screen, or leave it. */
+  toggle: () => void;
+}
+
 /** Props of {@link Molecule3DToolbar}. */
 export interface Molecule3DToolbarProps {
   /** Which tools to show; every one it does not name is on. */
@@ -44,6 +52,12 @@ export interface Molecule3DToolbarProps {
   options?: ReactElement;
   /** Content of the export popover; its tool is left out without one. */
   exportPanel?: ReactElement;
+  /**
+   * Whether the canvas fills the screen, and the toggle; its tool is left out
+   * without one, which is what a browser that cannot fill the screen gets.
+   * @default undefined
+   */
+  fullscreen?: Molecule3DFullscreen;
 }
 
 /**
@@ -65,18 +79,21 @@ export function Molecule3DToolbar(props: Molecule3DToolbarProps): ReactElement {
     onResetView,
     options,
     exportPanel,
+    fullscreen,
   } = props;
   const t = useChromeT();
   const tools = resolveMolecule3DTools(toolsProp);
   const showOptions = tools.options && options !== undefined;
   const showSurfaceTool = tools.surface && onShowSurfaceChange !== undefined;
   const showExport = tools.export && exportPanel !== undefined;
+  const showFullscreen = tools.fullscreen && fullscreen !== undefined;
   const hasView =
     tools.spin ||
     tools.surface ||
     tools.reset ||
     showOptions ||
     showExport ||
+    showFullscreen ||
     tools.help;
 
   return (
@@ -141,6 +158,16 @@ export function Molecule3DToolbar(props: Molecule3DToolbarProps): ReactElement {
                 }}
               />
             )}
+            {showFullscreen && (
+              <Toolbar.Item
+                icon={fullscreen.active ? 'minimize' : 'fullscreen'}
+                active={fullscreen.active}
+                aria-label={t('molecule3d.fullScreen')}
+                tooltip={t('molecule3d.fullScreen')}
+                tooltipProps={TOOLTIP_PROPS}
+                onClick={fullscreen.toggle}
+              />
+            )}
             {tools.help && (
               <Toolbar.PopoverItem
                 placement="right-start"

package/src/molecule3d/ui/MoleculeCanvas3D.tsx

@@ -1,5 +1,6 @@
 /**
- * The molstar canvas of `MoleculeViewer3D`, with its toolbars over it.
+ * The molstar canvas of `MoleculeViewer3D`, with its toolbars over it, in a
+ * box that can fill the screen.
  *
  * Reached through `React.lazy`, so a page that never shows a molecule never
  * downloads molstar.
@@ -17,6 +18,7 @@ import {
 
 import { Molecule3DExport } from './Molecule3DExport.tsx';
 import { Molecule3DOptions } from './Molecule3DOptions.tsx';
+import { Molecule3DStage } from './Molecule3DStage.tsx';
 import { Molecule3DToolbar } from './Molecule3DToolbar.tsx';
 import { createMolecule3DViewer } from './createViewer.ts';
 import type { MoleculeViewer3DProps } from './moleculeViewer3DProps.ts';
@@ -150,44 +152,53 @@ export function MoleculeCanvas3D(props: MoleculeCanvas3DProps): ReactElement {
   );
 
   return (
-    <div style={{ ...STAGE_STYLE, minHeight }}>
-      <div ref={setContainer} style={CANVAS_STYLE} data-testid="molecule3d" />
-      {molfile !== null && (
-        <div style={OVERLAY_STYLE}>
-          <Molecule3DToolbar
-            tools={tools}
-            measureKind={measureKind}
-            onMeasureKindChange={setMeasureKind}
-            measurementCount={measurements.length}
-            onClearMeasurements={() => {
-              setMeasurements(NO_MEASUREMENTS);
-            }}
-            spinning={spinning}
-            onSpinningChange={setSpinning}
-            showSurface={settings.showSurface}
-            onShowSurfaceChange={(showSurface) => {
-              setSettings({ ...settings, showSurface });
-            }}
-            onResetView={resetView}
-            options={
-              <Molecule3DOptions
-                settings={settings}
-                onChange={setSettings}
-                polarSurfaceArea={polarSurfaceArea}
-                defaults={initialSettings}
-              />
-            }
-            exportPanel={
-              <Molecule3DExport
-                getSize={canvasSize}
-                onExport={exportImage}
-                onCopy={copyImage}
-              />
-            }
+    <Molecule3DStage style={{ ...STAGE_STYLE, minHeight }}>
+      {(fullscreen) => (
+        <>
+          <div
+            ref={setContainer}
+            style={CANVAS_STYLE}
+            data-testid="molecule3d"
           />
-        </div>
+          {molfile !== null && (
+            <div style={OVERLAY_STYLE}>
+              <Molecule3DToolbar
+                tools={tools}
+                fullscreen={fullscreen}
+                measureKind={measureKind}
+                onMeasureKindChange={setMeasureKind}
+                measurementCount={measurements.length}
+                onClearMeasurements={() => {
+                  setMeasurements(NO_MEASUREMENTS);
+                }}
+                spinning={spinning}
+                onSpinningChange={setSpinning}
+                showSurface={settings.showSurface}
+                onShowSurfaceChange={(showSurface) => {
+                  setSettings({ ...settings, showSurface });
+                }}
+                onResetView={resetView}
+                options={
+                  <Molecule3DOptions
+                    settings={settings}
+                    onChange={setSettings}
+                    polarSurfaceArea={polarSurfaceArea}
+                    defaults={initialSettings}
+                  />
+                }
+                exportPanel={
+                  <Molecule3DExport
+                    getSize={canvasSize}
+                    onExport={exportImage}
+                    onCopy={copyImage}
+                  />
+                }
+              />
+            </div>
+          )}
+        </>
       )}
-    </div>
+    </Molecule3DStage>
   );
 }
 

package/src/molecule3d/ui/MoleculeViewer3D.tsx

@@ -1,6 +1,7 @@
 /**
  * A molecule in three dimensions, with a toolbar to measure it, turn it, wrap
- * it in its surface and restyle it — and what to say when there cannot be one.
+ * it in its surface, restyle it and fill the screen with it — and what to say
+ * when there cannot be one.
  *
  * The WebGL probe runs before molstar is touched, so a machine without WebGL
  * gets an explanation instead of a blank rectangle, and the canvas sits behind

package/src/molecule3d/ui/index.ts

@@ -11,7 +11,10 @@ export { Molecule3DExport } from './Molecule3DExport.tsx';
 export type { Molecule3DExportProps } from './Molecule3DExport.tsx';
 export { Molecule3DHelp } from './Molecule3DHelp.tsx';
 export { Molecule3DToolbar } from './Molecule3DToolbar.tsx';
-export type { Molecule3DToolbarProps } from './Molecule3DToolbar.tsx';
+export type {
+  Molecule3DFullscreen,
+  Molecule3DToolbarProps,
+} from './Molecule3DToolbar.tsx';
 export type {
   MoleculeImageRequest,
   SceneCapture,