Constructor
new CanvasWrapper(target, themeManager, options)
- Source:
Properties:
Name | Type | Description |
---|---|---|
canvas |
HTMLElement | The HTML element for the canvas associated with this CanvasWrapper instance. |
ctx |
CanvasRenderingContext2D | The CanvasRenderingContext2D of the canvas associated with this CanvasWrapper instance. |
colors |
Object | The colors object as defined in the SmilesDrawer options. |
opts |
Object | The SmilesDrawer options. |
drawingWidth |
Number | The width of the canvas. |
drawingHeight |
Number | The height of the canvas. |
offsetX |
Number | The horizontal offset required for centering the drawing. |
offsetY |
Number | The vertical offset required for centering the drawing. |
fontLarge |
Number | The large font size in pt. |
fontSmall |
Number | The small font size in pt. |
The constructor for the class CanvasWrapper.
Parameters:
Name | Type | Description |
---|---|---|
target |
String | HTMLElement | The canvas id or the canvas HTMLElement. |
themeManager |
ThemeManager | Theme manager for setting proper colors. |
options |
Object | The smiles drawer options object. |
Methods
clear()
- Source:
Clear the canvas.
drawAromaticityRing(ring)
- Source:
Draws a ring inside a provided ring, indicating aromaticity.
Parameters:
Name | Type | Description |
---|---|---|
ring |
Ring | A ring. |
drawBall(x, y, elementName)
- Source:
Draw a ball to the canvas.
Parameters:
Name | Type | Description |
---|---|---|
x |
Number | The x position of the text. |
y |
Number | The y position of the text. |
elementName |
String | The name of the element (single-letter). |
drawCircle(x, y, radius, color, fillopt, debugopt, debugTextopt)
- Source:
Draws a circle to a canvas context.
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
x |
Number | The x coordinate of the circles center. |
||
y |
Number | The y coordinate of the circles center. |
||
radius |
Number | The radius of the circle |
||
color |
String | A hex encoded color. |
||
fill |
Boolean |
<optional> |
true
|
Whether to fill or stroke the circle. |
debug |
Boolean |
<optional> |
false
|
Draw in debug mode. |
debugText |
String |
<optional> |
''
|
A debug message. |
drawDashedWedge(line)
- Source:
Draw a dashed wedge on the canvas.
Parameters:
Name | Type | Description |
---|---|---|
line |
Line | A line. |
drawDebugPoint(x, y, debugTextopt, coloropt)
- Source:
Draws a dubug dot at a given coordinate and adds text.
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
x |
Number | The x coordinate. |
||
y |
Number | The y coordindate. |
||
debugText |
String |
<optional> |
''
|
A string. |
color |
String |
<optional> |
'#f00'
|
A color in hex form. |
drawDebugText(x, y, text)
- Source:
Draws a debug text message at a given position
Parameters:
Name | Type | Description |
---|---|---|
x |
Number | The x coordinate. |
y |
Number | The y coordinate. |
text |
String | The debug text. |
drawLine(line, dashedopt, alphaopt)
- Source:
Draw a line to a canvas.
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
line |
Line | A line. |
||
dashed |
Boolean |
<optional> |
false
|
Whether or not the line is dashed. |
alpha |
Number |
<optional> |
1.0
|
The alpha value of the color. |
drawPoint(x, y, elementName)
- Source:
Draw a point to the canvas.
Parameters:
Name | Type | Description |
---|---|---|
x |
Number | The x position of the point. |
y |
Number | The y position of the point. |
elementName |
String | The name of the element (single-letter). |
drawText(x, y, elementName, hydrogens, direction, isTerminal, charge, isotope, vertexCount, attachedPseudoElement)
- Source:
Draw a text to the canvas.
Parameters:
Name | Type | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
x |
Number | The x position of the text. |
||||||||||||
y |
Number | The y position of the text. |
||||||||||||
elementName |
String | The name of the element (single-letter). |
||||||||||||
hydrogens |
Number | The number of hydrogen atoms. |
||||||||||||
direction |
String | The direction of the text in relation to the associated vertex. |
||||||||||||
isTerminal |
Boolean | A boolean indicating whether or not the vertex is terminal. |
||||||||||||
charge |
Number | The charge of the atom. |
||||||||||||
isotope |
Number | The isotope number. |
||||||||||||
vertexCount |
Number | The number of vertices in the molecular graph. |
||||||||||||
attachedPseudoElement |
Object | A map with containing information for pseudo elements or concatinated elements. The key is comprised of the element symbol and the hydrogen count. Properties
|
drawWedge(line, width)
- Source:
Draw a wedge on the canvas.
Parameters:
Name | Type | Default | Description |
---|---|---|---|
line |
Line | A line. |
|
width |
Number |
1
|
The wedge width. |
getChargeText(charge) → {String}
- Source:
Translate the integer indicating the charge to the appropriate text.
Parameters:
Name | Type | Description |
---|---|---|
charge |
Number | The integer indicating the charge. |
Returns:
A string representing a charge.
- Type
- String
getColor(key) → {String}
- Source:
Returns the hex code of a color associated with a key from the current theme.
Parameters:
Name | Type | Description |
---|---|---|
key |
String | The color key in the theme (e.g. C, N, BACKGROUND, ...). |
Returns:
A color hex value.
- Type
- String
reset()
- Source:
Resets the transform of the canvas.
scale(vertices)
- Source:
Scale the canvas based on vertex positions.
Parameters:
Name | Type | Description |
---|---|---|
vertices |
Array.<Vertex> | An array of vertices containing the vertices associated with the current molecule. |
setTheme(theme)
- Source:
Sets a provided theme.
Parameters:
Name | Type | Description |
---|---|---|
theme |
Object | A theme from the smiles drawer options. |
updateSize(width, height)
- Source:
Update the width and height of the canvas
Parameters:
Name | Type | Description |
---|---|---|
width |
Number | |
height |
Number |