react-cheminfo 0.39.1 → 0.40.0

package/src/molstar/core/camera.ts

@@ -0,0 +1,61 @@
+/**
+ * The camera moves every molstar scene of ours needs, and the one measurement
+ * they all take: how big a sphere has to be framed for a handful of atoms to
+ * be legible.
+ */
+
+import { Vec3 } from 'molstar/lib/mol-math/linear-algebra.js';
+import type { PluginContext } from 'molstar/lib/mol-plugin/context.js';
+
+/** Transition length used when the caller does not pick one, milliseconds. */
+export const DEFAULT_CAMERA_DURATION = 250;
+
+/** Turn rate used when the caller does not pick one, in molstar's spin unit. */
+export const DEFAULT_SPIN_SPEED = 1 / 3;
+
+/**
+ * Fraction of the bounding sphere kept as breathing room around the scene.
+ *
+ * `camera.reset()` frames with molstar's own margin, which suits a protein
+ * filling a wide viewport and leaves a small molecule a speck in the middle:
+ * measured coverage was 20% of the pixels. Framing the visible bounding sphere
+ * directly, with a small margin, is what makes a single water molecule legible.
+ */
+export const FRAMING_MARGIN = 0.08;
+
+/** Smallest radius framed, ångström, so one atom is not a close-up. */
+export const MINIMUM_FRAMING_RADIUS = 0.5;
+
+/** Axis the automatic spin turns about: screen up. */
+const SPIN_AXIS = Vec3.create(0, 1, 0);
+
+/**
+ * The radius a reset frames, which is the length every stored camera is
+ * measured against — so reading a camera and applying it are the same move in
+ * opposite directions.
+ * @param radius - Radius of the scene's visible bounding sphere.
+ * @returns The framed radius.
+ */
+export function framedRadius(radius: number): number {
+  return Math.max(radius * (1 + FRAMING_MARGIN), MINIMUM_FRAMING_RADIUS);
+}
+
+/**
+ * Turn the automatic spin on or off. It moves the camera, never the object.
+ * @param plugin - The molstar context.
+ * @param spinning - Whether the scene should keep turning.
+ * @param speed - Turn rate, in molstar's own spin unit.
+ */
+export function setSpin(
+  plugin: PluginContext,
+  spinning: boolean,
+  speed = DEFAULT_SPIN_SPEED,
+): void {
+  plugin.canvas3d?.setProps({
+    trackball: {
+      animate: spinning
+        ? { name: 'spin', params: { speed, axis: SPIN_AXIS } }
+        : { name: 'off', params: {} },
+    },
+  });
+}

package/src/molstar/core/cameraPose.ts

@@ -0,0 +1,126 @@
+/**
+ * The two directions between molstar's camera and the camera a shared link
+ * carries.
+ *
+ * A link stores the camera against what is drawn rather than against ångström —
+ * a rotation from the front view, a zoom against the distance that frames the
+ * scene, and a target offset in its own radii — so a view opens the same on any
+ * screen. Which sphere is the yardstick is the caller's to decide: a site whose
+ * scene grows after the model arrives measures against the model alone, or one
+ * view would read as two zooms.
+ */
+
+import { Quat, Vec3 } from 'molstar/lib/mol-math/linear-algebra.js';
+
+import type { Molecule3DCamera } from '../../molecule3d/core/camera.ts';
+import { normalizeMolecule3DCamera } from '../../molecule3d/core/camera.ts';
+
+/** Where the camera is and where it looks, in world coordinates. */
+export interface CameraPose {
+  position: Vec3;
+  target: Vec3;
+  up: Vec3;
+}
+
+/** The sphere a stored camera is measured against. */
+export interface CameraReference {
+  center: Vec3;
+  /** Radius, ångström, framing margin included. */
+  radius: number;
+}
+
+/** How small an offset, in radii, is written as none at all. */
+export interface PoseOptions {
+  /**
+   * Target offsets below this, in radii, are read as zero. The framing centres
+   * on the scene a hair off the atoms' own centre, and that hair would
+   * otherwise be written into every link as `,0,0,0`.
+   * @default 0
+   */
+  snapOffset?: number;
+}
+
+/** The camera's own axes, which a stored rotation turns into world ones. */
+const CAMERA_UP = Vec3.create(0, 1, 0);
+const CAMERA_BACK = Vec3.create(0, 0, 1);
+
+/**
+ * Measure a pose against what is drawn.
+ * @param pose - Where the camera is.
+ * @param reference - The sphere to measure against.
+ * @param framingDistance - How far from the target the camera stands to frame
+ * the reference sphere; the length `zoom: 1` means.
+ * @param options - See {@link PoseOptions}.
+ * @returns The camera, or `null` for a degenerate pose.
+ */
+export function poseToCamera(
+  pose: CameraPose,
+  reference: CameraReference,
+  framingDistance: number,
+  options: PoseOptions = {},
+): Molecule3DCamera | null {
+  const { snapOffset = 0 } = options;
+  const { position, target, up } = pose;
+  const back = Vec3.sub(Vec3.zero(), position, target);
+  const distance = Vec3.magnitude(back);
+  if (distance <= 0) return null;
+  Vec3.scale(back, back, 1 / distance);
+  // The trackball keeps up and back close to square, never exactly so.
+  const trueUp = Vec3.scaleAndAdd(Vec3.zero(), up, back, -Vec3.dot(up, back));
+  if (Vec3.magnitude(trueUp) <= 0) return null;
+  Vec3.normalize(trueUp, trueUp);
+  const right = Vec3.cross(Vec3.zero(), trueUp, back);
+  const rotation = Quat.fromBasis(Quat.identity(), right, trueUp, back);
+  const offset = Vec3.sub(Vec3.zero(), target, reference.center);
+  Vec3.scale(offset, offset, 1 / reference.radius);
+  return normalizeMolecule3DCamera({
+    rotation: [
+      rotation[0] ?? 0,
+      rotation[1] ?? 0,
+      rotation[2] ?? 0,
+      rotation[3] ?? 1,
+    ],
+    zoom: framingDistance / distance,
+    offset: [
+      snap(offset[0], snapOffset),
+      snap(offset[1], snapOffset),
+      snap(offset[2], snapOffset),
+    ],
+  });
+}
+
+/**
+ * The pose a stored camera stands at: {@link poseToCamera} the other way round.
+ * @param camera - The stored camera.
+ * @param reference - The sphere it was measured against.
+ * @param framingDistance - See {@link poseToCamera}.
+ * @returns The pose.
+ */
+export function cameraToPose(
+  camera: Molecule3DCamera,
+  reference: CameraReference,
+  framingDistance: number,
+): CameraPose {
+  const { rotation, zoom, offset } = normalizeMolecule3DCamera(camera);
+  const turn = Quat.create(rotation[0], rotation[1], rotation[2], rotation[3]);
+  const up = Vec3.transformQuat(Vec3.zero(), CAMERA_UP, turn);
+  const back = Vec3.transformQuat(Vec3.zero(), CAMERA_BACK, turn);
+  const shift = Vec3.create(offset[0], offset[1], offset[2]);
+  const target = Vec3.scaleAndAdd(
+    Vec3.zero(),
+    reference.center,
+    shift,
+    reference.radius,
+  );
+  const position = Vec3.scaleAndAdd(
+    Vec3.zero(),
+    target,
+    back,
+    framingDistance / zoom,
+  );
+  return { position, target, up };
+}
+
+function snap(value: number | undefined, threshold: number): number {
+  return value === undefined || Math.abs(value) < threshold ? 0 : value;
+}

package/src/molstar/core/hover.ts

@@ -0,0 +1,109 @@
+/**
+ * What the pointer rests on, as a line of text.
+ *
+ * Every drawing our sites make carries a label already — `C1 sp³ σ to H5 (+)`,
+ * `C3 along [111]` — but molstar's own UI is not mounted, so nothing shows
+ * them. This turns the plugin's hover behaviour into that one string, which the
+ * canvas renders itself.
+ */
+
+import type { Loci } from 'molstar/lib/mol-model/loci.js';
+import { isEmptyLoci, isEveryLoci } from 'molstar/lib/mol-model/loci.js';
+import {
+  Bond,
+  StructureElement,
+  StructureProperties,
+} from 'molstar/lib/mol-model/structure.js';
+import type { PluginContext } from 'molstar/lib/mol-plugin/context.js';
+import { lociLabel } from 'molstar/lib/mol-theme/label.js';
+
+/**
+ * Report whatever the pointer rests on.
+ * @param plugin - The molstar context.
+ * @param listener - Called with the loci, or `null` when the pointer is over
+ * nothing. The pointer over the background reports an empty loci, whose label
+ * is the word "Nothing" — a sentence, not an absence — so it arrives as `null`.
+ * @returns The unsubscribe function.
+ */
+export function subscribeHover(
+  plugin: PluginContext,
+  listener: (loci: Loci | null) => void,
+): () => void {
+  const subscription = plugin.behaviors.interaction.hover.subscribe((event) => {
+    const { loci } = event.current;
+    listener(isEmptyLoci(loci) || isEveryLoci(loci) ? null : loci);
+  });
+  return () => {
+    subscription.unsubscribe();
+  };
+}
+
+/**
+ * The one line a loci is worth, in molstar's own words.
+ * @param loci - What the pointer is over.
+ * @returns The label, stripped of the markup molstar writes into it, or `null`
+ * when there is nothing to say.
+ */
+export function lociText(loci: Loci): string | null {
+  if (isEmptyLoci(loci) || isEveryLoci(loci)) return null;
+  const label = stripMarkup(lociLabel(loci, { granularity: 'element' }));
+  return label === '' ? null : label;
+}
+
+/**
+ * The atoms a loci holds, in words a reader wants.
+ *
+ * molstar names one after the row it parsed — `xyz | Model 0 | Instance 1_555 |
+ * A | MOL 1 | O [idx 1]` — which is the address of a line in a file we wrote to
+ * hand it the atoms, and says nothing a student wants. The element and which
+ * atom of the scene it is do: the two hydrogens of water can then be told apart.
+ * @param loci - What the pointer rests on: an atom, or the two ends of a bond.
+ * @returns `O 1`, `Si 4 — O 8`, or `null` when the loci holds no atom.
+ */
+export function atomText(loci: Loci): string | null {
+  const atoms = StructureElement.Loci.is(loci)
+    ? loci
+    : Bond.isLoci(loci)
+      ? Bond.toStructureElementLoci(loci)
+      : null;
+  if (atoms === null) return null;
+  const names: string[] = [];
+  StructureElement.Loci.forEachLocation(atoms, (location) => {
+    names.push(
+      atomName(
+        String(StructureProperties.atom.type_symbol(location)),
+        StructureProperties.atom.sourceIndex(location),
+      ),
+    );
+  });
+  return names.length === 0 ? null : names.join(' — ');
+}
+
+/**
+ * What a site calls one atom of its scene.
+ *
+ * molstar upper-cases an element symbol on its way in, so the atom it hands
+ * back from an `Si` it was given is an `SI`, which is not how anybody writes
+ * silicon. The number is which atom of the scene it is, counting from one.
+ * @param element - Its element symbol, in any case.
+ * @param index - Its place in the file the viewer was handed, from zero.
+ * @returns `O 1`, `Si 4`.
+ */
+export function atomName(element: string, index: number): string {
+  const symbol =
+    element.charAt(0).toUpperCase() + element.slice(1).toLowerCase();
+  return `${symbol} ${index + 1}`;
+}
+
+/**
+ * Molstar's label providers return HTML, and a readout is plain text.
+ * @param label
+ */
+function stripMarkup(label: string): string {
+  return label
+    .replaceAll(/<[^>]*>/g, ' ')
+    .replaceAll('&nbsp;', ' ')
+    .replaceAll('&amp;', '&')
+    .replaceAll(/\s+/g, ' ')
+    .trim();
+}

package/src/molstar/core/index.ts

@@ -0,0 +1,13 @@
+export type { CameraPose, CameraReference, PoseOptions } from './cameraPose.ts';
+export { cameraToPose, poseToCamera } from './cameraPose.ts';
+export {
+  DEFAULT_CAMERA_DURATION,
+  DEFAULT_SPIN_SPEED,
+  FRAMING_MARGIN,
+  MINIMUM_FRAMING_RADIUS,
+  framedRadius,
+  setSpin,
+} from './camera.ts';
+export { atomName, atomText, lociText, subscribeHover } from './hover.ts';
+export type { MolstarPluginOptions } from './plugin.ts';
+export { MolstarPlugin } from './plugin.ts';

package/src/molstar/core/plugin.ts

@@ -0,0 +1,159 @@
+/**
+ * Lifecycle of one headless molstar canvas: created now, disposed whenever,
+ * every call queued behind initialisation.
+ *
+ * The constructor is **synchronous** on purpose. React 19 runs an effect, its
+ * cleanup and the effect again on every mount in development, so an `await`ed
+ * constructor hands the cleanup nothing to dispose and leaks a WebGL context
+ * per mount — browsers drop the oldest after about sixteen, and the viewer
+ * silently goes blank. Returning the handle immediately means `dispose()` can
+ * always be called, even before initialisation has finished; the work is queued
+ * behind `ready`.
+ *
+ * molstar's own UI is never mounted: every control on our sites is ours.
+ */
+
+import { PluginViewModel } from 'molstar/lib/extensions/plugin/view-model.js';
+import type { PluginContext } from 'molstar/lib/mol-plugin/context.js';
+import type { PluginSpec } from 'molstar/lib/mol-plugin/spec.js';
+// Lowercased on import: it is a factory, not a constructor.
+import { DefaultPluginSpec as defaultPluginSpec } from 'molstar/lib/mol-plugin/spec.js';
+import { Color } from 'molstar/lib/mol-util/color/color.js';
+
+/** Settings fixed for the life of a plugin. */
+export interface MolstarPluginOptions {
+  /**
+   * Scene background, as `#rrggbb`. A WebGL clear colour, so it cannot be a CSS
+   * custom property.
+   * @default '#ffffff'
+   */
+  background?: string;
+  /**
+   * How long molstar animates a reframe it decided on itself; 0 jumps.
+   *
+   * Replacing a scene commits several times — the old drawing is deleted, the
+   * new one added — and molstar glides the camera on each, so the model appears
+   * to drift into place. Reframing is right; animating it between two unrelated
+   * scenes is not.
+   * @default molstar's own 250 ms
+   */
+  cameraResetDurationMilliseconds?: number;
+  /**
+   * The last word on the spec, applied over everything above: a site that needs
+   * a behaviour dropped, a marking colour or a renderer setting of its own
+   * passes it here rather than mounting its own view model.
+   */
+  spec?: (spec: PluginSpec) => PluginSpec;
+}
+
+/** One molstar canvas, and the queue everything drawn on it goes through. */
+export class MolstarPlugin {
+  readonly #model: PluginViewModel;
+  #disposed = false;
+
+  /** Resolves once the canvas exists; every call awaits it internally. */
+  readonly ready: Promise<void>;
+
+  /**
+   * Mount a canvas in `container` and start initialising it.
+   * @param container - An element with `position: relative`; molstar inserts
+   * its own canvas into it.
+   * @param options - See {@link MolstarPluginOptions}.
+   */
+  constructor(container: HTMLElement, options: MolstarPluginOptions = {}) {
+    const {
+      background = '#ffffff', // tokens-ok: a WebGL clear colour
+      cameraResetDurationMilliseconds,
+      spec: refine,
+    } = options;
+    const base = defaultPluginSpec();
+    const spec: PluginSpec = {
+      ...base,
+      canvas3d: {
+        ...base.canvas3d,
+        renderer: { backgroundColor: Color.fromHexStyle(background) },
+        // A scene is read from its own shape, never from the world axes.
+        camera: { helper: { axes: { name: 'off', params: {} } } },
+        ...(cameraResetDurationMilliseconds === undefined
+          ? {}
+          : { cameraResetDurationMs: cameraResetDurationMilliseconds }),
+      },
+    };
+    this.#model = new PluginViewModel({
+      spec: refine === undefined ? spec : refine(spec),
+    });
+    this.#model.mount(container);
+    this.ready = this.#model.initialized;
+  }
+
+  /** Whether {@link dispose} has been called. */
+  get disposed(): boolean {
+    return this.#disposed;
+  }
+
+  /**
+   * Wait for initialisation, then run `action` on the plugin.
+   * @param action - What to do with the molstar context.
+   * @returns What `action` returned, or `undefined` once the plugin has been
+   * disposed — before the call or while `action` was still running. An
+   * initialisation failure, and anything `action` throws while the plugin is
+   * alive, still reach the caller.
+   */
+  async run<Result>(
+    action: (plugin: PluginContext) => Result | Promise<Result>,
+  ): Promise<Result | undefined> {
+    if (this.#disposed) return undefined;
+    await this.ready;
+    if (this.#disposed) return undefined;
+    try {
+      return await action(this.#model.plugin);
+    } catch (error) {
+      if (this.#disposed) return undefined;
+      throw error;
+    }
+  }
+
+  /**
+   * Start a subscription once the plugin exists.
+   * @param start - Subscribes, and returns its own unsubscribe function.
+   * @returns A function that stops the subscription, or stops it from ever
+   * starting; safe to call at any time.
+   */
+  subscribe(start: (plugin: PluginContext) => () => void): () => void {
+    let stop: (() => void) | null = null;
+    let cancelled = false;
+    void this.run((plugin) => {
+      if (cancelled) return;
+      stop = start(plugin);
+    });
+    return () => {
+      cancelled = true;
+      stop?.();
+      stop = null;
+    };
+  }
+
+  /** Re-read the container's size. Call from a `ResizeObserver`. */
+  handleResize(): void {
+    if (this.#disposed) return;
+    this.#model.plugin.handleResize();
+  }
+
+  /**
+   * Tear the canvas down and release its WebGL context. Idempotent, and safe to
+   * call before initialisation has finished.
+   */
+  dispose(): void {
+    if (this.#disposed) return;
+    this.#disposed = true;
+    // `mount` creates the canvas synchronously, so the context exists even when
+    // initialisation went on to fail; releasing it is what stops the browser
+    // dropping an older viewer's. A rejected `ready` must not escape here
+    // either — nobody is left to handle it.
+    void this.ready
+      .catch(() => undefined)
+      .then(() => {
+        this.#model.plugin.dispose();
+      });
+  }
+}

package/src/molstar.ts

@@ -0,0 +1,22 @@
+/**
+ * The molstar layer under the 3D views: the plugin lifecycle, the camera, the
+ * hover labels, the measurements and the picture of a scene.
+ *
+ * Three of our sites mount a headless molstar canvas — the molecule viewer
+ * here, lcao's orbitals and symmetry's crystals — and each of them had its own
+ * copy of the lifecycle, the spec and the spin. This is that one copy; what
+ * stays in a site is the scene it draws.
+ *
+ * **Importing this pulls molstar in statically.** A site that only wants
+ * `<MoleculeViewer3D>` imports `react-cheminfo/molecule3d`, whose canvas is
+ * lazy.
+ */
+
+export * from './molstar/core/index.ts';
+export { captureScene } from './molecule3d/ui/captureScene.ts';
+export type { MoleculeStructureSource } from './molecule3d/ui/measurements.ts';
+export {
+  atomReferenceOf,
+  clearMeasurements,
+  renderMeasurements,
+} from './molecule3d/ui/measurements.ts';

package/src/structure/ui/ConformerTable.tsx

@@ -78,6 +78,14 @@ export interface ConformerTableProps {
    * @default undefined — every column keeps its own
    */
   columnLabels?: Partial<Record<ConformerColumn, string>>;
+  /**
+   * Whether the energies on screen are expected to be replaced — a force
+   * field's numbers while a better method is still working on the set. They
+   * are then drawn muted, so a reader can tell at a glance which of the two
+   * rankings they are looking at.
+   * @default false
+   */
+  provisional?: boolean;
 }
 
 /**
@@ -102,6 +110,7 @@ export function ConformerTable(
     label = 'Conformers, most stable first',
     rowName = String,
     columnLabels,
+    provisional = false,
   } = props;
 
   const bodyRef = useRef<HTMLTableSectionElement>(null);
@@ -208,7 +217,7 @@ export function ConformerTable(
                   <ClickToCopy
                     key={column}
                     as="td"
-                    style={cellStyle(column)}
+                    style={cellStyle(column, provisional)}
                     value={content}
                     label={COPY_LABELS[column]}
                     testId={CELL_TEST_IDS[column]}
@@ -218,7 +227,7 @@ export function ConformerTable(
                 ) : (
                   <td
                     key={column}
-                    style={cellStyle(column)}
+                    style={cellStyle(column, provisional)}
                     data-testid={CELL_TEST_IDS[column]}
                   >
                     {content}
@@ -360,8 +369,24 @@ function headerStyle(column: ConformerColumn): CSSProperties | undefined {
   return NUMERIC_CONFORMER_COLUMNS.has(column) ? numericStyle : undefined;
 }
 
-function cellStyle(column: ConformerColumn): CSSProperties | undefined {
-  return NUMERIC_CONFORMER_COLUMNS.has(column) ? numericStyle : undefined;
+/**
+ * A cell's own style: numbers are right-aligned and tabular, and every cell a
+ * better method will restate is muted while it works. The rank is not one of
+ * them — it names the row rather than measuring it, and it is what a reader
+ * follows as the order changes under them.
+ * @param column - The column the cell is in.
+ * @param provisional - Whether the energies are still expected to change.
+ * @returns The cell's inline style, or `undefined` when it needs none.
+ */
+function cellStyle(
+  column: ConformerColumn,
+  provisional: boolean,
+): CSSProperties | undefined {
+  const numeric = NUMERIC_CONFORMER_COLUMNS.has(column);
+  if (!provisional || column === 'id') {
+    return numeric ? numericStyle : undefined;
+  }
+  return numeric ? provisionalNumericStyle : provisionalStyle;
 }
 
 const tableStyle = { width: '100%' } as const satisfies CSSProperties;
@@ -371,6 +396,15 @@ const numericStyle = {
   fontVariantNumeric: 'tabular-nums',
 } as const satisfies CSSProperties;
 
+const provisionalStyle = {
+  color: 'var(--text-muted)',
+} as const satisfies CSSProperties;
+
+const provisionalNumericStyle = {
+  ...numericStyle,
+  ...provisionalStyle,
+} as const satisfies CSSProperties;
+
 /**
  * The selected row is tinted with the site's own accent, so the table belongs
  * to whichever site draws it; a row is a pointer only where a click does

package/lib/molecule3d/ui/viewerSpec.d.ts

@@ -1,17 +0,0 @@
-/**
- * How the molecule viewer configures molstar: the plugin spec it mounts with.
- *
- * molstar's own UI is not mounted — every control is the component's — and the
- * axes helper is off, since a molecule is read from its own shape rather than
- * from the world axes.
- */
-import { PluginViewModel } from 'molstar/lib/extensions/plugin/view-model.js';
-/**
- * Build a view model for one canvas and mount it.
- * @param container - A positioned element; molstar inserts its canvas into it.
- * @param background - Scene background as `#rrggbb`; a WebGL clear colour, so
- * it cannot be a CSS custom property.
- * @returns The mounted view model, still initialising.
- */
-export declare function mountMolecule3DPlugin(container: HTMLElement, background: string): PluginViewModel;
-//# sourceMappingURL=viewerSpec.d.ts.map

package/lib/molecule3d/ui/viewerSpec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"viewerSpec.d.ts","sourceRoot":"","sources":["../../../src/molecule3d/ui/viewerSpec.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,6CAA6C,CAAC;AAK9E;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,WAAW,EACtB,UAAU,EAAE,MAAM,GACjB,eAAe,CAcjB"}

package/lib/molecule3d/ui/viewerSpec.js

@@ -1,34 +0,0 @@
-/**
- * How the molecule viewer configures molstar: the plugin spec it mounts with.
- *
- * molstar's own UI is not mounted — every control is the component's — and the
- * axes helper is off, since a molecule is read from its own shape rather than
- * from the world axes.
- */
-import { PluginViewModel } from 'molstar/lib/extensions/plugin/view-model.js';
-// Lowercased on import: it is a factory, not a constructor.
-import { DefaultPluginSpec as defaultPluginSpec } from 'molstar/lib/mol-plugin/spec.js';
-import { Color } from 'molstar/lib/mol-util/color/color.js';
-/**
- * Build a view model for one canvas and mount it.
- * @param container - A positioned element; molstar inserts its canvas into it.
- * @param background - Scene background as `#rrggbb`; a WebGL clear colour, so
- * it cannot be a CSS custom property.
- * @returns The mounted view model, still initialising.
- */
-export function mountMolecule3DPlugin(container, background) {
-    const spec = defaultPluginSpec();
-    const model = new PluginViewModel({
-        spec: {
-            ...spec,
-            canvas3d: {
-                ...spec.canvas3d,
-                renderer: { backgroundColor: Color.fromHexStyle(background) },
-                camera: { helper: { axes: { name: 'off', params: {} } } },
-            },
-        },
-    });
-    model.mount(container);
-    return model;
-}
-//# sourceMappingURL=viewerSpec.js.map

package/lib/molecule3d/ui/viewerSpec.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"viewerSpec.js","sourceRoot":"","sources":["../../../src/molecule3d/ui/viewerSpec.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,6CAA6C,CAAC;AAC9E,4DAA4D;AAC5D,OAAO,EAAE,iBAAiB,IAAI,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxF,OAAO,EAAE,KAAK,EAAE,MAAM,qCAAqC,CAAC;AAE5D;;;;;;GAMG;AACH,MAAM,UAAU,qBAAqB,CACnC,SAAsB,EACtB,UAAkB;IAElB,MAAM,IAAI,GAAG,iBAAiB,EAAE,CAAC;IACjC,MAAM,KAAK,GAAG,IAAI,eAAe,CAAC;QAChC,IAAI,EAAE;YACJ,GAAG,IAAI;YACP,QAAQ,EAAE;gBACR,GAAG,IAAI,CAAC,QAAQ;gBAChB,QAAQ,EAAE,EAAE,eAAe,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;gBAC7D,MAAM,EAAE,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE;aAC1D;SACF;KACF,CAAC,CAAC;IACH,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IACvB,OAAO,KAAK,CAAC;AACf,CAAC"}

package/src/molecule3d/ui/viewerSpec.ts

@@ -1,38 +0,0 @@
-/**
- * How the molecule viewer configures molstar: the plugin spec it mounts with.
- *
- * molstar's own UI is not mounted — every control is the component's — and the
- * axes helper is off, since a molecule is read from its own shape rather than
- * from the world axes.
- */
-
-import { PluginViewModel } from 'molstar/lib/extensions/plugin/view-model.js';
-// Lowercased on import: it is a factory, not a constructor.
-import { DefaultPluginSpec as defaultPluginSpec } from 'molstar/lib/mol-plugin/spec.js';
-import { Color } from 'molstar/lib/mol-util/color/color.js';
-
-/**
- * Build a view model for one canvas and mount it.
- * @param container - A positioned element; molstar inserts its canvas into it.
- * @param background - Scene background as `#rrggbb`; a WebGL clear colour, so
- * it cannot be a CSS custom property.
- * @returns The mounted view model, still initialising.
- */
-export function mountMolecule3DPlugin(
-  container: HTMLElement,
-  background: string,
-): PluginViewModel {
-  const spec = defaultPluginSpec();
-  const model = new PluginViewModel({
-    spec: {
-      ...spec,
-      canvas3d: {
-        ...spec.canvas3d,
-        renderer: { backgroundColor: Color.fromHexStyle(background) },
-        camera: { helper: { axes: { name: 'off', params: {} } } },
-      },
-    },
-  });
-  model.mount(container);
-  return model;
-}