[Question] How to add toolbar functionality to the layers panel.

[mario-digital]

I am trying to add the toolbar to the layers panel and I am not sure how to go about this.

Is there any way to accomplish this?

toolbar

Where I would like to place them:

Thank you for your response guys!

[pouyamiralayi]

Hi there! what do you mean by toolbar? is this what you are looking for?

[mario-digital]

@pouyamiralayi This is what i mean

[MatthewMariner]

@artf Is there a way to do this? I was looking at the LayerManager and didn't see any copy/delete methods in the layer manager

[artf]

At the moment, there is no easy way to change/customize navigator items content.

What we could add next is a new callback option in configs that would be executed inside ItemView template and would allow any HTML content (similar to custom render in Blocks)

I don't have any priority on this so PRs are welcome

[hashimkhatri]

/! grapesjs - 0.16.45 / Hello guy I have customized the plugin and add delete feature in layer list,

add css: .gjs-layer-vis{ height: auto !important; width: auto !important; left: 25px; top: 0; padding: 10px 0px 10px 0px; position: absolute; cursor: pointer; z-index: 1; } .gjs-layer-delete{ height: auto !important; width: auto !important; left: 10px; top: 0; padding: 10px 0px 10px 0px; position: absolute; cursor: pointer; z-index: 1; }

//GrapesJS Initialization:

var editor = grapesjs.init({ layerManager: { appendTo: '#sitelayercomponent', deleteable:1, //add this line in your layer manager config. } })

//Package Customization Line (12596): events: { 'mousedown [data-toggle-move]': 'startSort', 'touchstart [data-toggle-move]': 'startSort', 'click [data-toggle-visible]': 'toggleVisibility', 'click [data-toggle-delete]': 'toggleDelete', //Add this line 'click [data-toggle-open]': 'toggleOpening', 'click [data-toggle-select]': 'handleSelect', 'mouseover [data-toggle-select]': 'handleHover', 'mouseout [data-toggle-select]': 'handleHoverOut', 'dblclick [data-name]': 'handleEdit', 'keydown [data-name]': 'handleEditKey', 'focusout [data-name]': 'handleEditEnd' }

Line (12616): replace return with

return "\n ".concat(odl ? "<i class=\""+e+"layer-delete fa fa-trash\" data-toggle-delete>": '').concat("\n ").concat(o ? "<i class=\"".concat(e, "layer-vis fa fa-eye ").concat(this.isVisible() ? '' : 'fa-eye-slash', "\" data-toggle-visible>") : '', "\n ").concat("<div class=\"",c, "\">\n <div class=\"").concat(l, "\" style=\"padding-left: ").concat(f, "\" data-toggle-select>\n <div class=\"").concat(e, "layer-title-inn\">\n <i class=\"").concat(u, "\" data-toggle-open>\n ").concat(g ? "<span class=\"".concat(v, "__icon\">").concat(g, "") : '', "\n <span class=\"").concat(d, "\" data-name>").concat(p, "\n

[artf]

Actually, it should be possible now to use the layerManager.onRender callback option

[Duvan1]

How could I do it with layerManager.onRender? @artf