docs: add reset button to demo page

examples/base.css

@@ -14,6 +14,10 @@ button {
   @apply bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white py-1 px-2 rounded;
 }
 
+select {
+  @apply bg-white border border-gray-400 hover:border-gray-500 py-1 px-2 rounded;
+}
+
 h1 {
   @apply text-3xl font-bold mb-3;
 }

examples/generic_editor/demo.html

@@ -12,7 +12,7 @@ <h1>Demo - Generic editor</h1>
       class="grid gap-2"
       style="
         grid-template-rows: 30px 600px 30px;
-        grid-template-columns: 100px 600px;
+        grid-template-columns: 150px 600px;
         grid-template-areas:
           '.            top-actions .     '
           'left-actions editor      result'
@@ -24,6 +24,16 @@ <h1>Demo - Generic editor</h1>
         <button id="loadFragment">Load fragment</button>
         <button id="loadReaction">Load reaction</button>
       </div>
+      <div class="flex flex-col gap-1" style="grid-area: left-actions">
+        <label>
+          Mode:
+          <select id="modeSelect" class="w-full">
+            <option value="molecule">Molecule</option>
+            <option value="reaction">Reaction</option>
+          </select>
+        </label>
+        <button id="resetButton">Reset</button>
+      </div>
       <div
         id="editor"
         class="border border-blue-300"
@@ -34,7 +44,7 @@ <h1>Demo - Generic editor</h1>
         style="grid-area: result; grid-template-columns: fit-content(100%) 1fr"
       >
         <div>Change count</div>
-        <div id="changeCount"></div>
+        <div id="changeCount">0</div>
         <div>ID Code</div>
         <div id="idcode"></div>
         <div>Molfile</div>

examples/generic_editor/demo/demo.ts

@@ -1,6 +1,7 @@
 import OCL from '../../../distesm/full.pretty';
+import { getEditor, resetEditor } from './editor.ts';
 
-const { CanvasEditor, Molecule, Reaction } = OCL;
+const { Molecule, Reaction } = OCL;
 
 const rxn = `$RXN
 
@@ -167,32 +168,20 @@ const molfile = `446220
  22 43  1  0  0  0  0
 M  END`;
 
-const changeCountDiv = document.getElementById('changeCount') as HTMLElement;
-const idcodeDiv = document.getElementById('idcode') as HTMLElement;
-const molfileDiv = document.getElementById('molfile') as HTMLElement;
-let changeCount = 0;
-
-const editorElement = document.getElementById('editor') as HTMLElement;
-const editor = new CanvasEditor(editorElement, {
-  initialMode: 'molecule',
-});
-
-editor.setOnChangeListener(({ type, isUserEvent }) => {
-  if (isUserEvent && type === 'molecule') {
-    changeCountDiv.innerText = String(++changeCount);
-    const idcodeAndCoords = editor.getMolecule().getIDCodeAndCoordinates();
-    idcodeDiv.innerText = `${idcodeAndCoords.idCode} ${idcodeAndCoords.coordinates}`;
-    molfileDiv.innerText = editor.getMolecule().toMolfileV3();
-  }
-});
+resetEditor();
+
+const resetButton = document.getElementById('resetButton') as HTMLButtonElement;
+resetButton.onclick = () => {
+  resetEditor();
+};
 
 const loadMolecule = document.getElementById(
   'loadMolecule',
 ) as HTMLButtonElement;
 loadMolecule.onclick = () => {
   // const molecule = Molecule.fromMolfile(molfile);
   const molecule = Molecule.fromSmiles('c1ccccc1CO');
-  editor.setMolecule(molecule);
+  getEditor().setMolecule(molecule);
 };
 
 const loadFragment = document.getElementById(
@@ -202,7 +191,7 @@ loadFragment.onclick = () => {
   // const molecule = Molecule.fromMolfile(molfile);
   const molecule = Molecule.fromSmiles('CCC');
   molecule.setFragment(true);
-  editor.setMolecule(molecule);
+  getEditor().setMolecule(molecule);
 };
 
 const loadReaction = document.getElementById(
@@ -213,5 +202,5 @@ loadReaction.onclick = () => {
   // const reaction = Reaction.fromRxn(rxn);
   // reaction.addCatalyst(Molecule.fromSmiles('CO'));
   console.log(reaction.toSmiles());
-  editor.setReaction(reaction);
+  getEditor().setReaction(reaction);
 };

examples/generic_editor/demo/editor.ts

@@ -0,0 +1,43 @@
+import OCL from '../../../distesm/full.pretty';
+import {
+  incrementChangeCount,
+  resetChangeCount,
+  updateIDCode,
+  updateMolfile,
+} from './result.ts';
+
+let editor: OCL.CanvasEditor | undefined;
+
+export function resetEditor() {
+  if (editor) {
+    editor.destroy();
+  }
+  const modeSelect = document.getElementById('modeSelect') as HTMLSelectElement;
+  const newEditor = new OCL.CanvasEditor(
+    document.getElementById('editor') as HTMLElement,
+    {
+      initialMode: modeSelect.value as OCL.CanvasEditorMode,
+    },
+  );
+
+  editor = newEditor;
+
+  resetChangeCount();
+
+  editor.setOnChangeListener(({ type, isUserEvent }) => {
+    if (type === 'molecule') {
+      if (isUserEvent) {
+        incrementChangeCount();
+      }
+      updateIDCode(newEditor.getMolecule());
+      updateMolfile(newEditor.getMolecule());
+    }
+  });
+}
+
+export function getEditor(): OCL.CanvasEditor {
+  if (!editor) {
+    throw new Error('Editor not initialized');
+  }
+  return editor;
+}

examples/generic_editor/demo/result.ts

@@ -0,0 +1,25 @@
+import OCL from '../../../distesm/full.pretty';
+
+const changeCountDiv = document.getElementById('changeCount') as HTMLElement;
+
+export function incrementChangeCount() {
+  const currentChangeCount = parseInt(changeCountDiv.innerText, 10);
+  changeCountDiv.innerText = String(currentChangeCount + 1);
+}
+
+export function resetChangeCount() {
+  changeCountDiv.innerText = '0';
+}
+
+const idcodeDiv = document.getElementById('idcode') as HTMLElement;
+
+export function updateIDCode(molecule: OCL.Molecule) {
+  const idcodeAndCoords = molecule.getIDCodeAndCoordinates();
+  idcodeDiv.innerText = `${idcodeAndCoords.idCode} ${idcodeAndCoords.coordinates}`;
+}
+
+const molfileDiv = document.getElementById('molfile') as HTMLElement;
+
+export function updateMolfile(molecule: OCL.Molecule) {
+  molfileDiv.innerText = molecule.toMolfileV3();
+}

full.d.ts

@@ -9,6 +9,7 @@ export {
   OnChangeEventType,
   OnChangeEvent,
   OnChangeListenerCallback,
+  CanvasEditorMode,
   CanvasEditorOptions,
   CanvasEditor,
 } from './types';