From 36aadbaee13d4bc62a5a6fc428cb6b04ca5f05ca Mon Sep 17 00:00:00 2001 From: Trevor Manz Date: Mon, 9 Jun 2025 16:41:47 -0400 Subject: [PATCH] fix: scope PDBeMolstar event listeners to container for Shadow DOM compatibility Replace `document.addEventListener` with `viewerContainer.addEventListener` for mouseover, mouseout, and click events to fix interaction issues in Shadow DOM environments like marimo. This (partially) addresses the event propagation problems described in marimo-team/marimo#5204. --- src/ipymolstar/static/pdbemolstar.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/ipymolstar/static/pdbemolstar.js b/src/ipymolstar/static/pdbemolstar.js index 3e21fe5..fc8d6c9 100644 --- a/src/ipymolstar/static/pdbemolstar.js +++ b/src/ipymolstar/static/pdbemolstar.js @@ -248,18 +248,18 @@ function render({ model, el }) { subscribe(model, name, callback) ); - document.addEventListener("PDB.molstar.mouseover", (e) => { + viewerContainer.addEventListener("PDB.molstar.mouseover", (e) => { const eventData = e.eventData; model.set("mouseover_event", eventData); model.save_changes(); }); - document.addEventListener("PDB.molstar.mouseout", (e) => { + viewerContainer.addEventListener("PDB.molstar.mouseout", (e) => { model.set("mouseout_event", !model.get("mouseout_event") ); model.save_changes(); }); - document.addEventListener("PDB.molstar.click", (e) => { + viewerContainer.addEventListener("PDB.molstar.click", (e) => { const eventData = e.eventData; model.set("click_event", eventData); model.save_changes();