include repr in canvas3d.getLoci return value

src/apps/canvas/component/viewport.tsx

@@ -70,7 +70,7 @@ export class Viewport extends React.Component<ViewportProps, ViewportState> {
             const p = await canvas3d.identify(x, y)
             --highlightQueueLength
             if (p) {
-                const loci = canvas3d.getLoci(p)
+                const { loci } = canvas3d.getLoci(p)
 
                 if (!areLociEqual(loci, prevHighlightLoci)) {
                     canvas3d.mark(prevHighlightLoci, MarkerAction.RemoveHighlight)
@@ -88,7 +88,7 @@ export class Viewport extends React.Component<ViewportProps, ViewportState> {
             if (buttons !== ButtonsType.Flag.Primary) return
             const p = await canvas3d.identify(x, y)
             if (p) {
-                const loci = canvas3d.getLoci(p)
+                const { loci } = canvas3d.getLoci(p)
                 canvas3d.mark(loci, MarkerAction.Toggle)
             }
         })

src/mol-canvas3d/canvas3d.ts

@@ -52,7 +52,7 @@ interface Canvas3D {
     pick: () => void
     identify: (x: number, y: number) => Promise<PickingId | undefined>
     mark: (loci: Loci, action: MarkerAction) => void
-    getLoci: (pickingId: PickingId) => Loci
+    getLoci: (pickingId: PickingId) => { loci: Loci, repr?: Representation<any> }
 
     readonly reprCount: BehaviorSubject<number>
     readonly identified: BehaviorSubject<string>
@@ -122,14 +122,16 @@ namespace Canvas3D {
 
         function getLoci(pickingId: PickingId) {
             let loci: Loci = EmptyLoci
-            reprMap.forEach((_, repr) => {
-                const _loci = repr.getLoci(pickingId)
+            let repr: Representation.Any = Representation.Empty
+            reprMap.forEach((_, _repr) => {
+                const _loci = _repr.getLoci(pickingId)
                 if (!isEmptyLoci(_loci)) {
                     if (!isEmptyLoci(loci)) console.warn('found another loci')
                     loci = _loci
+                    repr = _repr
                 }
             })
-            return loci
+            return { loci, repr }
         }
 
         function mark(loci: Loci, action: MarkerAction) {

src/mol-plugin/ui/viewport.tsx

@@ -9,6 +9,7 @@ import * as React from 'react';
 import { PluginContext } from '../context';
 import { Loci, EmptyLoci, areLociEqual } from 'mol-model/loci';
 import { MarkerAction } from 'mol-geo/geometry/marker-data';
+import { ButtonsType } from 'mol-util/input/input-observer';
 
 interface ViewportProps {
     plugin: PluginContext
@@ -36,23 +37,32 @@ export class Viewport extends React.Component<ViewportProps, ViewportState> {
         }
         this.handleResize();
 
-        const viewer = this.props.plugin.canvas3d;
-        viewer.input.resize.subscribe(() => this.handleResize());
+        const canvas3d = this.props.plugin.canvas3d;
+        canvas3d.input.resize.subscribe(() => this.handleResize());
 
         let prevLoci: Loci = EmptyLoci;
-        viewer.input.move.subscribe(async ({x, y, inside, buttons}) => {
+        canvas3d.input.move.subscribe(async ({x, y, inside, buttons}) => {
             if (!inside || buttons) return;
-            const p = await viewer.identify(x, y);
+            const p = await canvas3d.identify(x, y);
             if (p) {
-                const loci = viewer.getLoci(p);
+                const { loci } = canvas3d.getLoci(p);
 
                 if (!areLociEqual(loci, prevLoci)) {
-                    viewer.mark(prevLoci, MarkerAction.RemoveHighlight);
-                    viewer.mark(loci, MarkerAction.Highlight);
+                    canvas3d.mark(prevLoci, MarkerAction.RemoveHighlight);
+                    canvas3d.mark(loci, MarkerAction.Highlight);
                     prevLoci = loci;
                 }
             }
         })
+
+        canvas3d.input.click.subscribe(async ({x, y, buttons}) => {
+            if (buttons !== ButtonsType.Flag.Primary) return
+            const p = await canvas3d.identify(x, y)
+            if (p) {
+                const { loci } = canvas3d.getLoci(p)
+                canvas3d.mark(loci, MarkerAction.Toggle)
+            }
+        })
     }
 
     componentWillUnmount() {

src/mol-repr/index.ts

@@ -36,6 +36,15 @@ export interface Representation<D, P extends RepresentationProps = {}> {
 }
 
 export namespace Representation {
+    export type Any = Representation<any>
+    export const Empty: Representation<undefined> = {
+        label: '', params: {}, renderObjects: [], props: {},
+        createOrUpdate: () => Task.constant('', undefined),
+        getLoci: () => EmptyLoci,
+        mark: () => false,
+        destroy: () => {}
+    }
+
     export function createMulti<D, P extends RepresentationProps = {}>(label: string, params: PD.Params, defaultProps: P, reprList: Representation<D, P>[]): Representation<D, P> {
         let currentProps: P
         let currentData: D