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

mol-plugin: removed update transforms from the state tree

parent fd6aac51
No related branches found
No related tags found
No related merge requests found
......@@ -20,6 +20,7 @@ import { StateTree } from './state/tree';
import { BackgroundTaskProgress } from './task';
import { Viewport, ViewportControls } from './viewport';
import { StateTransform } from 'mol-state';
import { UpdateTransformContol } from './state/update-transform';
export class Plugin extends React.Component<{ plugin: PluginContext }, {}> {
......@@ -176,8 +177,6 @@ export class CurrentObject extends PluginUIComponent {
const ref = current.ref;
const cell = current.state.cells.get(ref)!;
const transform = cell.transform;
const def = transform.transformer.definition;
const display = cell.obj ? cell.obj.label : (def.display && def.display.name) || def.name;
let showActions = true;
if (ref === StateTransform.RootRef) {
......@@ -188,7 +187,7 @@ export class CurrentObject extends PluginUIComponent {
if (!showActions) return null;
return cell.status === 'ok' && <>
<div className='msp-section-header'>{`Actions (${display})`}</div>
<UpdateTransformContol state={current.state} transform={transform} />
<StateObjectActions state={current.state} nodeRef={ref} />
</>;
}
......
......@@ -9,7 +9,7 @@ import { PluginUIComponent } from '../base';
import { ApplyActionContol } from './apply-action';
import { State } from 'mol-state';
export class StateObjectActions extends PluginUIComponent<{ state: State, nodeRef: string }> {
export class StateObjectActions extends PluginUIComponent<{ state: State, nodeRef: string, hideHeader?: boolean }> {
get current() {
return this.plugin.state.behavior.currentObject.value;
}
......@@ -30,6 +30,14 @@ export class StateObjectActions extends PluginUIComponent<{ state: State, nodeRe
const { state, nodeRef: ref } = this.props;
const cell = state.cells.get(ref)!;
const actions = state.actions.fromCell(cell, this.plugin);
return actions.map((act, i) => <ApplyActionContol plugin={this.plugin} key={`${act.id}`} state={state} action={act} nodeRef={ref} />);
if (actions.length === 0) return null;
const def = cell.transform.transformer.definition;
const display = cell.obj ? cell.obj.label : (def.display && def.display.name) || def.name;
return <>
{!this.props.hideHeader && <div className='msp-section-header'>{`Actions (${display})`}</div> }
{actions.map((act, i) => <ApplyActionContol plugin={this.plugin} key={`${act.id}`} state={state} action={act} nodeRef={ref} />)}
</>;
}
}
\ No newline at end of file
......@@ -175,17 +175,18 @@ abstract class TransformContolBase<P, S extends TransformContolBase.ComponentSta
? this.plugin.customParamEditors.get(tId)!
: StateTransformParameters;
const wrapClass = this.isUpdate()
? !isEmpty && !this.state.isCollapsed
? 'msp-transform-update-wrapper'
: 'msp-transform-update-wrapper-collapsed'
: 'msp-transform-wrapper';
const wrapClass = 'msp-transform-wrapper';
// this.isUpdate()
// ? !isEmpty && !this.state.isCollapsed
// ? 'msp-transform-update-wrapper'
// : 'msp-transform-update-wrapper-collapsed'
// : 'msp-transform-wrapper';
return <div className={wrapClass}>
<div className='msp-transform-header'>
<button className='msp-btn msp-btn-block' onClick={this.toggleExpanded} title={display.description}>
{display.name}
{!isEmpty && this.state.isCollapsed && this.isUpdate() && <small>Click to Edit</small>}
{/* {!isEmpty && this.state.isCollapsed && this.isUpdate() && <small>Click to Edit</small>} */}
</button>
</div>
{!isEmpty && !this.state.isCollapsed && <>
......
......@@ -6,12 +6,10 @@
import * as React from 'react';
import { PluginStateObject } from 'mol-plugin/state/objects';
import { State, StateObject, StateObjectCell, StateTransform } from 'mol-state'
import { State, StateObject, StateTransform } from 'mol-state'
import { PluginCommands } from 'mol-plugin/command';
import { PluginUIComponent } from '../base';
import { UpdateTransformContol } from './update-transform';
import { StateObjectActions } from './actions';
import { Observable, Subject } from 'rxjs';
export class StateTree extends PluginUIComponent<{ state: State }, { showActions: boolean }> {
state = { showActions: true };
......@@ -37,7 +35,7 @@ export class StateTree extends PluginUIComponent<{ state: State }, { showActions
render() {
const ref = this.props.state.tree.root.ref;
if (this.state.showActions) {
return <StateObjectActions state={this.props.state} nodeRef={ref} />
return <StateObjectActions state={this.props.state} nodeRef={ref} hideHeader={true} />
}
return <StateTreeNode state={this.props.state} nodeRef={ref} depth={0} />;
}
......@@ -115,7 +113,7 @@ class StateTreeNode extends PluginUIComponent<{ nodeRef: string, state: State, d
class StateTreeNodeLabel extends PluginUIComponent<
{ nodeRef: string, state: State, depth: number },
{ state: State, isCurrent: boolean, isCollapsed: boolean, updaterCollapsed: boolean }> {
{ state: State, isCurrent: boolean, isCollapsed: boolean /*, updaterCollapsed: boolean */ }> {
is(e: State.ObjectEvent) {
return e.ref === this.props.nodeRef && e.state === this.props.state;
......@@ -147,7 +145,7 @@ class StateTreeNodeLabel extends PluginUIComponent<
isCurrent: this.props.state.current === this.props.nodeRef,
isCollapsed: this.props.state.cellStates.get(this.props.nodeRef).isCollapsed,
state: this.props.state,
updaterCollapsed: true
// updaterCollapsed: true
}
static getDerivedStateFromProps(props: { nodeRef: string, state: State }, state: { state: State, isCurrent: boolean, isCollapsed: boolean }) {
......@@ -195,12 +193,12 @@ class StateTreeNodeLabel extends PluginUIComponent<
e.currentTarget.blur();
}
private toggleUpdaterObs = new Subject();
toggleUpdater = (e: React.MouseEvent<HTMLAnchorElement>) => {
e.preventDefault();
e.currentTarget.blur();
this.toggleUpdaterObs.next();
}
// private toggleUpdaterObs = new Subject();
// toggleUpdater = (e: React.MouseEvent<HTMLAnchorElement>) => {
// e.preventDefault();
// e.currentTarget.blur();
// this.toggleUpdaterObs.next();
// }
render() {
const n = this.props.state.transforms.get(this.props.nodeRef)!;
......@@ -221,7 +219,7 @@ class StateTreeNodeLabel extends PluginUIComponent<
const obj = cell.obj as PluginStateObject.Any;
const title = `${obj.label} ${obj.description ? obj.description : ''}`
if (this.state.isCurrent) {
label = <><a title={title} href='#' onClick={this.toggleUpdater}><b>{obj.label}</b> {obj.description ? <small>{obj.description}</small> : void 0}</a></>;
label = <><a title={title} href='#'><b>{obj.label}</b> {obj.description ? <small>{obj.description}</small> : void 0}</a></>;
} else {
label = <><a title={title} href='#' onClick={this.setCurrent}>{obj.label} {obj.description ? <small>{obj.description}</small> : void 0}</a></>;
}
......@@ -235,9 +233,9 @@ class StateTreeNodeLabel extends PluginUIComponent<
</button>;
const style: React.HTMLAttributes<HTMLDivElement>['style'] = {
marginLeft: this.state.isCurrent ? void 0 : `${this.props.depth * 10}px`,
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
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}>
......@@ -250,33 +248,33 @@ class StateTreeNodeLabel extends PluginUIComponent<
</button>}{visibility}
</div>;
if (this.state.isCurrent) {
return <>
{row}
<StateTreeNodeTransform {...this.props} toggleCollapsed={this.toggleUpdaterObs} />
</>
}
// if (this.state.isCurrent) {
// return <>
// {row}
// <StateTreeNodeTransform {...this.props} toggleCollapsed={this.toggleUpdaterObs} />
// </>
// }
return row;
}
}
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();
// });
}
// 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)!;
const parent: StateObjectCell | undefined = (cell.sourceRef && this.props.state.cells.get(cell.sourceRef)!) || void 0;
// render() {
// const ref = this.props.nodeRef;
// const cell = this.props.state.cells.get(ref)!;
// const parent: StateObjectCell | undefined = (cell.sourceRef && this.props.state.cells.get(cell.sourceRef)!) || void 0;
if (!parent || parent.status !== 'ok') return null;
// if (!parent || parent.status !== 'ok') return null;
const transform = cell.transform;
return <UpdateTransformContol state={this.props.state} transform={transform} initiallyCollapsed={true} toggleCollapsed={this.props.toggleCollapsed} />;
}
}
\ No newline at end of file
// const transform = cell.transform;
// return <UpdateTransformContol state={this.props.state} transform={transform} initiallyCollapsed={true} toggleCollapsed={this.props.toggleCollapsed} />;
// }
// }
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment