added Molecule Editor

app/templates/home.html

@@ -23,6 +23,7 @@
 
     <h3>Misc.</h3>
     <ul>
+        <li><a href="{{url_for('editor')}}">Editor</a> - Simple Molecular Editor powered by Kekule.js</li>
         <li><a href="{{ url_for('status')}}">Job Status</a> - Check the job status </li>
         <li><a href="{{ url_for('visualise')}}">Visualise</a> - Molecular Viewer </li>
     </ul>

app/templates/molecule_editor.html

@@ -0,0 +1,51 @@
+{% extends 'base.html' %}
+
+{% block main %}
+
+<h2>Molecule Editor</h2>
+
+<p>Powered by <a href="https://github.com/partridgejiang/Kekule.js">Kekule.js</a>
+
+<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 %}

app/views.py

@@ -45,6 +45,11 @@ def about():
     """Render about page."""
     return render_template('about.html')
 
+@app.route('/Editor')
+def editor():
+    """Render Molecular Editor"""
+    return render_template('molecule_editor.html')
+
 @app.route('/Visualise')
 def visualise():
     """Render visualisation page."""