diff --git a/.changeset/ninety-flies-shop.md b/.changeset/ninety-flies-shop.md new file mode 100644 index 0000000..a4d9313 --- /dev/null +++ b/.changeset/ninety-flies-shop.md @@ -0,0 +1,5 @@ +--- +'molstar-svelte': patch +--- + +Change API of SimpleWrapper (breaking) and add the first control component (simple) diff --git a/package-lock.json b/package-lock.json index 8a375ec..3eb82ae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "molstar-svelte", - "version": "0.0.5", + "version": "0.0.6", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "molstar-svelte", - "version": "0.0.5", + "version": "0.0.6", "license": "MIT", "devDependencies": { "@changesets/cli": "^2.26.2", diff --git a/package.json b/package.json index c162f8c..c1d6eae 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "molstar-svelte", - "version": "0.0.5", + "version": "0.0.6", "description": "Mol* Svelte Components", "keywords": [ "molstar", diff --git a/src/lib/controls/HighlightInfo.svelte b/src/lib/controls/HighlightInfo.svelte new file mode 100644 index 0000000..6c2b3ae --- /dev/null +++ b/src/lib/controls/HighlightInfo.svelte @@ -0,0 +1,24 @@ + + +{#if $highlightS?.labels.length > 0} +
+ {#each $highlightS.labels as label} + {@html label} + {/each} +
+{/if} + + diff --git a/src/lib/wrappers/SimpleWrapper.svelte b/src/lib/wrappers/SimpleWrapper.svelte index ff56f7e..bafe77c 100644 --- a/src/lib/wrappers/SimpleWrapper.svelte +++ b/src/lib/wrappers/SimpleWrapper.svelte @@ -1,21 +1,21 @@ + +# SimpleWrapper + controls + +## Highlight info + +{#if browser} + {#await loadComponentDemoWithControls() then MolstarComp} + + {/await} +{/if} diff --git a/src/routes/components/simple-controls/DemoControls.svelte b/src/routes/components/simple-controls/DemoControls.svelte new file mode 100644 index 0000000..8c4f824 --- /dev/null +++ b/src/routes/components/simple-controls/DemoControls.svelte @@ -0,0 +1,28 @@ + + + + + {#each selectedStructuresURLs as structureURL (`${structureURL.url}-${structureURL.type}`)} + + {/each} + + + +
+ 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 3c3c1cc..51d5376 100644 --- a/src/routes/components/simple-elements/DemoRCSB.svelte +++ b/src/routes/components/simple-elements/DemoRCSB.svelte @@ -11,7 +11,7 @@ Selected: {selectedPdbIds.join(', ')}

- + {#each selectedPdbIds as pdbId (pdbId)} {/each} diff --git a/src/routes/components/simple-elements/DemoURL.svelte b/src/routes/components/simple-elements/DemoURL.svelte index aff08c0..81f51f9 100644 --- a/src/routes/components/simple-elements/DemoURL.svelte +++ b/src/routes/components/simple-elements/DemoURL.svelte @@ -18,7 +18,7 @@ >

- + {#each selectedStructuresURLs as structureURL (`${structureURL.url}-${structureURL.type}`)} {/each} diff --git a/src/routes/components/simple-elements/DemoURLChain.svelte b/src/routes/components/simple-elements/DemoURLChain.svelte index 6899ecd..9275edf 100644 --- a/src/routes/components/simple-elements/DemoURLChain.svelte +++ b/src/routes/components/simple-elements/DemoURLChain.svelte @@ -22,7 +22,7 @@ >

- + {#each selectedStructuresURLs as structureURL (`${structureURL.url}-${structureURL.type}-${structureURL.chainId}`)} `). - -**Component example:** +### Component example: ```svelte - + - - + + - - - + +

Currently displaying {url}

``` -**Component usage example:** +#### Slots + +You'll get 2 slots: `elements` and `controls`. + +Each component you'll inject in these two slots: +- will be rendered in a different container (depending on the slot). +- will be able to get the Molstar plugin instance through Svelte's getContext(), like: `const plugin = getContext('molstar').getPlugin()`. + +The `inside` slot is injected in the same container as the Molstar's plugin canvas, while the `outside` slot is injected outside of it (but still in the container of `SimpleWrapper`). + +Typically, if you want to position a UI element on top of the canvas, you'll want to use the `elements` slot, while if you want to position a UI element outside of the canvas, you'll want to use the `controls` slot. + +In the example above, we're using `` 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 + +As an in-browser and WEBGL-heavy toolkit, Molstar doesn't play well with SSR (Sever Side Rendering) and some flavors of SSG (Static Site Generation), so you'll need some extra work to run it smoothly in a Sveltekit application. + +For now, it's recommended to: +- Create your own component in which you will compose the Molstar components (entry component / composition root). +- Dynamically import this component in your page (using ``). + ```svelte