Improve web component

[targos]

• Vaadin relies on some naming convention of events. As a consequence the event name of an idcode change should be "idcode-changed".
• I'm not a JS/TS expert, but Vaadin relies on properties of a web component. However, if I dynamically set the idcode property nothing happens. To set the new idcode I have to set the attribute. Shouldn't setting the property also work?
• The "#handleChange" method of the web component does not update the idcode property at all. I think this should be done. What do you think?

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

[targos]

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]

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/

• java events propagated to dom from #handleChange and update props / attributes of components.
• attributes / props changes are propagated to java editor (with no infinite loop)

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]

/cc @artaius