react-cheminfo 0.28.0 → 0.30.0

package/src/download/core/imageResolution.ts

@@ -0,0 +1,118 @@
+/** 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/index.ts

@@ -37,3 +37,37 @@ export {
   figureSize,
 } from './figureTarget.ts';
 export { sanitizeFileName } from './sanitizeFileName.ts';
+
+export {
+  exportButtonsStyle,
+  exportNoteStyle,
+  exportSectionStyle,
+} from './exportStyles.ts';
+export type {
+  ImageResolution,
+  ImageResolutionId,
+  ImageSize,
+} from './imageResolution.ts';
+export {
+  DEFAULT_IMAGE_RESOLUTION,
+  IMAGE_RESOLUTIONS,
+  formatImageSize,
+  imageResolution,
+  imageSize,
+} from './imageResolution.ts';
+export type { PictureFrame, PictureOptions } from './pictureExport.ts';
+export {
+  PICTURE_PADDING,
+  copyPicture,
+  pictureSize,
+  savePngPicture,
+  saveSvgPicture,
+} from './pictureExport.ts';
+export { drawingIn, stackDrawings } from './stackedDrawing.ts';
+export type { SvgBox } from './svgBounds.ts';
+export { CONTENT_ATTRIBUTE, contentBox, elementBox } from './svgBounds.ts';
+export { SVG_NAMESPACE } from './svgNamespace.ts';
+export type { PngOptions } from './svgToPng.ts';
+export { svgToPng } from './svgToPng.ts';
+export type { SvgDocumentOptions } from './svgToString.ts';
+export { svgToString } from './svgToString.ts';

package/src/download/core/pictureExport.ts

@@ -0,0 +1,207 @@
+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/core/stackedDrawing.ts

@@ -0,0 +1,108 @@
+import { CHART_PANE_ATTRIBUTE } from '../../chart/core/chartPane.ts';
+
+import { SVG_NAMESPACE } from './svgNamespace.ts';
+
+/**
+ * The drawing a picture of an editor is taken of, found in the box it sits in.
+ *
+ * A drawing is laid out again on every resize, so nothing is held onto but the
+ * box, and what is in it is read at the moment a button is pressed. The box is
+ * asked for rather than the whole editor because an editor is full of SVG —
+ * every icon in every toolbar is one — and the first found in it would be a
+ * picture of a magnifying glass.
+ *
+ * A box holding a stack of charts holds a drawing per pane, and the picture is
+ * all of them: with a run open, a chromatogram stands over the spectrum taken
+ * where its cursor is, and that pairing *is* the figure — a picture of the
+ * chromatogram alone, saved under the spectrum's name, is the wrong answer to
+ * every question it was asked. They are composed into one SVG here rather than
+ * rasterized separately, so the same writers save it, at any resolution, as
+ * either a PNG or a vector.
+ * @param box - The box the drawing sits in, `null` before it is mounted.
+ * @returns The drawing, the panes composed into one, or `null` when the box
+ * holds nothing that has been laid out.
+ */
+export function drawingIn(box: HTMLElement | null): SVGSVGElement | null {
+  if (box === null) return null;
+
+  const panes = box.querySelectorAll<HTMLElement>(
+    `[${CSS.escape(CHART_PANE_ATTRIBUTE)}]`,
+  );
+  if (panes.length === 0) return box.querySelector('svg');
+
+  return stackDrawings(paneDrawings(panes));
+}
+
+/**
+ * Compose several drawings into one, stacked in the order they were given.
+ *
+ * Each becomes a nested `<svg>` placed at the height the ones above it reached
+ * and sized as it is on screen, which is what keeps its own `viewBox` scaling
+ * right — a chart is drawn to the box it was given, so a pane copied at any
+ * other size would have its axes stretched away from its trace. The composite
+ * is never on the page, so it states its size in attributes: that is where
+ * `elementBox` reads it back from.
+ * @param drawings - What to stack, top to bottom.
+ * @returns The composite, the single drawing it was handed unchanged, or `null`
+ * when nothing among them has been laid out.
+ */
+export function stackDrawings(
+  drawings: readonly SVGSVGElement[],
+): SVGSVGElement | null {
+  const first = drawings[0];
+  if (first === undefined) return null;
+  if (drawings.length === 1) return first;
+
+  const stacked = document.createElementNS(SVG_NAMESPACE, 'svg');
+  let width = 0;
+  let top = 0;
+  for (const drawing of drawings) {
+    const rect = drawing.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) continue;
+
+    const copy = drawing.cloneNode(true) as SVGSVGElement;
+    if (!copy.hasAttribute('viewBox')) {
+      copy.setAttribute(
+        'viewBox',
+        `0 0 ${round(rect.width)} ${round(rect.height)}`,
+      );
+    }
+    copy.setAttribute('x', '0');
+    copy.setAttribute('y', String(round(top)));
+    copy.setAttribute('width', String(round(rect.width)));
+    copy.setAttribute('height', String(round(rect.height)));
+    stacked.append(copy);
+
+    width = Math.max(width, rect.width);
+    top += rect.height;
+  }
+  if (top <= 0) return null;
+
+  stacked.setAttribute('width', String(round(width)));
+  stacked.setAttribute('height', String(round(top)));
+  stacked.setAttribute('viewBox', `0 0 ${round(width)} ${round(top)}`);
+  return stacked;
+}
+
+/**
+ * The drawing each pane of a stack holds.
+ * @param panes - The pane boxes, top to bottom.
+ * @returns One drawing per pane that holds one, in the order they are stacked.
+ */
+function paneDrawings(panes: Iterable<HTMLElement>): SVGSVGElement[] {
+  const found: SVGSVGElement[] = [];
+  for (const pane of panes) {
+    const drawing = pane.querySelector('svg');
+    if (drawing !== null) found.push(drawing);
+  }
+  return found;
+}
+
+/**
+ * A coordinate of the composite, short enough to read.
+ * @param value - The coordinate.
+ * @returns It, to two decimals.
+ */
+function round(value: number): number {
+  return Math.round(value * 100) / 100;
+}

package/src/download/core/svgBounds.ts

@@ -0,0 +1,80 @@
+/** A rectangle of an SVG, in the units the drawing is laid out in. */
+export interface SvgBox {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/** 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: SVGSVGElement, padding = 0): SvgBox | null {
+  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: SVGSVGElement): SvgBox | null {
+  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: SVGSVGElement, name: 'width' | 'height'): number {
+  const stated = Number.parseFloat(svg.getAttribute(name) ?? '');
+  return Number.isFinite(stated) ? stated : 0;
+}

package/src/download/core/svgNamespace.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.
+ */
+// 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';

package/src/download/core/svgToPng.ts

@@ -0,0 +1,121 @@
+import type { SvgBox } from './svgBounds.ts';
+import { svgToString } from './svgToString.ts';
+
+/** How many device pixels a PNG gets per pixel the drawing is shown at. */
+const DEFAULT_SCALE = 2;
+
+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 async function svgToPng(
+  svg: SVGSVGElement,
+  options: PngOptions = {},
+): Promise<Blob> {
+  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: number): number {
+  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: string): Promise<HTMLImageElement> {
+  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: HTMLCanvasElement): Promise<Blob> {
+  return await new Promise<Blob>((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (blob) resolve(blob);
+      else reject(new Error('The browser produced no PNG.'));
+    }, 'image/png');
+  });
+}