El selector de color permanece abierto si el clic ocurre en el lienzo

Hola @artf, espero que estés bien.

Estoy viendo algunos problemas con el selector de color: si uno está abierto y después se hace un clic en el lienzo, el selector de color no se cierra aunque la opción clickoutFiresChange del plugin esté configurada como true, esto es porque la propagación del evento la toma el iframe del lienzo y no se pasa a través de ella.

La única solución que he encontrado es añadir un evento secundario que pueda captar el clic en el lienzo, que ahora mismo estoy usando

componente:selected

Pero estoy pensando en una solución mejor. Aquí está mi propuesta:

  getColorEl() {
    if (!this.colorEl) {
      const self = esto;
      const ppfx = this.ppfx;
      var model = this.model;
      var em = this.em;

var colorEl = $('<div class="${this.ppfx}field-color-picker"></div>');
      var cpStyle = colorEl.get(0).style;
      var elToAppend = this.em && this.em.config ? this.em.config.el : '';
      var colorPickerConfig =
        (this.em && this.em.getConfig && this.em.getConfig('colorPicker')) ||
        {};
      const getColor = color => {
        Sea cl =
          color.getAlpha() == 1 ? color.toHexString() : color.toRgbString();
        return cl.replace(/ /g, '');
      };

Sea cambiado = 0;
      sea previousColor;
      this.$el.find('[data-colorp-c]').append(colorEl);
      colorEl.spectrum({
        containerClassName: '${ppfx}one-bg ${ppfx}two-color',
        appendTo: elToAppend || 'cuerpo',
        maxSelectionSize: 8,
        mostrarPaleta: cierto,
        mostrarAlpha: cierto,
        chooseText: 'Vale',
        cancelTexto: '⨯',
        Paleta: [],

Config expandida aquí para que las funciones siguientes no sean sobrescritos
        ... colorPickerConfig,

mover(color) {
          const cl = getColor(color);
          cpStyle.backgroundColor = cl;
          model.setValueFromInput(cl, 0);
        },
        cambiar(color) {
          cambiado = 1;
          const cl = getColor(color);
          cpStyle.backgroundColor = cl;
          model.setValueFromInput(cl);
          auto.ningunoColor = 0;
        },
        mostrar(color) {
          cambiado = 0;
          previousColor = getColor(color);
        },
        hide(color) {
          if (!changed && previousColor) {
            if (self.noneColor) {
              previousColor = '';
            }
            cpStyle.backgroundColor = previousColor;
            colorEl.spectrum('set', previousColor);
            model.setValueFromInput(previousColor, 0);
          }
        }
      });

Evento añadido
      si (em) {
        em.on('component:selected', () => {
          cambiado = 1;
          colorEl.spectrum('ocultar');
        });
      }
     // ++++++++++///

this.colorEl = colorEl;
    }
    return this.colorEl;
  },

Intentaba añadir esta acción dentro de las llamadas de los selectores, pero no pude y no conseguí el contexto adecuado para hacerlo.

¿Qué opinas? ¿Debería probar algo diferente o puedo enviar una solicitud de tirada?

Muchas gracias por esta excelente biblioteca, estoy aprendiendo mucho profundizando en el código fuente.

Un cordial saludo,

Juan.