openchemlib 8.20.2 → 9.0.0

package/lib/canvas_editor/editor_dialog.js

@@ -1,250 +0,0 @@
-'use strict';
-
-class EditorDialog {
-  /**
-   *
-   * @param {string} title
-   * @param {HTMLElement} rootElement
-   */
-  constructor(title, rootElement) {
-    this.title = title;
-    this.rootElement = rootElement;
-    this.elements = [];
-    this.dialogElement = null;
-  }
-
-  setLayout(hLayout, vLayout) {
-    this.hLayout = generateLayout(hLayout);
-    this.vLayout = generateLayout(vLayout);
-  }
-
-  add(component, x, y, x2, y2) {
-    this.elements.push({ component, x, y, x2, y2 });
-  }
-
-  createTextField(width, height) {
-    return new TextField(width, height);
-  }
-
-  createLabel(text) {
-    return new Label(text);
-  }
-
-  createComboBox() {
-    return new ComboBox();
-  }
-
-  createCheckBox(text) {
-    return new CheckBox(text);
-  }
-
-  setEventConsumer(consumer) {
-    this.consumer = consumer;
-  }
-
-  showMessage(message) {
-    // eslint-disable-next-line no-alert
-    window.alert(message);
-  }
-
-  showDialog() {
-    const dialog = document.createElement('dialog');
-    const rootElementBounds = this.rootElement.getBoundingClientRect();
-    // Center the dialog horizontally relative to the editor's canvas.
-    Object.assign(dialog.style, {
-      position: 'absolute',
-      marginBlock: 0,
-      left: `${rootElementBounds.left}px`,
-      right: `${document.body.parentElement.clientWidth - rootElementBounds.right}px`,
-      top: `${this.rootElement.offsetTop + 30}px`,
-    });
-    this.dialogElement = dialog;
-    this.rootElement.getRootNode().append(dialog);
-    const grid = document.createElement('div');
-    grid.style.display = 'grid';
-    grid.style.gridTemplateColumns = this.hLayout;
-    grid.style.gridTemplateRows = this.vLayout;
-    dialog.append(grid);
-    for (const { component, x, y, x2, y2 } of this.elements) {
-      const div = document.createElement('div');
-      if (x2 === undefined) {
-        div.style.gridColumn = `${x + 1} / ${x + 2}`;
-        div.style.gridRow = `${y + 1} / ${y + 2}`;
-      } else {
-        div.style.gridColumn = `${x + 1} / ${x2 + 2}`;
-        div.style.gridRow = `${y + 1} / ${y2 + 2}`;
-      }
-      div.append(component.getElement());
-      grid.append(div);
-    }
-    const buttons = document.createElement('div');
-    buttons.style.display = 'flex';
-    buttons.style.flexDirection = 'row-reverse';
-    buttons.style.gap = '15px';
-    const okButton = document.createElement('button');
-    okButton.textContent = 'OK';
-    okButton.addEventListener('click', () => {
-      this.consumer.fireOk();
-    });
-    buttons.append(okButton);
-    const cancelButton = document.createElement('button');
-    cancelButton.textContent = 'Cancel';
-    cancelButton.addEventListener('click', () => {
-      this.consumer.fireCancel();
-    });
-    buttons.append(cancelButton);
-    dialog.append(buttons);
-    dialog.showModal();
-    dialog.addEventListener('cancel', () => {
-      this.consumer.fireCancel();
-    });
-  }
-
-  disposeDialog() {
-    if (this.dialogElement !== null) {
-      this.dialogElement.remove();
-      this.dialogElement = null;
-    }
-  }
-}
-
-class Component {
-  setEventHandler(eventHandler) {
-    this.eventHandler = eventHandler;
-  }
-
-  fireEvent(what, value) {
-    this.eventHandler(what, value);
-  }
-}
-
-class Label extends Component {
-  constructor(text) {
-    super();
-    this.element = document.createElement('label');
-    this.setText(text);
-  }
-
-  setText(text) {
-    this.element.textContent = text;
-  }
-
-  getElement() {
-    return this.element;
-  }
-}
-
-class TextField extends Component {
-  constructor() {
-    super();
-    this.element = document.createElement('input');
-    this.element.type = 'text';
-  }
-
-  setText(text) {
-    this.element.value = text;
-  }
-
-  getText() {
-    return this.element.value;
-  }
-
-  getElement() {
-    return this.element;
-  }
-}
-
-class ComboBox extends Component {
-  constructor() {
-    super();
-    this.element = document.createElement('select');
-    this.element.addEventListener('change', () => {
-      this.fireEvent(2, this.element.selectedIndex);
-    });
-  }
-
-  setEnabled(enabled) {
-    this.element.disabled = !enabled;
-  }
-
-  addItem(item) {
-    const option = document.createElement('option');
-    option.textContent = item;
-    this.element.append(option);
-  }
-
-  getSelectedIndex() {
-    return this.element.selectedIndex;
-  }
-
-  setSelectedIndex(index) {
-    this.element.selectedIndex = index;
-  }
-
-  setSelectedItem(item) {
-    const options = this.element.options;
-    for (let i = 0; i < options.length; i++) {
-      if (options[i].textContent === item) {
-        this.element.selectedIndex = i;
-      }
-    }
-  }
-
-  getSelectedItem() {
-    return this.element.options[this.element.selectedIndex].textContent;
-  }
-
-  removeAllItems() {
-    this.element.innerHTML = '';
-  }
-
-  getElement() {
-    return this.element;
-  }
-}
-
-class CheckBox extends Component {
-  constructor(text) {
-    super();
-    const label = document.createElement('label');
-    const input = document.createElement('input');
-    input.type = 'checkbox';
-    input.addEventListener('change', () => {
-      this.fireEvent(3, input.checked ? 1 : 0);
-    });
-    label.append(input);
-    label.append(text);
-    this.element = label;
-    this.checkBox = input;
-  }
-
-  setEnabled(enabled) {
-    this.checkBox.disabled = !enabled;
-  }
-
-  isSelected() {
-    return this.checkBox.checked;
-  }
-
-  setSelected(selected) {
-    this.checkBox.checked = selected;
-  }
-
-  getElement() {
-    return this.element;
-  }
-}
-
-function generateLayout(layout) {
-  return layout
-    .map((dim) => {
-      if (dim > 0) {
-        return `${dim}px`;
-      } else {
-        return 'auto';
-      }
-    })
-    .join(' ');
-}
-
-module.exports = EditorDialog;

package/lib/canvas_editor/editor_image.js

@@ -1,46 +0,0 @@
-'use strict';
-
-class EditorImage {
-  /**
-   *
-   * @param {ImageData} imageData
-   */
-  constructor(imageData) {
-    this.imageData = imageData;
-    this.dataView = new DataView(imageData.data.buffer);
-  }
-
-  getWidth() {
-    return this.imageData.width;
-  }
-
-  getHeight() {
-    return this.imageData.height;
-  }
-
-  getRGB(x, y) {
-    const color = this.dataView.getInt32(
-      (y * this.imageData.width + x) * 4,
-      false,
-    );
-    const alpha = color & 0xff;
-    return (alpha << 24) | (color >>> 8);
-  }
-
-  setRGB(x, y, argb) {
-    const alpha = (argb >>> 24) & 0xff;
-    const rgb = (argb << 8) | alpha;
-    this.dataView.setInt32((y * this.imageData.width + x) * 4, rgb, false);
-  }
-
-  toDataURL() {
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    canvas.width = this.imageData.width;
-    canvas.height = this.imageData.height;
-    ctx.putImageData(this.imageData, 0, 0);
-    return canvas.toDataURL('image/png');
-  }
-}
-
-module.exports = EditorImage;

package/lib/canvas_editor/editor_stylesheet.js

@@ -1,21 +0,0 @@
-'use strict';
-
-const styles = `
-/* We can customize editor styles here. */
-`;
-
-let stylesheet;
-
-function getEditorStylesheet() {
-  if (stylesheet) {
-    return stylesheet;
-  }
-
-  const sheet = new CSSStyleSheet();
-  sheet.replaceSync(styles);
-
-  stylesheet = sheet;
-  return sheet;
-}
-
-module.exports = getEditorStylesheet;

package/lib/canvas_editor/events.js

@@ -1,144 +0,0 @@
-'use strict';
-
-/**
- *
- * @param {HTMLCanvasElement} canvasElement
- * @param drawArea
- * @param JavaEditorArea
- */
-function addPointerListeners(canvasElement, drawArea, JavaEditorArea) {
-  let pointerDownId = -1;
-
-  function fireMouseEvent(what, ev, clickCount = 0) {
-    if (ev.button > 0) {
-      // TODO: remove this to implement popup menu.
-      return;
-    }
-    drawArea.fireMouseEvent(
-      what,
-      ev.button + 1,
-      clickCount,
-      Math.round(ev.offsetX),
-      Math.round(ev.offsetY),
-      ev.shiftKey,
-      ev.ctrlKey,
-      ev.altKey,
-      ev.button === 2,
-    );
-  }
-
-  canvasElement.addEventListener('pointerdown', (ev) => {
-    if (pointerDownId === -1) {
-      pointerDownId = ev.pointerId;
-      fireMouseEvent(JavaEditorArea.MOUSE_EVENT_PRESSED, ev);
-    }
-  });
-
-  function handlePointerUp(ev) {
-    if (pointerDownId === ev.pointerId) {
-      pointerDownId = -1;
-      fireMouseEvent(JavaEditorArea.MOUSE_EVENT_RELEASED, ev);
-    }
-  }
-  // Listen on document to capture mouse release outside the canvas.
-  document.addEventListener('pointerup', handlePointerUp);
-
-  canvasElement.addEventListener('click', (ev) => {
-    fireMouseEvent(JavaEditorArea.MOUSE_EVENT_CLICKED, ev, ev.detail);
-  });
-  canvasElement.addEventListener('pointerenter', (ev) => {
-    // event.detail on pointerenter doesn't include the click count
-    fireMouseEvent(JavaEditorArea.MOUSE_EVENT_ENTERED, ev);
-  });
-  canvasElement.addEventListener('pointerleave', (ev) => {
-    // event.detail on pointerenter doesn't include the click count
-    fireMouseEvent(JavaEditorArea.MOUSE_EVENT_EXITED, ev);
-  });
-  canvasElement.addEventListener('pointermove', (ev) => {
-    if (pointerDownId !== -1) {
-      if (pointerDownId === ev.pointerId) {
-        fireMouseEvent(JavaEditorArea.MOUSE_EVENT_DRAGGED, ev);
-      }
-    } else {
-      fireMouseEvent(JavaEditorArea.MOUSE_EVENT_MOVED, ev);
-    }
-  });
-
-  return () => {
-    document.removeEventListener('pointerup', handlePointerUp);
-  };
-}
-
-function addKeyboardListeners(canvasElement, editorArea, JavaEditorArea) {
-  const isMac =
-    typeof navigator !== 'undefined' && navigator.platform === 'MacIntel';
-  const isMenuKey = (ev) => (isMac && ev.metaKey) || (!isMac && ev.ctrlKey);
-
-  function fireKeyEvent(what, ev) {
-    const key = getKeyFromEvent(ev, JavaEditorArea);
-    if (key === null) return;
-
-    editorArea.fireKeyEvent(
-      what,
-      key,
-      ev.altKey,
-      ev.ctrlKey,
-      ev.shiftKey,
-      isMenuKey(ev),
-    );
-  }
-
-  canvasElement.addEventListener('keydown', (ev) => {
-    // copy-paste is handled by the clipboard event
-    // java ctrl-c / ctrl-v events can't work and could throw error
-    if (isMenuKey(ev) && ev.key === 'c') return;
-    if (isMenuKey(ev) && ev.key === 'v') return;
-
-    fireKeyEvent(JavaEditorArea.KEY_EVENT_PRESSED, ev);
-  });
-  canvasElement.addEventListener('keyup', (ev) => {
-    fireKeyEvent(JavaEditorArea.KEY_EVENT_RELEASED, ev);
-  });
-
-  return () => {
-    // No cleanup needed.
-  };
-}
-
-/**
- *
- * @param {KeyboardEvent} ev
- * @param JavaEditorArea
- */
-function getKeyFromEvent(ev, JavaEditorArea) {
-  switch (ev.key) {
-    case 'Control':
-      return JavaEditorArea.KEY_CTRL;
-    case 'Alt':
-      return JavaEditorArea.KEY_ALT;
-    case 'Shift':
-      return JavaEditorArea.KEY_SHIFT;
-    case 'Delete':
-    case 'Backspace':
-      return JavaEditorArea.KEY_DELETE;
-    // Backspace is currently unused by the Java code, so we remap it.
-    // return JavaEditorArea.KEY_BACKSPACE;
-    case 'F1':
-      return JavaEditorArea.KEY_HELP;
-    case 'Escape':
-      return JavaEditorArea.KEY_ESCAPE;
-    case 'Enter':
-      return JavaEditorArea.KEY_ENTER;
-    default:
-      if (ev.key.length === 1) {
-        return ev.key.codePointAt(0);
-      } else {
-        return null;
-      }
-  }
-}
-
-module.exports = {
-  addPointerListeners,
-  addKeyboardListeners,
-};

package/lib/canvas_editor/init/canvas_editor.js

@@ -1,137 +0,0 @@
-'use strict';
-
-const createEditor = require('../create_editor');
-
-function initCanvasEditor(
-  JavaEditorArea,
-  JavaEditorToolbar,
-  JavaUIHelper,
-  Molecule,
-  Reaction,
-) {
-  class CanvasEditor {
-    #editorArea;
-    // Can be useful for debugging.
-    /* eslint-disable no-unused-private-class-members */
-    #toolbar;
-    #uiHelper;
-    /* eslint-enable no-unused-private-class-members */
-    #onChange;
-    #changeEventMap;
-    #destroy;
-
-    constructor(parentElement, options = {}) {
-      const { editorArea, toolbar, uiHelper, destroy } = createEditor(
-        parentElement,
-        options,
-        (event) => this.#handleChange(event),
-        JavaEditorArea,
-        JavaEditorToolbar,
-        JavaUIHelper,
-        Molecule,
-        Reaction,
-      );
-      this.#editorArea = editorArea;
-      this.#toolbar = toolbar;
-      this.#uiHelper = uiHelper;
-      this.#onChange = null;
-      this.#changeEventMap = {
-        [JavaEditorArea.EDITOR_EVENT_MOLECULE_CHANGED]: 'molecule',
-        [JavaEditorArea.EDITOR_EVENT_SELECTION_CHANGED]: 'selection',
-        [JavaEditorArea.EDITOR_EVENT_HIGHLIGHT_ATOM_CHANGED]: 'highlight-atom',
-        [JavaEditorArea.EDITOR_EVENT_HIGHLIGHT_BOND_CHANGED]: 'highlight-bond',
-      };
-      this.#destroy = destroy;
-    }
-
-    getMode() {
-      this.#checkNotDestroyed();
-
-      const mode = this.#editorArea.getMode();
-      const isReaction = mode & (JavaEditorArea.MODE_REACTION !== 0);
-      return isReaction ? 'reaction' : 'molecule';
-    }
-
-    setMolecule(molecule) {
-      this.#checkNotDestroyed();
-
-      this.#editorArea.setMolecule(molecule);
-    }
-
-    getMolecule() {
-      this.#checkNotDestroyed();
-
-      return this.#editorArea.getMolecule();
-    }
-
-    setReaction(reaction) {
-      this.#checkNotDestroyed();
-
-      this.#editorArea.setReaction(reaction);
-    }
-
-    getReaction() {
-      this.#checkNotDestroyed();
-
-      return this.#editorArea.getReaction();
-    }
-
-    setOnChangeListener(onChange) {
-      this.#checkNotDestroyed();
-
-      this.#onChange = onChange;
-    }
-
-    removeOnChangeListener() {
-      this.#checkNotDestroyed();
-
-      this.#onChange = null;
-    }
-
-    clearAll() {
-      this.#checkNotDestroyed();
-
-      this.#editorArea.clearAll();
-    }
-
-    destroy() {
-      this.#checkNotDestroyed();
-
-      this.#destroy();
-      this.#editorArea = null;
-      this.#toolbar = null;
-      this.#uiHelper = null;
-      this.#onChange = null;
-      this.#destroy = null;
-    }
-
-    moleculeChanged() {
-      this.#checkNotDestroyed();
-
-      this.#editorArea.moleculeChanged();
-    }
-
-    #checkNotDestroyed() {
-      if (!this.#editorArea) {
-        throw new Error('CanvasEditor has been destroyed');
-      }
-    }
-
-    /**
-     * @param {{ what: number; isUserEvent: boolean; }} event
-     */
-    #handleChange(event) {
-      if (!this.#onChange) return;
-
-      const { what, isUserEvent } = event;
-      this.#onChange({
-        type: this.#changeEventMap[what],
-        isUserEvent,
-      });
-    }
-  }
-
-  return CanvasEditor;
-}
-
-module.exports = initCanvasEditor;