I’m developing a website about math things using Docusaurus (the latest release). I wanted to embed some geogebra. I use downloaded gbb files mainly because I don’t have the skills to set all up to use api.evalcommand()
and similars. I’ve created a react component
import React, { useState, useEffect } from 'react';
const GeoGebraApplet = ({ filename, id }) => {
const [adjustedFilename, setAdjustedFilename] = useState('');
useEffect(() => {
let newFilename = filename;
if (!filename.startsWith('/')) {
const currentPath = window.location.pathname;
const basePath = currentPath.replace("docs", 'geogebra');
newFilename = `${basePath}/${filename}`;
}
setAdjustedFilename(newFilename);
}, [filename]);
useEffect(() => {
if (adjustedFilename) {
const params = {
filename: adjustedFilename,
scaleContainerClass: 'geogebra-container',
showMenuBar: false,
showToolBar: false,
preventFocus: true,
showResetIcon: true,
enableRightClick: false,
allowUpscale: true,
showFullscreenButton: true,
showAlgebraInput: false,
autoHeight: true,
borderRadius: 10,
};
const ggbApplet = new window.GGBApplet(params, true);
ggbApplet.inject(id);
}
}, [adjustedFilename, id]);
return <div className="geogebra-container"><div id={id}></div></div>;
};
export default GeoGebraApplet;
.geogebra-container {
width: 90%;
display: flex;
justify-content: center;
margin: 5%;
}
When using it with 3D graphs, it all works good. The problem arises only when I use the component inside a <details>
tag, and only for classic 2d geogebra graphs.
example image of the problem
When I click the reset button it renders fine.
I’ve already tried to set a determined container width
.geogebra-container {
width: 500px;
height: 500px;
display: flex;
justify-content: center;
}
I presume the problem is in the automatic geogebra scaling feature.