add HighlightMany plugin command

src/mol-plugin-ui/state/tree.tsx

@@ -100,14 +100,14 @@ class StateTreeNode extends PluginUIComponent<{ cell: StateObjectCell, depth: nu
         const cellState = cell.state;
         const children = cell.parent.tree.children.get(this.ref);
         const showLabel = (cell.transform.ref !== StateTransform.RootRef) && (cell.status !== 'ok' || (!cell.state.isGhost && !this.hasDecorator(children)));
-        
+
         if (!showLabel) {
             if (children.size === 0) return null;
             return <div style={{ display: cellState.isCollapsed ? 'none' : 'block' }}>
                 {children.map(c => <StateTreeNode cell={cell.parent.cells.get(c!)!} key={c} depth={this.props.depth} />)}
             </div>;
         }
-        
+
         const newDepth = this.props.depth + 1;
         return <>
             <StateTreeNodeLabel cell={cell} depth={this.props.depth} />
@@ -205,7 +205,7 @@ class StateTreeNodeLabel extends PluginUIComponent<
 
     clearHighlight = (e: React.MouseEvent<HTMLElement>) => {
         e.preventDefault();
-        PluginCommands.State.ClearHighlight(this.plugin, { state: this.props.cell.parent, ref: this.ref });
+        PluginCommands.State.ClearHighlights(this.plugin);
         e.currentTarget.blur();
     }
 

src/mol-plugin-ui/structure/components.tsx

@@ -256,9 +256,9 @@ class StructureComponentGroup extends PurePluginUIComponent<{ group: StructureCo
         if (reprs.length === 0) {
             return ret;
         }
-        
+
         ret.push(ActionMenu.Item(`Remove Representation${reprs.length > 1 ? 's' : ''}`, 'remove', () => this.plugin.managers.structure.component.removeRepresentations(this.props.group)));
-        
+
         return ret;
     }
 
@@ -267,29 +267,24 @@ class StructureComponentGroup extends PurePluginUIComponent<{ group: StructureCo
         this.setState({ action: void 0 });
         (item?.value as any)();
     }
-    
+
     selectRemoveAction: ActionMenu.OnSelect = item => {
         if (!item) return;
         this.setState({ action: void 0 });
         (item?.value as any)();
     }
-    
+
     toggleAction = () => this.setState({ action: this.state.action === 'action' ? void 0 : 'action' });
     toggleRemove = () => this.setState({ action: this.state.action === 'remove' ? void 0 : 'remove' });
 
     highlight = (e: React.MouseEvent<HTMLElement>) => {
         e.preventDefault();
-
-        for (const c of this.props.group) {
-            PluginCommands.State.Highlight(this.plugin, { state: c.cell.parent, ref: c.cell.transform.ref });
-        }
+        PluginCommands.State.HighlightMany(this.plugin, this.props.group.map(c => ({ state: c.cell.parent, ref: c.cell.transform.ref })))
     }
 
     clearHighlight = (e: React.MouseEvent<HTMLElement>) => {
         e.preventDefault();
-        for (const c of this.props.group) {
-            PluginCommands.State.ClearHighlight(this.plugin, { state: c.cell.parent, ref: c.cell.transform.ref });
-        }
+        PluginCommands.State.ClearHighlights(this.plugin);
     }
 
     focus = () => {
@@ -336,7 +331,7 @@ class StructureRepresentationEntry extends PurePluginUIComponent<{ group: Struct
         return <div style={{ position: 'relative' }}>
             <ExpandGroup header={`${repr.obj?.label || ''} Representation`} noOffset>
                 <UpdateTransformControl state={repr.parent} transform={repr.transform} customHeader='none' customUpdate={this.update} noMargin />
-                <IconButton onClick={this.remove} icon='remove' title='Remove' small style={{ 
+                <IconButton onClick={this.remove} icon='remove' title='Remove' small style={{
                     position: 'absolute', top: 0, right: 0, lineHeight: '20px', height: '20px', textAlign: 'right', width: '44px', paddingRight: '6px'
                 }} />
             </ExpandGroup>

src/mol-plugin/behavior/static/state.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author David Sehnal <david.sehnal@gmail.com>
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
@@ -26,7 +26,8 @@ export function registerDefault(ctx: PluginContext) {
     ToggleExpanded(ctx);
     ToggleVisibility(ctx);
     Highlight(ctx);
-    ClearHighlight(ctx);
+    HighlightMany(ctx);
+    ClearHighlights(ctx);
     Snapshots(ctx);
 }
 
@@ -104,28 +105,36 @@ function setVisibilityVisitor(t: StateTransform, tree: StateTree, ctx: { state:
 }
 
 export function Highlight(ctx: PluginContext) {
-    PluginCommands.State.Highlight.subscribe(ctx, ({ state, ref }) => {
+    PluginCommands.State.Highlight.subscribe(ctx, stateRef => highlight(ctx, [stateRef]));
+}
+
+export function HighlightMany(ctx: PluginContext) {
+    PluginCommands.State.HighlightMany.subscribe(ctx, stateRefPairs => highlight(ctx, stateRefPairs));
+}
+
+function highlight(ctx: PluginContext, stateRefPairs: { state: State, ref: StateTransform.Ref }[]) {
+    ctx.managers.interactivity.lociHighlights.clearHighlights();
+    for (const { state, ref } of stateRefPairs) {
         const cell = state.select(ref)[0];
-        if (!cell) return;
+        if (!cell) continue;
         if (SO.Molecule.Structure.is(cell.obj)) {
-            ctx.managers.interactivity.lociHighlights.highlightOnly({ loci: Structure.Loci(cell.obj.data) }, false);
+            ctx.managers.interactivity.lociHighlights.highlight({ loci: Structure.Loci(cell.obj.data) }, false);
         } else if (cell && SO.isRepresentation3D(cell.obj)) {
             const { repr } = cell.obj.data
-            ctx.managers.interactivity.lociHighlights.highlightOnly({ loci: repr.getLoci(), repr }, false);
+            ctx.managers.interactivity.lociHighlights.highlight({ loci: repr.getLoci(), repr }, false);
         } else if (SO.Molecule.Structure.Selections.is(cell.obj)) {
-            ctx.managers.interactivity.lociHighlights.clearHighlights();
             for (const entry of cell.obj.data) {
                 ctx.managers.interactivity.lociHighlights.highlight({ loci: entry.loci }, false);
             }
         }
+    }
 
-        // TODO: highlight volumes?
-        // TODO: select structures of subtree?
-    });
+    // TODO: highlight volumes?
+    // TODO: select structures of subtree?
 }
 
-export function ClearHighlight(ctx: PluginContext) {
-    PluginCommands.State.ClearHighlight.subscribe(ctx, ({ state, ref }) => {
+export function ClearHighlights(ctx: PluginContext) {
+    PluginCommands.State.ClearHighlights.subscribe(ctx, () => {
         ctx.managers.interactivity.lociHighlights.clearHighlights();
     });
 }

src/mol-plugin/commands.ts

@@ -1,7 +1,8 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author David Sehnal <david.sehnal@gmail.com>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
 import { Camera } from '../mol-canvas3d/camera';
@@ -25,7 +26,8 @@ export const PluginCommands = {
         ToggleExpanded: PluginCommand<{ state: State, ref: StateTransform.Ref }>(),
         ToggleVisibility: PluginCommand<{ state: State, ref: StateTransform.Ref }>(),
         Highlight: PluginCommand<{ state: State, ref: StateTransform.Ref }>(),
-        ClearHighlight: PluginCommand<{ state: State, ref: StateTransform.Ref }>(),
+        HighlightMany: PluginCommand<{ state: State, ref: StateTransform.Ref }[]>(),
+        ClearHighlights: PluginCommand<{}>(),
 
         Snapshots: {
             Add: PluginCommand<{ name?: string, description?: string, params?: PluginState.GetSnapshotParams }>(),