Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Generic editor #219

Merged
merged 69 commits into from
Jul 25, 2024
Merged
Changes from 1 commit
Commits
Show all changes
69 commits
Select commit Hold shift + click to select a range
bac7287
feat: add JS API to create a generic editor
targos Feb 9, 2024
4e5f760
chore: add Prettier scripts
targos Feb 10, 2024
054c457
Merge remote-tracking branch 'origin/main' into generic-editor
targos Jul 19, 2024
487fb01
chore: update ESLint config and lint all js code
targos Jul 19, 2024
b8857d5
chore: setup examples deployment with vite
targos Jul 19, 2024
e23ca05
chore: add get-java script
targos Jul 19, 2024
b697160
chore: fix jdk PATH syntax
targos Jul 19, 2024
2a5f763
chore: use Node.js 22 for build
targos Jul 19, 2024
d6a206b
wip: start working on CanvasEditor extension
targos Jul 19, 2024
7d44b49
feat: move poc code from examples to lib and install CanvasEditor in …
targos Jul 22, 2024
416a4ee
chore: remove unused imports
targos Jul 22, 2024
a470dce
chore: migrate poc page to ts
targos Jul 22, 2024
2fb5012
fix: grabFocus from java preventScroll now
tpoisseau Jul 23, 2024
cf77094
fix(Dialog): button ok on the right, cancel on the left
tpoisseau Jul 23, 2024
e0ed340
docs: add jsdoc to all CanvasEditor methods
targos Jul 23, 2024
7728439
chore: use correct hashbang in get-* scripts
targos Jul 23, 2024
579a66e
refactor: extract UI helper to separate class and use 16px cursor
targos Jul 23, 2024
57451bf
chore: add idea config for java modules
tpoisseau Jul 23, 2024
00a07e7
fix: repaint editor area after Dialog fireOk
tpoisseau Jul 23, 2024
e1c5007
fix: properly bind clickCount from dom mouse events to java fireMouse…
tpoisseau Jul 23, 2024
ec567e3
fix: use 24px size for cursors
targos Jul 23, 2024
9d60d9f
fix: implement drawRectangle
targos Jul 23, 2024
5951f11
feat: add readonly mode
tpoisseau Jul 23, 2024
9c0eb44
Merge remote-tracking branch 'origin/generic-editor' into generic-editor
tpoisseau Jul 23, 2024
581bba4
refactor: move readOnly to an options object
targos Jul 23, 2024
03ccf21
feat: add destroy method for cleanup
targos Jul 24, 2024
aecd411
feat: add support for touch screens
targos Jul 24, 2024
1f1da4e
refactor: restructure demo code
targos Jul 24, 2024
61f17d5
chore: add TailwindCSS for demo styles
targos Jul 24, 2024
c2a515c
feat: add option to set initial mode
targos Jul 24, 2024
acb6d45
docs: add reset button to demo page
targos Jul 24, 2024
df193bc
docs: retitle demo page
targos Jul 24, 2024
f63e816
feat: add clearAll method
targos Jul 24, 2024
e3e3bb9
fix: set highlight color to blue
tpoisseau Jul 24, 2024
34da498
Merge remote-tracking branch 'origin/generic-editor' into generic-editor
tpoisseau Jul 24, 2024
f178b1e
refactor: move seeds data
tpoisseau Jul 24, 2024
198f11f
fix: do not make first draw to soon
tpoisseau Jul 24, 2024
999f091
fix: draw toolbar before editor area
targos Jul 24, 2024
b939181
fix: select current tool before redraw
targos Jul 24, 2024
f6025c3
fix: jsDialog
targos Jul 24, 2024
9d5ebee
docs: update demo examples
targos Jul 24, 2024
c4ca78b
feat: prepare custom element
tpoisseau Jul 24, 2024
b6dfe35
Merge remote-tracking branch 'origin/generic-editor' into generic-editor
tpoisseau Jul 24, 2024
a915040
refactor: use animation frame to repaint editor area
targos Jul 25, 2024
f5422f0
refactor: init of canvas editor
targos Jul 25, 2024
8b8cb07
feat: add `getMode` method
targos Jul 25, 2024
2a79004
docs: empty all results on reset
targos Jul 25, 2024
467259a
docs: remove unused variable
targos Jul 25, 2024
f7eda57
chore: update exposed name
targos Jul 25, 2024
1e542ac
chore: continue implem of custom element
tpoisseau Jul 25, 2024
a3c6b70
Merge remote-tracking branch 'origin/generic-editor' into generic-editor
tpoisseau Jul 25, 2024
5a787be
fix: allow backspace for delete actions
targos Jul 25, 2024
55d9760
fix: add more checks for not destroyed
targos Jul 25, 2024
e67a254
fix: only create toolbar canvas if needed
targos Jul 25, 2024
ba0e4fb
docs: add readonly option to init and display molfile v2
targos Jul 25, 2024
dc6cb18
feat: add initialFragment option and trigger update on dialog submit
targos Jul 25, 2024
420361b
chore: update submodule
targos Jul 25, 2024
898d829
fix: rxn v3 bug
targos Jul 25, 2024
c2c9393
test: update snapshot
targos Jul 25, 2024
8e1d4b9
chore: continue implem of custom element
tpoisseau Jul 25, 2024
0b67d9c
chore: cast dom attributes values
tpoisseau Jul 25, 2024
d486cdc
fix: chromium derived do not support custom element extending builtin…
tpoisseau Jul 25, 2024
0bab565
fix: init and document styling
tpoisseau Jul 25, 2024
220bfde
fix: center dialog and isolate it with shadow dom
targos Jul 25, 2024
282d6a2
fix: remove shadow root from custom element
targos Jul 25, 2024
959e16d
refactor: do not init for nothing
targos Jul 25, 2024
d0de3da
fix: run mutatorHandler if this.#editor is defined
tpoisseau Jul 25, 2024
70bacec
chore: run Prettier
targos Jul 25, 2024
a4bcddb
docs: keep default height
targos Jul 25, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
docs: add reset button to demo page
  • Loading branch information
targos committed Jul 24, 2024
commit acb6d452bdf0c32b01af81a8177b85a55564dc8f
4 changes: 4 additions & 0 deletions examples/base.css
Original file line number Diff line number Diff line change
@@ -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;
}
14 changes: 12 additions & 2 deletions examples/generic_editor/demo.html
Original file line number Diff line number Diff line change
@@ -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>
33 changes: 11 additions & 22 deletions examples/generic_editor/demo/demo.ts
Original file line number Diff line number Diff line change
@@ -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);
};
43 changes: 43 additions & 0 deletions examples/generic_editor/demo/editor.ts
Original file line number Diff line number Diff line change
@@ -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;
}
25 changes: 25 additions & 0 deletions examples/generic_editor/demo/result.ts
Original file line number Diff line number Diff line change
@@ -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();
}
1 change: 1 addition & 0 deletions full.d.ts
Original file line number Diff line number Diff line change
@@ -9,6 +9,7 @@ export {
OnChangeEventType,
OnChangeEvent,
OnChangeListenerCallback,
CanvasEditorMode,
CanvasEditorOptions,
CanvasEditor,
} from './types';
Loading