element with position: relative
-```
-
-To use the plugin (with the React UI) inside another React app:
-
-A single-plugin setup is shown the example below. In order to initialize multiple
-plugins, each with its own context and viewport, some extra steps are required (docs section to be added).
-
-```ts
-import { useEffect, createRef } from "react";
-import { createPluginUI } from "molstar/lib/mol-plugin-ui";
-import { renderReact18 } from "molstar/lib/mol-plugin-ui/react18";
-import { PluginUIContext } from "molstar/lib/mol-plugin-ui/context";
-/* Might require extra configuration,
-see https://webpack.js.org/loaders/sass-loader/ for example.
-create-react-app should support this natively. */
-import "molstar/lib/mol-plugin-ui/skin/light.scss";
-
-declare global {
- interface Window {
- molstar?: PluginUIContext;
- }
-}
-
-
-export function MolStarWrapper() {
- const parent = createRef
();
-
- // In debug mode of react's strict mode, this code will
- // be called twice in a row, which might result in unexpected behavior.
- useEffect(() => {
- async function init() {
- window.molstar = await createPluginUI({
- target: parent.current as HTMLDivElement,
- render: renderReact18
- });
-
- const data = await window.molstar.builders.data.download(
- { url: "https://files.rcsb.org/download/3PTB.pdb" }, /* replace with your URL */
- { state: { isGhost: true } }
- );
- const trajectory =
- await window.molstar.builders.structure.parseTrajectory(data, "pdb");
- await window.molstar.builders.structure.hierarchy.applyPreset(
- trajectory,
- "default"
- );
- }
- init();
- return () => {
- window.molstar?.dispose();
- window.molstar = undefined;
- };
- }, []);
-
- return ;
-}
-
-```
-
-
-Furthermore, if it is desirable in your project to use the `molstar`'s React UI components, but you wish to alter or rearrange the layout, you should take a look at the signatures of [ `PluginUIComponent` ](https://github.com/molstar/molstar/blob/6edbae80db340134341631f669eec86543a0f1a8/src/mol-plugin-ui/base.tsx#L16) which every "control" subclasses.
-
-
-[ `SequenceView` ](https://github.com/molstar/molstar/blob/6edbae80db340134341631f669eec86543a0f1a8/src/mol-plugin-ui/sequence.tsx#L221C4-L221C4), for example, can be used separately from the `PluginUI`. Yet you would need to pass the `PluginUIContext` to it in order for it to observe the changes in the state of the plugin. This can be done via a `PluginContextContainer`:
-```typescript
-// your_app.plugin: PluginUIContext
-...
-
-```
-
-## Directly using Mol* React UI
-
-```ts
-class MolStarWrapper {
- private resolveInit: () => void;
- initialized = new Promise(res => { this.resolveInit = () => res(true); });
-
- private initCalled = false;
- plugin: PluginUIContext;
- async init() {
- if (this.initCalled) return;
- this.initCalled = true;
- this.plugin = ...;
- await this.plugin.init();
- this.resolveInit();
- }
-}
-
-function MolStar({ model }: { model: MolStarWrapper }) {
- const [initialized, setInitialized] = useState(false);
- useEffect(() => {
- async function init() {
- await model.init();
- setInitialized(true);
- }
- init();
- }, [model]);
-
- if (!initialized) return <>Loading;
- return ;
-}
-```
-
-## ``PluginContext`` without built-in React UI
-
-- The [``PluginContext``](https://github.com/molstar/molstar/blob/master/src/mol-plugin/context.ts) can be instantiated without using the default React UI.
-
-```HTML
-
-
-
-```
-
-```ts
-import { DefaultPluginSpec, PluginSpec } from 'molstar/lib/mol-plugin/spec';
-import { PluginContext } from 'molstar/lib/mol-plugin/context';
-import { PluginConfig } from 'molstar/lib/mol-plugin/config';
-
-const MySpec: PluginSpec = {
- ...DefaultPluginSpec(),
- config: [
- [PluginConfig.VolumeStreaming.Enabled, false]
- ]
-}
-
-async function init() {
- const plugin = new PluginContext(MySpec);
- await plugin.init();
-
- const canvas = document.getElementById('molstar-canvas');
- const parent = document.getElementById('molstar-parent');
-
- if (!plugin.initViewer(canvas, parent)) {
- console.error('Failed to init Mol*');
- return;
- }
-
- // Example url:"https://files.rcsb.org/download/3j7z.pdb"
- // Example url:"https://files.rcsb.org/download/5AFI.cif"
- const data = await plugin.builders.data.download({ url: '...' }, { state: { isGhost: true } });
- const trajectory = await plugin.builders.structure.parseTrajectory(data, format); //format is 'mmcif' or 'pdb' etc.
- await plugin.builders.structure.hierarchy.applyPreset(trajectory, 'default');
-}
-
-```
-
-## ``Canvas3D`` without built-in state management
-
-- The ``PluginContext`` object from the above examples can be completely omitted.
-- See [Browser Tests](https://github.com/molstar/molstar/tree/master/src/tests/browser) for example usage.
-
-```ts
-const canvas = document.getElementById('canvas'); // parent