openchemlib 8.20.2 → 9.0.0

package/lib/canvas_editor/init/canvas_editor_element.js

@@ -1,359 +0,0 @@
-'use strict';
-
-function initCanvasEditorElement(CanvasEditor, Molecule, ReactionEncoder) {
-  class CanvasEditorElement extends HTMLElement {
-    /** @type {{MOLECULE: 'molecule', REACTION: 'reaction'}} */
-    static MODE = Object.freeze(
-      Object.create({
-        MOLECULE: 'molecule',
-        REACTION: 'reaction',
-      }),
-    );
-    static observedAttributes = Object.freeze([
-      'idcode',
-      'fragment',
-      'mode',
-      'readonly',
-    ]);
-
-    /**
-     * @type {{mode: 'molecule' | 'reaction', fragment: boolean, idcode: string, readonly: boolean}}
-     */
-    #state;
-
-    get idcode() {
-      return this.#state.idcode;
-    }
-
-    set idcode(value) {
-      this.#state.idcode = String(value);
-      this.setAttribute('idcode', this.#state.idcode);
-    }
-
-    get fragment() {
-      return this.#state.fragment;
-    }
-
-    set fragment(value) {
-      this.#state.fragment = Boolean(value);
-      if (this.#state.fragment) {
-        this.setAttribute('fragment', '');
-      } else {
-        this.removeAttribute('fragment');
-      }
-    }
-
-    get mode() {
-      return this.#state.mode;
-    }
-
-    set mode(value) {
-      this.#state.mode = String(value);
-      this.setAttribute('mode', this.#state.mode);
-    }
-
-    get readonly() {
-      return this.#state.readonly;
-    }
-
-    set readonly(value) {
-      this.#state.readonly = Boolean(value);
-      if (this.#state.readonly) {
-        this.setAttribute('readonly', '');
-      } else {
-        this.removeAttribute('readonly');
-      }
-    }
-
-    /* --- custom element api --- */
-    /**
-     * @param {Molecule} molecule
-     * @this {CanvasEditorElement}
-     */
-    setMolecule(molecule) {
-      this.fragment = molecule.isFragment();
-      this.idcode = `${molecule.getIDCode()} ${molecule.getIDCoordinates()}`;
-
-      this.#editor.setMolecule(molecule);
-    }
-
-    /**
-     * @return {Molecule}
-     * @this {CanvasEditorElement}
-     */
-    getMolecule() {
-      return this.#editor.getMolecule();
-    }
-
-    /**
-     * @param {Reaction} reaction
-     * @this {CanvasEditorElement}
-     */
-    setReaction(reaction) {
-      this.fragment = reaction.isFragment();
-      this.idcode = ReactionEncoder.encode(reaction, {
-        keepAbsoluteCoordinates: true,
-        mode:
-          ReactionEncoder.INCLUDE_MAPPING |
-          ReactionEncoder.INCLUDE_COORDS |
-          ReactionEncoder.RETAIN_REACTANT_AND_PRODUCT_ORDER,
-      });
-
-      this.#editor.setReaction(reaction);
-    }
-
-    /**
-     * @return {Reaction}
-     * @this {CanvasEditorElement}
-     */
-    getReaction() {
-      return this.#editor.getReaction();
-    }
-
-    /**
-     * @this {CanvasEditorElement}
-     */
-    clearAll() {
-      this.#editor.clearAll();
-      this.idcode = '';
-    }
-
-    /**
-     * @this {CanvasEditorElement}
-     */
-    moleculeChanged() {
-      this.#editor.moleculeChanged();
-    }
-
-    /* --- internals --- */
-    /** @type {CanvasEditor} */ #editor;
-
-    /**
-     * @this {CanvasEditorElement}
-     */
-    #initEditor() {
-      if (this.#editor) return;
-
-      this.#editor = new CanvasEditor(this, {
-        readOnly: this.readonly,
-        initialMode: this.mode,
-      });
-      this.#editor.setOnChangeListener(this.#handleChange);
-
-      requestIdleCallback(() => this.#initIdCode());
-    }
-
-    /**
-     * @this {CanvasEditorElement}
-     */
-    #initIdCode() {
-      switch (this.mode) {
-        case CanvasEditorElement.MODE.MOLECULE: {
-          return this.#initMolecule();
-        }
-        case CanvasEditorElement.MODE.REACTION: {
-          return this.#initReaction();
-        }
-        default:
-          throw new Error(`Mode ${this.mode} is not supported`);
-      }
-    }
-
-    /**
-     * @param {string} idcodeAndCoordinates
-     */
-    #moleculeFromIdCode(idcodeAndCoordinates) {
-      const index = idcodeAndCoordinates.indexOf(' ');
-
-      if (index === -1) {
-        return Molecule.fromIDCode(idcodeAndCoordinates);
-      }
-
-      const idcode = idcodeAndCoordinates.slice(0, index);
-      const coordinates = idcodeAndCoordinates.slice(index + 1);
-
-      return Molecule.fromIDCode(idcode, coordinates);
-    }
-
-    /**
-     * @this {CanvasEditorElement}
-     */
-    #initMolecule() {
-      const molecule = this.#moleculeFromIdCode(this.idcode);
-      molecule.setFragment(this.fragment);
-
-      this.#editor.setMolecule(molecule);
-    }
-
-    /**
-     * @this {CanvasEditorElement}
-     */
-    #initReaction() {
-      const reaction = ReactionEncoder.decode(this.idcode, {
-        ensureCoordinates: true,
-      });
-      reaction.setFragment(this.fragment);
-
-      this.#editor.setReaction(reaction);
-    }
-
-    #ignoreAttributeChange = false;
-    /**
-     * @param {() => void} fn
-     * @this {CanvasEditorElement}
-     */
-    #wrapIgnoreAttributeChange(fn) {
-      this.#ignoreAttributeChange = true;
-
-      try {
-        fn();
-      } finally {
-        this.#ignoreAttributeChange = false;
-      }
-    }
-
-    /**
-     * @param {{
-     *  type: 'molecule' | 'selection' | 'highlight-atom' | 'highlight-bond';
-     *  isUserEvent: boolean;
-     * }} editorEventOnChange
-     */
-    #handleChange = (editorEventOnChange) => {
-      const idcode = this.idcode;
-      const fragment = this.fragment;
-
-      // update internal state from editor change
-      this.#wrapIgnoreAttributeChange(() => {
-        if (editorEventOnChange.type !== 'molecule') return;
-
-        switch (this.mode) {
-          case CanvasEditorElement.MODE.MOLECULE: {
-            const molecule = this.getMolecule();
-            this.idcode = `${molecule.getIDCode()} ${molecule.getIDCoordinates()}`;
-            this.fragment = molecule.isFragment();
-            break;
-          }
-          case CanvasEditorElement.MODE.REACTION: {
-            const reaction = this.getReaction();
-            this.idcode = ReactionEncoder.encode(reaction, {
-              keepAbsoluteCoordinates: true,
-              mode:
-                ReactionEncoder.INCLUDE_MAPPING |
-                ReactionEncoder.INCLUDE_COORDS |
-                ReactionEncoder.RETAIN_REACTANT_AND_PRODUCT_ORDER,
-            });
-            this.fragment = reaction.isFragment();
-            break;
-          }
-          default:
-            throw new Error(`Unsupported mode ${this.mode}`);
-        }
-      });
-
-      // propagate editor changes to parent
-      const domEvent = new CustomEvent('change', {
-        detail: editorEventOnChange,
-        bubbles: true,
-      });
-      this.dispatchEvent(domEvent);
-
-      if (editorEventOnChange.mode !== 'molecule') return;
-
-      // propagate vaadin events
-      if (this.idcode !== idcode) {
-        const idcodeChangeEvent = new CustomEvent('idcode-changed', {
-          detail: this.idcode,
-          bubbles: true,
-        });
-        this.dispatchEvent(idcodeChangeEvent);
-      }
-      if (this.fragment !== fragment) {
-        const fragmentChangeEvent = new CustomEvent('fragment-changed', {
-          detail: this.fragment,
-          bubbles: true,
-        });
-        this.dispatchEvent(fragmentChangeEvent);
-      }
-    };
-
-    #destroyEditor() {
-      if (!this.#editor) return;
-
-      this.#editor.destroy();
-      this.#editor = undefined;
-    }
-
-    #resetEditor() {
-      this.#destroyEditor();
-      this.#initEditor();
-    }
-
-    /* --- lifecycle hooks --- */
-    /**
-     * Custom element added to page.
-     */
-    connectedCallback() {
-      this.#state = {
-        idcode: this.getAttribute('idcode') || '',
-        fragment: this.hasAttribute('fragment'),
-        mode: this.getAttribute('mode') || CanvasEditorElement.MODE.MOLECULE,
-        readonly: this.hasAttribute('readonly'),
-      };
-
-      this.#initEditor();
-    }
-
-    /**
-     * Custom element removed from page.
-     */
-    disconnectedCallback() {
-      this.#destroyEditor();
-    }
-
-    /**
-     * Custom element moved to new page.
-     */
-    adoptedCallback() {
-      this.connectedCallback();
-    }
-
-    /**
-     * Attribute ${name} has changed from ${oldValue} to ${newValue}
-     *
-     * Sync attribute changes to internal state.
-     * propagate changes to editor.
-     */
-    attributeChangedCallback(name, oldValue, newValue) {
-      if (!this.#editor) return;
-      if (this.#ignoreAttributeChange) return;
-
-      const mutatorHandler = (() => {
-        switch (name) {
-          case 'idcode': {
-            this.#state.idcode = String(newValue);
-            return () => this.#initIdCode();
-          }
-          case 'fragment': {
-            this.#state.fragment = newValue !== null;
-            return () => this.#initIdCode();
-          }
-          case 'mode': {
-            this.#state.mode = String(newValue);
-            return () => this.#resetEditor();
-          }
-          case 'readonly': {
-            this.#state.readonly = newValue !== null;
-            return () => this.#resetEditor();
-          }
-          default:
-            throw new Error('unsupported attribute change');
-        }
-      })();
-      mutatorHandler();
-    }
-  }
-
-  return CanvasEditorElement;
-}
-
-module.exports = initCanvasEditorElement;

package/lib/canvas_editor/init/index.js

@@ -1,70 +0,0 @@
-'use strict';
-
-const initCanvasEditor = require('./canvas_editor');
-const initCanvasEditorElement = require('./canvas_editor_element');
-
-function init(OCL) {
-  const {
-    GenericEditorArea: JavaEditorArea,
-    GenericEditorToolbar: JavaEditorToolbar,
-    GenericUIHelper: JavaUIHelper,
-    Molecule,
-    Reaction,
-    ReactionEncoder,
-  } = OCL;
-
-  const CanvasEditor = initCanvasEditor(
-    JavaEditorArea,
-    JavaEditorToolbar,
-    JavaUIHelper,
-    Molecule,
-    Reaction,
-  );
-
-  function registerCustomElement() {
-    const constructor = customElements.get('openchemlib-editor');
-    if (constructor) return constructor;
-
-    const CanvasEditorElement = initCanvasEditorElement(
-      CanvasEditor,
-      Molecule,
-      ReactionEncoder,
-    );
-
-    customElements.define('openchemlib-editor', CanvasEditorElement);
-
-    // mutate the first stylesheet available or construct a new one, added to adoptedStyleSheets
-    // It's default styling for openchemlib-editor element,
-    // should be considered as a user-agent stylesheet (low-priority)
-    const css =
-      document.styleSheets[0] ??
-      (() => {
-        const css = new CSSStyleSheet();
-        document.adoptedStyleSheets.unshift(css);
-        return css;
-      })();
-    css.insertRule(
-      `
-      /* dynamicaly added from openchemlib registerCustomElement with low priority */
-      openchemlib-editor:defined {
-        display: block;
-        height: 400px;
-        width: 600px;
-      }
-      `,
-      0,
-    );
-
-    return CanvasEditorElement;
-  }
-
-  OCL.CanvasEditor = CanvasEditor;
-  OCL.registerCustomElement = registerCustomElement;
-
-  // Do not expose internal classes to end users.
-  delete OCL.GenericEditorArea;
-  delete OCL.GenericEditorToolbar;
-  delete OCL.GenericUIHelper;
-}
-
-module.exports = init;

package/lib/canvas_editor/toolbar.js

@@ -1,28 +0,0 @@
-'use strict';
-
-const DrawContext = require('./draw_context');
-
-class Toolbar {
-  constructor(canvasElement) {
-    this.canvasElement = canvasElement;
-  }
-
-  setDimensions(width, height) {
-    this.canvasElement.width = width;
-    this.canvasElement.height = height;
-  }
-
-  getDrawContext() {
-    return new DrawContext(this.canvasElement.getContext('2d'));
-  }
-
-  getBackgroundRGB() {
-    return 0xffffff;
-  }
-
-  getForegroundRGB() {
-    return 0x000000;
-  }
-}
-
-module.exports = Toolbar;

package/lib/canvas_editor/ui_helper.js

@@ -1,57 +0,0 @@
-'use strict';
-
-const CursorManager = require('./cursor_manager_24');
-const EditorDialog = require('./editor_dialog');
-const EditorImage = require('./editor_image');
-const { decodeBase64 } = require('./utils');
-
-class UIHelper {
-  /**
-   *
-   * @param {HTMLCanvasElement} canvasElement
-   * @param {HTMLElement} dialogRoot
-   * @param JavaEditorArea
-   */
-  constructor(canvasElement, dialogRoot, JavaEditorArea) {
-    this.canvasElement = canvasElement;
-    this.dialogRoot = dialogRoot;
-    this.JavaEditorArea = JavaEditorArea;
-  }
-
-  register(javaUiHelper) {
-    this.javaUiHelper = javaUiHelper;
-    this.cursorManager = new CursorManager(this.JavaEditorArea, javaUiHelper);
-  }
-
-  grabFocus() {
-    this.canvasElement.focus({ preventScroll: true });
-  }
-
-  setCursor(cursor) {
-    this.canvasElement.style.cursor = this.cursorManager.getCursor(cursor);
-  }
-
-  showHelpDialog(/* url, title */) {
-    // TODO: implement help dialog?
-    // console.log({ url, title });
-  }
-
-  createImage(width, height) {
-    const imageData = new ImageData(width, height);
-    return new EditorImage(imageData);
-  }
-
-  createImageFromBase64(width, height, base64) {
-    base64 = base64.replaceAll('%', 'A'.repeat(20));
-    const decoded = decodeBase64(base64);
-    const typedArray = new Uint8ClampedArray(decoded);
-    const imageData = new ImageData(typedArray, width, height);
-    return new EditorImage(imageData);
-  }
-
-  createDialog(title) {
-    return new EditorDialog(title, this.dialogRoot);
-  }
-}
-
-module.exports = UIHelper;

package/lib/canvas_editor/utils.js

@@ -1,55 +0,0 @@
-'use strict';
-
-/* eslint-disable unicorn/prefer-code-point */
-
-// https://github.com/niklasvh/base64-arraybuffer/blob/master/LICENSE
-const chars =
-  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
-// Use a lookup table to find the index.
-const lookup = new Uint8Array(256);
-for (let i = 0; i < chars.length; i++) {
-  lookup[chars.charCodeAt(i)] = i;
-}
-
-function decodeBase64(base64) {
-  let bufferLength = base64.length * 0.75;
-  let len = base64.length;
-  let i;
-  let p = 0;
-  let encoded1;
-  let encoded2;
-  let encoded3;
-  let encoded4;
-
-  if (base64.at(-1) === '=') {
-    bufferLength--;
-    if (base64.at(-2) === '=') {
-      bufferLength--;
-    }
-  }
-
-  const arraybuffer = new ArrayBuffer(bufferLength);
-  const bytes = new Uint8Array(arraybuffer);
-
-  for (i = 0; i < len; i += 4) {
-    encoded1 = lookup[base64.charCodeAt(i)];
-    encoded2 = lookup[base64.charCodeAt(i + 1)];
-    encoded3 = lookup[base64.charCodeAt(i + 2)];
-    encoded4 = lookup[base64.charCodeAt(i + 3)];
-
-    bytes[p++] = (encoded1 << 2) | (encoded2 >> 4);
-    bytes[p++] = ((encoded2 & 15) << 4) | (encoded3 >> 2);
-    bytes[p++] = ((encoded3 & 3) << 6) | (encoded4 & 63);
-  }
-
-  return arraybuffer;
-}
-
-function toHex(v) {
-  return v.toString(16).padStart(2, '0');
-}
-
-module.exports = {
-  decodeBase64,
-  toHex,
-};

package/minimal.d.ts

@@ -1,18 +0,0 @@
-export {
-  IMoleculeFromSmilesOptions,
-  IMoleculeToSVGOptions,
-  IHoseCodesOptions,
-  Molecule,
-  MolecularFormula,
-  RingCollection,
-  IDepictorOptions,
-  Reaction,
-  SDFileParser,
-  ISmilesParserOptions,
-  ISmilesParserParseMoleculeOptions,
-  SmilesParser,
-  SSSearcher,
-  SSSearcherWithIndex,
-  Util,
-  version,
-} from './types';

package/minimal.js

@@ -1,14 +0,0 @@
-'use strict';
-
-const OCL = require('./dist/openchemlib-minimal.js');
-
-exports.default = OCL;
-exports.Molecule = OCL.Molecule;
-exports.Reaction = OCL.Reaction;
-exports.RingCollection = OCL.RingCollection;
-exports.SDFileParser = OCL.SDFileParser;
-exports.SSSearcher = OCL.SSSearcher;
-exports.SSSearcherWithIndex = OCL.SSSearcherWithIndex;
-exports.SmilesParser = OCL.SmilesParser;
-exports.Util = OCL.Util;
-exports.version = OCL.version;