![]() change the specs. Tutorial3_testmol.loadMolecule(caffeine) load the molecule first (this function automatically sets scale, so we need to change specs after) ![]() Var scale = Math.min(tutorial3_testmol.width/size.x, tutorial3_testmol.height/size.y) ![]() find the scale by taking the minimum of the canvas/size ratios Var caffeine = ChemDoodle.readMOL(caffeineMolFile) These components are powerful, fully customizable, easy to implement, and are free under the open source GPL license (this does not mean that your website needs to be GPL). Var tutorial3_testmol = new ChemDoodle.ViewerCanvas('tutorial3_testmol', 300, 300) Here is the canvas, and below is the annotated code. Also, the first four lines and the last line in the drawChildExtras function are required to make this work (thanks to Kevin Theisen for helping me with those). The trick is to minimize the mouseover and mouseout functions, and use the drawChildExtras function to do all the drawings. Here I show how you can use mouseover, and mouseout functions to redraw the canvas over and over again, and infinite number of times. ChemDoodle can now be called on component mount.Another step on the way to integrating ChemDoodle web components into SMARTCyp. Only embed the scripts and CSS that you need for you project, though. My React Application You need to enable JavaScript to run this app. The environment variable PUBLIC_URL can be used in the React application to reference assets in the public folder, e.g. Place CWC in the public folder of a React project created with Create React App or equivalent. Downloaded CWC from /installation/download. React-chemdoodleweb depends on the ChemDoodle global object, so CWC first needs to be installed in your project. As well, it will be loaded even if the current page does not use it (The size of the minified CWC script is 414 kB). While this is a simple implementation that ensures CWC is available everywhere for the lifetime of the React application, the tradeoff is that CWC is not bundled with the rest of the React application code and will make an additional network request. While react-chemdoodleweb can be downloaded from NPM, CWC scripts need to be embedded into the HTML document. The react-chemdoodle library on the otherhand is a "require time" node module that can be compiled by JS bundlers more typical in modern web application development. InstallationĪs it was originally written in 2007, CWC consists of a number of IIFE modules divided into two javascript files, one a "core" file and one an optional jQuery-based UI, that are loaded by a client browser. Contributions are welcome to provide bindings for additional canvases. ![]() At the moment, react-chemdoodle wraps just two canvases, the 2D "ViewerCanvas" and "SketcherCanvas". CWC provides 18 unique component canvases from a simple 2D "ViewerCanvas" to 3D "EditorCanvas3D" to a "PeriodicTableCanvas". The React Chemdoodle Web Components ( react-chemdoodle) is a UI library add-on for the ChemDoodle Web Components (CWC) library.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |