Open zatarra97 opened 1 year ago
You can customize a component and instantiate SmilesDrawer.SvgDrawer()
in useEffect()
Issues while running in Reactjs:
TypeError: Cannot read properties of null (reading 'determineDimensions') at SvgDrawer.draw (SvgDrawer.js:67:1) at Drawer.draw (Drawer.js:47:1) at SmileDrawer.js:14:1 at SmilesDrawer.parse (app.js:80:1) at SmileDrawerContainer (SmileDrawer.js:12:1) at renderWithHooks (react-dom.development.js:16305:1) at updateFunctionComponent (react-dom.development.js:19588:1) at beginWork (react-dom.development.js:21601:1) at beginWork$1 (react-dom.development.js:27426:1) at performUnitOfWork (react-dom.development.js:26557:1)
Issue in referencing the canvas
anyone get this to work in svelte?
Here's a component I created that works with similes-drawer.
import React, { useRef, useEffect } from "react";
import SmilesDrawer from "smiles-drawer";
const USE_SVG = true;
const SETTINGS = {
width: 800,
height: 400,
};
const SmileDrawerContainer = ({ smilesStr }: { smilesStr: string }) => {
if (USE_SVG) {
// SVG version (versions: <=2.0.3 and 2.1.7)
const svgRef = useRef<SVGElement>(null);
let drawer = new SmilesDrawer.SvgDrawer(SETTINGS);
useEffect(() => {
SmilesDrawer.parse(smilesStr, function (tree: any) {
drawer.draw(tree, "structure-svg", "light");
});
}, []);
return (
<div>
<svg id="structure-svg"></svg>
</div>
);
} else {
// Canvas version (versions: <=2.0.3 only)
const canvasRef = useRef<HTMLCanvasElement>(null);
let drawer = new SmilesDrawer.Drawer(SETTINGS);
useEffect(() => {
SmilesDrawer.parse(smilesStr, function (tree: any) {
drawer.draw(tree, "structure-canvas", "light");
});
}, []);
return (
<div>
<canvas
className="relative"
id="structure-canvas"
ref={canvasRef}
width={"800px"}
height={"400px"}
/>
</div>
);
}
};
export default SmileDrawerContainer;
Hi, how can I use this library in my React Project?