wip: start working on CanvasEditor extension

cheminfo · Jul 19, 2024 · d6a206b · d6a206b
1 parent 2a5f763
commit d6a206b
Show file tree

Hide file tree

Showing 14 changed files with 65 additions and 12 deletions.
diff --git a/.node-version b/.node-version
@@ -1 +1 @@
-22.4.1
+22
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -18,7 +18,7 @@ export default [
   ...cheminfo,
   ...unicorn,
   {
-    files: ['*.js'],
+    files: ['*.js', 'lib/**'],
     languageOptions: {
       sourceType: 'commonjs',
     },

diff --git a/examples/css/generic_editor.css b/examples/css/generic_editor.css
@@ -0,0 +1,5 @@
+#editor-area {
+  width: 600px;
+  height: 600px;
+  background-color: #b5e2ff;
+}
diff --git a/examples/generic-editor.ts b/examples/generic-editor.ts
diff --git a/examples/generic-editor.html → examples/generic_editor.html b/examples/generic-editor.html → examples/generic_editor.html
@@ -4,10 +4,11 @@
   <head>
     <title>Generic editor - OpenChemLib JS examples</title>
     <link rel="stylesheet" href="css/base.css" />
+    <link rel="stylesheet" href="css/generic_editor.css" />
   </head>
   <body>
     <h1>Generic editor</h1>
     <div id="editor-area"></div>
-    <script type="module" src="generic-editor.ts"></script>
+    <script type="module" src="generic_editor.ts"></script>
   </body>
 </html>
diff --git a/examples/generic_editor.ts b/examples/generic_editor.ts
@@ -0,0 +1,12 @@
+import OCL from '../distesm/full.pretty';
+
+const editorArea = document.getElementById('editor-area') as HTMLElement;
+
+const editor = new OCL.CanvasEditor(editorArea, {
+  width: 500,
+  height: 500,
+});
+
+const molecule = OCL.Molecule.fromSmiles('COCO');
+
+editor.setMolecule(molecule);
diff --git a/examples/index.html b/examples/index.html
@@ -8,7 +8,7 @@
   <body>
     <h1>OpenChemLib JS examples</h1>
     <ul>
-      <li><a href="generic-editor.html">Generic editor</a></li>
+      <li><a href="generic_editor.html">Generic editor</a></li>
     </ul>
   </body>
 </html>
diff --git a/full.d.ts b/full.d.ts
@@ -6,4 +6,5 @@ export {
   AtomHighlightCallback,
   BondHighlightCallback,
   ChangeListenerCallback,
+  CanvasEditor,
 } from './types';
diff --git a/full.js b/full.js
@@ -1,6 +1,9 @@
 'use strict';
 
 const OCL = require('./dist/openchemlib-full.js');
+const createCanvasEditor = require('./lib/canvas_editor');
+
+exports.CanvasEditor = createCanvasEditor(OCL.EditorArea, OCL.EditorToolbar);
 
 exports.default = OCL;
 exports.CanonizerUtil = OCL.CanonizerUtil;

diff --git a/full.pretty.js b/full.pretty.js
@@ -1,6 +1,9 @@
 'use strict';
 
 const OCL = require('./dist/openchemlib-full.pretty.js');
+const createCanvasEditor = require('./lib/canvas_editor');
+
+exports.CanvasEditor = createCanvasEditor(OCL.EditorArea, OCL.EditorToolbar);
 
 exports.default = OCL;
 exports.CanonizerUtil = OCL.CanonizerUtil;

diff --git a/index.html b/index.html
@@ -3,9 +3,9 @@
 <html lang="en">
   <head>
     <title>Redirecting...</title>
-    <meta http-equiv="refresh" content="0; url=examples/" />
+    <meta http-equiv="refresh" content="0; url=/examples/" />
   </head>
   <body>
-    <p>Redirecting to <a href="examples/">examples/</a>...</p>
+    <p>Redirecting to <a href="/examples/">/examples/</a>...</p>
   </body>
 </html>
diff --git a/lib/canvas_editor/index.js b/lib/canvas_editor/index.js
@@ -0,0 +1,12 @@
+'use strict';
+
+function createCanvasEditor(EditorArea, EditorToolbar) {
+  return class CanvasEditor {
+    setMolecule(molecule) {
+      console.log('WITH WATCH');
+      this.molecule = molecule;
+    }
+  };
+}
+
+module.exports = createCanvasEditor;
diff --git a/package.json b/package.json
@@ -22,8 +22,10 @@
     "build-debug-minimal": "npm run build:pretty -- -m minimal --verbose",
     "build-minimal": "npm run build:min -- -m minimal",
     "build-full-pretty": "npm run build:pretty -- -m full",
-    "build-esm": "npm run build-full-pretty && npm run build-esm-bundle",
-    "build-esm-bundle": "esbuild full.pretty.js --bundle --format=esm --outfile=distesm/full.pretty.js && echo \"export * from '../full.pretty';\" > distesm/full.pretty.d.ts",
+    "build-esm": "npm run build-full-pretty && npm run build-esm-bundle-export",
+    "build-esm-bundle": "esbuild full.pretty.js --bundle --format=esm --outfile=distesm/full.pretty.js",
+    "build-esm-bundle-watch": "npm run build-esm-bundle -- --watch",
+    "build-esm-bundle-export": "npm run build-esm-bundle && echo \"export * from '../full.pretty';\" > distesm/full.pretty.d.ts",
     "eslint": "eslint .",
     "eslint-fix": "npm run eslint -- --fix",
     "prettier": "prettier --check .",
@@ -88,6 +90,6 @@
     "yargs": "^17.7.2"
   },
   "volta": {
-    "node": "22.4.1"
+    "node": "22.5.1"
   }
 }
diff --git a/types.d.ts b/types.d.ts
@@ -3679,3 +3679,20 @@ export declare namespace SVGRenderer {
     height: number,
   ): string;
 }
+
+export interface CanvasEditorOptions {
+  /**
+   * The width of the canvas.
+   */
+  width: number;
+  /**
+   * The height of the canvas.
+   */
+  height: number;
+}
+
+export declare class CanvasEditor {
+  constructor(element: HTMLElement, options?: CanvasEditorOptions);
+
+  setMolecule(molecule: Molecule): void;
+}