Skip to content
Snippets Groups Projects
Select Git revision
  • 1e9fa003dba07405fdb954753c1ca41a4d72c1c3
  • master default protected
  • rednatco-v2
  • rednatco
  • test
  • ntc-tube-uniform-color
  • ntc-tube-missing-atoms
  • restore-vertex-array-per-program
  • watlas2
  • dnatco_new
  • cleanup-old-nodejs
  • webmmb
  • fix_auth_seq_id
  • update_deps
  • ext_dev
  • ntc_balls
  • nci-2
  • plugin
  • bugfix-0.4.5
  • nci
  • servers
  • v0.5.0-dev.1
  • v0.4.5
  • v0.4.4
  • v0.4.3
  • v0.4.2
  • v0.4.1
  • v0.4.0
  • v0.3.12
  • v0.3.11
  • v0.3.10
  • v0.3.9
  • v0.3.8
  • v0.3.7
  • v0.3.6
  • v0.3.5
  • v0.3.4
  • v0.3.3
  • v0.3.2
  • v0.3.1
  • v0.3.0
41 results

selection.tsx

Blame
  • selection.tsx 4.75 KiB
    /**
     * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
     *
     * @author Alexander Rose <alexander.rose@weirdbyte.de>
     */
    
    import * as React from 'react';
    import { CollapsableControls, CollapsableState } from '../base';
    import { StructureSelectionQueries, SelectionModifier } from '../../util/structure-selection-helper';
    import { ButtonSelect, Options } from '../controls/common';
    import { PluginCommands } from '../../command';
    import { ParamDefinition as PD } from '../../../mol-util/param-definition';
    import { Interactivity } from '../../util/interactivity';
    import { ParameterControls } from '../controls/parameters';
    
    const StructureSelectionParams = {
        granularity: Interactivity.Params.granularity,
    }
    
    interface StructureSelectionControlsState extends CollapsableState {
        minRadius: number,
        extraRadius: number,
        durationMs: number,
    
        isDisabled: boolean
    }
    
    export class StructureSelectionControls<P, S extends StructureSelectionControlsState> extends CollapsableControls<P, S> {
        componentDidMount() {
            this.subscribe(this.plugin.events.interactivity.selectionUpdated, () => {
                this.forceUpdate()
            });
    
            this.subscribe(this.plugin.events.interactivity.propsUpdated, () => {
                this.forceUpdate()
            });
    
            this.subscribe(this.plugin.state.dataState.events.isUpdating, v => this.setState({ isDisabled: v }))
        }
    
        get stats() {
            const stats = this.plugin.helpers.structureSelectionManager.stats
            if (stats.structureCount === 0 || stats.elementCount === 0) {
                return 'Selected nothing'
            } else {
                return `Selected ${stats.label}`
            }
        }
    
        focus = () => {
            const { extraRadius, minRadius, durationMs } = this.state
            if (this.plugin.helpers.structureSelectionManager.stats.elementCount === 0) return
            const { sphere } = this.plugin.helpers.structureSelectionManager.getBoundary();
            const radius = Math.max(sphere.radius + extraRadius, minRadius);
            this.plugin.canvas3d.camera.focus(sphere.center, radius, durationMs);
        }
    
        setProps = (p: { param: PD.Base<any>, name: string, value: any }) => {
            if (p.name === 'granularity') {
                PluginCommands.Interactivity.SetProps.dispatch(this.plugin, { props: { granularity: p.value } });
            }
        }
    
        get values () {
            return {
                granularity: this.plugin.interactivity.props.granularity,
            }
        }
    
        set = (modifier: SelectionModifier, value: string) => {
            const query = StructureSelectionQueries[value as keyof typeof StructureSelectionQueries]
            this.plugin.helpers.structureSelection.set(modifier, query.query, false)
        }
    
        add = (value: string) => this.set('add', value)
        remove = (value: string) => this.set('remove', value)
        only = (value: string) => this.set('only', value)
    
        defaultState() {
            return {
                isCollapsed: false,
                header: 'Selection',
    
                minRadius: 8,
                extraRadius: 4,
                durationMs: 250,
    
                isDisabled: false
            } as S
        }
    
        renderControls() {
            const queries = Object.keys(StructureSelectionQueries).map(name => {
                return [name, StructureSelectionQueries[name as keyof typeof StructureSelectionQueries].label] as [string, string]
            })
    
            return <div>
                <div className='msp-control-row msp-row-text'>
                    <button className='msp-btn msp-btn-block' onClick={this.focus}>
                        <span className={`msp-icon msp-icon-focus-on-visual`} style={{ position: 'absolute', left: '5px' }} />
                        {this.stats}
                    </button>
                </div>
                <ParameterControls params={StructureSelectionParams} values={this.values} onChange={this.setProps} isDisabled={this.state.isDisabled} />
                <div className='msp-control-row'>
                    <div className='msp-select-row'>
                        <ButtonSelect label='Add' onChange={this.add} disabled={this.state.isDisabled}>
                            <optgroup label='Add'>
                                {Options(queries)}
                            </optgroup>
                        </ButtonSelect>
                        <ButtonSelect label='Remove' onChange={this.remove} disabled={this.state.isDisabled}>
                            <optgroup label='Remove'>
                                {Options(queries)}
                            </optgroup>
                        </ButtonSelect>
                        <ButtonSelect label='Only' onChange={this.only} disabled={this.state.isDisabled}>
                            <optgroup label='Only'>
                                {Options(queries)}
                            </optgroup>
                        </ButtonSelect>
                    </div>
                </div>
            </div>
        }
    }