From f5e40262bb94af8c604b759fdd74cd08661d4fd2 Mon Sep 17 00:00:00 2001 From: Augustin Chassine Date: Fri, 15 Sep 2023 19:05:36 +0200 Subject: [PATCH 1/6] minor: avoid svelte warning --- src/routes/AppHeader.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/src/routes/AppHeader.svelte b/src/routes/AppHeader.svelte index 3a20c39..bd97f73 100644 --- a/src/routes/AppHeader.svelte +++ b/src/routes/AppHeader.svelte @@ -17,6 +17,7 @@ class="flex flex-col items-center text-gray-400 hover:text-gray-600" > Mol* logo + (v{__PKG_VERSION__}) From 33e802047334c6ff1bd3576c1b921ff4010b2b78 Mon Sep 17 00:00:00 2001 From: Augustin Chassine Date: Fri, 15 Sep 2023 19:06:35 +0200 Subject: [PATCH 2/6] refactor: API change on SimpleWrapper + documentation + refactor --- src/lib/wrappers/SimpleWrapper.svelte | 82 +++++-------------------- src/lib/wrappers/simplewrapper-utils.ts | 60 ++++++++++++++++++ src/routes/getting-started/+page.md | 51 ++++++++++----- 3 files changed, 108 insertions(+), 85 deletions(-) create mode 100644 src/lib/wrappers/simplewrapper-utils.ts 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 @@ - + - - + + - - - + +

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 + +{#if $highlightS?.labels.length > 0} +
+ {#each $highlightS.labels as label} + {@html label} + {/each} +
+{/if} + + From 4fce9dbba8c3356bb6175e4b729a49617847df14 Mon Sep 17 00:00:00 2001 From: Augustin Chassine Date: Fri, 15 Sep 2023 19:08:41 +0200 Subject: [PATCH 4/6] feat: add demo page for "controls" components --- .../components/simple-controls/+page.md | 20 +++++++++++++ .../simple-controls/DemoControls.svelte | 28 +++++++++++++++++++ 2 files changed, 48 insertions(+) create mode 100644 src/routes/components/simple-controls/+page.md create mode 100644 src/routes/components/simple-controls/DemoControls.svelte diff --git a/src/routes/components/simple-controls/+page.md b/src/routes/components/simple-controls/+page.md new file mode 100644 index 0000000..301b91e --- /dev/null +++ b/src/routes/components/simple-controls/+page.md @@ -0,0 +1,20 @@ + + +# 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} +
+
+
From c6f9d7cd96a18f94b3f7ce6133d1b092012402d6 Mon Sep 17 00:00:00 2001 From: Augustin Chassine Date: Fri, 15 Sep 2023 19:14:35 +0200 Subject: [PATCH 5/6] refactor: update demo components (slot name change) --- src/routes/components/simple-elements/DemoRCSB.svelte | 2 +- src/routes/components/simple-elements/DemoURL.svelte | 2 +- src/routes/components/simple-elements/DemoURLChain.svelte | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) 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}`)} Date: Fri, 15 Sep 2023 19:17:50 +0200 Subject: [PATCH 6/6] feat: add controls demo page in Menu --- src/routes/Menu.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/src/routes/Menu.svelte b/src/routes/Menu.svelte index 2a52963..057027b 100644 --- a/src/routes/Menu.svelte +++ b/src/routes/Menu.svelte @@ -21,6 +21,7 @@ Components: