Skip to content
Snippets Groups Projects
Commit 21d1cc5d authored by Alexander Rose's avatar Alexander Rose
Browse files

attempt at highlighting structures in the state tree

parent 728774f0
No related branches found
No related tags found
No related merge requests found
...@@ -9,6 +9,8 @@ import { PluginContext } from '../../context'; ...@@ -9,6 +9,8 @@ import { PluginContext } from '../../context';
import { StateTree, Transform, State } from 'mol-state'; import { StateTree, Transform, State } from 'mol-state';
import { PluginStateSnapshotManager } from 'mol-plugin/state/snapshots'; import { PluginStateSnapshotManager } from 'mol-plugin/state/snapshots';
import { PluginStateObject as SO } from '../../state/objects'; import { PluginStateObject as SO } from '../../state/objects';
import { EmptyLoci, EveryLoci } from 'mol-model/loci';
import { MarkerAction } from 'mol-geo/geometry/marker-data';
export function registerDefault(ctx: PluginContext) { export function registerDefault(ctx: PluginContext) {
SyncBehaviors(ctx); SyncBehaviors(ctx);
...@@ -18,6 +20,8 @@ export function registerDefault(ctx: PluginContext) { ...@@ -18,6 +20,8 @@ export function registerDefault(ctx: PluginContext) {
RemoveObject(ctx); RemoveObject(ctx);
ToggleExpanded(ctx); ToggleExpanded(ctx);
ToggleVisibility(ctx); ToggleVisibility(ctx);
Highlight(ctx);
ClearHighlight(ctx);
Snapshots(ctx); Snapshots(ctx);
} }
...@@ -75,6 +79,35 @@ function setVisibilityVisitor(t: Transform, tree: StateTree, ctx: { state: State ...@@ -75,6 +79,35 @@ function setVisibilityVisitor(t: Transform, tree: StateTree, ctx: { state: State
ctx.state.updateCellState(t.ref, { isHidden: ctx.value }); ctx.state.updateCellState(t.ref, { isHidden: ctx.value });
} }
export function Highlight(ctx: PluginContext) {
PluginCommands.State.Highlight.subscribe(ctx, ({ state, ref }) => {
setHighlight(state, ref)
ctx.canvas3d.update()
ctx.canvas3d.requestDraw(true);
});
}
function setHighlight(state: State, root: Transform.Ref) {
StateTree.doPreOrder(state.tree, state.transforms.get(root), { state }, setHighlightVisitor);
}
function setHighlightVisitor(t: Transform, tree: StateTree, ctx: { state: State }) {
const cell = ctx.state.select(t.ref)[0]
if (!cell) return
if (!SO.isRepresentation3D(cell.obj)) return;
cell.obj.data.mark(EveryLoci, MarkerAction.Highlight)
}
export function ClearHighlight(ctx: PluginContext) {
PluginCommands.State.ClearHighlight.subscribe(ctx, ({ state, ref }) => {
ctx.behaviors.canvas.highlightLoci.next({ loci: EmptyLoci })
ctx.canvas3d.mark(EveryLoci, MarkerAction.RemoveHighlight);
ctx.canvas3d.update()
ctx.canvas3d.requestDraw(true);
});
}
export function Snapshots(ctx: PluginContext) { export function Snapshots(ctx: PluginContext) {
PluginCommands.State.Snapshots.Clear.subscribe(ctx, () => { PluginCommands.State.Snapshots.Clear.subscribe(ctx, () => {
ctx.state.snapshots.clear(); ctx.state.snapshots.clear();
......
...@@ -22,6 +22,8 @@ export const PluginCommands = { ...@@ -22,6 +22,8 @@ export const PluginCommands = {
ToggleExpanded: PluginCommand<{ state: State, ref: Transform.Ref }>({ isImmediate: true }), ToggleExpanded: PluginCommand<{ state: State, ref: Transform.Ref }>({ isImmediate: true }),
ToggleVisibility: PluginCommand<{ state: State, ref: Transform.Ref }>({ isImmediate: true }), ToggleVisibility: PluginCommand<{ state: State, ref: Transform.Ref }>({ isImmediate: true }),
Highlight: PluginCommand<{ state: State, ref: Transform.Ref }>({ isImmediate: true }),
ClearHighlight: PluginCommand<{ state: State, ref: Transform.Ref }>({ isImmediate: true }),
Snapshots: { Snapshots: {
Add: PluginCommand<{ name?: string, description?: string }>({ isImmediate: true }), Add: PluginCommand<{ name?: string, description?: string }>({ isImmediate: true }),
......
...@@ -141,6 +141,18 @@ class StateTreeNodeLabel extends PluginComponent<{ nodeRef: string, state: State ...@@ -141,6 +141,18 @@ class StateTreeNodeLabel extends PluginComponent<{ nodeRef: string, state: State
e.currentTarget.blur(); e.currentTarget.blur();
} }
highlight = (e: React.MouseEvent<HTMLElement>) => {
e.preventDefault();
PluginCommands.State.Highlight.dispatch(this.plugin, { state: this.props.state, ref: this.props.nodeRef });
e.currentTarget.blur();
}
clearHighlight = (e: React.MouseEvent<HTMLElement>) => {
e.preventDefault();
PluginCommands.State.ClearHighlight.dispatch(this.plugin, { state: this.props.state, ref: this.props.nodeRef });
e.currentTarget.blur();
}
render() { render() {
const n = this.props.state.transforms.get(this.props.nodeRef)!; const n = this.props.state.transforms.get(this.props.nodeRef)!;
const cell = this.props.state.cells.get(this.props.nodeRef)!; const cell = this.props.state.cells.get(this.props.nodeRef)!;
...@@ -170,7 +182,7 @@ class StateTreeNodeLabel extends PluginComponent<{ nodeRef: string, state: State ...@@ -170,7 +182,7 @@ class StateTreeNodeLabel extends PluginComponent<{ nodeRef: string, state: State
<span className='msp-icon msp-icon-visual-visibility' /> <span className='msp-icon msp-icon-visual-visibility' />
</button>; </button>;
return <div className={`msp-tree-row${isCurrent ? ' msp-tree-row-current' : ''}`}> return <div className={`msp-tree-row${isCurrent ? ' msp-tree-row-current' : ''}`} onMouseEnter={this.highlight} onMouseLeave={this.clearHighlight}>
{isCurrent ? <b>{label}</b> : label} {isCurrent ? <b>{label}</b> : 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'}`} />
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment