JSDraw - A Javascript Framework for Cheminformatics and Bioinformatics

JSDraw brings chemistry capabilities to your web pages. With this javascript libary you can display and draw chemical structures in web pages, which works cross browser, including IE, Firefox, Safari, Opera and Chrome, crose platform, including Window, Mac, Linux, and even iPhone, Android and other mobile devices.

Major Features:
(Because of browser security settings, some demos may not work if loading from your local computers)

Different Editor Size
Full-functional chemical structure editor (demo)
High-quality chemical strcture rendering (demo)
One-line-script to publish SDF file (SDF List, SDF Grid)
Intelligent, editable and searchable (substructure, fullstructure) chemical structure table control (demo)
Substructure search
Stereochemistry supported
Reaction and reaction map supported (demo)
Annotation supported
Highlighting query or scaffold
Draw Markush structures (demo)
Support atom labels/abbreviations (demo)
Sequence Editor to edit and annotate biological sequences (demo)
Antibody-drug conjugate (demo)
Oligonucleotide conugate (demo)
User custom templates (demo)
Draw Shapes (demo)
Draw TLC Plate (demo)
Draw Electrophoresis Gel Plate (demo)
Workflow Designer (demo, New)
Polymer function improved (demo)
Completely cross browser, cross platform
Inputting Mol file, Rxn file, SDF file
Exporting Mol file, Rxn file, SMILES, SMARTS(demo), Html, Formula, Mol weight
Customizable plug-in architecture (demo)
Atom Tag(demo)
HTML/Image column type (demo)
Name2structure integrating with Chemistry Spreadsheet (demo)
SDF File Viewer and Publisher (demo)
Custom Skins (demo)
Multi-Languages (demo)
JSDraw Form (demo)
JSDraw Web Page Framework (demo)
JSDraw Form Designer(demo)
Assay Curves (demo)
Curve Fitting (demo)
Assay Plate (demo)
Spectrum (demo)
HELM RNA Chains (demo)
HELM Peptide (demo)
HELM Table (demo, New)

Some Drawing Tips:

Any tool can draw bond
Click single bond to set double bond
Mouse hove bonds and press 0-8 keys to set bond types
Mouse hove atoms and press characters key to set atom types
Mouse hove atom, bond, arrow or plus and press DEL key to delete objects
Drag objects to change position
Hold Ctrl key and drag selected objects to copy them
Ctrl+C for copy, Ctrl+X for cut, Ctrl+V for paste, Ctrl+Z for undo and Ctrl+Y for redo
Right click atom/bond/blank area for different context menu

Example 1 (Viewer, using molurl):

						<div class='JSDraw' id="jsdraw1" style="width: 400px; height: 330px;border:1px solid gray"
						dataformat='molurl' data='mol1.mol.txt' viewonly ></div>

Example 2 (Editor, using molfile):

						<div class='JSDraw' id="jsdraw2" style="width: 500px; height: 300px;border:1px solid gray"
						dataformat='molfile' data='
						JSDraw

						5  4  0  0  0  0  0  0  0  0  1 V2000
						2.2994    2.0277    0.0000 O   0  0
						3.2617    0.3611    0.0000 F   0  0
						2.2994    0.9166    0.0000 C   0  0
						1.3372    0.3611    0.0000 N   0  0
						0.3750    0.9166    0.0000 Cl  0  0
						3  1  2
						3  2  1
						4  3  1
						5  4  1
						M  END'></div'>

Example 3 (Editor, using JSDraw compatible html):

						<div class='JSDraw' style='width:600px;height:300px;' viewonly>
						<a i=1 e='C' p='10.192 6.656'></a>
						<a i=2 e='C' p='11.543 5.876'></a>
						<a i=3 e='C' p='12.894 6.656'></a>
						<a i=4 e='O' p='11.543 4.316'></a>
						<b a1=1 a2=2 t=1 r='black'></b>
						<b a1=2 a2=3 t=1 r='black'></b>
						<b a1=2 a2=4 t=2 r='black'></b>
						</div>

Example 4 (SDF Viewer):

						<script type="text/javascript">
						new JSDraw2.Table("sdf4.sdf.txt", {grid:true, cols:5, width:200, height:120, searchable:true});
						</script>

IE9
In order to let IE9 render graphics in SVG, which is much faster than traditional VML, you need include following meta tag in <head> section:

						<meta http-equiv="X-UA-Compatible" content="IE=edge" >

class JSDraw2.Mol

JSDraw2.Mol was called JsMol in JSDraw 1.x
Constructor
- new JSDraw2.Mol()
Members
- atoms - an array contains all atoms
- bonds - an array contains all bonds
Methods
- aamap(target, fullstructure) - Perform atom-by-atom mapping, and return the map if succeeded. target is a JsMol object; fullstructure to indicate to do a full-structure search.
- cleanupRxn() - Clean up reaction
- clear() - Remove all atoms and bonds
- clone(selectOnly) - Clone a new JsMol object
- flipX(x)
- flipY(y)
- fullstructureMatch(target) - Perform a full-structure search, and return true if succeeded
- getExactMass()
- getFormula(html)
- getHtml()
- getMolfile()
- getMolWeight()
- getRxnfile()
- getSmiles()
- isEmpty()
- moveCenter()
- scale(factor)
- setColor(color)
- setHtml(html)
- setMolfile(molfile)
- setRxnfile(rxnfile)
- substructureMatch(target) - Perform a substructure search. and return true if succeeded

class JSDraw2.Editor

JSDraw2.Editor was called JSDraw in JSDraw 1.x
Constructor
- new JSDraw2.Editor(div, [options]) - Convert div element into a structure editor immediately
- JSDraw2.Editor.init() - Delay the operation to convert all DIV elements with class value as JSDraw into structure editors. Usually call this method before page onload() event.
Parameters/options
- biology - Set this flag to false to hide seqence button
- dataformat - data format. It can be molfile, rxnfile, html
- data - actual data
- height
- largeicon - use large toolbar icons for higher resolution
- ondatachange - datachange event handler
- plugins - plugins, as an array [{iconurl, tooltips, onclick}, ...]
- popup - Create a viewer, and double-click to show popup editor
- query - Set this flag to false to disable query atoms (A, R, X, Q, * etc.) in periodic table
- removeHydrogens - Remove hydrogen atoms before show the structure
- rxn - Set this flag to false to disable reaction buttons on toolbar
- scale - A factore to zoom the whole editor, including toolbars. This is useful for iPad applications
- skin - set this to "w8" to display the editor in JSDraw2 mode; leave this parameter to empty to display editor in classic mode (2.0)
- sendquery - Set this flag to false to hide PubChem, ChemSpider search button
- showimplicithydrogens - Set flag to false to hide implicit hydrogens
- viewonly
- width
- buttonshape - circle, or square
- popupwidth - Popup Editor width
- popupheight - Popup Editor height
- inktools - set this flag to false to hide ink tools
- showfilemenu - set this flag to false to hide file menus
- highlighterrors - set this flag to false not to highlight errors in reb box
- showtoolbar - set this flag to false not to show toolbar
Members
- m - A JSDraw2.Mol object
Methods
- cleanupRxn() - Clean up reaction
- clear() - Remove all atoms, bonds and other objects
- destory() - For Ajax applications, call this method to release memory.
- fitToWindow([maxBondlength]) - Scale the structure to fit the window size.
- getExactmass()
- getFormula([html])
- getMolfile()
- getMolWeight()
- getRxnfile()
- getSmiles() - Generate SMILES, including stereochemistry descriptors
- getHtml([width], [height], [viewonly]) - Generate JSDraw compatible html
- highlight(query) - Perform a substructure, and highlight the substructure if succeeded
- moveCenter()
- readCookie([cookie_name]) - Read the structure previously stored in cookie
- setHtml(jsdrawHtml) - Set JSDraw compatible html
- setMolfile(molfile)
- setRxnfile(rxnfile)
- sss(target) - Perform substructure search and returns the mapping
- redo()
- refresh() - Redraw the structure
- setSize(width, height)
- undo()
- writeCookie([cookie_name]) - Wrote current structure in cookie
Events
- ondatachange(jsdraw)

class JSDraw2.Table

JSDraw2.Table was called JsSDF in JSDraw 1.x
Constructor
- new JSDraw2.Table(sdfurl [,options [,div]])
- JSDraw2.Table.init(sdfurl, options, div)
Parameters
- columns - Define columns, including key, caption, width, type (structure, id, mf, mw, int, mass, volume, integer, real)
- filter(molfile, attributes) - A function called at loading time to determine if that record can be displayed or not (demo)
- grid - Set this to true to show structures as grid (demo)
- highlight - A molfile as the scaffold to be highlighted (demo)
- molheight - The height of structure cells
- onCellChanged(cell) - Event handler
- removeHydrogens - Remove hydrogen atoms before show the structure
- searchable
- showformula
- showmolweight
- spreadsheet - Set this flag to true to display "define columns" button on toolbar
- viewonly
Methods
- clear() - clear all rows
- destory() - Call this method to release this JSDraw2.Table object to avoid memory leak. This is very important for Ajax applications.
- highlight(scaffold) - scaffold is a molfile string, JsMol object, or JSDraw object
- getSdf()
- getXml()
- insert(row, values)
- getCell(row, col)
- setXml(xml)
- setSdf(sdf)
Events
- onCellChanged(cell) - event fired when user change a cell value

License:

Free for education (Download)
Please contact us for commercial licenses