react-cheminfo 0.34.0 → 0.35.0

package/src/download/ui/ExportNameField.tsx

@@ -1,148 +0,0 @@
-import { useLayoutEffect, useRef } from 'react';
-
-import { TOKEN } from '../../tokens/core/familyTokens.ts';
-
-export interface ExportNameFieldProps {
-  /** What is in the box, without an extension. */
-  name: string;
-  /**
-   * The extension the file is about to take, shown after what is typed.
-   * @default ''
-   */
-  extension?: string;
-  /** Called with what was typed. */
-  onChange: (name: string) => void;
-}
-
-/**
- * What the file about to be written out is called.
- *
- * It sits at the right of the row of buttons, against the one that writes the
- * file, because that is what it is about — copying takes no name, and puts
- * itself at the other end of the row. The name the editor came in with is
- * offered, since that is what a glycan is usually saved under, but a picture
- * for a slide and a molfile for a docking run are rarely wanted under it.
- *
- * The box grows with what is typed, so the extension sits directly against the
- * name and the two read as the one filename they are about to become. Held to a
- * fixed width instead, the extension hangs at the far edge with the gap between
- * them reading as part of neither.
- * @param props - Component props.
- * @returns The field.
- */
-export function ExportNameField(props: ExportNameFieldProps) {
-  const { name, extension = '', onChange } = props;
-
-  const input = useRef<HTMLInputElement>(null);
-  const mirror = useRef<HTMLSpanElement>(null);
-  const ruler = useRef<HTMLSpanElement>(null);
-
-  // Measured off a copy of the text in the same font rather than counted in
-  // characters, which only holds for a monospace one. The width is set on the
-  // element instead of kept in state: it is what the browser has just measured,
-  // so rendering again to store it would measure the same thing twice.
-  useLayoutEffect(() => {
-    if (!input.current || !mirror.current || !ruler.current) return;
-    const measured = mirror.current.offsetWidth + CARET;
-    const floor = ruler.current.offsetWidth;
-    input.current.style.width = `${Math.min(Math.max(measured, floor), MAXIMUM)}px`;
-  });
-
-  return (
-    <div style={fieldStyle}>
-      <div className="bp6-input" style={boxStyle}>
-        <input
-          ref={input}
-          value={name}
-          aria-label="File name"
-          placeholder={PLACEHOLDER}
-          spellCheck={false}
-          autoComplete="off"
-          style={inputStyle}
-          onChange={(event) => onChange(event.target.value)}
-          // The name is in force as it is typed, so Enter has nothing left to
-          // confirm — and is kept off the dialog, whose answer is to close.
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') event.stopPropagation();
-          }}
-        />
-        {extension === '' ? null : (
-          <span style={extensionStyle}>{extension}</span>
-        )}
-        {/* Inside the box rather than beside it, so the copy the width is
-            measured off is in the font the box gives its own text and not in
-            whatever the dialog around it happens to use. */}
-        <span ref={mirror} style={mirrorStyle} aria-hidden="true">
-          {name === '' ? PLACEHOLDER : name}
-        </span>
-        <span ref={ruler} style={mirrorStyle} aria-hidden="true">
-          {FLOOR_SAMPLE}
-        </span>
-      </div>
-    </div>
-  );
-}
-
-/** What the box says when nothing has been typed into it. */
-const PLACEHOLDER = 'File name';
-
-/** Room for the caret past the last character, so it is never clipped. */
-const CARET = 2;
-
-/**
- * Twenty characters, which the box is never narrower than.
- *
- * A name is typed into this box as often as it is read out of it, and a box cut
- * to `glycan` leaves no room to do that in — so the floor is a name of the
- * length one usually is, measured in the box's own font rather than counted at
- * some assumed character width. `n` is about the average width of a lowercase
- * letter, which is what a filename is mostly made of.
- */
-const FLOOR_SAMPLE = 'n'.repeat(20);
-
-/** Past this a name scrolls inside the box rather than pushing the dialog. */
-const MAXIMUM = 260;
-
-// Held against the right of the row beside the button that writes the file, so
-// the space in the row falls between copying and saving rather than inside the
-// name.
-const fieldStyle = { marginLeft: 'auto', flexShrink: 0 } as const;
-
-// Blueprint's own input chrome, worn by the box rather than by the field inside
-// it, so the name and the extension sit within one border. Positioned, so the
-// hidden copy the width is measured off can be taken out of the layout without
-// leaving the box it takes its font from.
-const boxStyle = {
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  width: 'fit-content',
-} as const;
-
-// The field itself brings nothing of its own: the box around it is what is
-// seen, and the text has to be in the font the width was measured in.
-const inputStyle = {
-  font: 'inherit',
-  border: 'none',
-  outline: 'none',
-  padding: 0,
-  margin: 0,
-  background: 'transparent',
-  color: 'inherit',
-} as const;
-
-const extensionStyle = {
-  color: TOKEN.textMuted,
-  whiteSpace: 'pre',
-} as const;
-
-// A copy of what is typed, in the same font, laid out but never painted.
-const mirrorStyle = {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  visibility: 'hidden',
-  pointerEvents: 'none',
-  whiteSpace: 'pre',
-  font: 'inherit',
-} as const;

package/src/download/ui/ExportPictureSection.tsx

@@ -1,142 +0,0 @@
-import { Button, HTMLSelect } from '@blueprintjs/core';
-import { useState } from 'react';
-
-import {
-  exportButtonsStyle,
-  exportNoteStyle,
-  exportSectionStyle,
-} from '../core/exportStyles.ts';
-import {
-  IMAGE_RESOLUTIONS,
-  formatImageSize,
-  imageResolution,
-} from '../core/imageResolution.ts';
-import type { PictureFrame } from '../core/pictureExport.ts';
-import {
-  copyPicture,
-  pictureSize,
-  savePngPicture,
-  saveSvgPicture,
-} from '../core/pictureExport.ts';
-import { sanitizeFileName } from '../core/sanitizeFileName.ts';
-
-import { ExportNameField } from './ExportNameField.tsx';
-
-export interface ExportPictureSectionProps {
-  /** The drawing a picture is taken of, as it is rendered. */
-  getDrawing: () => SVGSVGElement | null;
-  /** Which of the resolutions is picked. */
-  resolutionId: string;
-  /** Called with the resolution that was picked. */
-  onResolutionChange: (id: string) => void;
-  /**
-   * The name the name box opens on, and falls back to when it is cleared,
-   * without its extension.
-   */
-  filename: string;
-  /** What the picture is read out as in the file it is written to. */
-  label: string;
-  /**
-   * Whether the picture is the drawing inside the element or the element as it
-   * is laid out.
-   * @default 'content'
-   */
-  frame?: PictureFrame;
-  /** Called with what became of the last thing written out. */
-  onStatus: (status: string) => void;
-}
-
-/**
- * The drawing as a picture: how big it comes out, and where it goes.
- *
- * The size the file will be is shown beside the resolution rather than after
- * the fact, since that is the number the choice is made on — a figure for a
- * paper and a thumbnail for a slide are the same drawing at very different
- * sizes. What is measured is what the picture will be of and not whatever is on
- * screen, so the answer does not change when the window is resized or the
- * drawing panned.
- * @param props - Component props.
- * @returns The section.
- */
-export function ExportPictureSection(props: ExportPictureSectionProps) {
-  const {
-    getDrawing,
-    resolutionId,
-    onResolutionChange,
-    filename,
-    label,
-    frame,
-    onStatus,
-  } = props;
-
-  const [name, setName] = useState(filename);
-
-  const savedName = sanitizeFileName(name, filename);
-  const { scale } = imageResolution(resolutionId);
-  const size = pictureSize(getDrawing(), scale, { frame });
-  const options = { scale, filename: savedName, label, frame };
-
-  return (
-    <section style={exportSectionStyle}>
-      <div style={resolutionStyle}>
-        <HTMLSelect
-          value={resolutionId}
-          aria-label="Resolution"
-          onChange={(event) => onResolutionChange(event.currentTarget.value)}
-        >
-          {IMAGE_RESOLUTIONS.map((resolution) => (
-            <option key={resolution.id} value={resolution.id}>
-              {resolution.label}
-            </option>
-          ))}
-        </HTMLSelect>
-        <span style={exportNoteStyle}>{formatImageSize(size)}</span>
-      </div>
-      <div style={exportButtonsStyle}>
-        <Button
-          icon="duplicate"
-          disabled={size === null}
-          text="Copy PNG"
-          onClick={() => {
-            // The rasterization is started here rather than awaited: Safari
-            // only allows a clipboard write the click itself started.
-            void copyPicture(getDrawing(), options).then(
-              (copied) =>
-                onStatus(copied ? 'Picture copied.' : 'Nothing was copied.'),
-              () => onStatus('Nothing was copied.'),
-            );
-          }}
-        />
-        <ExportNameField name={name} onChange={setName} />
-        <Button
-          icon="download"
-          disabled={size === null}
-          text="Save PNG"
-          title={`Save as ${savedName}.png`}
-          onClick={() => {
-            void savePngPicture(getDrawing(), options).then((saved) => {
-              if (saved) onStatus(`Saved as ${savedName}.png.`);
-            });
-          }}
-        />
-        <Button
-          icon="download"
-          disabled={size === null}
-          text="Save SVG"
-          title={`Save as ${savedName}.svg`}
-          onClick={() => {
-            if (saveSvgPicture(getDrawing(), options)) {
-              onStatus(`Saved as ${savedName}.svg.`);
-            }
-          }}
-        />
-      </div>
-    </section>
-  );
-}
-
-const resolutionStyle = {
-  display: 'flex',
-  alignItems: 'center',
-  gap: 8,
-} as const;

package/src/download/ui/useDrawingBox.ts

@@ -1,37 +0,0 @@
-import { useCallback, useRef } from 'react';
-
-import { drawingIn } from '../core/stackedDrawing.ts';
-
-/** The box a picture is taken out of. */
-export interface DrawingBox {
-  /** Put on the box the drawing sits in, so it can be found again. */
-  attach: (element: HTMLElement | null) => void;
-  /**
-   * The drawing a picture is taken of, `null` when the box holds none — which
-   * is what an editor showing nothing yet, or one whose box has not been
-   * mounted, hands the export dialog.
-   */
-  getDrawing: () => SVGSVGElement | null;
-}
-
-/**
- * Find the drawing a picture is to be taken of, when it is asked for.
- *
- * A drawing is laid out again on every resize, so the element itself is never
- * held onto: what is kept is the box it sits in, and the drawing is read out of
- * it at the moment a button is pressed. What counts as the drawing in there —
- * the one element for an editor showing one, the panes composed for an editor
- * showing a stack of charts — is `drawingIn`.
- * @returns The box to attach, and the drawing inside it.
- */
-export function useDrawingBox(): DrawingBox {
-  const box = useRef<HTMLElement | null>(null);
-
-  const attach = useCallback((element: HTMLElement | null) => {
-    box.current = element;
-  }, []);
-
-  const getDrawing = useCallback(() => drawingIn(box.current), []);
-
-  return { attach, getDrawing };
-}