Skip to content
Snippets Groups Projects
Commit 04ddee8f authored by David Sehnal's avatar David Sehnal
Browse files

mol-plugin: fixed UI update bug, tweaks

parent 9cb4b339
No related branches found
No related tags found
No related merge requests found
...@@ -82,7 +82,8 @@ ...@@ -82,7 +82,8 @@
// border-bottom-left-radius: $control-spacing; // border-bottom-left-radius: $control-spacing;
&-current { &-current {
// background: $control-background // background: $control-background;
a { a {
color: $font-color; color: $font-color;
} }
......
...@@ -31,6 +31,7 @@ export class NumericInput extends React.PureComponent<{ ...@@ -31,6 +31,7 @@ export class NumericInput extends React.PureComponent<{
value: number, value: number,
onChange: (v: number) => void, onChange: (v: number) => void,
onEnter?: () => void, onEnter?: () => void,
onBlur?: () => void,
blurOnEnter?: boolean, blurOnEnter?: boolean,
isDisabled?: boolean, isDisabled?: boolean,
placeholder?: string placeholder?: string
...@@ -58,6 +59,7 @@ export class NumericInput extends React.PureComponent<{ ...@@ -58,6 +59,7 @@ export class NumericInput extends React.PureComponent<{
onBlur = () => { onBlur = () => {
this.setState({ value: '' + this.props.value }); this.setState({ value: '' + this.props.value });
if (this.props.onBlur) this.props.onBlur();
} }
static getDerivedStateFromProps(props: { value: number }, state: { value: string }) { static getDerivedStateFromProps(props: { value: number }, state: { value: string }) {
......
...@@ -39,11 +39,19 @@ export class Slider extends React.Component<{ ...@@ -39,11 +39,19 @@ export class Slider extends React.Component<{
} }
updateManually = (v: number) => { updateManually = (v: number) => {
this.setState({ isChanging: true });
let n = v; let n = v;
if (this.props.step === 1) n = Math.round(n); if (this.props.step === 1) n = Math.round(n);
if (n < this.props.min) n = this.props.min; if (n < this.props.min) n = this.props.min;
if (n > this.props.max) n = this.props.max; 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() { render() {
...@@ -57,7 +65,7 @@ export class Slider extends React.Component<{ ...@@ -57,7 +65,7 @@ export class Slider extends React.Component<{
</div> </div>
<div> <div>
<NumericInput <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} /> isDisabled={this.props.disabled} onChange={this.updateManually} />
</div> </div>
</div>; </div>;
......
...@@ -234,8 +234,13 @@ class StateTreeNodeLabel extends PluginUIComponent< ...@@ -234,8 +234,13 @@ class StateTreeNodeLabel extends PluginUIComponent<
<span className='msp-icon msp-icon-visual-visibility' /> <span className='msp-icon msp-icon-visual-visibility' />
</button>; </button>;
const row = <div className={`msp-tree-row${isCurrent ? ' msp-tree-row-current' : ''}`} onMouseEnter={this.highlight} onMouseLeave={this.clearHighlight} const style: React.HTMLAttributes<HTMLDivElement>['style'] = {
style={{ marginLeft: this.state.isCurrent ? '0px' : `${this.props.depth * 10}px`, borderLeft: isCurrent || this.props.depth === 0 ? 'none' : void 0 }}> 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} {label}
{children.size > 0 && <button onClick={this.toggleExpanded} className='msp-btn msp-btn-link msp-tree-toggle-exp-button'> {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'}`} /> <span className={`msp-icon msp-icon-${cellState.isCollapsed ? 'expand' : 'collapse'}`} />
...@@ -257,6 +262,13 @@ class StateTreeNodeLabel extends PluginUIComponent< ...@@ -257,6 +262,13 @@ class StateTreeNodeLabel extends PluginUIComponent<
} }
class StateTreeNodeTransform extends PluginUIComponent<{ nodeRef: string, state: State, depth: number, toggleCollapsed?: Observable<any> }> { 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() { render() {
const ref = this.props.nodeRef; const ref = this.props.nodeRef;
const cell = this.props.state.cells.get(ref)!; const cell = this.props.state.cells.get(ref)!;
......
...@@ -49,9 +49,16 @@ class UpdateTransformContol extends TransformContolBase<UpdateTransformContol.Pr ...@@ -49,9 +49,16 @@ class UpdateTransformContol extends TransformContolBase<UpdateTransformContol.Pr
if (super.componentDidMount) super.componentDidMount(); if (super.componentDidMount) super.componentDidMount();
if (this.props.toggleCollapsed) this.subscribe(this.props.toggleCollapsed, () => this.setState({ isCollapsed: !this.state.isCollapsed })); 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 }; state: UpdateTransformContol.ComponentState = { transform: this.props.transform, error: void 0, isInitial: true, params: this.getInfo().initialValues, busy: false, isCollapsed: this.props.initiallyCollapsed };
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment