Allow control over viewer dimensions

samirelanduk · Aug 3, 2021 · 669fc55 · 669fc55
1 parent b5f8e44
commit 669fc55
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/src/Molstar.jsx b/src/Molstar.jsx
@@ -5,7 +5,7 @@ import { Viewer } from "molstar/build/viewer/molstar";
 
 const Molstar = props => {
 
- const { pdbId, url, options } = props;
+ const { pdbId, url, dimensions, options } = props;
  const viewerElement = useRef(null);
  const viewer = useRef(null);
 
@@ -16,14 +16,25 @@ const Molstar = props => {
  return () => viewer.current = null;
  }, [])
 
+ if (!dimensions) return <div ref={viewerElement} />
+
  return (
- <div ref={viewerElement} />
+ <div style={{
+ position: "relative",
+ width: dimensions[0], height: dimensions[1]
+ }}>
+ <div ref={viewerElement} style={{
+ position: "absolute",
+ width: dimensions[0], height: dimensions[1], left: 0, right: 0
+ }}/>
+ </div>
  );
 };
 
 Molstar.propTypes = {
  pdbId: PropTypes.string,
  url: PropTypes.string,
+ dimensions: PropTypes.array,
  options: PropTypes.object
 };