-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #9 from 0gust1/feat/additional_components
feat: add button bar and debug-related components
- Loading branch information
Showing
11 changed files
with
253 additions
and
64 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| <script lang="ts"> | ||
| /** | ||
| * Component to display a button bar giving some action over a Molstar plugin instance. | ||
| */ | ||
| import { getContext } from 'svelte'; | ||
| import { PluginCommands } from 'molstar/lib/mol-plugin/commands'; | ||
| import type { PluginContext } from 'molstar/lib/mol-plugin/context'; | ||
| import { ViewportScreenshotHelper } from 'molstar/lib/mol-plugin/util/viewport-screenshot'; | ||
| export { clazz as class }; | ||
| let clazz = ''; | ||
| const plugin = getContext<{ getPlugin: () => PluginContext }>('molstar').getPlugin(); | ||
| const resetCamera = () => { | ||
| PluginCommands.Camera.Reset(plugin); | ||
| }; | ||
| const screenshotToClipBoard = () => { | ||
| const vpsh = new ViewportScreenshotHelper(plugin); | ||
| vpsh.copyToClipboard(); | ||
| }; | ||
| const screenshotDownload = () => { | ||
| const vpsh = new ViewportScreenshotHelper(plugin); | ||
| vpsh.download('screenshot.png'); | ||
| }; | ||
| </script> | ||
|
|
||
| <div class="button-bar {clazz || ''}"> | ||
| <ul> | ||
| <li> | ||
| <button type="button" on:click={resetCamera}>Reset Camera</button> | ||
| </li> | ||
| <li> | ||
| <button type="button" on:click={screenshotToClipBoard}>Screenshot (to clipboard)</button> | ||
| </li> | ||
| <li><button type="button" on:click={screenshotDownload}>Screenshot (save)</button></li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <style lang="postcss"> | ||
| .button-bar { | ||
| } | ||
| .button-bar ul { | ||
| @apply flex gap-1 bg-slate-700 text-xs text-slate-50 p-1; | ||
| } | ||
| .button-bar li { | ||
| @apply gap-1; | ||
| } | ||
| .button-bar button { | ||
| @apply bg-slate-400 px-2 py-1 rounded border border-slate-500; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| <script lang="ts"> | ||
| export let title: string; | ||
| export let dataToDisplay: any; | ||
| export let isOpen = false; | ||
| </script> | ||
|
|
||
| <details class="text-xs my-2" bind:open={isOpen}> | ||
| <summary class="font-medium">{title}</summary> | ||
|
|
||
| <div class=" text-green-200 bg-slate-500 bg-opacity-60 p-2"> | ||
| {#if isOpen} | ||
| <slot> | ||
| <pre> | ||
| {JSON.stringify(dataToDisplay, null, 2)} | ||
| </pre> | ||
| </slot> | ||
| {/if} | ||
| </div> | ||
| </details> | ||
|
|
||
| <style lang="postcss"> | ||
| details summary { | ||
| @apply cursor-pointer; | ||
| } | ||
| details summary:hover { | ||
| @apply bg-orange-500 bg-opacity-20; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| <script lang="ts"> | ||
| import { getContext } from 'svelte'; | ||
| import type { PluginContext } from 'molstar/lib/mol-plugin/context'; | ||
| import CollapsableDebugDetail from './CollapsableDebugDetail.svelte'; | ||
| import { SyncBehaviors } from 'molstar/lib/mol-plugin/behavior/static/state'; | ||
| import { Interactions } from 'molstar/lib/mol-plugin/behavior/dynamic/custom-props'; | ||
| const plugin = getContext<{ getPlugin: () => PluginContext }>('molstar').getPlugin(); | ||
| const closedS = plugin.events.canvas3d.settingsUpdated; | ||
| const proS = plugin.events.task.progress; | ||
| const finS = plugin.events.task.finished; | ||
| const interClickS = plugin.behaviors.interaction.click; | ||
| const interDragS = plugin.behaviors.interaction.drag; | ||
| const molstarLogEventsS = plugin.events.log; | ||
| const didDrawS = plugin.canvas3d?.didDraw; | ||
| const reprCount = plugin.canvas3d?.reprCount; | ||
| const stateChangedS = plugin.canvas3d?.camera.stateChanged; | ||
| const highlightS = plugin.behaviors.labels.highlight; | ||
| const dragS = plugin.behaviors.interaction.drag.asObservable(); | ||
| //const data1S = plugin.canvas3d?.camera.po | ||
| export let panelOpen = true; | ||
| let logs = plugin.log.entries; | ||
| $: logs = molstarLogEventsS ? plugin.log.entries : ''; | ||
| </script> | ||
|
|
||
| <section class="bg-slate-400 text-slate-100 bg-opacity-70 p-2"> | ||
| <p class="text-right"> | ||
| <button | ||
| type="button" | ||
| class="text-xs bg-slate-400 px-2 py-1 rounded border border-slate-500" | ||
| on:click={() => { | ||
| panelOpen = !panelOpen; | ||
| }}>{panelOpen ? 'Hide' : 'Show'} debug panel</button | ||
| > | ||
| </p> | ||
| <div class:open={panelOpen} class="hidden mt-2"> | ||
| <h1 class="font-medium">Molstar instance debug</h1> | ||
| <button | ||
| type="button" | ||
| class="text-xs p-1 border border-slate-300" | ||
| on:click={() => { | ||
| console.dir(plugin); | ||
| }}>Log in browser console</button | ||
| > | ||
| <CollapsableDebugDetail | ||
| title="plugin.events.canvas3d.settingsUpdated" | ||
| dataToDisplay={$closedS} | ||
| /> | ||
|
|
||
| <h2 class="font-medium">Logs</h2> | ||
|
|
||
| <CollapsableDebugDetail title="logs" dataToDisplay={null}> | ||
| <div class="max-h-screen overflow-y-auto"> | ||
| {#each [...logs] as log} | ||
| <p>{log.type} - {log.message}</p> | ||
| {/each} | ||
| </div> | ||
| </CollapsableDebugDetail> | ||
|
|
||
| <h2 class="font-medium">plugin.events.task</h2> | ||
| <CollapsableDebugDetail title="plugin.events.task.progress" dataToDisplay={$proS} /> | ||
|
|
||
| <CollapsableDebugDetail title="plugin.events.task.finished" dataToDisplay={$finS} /> | ||
|
|
||
| <h2 class="font-medium">Behavior</h2> | ||
| <CollapsableDebugDetail title="Drag behav. modifiers" dataToDisplay={$interDragS.modifiers} /> | ||
|
|
||
| <CollapsableDebugDetail title="Click behav. modifiers" dataToDisplay={$interClickS.modifiers} /> | ||
|
|
||
| <CollapsableDebugDetail title="DidDraw" dataToDisplay={$didDrawS} /> | ||
| <CollapsableDebugDetail title="reprCount" dataToDisplay={$reprCount} /> | ||
| <CollapsableDebugDetail title="stateChanged" dataToDisplay={$stateChangedS} /> | ||
| <CollapsableDebugDetail title="highlights" dataToDisplay={$highlightS} /> | ||
| <CollapsableDebugDetail title="drag" dataToDisplay={$dragS} /> | ||
| </div> | ||
| </section> | ||
|
|
||
| <style lang="postcss"> | ||
| .open { | ||
| @apply block; | ||
| } | ||
| pre { | ||
| @apply border border-slate-700; | ||
| } | ||
| </style> |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <script lang="ts"> | ||
| import type { SvelteComponentTyped } from 'svelte/internal'; | ||
| export let data; | ||
| type C = $$Generic<typeof SvelteComponentTyped<any, any, any>>; | ||
| $: component = data.content as unknown as C; | ||
| </script> | ||
|
|
||
| <svelte:component this={component} /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| export const load = async () => { | ||
| const readmeComponentImporter = (await import.meta.glob('../../README.md')) as unknown as Record< | ||
| string, | ||
| App.MdsvexResolver | ||
| >; | ||
| const postResolver = await readmeComponentImporter['../../README.md'](); | ||
| const post = await postResolver.default; | ||
| return { content: post }; | ||
| }; |
Oops, something went wrong.