Reset picking shapes before frame rebuilds

src/GLModel.ts

@@ -20,6 +20,7 @@ import { ArrowSpec } from "GLShape";
 import { ParserOptionsSpec } from "./parsers/ParserOptionsSpec";
 import { LabelSpec } from "Label";
 import { assignBonds } from "./parsers/utils/assignBonds";
+import { resetIntersectionShapes } from "./intersectionShapes";
 
 /**
  * GLModel represents a group of related atoms
@@ -1666,6 +1667,9 @@ export class GLModel {
         for (let ai = 0; ai < atoms.length; ai++) this._coordIndex.set(atoms[ai], ai);
         this._coordAtomCount = atoms.length;
 
+        // Picking shapes are stored on atoms, so clear stale frame geometry before rebuilding.
+        resetIntersectionShapes(atoms);
+
         var ret = new Object3D();
         var cartoonAtoms = [];
         var lineGeometries: Record<number, Geometry> = {};

src/intersectionShapes.d.ts

@@ -0,0 +1,7 @@
+interface InteractiveAtom {
+    clickable?: boolean;
+    hoverable?: boolean;
+    intersectionShape?: any;
+}
+
+export function resetIntersectionShapes(atoms: InteractiveAtom[]): void;

src/intersectionShapes.js

@@ -0,0 +1,10 @@
+function resetIntersectionShapes(atoms) {
+    for (var i = 0; i < atoms.length; i++) {
+        var atom = atoms[i];
+        if (atom && (atom.clickable || atom.hoverable)) {
+            atom.intersectionShape = { sphere: [], cylinder: [], line: [], triangle: [] };
+        }
+    }
+}
+
+module.exports = { resetIntersectionShapes: resetIntersectionShapes };

tests/jest/intersectionShapes.test.js

@@ -0,0 +1,42 @@
+const { resetIntersectionShapes } = require("../../src/intersectionShapes");
+
+function oldShapes() {
+    return { sphere: ["stale"], cylinder: ["stale"], line: ["stale"], triangle: ["stale"] };
+}
+
+describe("picking-shape rebuilds", () => {
+    test("keeps clickable and hoverable frame shapes bounded on revisits", () => {
+        const frames = [
+            [
+                { clickable: true, intersectionShape: oldShapes() },
+                { hoverable: true, intersectionShape: oldShapes() },
+                { intersectionShape: { sphere: ["unchanged"] } },
+            ],
+            [{ clickable: true, intersectionShape: oldShapes() }],
+        ];
+        const noninteractiveShapes = frames[0][2].intersectionShape;
+
+        for (let rebuild = 0; rebuild < 200; rebuild++) {
+            const frame = frames[rebuild % frames.length];
+            resetIntersectionShapes(frame);
+            for (const atom of frame) {
+                if (atom.clickable || atom.hoverable) {
+                    atom.intersectionShape.sphere.push(rebuild);
+                    atom.intersectionShape.cylinder.push(rebuild);
+                }
+            }
+        }
+
+        for (const frame of frames) {
+            for (const atom of frame) {
+                if (atom.clickable || atom.hoverable) {
+                    expect(atom.intersectionShape.sphere).toHaveLength(1);
+                    expect(atom.intersectionShape.cylinder).toHaveLength(1);
+                    expect(atom.intersectionShape.line).toHaveLength(0);
+                    expect(atom.intersectionShape.triangle).toHaveLength(0);
+                }
+            }
+        }
+        expect(frames[0][2].intersectionShape).toBe(noninteractiveShapes);
+    });
+});