react-cheminfo 0.27.0 → 0.29.0

package/lib/download/core/svgBounds.js

@@ -0,0 +1,69 @@
+/** Marks the group holding what a drawing is of, as opposed to its canvas. */
+export const CONTENT_ATTRIBUTE = 'data-export-content';
+/**
+ * The rectangle the drawing itself occupies, rather than the one on screen.
+ *
+ * A canvas is mostly empty space to draw into: what is on screen is a window
+ * over it, wherever it was last panned to and however far it was zoomed. None
+ * of that belongs in a file, so a picture is written out from the drawing
+ * outwards — the group it is drawn in is measured, and the window is ignored.
+ * Whatever is written on it is measured with it, so a name hanging under the
+ * bottom of the drawing is not cut off.
+ *
+ * An SVG that marks no such group — a molecule depiction, which is drawn to the
+ * size of its box and nothing else — is measured whole. What is left out there
+ * is only the room the drawing already left around itself.
+ * @param svg - The element to measure, as it is rendered.
+ * @param padding - Room left around the symbols, in drawing units. Defaults to
+ *   `0`.
+ * @returns The rectangle, or `null` when nothing is drawn or the element is not
+ *   rendered — a measurement is only ever taken of something on screen.
+ */
+export function contentBox(svg, padding = 0) {
+    const marked = svg.querySelector(`[${CSS.escape(CONTENT_ATTRIBUTE)}]`);
+    const content = marked instanceof SVGGraphicsElement ? marked : svg;
+    const box = content.getBBox();
+    if (box.width <= 0 || box.height <= 0)
+        return null;
+    return {
+        x: box.x - padding,
+        y: box.y - padding,
+        width: box.width + padding * 2,
+        height: box.height + padding * 2,
+    };
+}
+/**
+ * The rectangle the element itself covers, rather than the marks inside it.
+ *
+ * A chart is drawn to the box it was given — its axes reach the edges of it and
+ * its trace reaches wherever the data does — so the box is the picture, and
+ * measuring the marks would crop the frame off it. It is measured where it is
+ * on the page, and read off its own attributes where it is not: a picture of a
+ * stacked editor is composed out of the panes rather than being any one element
+ * on screen, so it never has a place on the page to be measured at and carries
+ * the size it was composed at instead.
+ * @param svg - The element to measure.
+ * @returns The rectangle, or `null` when it is neither laid out nor sized.
+ */
+export function elementBox(svg) {
+    const laidOut = svg.getBoundingClientRect();
+    if (laidOut.width > 0 && laidOut.height > 0) {
+        return { x: 0, y: 0, width: laidOut.width, height: laidOut.height };
+    }
+    const width = statedSide(svg, 'width');
+    const height = statedSide(svg, 'height');
+    if (width <= 0 || height <= 0)
+        return null;
+    return { x: 0, y: 0, width, height };
+}
+/**
+ * A side the element states for itself, for one that is not on the page.
+ * @param svg - The element.
+ * @param name - Which side to read.
+ * @returns Its length in drawing units, `0` when it states none.
+ */
+function statedSide(svg, name) {
+    const stated = Number.parseFloat(svg.getAttribute(name) ?? '');
+    return Number.isFinite(stated) ? stated : 0;
+}
+//# sourceMappingURL=svgBounds.js.map

package/lib/download/core/svgBounds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svgBounds.js","sourceRoot":"","sources":["../../../src/download/core/svgBounds.ts"],"names":[],"mappings":"AAQA,8EAA8E;AAC9E,MAAM,CAAC,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,UAAU,CAAC,GAAkB,EAAE,OAAO,GAAG,CAAC;IACxD,MAAM,MAAM,GAAG,GAAG,CAAC,aAAa,CAAC,IAAI,GAAG,CAAC,MAAM,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;IACvE,MAAM,OAAO,GAAG,MAAM,YAAY,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC;IAEpE,MAAM,GAAG,GAAG,OAAO,CAAC,OAAO,EAAE,CAAC;IAC9B,IAAI,GAAG,CAAC,KAAK,IAAI,CAAC,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC;QAAE,OAAO,IAAI,CAAC;IAEnD,OAAO;QACL,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,OAAO;QAClB,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,OAAO;QAClB,KAAK,EAAE,GAAG,CAAC,KAAK,GAAG,OAAO,GAAG,CAAC;QAC9B,MAAM,EAAE,GAAG,CAAC,MAAM,GAAG,OAAO,GAAG,CAAC;KACjC,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,UAAU,CAAC,GAAkB;IAC3C,MAAM,OAAO,GAAG,GAAG,CAAC,qBAAqB,EAAE,CAAC;IAC5C,IAAI,OAAO,CAAC,KAAK,GAAG,CAAC,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC5C,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,CAAC;IACtE,CAAC;IAED,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IACvC,MAAM,MAAM,GAAG,UAAU,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;IACzC,IAAI,KAAK,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC;QAAE,OAAO,IAAI,CAAC;IAC3C,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AACvC,CAAC;AAED;;;;;GAKG;AACH,SAAS,UAAU,CAAC,GAAkB,EAAE,IAAwB;IAC9D,MAAM,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IAC/D,OAAO,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9C,CAAC"}

package/lib/download/core/svgNamespace.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The namespace every SVG element is created in.
+ *
+ * `document.createElementNS` needs it to make an element the browser draws
+ * rather than an unknown tag, and a file written out needs it declared on the
+ * root or nothing will open it.
+ */
+export declare const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+//# sourceMappingURL=svgNamespace.d.ts.map

package/lib/download/core/svgNamespace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svgNamespace.d.ts","sourceRoot":"","sources":["../../../src/download/core/svgNamespace.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,eAAO,MAAM,aAAa,+BAA+B,CAAC"}

package/lib/download/core/svgNamespace.js

@@ -0,0 +1,10 @@
+/**
+ * The namespace every SVG element is created in.
+ *
+ * `document.createElementNS` needs it to make an element the browser draws
+ * rather than an unknown tag, and a file written out needs it declared on the
+ * root or nothing will open it.
+ */
+// eslint-disable-next-line unicorn/prefer-https -- the SVG namespace is a fixed identifier, not a URL to fetch
+export const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+//# sourceMappingURL=svgNamespace.js.map

package/lib/download/core/svgNamespace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svgNamespace.js","sourceRoot":"","sources":["../../../src/download/core/svgNamespace.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,+GAA+G;AAC/G,MAAM,CAAC,MAAM,aAAa,GAAG,4BAA4B,CAAC"}

package/lib/download/core/svgToPng.d.ts

@@ -0,0 +1,43 @@
+import type { SvgBox } from './svgBounds.ts';
+export interface PngOptions {
+    /**
+     * The rectangle of the drawing to rasterize, in drawing units.
+     * @default what the element is currently showing
+     */
+    box?: SvgBox | null;
+    /**
+     * How wide the PNG is, in pixels.
+     * @default the width the element is drawn at, times `scale`
+     */
+    width?: number;
+    /**
+     * How tall the PNG is, in pixels.
+     * @default the height the element is drawn at, times `scale`
+     */
+    height?: number;
+    /**
+     * How many device pixels to give each pixel of the drawing, when no size is
+     * given.
+     * @default 2
+     */
+    scale?: number;
+    /**
+     * What the picture is read out as, in the document it is rasterized from.
+     * @default the label the element already carries
+     */
+    label?: string;
+}
+/**
+ * Rasterize a rendered SVG element to a PNG.
+ *
+ * This is the one place in the package a bitmap is made, and it is made only on
+ * the way out: everything is drawn as SVG so it stays sharp at any zoom, and a
+ * PNG exists for the places a vector cannot be pasted into. Asked for no size
+ * it is drawn at twice the size it is shown at, so it is still readable on a
+ * retina screen and survives being scaled up a little in a slide.
+ * @param svg - The element to rasterize, as it is rendered.
+ * @param options - What part of it to rasterize, and how big.
+ * @returns The PNG.
+ */
+export declare function svgToPng(svg: SVGSVGElement, options?: PngOptions): Promise<Blob>;
+//# sourceMappingURL=svgToPng.d.ts.map

package/lib/download/core/svgToPng.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svgToPng.d.ts","sourceRoot":"","sources":["../../../src/download/core/svgToPng.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAM7C,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;GAWG;AACH,wBAAsB,QAAQ,CAC5B,GAAG,EAAE,aAAa,EAClB,OAAO,GAAE,UAAe,GACvB,OAAO,CAAC,IAAI,CAAC,CA2Bf"}

package/lib/download/core/svgToPng.js

@@ -0,0 +1,79 @@
+import { svgToString } from "./svgToString.js";
+/** How many device pixels a PNG gets per pixel the drawing is shown at. */
+const DEFAULT_SCALE = 2;
+/**
+ * Rasterize a rendered SVG element to a PNG.
+ *
+ * This is the one place in the package a bitmap is made, and it is made only on
+ * the way out: everything is drawn as SVG so it stays sharp at any zoom, and a
+ * PNG exists for the places a vector cannot be pasted into. Asked for no size
+ * it is drawn at twice the size it is shown at, so it is still readable on a
+ * retina screen and survives being scaled up a little in a slide.
+ * @param svg - The element to rasterize, as it is rendered.
+ * @param options - What part of it to rasterize, and how big.
+ * @returns The PNG.
+ */
+export async function svgToPng(svg, options = {}) {
+    const { box = null, width, height, scale = DEFAULT_SCALE, label } = options;
+    const rendered = svg.getBoundingClientRect();
+    const pixelWidth = side(width ?? (box?.width ?? rendered.width) * scale);
+    const pixelHeight = side(height ?? (box?.height ?? rendered.height) * scale);
+    // The document is written at the size the PNG is asked for rather than blown
+    // up afterwards: the shapes are rasterized once, at the final size, so the
+    // symbols and their labels stay sharp however big the picture is.
+    const image = await loadImage(svgToString(svg, { box, width: pixelWidth, height: pixelHeight, label }));
+    const canvas = document.createElement('canvas');
+    canvas.width = pixelWidth;
+    canvas.height = pixelHeight;
+    const context = canvas.getContext('2d');
+    if (!context)
+        throw new Error('The browser gave no drawing context.');
+    // A PNG carries an alpha channel and the structure is drawn in black, so a
+    // background left transparent comes out black on black wherever it is pasted.
+    context.fillStyle = '#ffffff';
+    context.fillRect(0, 0, canvas.width, canvas.height);
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+    return await toPngBlob(canvas);
+}
+/**
+ * A side of the picture, in whole pixels.
+ * @param value - How long it is.
+ * @returns Whole pixels, never zero: a canvas sized zero rasterizes nothing.
+ */
+function side(value) {
+    return Math.max(1, Math.round(value));
+}
+/**
+ * Load an SVG document as an image.
+ * @param source - The SVG document.
+ * @returns The image, already decoded, so it can be drawn straight away.
+ */
+async function loadImage(source) {
+    const url = URL.createObjectURL(new Blob([source], { type: 'image/svg+xml' }));
+    try {
+        const image = new Image();
+        image.src = url;
+        await image.decode();
+        return image;
+    }
+    finally {
+        // The decoded image no longer needs the URL it came from.
+        URL.revokeObjectURL(url);
+    }
+}
+/**
+ * Read a canvas back as a PNG.
+ * @param canvas - What was drawn.
+ * @returns The PNG.
+ */
+async function toPngBlob(canvas) {
+    return await new Promise((resolve, reject) => {
+        canvas.toBlob((blob) => {
+            if (blob)
+                resolve(blob);
+            else
+                reject(new Error('The browser produced no PNG.'));
+        }, 'image/png');
+    });
+}
+//# sourceMappingURL=svgToPng.js.map

package/lib/download/core/svgToPng.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svgToPng.js","sourceRoot":"","sources":["../../../src/download/core/svgToPng.ts"],"names":[],"mappings":"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"}

package/lib/download/core/svgToString.d.ts

@@ -0,0 +1,45 @@
+import type { SvgBox } from './svgBounds.ts';
+export interface SvgDocumentOptions {
+    /**
+     * The rectangle of the drawing to write out, in drawing units.
+     * @default what the element is currently showing
+     */
+    box?: SvgBox | null;
+    /**
+     * How wide the document is, in pixels.
+     * @default the width the element is drawn at
+     */
+    width?: number;
+    /**
+     * How tall the document is, in pixels.
+     * @default the height the element is drawn at
+     */
+    height?: number;
+    /**
+     * What the document is read out as. Given one, the copy becomes a picture
+     * rather than the thing on screen: it is no longer reachable by the keyboard,
+     * and it is described as what it shows rather than as what could be done to
+     * it.
+     * @default the label the element already carries
+     */
+    label?: string;
+}
+/**
+ * Write a rendered SVG element out as a standalone SVG document.
+ *
+ * On the page the element takes its size from the box it sits in, which is not
+ * something that travels with it: opened on its own the same markup would be
+ * sized by whatever it is opened in. The copy therefore carries a size, as
+ * attributes, so the file is a picture rather than a drawing to be laid out
+ * again.
+ *
+ * A rectangle can be given to write out part of the drawing — the symbols
+ * rather than the canvas around them — and a size to write it out bigger than
+ * it is on screen. Neither turns the picture into pixels: an SVG holds shapes,
+ * so the numbers only say how big it opens.
+ * @param svg - The element to write out, as it is rendered.
+ * @param options - What part of it to write out, and how big.
+ * @returns The SVG document, ready to be saved or rasterized.
+ */
+export declare function svgToString(svg: SVGSVGElement, options?: SvgDocumentOptions): string;
+//# sourceMappingURL=svgToString.d.ts.map

package/lib/download/core/svgToString.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svgToString.d.ts","sourceRoot":"","sources":["../../../src/download/core/svgToString.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAG7C,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,WAAW,CACzB,GAAG,EAAE,aAAa,EAClB,OAAO,GAAE,kBAAuB,GAC/B,MAAM,CA2BR"}

package/lib/download/core/svgToString.js

@@ -0,0 +1,58 @@
+import { SVG_NAMESPACE } from "./svgNamespace.js";
+/**
+ * Write a rendered SVG element out as a standalone SVG document.
+ *
+ * On the page the element takes its size from the box it sits in, which is not
+ * something that travels with it: opened on its own the same markup would be
+ * sized by whatever it is opened in. The copy therefore carries a size, as
+ * attributes, so the file is a picture rather than a drawing to be laid out
+ * again.
+ *
+ * A rectangle can be given to write out part of the drawing — the symbols
+ * rather than the canvas around them — and a size to write it out bigger than
+ * it is on screen. Neither turns the picture into pixels: an SVG holds shapes,
+ * so the numbers only say how big it opens.
+ * @param svg - The element to write out, as it is rendered.
+ * @param options - What part of it to write out, and how big.
+ * @returns The SVG document, ready to be saved or rasterized.
+ */
+export function svgToString(svg, options = {}) {
+    const { box = null, width, height, label } = options;
+    const clone = svg.cloneNode(true);
+    if (label !== undefined) {
+        clone.setAttribute('role', 'img');
+        clone.setAttribute('aria-label', label);
+        // A canvas is focused to be drawn on; a file of it is only looked at.
+        clone.removeAttribute('tabindex');
+    }
+    const rendered = svg.getBoundingClientRect();
+    const drawnWidth = side(width ?? box?.width ?? rendered.width);
+    const drawnHeight = side(height ?? box?.height ?? rendered.height);
+    clone.setAttribute('xmlns', SVG_NAMESPACE);
+    clone.setAttribute('width', String(drawnWidth));
+    clone.setAttribute('height', String(drawnHeight));
+    if (box) {
+        clone.setAttribute('viewBox', `${round(box.x)} ${round(box.y)} ${round(box.width)} ${round(box.height)}`);
+    }
+    else if (!clone.hasAttribute('viewBox')) {
+        clone.setAttribute('viewBox', `0 0 ${drawnWidth} ${drawnHeight}`);
+    }
+    return new XMLSerializer().serializeToString(clone);
+}
+/**
+ * A side of the document, as an attribute takes it.
+ * @param value - How long it is.
+ * @returns Whole pixels, never zero: a document sized zero is an empty file.
+ */
+function side(value) {
+    return Math.max(1, Math.round(value));
+}
+/**
+ * A drawing coordinate, short enough to read.
+ * @param value - The coordinate.
+ * @returns It, to two decimals.
+ */
+function round(value) {
+    return Math.round(value * 100) / 100;
+}
+//# sourceMappingURL=svgToString.js.map

package/lib/download/core/svgToString.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svgToString.js","sourceRoot":"","sources":["../../../src/download/core/svgToString.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AA4BlD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,WAAW,CACzB,GAAkB,EAClB,UAA8B,EAAE;IAEhC,MAAM,EAAE,GAAG,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC;IAErD,MAAM,KAAK,GAAG,GAAG,CAAC,SAAS,CAAC,IAAI,CAAkB,CAAC;IACnD,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACxB,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAClC,KAAK,CAAC,YAAY,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;QACxC,sEAAsE;QACtE,KAAK,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;IACpC,CAAC;IACD,MAAM,QAAQ,GAAG,GAAG,CAAC,qBAAqB,EAAE,CAAC;IAC7C,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,EAAE,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC/D,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,IAAI,GAAG,EAAE,MAAM,IAAI,QAAQ,CAAC,MAAM,CAAC,CAAC;IAEnE,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;IAC3C,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IAChD,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;IAClD,IAAI,GAAG,EAAE,CAAC;QACR,KAAK,CAAC,YAAY,CAChB,SAAS,EACT,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAC3E,CAAC;IACJ,CAAC;SAAM,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC;QAC1C,KAAK,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,UAAU,IAAI,WAAW,EAAE,CAAC,CAAC;IACpE,CAAC;IAED,OAAO,IAAI,aAAa,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;AACtD,CAAC;AAED;;;;GAIG;AACH,SAAS,IAAI,CAAC,KAAa;IACzB,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AACxC,CAAC;AAED;;;;GAIG;AACH,SAAS,KAAK,CAAC,KAAa;IAC1B,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;AACvC,CAAC"}

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

@@ -0,0 +1,46 @@
+import type { IconName } from '@blueprintjs/core';
+import type { ReactNode } from 'react';
+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 declare function ExportDialogFrame(props: ExportDialogFrameProps): import("react").JSX.Element;
+//# sourceMappingURL=ExportDialogFrame.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExportDialogFrame.d.ts","sourceRoot":"","sources":["../../../src/download/ui/ExportDialogFrame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,WAAW,sBAAsB;IACrC,qCAAqC;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,IAAI,EAAE,QAAQ,CAAC;IACf;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kEAAkE;IAClE,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,KAAK,SAAS,CAAC;IAC5D,2CAA2C;IAC3C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,+BAgC9D"}

package/lib/download/ui/ExportDialogFrame.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
+import { useState } from 'react';
+import { useConfirmOnEnter } from "../../panel/ui/useConfirmOnEnter.js";
+import { exportNoteStyle } from "../core/exportStyles.js";
+/**
+ * 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) {
+    const { isOpen, title, icon, filename, width = DEFAULT_WIDTH, mountWhileOpen = false, children, onClose, } = props;
+    const [status, setStatus] = useState(null);
+    useConfirmOnEnter(isOpen, onClose);
+    return (_jsxs(Dialog, { isOpen: isOpen, title: title, icon: icon, style: { width, maxWidth: '92vw' }, onClose: onClose, children: [_jsx(DialogBody, { children: mountWhileOpen && !isOpen ? null : children(setStatus) }, filename), _jsx(DialogFooter, { actions: _jsx(Button, { text: "Close", onClick: onClose }), children: _jsx("span", { style: exportNoteStyle, children: status }) })] }));
+}
+const DEFAULT_WIDTH = 560;
+//# sourceMappingURL=ExportDialogFrame.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExportDialogFrame.js","sourceRoot":"","sources":["../../../src/download/ui/ExportDialogFrame.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE7E,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAkC1D;;;;;;;;;;GAUG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,EACJ,MAAM,EACN,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,KAAK,GAAG,aAAa,EACrB,cAAc,GAAG,KAAK,EACtB,QAAQ,EACR,OAAO,GACR,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAE1D,iBAAiB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEnC,OAAO,CACL,MAAC,MAAM,IACL,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,EAClC,OAAO,EAAE,OAAO,aAEhB,KAAC,UAAU,cACR,cAAc,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,IADxC,QAAQ,CAEZ,EACb,KAAC,YAAY,IAAC,OAAO,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,GAAI,YAC9D,eAAM,KAAK,EAAE,eAAe,YAAG,MAAM,GAAQ,GAChC,IACR,CACV,CAAC;AACJ,CAAC;AAED,MAAM,aAAa,GAAG,GAAG,CAAC"}

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

@@ -0,0 +1,47 @@
+import type { PictureFrame } from '../core/pictureExport.ts';
+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 declare function ExportImageDialog(props: ExportImageDialogProps): import("react").JSX.Element;
+//# sourceMappingURL=ExportImageDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExportImageDialog.d.ts","sourceRoot":"","sources":["../../../src/download/ui/ExportImageDialog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAK7D,MAAM,WAAW,sBAAsB;IACrC,qCAAqC;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,UAAU,EAAE,MAAM,aAAa,GAAG,IAAI,CAAC;IACvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,2CAA2C;IAC3C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,+BAqC9D"}

package/lib/download/ui/ExportImageDialog.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DEFAULT_IMAGE_RESOLUTION } from "../core/imageResolution.js";
+import { ExportDialogFrame } from "./ExportDialogFrame.js";
+import { ExportPictureSection } from "./ExportPictureSection.js";
+/**
+ * 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) {
+    const { isOpen, getDrawing, filename = 'picture', label = 'Drawing', frame, onClose, } = props;
+    const [resolutionId, setResolutionId] = useState(DEFAULT_IMAGE_RESOLUTION.id);
+    return (_jsx(ExportDialogFrame, { isOpen: isOpen, title: "Export as an image", icon: "media", filename: filename, width: 460, mountWhileOpen: true, onClose: onClose, children: (onStatus) => (_jsx(ExportPictureSection, { getDrawing: getDrawing, resolutionId: resolutionId, onResolutionChange: setResolutionId, filename: filename, label: label, frame: frame, onStatus: onStatus })) }));
+}
+//# sourceMappingURL=ExportImageDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExportImageDialog.js","sourceRoot":"","sources":["../../../src/download/ui/ExportImageDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAGtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAyB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA4B,CAAC;AAiClE;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,EACJ,MAAM,EACN,UAAU,EACV,QAAQ,GAAG,SAAS,EACpB,KAAK,GAAG,SAAS,EACjB,KAAK,EACL,OAAO,GACR,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,wBAAwB,CAAC,EAAE,CAC5B,CAAC;IAEF,OAAO,CACL,KAAC,iBAAiB,IAChB,MAAM,EAAE,MAAM,EACd,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,GAAG,EACV,cAAc,QACd,OAAO,EAAE,OAAO,YAEf,CAAC,QAAQ,EAAE,EAAE,CAAC,CACb,KAAC,oBAAoB,IACnB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,eAAe,EACnC,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,GAClB,CACH,GACiB,CACrB,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,29 @@
+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 declare function ExportNameField(props: ExportNameFieldProps): import("react").JSX.Element;
+//# sourceMappingURL=ExportNameField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExportNameField.d.ts","sourceRoot":"","sources":["../../../src/download/ui/ExportNameField.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,oBAAoB;IACnC,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,+BAmD1D"}