Grapesjs: [QUESTION] Selection of custom components not possible from canvas.

[FrciSmrci]

Hey,

I tried to figure this out by myself, but I'm feeling I'm going a little bit in circles. So I hope you will have some time to read this through and help me with the problem.

I get an html template with multiple custom component tags => <custom-component-tag></custom-component-tag><custom-component-tag></custom-component-tag><custom-component-tag></custom-component-tag>.

For all of the components I define a new component in grapesjs as described in the documentation. For each component I render just a different view, but I don't manipulate the model, because I want the html to remain the same upon saving.

Even though the components have the following config the selection feature doesn't seem to work with them. An example code can be seen below.

I provided a screen video in which you can see that the component is visible inside the component tree and can be selected from there, but the selection is not possible from the canvas.

PS: This example component which I select in the video is highlighted, but some of the others, have an toolset for dragging etc., but aren't highlighted. This would be the second issue.

private createCustomComponent(editor) {
    const comps = editor.DomComponents;
    const defaultType = comps.getType('default');
    const defaultModel = defaultType.model;
    comps.addType('custom-component', {
      model: defaultModel.extend({
          defaults: Object.assign({}, defaultModel.prototype.defaults, {
            removable: true,
            draggable: true,
            droppable: false,
            badgable: true,
            stylable: true,
            highlightable: true,
            copyable: false,
            resizable: false,
            editable: true,
          })
        },
        {
          isComponent: function (el) {
            if (el.tagName === 'CUSTOM-COMPONENT-TAG') {
              return {type: 'custom-component'};
            }
          }
        }),
      // Define the View
      view: defaultType.view.extend({
        render: function () {
          defaultType.view.prototype.render.apply(this, arguments);
          const value = document.createElement('div');
          this.el.appendChild(value);
          console.dir(this.el);
          return this;
        },
      }),
    });
  }

Thank you in advance :)

[artf]

Hi, I'd say this is the same as #260 so your const value = document.createElement('div'); which is purely a DOM element, without a binded model, is blocking the editor to select its custom-component parent. Solution:

const value = document.createElement('div');
value.style.pointerEvents = 'none';
this.el.appendChild(value);

[FrciSmrci]

@artf thank you for this, it resolved one of the issues I encountered and saved me a lot of debugging time. :) Do you have any idea what the second issue would be about? Some of the components aren't highlighted, even though they have the same configuration as the others. I'm providing a [screenshot] of the problem.(https://drive.google.com/open?id=1ap9PR8fidQGdqjp3X9UP2x_hcFVgpaby ) I wish you a great day

[artf]

The highlight is applied via gjs-comp-selected class which uses outline property, so check via inspector what is going on, probably you have some kind of reset property on them (eg. outline: none;)

[FrciSmrci]

@artf Thank you once again, will debug with this in mind. :)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.