cheminfo / openchemlib-js

JavaScript port of OpenChemLib
https://cheminfo.github.io/openchemlib-js/index.html
BSD 3-Clause "New" or "Revised" License
73 stars 21 forks source link

Improve web component #229

Open targos opened 4 weeks ago

targos commented 4 weeks ago

Check Vaadin documentation to know what's expected in the event data for xxx-changed events.

targos commented 4 weeks ago

current workarounds:

#handleChange = (editorEventOnChange) => {
  if (editorEventOnChange.type == 'molecule') {
    console.warn('editor-changed');

    switch (this.mode) {
      case CanvasEditorElement.MODE.MOLECULE: {
        this.idcode = this.getMolecule().getIDCode();
        break;
      }
      case CanvasEditorElement.MODE.REACTION: {
        this.idcode = ReactionEncoder.encode(this.getReaction());
        break;
      }
      default:
        throw new Error(`Mode ${this.mode} is not supported`);
    }
    this.dispatchEvent(new CustomEvent('idcode-changed', {detail: "idcode",}));
  }
};

#copy() {
  console.warn('copy');
  navigator.clipboard.writeText(this.idcode).then(r => console.warn('idcode copied'));
  // TODO handle other content types? see below.
}

#paste() {
  // TODO handle other content types?
  // for debugging: list available clipboard content
  navigator.clipboard.read().then(clipboardItems => {
    console.warn(clipboardItems.length + " clipboardItem");
    clipboardItems.forEach(item => {
      item.types.forEach(type => {
        item.getType(type).then(value => value.text().then(text => console.warn("clipboardItem type: " + type + ": " + text)));
      })
    })
  });
  navigator.clipboard.readText().then(idcode => {
    // this.idcode = idcode;
    this.setAttribute('idcode', idcode);
    console.warn('idcode pasted');
  });
}
tpoisseau commented 3 weeks ago

In my wip branch I synced props and attributes Inspired from https://lamplightdev.com/blog/2020/04/30/whats-the-difference-between-web-component-attributes-and-properties/

I'm not convinced we should dispatch idcode-changed. I did not found events naming convention in vaadin doc. And interoperability with vaadin must be done with a dedicated package like https://github.com/artaius/openchemlib-vaadin

I did found this in doc: https://vaadin.com/docs/latest/flow/create-ui/element-api/user-input, which could be related to idcode-changed event.

Here is the doc for vaadin webcomponents integration: https://vaadin.com/docs/latest/flow/create-ui/web-components

I will take a look to integrate copy/paste behavior

targos commented 3 weeks ago

/cc @artaius