diff --git a/src/mol-plugin/behavior/static/representation.ts b/src/mol-plugin/behavior/static/representation.ts index 29ba2871cff08c581a40b98a2555757fd7fe5b8c..ee5c6a0e8343ee643070d580d1f3a282d54bffb4 100644 --- a/src/mol-plugin/behavior/static/representation.ts +++ b/src/mol-plugin/behavior/static/representation.ts @@ -18,8 +18,6 @@ export function SyncRepresentationToCanvas(ctx: PluginContext) { ctx.canvas3d.add(e.obj.data); ctx.canvas3d.requestDraw(true); - console.log(e.obj.data); - // TODO: update visiblity }); events.object.updated.subscribe(e => { diff --git a/src/mol-plugin/context.ts b/src/mol-plugin/context.ts index a3026c18863f27dd8298ed78f30ce74d331c725e..8eda5baa8fa611bb50dde28f9cec1a9d333b97f4 100644 --- a/src/mol-plugin/context.ts +++ b/src/mol-plugin/context.ts @@ -4,25 +4,24 @@ * @author David Sehnal <david.sehnal@gmail.com> */ -import { Transformer, Transform, State } from 'mol-state'; import { Canvas3D } from 'mol-canvas3d/canvas3d'; -import { StateTransforms } from './state/transforms'; -import { PluginStateObject as SO } from './state/objects'; -import { RxEventHelper } from 'mol-util/rx-event-helper'; -import { PluginState } from './state'; -import { PluginCommand, PluginCommands } from './command'; -import { Task } from 'mol-task'; -import { merge } from 'rxjs'; -import { PluginBehaviors, BuiltInPluginBehaviors } from './behavior'; -import { Loci, EmptyLoci } from 'mol-model/loci'; +import { EmptyLoci, Loci } from 'mol-model/loci'; import { Representation } from 'mol-repr/representation'; -import { CreateStructureFromPDBe } from './state/actions/basic'; -import { LogEntry } from 'mol-util/log-entry'; -import { TaskManager } from './util/task-manager'; import { StructureRepresentationRegistry } from 'mol-repr/structure/registry'; +import { State, Transform, Transformer } from 'mol-state'; +import { Task } from 'mol-task'; import { ColorTheme } from 'mol-theme/color'; import { SizeTheme } from 'mol-theme/size'; import { ThemeRegistryContext } from 'mol-theme/theme'; +import { LogEntry } from 'mol-util/log-entry'; +import { RxEventHelper } from 'mol-util/rx-event-helper'; +import { merge } from 'rxjs'; +import { BuiltInPluginBehaviors } from './behavior'; +import { PluginCommand, PluginCommands } from './command'; +import { PluginSpec } from './spec'; +import { PluginState } from './state'; +import { PluginStateObject as SO } from './state/objects'; +import { TaskManager } from './util/task-manager'; export class PluginContext { private disposed = false; @@ -120,24 +119,20 @@ export class PluginContext { merge(this.state.dataState.events.log, this.state.behaviorState.events.log).subscribe(e => this.events.log.next(e)); } - async _test_initBehaviors() { - const tree = this.state.behaviorState.tree.build() - .toRoot().apply(PluginBehaviors.Representation.HighlightLoci, { ref: PluginBehaviors.Representation.HighlightLoci.id }) - .toRoot().apply(PluginBehaviors.Representation.SelectLoci, { ref: PluginBehaviors.Representation.SelectLoci.id }) - .getTree(); + async initBehaviors() { + const tree = this.state.behaviorState.tree.build(); + + for (const b of this.spec.behaviors) { + tree.toRoot().apply(b.transformer, b.defaultParams || { }, { ref: b.transformer.id }); + } await this.runTask(this.state.behaviorState.update(tree)); } - _test_initDataActions() { - this.state.dataState.actions - .add(CreateStructureFromPDBe) - .add(StateTransforms.Data.Download) - .add(StateTransforms.Data.ParseCif) - .add(StateTransforms.Model.CreateStructureAssembly) - .add(StateTransforms.Model.CreateStructure) - .add(StateTransforms.Model.CreateModelFromTrajectory) - .add(StateTransforms.Visuals.CreateStructureRepresentation); + initDataActions() { + for (const a of this.spec.actions) { + this.state.dataState.actions.add(a.action); + } } applyTransform(state: State, a: Transform.Ref, transformer: Transformer, params: any) { @@ -169,12 +164,12 @@ export class PluginContext { }); } - constructor() { + constructor(public spec: PluginSpec) { this.initEvents(); this.initBuiltInBehavior(); - this._test_initBehaviors(); - this._test_initDataActions(); + this.initBehaviors(); + this.initDataActions(); } // logger = ; diff --git a/src/mol-plugin/index.ts b/src/mol-plugin/index.ts index 491b65dfe9fcca732808ddb8d9dca47513ed5164..33ddd654ae94f920bfda011c00dc1f084ff766c7 100644 --- a/src/mol-plugin/index.ts +++ b/src/mol-plugin/index.ts @@ -9,14 +9,34 @@ 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 { CreateStructureFromPDBe } from './state/actions/basic'; +import { StateTransforms } from './state/transforms'; +import { PluginBehaviors } from './behavior'; function getParam(name: string, regex: string): string { let r = new RegExp(`${name}=(${regex})[&]?`, 'i'); return decodeURIComponent(((window.location.search || '').match(r) || [])[1] || ''); } +const DefaultSpec: PluginSpec = { + actions: [ + PluginSpec.Action(CreateStructureFromPDBe), + PluginSpec.Action(StateTransforms.Data.Download), + PluginSpec.Action(StateTransforms.Data.ParseCif), + PluginSpec.Action(StateTransforms.Model.CreateStructureAssembly), + PluginSpec.Action(StateTransforms.Model.CreateStructure), + PluginSpec.Action(StateTransforms.Model.CreateModelFromTrajectory), + PluginSpec.Action(StateTransforms.Visuals.CreateStructureRepresentation) + ], + behaviors: [ + PluginSpec.Behavior(PluginBehaviors.Representation.HighlightLoci), + PluginSpec.Behavior(PluginBehaviors.Representation.SelectLoci) + ] +} + export function createPlugin(target: HTMLElement): PluginContext { - const ctx = new PluginContext(); + const ctx = new PluginContext(DefaultSpec); ReactDOM.render(React.createElement(Plugin, { plugin: ctx }), target); try { diff --git a/src/mol-plugin/ui/controls/parameters.tsx b/src/mol-plugin/ui/controls/parameters.tsx index 43feabf3c2a4cab7a5f681bc76cd2ac547672749..9e46d897f57a4d652ebade772937355113ef4078 100644 --- a/src/mol-plugin/ui/controls/parameters.tsx +++ b/src/mol-plugin/ui/controls/parameters.tsx @@ -64,11 +64,12 @@ export class ParamWrapper extends React.PureComponent<ParamWrapperProps> { } render() { - return <div> - <span title={this.props.param.description}>{this.props.param.label}</span> - <div> + return <div style={{ padding: '0 3px', borderBottom: '1px solid #ccc' }}> + <div style={{ lineHeight: '20px', float: 'left' }} title={this.props.param.description}>{this.props.param.label}</div> + <div style={{ float: 'left', marginLeft: '5px' }}> <this.props.control value={this.props.value} param={this.props.param} onChange={this.onChange} onEnter={this.props.onEnter} isEnabled={this.props.isEnabled} /> </div> + <div style={{ clear: 'both' }} /> </div>; } }