controls.tsx 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. /**
  2. * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
  3. *
  4. * @author David Sehnal <david.sehnal@gmail.com>
  5. * @author Alexander Rose <alexander.rose@weirdbyte.de>
  6. */
  7. import * as React from 'react';
  8. import { PluginCommands } from '../mol-plugin/commands';
  9. import { UpdateTrajectory } from '../mol-plugin-state/actions/structure';
  10. import { PluginUIComponent } from './base';
  11. import { LociLabelEntry } from '../mol-plugin-state/manager/loci-label';
  12. import { IconButton } from './controls/common';
  13. import { PluginStateObject } from '../mol-plugin-state/objects';
  14. import { StateTransforms } from '../mol-plugin-state/transforms';
  15. import { StateTransformer } from '../mol-state';
  16. import { ModelFromTrajectory } from '../mol-plugin-state/transforms/model';
  17. import { AnimationControls } from './state/animation';
  18. import { StructureSelectionControls } from './structure/selection';
  19. import { StructureMeasurementsControls } from './structure/measurements';
  20. import { Icon } from './controls/icons';
  21. import { StructureComponentControls } from './structure/components';
  22. import { StructureSourceControls } from './structure/source';
  23. import { VolumeStreamingControls } from './structure/volume';
  24. export class TrajectoryViewportControls extends PluginUIComponent<{}, { show: boolean, label: string }> {
  25. state = { show: false, label: '' }
  26. private update = () => {
  27. const state = this.plugin.state.data;
  28. const models = state.selectQ(q => q.ofTransformer(StateTransforms.Model.ModelFromTrajectory));
  29. if (models.length === 0) {
  30. this.setState({ show: false });
  31. return;
  32. }
  33. let label = '', count = 0, parents = new Set<string>();
  34. for (const m of models) {
  35. if (!m.sourceRef) continue;
  36. const parent = state.cells.get(m.sourceRef)!.obj as PluginStateObject.Molecule.Trajectory;
  37. if (!parent) continue;
  38. if (parent.data.length > 1) {
  39. if (parents.has(m.sourceRef)) {
  40. // do not show the controls if there are 2 models of the same trajectory present
  41. this.setState({ show: false });
  42. return;
  43. }
  44. parents.add(m.sourceRef);
  45. count++;
  46. if (!label) {
  47. const idx = (m.transform.params! as StateTransformer.Params<ModelFromTrajectory>).modelIndex;
  48. label = `Model ${idx + 1} / ${parent.data.length}`;
  49. }
  50. }
  51. }
  52. if (count > 1) label = '';
  53. this.setState({ show: count > 0, label });
  54. }
  55. componentDidMount() {
  56. this.subscribe(this.plugin.state.data.events.changed, this.update);
  57. this.subscribe(this.plugin.behaviors.state.isAnimating, this.update);
  58. }
  59. reset = () => PluginCommands.State.ApplyAction(this.plugin, {
  60. state: this.plugin.state.data,
  61. action: UpdateTrajectory.create({ action: 'reset' })
  62. });
  63. prev = () => PluginCommands.State.ApplyAction(this.plugin, {
  64. state: this.plugin.state.data,
  65. action: UpdateTrajectory.create({ action: 'advance', by: -1 })
  66. });
  67. next = () => PluginCommands.State.ApplyAction(this.plugin, {
  68. state: this.plugin.state.data,
  69. action: UpdateTrajectory.create({ action: 'advance', by: 1 })
  70. });
  71. // stopAnimation = () => {
  72. // this.plugin.state.animation.stop();
  73. // }
  74. // playAnimation = () => {
  75. // const anim = this.plugin.state.animation;
  76. // if (anim.state.params.current === AnimateModelIndex.name) {
  77. // anim.start();
  78. // } else {
  79. // anim.play(AnimateModelIndex, ParamDefinition.getDefaultValues(AnimateModelIndex.params(this.plugin) as any as ParamDefinition.Params))
  80. // }
  81. // }
  82. render() {
  83. const isAnimating = this.plugin.behaviors.state.isAnimating.value;
  84. if (!this.state.show || (isAnimating && !this.state.label)) return null;
  85. return <div className='msp-traj-controls'>
  86. {/* <IconButton icon={isAnimating ? 'stop' : 'play'} title={isAnimating ? 'Stop' : 'Play'} onClick={isAnimating ? this.stopAnimation : this.playAnimation} /> */}
  87. {!isAnimating && <IconButton icon='model-first' title='First Model' onClick={this.reset} disabled={isAnimating} />}
  88. {!isAnimating && <IconButton icon='model-prev' title='Previous Model' onClick={this.prev} disabled={isAnimating} />}
  89. {!isAnimating && <IconButton icon='model-next' title='Next Model' onClick={this.next} disabled={isAnimating} />}
  90. {!!this.state.label && <span>{this.state.label}</span> }
  91. </div>;
  92. }
  93. }
  94. export class StateSnapshotViewportControls extends PluginUIComponent<{}, { isBusy: boolean, show: boolean }> {
  95. state = { isBusy: false, show: true }
  96. componentDidMount() {
  97. // TODO: this needs to be diabled when the state is updating!
  98. this.subscribe(this.plugin.state.snapshots.events.changed, () => this.forceUpdate());
  99. this.subscribe(this.plugin.behaviors.state.isUpdating, isBusy => this.setState({ isBusy }));
  100. this.subscribe(this.plugin.behaviors.state.isAnimating, isBusy => this.setState({ isBusy }))
  101. window.addEventListener('keyup', this.keyUp, false);
  102. }
  103. componentWillUnmount() {
  104. super.componentWillUnmount();
  105. window.removeEventListener('keyup', this.keyUp, false);
  106. }
  107. keyUp = (e: KeyboardEvent) => {
  108. if (!e.ctrlKey || this.state.isBusy || e.target !== document.body) return;
  109. const snapshots = this.plugin.state.snapshots;
  110. if (e.keyCode === 37) { // left
  111. if (snapshots.state.isPlaying) snapshots.stop();
  112. this.prev();
  113. } else if (e.keyCode === 38) { // up
  114. if (snapshots.state.isPlaying) snapshots.stop();
  115. if (snapshots.state.entries.size === 0) return;
  116. const e = snapshots.state.entries.get(0);
  117. this.update(e.snapshot.id);
  118. } else if (e.keyCode === 39) { // right
  119. if (snapshots.state.isPlaying) snapshots.stop();
  120. this.next();
  121. } else if (e.keyCode === 40) { // down
  122. if (snapshots.state.isPlaying) snapshots.stop();
  123. if (snapshots.state.entries.size === 0) return;
  124. const e = snapshots.state.entries.get(snapshots.state.entries.size - 1);
  125. this.update(e.snapshot.id);
  126. }
  127. };
  128. async update(id: string) {
  129. this.setState({ isBusy: true });
  130. await PluginCommands.State.Snapshots.Apply(this.plugin, { id });
  131. this.setState({ isBusy: false });
  132. }
  133. change = (e: React.ChangeEvent<HTMLSelectElement>) => {
  134. if (e.target.value === 'none') return;
  135. this.update(e.target.value);
  136. }
  137. prev = () => {
  138. const s = this.plugin.state.snapshots;
  139. const id = s.getNextId(s.state.current, -1);
  140. if (id) this.update(id);
  141. }
  142. next = () => {
  143. const s = this.plugin.state.snapshots;
  144. const id = s.getNextId(s.state.current, 1);
  145. if (id) this.update(id);
  146. }
  147. togglePlay = () => {
  148. this.plugin.state.snapshots.togglePlay();
  149. }
  150. render() {
  151. const snapshots = this.plugin.state.snapshots;
  152. const count = snapshots.state.entries.size;
  153. if (count < 2 || !this.state.show) {
  154. return null;
  155. }
  156. const current = snapshots.state.current;
  157. const isPlaying = snapshots.state.isPlaying;
  158. return <div className='msp-state-snapshot-viewport-controls'>
  159. <select className='msp-form-control' value={current || 'none'} onChange={this.change} disabled={this.state.isBusy || isPlaying}>
  160. {!current && <option key='none' value='none'></option>}
  161. {snapshots.state.entries.valueSeq().map((e, i) => <option key={e!.snapshot.id} value={e!.snapshot.id}>{`[${i! + 1}/${count}]`} {e!.name || new Date(e!.timestamp).toLocaleString()}</option>)}
  162. </select>
  163. <IconButton icon={isPlaying ? 'stop' : 'play'} title={isPlaying ? 'Pause' : 'Cycle States'} onClick={this.togglePlay}
  164. disabled={isPlaying ? false : this.state.isBusy} />
  165. {!isPlaying && <>
  166. <IconButton icon='left-open' title='Previous State' onClick={this.prev} disabled={this.state.isBusy || isPlaying} />
  167. <IconButton icon='right-open' title='Next State' onClick={this.next} disabled={this.state.isBusy || isPlaying} />
  168. </>}
  169. </div>;
  170. }
  171. }
  172. export class AnimationViewportControls extends PluginUIComponent<{}, { isEmpty: boolean, isExpanded: boolean, isUpdating: boolean, isAnimating: boolean, isPlaying: boolean }> {
  173. state = { isEmpty: true, isExpanded: false, isUpdating: false, isAnimating: false, isPlaying: false };
  174. componentDidMount() {
  175. this.subscribe(this.plugin.state.snapshots.events.changed, () => {
  176. if (this.plugin.state.snapshots.state.isPlaying) this.setState({ isPlaying: true, isExpanded: false });
  177. else this.setState({ isPlaying: false });
  178. });
  179. this.subscribe(this.plugin.behaviors.state.isUpdating, isUpdating => {
  180. if (isUpdating) this.setState({ isUpdating: true, isExpanded: false, isEmpty: this.plugin.state.data.tree.transforms.size < 2 });
  181. else this.setState({ isUpdating: false, isEmpty: this.plugin.state.data.tree.transforms.size < 2 });
  182. });
  183. this.subscribe(this.plugin.behaviors.state.isAnimating, isAnimating => {
  184. if (isAnimating) this.setState({ isAnimating: true, isExpanded: false });
  185. else this.setState({ isAnimating: false });
  186. });
  187. }
  188. toggleExpanded = () => this.setState({ isExpanded: !this.state.isExpanded });
  189. stop = () => {
  190. this.plugin.state.animation.stop();
  191. this.plugin.state.snapshots.stop();
  192. }
  193. render() {
  194. // if (!this.state.show) return null;
  195. const isPlaying = this.plugin.state.snapshots.state.isPlaying;
  196. if (isPlaying || this.state.isEmpty) return null;
  197. const isAnimating = this.state.isAnimating;
  198. return <div className='msp-animation-viewport-controls'>
  199. <div>
  200. <div className='msp-semi-transparent-background' />
  201. <IconButton icon={isAnimating || isPlaying ? 'stop' : 'tape'} title={isAnimating ? 'Stop' : 'Select Animation'}
  202. onClick={isAnimating || isPlaying ? this.stop : this.toggleExpanded}
  203. disabled={isAnimating|| isPlaying ? false : this.state.isUpdating || this.state.isPlaying || this.state.isEmpty} />
  204. </div>
  205. {(this.state.isExpanded && !this.state.isUpdating) && <div className='msp-animation-viewport-controls-select'>
  206. <AnimationControls onStart={this.toggleExpanded} />
  207. </div>}
  208. </div>;
  209. }
  210. }
  211. export class LociLabels extends PluginUIComponent<{}, { entries: ReadonlyArray<LociLabelEntry> }> {
  212. state = { entries: [] }
  213. componentDidMount() {
  214. this.subscribe(this.plugin.behaviors.labels.highlight, e => this.setState({ entries: e.entries }));
  215. }
  216. render() {
  217. if (this.state.entries.length === 0) {
  218. return null;
  219. }
  220. return <div className='msp-highlight-info'>
  221. {this.state.entries.map((e, i) => <div key={'' + i} dangerouslySetInnerHTML={{ __html: e }} />)}
  222. </div>;
  223. }
  224. }
  225. export class DefaultStructureTools extends PluginUIComponent {
  226. render() {
  227. return <>
  228. <div className='msp-section-header'><Icon name='tools' /> Structure Tools</div>
  229. <StructureSourceControls />
  230. <StructureSelectionControls />
  231. <StructureComponentControls />
  232. <StructureMeasurementsControls />
  233. <VolumeStreamingControls />
  234. </>;
  235. }
  236. }