UNPKG

smiles-drawer

Version:

A SMILES drawer and parser. Generate molecular structure depictions in pure JavaScript.

2,243 lines (575 loc) 153 kB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>SmilesDrawer - Documentation</title> <script src="scripts/prettify/prettify.js"></script> <script src="scripts/prettify/lang-css.js"></script> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link type="text/css" rel="stylesheet" href="styles/prettify.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc.css"> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger" /> <label for="nav-trigger" class="navicon-button x"> <div class="navicon"></div> </label> <label for="nav-trigger" class="overlay"></label> <nav> <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="ArrayHelper.html">ArrayHelper</a><ul class='methods'><li data-type='method'><a href="ArrayHelper.html#.clone">clone</a></li><li data-type='method'><a href="ArrayHelper.html#.contains">contains</a></li><li data-type='method'><a href="ArrayHelper.html#.containsAll">containsAll</a></li><li data-type='method'><a href="ArrayHelper.html#.count">count</a></li><li data-type='method'><a href="ArrayHelper.html#.deepCopy">deepCopy</a></li><li data-type='method'><a href="ArrayHelper.html#.each">each</a></li><li data-type='method'><a href="ArrayHelper.html#.get">get</a></li><li data-type='method'><a href="ArrayHelper.html#.intersection">intersection</a></li><li data-type='method'><a href="ArrayHelper.html#.merge">merge</a></li><li data-type='method'><a href="ArrayHelper.html#.print">print</a></li><li data-type='method'><a href="ArrayHelper.html#.remove">remove</a></li><li data-type='method'><a href="ArrayHelper.html#.removeAll">removeAll</a></li><li data-type='method'><a href="ArrayHelper.html#.removeUnique">removeUnique</a></li><li data-type='method'><a href="ArrayHelper.html#.sortByAtomicNumberDesc">sortByAtomicNumberDesc</a></li><li data-type='method'><a href="ArrayHelper.html#.toggle">toggle</a></li><li data-type='method'><a href="ArrayHelper.html#.unique">unique</a></li></ul></li><li><a href="Atom.html">Atom</a><ul class='methods'><li data-type='method'><a href="Atom.html#.getDuplicateAtomicNumbers">getDuplicateAtomicNumbers</a></li><li data-type='method'><a href="Atom.html#.hasDuplicateAtomicNumbers">hasDuplicateAtomicNumbers</a></li><li data-type='method'><a href="Atom.html#.sortByAtomicNumber">sortByAtomicNumber</a></li><li data-type='method'><a href="Atom.html#addAnchoredRing">addAnchoredRing</a></li><li data-type='method'><a href="Atom.html#addNeighbouringElement">addNeighbouringElement</a></li><li data-type='method'><a href="Atom.html#attachPseudoElement">attachPseudoElement</a></li><li data-type='method'><a href="Atom.html#backupRings">backupRings</a></li><li data-type='method'><a href="Atom.html#canRotate">canRotate</a></li><li data-type='method'><a href="Atom.html#getAtomicNumber">getAtomicNumber</a></li><li data-type='method'><a href="Atom.html#getAttachedPseudoElements">getAttachedPseudoElements</a></li><li data-type='method'><a href="Atom.html#getAttachedPseudoElementsCount">getAttachedPseudoElementsCount</a></li><li data-type='method'><a href="Atom.html#getMaxRingbond">getMaxRingbond</a></li><li data-type='method'><a href="Atom.html#getOrder">getOrder</a></li><li data-type='method'><a href="Atom.html#getRingbondCount">getRingbondCount</a></li><li data-type='method'><a href="Atom.html#hasRing">hasRing</a></li><li data-type='method'><a href="Atom.html#hasRingbonds">hasRingbonds</a></li><li data-type='method'><a href="Atom.html#haveCommonRingbond">haveCommonRingbond</a></li><li data-type='method'><a href="Atom.html#isInRing">isInRing</a></li><li data-type='method'><a href="Atom.html#maxCommonRingbond">maxCommonRingbond</a></li><li data-type='method'><a href="Atom.html#neighbouringElementsEqual">neighbouringElementsEqual</a></li><li data-type='method'><a href="Atom.html#restoreRings">restoreRings</a></li><li data-type='method'><a href="Atom.html#setOrder">setOrder</a></li></ul></li><li><a href="CanvasWrapper.html">CanvasWrapper</a><ul class='methods'><li data-type='method'><a href="CanvasWrapper.html#clear">clear</a></li><li data-type='method'><a href="CanvasWrapper.html#drawAromaticityRing">drawAromaticityRing</a></li><li data-type='method'><a href="CanvasWrapper.html#drawBall">drawBall</a></li><li data-type='method'><a href="CanvasWrapper.html#drawCircle">drawCircle</a></li><li data-type='method'><a href="CanvasWrapper.html#drawDashedWedge">drawDashedWedge</a></li><li data-type='method'><a href="CanvasWrapper.html#drawDebugPoint">drawDebugPoint</a></li><li data-type='method'><a href="CanvasWrapper.html#drawDebugText">drawDebugText</a></li><li data-type='method'><a href="CanvasWrapper.html#drawLine">drawLine</a></li><li data-type='method'><a href="CanvasWrapper.html#drawText">drawText</a></li><li data-type='method'><a href="CanvasWrapper.html#drawWedge">drawWedge</a></li><li data-type='method'><a href="CanvasWrapper.html#getColor">getColor</a></li><li data-type='method'><a href="CanvasWrapper.html#reset">reset</a></li><li data-type='method'><a href="CanvasWrapper.html#scale">scale</a></li><li data-type='method'><a href="CanvasWrapper.html#setTheme">setTheme</a></li><li data-type='method'><a href="CanvasWrapper.html#updateSize">updateSize</a></li></ul></li><li><a href="Edge.html">Edge</a><ul class='methods'><li data-type='method'><a href="Edge.html#getBondCount">getBondCount</a></li></ul></li><li><a href="Graph.html">Graph</a><ul class='methods'><li data-type='method'><a href="Graph.html#._ccCountDfs">_ccCountDfs</a></li><li data-type='method'><a href="Graph.html#.getConnectedComponentCount">getConnectedComponentCount</a></li><li data-type='method'><a href="Graph.html#_bridgeDfs">_bridgeDfs</a></li><li data-type='method'><a href="Graph.html#addEdge">addEdge</a></li><li data-type='method'><a href="Graph.html#addVertex">addVertex</a></li><li data-type='method'><a href="Graph.html#clear">clear</a></li><li data-type='method'><a href="Graph.html#getAdjacencyList">getAdjacencyList</a></li><li data-type='method'><a href="Graph.html#getAdjacencyMatrix">getAdjacencyMatrix</a></li><li data-type='method'><a href="Graph.html#getBridges">getBridges</a></li><li data-type='method'><a href="Graph.html#getComponentsAdjacencyMatrix">getComponentsAdjacencyMatrix</a></li><li data-type='method'><a href="Graph.html#getEdge">getEdge</a></li><li data-type='method'><a href="Graph.html#getEdgeList">getEdgeList</a></li><li data-type='method'><a href="Graph.html#getLargestCycleInSubgraph">getLargestCycleInSubgraph</a></li><li data-type='method'><a href="Graph.html#getSubgraphAdjacencyList">getSubgraphAdjacencyList</a></li><li data-type='method'><a href="Graph.html#getSubgraphAdjacencyMatrix">getSubgraphAdjacencyMatrix</a></li><li data-type='method'><a href="Graph.html#getVertexList">getVertexList</a></li><li data-type='method'><a href="Graph.html#hasEdge">hasEdge</a></li></ul></li><li><a href="Hanser.html">Hanser</a></li><li><a href="Line.html">Line</a><ul class='methods'><li data-type='method'><a href="Line.html#clone">clone</a></li><li data-type='method'><a href="Line.html#getAngle">getAngle</a></li><li data-type='method'><a href="Line.html#getLeftChiral">getLeftChiral</a></li><li data-type='method'><a href="Line.html#getLeftElement">getLeftElement</a></li><li data-type='method'><a href="Line.html#getLeftVector">getLeftVector</a></li><li data-type='method'><a href="Line.html#getLength">getLength</a></li><li data-type='method'><a href="Line.html#getNormals">getNormals</a></li><li data-type='method'><a href="Line.html#getRightChiral">getRightChiral</a></li><li data-type='method'><a href="Line.html#getRightElement">getRightElement</a></li><li data-type='method'><a href="Line.html#getRightVector">getRightVector</a></li><li data-type='method'><a href="Line.html#rotate">rotate</a></li><li data-type='method'><a href="Line.html#rotateToXAxis">rotateToXAxis</a></li><li data-type='method'><a href="Line.html#setLeftVector">setLeftVector</a></li><li data-type='method'><a href="Line.html#setRightVector">setRightVector</a></li><li data-type='method'><a href="Line.html#shorten">shorten</a></li><li data-type='method'><a href="Line.html#shortenFrom">shortenFrom</a></li><li data-type='method'><a href="Line.html#shortenLeft">shortenLeft</a></li><li data-type='method'><a href="Line.html#shortenRight">shortenRight</a></li><li data-type='method'><a href="Line.html#shortenTo">shortenTo</a></li></ul></li><li><a href="MathHelper.html">MathHelper</a><ul class='methods'><li data-type='method'><a href="MathHelper.html#.apothem">apothem</a></li><li data-type='method'><a href="MathHelper.html#.centralAngle">centralAngle</a></li><li data-type='method'><a href="MathHelper.html#.innerAngle">innerAngle</a></li><li data-type='method'><a href="MathHelper.html#.meanAngle">meanAngle</a></li><li data-type='method'><a href="MathHelper.html#.polyCircumradius">polyCircumradius</a></li><li data-type='method'><a href="MathHelper.html#.round">round</a></li><li data-type='method'><a href="MathHelper.html#.toDeg">toDeg</a></li><li data-type='method'><a href="MathHelper.html#.toRad">toRad</a></li></ul></li><li><a href="Ring.html">Ring</a><ul class='methods'><li data-type='method'><a href="Ring.html#.getRing">getRing</a></li><li data-type='method'><a href="Ring.html#allowsFlip">allowsFlip</a></li><li data-type='method'><a href="Ring.html#clone">clone</a></li><li data-type='method'><a href="Ring.html#contains">contains</a></li><li data-type='method'><a href="Ring.html#eachMember">eachMember</a></li><li data-type='method'><a href="Ring.html#getAngle">getAngle</a></li><li data-type='method'><a href="Ring.html#getDoubleBondCount">getDoubleBondCount</a></li><li data-type='method'><a href="Ring.html#getOrderedNeighbours">getOrderedNeighbours</a></li><li data-type='method'><a href="Ring.html#getPolygon">getPolygon</a></li><li data-type='method'><a href="Ring.html#getSize">getSize</a></li><li data-type='method'><a href="Ring.html#isBenzeneLike">isBenzeneLike</a></li><li data-type='method'><a href="Ring.html#setFlipped">setFlipped</a></li><li data-type='method'><a href="Ring.html#thisOrNeighboursContain">thisOrNeighboursContain</a></li></ul></li><li><a href="RingConnection.html">RingConnection</a><ul class='methods'><li data-type='method'><a href="RingConnection.html#.getNeighbours">getNeighbours</a></li><li data-type='method'><a href="RingConnection.html#.getVertices">getVertices</a></li><li data-type='method'><a href="RingConnection.html#.isBridge">isBridge</a></li><li data-type='method'><a href="RingConnection.html#addVertex">addVertex</a></li><li data-type='method'><a href="RingConnection.html#isBridge">isBridge</a></li><li data-type='method'><a href="RingConnection.html#updateOther">updateOther</a></li></ul></li><li><a href="SmilesDrawer.html">SmilesDrawer</a><ul class='methods'><li data-type='method'><a href="SmilesDrawer.html#.apply">apply</a></li><li data-type='method'><a href="SmilesDrawer.html#.clean">clean</a></li><li data-type='method'><a href="SmilesDrawer.html#.parse">parse</a></li><li data-type='method'><a href="SmilesDrawer.html#addRing">addRing</a></li><li data-type='method'><a href="SmilesDrawer.html#addRingConnection">addRingConnection</a></li><li data-type='method'><a href="SmilesDrawer.html#areConnected">areConnected</a></li><li data-type='method'><a href="SmilesDrawer.html#areVerticesInSameRing">areVerticesInSameRing</a></li><li data-type='method'><a href="SmilesDrawer.html#backupRingInformation">backupRingInformation</a></li><li data-type='method'><a href="SmilesDrawer.html#chooseSide">chooseSide</a></li><li data-type='method'><a href="SmilesDrawer.html#clearPositions">clearPositions</a></li><li data-type='method'><a href="SmilesDrawer.html#createBridgedRing">createBridgedRing</a></li><li data-type='method'><a href="SmilesDrawer.html#createNextBond">createNextBond</a></li><li data-type='method'><a href="SmilesDrawer.html#createRing">createRing</a></li><li data-type='method'><a href="SmilesDrawer.html#draw">draw</a></li><li data-type='method'><a href="SmilesDrawer.html#drawEdges">drawEdges</a></li><li data-type='method'><a href="SmilesDrawer.html#drawVertices">drawVertices</a></li><li data-type='method'><a href="SmilesDrawer.html#edgeRingCount">edgeRingCount</a></li><li data-type='method'><a href="SmilesDrawer.html#extend">extend</a></li><li data-type='method'><a href="SmilesDrawer.html#forceLayout">forceLayout</a></li><li data-type='method'><a href="SmilesDrawer.html#getBondCount">getBondCount</a></li><li data-type='method'><a href="SmilesDrawer.html#getBridgedRingRings">getBridgedRingRings</a></li><li data-type='method'><a href="SmilesDrawer.html#getBridgedRings">getBridgedRings</a></li><li data-type='method'><a href="SmilesDrawer.html#getClosestEndpointVertex">getClosestEndpointVertex</a></li><li data-type='method'><a href="SmilesDrawer.html#getClosestVertex">getClosestVertex</a></li><li data-type='method'><a href="SmilesDrawer.html#getCommonRingbondNeighbour">getCommonRingbondNeighbour</a></li><li data-type='method'><a href="SmilesDrawer.html#getCommonRings">getCommonRings</a></li><li data-type='method'><a href="SmilesDrawer.html#getCurrentCenterOfMass">getCurrentCenterOfMass</a></li><li data-type='method'><a href="SmilesDrawer.html#getCurrentCenterOfMassInNeigbourhood">getCurrentCenterOfMassInNeigbourhood</a></li><li data-type='method'><a href="SmilesDrawer.html#getEdgeNormals">getEdgeNormals</a></li><li data-type='method'><a href="SmilesDrawer.html#getEdgeWeight">getEdgeWeight</a></li><li data-type='method'><a href="SmilesDrawer.html#getFusedRings">getFusedRings</a></li><li data-type='method'><a href="SmilesDrawer.html#getHeavyAtomCount">getHeavyAtomCount</a></li><li data-type='method'><a href="SmilesDrawer.html#getLargestOrAromaticCommonRing">getLargestOrAromaticCommonRing</a></li><li data-type='method'><a href="SmilesDrawer.html#getNonRingNeighbours">getNonRingNeighbours</a></li><li data-type='method'><a href="SmilesDrawer.html#getOverlapScore">getOverlapScore</a></li><li data-type='method'><a href="SmilesDrawer.html#getRing">getRing</a></li><li data-type='method'><a href="SmilesDrawer.html#getRingbondType">getRingbondType</a></li><li data-type='method'><a href="SmilesDrawer.html#getRingConnections">getRingConnections</a></li><li data-type='method'><a href="SmilesDrawer.html#getRingCount">getRingCount</a></li><li data-type='method'><a href="SmilesDrawer.html#getSmallestCommonRing">getSmallestCommonRing</a></li><li data-type='method'><a href="SmilesDrawer.html#getSpiros">getSpiros</a></li><li data-type='method'><a href="SmilesDrawer.html#getSubringCenter">getSubringCenter</a></li><li data-type='method'><a href="SmilesDrawer.html#getSubtreeOverlapScore">getSubtreeOverlapScore</a></li><li data-type='method'><a href="SmilesDrawer.html#getTotalOverlapScore">getTotalOverlapScore</a></li><li data-type='method'><a href="SmilesDrawer.html#getTreeDepth">getTreeDepth</a></li><li data-type='method'><a href="SmilesDrawer.html#getVerticesAt">getVerticesAt</a></li><li data-type='method'><a href="SmilesDrawer.html#hasBridgedRing">hasBridgedRing</a></li><li data-type='method'><a href="SmilesDrawer.html#initGraph">initGraph</a></li><li data-type='method'><a href="SmilesDrawer.html#initPseudoElements">initPseudoElements</a></li><li data-type='method'><a href="SmilesDrawer.html#initRings">initRings</a></li><li data-type='method'><a href="SmilesDrawer.html#isEdgeInAromaticRing">isEdgeInAromaticRing</a></li><li data-type='method'><a href="SmilesDrawer.html#isEdgeInRing">isEdgeInRing</a></li><li data-type='method'><a href="SmilesDrawer.html#isEdgeRotatable">isEdgeRotatable</a></li><li data-type='method'><a href="SmilesDrawer.html#isPartOfBridgedRing">isPartOfBridgedRing</a></li><li data-type='method'><a href="SmilesDrawer.html#isPointInRing">isPointInRing</a></li><li data-type='method'><a href="SmilesDrawer.html#isRingAromatic">isRingAromatic</a></li><li data-type='method'><a href="SmilesDrawer.html#isRingConnection">isRingConnection</a></li><li data-type='method'><a href="SmilesDrawer.html#position">position</a></li><li data-type='method'><a href="SmilesDrawer.html#printRingInfo">printRingInfo</a></li><li data-type='method'><a href="SmilesDrawer.html#removeRing">removeRing</a></li><li data-type='method'><a href="SmilesDrawer.html#removeRingConnection">removeRingConnection</a></li><li data-type='method'><a href="SmilesDrawer.html#removeRingConnectionsBetween">removeRingConnectionsBetween</a></li><li data-type='method'><a href="SmilesDrawer.html#resolvePrimaryOverlaps">resolvePrimaryOverlaps</a></li><li data-type='method'><a href="SmilesDrawer.html#resolveSecondaryOverlaps">resolveSecondaryOverlaps</a></li><li data-type='method'><a href="SmilesDrawer.html#restorePositions">restorePositions</a></li><li data-type='method'><a href="SmilesDrawer.html#restoreRingInformation">restoreRingInformation</a></li><li data-type='method'><a href="SmilesDrawer.html#rotateSubtree">rotateSubtree</a></li><li data-type='method'><a href="SmilesDrawer.html#traverseTree">traverseTree</a></li></ul></li><li><a href="SSSR.html">SSSR</a><ul class='methods'><li data-type='method'><a href="SSSR.html#.areSetsEqual">areSetsEqual</a></li><li data-type='method'><a href="SSSR.html#.bondsToAtoms">bondsToAtoms</a></li><li data-type='method'><a href="SSSR.html#.getEdgeCount">getEdgeCount</a></li><li data-type='method'><a href="SSSR.html#.getEdgeList">getEdgeList</a></li><li data-type='method'><a href="SSSR.html#.getPathIncludedDistanceMatrices">getPathIncludedDistanceMatrices</a></li><li data-type='method'><a href="SSSR.html#.getRingCandidates">getRingCandidates</a></li><li data-type='method'><a href="SSSR.html#.getRings">getRings</a></li><li data-type='method'><a href="SSSR.html#.getSSSR">getSSSR</a></li><li data-type='method'><a href="SSSR.html#.isSupersetOf">isSupersetOf</a></li><li data-type='method'><a href="SSSR.html#.matrixToString">matrixToString</a></li><li data-type='method'><a href="SSSR.html#.pathSetsContain">pathSetsContain</a></li></ul></li><li><a href="Vector2.html">Vector2</a><ul class='methods'><li data-type='method'><a href="Vector2.html#add">add</a></li><li data-type='method'><a href="Vector2.html#angle">angle</a></li><li data-type='method'><a href="Vector2.html#clockwise">clockwise</a></li><li data-type='method'><a href="Vector2.html#clone">clone</a></li><li data-type='method'><a href="Vector2.html#distance">distance</a></li><li data-type='method'><a href="Vector2.html#distanceSq">distanceSq</a></li><li data-type='method'><a href="Vector2.html#divide">divide</a></li><li data-type='method'><a href="Vector2.html#getRotateAwayFromAngle">getRotateAwayFromAngle</a></li><li data-type='method'><a href="Vector2.html#getRotateToAngle">getRotateToAngle</a></li><li data-type='method'><a href="Vector2.html#getRotateTowardsAngle">getRotateTowardsAngle</a></li><li data-type='method'><a href="Vector2.html#invert">invert</a></li><li data-type='method'><a href="Vector2.html#isInPolygon">isInPolygon</a></li><li data-type='method'><a href="Vector2.html#length">length</a></li><li data-type='method'><a href="Vector2.html#multiply">multiply</a></li><li data-type='method'><a href="Vector2.html#multiplyScalar">multiplyScalar</a></li><li data-type='method'><a href="Vector2.html#normalize">normalize</a></li><li data-type='method'><a href="Vector2.html#normalized">normalized</a></li><li data-type='method'><a href="Vector2.html#rotate">rotate</a></li><li data-type='method'><a href="Vector2.html#rotateAround">rotateAround</a></li><li data-type='method'><a href="Vector2.html#rotateAwayFrom">rotateAwayFrom</a></li><li data-type='method'><a href="Vector2.html#rotateTo">rotateTo</a></li><li data-type='method'><a href="Vector2.html#sameSideAs">sameSideAs</a></li><li data-type='method'><a href="Vector2.html#subtract">subtract</a></li><li data-type='method'><a href="Vector2.html#toString">toString</a></li><li data-type='method'><a href="Vector2.html#whichSide">whichSide</a></li><li data-type='method'><a href="Vector2.html#.add">add</a></li><li data-type='method'><a href="Vector2.html#.angle">angle</a></li><li data-type='method'><a href="Vector2.html#.divide">divide</a></li><li data-type='method'><a href="Vector2.html#.dot">dot</a></li><li data-type='method'><a href="Vector2.html#.midpoint">midpoint</a></li><li data-type='method'><a href="Vector2.html#.multiply">multiply</a></li><li data-type='method'><a href="Vector2.html#.multiplyScalar">multiplyScalar</a></li><li data-type='method'><a href="Vector2.html#.normals">normals</a></li><li data-type='method'><a href="Vector2.html#.scalarProjection">scalarProjection</a></li><li data-type='method'><a href="Vector2.html#.subtract">subtract</a></li><li data-type='method'><a href="Vector2.html#.threePointangle">threePointangle</a></li><li data-type='method'><a href="Vector2.html#.units">units</a></li></ul></li><li><a href="Vertex.html">Vertex</a><ul class='methods'><li data-type='method'><a href="Vertex.html#addChild">addChild</a></li><li data-type='method'><a href="Vertex.html#clone">clone</a></li><li data-type='method'><a href="Vertex.html#equals">equals</a></li><li data-type='method'><a href="Vertex.html#getAngle">getAngle</a></li><li data-type='method'><a href="Vertex.html#getCommonNeighbours">getCommonNeighbours</a></li><li data-type='method'><a href="Vertex.html#getDrawnNeighbours">getDrawnNeighbours</a></li><li data-type='method'><a href="Vertex.html#getNeighbourCount">getNeighbourCount</a></li><li data-type='method'><a href="Vertex.html#getNeighbours">getNeighbours</a></li><li data-type='method'><a href="Vertex.html#getNextInRing">getNextInRing</a></li><li data-type='method'><a href="Vertex.html#getSpanningTreeNeighbours">getSpanningTreeNeighbours</a></li><li data-type='method'><a href="Vertex.html#getTextDirection">getTextDirection</a></li><li data-type='method'><a href="Vertex.html#isNeighbour">isNeighbour</a></li><li data-type='method'><a href="Vertex.html#isTerminal">isTerminal</a></li><li data-type='method'><a href="Vertex.html#setParentVertexId">setParentVertexId</a></li><li data-type='method'><a href="Vertex.html#setPosition">setPosition</a></li><li data-type='method'><a href="Vertex.html#setPositionFromVector">setPositionFromVector</a></li></ul></li></ul> </nav> <div id="main"> <h1 class="page-title">SmilesDrawer</h1> <section> <header> <h2> SmilesDrawer </h2> <div class="class-description"><p>The main class of the application representing the smiles drawer</p></div> </header> <article> <div class="container-overview"> <h2>Constructor</h2> <h4 class="name" id="SmilesDrawer"><span class="type-signature"></span>new SmilesDrawer<span class="signature">(options)</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="SmilesDrawer.js.html">SmilesDrawer.js</a>, <a href="SmilesDrawer.js.html#line2">line 2</a> </li></ul></dd> </dl> <div class="description"> <p>The constructor for the class SmilesDrawer.</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>options</code></td> <td class="type"> <span class="param-type">object</span> </td> <td class="description last"><p>An object containing custom values for different options. It is merged with the default options.</p></td> </tr> </tbody> </table> </div> <h3 class="subsection-title">Methods</h3> <h4 class="name" id=".apply"><span class="type-signature">(static) </span>apply<span class="signature">(options, themeName<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="SmilesDrawer.js.html">SmilesDrawer.js</a>, <a href="SmilesDrawer.js.html#line3365">line 3365</a> </li></ul></dd> </dl> <div class="description"> <p>Applies the smiles drawer draw function to each canvas element that has a smiles string in the data-smiles attribute.</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Attributes</th> <th>Default</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>options</code></td> <td class="type"> <span class="param-type">objects</span> </td> <td class="attributes"> </td> <td class="default"> </td> <td class="description last"><p>SmilesDrawer options.</p></td> </tr> <tr> <td class="name"><code>themeName</code></td> <td class="type"> <span class="param-type">string</span> </td> <td class="attributes"> &lt;optional><br> </td> <td class="default"> <code>'light'</code> </td> <td class="description last"><p>The theme to apply.</p></td> </tr> </tbody> </table> <h4 class="name" id=".clean"><span class="type-signature">(static) </span>clean<span class="signature">(smiles)</span><span class="type-signature"> &rarr; {string}</span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="SmilesDrawer.js.html">SmilesDrawer.js</a>, <a href="SmilesDrawer.js.html#line3354">line 3354</a> </li></ul></dd> </dl> <div class="description"> <p>Cleans a SMILES string (removes non-valid characters)</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>smiles</code></td> <td class="type"> <span class="param-type">string</span> </td> <td class="description last"><p>A SMILES string.</p></td> </tr> </tbody> </table> <h5>Returns:</h5> <div class="param-desc"> <p>The clean SMILES string.</p> </div> <dl class="param-type"> <dt> Type </dt> <dd> <span class="param-type">string</span> </dd> </dl> <h4 class="name" id=".parse"><span class="type-signature">(static) </span>parse<span class="signature">(smiles, successCallback, errorCallback)</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="SmilesDrawer.js.html">SmilesDrawer.js</a>, <a href="SmilesDrawer.js.html#line3386">line 3386</a> </li></ul></dd> </dl> <div class="description"> <p>Parses the entered smiles string.</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>smiles</code></td> <td class="type"> <span class="param-type">string</span> </td> <td class="description last"><p>A SMILES string.</p></td> </tr> <tr> <td class="name"><code>successCallback</code></td> <td class="type"> <span class="param-type">function</span> </td> <td class="description last"><p>A callback that is called on success with the parse tree.</p></td> </tr> <tr> <td class="name"><code>errorCallback</code></td> <td class="type"> <span class="param-type">function</span> </td> <td class="description last"><p>A callback that is called with the error object on error.</p></td> </tr> </tbody> </table> <h4 class="name" id="addRing"><span class="type-signature"></span>addRing<span class="signature">(ring)</span><span class="type-signature"> &rarr; {number}</span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="SmilesDrawer.js.html">SmilesDrawer.js</a>, <a href="SmilesDrawer.js.html#line1032">line 1032</a> </li></ul></dd> </dl> <div class="description"> <p>Add a ring to this representation of a molecule.</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>ring</code></td> <td class="type"> <span class="param-type"><a href="Ring.html">Ring</a></span> </td> <td class="description last"><p>A new ring.</p></td> </tr> </tbody> </table> <h5>Returns:</h5> <div class="param-desc"> <p>The ring id of the new ring.</p> </div> <dl class="param-type"> <dt> Type </dt> <dd> <span class="param-type">number</span> </dd> </dl> <h4 class="name" id="addRingConnection"><span class="type-signature"></span>addRingConnection<span class="signature">(ringConnection)</span><span class="type-signature"> &rarr; {number}</span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="SmilesDrawer.js.html">SmilesDrawer.js</a>, <a href="SmilesDrawer.js.html#line1083">line 1083</a> </li></ul></dd> </dl> <div class="description"> <p>Add a ring connection to this representation of a molecule.</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>ringConnection</code></td> <td class="type"> <span class="param-type"><a href="RingConnection.html">RingConnection</a></span> </td> <td class="description last"><p>A new ringConnection.</p></td> </tr> </tbody> </table> <h5>Returns:</h5> <div class="param-desc"> <p>The ring connection id of the new ring connection.</p> </div> <dl class="param-type"> <dt> Type </dt> <dd> <span class="param-type">number</span> </dd> </dl> <h4 class="name" id="areConnected"><span class="type-signature"></span>areConnected<span class="signature">(vertexIdA, vertexIdA)</span><span class="type-signature"> &rarr; {boolean}</span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="SmilesDrawer.js.html">SmilesDrawer.js</a>, <a href="SmilesDrawer.js.html#line1318">line 1318</a> </li></ul></dd> </dl> <div class="description"> <p>Checks whether or not two vertices are connected.</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>vertexIdA</code></td> <td class="type"> <span class="param-type">number</span> </td> <td class="description last"><p>A vertex id.</p></td> </tr> <tr> <td class="name"><code>vertexIdA</code></td> <td class="type"> <span class="param-type">number</span> </td> <td class="description last"><p>A vertex id.</p></td> </tr> </tbody> </table> <h5>Returns:</h5> <div class="param-desc"> <p>A boolean indicating whether or not two vertices are connected.</p> </div> <dl class="param-type"> <dt> Type </dt> <dd> <span class="param-type">boolean</span> </dd> </dl> <h4 class="name" id="areVerticesInSameRing"><span class="type-signature"></span>areVerticesInSameRing<span class="signature">(vertexA, vertexB)</span><span class="type-signature"> &rarr; {boolean}</span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="SmilesDrawer.js.html">SmilesDrawer.js</a>, <a href="SmilesDrawer.js.html#line808">line 808</a> </li></ul></dd> </dl> <div class="description"> <p>Checks whether or not two vertices are in the same ring.</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>vertexA</code></td> <td class="type"> <span class="param-type"><a href="Vertex.html">Vertex</a></span> </td> <td class="description last"><p>A vertex.</p></td> </tr> <tr> <td class="name"><code>vertexB</code></td> <td class="type"> <span class="param-type"><a href="Vertex.html">Vertex</a></span> </td> <td class="description last"><p>A vertex.</p></td> </tr> </tbody> </table> <h5>Returns:</h5> <div class="param-desc"> <p>A boolean indicating whether or not the two vertices are in the same ring.</p> </div> <dl class="param-type"> <dt> Type </dt> <dd> <span class="param-type">boolean</span> </dd> </dl> <h4 class="name" id="backupRingInformation"><span class="type-signature"></span>backupRingInformation<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="SmilesDrawer.js.html">SmilesDrawer.js</a>, <a href="SmilesDrawer.js.html#line2076">line 2076</a> </li></ul></dd> </dl> <div class="description"> <p>Stores the current information associated with rings.</p> </div> <h4 class="name" id="chooseSide"><span class="type-signature"></span>chooseSide<span class="signature">(vertexA, vertexB, sides)</span><span class="type-signature"> &rarr; {object}</span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="SmilesDrawer.js.html">SmilesDrawer.js</a>, <a href="SmilesDrawer.js.html#line1263">line 1263</a> </li></ul></dd> </dl> <div class="description"> <p>When drawing a double bond, choose the side to place the double bond. E.g. a double bond should always been drawn inside a ring.</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>vertexA</code></td> <td class="type"> <span class="param-type"><a href="Vertex.html">Vertex</a></span> </td> <td class="description last"><p>A vertex.</p></td> </tr> <tr> <td class="name"><code>vertexB</code></td> <td class="type"> <span class="param-type"><a href="Vertex.html">Vertex</a></span> </td> <td class="description last"><p>A vertex.</p></td> </tr> <tr> <td class="name"><code>sides</code></td> <td class="type"> <span class="param-type">array</span> </td> <td class="description last"><p>An array containing the two normals of the line spanned by the two provided vertices.</p></td> </tr> </tbody> </table> <h5>Returns:</h5> <div class="param-desc"> <p>Returns an object containing the following information: { totalSideCount: Counts the sides of each vertex in the molecule, is an array [ a, b ], totalPosition: Same as position, but based on entire molecule, sideCount: Counts the sides of each neighbour, is an array [ a, b ], position: which side to position the second bond, is 0 or 1, represents the index in the normal array. This is based on only the neighbours anCount: the number of neighbours of vertexA, bnCount: the number of neighbours of vertexB }</p> </div> <dl class="param-type"> <dt> Type </dt> <dd> <span class="param-type">object</span> </dd> </dl> <h4 class="name" id="clearPositions"><span class="type-signature"></span>clearPositions<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="SmilesDrawer.js.html">SmilesDrawer.js</a>, <a href="SmilesDrawer.js.html#line2035">line 2035</a> </li></ul></dd> </dl> <div class="description"> <p>Reset the positions of rings and vertices. The previous positions will be backed up.</p> </div> <h4 class="name" id="createBridgedRing"><span class="type-signature"></span>createBridgedRing<span class="signature">(ringIds, sourceVertexId)</span><span class="type-signature"> &rarr; {<a href="Ring.html">Ring</a>}</span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="SmilesDrawer.js.html">SmilesDrawer.js</a>, <a href="SmilesDrawer.js.html#line663">line 663</a> </li></ul></dd> </dl> <div class="description"> <p>Creates a bridged ring.</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>ringIds</code></td> <td class="type"> <span class="param-type">array</span> </td> <td class="description last"><p>An array of ids of rings involved in the bridged ring.</p></td> </tr> <tr> <td class="name"><code>sourceVertexId</code></td> <td class="type"> <span class="param-type">number</span> </td> <td class="description last"><p>The vertex id to start the bridged ring discovery from.</p></td> </tr> </tbody> </table> <h5>Returns:</h5> <div class="param-desc"> <p>The bridged ring.</p> </div> <dl class="param-type"> <dt> Type </dt> <dd> <span class="param-type"><a href="Ring.html">Ring</a></span> </dd> </dl> <h4 class="name" id="createNextBond"><span class="type-signature"></span>createNextBond<span class="signature">(vertex, previousVertex, ringOrAngle, dir)</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="SmilesDrawer.js.html">SmilesDrawer.js</a>, <a href="SmilesDrawer.js.html#line2586">line 2586</a> </li></ul></dd> </dl> <div class="description"> <p>Positiones the next vertex thus creating a bond.</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>vertex</code></td> <td class="type"> <span class="param-type"><a href="Vertex.html">Vertex</a></span> </td> <td class="description last"><p>A vertex.</p></td> </tr> <tr> <td class="name"><code>previousVertex</code></td> <td class="type"> <span class="param-type"><a href="Vertex.html">Vertex</a></span> </td> <td class="description last"><p>The previous vertex which has been positioned.</p></td> </tr> <tr> <td class="name"><code>ringOrAngle</code></td> <td class="type"> <span class="param-type">ring</span> | <span class="param-type">number</span> </td> <td class="description last"><p>Either a ring or a number. If the vertex is connected to a ring, it is positioned based on the ring center and thus the ring is supplied. If the vertex is not in a ring, an angle (in radians) is supplied.</p></td> </tr> <tr> <td class="name"><code>dir</code></td> <td class="type"> <span class="param-type">number</span> </td> <td class="description last"><p>Either 1 or -1 to break ties (if no angle can be elucidated.</p></td> </tr> </tbody> </table> <h4 class="name" id="createRing"><span class="type-signature"></span>createRing<span class="signature">(ring, center<span class="signature-attributes">opt</span>, startVertex<span class="signature-attributes">opt</span>, previousVertex<span class="signature-attributes">opt</span>, previousVertex<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="SmilesDrawer.js.html">SmilesDrawer.js</a>, <a href="SmilesDrawer.js.html#line2137">line 2137</a> </li></ul></dd> </dl> <div class="description"> <p>Creates a new ring, that is, positiones all the vertices inside a ring.</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Attributes</th> <th>Default</th>