basic structure selection model, fixed bug in OrderedSet

src/mol-canvas3d/canvas3d.ts

@@ -8,7 +8,7 @@ import { BehaviorSubject, Subscription } from 'rxjs';
 import { now } from 'mol-util/now';
 
 import { Vec3 } from 'mol-math/linear-algebra'
-import InputObserver from 'mol-util/input/input-observer'
+import InputObserver, { ModifiersKeys, ButtonsType } from 'mol-util/input/input-observer'
 import Renderer, { RendererStats } from 'mol-gl/renderer'
 import { GraphicsRenderObject } from 'mol-gl/render-object'
 
@@ -29,6 +29,7 @@ import { ParamDefinition as PD } from 'mol-util/param-definition';
 import { BoundingSphereHelper, DebugHelperParams } from './helper/bounding-sphere-helper';
 import { decodeFloatRGB } from 'mol-util/float-packing';
 import { SetUtils } from 'mol-util/set';
+import { Canvas3dInteractionHelper } from './helper/interaction-events';
 
 export const Canvas3DParams = {
     // TODO: FPS cap?
@@ -76,10 +77,18 @@ interface Canvas3D {
     readonly props: Canvas3DProps
     readonly input: InputObserver
     readonly stats: RendererStats
+    readonly interaction: Canvas3dInteractionHelper['events']
+
+    // TODO: is this a good solution?
+    setSceneAnimating(animating: boolean): void
+
     dispose: () => void
 }
 
 namespace Canvas3D {
+    export interface HighlightEvent { current: Representation.Loci, prev: Representation.Loci, modifiers?: ModifiersKeys }
+    export interface ClickEvent { current: Representation.Loci, buttons: ButtonsType, modifiers: ModifiersKeys }
+
     export function create(canvas: HTMLCanvasElement, container: Element, props: Partial<Canvas3DProps> = {}): Canvas3D {
         const p = { ...PD.getDefaultValues(Canvas3DParams), ...props }
 
@@ -125,7 +134,10 @@ namespace Canvas3D {
         let isUpdating = false
         let drawPending = false
 
-        const debugHelper = new BoundingSphereHelper(webgl, scene, p.debug)
+        const debugHelper = new BoundingSphereHelper(webgl, scene, p.debug);
+        const interactionHelper = new Canvas3dInteractionHelper(identify, getLoci, input);
+
+        let isSceneAnimating = false
 
         function getLoci(pickingId: PickingId) {
             let loci: Loci = EmptyLoci
@@ -250,7 +262,8 @@ namespace Canvas3D {
         function animate() {
             currentTime = now();
             camera.transition.tick(currentTime);
-            draw(false)
+            draw(false);
+            if (!camera.transition.inTransition && !isSceneAnimating) interactionHelper.tick(currentTime);
             window.requestAnimationFrame(animate)
         }
 
@@ -419,6 +432,12 @@ namespace Canvas3D {
             get stats() {
                 return renderer.stats
             },
+            get interaction() {
+                return interactionHelper.events
+            },
+            setSceneAnimating(animating) {
+                isSceneAnimating = animating;
+            },
             dispose: () => {
                 scene.clear()
                 debugHelper.clear()
@@ -426,6 +445,7 @@ namespace Canvas3D {
                 controls.dispose()
                 renderer.dispose()
                 camera.dispose()
+                interactionHelper.dispose()
             }
         }
 

src/mol-canvas3d/helper/interaction-events.ts

@@ -0,0 +1,125 @@
+/**
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author David Sehnal <david.sehnal@gmail.com>
+ */
+
+import { PickingId } from 'mol-geo/geometry/picking';
+import { EmptyLoci } from 'mol-model/loci';
+import { Representation } from 'mol-repr/representation';
+import InputObserver, { ModifiersKeys, ButtonsType } from 'mol-util/input/input-observer';
+import { RxEventHelper } from 'mol-util/rx-event-helper';
+
+type Canvas3D = import('../canvas3d').Canvas3D
+
+export class Canvas3dInteractionHelper {
+    private ev = RxEventHelper.create();
+
+    readonly events = {
+        highlight: this.ev<import('../canvas3d').Canvas3D.HighlightEvent>(),
+        click: this.ev<import('../canvas3d').Canvas3D.ClickEvent>(),
+    };
+
+    private cX = -1;
+    private cY = -1;
+
+    private lastX = -1;
+    private lastY = -1;
+
+    private id: PickingId | undefined = void 0;
+
+    private currentIdentifyT = 0;
+
+    private prevLoci: Representation.Loci = Representation.Loci.Empty;
+    private prevT = 0;
+
+    private inside = false;
+
+    private buttons: ButtonsType = ButtonsType.create(0);
+    private modifiers: ModifiersKeys = ModifiersKeys.None;
+
+    private async identify(isClick: boolean, t: number) {
+        if (this.lastX !== this.cX && this.lastY !== this.cY) {
+            this.id = await this.canvasIdentify(this.cX, this.cY);
+            this.lastX = this.cX;
+            this.lastY = this.cY;
+        }
+
+        if (!this.id) return;
+
+        if (isClick) {
+            this.events.click.next({ current: this.getLoci(this.id), buttons: this.buttons, modifiers: this.modifiers });
+            return;
+        }
+
+        // only highlight the latest
+        if (!this.inside || this.currentIdentifyT !== t) {
+            return;
+        }
+
+        const loci = this.getLoci(this.id);
+        if (!Representation.Loci.areEqual(this.prevLoci, loci)) {
+            this.events.highlight.next({ current: loci, prev: this.prevLoci, modifiers: this.modifiers });
+            this.prevLoci = loci;
+        }
+    }
+
+    tick(t: number) {
+        if (this.inside && t - this.prevT > 1000 / this.maxFps) {
+            this.prevT = t;
+            this.currentIdentifyT = t;
+            this.identify(false, t);
+        }
+    }
+
+    leave() {
+        this.inside = false;
+        if (this.prevLoci.loci !== EmptyLoci) {
+            const prev = this.prevLoci;
+            this.prevLoci = Representation.Loci.Empty;
+            this.events.highlight.next({ current: this.prevLoci, prev });
+        }
+    }
+
+    move(x: number, y: number, modifiers: ModifiersKeys) {
+        this.inside = true;
+        this.modifiers = modifiers;
+        this.cX = x;
+        this.cY = y;
+    }
+
+    select(x: number, y: number, buttons: ButtonsType, modifiers: ModifiersKeys) {
+        this.cX = x;
+        this.cY = y;
+        this.buttons = buttons;
+        this.modifiers = modifiers;
+        this.identify(true, 0);
+    }
+
+    modify(modifiers: ModifiersKeys) {
+        if (this.prevLoci.loci === EmptyLoci || ModifiersKeys.areEqual(modifiers, this.modifiers)) return;
+        this.modifiers = modifiers;
+        this.events.highlight.next({ current: this.prevLoci, prev: this.prevLoci, modifiers: this.modifiers });
+    }
+
+    dispose() {
+        this.ev.dispose();
+    }
+
+    constructor(private canvasIdentify: Canvas3D['identify'], private getLoci: Canvas3D['getLoci'], input: InputObserver, private maxFps: number = 15) {
+        input.move.subscribe(({x, y, inside, buttons, modifiers }) => {
+            if (!inside || buttons) { return; }
+            this.move(x, y, modifiers);
+        });
+
+        input.leave.subscribe(() => {
+            this.leave();
+        });
+
+        input.click.subscribe(({x, y, buttons, modifiers }) => {
+            this.select(x, y, buttons, modifiers);
+        });
+
+        input.modifiers.subscribe(modifiers => this.modify(modifiers));
+    }
+}

src/mol-data/int/_spec/ordered-set.spec.ts

@@ -140,6 +140,8 @@ describe('ordered set', () => {
     testEq('union AA3', OrderedSet.union(OrderedSet.ofSortedArray([1, 3]), OrderedSet.ofSortedArray([2, 4])), [1, 2, 3, 4]);
     testEq('union AA4', OrderedSet.union(OrderedSet.ofSortedArray([1, 3]), OrderedSet.ofSortedArray([1, 3, 4])), [1, 3, 4]);
     testEq('union AA5', OrderedSet.union(OrderedSet.ofSortedArray([1, 3, 4]), OrderedSet.ofSortedArray([1, 3])), [1, 3, 4]);
+    testEq('union AR', OrderedSet.union(OrderedSet.ofSortedArray([1, 2, 5, 6]), OrderedSet.ofRange(3, 4)), [1, 2, 3, 4, 5, 6]);
+    testEq('union AR1', OrderedSet.union(OrderedSet.ofSortedArray([1, 2, 6, 7]), OrderedSet.ofRange(3, 4)), [1, 2, 3, 4, 6, 7]);
     it('union AA6', () => expect(OrderedSet.union(arr136, OrderedSet.ofSortedArray([1, 3, 6]))).toBe(arr136));
 
     testEq('intersect ES', OrderedSet.intersect(empty, singleton10), []);
@@ -164,6 +166,7 @@ describe('ordered set', () => {
     testEq('subtract SR2', OrderedSet.subtract(range1_4, OrderedSet.ofSingleton(3)), [1, 2, 4]);
     testEq('subtract RR', OrderedSet.subtract(range1_4, range1_4), []);
     testEq('subtract RR1', OrderedSet.subtract(range1_4, OrderedSet.ofRange(3, 5)), [1, 2]);
+    testEq('subtract RR2', OrderedSet.subtract(range1_4, OrderedSet.ofRange(2, 3)), [1, 4]);
 
     testEq('subtract RA', OrderedSet.subtract(range1_4, arr136), [2, 4]);
     testEq('subtract RA1', OrderedSet.subtract(range1_4, OrderedSet.ofSortedArray([0, 1, 2, 3, 4, 7])), []);

src/mol-data/int/impl/ordered-set.ts

@@ -169,7 +169,7 @@ function unionSI(a: S, b: I) {
     let offset = 0;
     for (let i = 0; i < start; i++) indices[offset++] = a[i];
     for (let i = min; i <= max; i++) indices[offset++] = i;
-    for (let i = end, _i = a.length; i < _i; i++) indices[offset] = a[i];
+    for (let i = end, _i = a.length; i < _i; i++) indices[offset++] = a[i];
 
     return ofSortedArray(indices);
 }

src/mol-geo/geometry/marker-data.ts

@@ -38,12 +38,14 @@ export function applyMarkerAction(array: Uint8Array, start: number, end: number,
                 }
                 break
             case MarkerAction.Select:
-                v += 2
+                if (v < 2) v += 2
+                // v += 2
                 break
             case MarkerAction.Deselect:
-                if (v >= 2) {
-                    v -= 2
-                }
+                // if (v >= 2) {
+                //     v -= 2
+                // }
+                v = v % 2
                 break
             case MarkerAction.Toggle:
                 if (v >= 2) {

src/mol-model/structure/structure/element.ts

@@ -125,7 +125,6 @@ namespace StructureElement {
         }
 
         export function union(xs: Loci, ys: Loci): Loci {
-            if (xs.structure !== ys.structure) throw new Error(`Can't union Loci of different structures.`);
             if (xs.elements.length > ys.elements.length) return union(ys, xs);
             if (xs.elements.length === 0) return ys;
 
@@ -146,8 +145,6 @@ namespace StructureElement {
         }
 
         export function subtract(xs: Loci, ys: Loci): Loci {
-            if (xs.structure !== ys.structure) throw new Error(`Can't subtract Loci of different structures.`);
-
             const map = new Map<number, OrderedSet<UnitIndex>>();
             for (const e of ys.elements) map.set(e.unit.id, e.indices);
 
@@ -162,7 +159,22 @@ namespace StructureElement {
                 }
             }
 
-            return xs;
+            return Loci(xs.structure, elements);
+        }
+
+        export function areIntersecting(xs: Loci, ys: Loci): boolean {
+            if (xs.elements.length > ys.elements.length) return areIntersecting(ys, xs);
+            if (xs.elements.length === 0) return ys.elements.length === 0;
+
+            const map = new Map<number, OrderedSet<UnitIndex>>();
+
+            for (const e of xs.elements) map.set(e.unit.id, e.indices);
+            for (const e of ys.elements) {
+                if (!map.has(e.unit.id)) continue;
+                if (OrderedSet.areIntersecting(map.get(e.unit.id)!, e.indices)) return true;
+            }
+
+            return false;
         }
     }
 }

src/mol-plugin/behavior/dynamic/camera.ts

@@ -7,15 +7,17 @@
 import { Loci } from 'mol-model/loci';
 import { ParamDefinition } from 'mol-util/param-definition';
 import { PluginBehavior } from '../behavior';
+import { ButtonsType, ModifiersKeys } from 'mol-util/input/input-observer';
 
 export const FocusLociOnSelect = PluginBehavior.create<{ minRadius: number, extraRadius: number }>({
     name: 'focus-loci-on-select',
     category: 'interaction',
     ctor: class extends PluginBehavior.Handler<{ minRadius: number, extraRadius: number }> {
         register(): void {
-            this.subscribeObservable(this.ctx.events.canvas3d.click, current => {
-                if (!this.ctx.canvas3d) return;
-                const sphere = Loci.getBoundingSphere(current.loci.loci);
+            this.subscribeObservable(this.ctx.events.canvas3d.click, ({ current, buttons, modifiers }) => {
+                if (!this.ctx.canvas3d || buttons !== ButtonsType.Flag.Primary || !ModifiersKeys.areEqual(modifiers, ModifiersKeys.None)) return;
+
+                const sphere = Loci.getBoundingSphere(current.loci);
                 if (!sphere) return;
                 this.ctx.canvas3d.camera.focus(sphere.center, Math.max(sphere.radius + this.params.extraRadius, this.params.minRadius));
             });

src/mol-plugin/behavior/dynamic/representation.ts

@@ -15,6 +15,8 @@ import { labelFirst } from 'mol-theme/label';
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 import { PluginBehavior } from '../behavior';
 import { Representation } from 'mol-repr/representation';
+import { ButtonsType } from 'mol-util/input/input-observer';
+import { StructureElement } from 'mol-model/structure';
 
 export const HighlightLoci = PluginBehavior.create({
     name: 'representation-highlight-loci',
@@ -22,15 +24,29 @@ export const HighlightLoci = PluginBehavior.create({
     ctor: class extends PluginBehavior.Handler {
         register(): void {
             let prev: Representation.Loci = { loci: EmptyLoci, repr: void 0 };
+            const sel = this.ctx.selection.structure;
 
-            this.subscribeObservable(this.ctx.events.canvas3d.highlight, ({ loci }) => {
+            this.subscribeObservable(this.ctx.events.canvas3d.highlight, ({ current, modifiers }) => {
                 if (!this.ctx.canvas3d) return;
 
-                if (!Representation.Loci.areEqual(prev, loci)) {
+                if (StructureElement.isLoci(current.loci)) {
+                    let loci: StructureElement.Loci = current.loci;
+                    if (modifiers && modifiers.shift) {
+                        loci = sel.tryGetRange(loci) || loci;
+                    }
+
                     this.ctx.canvas3d.mark(prev, MarkerAction.RemoveHighlight);
-                    this.ctx.canvas3d.mark(loci, MarkerAction.Highlight);
-                    prev = loci;
+                    const toHighlight = { loci, repr: current.repr };
+                    this.ctx.canvas3d.mark(toHighlight, MarkerAction.Highlight);
+                    prev = toHighlight;
+                } else {
+                    if (!Representation.Loci.areEqual(prev, current)) {
+                        this.ctx.canvas3d.mark(prev, MarkerAction.RemoveHighlight);
+                        this.ctx.canvas3d.mark(current, MarkerAction.Highlight);
+                        prev = current;
+                    }
                 }
+
             });
         }
     },
@@ -42,17 +58,43 @@ export const SelectLoci = PluginBehavior.create({
     category: 'interaction',
     ctor: class extends PluginBehavior.Handler {
         register(): void {
-            let prev = Representation.Loci.Empty;
-            this.subscribeObservable(this.ctx.events.canvas3d.click, ({ loci: current }) => {
-                if (!this.ctx.canvas3d) return;
-                if (!Representation.Loci.areEqual(prev, current)) {
-                    this.ctx.canvas3d.mark(prev, MarkerAction.Deselect);
+            const sel = this.ctx.selection.structure;
+
+            const toggleSel = (current: Representation.Loci<StructureElement.Loci>) => {
+                if (sel.has(current.loci)) {
+                    sel.remove(current.loci);
+                    this.ctx.canvas3d.mark(current, MarkerAction.Deselect);
+                } else {
+                    sel.add(current.loci);
                     this.ctx.canvas3d.mark(current, MarkerAction.Select);
-                    prev = current;
+                }
+            }
+
+            this.subscribeObservable(this.ctx.events.canvas3d.click, ({ current, buttons, modifiers }) => {
+                if (!this.ctx.canvas3d) return;
+
+                if (StructureElement.isLoci(current.loci)) {
+                    if (modifiers.control && buttons === ButtonsType.Flag.Secondary) {
+                        // select only the current element on Ctrl + Right-Click
+                        const old = sel.get(current.loci.structure);
+                        this.ctx.canvas3d.mark({ loci: old }, MarkerAction.Deselect);
+                        sel.set(current.loci);
+                        this.ctx.canvas3d.mark(current, MarkerAction.Select);
+                    } else if (modifiers.control && buttons === ButtonsType.Flag.Primary) {
+                        // toggle current element on Ctrl + Left-Click
+                        toggleSel(current as Representation.Loci<StructureElement.Loci>);
+                    } else if (modifiers.shift && buttons === ButtonsType.Flag.Primary) {
+                        // try to extend sequence on Shift + Left-Click
+                        let loci: StructureElement.Loci = current.loci;
+                        if (modifiers && modifiers.shift) {
+                            loci = sel.tryGetRange(loci) || loci;
+                        }
+                        toggleSel({ loci, repr: current.repr });
+                    }
                 } else {
+                    if (!ButtonsType.has(buttons, ButtonsType.Flag.Secondary)) return;
                     this.ctx.canvas3d.mark(current, MarkerAction.Toggle);
                 }
-                // this.ctx.canvas3d.mark(loci, MarkerAction.Toggle);
             });
         }
     },

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

@@ -8,9 +8,7 @@ import { PluginCommands } from '../../command';
 import { PluginContext } from '../../context';
 import { StateTree, StateTransform, State } from 'mol-state';
 import { PluginStateSnapshotManager } from 'mol-plugin/state/snapshots';
-import { PluginStateObject as SO, PluginStateObject } from '../../state/objects';
-import { EmptyLoci, EveryLoci } from 'mol-model/loci';
-import { Structure } from 'mol-model/structure';
+import { PluginStateObject as SO } from '../../state/objects';
 import { getFormattedTime } from 'mol-util/date';
 import { readFromFile } from 'mol-util/data-source';
 
@@ -104,19 +102,19 @@ function setVisibilityVisitor(t: StateTransform, tree: StateTree, ctx: { state:
 // TODO should also work for volumes and shapes
 export function Highlight(ctx: PluginContext) {
     PluginCommands.State.Highlight.subscribe(ctx, ({ state, ref }) => {
-        const cell = state.select(ref)[0]
-        const repr = cell && SO.isRepresentation3D(cell.obj) ? cell.obj.data : undefined
-        if (cell && cell.obj && cell.obj.type === PluginStateObject.Molecule.Structure.type) {
-            ctx.events.canvas3d.highlight.next({ loci: { loci: Structure.Loci(cell.obj.data) } });
-        } else if (repr) {
-            ctx.events.canvas3d.highlight.next({ loci: { loci: EveryLoci, repr } });
-        }
+        // const cell = state.select(ref)[0]
+        // const repr = cell && SO.isRepresentation3D(cell.obj) ? cell.obj.data : undefined
+        // if (cell && cell.obj && cell.obj.type === PluginStateObject.Molecule.Structure.type) {
+        //     ctx.events.canvas3d.highlight.next({ current: { loci: Structure.Loci(cell.obj.data) } });
+        // } else if (repr) {
+        //     ctx.events.canvas3d.highlight.next({ current: { loci: EveryLoci, repr } });
+        // }
     });
 }
 
 export function ClearHighlight(ctx: PluginContext) {
     PluginCommands.State.ClearHighlight.subscribe(ctx, ({ state, ref }) => {
-        ctx.events.canvas3d.highlight.next({ loci: { loci: EmptyLoci } });
+        // ctx.events.canvas3d.highlight.next({ current: { loci: EmptyLoci } });
     });
 }
 

src/mol-plugin/command.ts

@@ -41,9 +41,8 @@ export const PluginCommands = {
     },
     Interactivity: {
         Structure: {
-            AddHighlight: PluginCommand<{ loci: StructureElement.Loci, tryRange?: boolean }>({ isImmediate: true }),
-            ClearHighlight: PluginCommand<{ }>({ isImmediate: true }),
-            SelectHighlighted: PluginCommand<{ type: 'toggle' | 'add' }>({ isImmediate: true })
+            Highlight: PluginCommand<{ loci: StructureElement.Loci, isOff?: boolean }>({ isImmediate: true }),
+            Select: PluginCommand<{ loci: StructureElement.Loci, isOff?: boolean }>({ isImmediate: true })
         }
     },
     Layout: {

src/mol-plugin/context.ts

@@ -4,34 +4,33 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
+import { List } from 'immutable';
 import { Canvas3D } from 'mol-canvas3d/canvas3d';
-import { Representation } from 'mol-repr/representation';
+import { CustomPropertyRegistry } from 'mol-model-props/common/custom-property-registry';
 import { StructureRepresentationRegistry } from 'mol-repr/structure/registry';
+import { VolumeRepresentationRegistry } from 'mol-repr/volume/registry';
 import { State, StateTransform, StateTransformer } from 'mol-state';
 import { Task } from 'mol-task';
 import { ColorTheme } from 'mol-theme/color';
 import { SizeTheme } from 'mol-theme/size';
 import { ThemeRegistryContext } from 'mol-theme/theme';
+import { Color } from 'mol-util/color';
+import { ajaxGet } from 'mol-util/data-source';
 import { LogEntry } from 'mol-util/log-entry';
 import { RxEventHelper } from 'mol-util/rx-event-helper';
 import { merge } from 'rxjs';
 import { BuiltInPluginBehaviors } from './behavior';
+import { PluginBehavior } from './behavior/behavior';
 import { PluginCommand, PluginCommands } from './command';
+import { PluginLayout } from './layout';
 import { PluginSpec } from './spec';
 import { PluginState } from './state';
-import { TaskManager } from './util/task-manager';
-import { Color } from 'mol-util/color';
+import { DataFormatRegistry } from './state/actions/data-format';
+import { StateTransformParameters } from './ui/state/common';
 import { LociLabelEntry, LociLabelManager } from './util/loci-label-manager';
-import { ajaxGet } from 'mol-util/data-source';
-import { VolumeRepresentationRegistry } from 'mol-repr/volume/registry';
+import { TaskManager } from './util/task-manager';
 import { PLUGIN_VERSION, PLUGIN_VERSION_DATE } from './version';
-import { PluginLayout } from './layout';
-import { List } from 'immutable';
-import { StateTransformParameters } from './ui/state/common';
-import { DataFormatRegistry } from './state/actions/data-format';
-import { PluginBehavior } from './behavior/behavior';
-import { CustomPropertyRegistry } from 'mol-model-props/common/custom-property-registry';
-import { ModifiersKeys, ButtonsType } from 'mol-util/input/input-observer';
+import { StructureElementSelectionManager } from './util/structure-element-selection';
 
 export class PluginContext {
     private disposed = false;
@@ -61,8 +60,8 @@ export class PluginContext {
         canvas3d: {
             settingsUpdated: this.ev(),
 
-            highlight: this.ev<{ loci: Representation.Loci, modifiers?: ModifiersKeys }>(),
-            click: this.ev<{ loci: Representation.Loci, buttons?: ButtonsType, modifiers?: ModifiersKeys }>(),
+            highlight: this.ev<Canvas3D.HighlightEvent>(),
+            click: this.ev<Canvas3D.ClickEvent>()
         }
     };
 
@@ -100,6 +99,10 @@ export class PluginContext {
     readonly customModelProperties = new CustomPropertyRegistry();
     readonly customParamEditors = new Map<string, StateTransformParameters.Class>();
 
+    readonly selection = {
+        structure: new StructureElementSelectionManager(this)
+    };
+
     initViewer(canvas: HTMLCanvasElement, container: HTMLDivElement) {
         try {
             this.layout.setRoot(container);

src/mol-plugin/ui/viewport.tsx

@@ -6,8 +6,6 @@
  */
 
 import * as React from 'react';
-import { ButtonsType } from 'mol-util/input/input-observer';
-import { Canvas3dIdentifyHelper } from 'mol-plugin/util/canvas3d-identify';
 import { PluginUIComponent } from './base';
 import { PluginCommands } from 'mol-plugin/command';
 import { ParamDefinition as PD } from 'mol-util/param-definition';
@@ -112,22 +110,8 @@ export class Viewport extends PluginUIComponent<{ }, ViewportState> {
         const canvas3d = this.plugin.canvas3d;
         this.subscribe(canvas3d.input.resize, this.handleResize);
 
-        const idHelper = new Canvas3dIdentifyHelper(this.plugin, 15);
-
-        this.subscribe(canvas3d.input.move, ({x, y, inside, buttons, modifiers }) => {
-            if (!inside || buttons) { return; }
-            idHelper.move(x, y, modifiers);
-        });
-
-        this.subscribe(canvas3d.input.leave, () => {
-            idHelper.leave();
-        });
-
-        this.subscribe(canvas3d.input.click, ({x, y, buttons, modifiers }) => {
-            if (buttons !== ButtonsType.Flag.Primary) return;
-            idHelper.select(x, y, buttons, modifiers);
-        });
-
+        this.subscribe(canvas3d.interaction.click, e => this.plugin.events.canvas3d.click.next(e));
+        this.subscribe(canvas3d.interaction.highlight, e => this.plugin.events.canvas3d.highlight.next(e));
         this.subscribe(this.plugin.layout.events.updated, () => {
             setTimeout(this.handleResize, 50);
         });

src/mol-plugin/util/canvas3d-identify.ts

@@ -1,94 +0,0 @@
-/**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author David Sehnal <david.sehnal@gmail.com>
- */
-
-import { PluginContext } from '../context';
-import { PickingId } from 'mol-geo/geometry/picking';
-import { EmptyLoci } from 'mol-model/loci';
-import { Representation } from 'mol-repr/representation';
-import { ModifiersKeys, ButtonsType } from 'mol-util/input/input-observer';
-
-export class Canvas3dIdentifyHelper {
-    private cX = -1;
-    private cY = -1;
-
-    private lastX = -1;
-    private lastY = -1;
-
-    private id: PickingId | undefined = void 0;
-
-    private currentIdentifyT = 0;
-
-    private prevLoci: Representation.Loci = Representation.Loci.Empty;
-    private prevT = 0;
-
-    private inside = false;
-
-    private buttons: ButtonsType = ButtonsType.create(0);
-    private modifiers: ModifiersKeys = ModifiersKeys.None;
-
-    private async identify(isClick: boolean, t: number) {
-        if (this.lastX !== this.cX && this.lastY !== this.cY) {
-            this.id = await this.ctx.canvas3d.identify(this.cX, this.cY);
-            this.lastX = this.cX;
-            this.lastY = this.cY;
-        }
-
-        if (!this.id) return;
-
-        if (isClick) {
-            this.ctx.events.canvas3d.click.next({ loci: this.ctx.canvas3d.getLoci(this.id), buttons: this.buttons, modifiers: this.modifiers });
-            return;
-        }
-
-        // only highlight the latest
-        if (!this.inside || this.currentIdentifyT !== t) {
-            return;
-        }
-
-        const loci = this.ctx.canvas3d.getLoci(this.id);
-        if (!Representation.Loci.areEqual(this.prevLoci, loci)) {
-            this.ctx.events.canvas3d.highlight.next({ loci, modifiers: this.modifiers });
-            this.prevLoci = loci;
-        }
-    }
-
-    private animate: (t: number) => void = t => {
-        if (!this.ctx.state.animation.isAnimating && this.inside && t - this.prevT > 1000 / this.maxFps) {
-            this.prevT = t;
-            this.currentIdentifyT = t;
-            this.identify(false, t);
-        }
-        requestAnimationFrame(this.animate);
-    }
-
-    leave() {
-        this.inside = false;
-        if (this.prevLoci.loci !== EmptyLoci) {
-            this.prevLoci = Representation.Loci.Empty;
-            this.ctx.events.canvas3d.highlight.next({ loci: this.prevLoci });
-            this.ctx.canvas3d.requestDraw(true);
-        }
-    }
-
-    move(x: number, y: number, modifiers: ModifiersKeys) {
-        this.inside = true;
-        this.modifiers = modifiers;
-        this.cX = x;
-        this.cY = y;
-    }
-
-    select(x: number, y: number, buttons: ButtonsType, modifiers: ModifiersKeys) {
-        this.cX = x;
-        this.cY = y;
-        this.buttons = buttons;
-        this.modifiers = modifiers;
-        this.identify(true, 0);
-    }
-
-    constructor(private ctx: PluginContext, private maxFps: number = 15) {
-        this.animate(0);
-    }
-}

src/mol-plugin/util/loci-label-manager.ts

@@ -35,6 +35,6 @@ export class LociLabelManager {
     }
 
     constructor(public ctx: PluginContext) {
-        ctx.events.canvas3d.highlight.subscribe(ev => ctx.behaviors.labels.highlight.next({ entries: this.getInfo(ev.loci) }));
+        ctx.events.canvas3d.highlight.subscribe(ev => ctx.behaviors.labels.highlight.next({ entries: this.getInfo(ev.current) }));
     }
 }

src/mol-plugin/util/selection/structure-loci.ts → src/mol-plugin/util/structure-element-selection.ts

@@ -4,16 +4,16 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { StructureElement, Structure } from 'mol-model/structure';
-import { PluginContext } from '../../context';
-import { Loci, EmptyLoci } from 'mol-model/loci';
-import { PluginStateObject } from 'mol-plugin/state/objects';
-import { State, StateSelection, StateObject } from 'mol-state';
-import { mapObjectMap } from 'mol-util/object';
+import { EmptyLoci, Loci } from 'mol-model/loci';
+import { Structure, StructureElement } from 'mol-model/structure';
+import { State, StateObject, StateSelection } from 'mol-state';
+import { PluginContext } from '../context';
+import { PluginStateObject } from '../state/objects';
+import { OrderedSet } from 'mol-data/int';
 
-export { StructureLociManager }
+export { StructureElementSelectionManager };
 
-class StructureLociManager {
+class StructureElementSelectionManager {
     private entries = new Map<string, SelectionEntry>();
 
     // maps structure to a parent StateObjectCell
@@ -34,28 +34,65 @@ class StructureLociManager {
         return this.entries.get(key)!;
     }
 
-    add(loci: StructureElement.Loci | Structure.Loci, type: 'selection' | 'highlight'): Loci {
+    add(loci: StructureElement.Loci): Loci {
         const entry = this.getEntry(loci.structure);
         if (!entry) return EmptyLoci;
-        const xs = entry.elements;
-        xs[type] = Structure.isLoci(loci) ? StructureElement.Loci.all(loci.structure) : StructureElement.Loci.union(xs[type], loci);
-        return xs[type];
+        entry.selection = StructureElement.Loci.union(entry.selection, loci);
+        return entry.selection;
     }
 
-    remove(loci: StructureElement.Loci | Structure.Loci, type: 'selection' | 'highlight'): Loci {
+    remove(loci: StructureElement.Loci): Loci {
         const entry = this.getEntry(loci.structure);
         if (!entry) return EmptyLoci;
-        const xs = entry.elements;
-        xs[type] = Structure.isLoci(loci) ? StructureElement.Loci(loci.structure, []) : StructureElement.Loci.subtract(xs[type], loci);
-        return xs[type].elements.length === 0 ? EmptyLoci : xs[type];
+        entry.selection = StructureElement.Loci.subtract(entry.selection, loci);
+        return entry.selection.elements.length === 0 ? EmptyLoci : entry.selection;
     }
 
-    set(loci: StructureElement.Loci | Structure.Loci, type: 'selection' | 'highlight'): Loci {
+    set(loci: StructureElement.Loci): Loci {
         const entry = this.getEntry(loci.structure);
         if (!entry) return EmptyLoci;
-        const xs = entry.elements;
-        xs[type] = Structure.isLoci(loci) ? StructureElement.Loci.all(loci.structure) : loci;
-        return xs[type].elements.length === 0 ? EmptyLoci : xs[type];
+        entry.selection = loci;
+        return entry.selection.elements.length === 0 ? EmptyLoci : entry.selection;
+    }
+
+    get(structure: Structure) {
+        const entry = this.getEntry(structure);
+        if (!entry) return EmptyLoci;
+        return entry.selection;
+    }
+
+    has(loci: StructureElement.Loci) {
+        const entry = this.getEntry(loci.structure);
+        if (!entry) return false;
+        return StructureElement.Loci.areIntersecting(loci, entry.selection);
+    }
+
+    tryGetRange(loci: StructureElement.Loci): StructureElement.Loci | undefined {
+        if (loci.elements.length !== 1) return;
+        const entry = this.getEntry(loci.structure);
+        if (!entry) return;
+
+        let xs = loci.elements[0];
+        let e: StructureElement.Loci['elements'][0] | undefined;
+        for (const _e of entry.selection.elements) {
+            if (xs.unit === _e.unit) {
+                e = _e;
+                break;
+            }
+        }
+        if (!e) return;
+
+        const predIdx = OrderedSet.findPredecessorIndex(e.indices, OrderedSet.min(xs.indices));
+        if (predIdx === 0) return;
+
+        const fst = predIdx < OrderedSet.size(e.indices)
+            ? OrderedSet.getAt(e.indices, predIdx)
+            : OrderedSet.getAt(e.indices, predIdx - 1) + 1 as StructureElement.UnitIndex;
+
+        return StructureElement.Loci(entry.selection.structure, [{
+            unit: e.unit,
+            indices: OrderedSet.ofRange(fst, OrderedSet.max(xs.indices))
+        }]);
     }
 
     private prevHighlight: StructureElement.Loci | undefined = void 0;
@@ -131,17 +168,17 @@ class StructureLociManager {
 }
 
 interface SelectionEntry {
-    elements: { [category: string]: StructureElement.Loci }
+    selection: StructureElement.Loci
 }
 
 function SelectionEntry(s: Structure): SelectionEntry {
     return {
-        elements: { }
+        selection: StructureElement.Loci(s, [])
     };
 }
 
 function remapSelectionEntry(e: SelectionEntry, s: Structure): SelectionEntry {
     return {
-        elements: mapObjectMap(e.elements, (l: StructureElement.Loci) => StructureElement.Loci.remap(l, s))
+        selection: StructureElement.Loci.remap(e.selection, s)
     };
 }

src/mol-repr/representation.ts

@@ -107,7 +107,7 @@ interface Representation<D, P extends PD.Params = {}, S extends Representation.S
     destroy: () => void
 }
 namespace Representation {
-    export interface Loci { loci: ModelLoci, repr?: Representation.Any }
+    export interface Loci<T extends ModelLoci = ModelLoci> { loci: T, repr?: Representation.Any }
 
     export namespace Loci {
         export function areEqual(a: Loci, b: Loci) {

src/mol-util/input/input-observer.ts

@@ -4,7 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Subject } from 'rxjs';
+import { Subject, Observable } from 'rxjs';
 
 import { Vec2 } from 'mol-math/linear-algebra';
 
@@ -50,13 +50,17 @@ export type ModifiersKeys = {
     meta: boolean
 }
 export namespace ModifiersKeys {
-    export const None: ModifiersKeys = { shift: false, alt: false, control: false, meta: false }
+    export const None: ModifiersKeys = { shift: false, alt: false, control: false, meta: false };
+
+    export function areEqual(a: ModifiersKeys, b: ModifiersKeys) {
+        return a.shift === b.shift && a.alt === b.alt && a.control === b.control && a.meta === b.meta;
+    }
 }
 
 export type ButtonsType = BitFlags<ButtonsType.Flag>
 
 export namespace ButtonsType {
-    export const has: (ss: ButtonsType, f: Flag) => boolean = BitFlags.has
+    export const has: (btn: ButtonsType, f: Flag) => boolean = BitFlags.has
     export const create: (fs: Flag) => ButtonsType = BitFlags.create
 
     export const enum Flag {
@@ -138,16 +142,17 @@ interface InputObserver {
     noScroll: boolean
     noContextMenu: boolean
 
-    drag: Subject<DragInput>,
+    drag: Observable<DragInput>,
     // Equivalent to mouseUp and touchEnd
-    interactionEnd: Subject<undefined>,
-    wheel: Subject<WheelInput>,
-    pinch: Subject<PinchInput>,
-    click: Subject<ClickInput>,
-    move: Subject<MoveInput>,
-    leave: Subject<undefined>,
-    enter: Subject<undefined>,
-    resize: Subject<ResizeInput>,
+    interactionEnd: Observable<undefined>,
+    wheel: Observable<WheelInput>,
+    pinch: Observable<PinchInput>,
+    click: Observable<ClickInput>,
+    move: Observable<MoveInput>,
+    leave: Observable<undefined>,
+    enter: Observable<undefined>,
+    resize: Observable<ResizeInput>,
+    modifiers: Observable<ModifiersKeys>
 
     dispose: () => void
 }
@@ -176,6 +181,7 @@ namespace InputObserver {
         let dragging: DraggingState = DraggingState.Stopped
         let disposed = false
         let buttons = 0 as ButtonsType
+        let isInside = false
 
         const drag = new Subject<DragInput>()
         const interactionEnd = new Subject<undefined>();
@@ -186,6 +192,7 @@ namespace InputObserver {
         const resize = new Subject<ResizeInput>()
         const leave = new Subject<undefined>()
         const enter = new Subject<undefined>()
+        const modifiersEvent = new Subject<ModifiersKeys>()
 
         attach()
 
@@ -204,6 +211,7 @@ namespace InputObserver {
             leave,
             enter,
             resize,
+            modifiers: modifiersEvent,
 
             dispose
         }
@@ -226,9 +234,8 @@ namespace InputObserver {
             element.addEventListener('touchend', onTouchEnd as any, false)
 
             element.addEventListener('blur', handleBlur)
-            element.addEventListener('keyup', handleMods as EventListener)
-            element.addEventListener('keydown', handleMods as EventListener)
-            element.addEventListener('keypress', handleMods as EventListener)
+            window.addEventListener('keyup', handleKeyUp as EventListener, false)
+            window.addEventListener('keydown', handleKeyDown as EventListener, false)
 
             window.addEventListener('resize', onResize, false)
         }
@@ -252,9 +259,8 @@ namespace InputObserver {
             element.removeEventListener('touchend', onTouchEnd as any, false)
 
             element.removeEventListener('blur', handleBlur)
-            element.removeEventListener('keyup', handleMods as EventListener)
-            element.removeEventListener('keydown', handleMods as EventListener)
-            element.removeEventListener('keypress', handleMods as EventListener)
+            window.removeEventListener('keyup', handleKeyUp as EventListener, false)
+            window.removeEventListener('keydown', handleKeyDown as EventListener, false)
 
             window.removeEventListener('resize', onResize, false)
         }
@@ -272,11 +278,25 @@ namespace InputObserver {
             }
         }
 
-        function handleMods (event: MouseEvent | KeyboardEvent) {
-            if ('altKey' in event) modifiers.alt = !!event.altKey
-            if ('shiftKey' in event) modifiers.shift = !!event.shiftKey
-            if ('ctrlKey' in event) modifiers.control = !!event.ctrlKey
-            if ('metaKey' in event) modifiers.meta = !!event.metaKey
+        function handleKeyDown (event: KeyboardEvent) {
+            let changed = false;
+            if (!modifiers.alt && event.altKey) { changed = true; modifiers.alt = true; }
+            if (!modifiers.shift && event.shiftKey) { changed = true; modifiers.shift = true; }
+            if (!modifiers.control && event.ctrlKey) { changed = true; modifiers.control = true; }
+            if (!modifiers.meta && event.metaKey) { changed = true; modifiers.meta = true; }
+
+            if (changed && isInside) modifiersEvent.next(getModifiers());
+        }
+
+        function handleKeyUp (event: KeyboardEvent) {
+            let changed = false;
+
+            if (modifiers.alt && !event.altKey) { changed = true; modifiers.alt = false; }
+            if (modifiers.shift && !event.shiftKey) { changed = true; modifiers.shift = false; }
+            if (modifiers.control && !event.ctrlKey) { changed = true; modifiers.control = false; }
+            if (modifiers.meta && !event.metaKey) { changed = true; modifiers.meta = false; }
+
+            if (changed && isInside) modifiersEvent.next(getModifiers());
         }
 
         function getCenterTouch (ev: TouchEvent): PointerEvent {
@@ -413,10 +433,12 @@ namespace InputObserver {
         }
 
         function onMouseEnter (ev: Event) {
+            isInside = true;
             enter.next();
         }
 
         function onMouseLeave (ev: Event) {
+            isInside = false;
             leave.next();
         }