From 958654d6b95958282ecf87e0a42f178f8cfe1822 Mon Sep 17 00:00:00 2001 From: David Sehnal <david.sehnal@gmail.com> Date: Tue, 5 Mar 2019 17:17:41 +0100 Subject: [PATCH] ability to hide controls by default in Viewer app --- src/apps/viewer/index.ts | 39 ++++++++++++++++++++++++++++++++------- src/mol-plugin/index.ts | 20 -------------------- src/mol-plugin/layout.ts | 2 +- src/mol-plugin/spec.ts | 2 +- 4 files changed, 34 insertions(+), 29 deletions(-) diff --git a/src/apps/viewer/index.ts b/src/apps/viewer/index.ts index 947f1be45..95ee73738 100644 --- a/src/apps/viewer/index.ts +++ b/src/apps/viewer/index.ts @@ -6,14 +6,39 @@ import { createPlugin, DefaultPluginSpec } from 'mol-plugin'; import './index.html' +import { PluginContext } from 'mol-plugin/context'; +import { PluginCommands } from 'mol-plugin/command'; require('mol-plugin/skin/light.scss') -createPlugin(document.getElementById('app')!, { - ...DefaultPluginSpec, - layout: { - initial: { - isExpanded: true, - showControls: true +function getParam(name: string, regex: string): string { + let r = new RegExp(`${name}=(${regex})[&]?`, 'i'); + return decodeURIComponent(((window.location.search || '').match(r) || [])[1] || ''); +} + +const hideControls = getParam('hide-controls', `[^&]+`) === '1'; + +function init() { + const plugin = createPlugin(document.getElementById('app')!, { + ...DefaultPluginSpec, + layout: { + initial: { + isExpanded: true, + showControls: !hideControls + } } + }); + trySetSnapshot(plugin); +} + +async function trySetSnapshot(ctx: PluginContext) { + try { + const snapshotUrl = getParam('snapshot-url', `[^&]+`); + if (!snapshotUrl) return; + await PluginCommands.State.Snapshots.Fetch.dispatch(ctx, { url: snapshotUrl }) + } catch (e) { + ctx.log.error('Failed to load snapshot.'); + console.warn('Failed to load snapshot', e); } -}); \ No newline at end of file +} + +init(); \ No newline at end of file diff --git a/src/mol-plugin/index.ts b/src/mol-plugin/index.ts index ffcf45afb..02c37fd5e 100644 --- a/src/mol-plugin/index.ts +++ b/src/mol-plugin/index.ts @@ -9,7 +9,6 @@ import { PluginContext } from './context'; import { Plugin } from './ui/plugin' import * as React from 'react'; import * as ReactDOM from 'react-dom'; -import { PluginCommands } from './command'; import { PluginSpec } from './spec'; import { StateTransforms } from './state/transforms'; import { PluginBehaviors } from './behavior'; @@ -18,11 +17,6 @@ import { StateActions } from './state/actions'; import { InitVolumeStreaming } from './behavior/dynamic/volume-streaming/transformers'; import { StructureRepresentationInteraction } from './behavior/dynamic/selection/structure-representation-interaction'; -function getParam(name: string, regex: string): string { - let r = new RegExp(`${name}=(${regex})[&]?`, 'i'); - return decodeURIComponent(((window.location.search || '').match(r) || [])[1] || ''); -} - export const DefaultPluginSpec: PluginSpec = { actions: [ PluginSpec.Action(StateActions.Structure.DownloadStructure), @@ -71,19 +65,5 @@ export const DefaultPluginSpec: PluginSpec = { export function createPlugin(target: HTMLElement, spec?: PluginSpec): PluginContext { const ctx = new PluginContext(spec || DefaultPluginSpec); ReactDOM.render(React.createElement(Plugin, { plugin: ctx }), target); - - trySetSnapshot(ctx); - return ctx; -} - -async function trySetSnapshot(ctx: PluginContext) { - try { - const snapshotUrl = getParam('snapshot-url', `[^&]+`); - if (!snapshotUrl) return; - await PluginCommands.State.Snapshots.Fetch.dispatch(ctx, { url: snapshotUrl }) - } catch (e) { - ctx.log.error('Failed to load snapshot.'); - console.warn('Failed to load snapshot', e); - } } \ No newline at end of file diff --git a/src/mol-plugin/layout.ts b/src/mol-plugin/layout.ts index 715a84be5..3be770d70 100644 --- a/src/mol-plugin/layout.ts +++ b/src/mol-plugin/layout.ts @@ -58,7 +58,7 @@ export class PluginLayout extends PluginComponent<PluginLayoutStateProps> { private rootState: RootState | undefined = void 0; private expandedViewport: HTMLMetaElement; - setProps(props: PluginLayoutStateProps) { + setProps(props: Partial<PluginLayoutStateProps>) { this.updateState(props); } diff --git a/src/mol-plugin/spec.ts b/src/mol-plugin/spec.ts index 3a9611eb8..6a8599df9 100644 --- a/src/mol-plugin/spec.ts +++ b/src/mol-plugin/spec.ts @@ -17,7 +17,7 @@ interface PluginSpec { animations?: PluginStateAnimation[], customParamEditors?: [StateAction | StateTransformer, StateTransformParameters.Class][], layout?: { - initial?: PluginLayoutStateProps, + initial?: Partial<PluginLayoutStateProps>, controls?: { left?: React.ComponentClass | 'none', right?: React.ComponentClass | 'none', -- GitLab