only dispatch hover event on changes

- camera, input changes
- better handle empty picking ids

src/mol-canvas3d/canvas3d.ts

@@ -84,7 +84,7 @@ interface Canvas3D {
     animate(): void
     identify(x: number, y: number): PickingId | undefined
     mark(loci: Representation.Loci, action: MarkerAction): void
-    getLoci(pickingId: PickingId): Representation.Loci
+    getLoci(pickingId: PickingId | undefined): Representation.Loci
 
     readonly didDraw: BehaviorSubject<now.Timestamp>
     readonly reprCount: BehaviorSubject<number>
@@ -203,9 +203,10 @@ namespace Canvas3D {
         let nextCameraResetDuration: number | undefined = void 0;
         let nextCameraResetSnapshot: Partial<Camera.Snapshot> | undefined = void 0;
 
-        function getLoci(pickingId: PickingId) {
+        function getLoci(pickingId: PickingId | undefined) {
             let loci: Loci = EmptyLoci;
             let repr: Representation.Any = Representation.Empty;
+            if (pickingId) {
             loci = handleHelper.getLoci(pickingId);
             reprRenderObjects.forEach((_, _repr) => {
                 const _loci = _repr.getLoci(pickingId);
@@ -217,6 +218,7 @@ namespace Canvas3D {
                     repr = _repr;
                 }
             });
+            }
             return { loci, repr };
         }
 

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

@@ -65,11 +65,6 @@ export class Canvas3dInteractionHelper {
             this.startY = this.endY;
         }
 
-        if (!this.id) {
-            this.prevLoci = Representation.Loci.Empty;
-            return;
-        }
-
         if (e === InputEvent.Click) {
             const loci = this.getLoci(this.id);
             this.events.click.next({ current: loci, buttons: this.buttons, button: this.button, modifiers: this.modifiers });
@@ -77,7 +72,7 @@ export class Canvas3dInteractionHelper {
             return;
         }
 
-        if (!this.inside || this.currentIdentifyT !== t) {
+        if (!this.inside || this.currentIdentifyT !== t || !xyChanged) {
             return;
         }
 
@@ -170,6 +165,9 @@ export class Canvas3dInteractionHelper {
             this.isInteracting = false;
         });
 
-        input.modifiers.subscribe(modifiers => this.modify(modifiers));
+        input.modifiers.subscribe(modifiers => {
+            // console.log('modifiers');
+            this.modify(modifiers);
+        });
     }
 }

src/mol-canvas3d/passes/pick.ts

@@ -13,6 +13,8 @@ import { decodeFloatRGB } from '../../mol-util/float-packing';
 import { Camera } from '../camera';
 import { HandleHelper } from '../helper/handle-helper';
 
+const NullId = Math.pow(2, 24) - 2;
+
 export class PickPass {
     pickDirty = true
 
@@ -118,13 +120,13 @@ export class PickPass {
         const yp = Math.round(y * pickScale);
 
         const objectId = this.getId(xp, yp, this.objectBuffer);
-        if (objectId === -1) return;
+        if (objectId === -1 || objectId === NullId) return;
 
         const instanceId = this.getId(xp, yp, this.instanceBuffer);
-        if (instanceId === -1) return;
+        if (instanceId === -1 || instanceId === NullId) return;
 
         const groupId = this.getId(xp, yp, this.groupBuffer);
-        if (groupId === -1) return;
+        if (groupId === -1 || groupId === NullId) return;
 
         return { objectId, instanceId, groupId };
     }