diff --git a/src/lib/controls/Scene.svelte b/src/lib/controls/Scene.svelte new file mode 100644 index 0000000..a6f3b24 --- /dev/null +++ b/src/lib/controls/Scene.svelte @@ -0,0 +1,27 @@ + + + + + diff --git a/src/lib/elements/StructureAlphaFold.svelte b/src/lib/elements/StructureAlphaFold.svelte new file mode 100644 index 0000000..c32185a --- /dev/null +++ b/src/lib/elements/StructureAlphaFold.svelte @@ -0,0 +1,104 @@ + diff --git a/src/lib/elements/StructureURL.svelte b/src/lib/elements/StructureURL.svelte index 90e214d..40ae41c 100644 --- a/src/lib/elements/StructureURL.svelte +++ b/src/lib/elements/StructureURL.svelte @@ -33,7 +33,7 @@ const model = await plugin.builders.structure.createModel(trajectory); const struct = await plugin.builders.structure.createStructure(model); structure = struct; - await plugin.builders.structure.hierarchy.applyPreset(structure, 'default'); + await plugin.builders.structure.hierarchy.applyPreset(trajectory, 'default'); }; onMount(() => { init(); diff --git a/src/lib/wrappers/SimpleWrapper.svelte b/src/lib/wrappers/SimpleWrapper.svelte index bafe77c..4d9bf45 100644 --- a/src/lib/wrappers/SimpleWrapper.svelte +++ b/src/lib/wrappers/SimpleWrapper.svelte @@ -11,6 +11,7 @@ let randArray = new Uint8Array(1); export { clazz as class }; + export let pluginCssClasses = ''; export let didDrawStore: Writable<{ value: number; instanceId: string }> | null = null; export let plugin: PluginContext | null = null; // used for binding export let uid = crypto.getRandomValues(randArray)[0]; @@ -35,10 +36,13 @@ setContext('molstar', { getPlugin: () => plugin }); async function init() { - if (!BROWSER) return; - if (!plugin) return; await plugin.init(); + if (!window?.molstarInstances) { + window.molstarInstances = new Map(); + } + window.molstarInstances.set(uid, plugin); + if (!plugin.initViewer(molstarCanvasEl, molstarContainerEl)) { console.error('Failed to init Mol*'); return; @@ -60,7 +64,7 @@ } onMount(async () => { - if (!BROWSER) return; + if (!BROWSER || !plugin) return; await init(); initcomplete = true; }); @@ -69,6 +73,7 @@ if (initcomplete) { await plugin?.clear(); plugin?.dispose(); + window.molstarInstances.delete(uid); } }); @@ -80,8 +85,8 @@ } -
-
+
+
+ import('./DemoControls2.svelte').then((m) => { + return m.default; + }); + # SimpleWrapper + controls -## Highlight info +## Highlight info + ButtonBar {#if browser} {#await loadComponentDemoWithControls() then MolstarComp} +
+ +
+ {/await} +{/if} + +## Highlight info + ButtonBar variant + +{#if browser} + {#await loadComponentDemoWithControls2() then MolstarComp} +
+
{/await} {/if} diff --git a/src/routes/components/simple-controls/DemoControls.svelte b/src/routes/components/simple-controls/DemoControls.svelte index 8c4f824..7d1a9db 100644 --- a/src/routes/components/simple-controls/DemoControls.svelte +++ b/src/routes/components/simple-controls/DemoControls.svelte @@ -2,7 +2,7 @@ import StructureURL from '$lib/elements/StructureURL.svelte'; import HighlightInfo from '$lib/controls/HighlightInfo.svelte'; import MolstarWrapper from '$lib/wrappers/SimpleWrapper.svelte'; - + import ButtonBar from '$lib/controls/ButtonBar.svelte'; export let structuresURLs = [ { url: 'https://files.rcsb.org/view/7YUB.cif', type: 'mmcif' }, { url: 'https://alphafold.ebi.ac.uk/files/AF-P00533-F1-model_v4.cif', type: 'mmcif' } @@ -10,7 +10,7 @@ let selectedStructuresURLs = [...structuresURLs]; - + {#each selectedStructuresURLs as structureURL (`${structureURL.url}-${structureURL.type}`)} @@ -18,6 +18,7 @@ +
Displaying: {#each selectedStructuresURLs as structureURL (`${structureURL.url}-${structureURL.type}`)} diff --git a/src/routes/components/simple-controls/DemoControls2.svelte b/src/routes/components/simple-controls/DemoControls2.svelte new file mode 100644 index 0000000..daad86f --- /dev/null +++ b/src/routes/components/simple-controls/DemoControls2.svelte @@ -0,0 +1,37 @@ + + +
+ + + + + + +
+ + + +
+ Displaying: + {#each selectedStructuresURLs as structureURL (`${structureURL.url}-${structureURL.type}`)} +

{structureURL.url} ({structureURL.type})

+ {/each} +
+
+ +
diff --git a/src/routes/components/simple-elements/DemoRCSB.svelte b/src/routes/components/simple-elements/DemoRCSB.svelte index 51d5376..c57dfee 100644 --- a/src/routes/components/simple-elements/DemoRCSB.svelte +++ b/src/routes/components/simple-elements/DemoRCSB.svelte @@ -10,7 +10,7 @@

Selected: {selectedPdbIds.join(', ')}

- + {#each selectedPdbIds as pdbId (pdbId)} diff --git a/src/routes/components/simple-elements/DemoURL.svelte b/src/routes/components/simple-elements/DemoURL.svelte index 81f51f9..4089cbd 100644 --- a/src/routes/components/simple-elements/DemoURL.svelte +++ b/src/routes/components/simple-elements/DemoURL.svelte @@ -17,7 +17,7 @@ >{selectedStructuresURLs.map((e) => e.url).join(', ')}

- + {#each selectedStructuresURLs as structureURL (`${structureURL.url}-${structureURL.type}`)} diff --git a/src/routes/components/simple-elements/DemoURLChain.svelte b/src/routes/components/simple-elements/DemoURLChain.svelte index 9275edf..b587d94 100644 --- a/src/routes/components/simple-elements/DemoURLChain.svelte +++ b/src/routes/components/simple-elements/DemoURLChain.svelte @@ -21,7 +21,7 @@ >{selectedStructuresURLs.map((e) => e.url).join(', ')}

- + {#each selectedStructuresURLs as structureURL (`${structureURL.url}-${structureURL.type}-${structureURL.chainId}`)} ` to inject our components without an extra container/wrapping element, but you can use any element you want. - - ### Loading the component in a page #### In a Sveltekit application