feat: add OCL Reaction editor module

Author: targos

package-lock.json

@@ -82,7 +82,7 @@
     "mf-parser": "^1.5.0",
     "mime-types": "^2.1.35",
     "node-jsgraph": "2.4.15",
-    "openchemlib": "^9.6.0",
+    "openchemlib": "^9.14.0",
     "quill": "2.0.2",
     "quill-resize-module": "^2.0.4",
     "quill-table-better": "^1.2.1",
@@ -92,6 +92,6 @@
     "twig": "^1.17.1"
   },
   "volta": {
-    "node": "20.19.1"
+    "node": "20.19.5"
   }
 }

package.json

@@ -12,6 +12,10 @@
       "moduleName": "OCL Molecule editor",
       "url": "modules/types/science/chemistry/ocl_editor/"
     },
+    {
+      "moduleName": "OCL Reaction editor",
+      "url": "modules/types/science/chemistry/ocl_reaction_editor/"
+    },
     {
       "moduleName": "Periodic table",
       "url": "modules/types/science/chemistry/periodic_table/"

src/modules/types/science/chemistry/folder.json

@@ -21,7 +21,7 @@ define([
           'modules/types/science/chemistry/ocl_editor/help.html',
         );
         ui.dialog(
-          `<iframe src=${url} width="100%", height="100%" frameBorder="0"></iframe>`,
+          `<iframe src=${url} width="100%" height="100%" frameBorder="0"></iframe>`,
           {
             width: Math.min(w - 40, 800),
             height: h - 70,
@@ -103,7 +103,7 @@ define([
 
   Controller.prototype.moduleInformation = {
     name: 'OCL Molecule editor',
-    description: 'Molecule editor using the openchemlib javascript library',
+    description: 'Molecule editor using the OpenChemLib JavaScript library',
     author: 'Michael Zasso',
     date: '11.05.2015',
     license: 'BSD',

src/modules/types/science/chemistry/ocl_editor/controller.js

@@ -0,0 +1,87 @@
+'use strict';
+
+define([
+  'modules/default/defaultcontroller',
+  'openchemlib',
+  'src/util/ui',
+], function (Default, OCL, ui) {
+  function Controller() {
+    this.currentReaction = '';
+  }
+
+  $.extend(true, Controller.prototype, Default);
+
+  Controller.prototype.getToolbar = function () {
+    const base = Default.getToolbar.call(this);
+    base.unshift({
+      onClick() {
+        const w = $(window).width();
+        const h = $(window).height();
+        const url = require.toUrl(
+          'modules/types/science/chemistry/ocl_editor/help.html',
+        );
+        ui.dialog(
+          `<iframe src=${url} width="100%" height="100%" frameBorder="0"></iframe>`,
+          {
+            width: Math.min(w - 40, 800),
+            height: h - 70,
+            title: 'OpenChemLib editor Help',
+          },
+        );
+      },
+      title: 'Help',
+      cssClass: 'fa fa-question',
+      ifLocked: true,
+    });
+    return base;
+  };
+
+  Controller.prototype.moduleInformation = {
+    name: 'OCL Reaction editor',
+    description: 'Reaction editor using the OpenChemLib JavaScript library',
+    author: 'Michael Zasso',
+    date: '29.10.2025',
+    license: 'BSD',
+    cssClass: 'ocl_reaction_editor',
+  };
+
+  Controller.prototype.references = {};
+
+  Controller.prototype.variablesIn = [];
+
+  Controller.prototype.events = {};
+
+  Controller.prototype.actionsIn = $.extend({}, Default.actionsIn, {});
+
+  Controller.prototype.configurationStructure = function () {
+    return {
+      groups: {
+        group: {
+          options: { type: 'list' },
+          fields: {
+            prefs: {
+              type: 'checkbox',
+              title: 'Options',
+              options: {
+                queryFeatures: 'Enable query features',
+                inPlace: 'Modify input variable',
+              },
+            },
+          },
+        },
+      },
+    };
+  };
+
+  Controller.prototype.configAliases = {
+    prefs: ['groups', 'group', 0, 'prefs', 0],
+  };
+
+  Controller.prototype.onChange = function (event, reaction) {
+    const inPlace = this.module.getConfigurationCheckbox('prefs', 'inPlace');
+
+    // TODO: handle reaction change
+  };
+
+  return Controller;
+});

src/modules/types/science/chemistry/ocl_reaction_editor/controller.js

@@ -0,0 +1,9 @@
+'use strict';
+
+define(['modules/default/defaultmodel'], function (Default) {
+  function Model() {}
+
+  $.extend(true, Model.prototype, Default);
+
+  return Model;
+});

src/modules/types/science/chemistry/ocl_reaction_editor/model.js

@@ -0,0 +1,61 @@
+'use strict';
+
+define(['modules/default/defaultview', 'src/util/ui', 'openchemlib'], function (
+  Default,
+  ui,
+  OCL,
+) {
+  function View() {}
+
+  $.extend(true, View.prototype, Default, {
+    init() {
+      this.editor = null;
+    },
+
+    inDom() {
+      this.dom = $('<div>').css({
+        height: '99%',
+        width: '100%',
+      });
+      this.module.getDomContent().html(this.dom);
+    },
+
+    onResize() {
+      this.dom.empty();
+      this.initEditor();
+    },
+
+    blank: {},
+
+    onActionReceive: {},
+
+    update: {},
+
+    initEditor() {
+      const controller = this.module.controller;
+      this.editor = new OCL.CanvasEditor(this.dom.get(0), {
+        initialMode: 'reaction',
+      });
+      this.editor.setOnChangeListener((event) =>
+        controller.onChange(event, this.editor.getReaction()),
+      );
+      const reaction =
+        OCL.ReactionEncoder.decode(controller.currentReaction) ||
+        OCL.Reaction.create();
+      reaction.setFragment(
+        this.module.getConfigurationCheckbox('prefs', 'queryFeatures'),
+      );
+      this.editor.setReaction(reaction);
+      this.resolveReady();
+    },
+
+    clearEditor() {
+      this._currentValue = null;
+      this._currentType = null;
+      this.editor.getReaction().clear();
+      this.editor.moleculeChanged();
+    },
+  });
+
+  return View;
+});