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"
>
+
(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: