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 @@
// border-bottom-left-radius: $control-spacing;
&-current {
// background: $control-background
// background: $control-background;
a {
color: $font-color;
}
......
......@@ -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 }) {
......
......@@ -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>;
......
......@@ -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)!;
......
......@@ -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 };
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment