refactor: move readOnly to an options object

examples/generic_editor_poc.ts

@@ -1,4 +1,5 @@
 import OCL from '../distesm/full.pretty';
+
 const { CanvasEditor, Molecule, Reaction } = OCL;
 
 const rxn = `$RXN

full.d.ts

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

lib/canvas_editor/create_editor.js

@@ -7,12 +7,13 @@ const UIHelper = require('./ui_helper');
 
 function createEditor(
   rootElement,
+  options,
   onChange,
-  isReadOnly,
   JavaEditorArea,
   JavaEditorToolbar,
   JavaUIHelper,
 ) {
+  const { readOnly = false } = options;
   const childElement = document.createElement('div');
   childElement.setAttribute(
     'style',
@@ -47,7 +48,7 @@ function createEditor(
 
   editorArea.draw();
 
-  const toolbar = isReadOnly
+  const toolbar = readOnly
     ? null
     : new Toolbar(toolbarCanvas, editorArea, JavaEditorArea, JavaEditorToolbar);
 
@@ -58,7 +59,7 @@ function createEditor(
   });
   resizeObserver.observe(editorContainer);
 
-  if (isReadOnly) {
+  if (readOnly) {
     toolbarCanvas.remove();
   } else {
     addMouseListeners(editorCanvas, editorArea, JavaEditorArea);

lib/canvas_editor/index.js

@@ -14,12 +14,13 @@ function createCanvasEditor(JavaEditorArea, JavaEditorToolbar, JavaUIHelper) {
     #changeEventMap;
     #isReadOnly;
 
-    constructor(rootElement, isReadOnly = false) {
-      this.#isReadOnly = isReadOnly;
+    constructor(rootElement, options = {}) {
+      const { readOnly = false } = options;
+      this.#isReadOnly = readOnly;
       const { editorArea, toolbar, uiHelper } = createEditor(
         rootElement,
+        options,
         (event) => this.#handleChange(event),
-        isReadOnly,
         JavaEditorArea,
         JavaEditorToolbar,
         JavaUIHelper,

types.d.ts

@@ -3,13 +3,13 @@
 export interface IMoleculeFromSmilesOptions {
   /**
    * Disable coordinate invention.
-   * @default `false`
+   * @default false
    */
   noCoordinates?: boolean;
 
   /**
    * Disable stereo features parsing.
-   * @default `false`
+   * @default false
    */
   noStereo?: boolean;
 }
@@ -115,17 +115,17 @@ export interface IHoseCodesOptions {
 export interface ISmilesGeneratorOptions {
   /**
    * Whether to create SMILES with SMARTS capabilities.
-   * @default `false`
+   * @default false
    */
   createSmarts?: boolean;
   /**
    * Whether to include mapping information (atomMapNo) in the SMILES.
-   * @default `false`
+   * @default false
    */
   includeMapping?: boolean;
   /**
    * Should localisation of double bonds be attempted?
-   * @default `false`
+   * @default false
    */
   kekulizedOutput?: boolean;
 }
@@ -2674,7 +2674,7 @@ export declare class Molecule {
 export interface ISmilesParserOptions {
   /**
    * Enable SMARTS parsing with `'smarts'` or `'guess'`.
-   * @default `'smiles'`
+   * @default 'smiles'
    */
   smartsMode?: 'smiles' | 'smarts' | 'guess';
 
@@ -2703,13 +2703,13 @@ export interface ISmilesParserParseMoleculeOptions {
 
   /**
    * Disable coordinate invention.
-   * @default `false`
+   * @default false
    */
   noCoordinates?: boolean;
 
   /**
    * Disable stereo features parsing.
-   * @default `false`
+   * @default false
    */
   noStereo?: boolean;
 }
@@ -3706,13 +3706,21 @@ export interface OnChangeEvent {
 
 export type OnChangeListenerCallback = (event: OnChangeEvent) => void;
 
+export interface CanvasEditorOptions {
+  /**
+   * No toolbar and user interactions are ignored.
+   * @default false
+   */
+  readOnly?: boolean;
+}
+
 export declare class CanvasEditor {
   /**
    * Create a new canvas-based editor.
    * @param element - The DOM element in which to create the editor.
-   * @param isReadOnly - No toolbar and user interactions are ignored.
+   * @param options
    */
-  constructor(element: HTMLElement, isReadOnly = false);
+  constructor(element: HTMLElement, options?: CanvasEditorOptions);
 
   /**
    * Set the molecule to be edited.