diff --git a/src/mol-plugin/skin/base/components/temp.scss b/src/mol-plugin/skin/base/components/temp.scss index 460be6060676d860f5751389a6bb9fec45577204..85d63d8d3dcf56830808fb4d8a832ad9413c44a5 100644 --- a/src/mol-plugin/skin/base/components/temp.scss +++ b/src/mol-plugin/skin/base/components/temp.scss @@ -82,7 +82,8 @@ // border-bottom-left-radius: $control-spacing; &-current { - // background: $control-background + // background: $control-background; + a { color: $font-color; } diff --git a/src/mol-plugin/ui/controls/common.tsx b/src/mol-plugin/ui/controls/common.tsx index 4a9588fbeab6903662439f8576775f9068f00c68..3412a9df0350e98e5355314b8b3aac8a66c25171 100644 --- a/src/mol-plugin/ui/controls/common.tsx +++ b/src/mol-plugin/ui/controls/common.tsx @@ -31,6 +31,7 @@ export class NumericInput extends React.PureComponent<{ value: number, onChange: (v: number) => void, onEnter?: () => void, + onBlur?: () => void, blurOnEnter?: boolean, isDisabled?: boolean, placeholder?: string @@ -58,6 +59,7 @@ export class NumericInput extends React.PureComponent<{ onBlur = () => { this.setState({ value: '' + this.props.value }); + if (this.props.onBlur) this.props.onBlur(); } static getDerivedStateFromProps(props: { value: number }, state: { value: string }) { diff --git a/src/mol-plugin/ui/controls/slider.tsx b/src/mol-plugin/ui/controls/slider.tsx index 21aad5dd129450e4ab64e94a4ed7cf69137c7973..b57f3efc8d806a20518ad4b636596e0b2e88e353 100644 --- a/src/mol-plugin/ui/controls/slider.tsx +++ b/src/mol-plugin/ui/controls/slider.tsx @@ -39,11 +39,19 @@ export class Slider extends React.Component<{ } updateManually = (v: number) => { + this.setState({ isChanging: true }); + let n = v; if (this.props.step === 1) n = Math.round(n); if (n < this.props.min) n = this.props.min; if (n > this.props.max) n = this.props.max; - this.props.onChange(n); + + this.setState({ current: n, isChanging: true }); + } + + onManualBlur = () => { + this.setState({ isChanging: false }); + this.props.onChange(this.state.current); } render() { @@ -57,7 +65,7 @@ export class Slider extends React.Component<{ </div> <div> <NumericInput - value={this.state.current} onEnter={this.props.onEnter} blurOnEnter={true} + value={this.state.current} blurOnEnter={true} onBlur={this.onManualBlur} isDisabled={this.props.disabled} onChange={this.updateManually} /> </div> </div>; diff --git a/src/mol-plugin/ui/state/tree.tsx b/src/mol-plugin/ui/state/tree.tsx index 812f1815cc67b82f149893487352b1cd9e9d6436..d2fc8b245bb5ab0979760db376853fd10cfcc04a 100644 --- a/src/mol-plugin/ui/state/tree.tsx +++ b/src/mol-plugin/ui/state/tree.tsx @@ -234,8 +234,13 @@ class StateTreeNodeLabel extends PluginUIComponent< <span className='msp-icon msp-icon-visual-visibility' /> </button>; - const row = <div className={`msp-tree-row${isCurrent ? ' msp-tree-row-current' : ''}`} onMouseEnter={this.highlight} onMouseLeave={this.clearHighlight} - style={{ marginLeft: this.state.isCurrent ? '0px' : `${this.props.depth * 10}px`, borderLeft: isCurrent || this.props.depth === 0 ? 'none' : void 0 }}> + const style: React.HTMLAttributes<HTMLDivElement>['style'] = { + marginLeft: this.state.isCurrent ? void 0 : `${this.props.depth * 10}px`, + // paddingLeft: !this.state.isCurrent ? void 0 : `${this.props.depth * 10}px`, + borderLeft: isCurrent || this.props.depth === 0 ? 'none' : void 0 + } + + const row = <div className={`msp-tree-row${isCurrent ? ' msp-tree-row-current' : ''}`} onMouseEnter={this.highlight} onMouseLeave={this.clearHighlight} style={style}> {label} {children.size > 0 && <button onClick={this.toggleExpanded} className='msp-btn msp-btn-link msp-tree-toggle-exp-button'> <span className={`msp-icon msp-icon-${cellState.isCollapsed ? 'expand' : 'collapse'}`} /> @@ -257,6 +262,13 @@ class StateTreeNodeLabel extends PluginUIComponent< } class StateTreeNodeTransform extends PluginUIComponent<{ nodeRef: string, state: State, depth: number, toggleCollapsed?: Observable<any> }> { + componentDidMount() { + // this.subscribe(this.plugin.events.state.object.updated, ({ ref, state }) => { + // if (this.props.nodeRef !== ref || this.props.state !== state) return; + // this.forceUpdate(); + // }); + } + render() { const ref = this.props.nodeRef; const cell = this.props.state.cells.get(ref)!; diff --git a/src/mol-plugin/ui/state/update-transform.tsx b/src/mol-plugin/ui/state/update-transform.tsx index 6946089c6f928ff7828148c52be5747ff69fe0fe..3cfa511fefc218e746d85874e62fbbcb8fa09cde 100644 --- a/src/mol-plugin/ui/state/update-transform.tsx +++ b/src/mol-plugin/ui/state/update-transform.tsx @@ -49,9 +49,16 @@ class UpdateTransformContol extends TransformContolBase<UpdateTransformContol.Pr if (super.componentDidMount) super.componentDidMount(); if (this.props.toggleCollapsed) this.subscribe(this.props.toggleCollapsed, () => this.setState({ isCollapsed: !this.state.isCollapsed })); + + this.subscribe(this.plugin.events.state.object.updated, ({ ref, state }) => { + if (this.props.transform.ref !== ref || this.props.state !== state) return; + if (this.state.params !== this.props.transform.params) { + this.setState({ params: this.props.transform.params, isInitial: true }) + } + }); } - private _getInfo = memoizeLatest((t: StateTransform) => StateTransformParameters.infoFromTransform(this.plugin, this.props.state, this.props.transform)); + private _getInfo = memoizeLatest((t: StateTransform) => StateTransformParameters.infoFromTransform(this.plugin, this.props.state, t)); state: UpdateTransformContol.ComponentState = { transform: this.props.transform, error: void 0, isInitial: true, params: this.getInfo().initialValues, busy: false, isCollapsed: this.props.initiallyCollapsed };