-
Notifications
You must be signed in to change notification settings - Fork 0
Molstar localisation
marek edited this page Feb 5, 2026
·
1 revision
We can use a function similar to this:
async function translateMolstarUi(parent: RefObject<HTMLDivElement | null>) {
const btn = parent.current?.querySelector(
'button[title="Reset Zoom"]'
) as HTMLButtonElement;
if (btn) btn.title = "Custom Reset";
const btn2 = parent.current?.querySelector(
'button[title*="Set camera zoom to fit"]'
) as HTMLButtonElement;
if (btn) {
btn2.title = "Custom Reset Tooltip";
btn2.textContent = "Custom Reset";
}
const screenshotBtn = parent.current?.querySelector(
'button[title="Screenshot / State Snapshot"]'
) as HTMLButtonElement;
if (screenshotBtn) screenshotBtn.style.display = "none";
const toggleControlsBtn = parent.current?.querySelector(
'button[title="Toggle Controls Panel"]'
) as HTMLButtonElement;
if (toggleControlsBtn) toggleControlsBtn.style.display = "none";
}
Usage in initMolstar:
// Initialize Molstar viewer.
const parentRef = createRef<HTMLDivElement>();
useEffect(() => {
// ...
initMolstar(
parentRef.current as HTMLDivElement,
{
showControls: true,
isExpanded: false,
},
snapshot,
).then(async () => {
translateMolstarUi(parentRef);
// ...
});
return () => {
// ...
};
}, [...]);