feat: implement generic editor (#219)

Closes: #136
Refs: Actelion/openchemlib#111
Co-authored-by: tpoisseau <[email protected]>

.github/workflows/nodejs.yml

@@ -49,9 +49,9 @@ jobs:
         run: npm run build-debug-full
       - name: Upload debug build and logs
         if: failure()
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
-          name: debug-build
+          name: debug-build-${{ matrix.node-version }}
           path: |
             dist/openchemlib-full.pretty.js
             compile-full.log

.gitignore

@@ -9,5 +9,9 @@ war/**
 *.log
 /gwt/
 gwt.zip
+/jdk/
+jdk.tar.gz
 /dist/
+/distbuild/
 /distold/
+/distesm/

.node-version

@@ -0,0 +1 @@
+22

.prettierignore

@@ -0,0 +1,9 @@
+/CHANGELOG.md
+/dist
+/distbuild
+/distesm
+/distold
+/gwt
+/lib/canvas_editor/cursors_24px.js
+/openchemlib
+/war

.run/Build java.run.xml

@@ -0,0 +1,17 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Build java" type="ShConfigurationType">
+    <option name="SCRIPT_TEXT" value="npm run build-full-pretty" />
+    <option name="INDEPENDENT_SCRIPT_PATH" value="true" />
+    <option name="SCRIPT_PATH" value="" />
+    <option name="SCRIPT_OPTIONS" value="" />
+    <option name="INDEPENDENT_SCRIPT_WORKING_DIRECTORY" value="true" />
+    <option name="SCRIPT_WORKING_DIRECTORY" value="$PROJECT_DIR$" />
+    <option name="INDEPENDENT_INTERPRETER_PATH" value="true" />
+    <option name="INTERPRETER_PATH" value="/bin/zsh" />
+    <option name="INTERPRETER_OPTIONS" value="" />
+    <option name="EXECUTE_IN_TERMINAL" value="true" />
+    <option name="EXECUTE_SCRIPT_FILE" value="false" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>

.run/Run JS DEV.run.xml

@@ -0,0 +1,7 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Run JS DEV" type="CompoundRunConfigurationType">
+    <toRun name="build-esm-bundle-watch" type="js.build_tools.npm" />
+    <toRun name="vite" type="js.build_tools.npm" />
+    <method v="2" />
+  </configuration>
+</component>

.run/build-esm-bundle-watch.run.xml

@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="build-esm-bundle-watch" type="js.build_tools.npm" nameIsGenerated="true">
+    <package-json value="$PROJECT_DIR$/package.json" />
+    <command value="run" />
+    <scripts>
+      <script value="build-esm-bundle-watch" />
+    </scripts>
+    <node-interpreter value="project" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>

.run/vite.run.xml

@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="vite" type="js.build_tools.npm" nameIsGenerated="true">
+    <package-json value="$PROJECT_DIR$/package.json" />
+    <command value="run" />
+    <scripts>
+      <script value="vite" />
+    </scripts>
+    <node-interpreter value="project" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>

__tests__/SmilesParser.js

@@ -124,7 +124,7 @@ it('should should optionally not invent coordinates', () => {
 
 it('should should optionally not parse stereo features', () => {
   const parser = new SmilesParser();
-  const vitaminA = 'C/C(=C\\CO)/C=C/C=C(/C)\\C=C\\C1=C(C)CCCC1(C)C';
+  const vitaminA = String.raw`C/C(=C\CO)/C=C/C=C(/C)\C=C\C1=C(C)CCCC1(C)C`;
   const molecule = new Molecule(0, 0);
   parser.parseMolecule(vitaminA, { molecule, noStereo: true });
   const idCodeWithoutStereo = molecule.getIDCode();

__tests__/__snapshots__/library.js.snap

@@ -2,6 +2,8 @@
 
 exports[`prototype properties of CanonizerUtil 1`] = `[]`;
 
+exports[`prototype properties of CanvasEditor 1`] = `[]`;
+
 exports[`prototype properties of ConformerGenerator 1`] = `
 [
   "getConformerCount",
@@ -405,6 +407,8 @@ exports[`prototype properties of Transformer 1`] = `
 
 exports[`prototype properties of Util 1`] = `[]`;
 
+exports[`prototype properties of registerCustomElement 1`] = `[]`;
+
 exports[`static properties of CanonizerUtil 1`] = `
 [
   "BACKBONE",
@@ -416,6 +420,8 @@ exports[`static properties of CanonizerUtil 1`] = `
 ]
 `;
 
+exports[`static properties of CanvasEditor 1`] = `[]`;
+
 exports[`static properties of ConformerGenerator 1`] = `
 [
   "STRATEGY_ADAPTIVE_RANDOM",
@@ -776,3 +782,5 @@ exports[`static properties of Util 1`] = `
   "getHoseCodesFromDiastereotopicID",
 ]
 `;
+
+exports[`static properties of registerCustomElement 1`] = `[]`;

__tests__/__snapshots__/reaction.js.snap

@@ -68,7 +68,8 @@ exports[`Reaction class should load and create RXN files 2`] = `
 
 
 OCL_RXN_V1.0:gJX@@eKU@@ gGQHDHaInfh@!gJX@@eKU@@ fHdP@@##!ROvp@[C}c@FNZz@@ !R_\`CW?Hc|_\`BH_Ykh@@ !ROvp@[C}c@FNZz@@ !RGP@@##
- VM  V30 BEGIN REACTANT
+M  V30 COUNTS 2 2
+M  V30 BEGIN REACTANT
 M  V30 BEGIN CTAB
 M  V30 COUNTS 6 5 0 0 0
 M  V30 BEGIN ATOM

__tests__/library.js

@@ -31,7 +31,13 @@ const coreAPI = [
   'Transformer',
 ];
 
-const fullAPI = ['StructureView', 'StructureEditor', 'SVGRenderer'];
+const fullAPI = [
+  'CanvasEditor',
+  'registerCustomElement',
+  'StructureView',
+  'StructureEditor',
+  'SVGRenderer',
+];
 
 const allAPI = [...minimalAPI, ...coreAPI, ...fullAPI];
 
@@ -47,12 +53,12 @@ test('core', () => {
 });
 
 test('full', () => {
-  [full, pretty].forEach((lib) => {
+  for (const lib of [full, pretty]) {
     checkHas(lib, allAPI);
-  });
+  }
 });
 
-allAPI.forEach((key) => {
+for (const key of allAPI) {
   const api = full[key];
   if (typeof api === 'function') {
     test(`static properties of ${key}`, () => {
@@ -64,16 +70,16 @@ allAPI.forEach((key) => {
       });
     }
   }
-});
+}
 
 function checkHas(obj, properties) {
   expect(Object.keys(obj).sort()).toStrictEqual(properties.sort());
 }
 
 function checkHasNot(obj, properties) {
-  properties.forEach((prop) => {
+  for (const prop of properties) {
     expect(obj).not.toHaveProperty(prop);
-  });
+  }
 }
 
 function getFilteredKeys(obj) {

__tests__/molecule.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const fs = require('fs');
+const fs = require('node:fs');
 
 const { Molecule } = require('../minimal');
 

__tests__/molfileAndAtomMapNo.test.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { readFileSync } = require('fs');
+const { readFileSync } = require('node:fs');
 
 const { Molecule } = require('../minimal');
 
@@ -11,9 +11,11 @@ test('molfile with atomMapNo', () => {
   const newMolfile = molecule.toMolfile();
   const atomMapNo = newMolfile
     .split(/\r?\n/)
-    .filter((line) => line.match(/ [OCH] /))
-    // eslint-disable-next-line prefer-named-capture-group
-    .map((line) => line.replace(/.* ([OCH]) .*(.) {2}0 {2}0$/, '$1 $2'));
+    .filter((line) => line.match(/ [CHO] /))
+    .map((line) =>
+      line.replace(/.* (?<och>[CHO]) .*(?<n>.) {2}0 {2}0$/, '$<och> $<n>'),
+    );
+
   expect(atomMapNo).toStrictEqual(['O 5', 'C 1', 'C 3', 'C 4', 'H 2']);
 
   const svg = molecule.toSVG(300, 200);

__tests__/sssearcher.js

@@ -10,8 +10,7 @@ describe('SSSearcher', () => {
   let benzeneFragment = Molecule.fromSmiles('c1ccccc1');
   benzeneFragment.setFragment(true);
   let ethylBenzene = Molecule.fromSmiles('CCc1ccccc1');
-  let allicin = Molecule.fromSmiles('O=S(SC\\C=C)C\\C=C');
-
+  let allicin = Molecule.fromSmiles(String.raw`O=S(SC\C=C)C\C=C`);
   it('should find in itself', () => {
     let searcher = new SSSearcher();
     searcher.setMolecule(benzene);

__tests__/sssearcher_with_index.js

@@ -120,7 +120,7 @@ function getTestData() {
   const ethylBenzene = Molecule.fromSmiles('CCc1ccccc1');
   const ethylBenzeneIndex = searcher.createIndex(ethylBenzene);
 
-  const allicin = Molecule.fromSmiles('O=S(SC\\C=C)C\\C=C');
+  const allicin = Molecule.fromSmiles(String.raw`O=S(SC\C=C)C\C=C`);
   const allicinIndex = searcher.createIndex(allicin);
   return {
     benzene,

benchmark/diastereoID.mjs

@@ -0,0 +1,16 @@
+import { getDiastereotopicAtomIDs } from 'openchemlib-utils';
+
+import { Molecule, version } from '../full.js';
+
+console.log('OCL version', version);
+console.time('diastereoID');
+const response = await fetch('https://wikipedia.cheminfo.org/data.json');
+const { data } = await response.json();
+let totalLength = 0;
+for (const entry of data.molecules.slice(0, 700)) {
+  const molecule = Molecule.fromIDCode(entry.idCode);
+  const ids = getDiastereotopicAtomIDs(molecule);
+  totalLength += ids.length;
+}
+console.timeEnd('diastereoID');
+console.log(totalLength);

benchmark/molfile.js → benchmark/molfile.mjs

@@ -1,9 +1,7 @@
-'use strict';
+import Benchmark from 'benchmark';
 
-const Benchmark = require('benchmark');
-
-const OCLOld = require('../distold/openchemlib-full.pretty');
-const OCLNew = require('../full.pretty');
+import OCLOld from '../distold/openchemlib-full.pretty.js';
+import OCLNew from '../full.pretty.js';
 
 const idcode = 'enYXNH@MHDAELem`OCIILdhhdiheCDlieKDdefndZRVVjjfjjfjihJBbb@@@';
 const mol = OCLNew.Molecule.fromIDCode(idcode);

benchmark/sssearcher.js → benchmark/sssearcher.mjs

@@ -1,9 +1,7 @@
-'use strict';
+import Benchmark from 'benchmark';
 
-const Benchmark = require('benchmark');
-
-const OCLOld = require('../distold/openchemlib-full.pretty');
-const OCLNew = require('../full.pretty');
+import OCLOld from '../distold/openchemlib-full.pretty.js';
+import OCLNew from '../full.pretty.js';
 
 let benzeneFragmentNew = OCLNew.Molecule.fromSmiles('c1ccccc1');
 benzeneFragmentNew.setFragment(true);

benchmark/wikipedia.mjs

@@ -0,0 +1,14 @@
+import { Molecule, version } from '../full.js';
+
+console.log('OCL version', version);
+console.time('wikipedia');
+const response = await fetch('https://wikipedia.cheminfo.org/data.json');
+const { data } = await response.json();
+const idCodes = [];
+for (const entry of data.molecules.slice(0, 10000)) {
+  const molecule = Molecule.fromIDCode(entry.idCode);
+  const idCode = molecule.getIDCode();
+  idCodes.push(idCode);
+}
+console.timeEnd('wikipedia');
+console.log(idCodes.join(',').length);