aboutsummaryrefslogtreecommitdiff
path: root/app/templates/molecule_editor.html
blob: 22d848120b9a0d8aa1ba09c01c2922a6b5a20324 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
{% extends 'base.html' %}

{% block main %}

<h2>Molecule Editor</h2>

<p>Powered by <a href="https://github.com/partridgejiang/Kekule.js">Kekule.js</a>


<h4>Prefer Ketcher instead?</h4>
<p>Click <a href="{{ url_for('static', filename='ketcher/ketcher.html') }}">here.</a></p>

<br>


<script src="https://cdn.jsdelivr.net/npm/kekule@0.9.3/dist/kekule.min.js?modules=chemWidget,algorithm&locals=en"></script>
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/kekule.css') }}" />

  <!--
  <script src="../../../src/kekule.js?modules=chemWidget,algorithm&min=false"></script>
  <link rel="stylesheet" type="text/css" href="../../../src/widgets/themes/default/kekule.css" />
  -->

  <style>
    #chemComposer
    {
      margin: 0;
    }
  </style>

<div id="chemComposer" data-widget="Kekule.Editor.Composer" ></div>

<script>
    var chemEditor;
    var chemComposer;
    function init()
    {
      /*
      var elem = document.getElementById('chemComposer');
      var chemEditor = new Kekule.Editor.ChemSpaceEditor(document, null, Kekule.Render.RendererType.R2D);
      chemComposer = new Kekule.Editor.Composer(elem, chemEditor);
      */
      chemComposer = Kekule.Widget.getWidgetById('chemComposer');
      chemComposer
        .setEnableDimensionTransform(true)
        .setAutoSetMinDimension(true)
        .setAutoResizeConstraints({width: 0.75, height: 0.7})
        .autoResizeToClient();  // force a resize to window client
    }
    Kekule.X.domReady(init);
  </script>

<br>



{% endblock %}