From acb6d452bdf0c32b01af81a8177b85a55564dc8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20Zasso?= Date: Wed, 24 Jul 2024 14:23:06 +0200 Subject: [PATCH] docs: add reset button to demo page --- examples/base.css | 4 +++ examples/generic_editor/demo.html | 14 +++++++-- examples/generic_editor/demo/demo.ts | 33 +++++++------------- examples/generic_editor/demo/editor.ts | 43 ++++++++++++++++++++++++++ examples/generic_editor/demo/result.ts | 25 +++++++++++++++ full.d.ts | 1 + 6 files changed, 96 insertions(+), 24 deletions(-) create mode 100644 examples/generic_editor/demo/editor.ts create mode 100644 examples/generic_editor/demo/result.ts diff --git a/examples/base.css b/examples/base.css index 40971c0b..cd64b6f6 100644 --- a/examples/base.css +++ b/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; } diff --git a/examples/generic_editor/demo.html b/examples/generic_editor/demo.html index a7773ce3..616f63d2 100644 --- a/examples/generic_editor/demo.html +++ b/examples/generic_editor/demo.html @@ -12,7 +12,7 @@

Demo - Generic editor

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 @@

Demo - Generic editor

+
+ + +
Demo - Generic editor style="grid-area: result; grid-template-columns: fit-content(100%) 1fr" >
Change count
-
+
0
ID Code
Molfile
diff --git a/examples/generic_editor/demo/demo.ts b/examples/generic_editor/demo/demo.ts index 6335c78c..aa5411d3 100644 --- a/examples/generic_editor/demo/demo.ts +++ b/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,24 +168,12 @@ 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', @@ -192,7 +181,7 @@ const loadMolecule = document.getElementById( 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); }; diff --git a/examples/generic_editor/demo/editor.ts b/examples/generic_editor/demo/editor.ts new file mode 100644 index 00000000..ee27325f --- /dev/null +++ b/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; +} diff --git a/examples/generic_editor/demo/result.ts b/examples/generic_editor/demo/result.ts new file mode 100644 index 00000000..76817656 --- /dev/null +++ b/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(); +} diff --git a/full.d.ts b/full.d.ts index bbc78b23..7633fdf1 100644 --- a/full.d.ts +++ b/full.d.ts @@ -9,6 +9,7 @@ export { OnChangeEventType, OnChangeEvent, OnChangeListenerCallback, + CanvasEditorMode, CanvasEditorOptions, CanvasEditor, } from './types';