react-cheminfo 0.34.0 → 0.36.0

package/lib/download/ui/useDrawingBox.d.ts

@@ -1,23 +0,0 @@
-/** 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 declare function useDrawingBox(): DrawingBox;
-//# sourceMappingURL=useDrawingBox.d.ts.map

package/lib/download/ui/useDrawingBox.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDrawingBox.d.ts","sourceRoot":"","sources":["../../../src/download/ui/useDrawingBox.ts"],"names":[],"mappings":"AAIA,yCAAyC;AACzC,MAAM,WAAW,UAAU;IACzB,oEAAoE;IACpE,MAAM,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C;;;;OAIG;IACH,UAAU,EAAE,MAAM,aAAa,GAAG,IAAI,CAAC;CACxC;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,IAAI,UAAU,CAU1C"}

package/lib/download/ui/useDrawingBox.js

@@ -1,21 +0,0 @@
-import { useCallback, useRef } from 'react';
-import { drawingIn } from "../core/stackedDrawing.js";
-/**
- * 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() {
-    const box = useRef(null);
-    const attach = useCallback((element) => {
-        box.current = element;
-    }, []);
-    const getDrawing = useCallback(() => drawingIn(box.current), []);
-    return { attach, getDrawing };
-}
-//# sourceMappingURL=useDrawingBox.js.map

package/lib/download/ui/useDrawingBox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDrawingBox.js","sourceRoot":"","sources":["../../../src/download/ui/useDrawingBox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AActD;;;;;;;;;GASG;AACH,MAAM,UAAU,aAAa;IAC3B,MAAM,GAAG,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAE7C,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,OAA2B,EAAE,EAAE;QACzD,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC;IACxB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;IAEjE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC;AAChC,CAAC"}

package/src/about/core/repository.ts

@@ -1,22 +0,0 @@
-/**
- * What can be linked to inside a repository, and when.
- *
- * Only GitHub has the addresses the About page builds — a release tag, a
- * commit — and only a repository a visitor can open is worth pointing them at.
- */
-
-/** Where our repositories live, and the only host whose paths we know. */
-const GITHUB = 'https://github.com/';
-
-/**
- * The sources as a base a release or a commit can be appended to.
- * @param repository - Where the sources live.
- * @returns The address without its trailing slash, or `undefined` when it is
- * not a GitHub repository and nothing inside it can be addressed.
- */
-export function githubSources(repository: string): string | undefined {
-  const sources = repository.endsWith('/')
-    ? repository.slice(0, -1)
-    : repository;
-  return sources.startsWith(GITHUB) ? sources : undefined;
-}

package/src/download/core/exportStyles.ts

@@ -1,20 +0,0 @@
-/**
- * A row of buttons with the name box among them, wrapping when the dialog is
- * too narrow for them.
- */
-export const exportButtonsStyle = {
-  display: 'flex',
-  flexWrap: 'wrap',
-  alignItems: 'center',
-  gap: 6,
-} as const;
-
-/** One group of an export dialog: what it offers, in a column. */
-export const exportSectionStyle = {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 8,
-} as const;
-
-/** Text that says something about a control rather than being one. */
-export const exportNoteStyle = { fontSize: 12, opacity: 0.7 } as const;

package/src/download/core/imageResolution.ts

@@ -1,118 +0,0 @@
-/** How big a picture is written out, as a multiple of the size it is drawn at. */
-export interface ImageResolution {
-  /** Identifies the resolution in a picker. */
-  id: string;
-  /** What the option reads. */
-  label: string;
-  /** How many pixels each drawing unit becomes. */
-  scale: number;
-}
-
-/**
- * The sizes a picture leaves the editor at.
- *
- * A drawing unit is about a screen pixel, so the multipliers read as what the
- * picture is for rather than as numbers: what is on screen, the same again on a
- * retina display, and the two steps up a figure needs to survive being printed
- * or thrown on a wall.
- */
-export const IMAGE_RESOLUTIONS = [
-  { id: 'screen', label: 'Screen (1×)', scale: 1 },
-  { id: 'retina', label: 'Retina (2×)', scale: 2 },
-  { id: 'print', label: 'Print (4×)', scale: 4 },
-  { id: 'poster', label: 'Poster (8×)', scale: 8 },
-] as const satisfies readonly ImageResolution[];
-
-/** One of the resolutions offered. */
-export type ImageResolutionId = (typeof IMAGE_RESOLUTIONS)[number]['id'];
-
-/**
- * The resolution a picture is written out at unless another is picked: what is
- * on screen, doubled, which is what a picture pasted into a document wants.
- */
-export const DEFAULT_IMAGE_RESOLUTION = IMAGE_RESOLUTIONS[1];
-
-/**
- * Longest side a browser rasterizes reliably.
- *
- * Above roughly this, Safari and Chrome quietly hand back an empty canvas
- * instead of refusing, so the picture would be saved blank.
- */
-const MAXIMUM_SIDE = 8192;
-
-/** Most pixels a rasterized picture is allowed to hold. */
-const MAXIMUM_PIXELS = 32 * 1024 * 1024;
-
-/** How big a picture comes out, in pixels. */
-export interface ImageSize {
-  /** Width of the picture, in pixels. */
-  width: number;
-  /** Height of the picture, in pixels. */
-  height: number;
-  /**
-   * What each drawing unit was actually worth. Below the resolution that was
-   * asked for when it would have made a picture too big to rasterize.
-   */
-  scale: number;
-}
-
-/**
- * How big a rectangle of the drawing comes out at a given resolution.
- *
- * The resolution is a wish rather than an instruction: a wide glycan asked for
- * at 8× would run past what a browser can rasterize and come back blank, so the
- * scale is brought down until the picture fits instead. The scale it settled on
- * comes back with the size, so what will actually be written can be shown
- * before it is.
- * @param box - The rectangle being written out.
- * @param box.width - How wide it is, in drawing units.
- * @param box.height - How tall it is, in drawing units.
- * @param scale - How many pixels each drawing unit should become.
- * @returns The size, and the scale it was reached at.
- */
-export function imageSize(
-  box: { width: number; height: number },
-  scale: number,
-): ImageSize {
-  const wanted = Number.isFinite(scale) && scale > 0 ? scale : 1;
-  const width = Math.max(box.width, 1);
-  const height = Math.max(box.height, 1);
-
-  const limit = Math.min(
-    MAXIMUM_SIDE / width,
-    MAXIMUM_SIDE / height,
-    Math.sqrt(MAXIMUM_PIXELS / (width * height)),
-  );
-  const used = Math.min(wanted, limit);
-  // A picture held back by the limit is rounded down rather than to the nearest
-  // pixel, so rounding cannot put it back over what it was held to.
-  const toPixels = used < wanted ? Math.floor : Math.round;
-
-  return {
-    width: Math.max(1, toPixels(width * used)),
-    height: Math.max(1, toPixels(height * used)),
-    scale: used,
-  };
-}
-
-/**
- * The resolution an identifier stands for.
- * @param id - What was picked.
- * @returns The resolution, falling back to the default one.
- */
-export function imageResolution(id: string): ImageResolution {
-  return (
-    IMAGE_RESOLUTIONS.find((resolution) => resolution.id === id) ??
-    DEFAULT_IMAGE_RESOLUTION
-  );
-}
-
-/**
- * A size, written the way it is shown next to the resolution it comes from.
- * @param size - The size to write, `null` when nothing is drawn.
- * @returns The text, e.g. `1440 × 620 px`.
- */
-export function formatImageSize(size: ImageSize | null): string {
-  if (!size) return 'nothing to export';
-  return `${size.width} × ${size.height} px`;
-}

package/src/download/core/pictureExport.ts

@@ -1,207 +0,0 @@
-import { writeImageToClipboard } from '../../clipboard/core/copyPng.ts';
-
-import { downloadBlob } from './downloadBlob.ts';
-import { downloadText } from './downloadText.ts';
-import type { ImageSize } from './imageResolution.ts';
-import { imageSize } from './imageResolution.ts';
-import type { SvgBox } from './svgBounds.ts';
-import { contentBox, elementBox } from './svgBounds.ts';
-import { svgToPng } from './svgToPng.ts';
-import { svgToString } from './svgToString.ts';
-
-/**
- * Room left around a drawing in a written-out picture, in drawing units.
- *
- * Enough that a name written under the bottom of the drawing, and the stroke
- * around its outermost mark, are inside the picture rather than against its
- * edge.
- */
-export const PICTURE_PADDING = 12;
-
-/**
- * What the picture is of: the drawing, or the element it is drawn in.
- *
- * `content` measures the drawing and ignores the canvas around it, which is
- * what a drawing surface wants — it is mostly empty space, panned and zoomed to
- * wherever it was last left, and none of that belongs in a file. `element`
- * takes the element as it is laid out, which is what a chart wants: its axes
- * are drawn to the box it was given, so the box *is* the picture and measuring
- * the marks inside it would crop the frame to wherever the data happens to
- * reach.
- */
-export type PictureFrame = 'content' | 'element';
-
-export interface PictureOptions {
-  /**
-   * How many pixels each drawing unit becomes.
-   * @default 2
-   */
-  scale?: number;
-  /**
-   * The name saved files take, without their extension.
-   * @default 'picture'
-   */
-  filename?: string;
-  /**
-   * What the picture is read out as, in place of the instructions the element
-   * carries for whoever is working it.
-   * @default 'Drawing'
-   */
-  label?: string;
-  /**
-   * What the picture is of.
-   * @default 'content'
-   */
-  frame?: PictureFrame;
-  /**
-   * Room left around the drawing, in drawing units. Ignored when the picture is
-   * the element, which is already the size it wants to be.
-   * @default PICTURE_PADDING
-   */
-  padding?: number;
-}
-
-/**
- * How big the drawing comes out at a resolution, before it is written out.
- *
- * What is measured is what the picture will be of rather than whatever is on
- * screen, so the answer does not change when the window is resized or the
- * drawing panned — the size shown next to the resolution is the size of the
- * file that is about to be written.
- * @param svg - The element, as it is rendered.
- * @param scale - How many pixels each drawing unit becomes.
- * @param options - What the picture is of.
- * @returns The size, or `null` when nothing is drawn.
- */
-export function pictureSize(
-  svg: SVGSVGElement | null,
-  scale: number,
-  options: Pick<PictureOptions, 'frame' | 'padding'> = {},
-): ImageSize | null {
-  const box = svg && pictureBox(svg, options);
-  return box && imageSize(box, scale);
-}
-
-/**
- * Put the drawing on the clipboard as a PNG.
- *
- * The rasterization is handed to the clipboard as a promise rather than awaited
- * first: Safari only allows a clipboard write the click itself started.
- * @param svg - The element, as it is rendered.
- * @param options - How big to make it.
- * @returns Whether it was copied. `false` when nothing is drawn, and in a
- *   browser whose clipboard takes text only.
- */
-export async function copyPicture(
-  svg: SVGSVGElement | null,
-  options: PictureOptions = {},
-): Promise<boolean> {
-  const written = describe(svg, options);
-  if (!written) return false;
-  return await writeImageToClipboard(svgToPng(written.svg, written.png));
-}
-
-/**
- * Save the drawing as a PNG.
- * @param svg - The element, as it is rendered.
- * @param options - How big to make it, and what to call it.
- * @returns Whether it was saved. `false` when nothing is drawn.
- */
-export async function savePngPicture(
-  svg: SVGSVGElement | null,
-  options: PictureOptions = {},
-): Promise<boolean> {
-  const written = describe(svg, options);
-  if (!written) return false;
-  downloadBlob(await svgToPng(written.svg, written.png), `${written.name}.png`);
-  return true;
-}
-
-/**
- * Save the drawing as an SVG.
- *
- * The resolution is carried into the file as the size it opens at, but the
- * shapes stay shapes: an SVG printed at any size is drawn again rather than
- * enlarged, which is the reason to prefer it wherever it can go.
- * @param svg - The element, as it is rendered.
- * @param options - How big to make it, and what to call it.
- * @returns Whether it was saved. `false` when nothing is drawn.
- */
-export function saveSvgPicture(
-  svg: SVGSVGElement | null,
-  options: PictureOptions = {},
-): boolean {
-  const written = describe(svg, options);
-  if (!written) return false;
-  downloadText(
-    svgToString(written.svg, written.png),
-    `${written.name}.svg`,
-    'image/svg+xml',
-  );
-  return true;
-}
-
-/** What a picture is written from: the element, its rectangle and its size. */
-interface WrittenPicture {
-  /** The element the picture is taken of. */
-  svg: SVGSVGElement;
-  /**
-   * The part of it to write out, and how big, as both writers take it. The
-   * rectangle is `null` for a picture of the element, which is written out
-   * through whatever `viewBox` it already carries.
-   */
-  png: { box: SvgBox | null; width: number; height: number; label: string };
-  /** The name a file holding it takes, without its extension. */
-  name: string;
-}
-
-/**
- * The rectangle a picture of the element would cover, in drawing units.
- * @param svg - The element, as it is rendered.
- * @param options - What the picture is of.
- * @returns The rectangle, or `null` when nothing is drawn.
- */
-function pictureBox(
-  svg: SVGSVGElement,
-  options: Pick<PictureOptions, 'frame' | 'padding'>,
-): SvgBox | null {
-  const { frame = 'content', padding = PICTURE_PADDING } = options;
-  return frame === 'content' ? contentBox(svg, padding) : elementBox(svg);
-}
-
-/**
- * Work out what a picture of the element would be.
- * @param svg - The element, as it is rendered.
- * @param options - How big to make it, and what to call it.
- * @returns The element and the rectangle to write out, or `null` when nothing
- *   is drawn.
- */
-function describe(
-  svg: SVGSVGElement | null,
-  options: PictureOptions,
-): WrittenPicture | null {
-  const {
-    scale = 2,
-    filename = 'picture',
-    label = 'Drawing',
-    frame = 'content',
-  } = options;
-  if (!svg) return null;
-
-  const box = pictureBox(svg, options);
-  if (!box) return null;
-
-  const size = imageSize(box, scale);
-  return {
-    svg,
-    // A picture of the element keeps the `viewBox` the element was drawn with,
-    // which is the one thing that makes its own scaling come out right.
-    png: {
-      box: frame === 'content' ? box : null,
-      width: size.width,
-      height: size.height,
-      label,
-    },
-    name: filename,
-  };
-}

package/src/download/ui/ExportDialogFrame.tsx

@@ -1,86 +0,0 @@
-import type { IconName } from '@blueprintjs/core';
-import { Button, Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
-import type { ReactNode } from 'react';
-import { useState } from 'react';
-
-import { useConfirmOnEnter } from '../../panel/ui/useConfirmOnEnter.ts';
-import { exportNoteStyle } from '../core/exportStyles.ts';
-
-export interface ExportDialogFrameProps {
-  /** Whether the dialog is showing. */
-  isOpen: boolean;
-  /** What it is about, along the top. */
-  title: string;
-  /** The icon beside that title. */
-  icon: IconName;
-  /**
-   * The name saved files take, without their extension; the section is keyed on
-   * it, so a file saved under a new name is what the name box opens on next
-   * time rather than what was typed and then thought better of.
-   */
-  filename: string;
-  /**
-   * How wide the dialog opens, in pixels. A section showing text needs the room
-   * to show a molfile line whole; one showing controls does not.
-   * @default 560
-   */
-  width?: number;
-  /**
-   * Whether the section is mounted only while the dialog is open, for a section
-   * whose work — measuring a picture off the page — is only worth doing while
-   * it is being looked at.
-   * @default false
-   */
-  mountWhileOpen?: boolean;
-  /** The section, built with the status setter the footer reads. */
-  children: (onStatus: (status: string) => void) => ReactNode;
-  /** Called when the dialog is dismissed. */
-  onClose: () => void;
-}
-
-/**
- * The frame every export dialog shares: the section, and what it last did.
- *
- * Each thing the editor writes out gets a dialog of its own rather than one
- * shared dialog of tabs, since a picture, a structure and a sequence are asked
- * for at different moments; what they have in common is only the frame, which
- * is here so the three cannot come to differ in how they close or where they
- * say what they wrote.
- * @param props - Component props.
- * @returns The dialog.
- */
-export function ExportDialogFrame(props: ExportDialogFrameProps) {
-  const {
-    isOpen,
-    title,
-    icon,
-    filename,
-    width = DEFAULT_WIDTH,
-    mountWhileOpen = false,
-    children,
-    onClose,
-  } = props;
-
-  const [status, setStatus] = useState<string | null>(null);
-
-  useConfirmOnEnter(isOpen, onClose);
-
-  return (
-    <Dialog
-      isOpen={isOpen}
-      title={title}
-      icon={icon}
-      style={{ width, maxWidth: '92vw' }}
-      onClose={onClose}
-    >
-      <DialogBody key={filename}>
-        {mountWhileOpen && !isOpen ? null : children(setStatus)}
-      </DialogBody>
-      <DialogFooter actions={<Button text="Close" onClick={onClose} />}>
-        <span style={exportNoteStyle}>{status}</span>
-      </DialogFooter>
-    </Dialog>
-  );
-}
-
-const DEFAULT_WIDTH = 560;

package/src/download/ui/ExportImageDialog.tsx

@@ -1,91 +0,0 @@
-import { useState } from 'react';
-
-import { DEFAULT_IMAGE_RESOLUTION } from '../core/imageResolution.ts';
-import type { PictureFrame } from '../core/pictureExport.ts';
-
-import { ExportDialogFrame } from './ExportDialogFrame.tsx';
-import { ExportPictureSection } from './ExportPictureSection.tsx';
-
-export interface ExportImageDialogProps {
-  /** Whether the dialog is showing. */
-  isOpen: boolean;
-  /**
-   * The drawing the picture is taken of, as it is rendered. Read when a button
-   * is pressed rather than passed in, since a drawing is laid out again on
-   * every resize. `null` when nothing is drawn.
-   */
-  getDrawing: () => SVGSVGElement | null;
-  /**
-   * The name saved files take, without their extension.
-   * @default 'picture'
-   */
-  filename?: string;
-  /**
-   * What the picture is read out as in the file it is written to, in place of
-   * the instructions the element carries for whoever is working it.
-   * @default 'Drawing'
-   */
-  label?: string;
-  /**
-   * Whether the picture is the drawing inside the element — a canvas, which is
-   * mostly the empty space around what is on it — or the element as it is laid
-   * out, which is what a chart drawn to the box it was given is.
-   * @default 'content'
-   */
-  frame?: PictureFrame;
-  /** Called when the dialog is dismissed. */
-  onClose: () => void;
-}
-
-/**
- * A drawing as a picture: PNG at a chosen resolution, or SVG.
- *
- * How big it comes out is asked rather than guessed, since only one size could
- * be the default and neither a figure nor a thumbnail is it. SVG is the honest
- * answer wherever it is accepted — it is drawn again at whatever size it is
- * printed — so the resolution there is only the size the file opens at.
- *
- * The same dialog writes out a glycan, a molecule and a spectrum, because none
- * of what it does depends on what is drawn: it is handed an SVG element that is
- * already on the page, and asks it how big it is.
- * @param props - Component props.
- * @returns The dialog.
- */
-export function ExportImageDialog(props: ExportImageDialogProps) {
-  const {
-    isOpen,
-    getDrawing,
-    filename = 'picture',
-    label = 'Drawing',
-    frame,
-    onClose,
-  } = props;
-
-  const [resolutionId, setResolutionId] = useState<string>(
-    DEFAULT_IMAGE_RESOLUTION.id,
-  );
-
-  return (
-    <ExportDialogFrame
-      isOpen={isOpen}
-      title="Export as an image"
-      icon="media"
-      filename={filename}
-      width={460}
-      mountWhileOpen
-      onClose={onClose}
-    >
-      {(onStatus) => (
-        <ExportPictureSection
-          getDrawing={getDrawing}
-          resolutionId={resolutionId}
-          onResolutionChange={setResolutionId}
-          filename={filename}
-          label={label}
-          frame={frame}
-          onStatus={onStatus}
-        />
-      )}
-    </ExportDialogFrame>
-  );
-}