Commit a9a774ef authored by Hervé  MENAGER's avatar Hervé MENAGER
Browse files

refactor smilesDrawer component

- id and smiles are not necessarily coming from a Compound obj.
- add a "theme" option
- increase line thickness a bit


Former-commit-id: 3b59733be379a7c3e8560643e0a3c2107738eb3c
parent c8ff3e37
var drawSmiles = function(){
$('canvas[data-smiles]').each(function(){
var el = this;
var options = {width:$(el).attr('width'), height: $(el).attr('height')};
var options = {width:$(el).attr('width'), height: $(el).attr('height'), bondThickness:1};
var theme = $(el).attr('data-draw-theme') || 'light';
var smilesDrawer = new SmilesDrawer.Drawer(options);
SmilesDrawer.parse($(el).attr('data-smiles'), function(tree) {
// Draw to the canvas
smilesDrawer.draw(tree, el, 'light', false);
smilesDrawer.draw(tree, el, theme, false);
});
})
};
......
......@@ -29,7 +29,7 @@
</div>
<div class="card text-center">
<div class="card-body">
{% include "compound_smiles_draw.html" %}
{% include "compound_smiles_draw.html" with id=compound.id smile=compound.canonical_smile %}
</div>
</div>
</div>
......
<div class="row m-2 border border-info bg-light">
<div class="col-sm-3 border-info d-flex justify-content-center align-content-center">
<a href="/compounds/{{ compound.id }}">{% include "compound_smiles_draw.html" %}</a>
<a href="/compounds/{{ compound.id }}">{% include "compound_smiles_draw.html" with id=compound.id smile=compound.canonical_smile %}</a>
<h2 class="position-absolute" style="top:0.3em; left:0.3em;"><span class="badge badge-dark"><a href="/compounds/{{ compound.id }}">{{ compound.id }}</a></span></h2>
</div>
<div class="col-sm-9">
......
<canvas id="canvas-{{ compound.id }}" width="{{width|default:300}}" height="{{height|default:300}}" data-smiles="{{ compound.canonical_smile }}"></canvas>
<canvas id="canvas-{{ id }}" width="{{width|default:300}}" height="{{height|default:300}}" data-smiles="{{ smile }}" data-draw-theme="{{ theme }}"></canvas>
<div class="p-2">
<div class="card border border-info">
<a href="/compounds/{{ compound.id }}">{% include "compound_smiles_draw.html" %}</a>
<a href="/compounds/{{ compound.id }}">{% include "compound_smiles_draw.html" with id=compound.id smile=compound.canonical_smile %}</a>
<h2 class="position-absolute" style="top:0.3em; left:0.3em;"><span class="badge badge-dark"><a href="/compounds/{{ compound.id }}">{{ compound.id }}</a></span></h2>
<div class="card-body" style="overflow:hidden; word-wrap:break-word;">
{%if compound.common_name %}<p title="Common name">{{ compound.common_name }}</p>{% endif %}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment